/* ==========================================================================
   Shield & Shade — Premium Outdoor Living
   Palette taken from the materials themselves: porcelain paving, RAL 7016
   anthracite hardware, and the brand bronze.
   ========================================================================== */

:root {
  --head-h: 77px;
  --paving: #f2f1ee;
  --white: #ffffff;
  --anthracite: #2a2f33;
  --anthracite-soft: #363c41;
  --slate: #5c6367;
  --line: #dfddd7;
  --line-soft: #eae8e3;
  --bronze: #d4a24f;
  /* Retained only for focus rings: WCAG 2.2 wants a focus indicator at
     3:1 against its surroundings, and the brand gold reaches 2.05:1.
     It is no longer used for text anywhere. */
  --bronze-ink: #9a6f26;

  --wrap: 1180px;
  --gutter: 1.5rem;

  --ease: cubic-bezier(0.22, 0.68, 0.32, 1);
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/manrope-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---------- reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paving);
  color: var(--anthracite);
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ---------- type scale ---------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 4.4vw, 3.5rem);
}

h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.7rem);
}

h3 {
  font-size: 1.24rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

h4 {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

/* h2 by document structure, h3 by appearance */
.minor {
  font-size: 1.24rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

p {
  margin: 0 0 1.15rem;
  max-width: 68ch;
}

p:last-child {
  margin-bottom: 0;
}

.lede {
  font-size: clamp(1.09rem, 1.6vw, 1.28rem);
  line-height: 1.62;
  color: var(--slate);
  font-weight: 400;
  max-width: 54ch;
}

.label {
  font-size: 0.815rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--bronze);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.label::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--bronze);
  flex: none;
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(3.6rem, 8vw, 6.5rem);
}

.section--tight {
  padding-block: clamp(2.8rem, 5vw, 4rem);
}

.section--white {
  background: var(--white);
}

.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  left: 0;
  top: 0;
  background: var(--anthracite);
  color: var(--white);
  padding: 0.7rem 1.1rem;
  z-index: 200;
  border-radius: 0 0 3px 0;
}

.skip:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

:focus-visible {
  outline: 2px solid var(--bronze-ink);
  outline-offset: 3px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.55rem;
  border-radius: 3px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.btn--primary {
  background: var(--bronze);
  color: #2a2410;
  border-color: var(--bronze);
}

.btn--primary:hover {
  background: #c69340;
  border-color: #c69340;
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--anthracite);
}

.btn--ghost:hover {
  border-color: var(--anthracite);
}

.btn--onDark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--white);
}

.btn--onDark:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(242, 241, 238, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 76px;
  padding-block: 0.6rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
}

.brand__mark {
  width: 30px;
  height: 42px;
  flex: none;
}

.brand__mark path {
  fill: var(--bronze);
}

.brand__name {
  font-size: 1.115rem;
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1.05;
  color: var(--anthracite);
  white-space: nowrap;
}

/* The tagline is part of the logo lockup, not interface text, so it carries
   the true brand gold and matches the shield beside it. WCAG exempts text
   forming part of a logo from contrast requirements; the darker bronze used
   elsewhere for small type does not belong here. A little extra weight and
   tracking carries the legibility instead. */
.brand__tag {
  display: block;
  font-size: 0.615rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--bronze);
  margin-top: 3px;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.45rem;
}

.nav a {
  text-decoration: none;
  font-size: 0.935rem;
  font-weight: 500;
  color: var(--slate);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
  white-space: nowrap;
}

.nav a:hover {
  color: var(--anthracite);
}

.nav a[aria-current="page"] {
  color: var(--anthracite);
  font-weight: 700;
  border-bottom-color: var(--bronze);
}

.nav .btn {
  padding: 0.62rem 1.15rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--bronze);
}

.nav .btn:hover {
  color: #2a2410;
}

.navtoggle {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.navtoggle svg {
  width: 16px;
  height: 16px;
}

/* ---------- hero ----------
   The photograph is the page rather than a panel on it: it fills the whole
   band, and the paving background washes across it from the left so the type
   sits on the page colour and dissolves into the image. No frame, no edges. */

.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--head-h));
}

/* The wash is fully opaque across the left of the hero, so any image pixels
   under it are invisible. Starting the photo at the wash line means the same
   picture is drawn across ~2/3 of the width instead of all of it, which cuts
   the upscaling of a 1600px source almost in half. */
.hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 34%;
  overflow: hidden;
}

/* the wash moves onto the hero itself, so it still spans the full width */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    96deg,
    var(--paving) 0%,
    var(--paving) 35%,
    rgba(242, 241, 238, 0.93) 46%,
    rgba(242, 241, 238, 0.64) 57%,
    rgba(242, 241, 238, 0.24) 69%,
    rgba(242, 241, 238, 0) 81%
  );
}

/* The image is deliberately taller than its frame so the parallax drift
   never exposes an edge. Scale and drift share one transform, so the
   settle-in and the scroll movement cannot cancel each other out. */
.hero .hero__media picture {
  display: contents;
}

.hero .hero__media.reveal-img img {
  position: absolute;
  left: 0;
  top: -5%;
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: 66% 42%;
  transform: translate3d(0, var(--par, 0px), 0) scale(var(--rs, 1.06));
  opacity: 0;
  will-change: transform;
}

.hero .hero__media.reveal-img.is-in img {
  --rs: 1;
  opacity: 1;
  transition: transform 1.3s var(--ease), opacity 0.9s var(--ease);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__copy {
  max-width: 33rem;
  padding-block: clamp(3rem, 6vw, 5rem);
}

.hero__copy h1 {
  margin-bottom: 1.35rem;
  text-wrap: normal;
}

/* headline breaks: each phrase holds its own line */
.hero__copy h1 .line2,
.hero__copy h1 .accent {
  display: block;
}

/* Manrope has no italic cut, so this is a controlled slant rather than the
   browser's own synthetic oblique, with a touch less weight to stop the
   slanted heavy strokes reading as a smear. */
.accent {
  color: var(--bronze);
  font-weight: 700;
  font-style: normal;
  transform: skewX(-9deg);
  transform-origin: 0 100%;
  width: fit-content;
  margin-top: 0.12em;
}

.hero__list {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--slate);
}

.hero__list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.hero__list li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--bronze);
  border-radius: 50%;
  flex: none;
}

.scrollcue {
  position: absolute;
  bottom: clamp(1.4rem, 3vw, 2.4rem);
  left: 50%;
  width: 1px;
  height: 46px;
  background: var(--line);
  overflow: hidden;
  z-index: 3;
}

.scrollcue::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -16px;
  height: 16px;
  background: var(--bronze);
  animation: cue 2.4s var(--ease) infinite;
}

@keyframes cue {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateY(62px); opacity: 0; }
}

@media (max-width: 940px) {
  .scrollcue { display: none; }
}

/* ---------- product index list ---------- */

.index {
  border-top: 1px solid var(--line);
}

.index__row {
  display: grid;
  grid-template-columns: 92px 250px minmax(0, 1fr) 132px;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 1.9rem);
  padding: 1.55rem 1rem 1.55rem 0.25rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color 0.22s var(--ease), padding-left 0.22s var(--ease);
}

.index__row:hover,
.index__row:focus-visible {
  background: var(--white);
  padding-left: 1rem;
}

.index__icon {
  width: 92px;
  height: 62px;
}

.index__title {
  font-size: clamp(1.14rem, 1.8vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--anthracite);
  text-wrap: balance;
}

.index__desc {
  font-size: 0.94rem;
  color: var(--slate);
  line-height: 1.58;
  margin: 0;
  max-width: 62ch;
}

.index__cue {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--anthracite);
  white-space: nowrap;
  text-align: right;
}

/* ---------- split feature ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split--flip .split__figure {
  order: 2;
}

.split__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 620px;
  object-fit: cover;
  object-position: 50% 34%;
  border-radius: 3px;
}

/* A photograph shown beside the description, at its own proportions rather
   than cropped to a fixed frame. The source is only 1024px wide, so it is
   given a column it can fill at close to native resolution instead of being
   stretched across the page. */
.split__figure--photo {
  align-self: start;
}

.photofigure {
  margin: 0;
}

.photofigure picture {
  display: block;
}

.split__figure--photo img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  max-height: none;
  object-fit: fill;
  border-radius: 3px;
  display: block;
}

/* Label sitting over a stacked photograph. */
.photostack__tag {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  background: rgba(42, 47, 51, 0.82);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.68rem;
  border-radius: 2px;
}

/* Two photographs stacked inside the figure column, so a page with a pair
   reads the same as the pages carrying a single shot. */
.photostack {
  display: grid;
  gap: 0.7rem;
}

.photostack__shot {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
}

.photostack__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.photofigure figcaption {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.87rem;
  color: var(--slate);
  line-height: 1.55;
}

.subpoints {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
}

.subpoints li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.99rem;
  line-height: 1.6;
}

.subpoints li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 2px;
  background: var(--bronze);
}

.subpoints strong {
  font-weight: 700;
  display: block;
  color: var(--anthracite);
}

.subpoints span {
  color: var(--slate);
  font-size: 0.95rem;
}

/* ---------- clearance band ---------- */

.band {
  background: var(--anthracite);
  color: rgba(255, 255, 255, 0.82);
}

.band h2,
.band h3 {
  color: var(--white);
}

.band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
}

.band__aside {
  border-left: 2px solid var(--bronze);
  padding-left: 1.6rem;
}

.band__aside p {
  font-size: 0.97rem;
}

.stock-note {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1.4rem;
}

/* ---------- reasons ---------- */

.reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3.2rem);
}

.reason h3 {
  margin-bottom: 0.6rem;
  padding-top: 1.15rem;
  border-top: 2px solid var(--bronze);
}

.reason p {
  color: var(--slate);
  font-size: 0.97rem;
  margin: 0;
}

/* ---------- page header ---------- */

.pagehead {
  padding-block: clamp(2.8rem, 6vw, 4.6rem) clamp(2.2rem, 4vw, 3.2rem);
  border-bottom: 1px solid var(--line);
}

.pagehead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}

.pagehead h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
}

.crumb {
  font-size: 0.88rem;
  color: var(--slate);
  margin-bottom: 1rem;
}

.crumb a {
  text-decoration: none;
  color: var(--slate);
  border-bottom: 1px solid var(--line);
}

.crumb a:hover {
  color: var(--anthracite);
}

.crumb span {
  color: var(--bronze);
  margin-inline: 0.45rem;
}

/* ---------- technical figure ---------- */

.figure {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(1.2rem, 2.6vw, 1.9rem);
}

.figure svg {
  width: 100%;
  height: auto;
}

.figure text {
  stroke: none;
}

.figure figcaption {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.87rem;
  color: var(--slate);
  line-height: 1.55;
}

/* ---------- content columns ---------- */

.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3.4rem);
}

.cols--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.block h3 {
  margin-bottom: 0.7rem;
}

.split h2 + div > h3:first-child {
  margin-top: 0.4rem;
}

.block p {
  color: var(--slate);
  font-size: 0.99rem;
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.checks li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.99rem;
  color: var(--slate);
  line-height: 1.55;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--bronze);
  border-bottom: 2px solid var(--bronze);
  transform: rotate(-45deg);
}

/* ---------- faq ---------- */

.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-weight: 700;
  font-size: 1.03rem;
  letter-spacing: -0.015em;
  line-height: 1.4;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 0.45rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--bronze);
  border-bottom: 2px solid var(--bronze);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.faq details[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

.faq details p {
  color: var(--slate);
  font-size: 0.99rem;
  padding-bottom: 1.35rem;
  padding-right: 2.5rem;
  margin: 0;
  max-width: 76ch;
}

.subsection {
  margin-top: clamp(3rem, 6vw, 4.75rem);
  padding-top: clamp(2.4rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line);
}

/* ---------- cta strip ---------- */

.cta {
  background: var(--white);
  border-top: 1px solid var(--line);
}

.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.cta__grid p {
  color: var(--slate);
  margin: 0.7rem 0 0;
}

/* ---------- form ---------- */

.formwrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
}

.field {
  margin-bottom: 1.3rem;
}

.field > label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.field .opt {
  font-weight: 500;
  color: var(--slate);
}

.field .hint {
  font-size: 0.84rem;
  color: var(--slate);
  margin: 0.4rem 0 0;
  line-height: 1.5;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paving);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  background: var(--white);
  border-color: var(--bronze);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 162, 79, 0.18);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.formnote {
  font-size: 0.86rem;
  color: var(--slate);
  margin-top: 1.1rem;
  line-height: 1.55;
}

.formstatus {
  display: none;
  border: 1px solid var(--bronze);
  background: rgba(212, 162, 79, 0.12);
  border-radius: 3px;
  padding: 1.15rem 1.3rem;
  margin-bottom: 1.5rem;
}

.formstatus.is-visible {
  display: block;
}

/* A failed send must never look like the bronze confirmation. */
.formstatus--error {
  border-color: #b3402f;
  background: #fdf6f5;
}

.formstatus h2 {
  margin-bottom: 0.4rem;
}

.formstatus p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--slate);
}

.contactcard {
  border-top: 2px solid var(--bronze);
  padding-top: 1.4rem;
  margin-bottom: 2.2rem;
}

.contactcard dt {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--slate);
  margin-top: 1.1rem;
}

.contactcard dd {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.contactcard dd a {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.contactcard dd a:hover {
  border-color: var(--bronze);
}

/* ---------- footer ---------- */

.foot {
  background: var(--anthracite);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.93rem;
  padding-block: clamp(2.8rem, 5vw, 4rem) 2rem;
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3.5rem);
  padding-bottom: 2.4rem;
}

.foot h2 {
  color: var(--white);
  font-size: 0.87rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.foot a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.foot a:hover {
  color: var(--white);
}

/* Header and footer lockups are identical in CSS, but white type on a dark
   ground reads heavier and tighter than dark type on a light one — the eye
   bleeds light into the surrounding dark. So the reversed-out version takes
   one step down in weight and a little more tracking to LOOK like the same
   logo. Matching the numbers here would mean not matching the appearance. */
.foot .brand__name {
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.012em;
}

.foot .brand {
  margin-bottom: 1.1rem;
}

.foot__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- social links ---------- */

.foot .socials,
.socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.foot .socials a,
.socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.socials a:hover {
  color: var(--white);
  border-color: var(--bronze);
  background: rgba(212, 162, 79, 0.12);
}

.socials svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  flex: none;
}

/* on light backgrounds */
.socials--light a {
  border-color: var(--line);
  color: var(--anthracite);
  background: var(--white);
}

.socials--light a:hover {
  border-color: var(--bronze);
  color: var(--anthracite);
  background: rgba(212, 162, 79, 0.1);
}

/* ---------- motion ----------
   One vocabulary, one easing curve. Content settles into place; nothing
   slides, bounces or moves sideways. Everything here is switched off
   entirely under prefers-reduced-motion.                                  */

/* Both states keep a 3D transform. Ending on `none` makes the browser drop
   the element out of its composited layer on the final frame and re-rasterise
   the glyphs, which shows up as a small snap just as the movement stops. */
.rise {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  backface-visibility: hidden;
}

.rise.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* Headings settle into place rather than travelling. Same idea as the
   photographs — a fade with a barely-there easing out of scale — so the
   type and the imagery share one gesture. No vertical movement. */
.reveal-head > span {
  display: block;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.018);
  transform-origin: 0 50%;
  backface-visibility: hidden;
}

.reveal-head.is-in > span {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 0.85s var(--ease), transform 1.05s var(--ease);
}

/* photographs settle rather than appear */
.reveal-img {
  overflow: hidden;
}

.reveal-img img {
  transform: translate3d(0, 0, 0) scale(1.07);
  opacity: 0;
  backface-visibility: hidden;
  transition: transform 1.25s var(--ease), opacity 0.9s var(--ease);
}

.reveal-img.is-in img {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

/* the technical elevations draw themselves in */
.figure svg [data-draw] {
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.4s var(--ease);
}

.figure.is-in svg [data-draw] {
  stroke-dashoffset: 0;
}

.figure svg text {
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.75s;
}

.figure.is-in svg text {
  opacity: 1;
}

/* masthead tightens once you leave the hero */
.masthead {
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.masthead.is-scrolled {
  box-shadow: 0 10px 24px -20px rgba(42, 47, 51, 0.55);
}



@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .rise,
  .rise.is-in,
  .reveal-head > span,
  .reveal-head.is-in > span,
  .reveal-img img,
  .reveal-img.is-in img,
  .figure svg text {
    opacity: 1;
    transform: none !important;
    clip-path: none;
    transition: none;
  }
  .figure svg [data-draw] {
    stroke-dashoffset: 0 !important;
  }
  .scrollcue::after {
    animation: none;
    opacity: 0;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 1040px) {
  .nav {
    gap: 1rem;
  }
  .nav a {
    font-size: 0.885rem;
  }
}

@media (max-width: 940px) {
  .navtoggle {
    display: inline-flex;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.35rem;
    box-shadow: 0 18px 30px -22px rgba(42, 47, 51, 0.4);
  }
  .nav.is-open {
    display: flex;
  }
  .nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1rem;
  }
  .nav a[aria-current="page"] {
    border-bottom-color: var(--bronze);
    color: var(--anthracite);
  }
  .nav .btn {
    margin-top: 1rem;
    border-bottom: 1px solid var(--bronze);
    justify-content: center;
  }
  /* The header stays put on a phone too. The page runs to several screens,
     and the quote button and phone number should never be more than a tap
     away. The dropdown positions against .masthead__inner, so the sticky
     header does not affect it. */
  .masthead__inner {
    position: relative;
  }

  .split,
  .band__grid,
  .cta__grid,
  .formwrap,
  .pagehead__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* A phone screen is far taller in proportion than the photograph, so
     filling it outright would crop a third off each side. The picture keeps
     its own 3:4 shape at the top of a full-height hero, so nothing is
     cropped and nothing is scaled up. The type is anchored to the bottom of
     the screen rather than to the photo, which pushes it clear of most of
     the picture while keeping the quote button and phone number above the
     fold. */
  .hero {
    display: block;
    position: relative;
    /* fill the screen so the next section never shows on landing */
    min-height: calc(100svh - var(--head-h));
  }
  .hero__media {
    position: relative;
    inset: auto;
    left: auto;
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
  }
  .hero__inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: linear-gradient(
      to bottom,
      rgba(242, 241, 238, 0) 0%,
      rgba(242, 241, 238, 0.62) 14%,
      rgba(242, 241, 238, 0.94) 26%,
      var(--paving) 38%,
      var(--paving) 100%
    );
  }
  .hero::after {
    display: none;
  }
  .hero .hero__media picture {
  display: contents;
}

  /* On a phone the landscape photo is cropped hard by the upright frame, so
     it is panned right to bring the end of the awning and a little of the
     tree canopy into view. Desktop keeps its own framing. */
  .hero .hero__media.reveal-img img {
    object-position: 58% 46%;
  }
  .hero__media::after {
    background: linear-gradient(
      to bottom,
      var(--paving) 0%,
      rgba(242, 241, 238, 0.72) 12%,
      rgba(242, 241, 238, 0) 34%
    );
  }
  .hero__copy {
    max-width: none;
    padding-block: 3.2rem 1.6rem;
  }
  .hero__list {
    display: none;
  }
  .split--flip .split__figure {
    order: 0;
  }
  .split__figure img {
    max-height: 460px;
  }
  .index__row {
    grid-template-columns: 80px minmax(0, 1fr) 120px;
  }
  .index__title {
    margin-bottom: 0.25rem;
  }
  .reasons,
  .cols--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .band__aside {
    border-left: 0;
    border-top: 2px solid var(--bronze);
    padding-left: 0;
    padding-top: 1.4rem;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 1.02rem;
  }
  .foot ul:not(.socials) {
    gap: 0;
  }
  .foot ul:not(.socials) a {
    display: inline-block;
    padding-block: 0.6rem;
  }
  .contactcard dd {
    font-size: 1.1rem;
  }
  .contactcard dd a {
    display: inline-block;
    padding-block: 0.35rem;
  }
  .crumb a {
    display: inline-block;
    padding-block: 0.45rem;
  }
  .hero__list {
    gap: 0.25rem 1.3rem;
  }
  .index__row {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0.35rem 1.1rem;
    padding-block: 1.3rem;
  }
  .index__icon {
    grid-row: span 2;
    align-self: start;
    margin-top: 0.2rem;
  }
  .index__title {
    font-size: 1.14rem;
  }
  .index__icon {
    width: 56px;
    height: 40px;
  }
  .index__cue {
    grid-column: 2;
    font-size: 0.87rem;
    margin-top: 0.35rem;
    text-align: left;
  }
  .cols,
  .field--pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .field--pair {
    gap: 1.3rem;
  }
  .btn-row .btn {
    flex: 1 1 auto;
  }
  .hero__copy .btn-row {
    flex-wrap: nowrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
  }
  .hero__copy .btn-row .btn {
    padding-inline: 0.7rem;
    font-size: 0.92rem;
    white-space: nowrap;
  }
  .foot__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}