/* ═══════════════════════════════════════════════════════════
   WAGNER LEGACY HOMES
   "The Commission Set" — architectural drawing vernacular in
   warm materials, drawn from the client's own work: limestone,
   cream millwork, white oak, matte black fixtures, daylight.
   Fraunces (display) · Archivo (sans) · IBM Plex Mono (annotations)

   Phase 2 repalette: the body of the page is light. The near-black
   + brass scheme fought the photography (warm greige tile, cream
   cabinetry, matte black hardware).

   Two dark plates are kept deliberately, bookending the page: the
   HERO (with its self-drafting brass elevation) and the FOOTER.
   Brass belongs to those two places only — see --brass below.
═══════════════════════════════════════════════════════════ */

/* ---------- Design tokens ---------- */
:root {
  /* Materials — warm stone */
  --limestone:  #EDE8E0;   /* page background */
  --cream:      #FAF7F2;   /* cards, raised surfaces */
  --warm-grey:  #D8D1C7;   /* hairlines, borders */
  --stone-deep: #675E51;   /* muted body / meta text (5.26:1 on limestone) */
  --oak:        #B08D5F;   /* sparse accent, light-on-dark */
  --clay:       #9C6B4F;   /* sparse accent */
  --clay-dk:    #7D5540;   /* accent text on light (5.31:1 on limestone) */
  --matte-black:#1A1917;   /* headings, body, solid CTA */

  /* Brass — the ONLY two consumers are the dark hero plate and the nav while
     it sits over that hero. Deliberately not used anywhere in the light body
     of the site; if you find it creeping into a light section, that's a bug. */
  --brass:      #C9A84C;
  --brass-lt:   #DFC07A;
  --brass-dk:   #9E7E2E;

  /* Legacy aliases — the drawing-set detailing is keyed to these
     names throughout; remapped rather than renamed at ~200 sites. */
  --ink:        var(--matte-black);
  --char-1:     #24221E;
  --char-2:     #2E2B27;
  --char-3:     #3A3630;
  --gold:       var(--clay);
  --gold-lt:    var(--oak);
  --gold-dk:    var(--clay-dk);
  --stone:      var(--stone-deep);
  --stone-lt:   #9A9080;   /* body text on the dark footer (5.54:1) */
  --parchment:  var(--limestone);
  --parchment-2:#E6E0D6;
  --white:      var(--cream);
  --text-body:  #3A3630;

  /* Semantic (light section defaults) */
  --bg:         var(--limestone);
  --fg:         var(--text-body);
  --heading:    #201D18;
  --muted:      var(--stone-deep);
  --hair:       rgba(58, 54, 48, 0.16);

  /* Type */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Archivo", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono:  "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  /* Motion */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);

  /* Rhythm */
  --wrap:     1280px;
  --gutter:   clamp(1.25rem, 5vw, 5rem);
  --section-y: clamp(5rem, 10vw, 9.5rem);
  --sheet-inset: clamp(0.85rem, 1.6vw, 1.75rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--sans);
  font-weight: 400;
  background: var(--limestone);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ol, ul { list-style: none; }
::selection { background: var(--matte-black); color: var(--cream); }

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 300; background: var(--matte-black); color: var(--cream);
  padding: 0.7rem 1.4rem; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; border-radius: 0 0 3px 3px;
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--matte-black);
  outline-offset: 3px;
  border-radius: 1px;
}

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

.eyebrow {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(0.62rem, 0.9vw, 0.72rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
}
/* --clay (#9C6B4F) only reaches 3.7:1 on limestone; the darker clay clears AA. */
.eyebrow--accent { color: var(--clay-dk); }
.eyebrow__tick {
  width: 1.9em; height: 1px; background: currentColor; opacity: 0.55;
  display: inline-block; flex: none;
}

.section { padding-block: var(--section-y); position: relative; }

.section-head { max-width: 46rem; margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.section-head__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin-top: 1.1rem;
}
.section-head__title em { font-style: italic; color: var(--gold-dk); }
.section-head--split {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end; max-width: none;
}
.section-head__note {
  font-size: 0.9rem; color: var(--muted); line-height: 1.7; max-width: 26rem;
  padding-bottom: 0.3rem;
}

/* Shared display phrase */
.phrase {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 4.25rem);
  line-height: 1.02; letter-spacing: -0.02em; color: var(--heading);
}
.phrase em { font-style: italic; color: var(--gold-dk); }

/* ---------- Buttons ---------- */
.btn {
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--sans); font-weight: 400;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 1.05em 1.9em; border: 1px solid transparent;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.4s var(--ease);
  position: relative; white-space: nowrap;
}
.btn--solid { background: var(--matte-black); color: var(--cream); }
.btn--solid:hover { background: #332F2A; transform: translateY(-2px); }
.btn--line { border-color: rgba(26,25,23,0.35); color: inherit; }
.btn--line:hover { background: rgba(26,25,23,0.06); border-color: var(--matte-black); color: var(--matte-black); }
.btn--ghost { border-color: rgba(26,25,23,0.4); color: var(--matte-black); padding: 0.85em 1.5em; }
.btn--ghost:hover { border-color: var(--matte-black); background: rgba(26,25,23,0.06); }
.btn--full { width: 100%; }

.link-arrow {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-dk);
  display: inline-flex; align-items: center; gap: 0.6em; padding-bottom: 0.2em;
  border-bottom: 1px solid currentColor;
  transition: gap 0.35s var(--ease), color 0.35s var(--ease);
}
.link-arrow:hover { gap: 1em; color: var(--gold); }

/* "To be confirmed" placeholder marks — clearly not real data */
.tbd {
  background: rgba(156,107,79,0.14);
  /* clay-dk only reaches 4.25:1 against its own tint — this clears AA (5.8:1). */
  color: #6B4735;
  padding: 0.05em 0.4em; border-radius: 2px;
  font-style: normal;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.tbd--inline {
  font-family: var(--mono); font-size: 0.62em; letter-spacing: 0.08em;
  text-transform: uppercase; vertical-align: middle;
  background: none; color: var(--stone-deep); opacity: 1; padding: 0;
}
.tbd--block { display: inline; }
/* The footer is the one dark surface, so the light-page muted tone fails there. */
.footer .tbd--inline { color: var(--stone-lt); }

/* ═══════════════════════════════════════════════════════════
   SHEET FRAME — ambient signature
═══════════════════════════════════════════════════════════ */
/* The frame is fixed, so it crosses both the dark hero and the light body.
   Difference blending lets one colour read against both. */
.sheet {
  position: fixed; inset: var(--sheet-inset); z-index: 4;
  pointer-events: none; mix-blend-mode: difference;
}
.sheet__tick {
  position: absolute; width: 14px; height: 14px;
  border-color: rgba(176,168,152,0.5); border-style: solid; border-width: 0;
}
.sheet__tick--tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.sheet__tick--tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.sheet__tick--bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.sheet__tick--br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.sheet__rail {
  position: absolute; top: 50%;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.3em;
  color: rgba(184,176,158,0.85); white-space: nowrap;
}
.sheet__rail--l { left: -0.2rem; transform: rotate(-90deg); transform-origin: left center; translate: 0 -50%; }
.sheet__rail--r { right: -0.2rem; transform: rotate(90deg); transform-origin: right center; translate: 0 -50%; }
@media (max-width: 1024px) { .sheet { display: none; } }

/* ═══════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease),
              border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.5rem) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.nav.is-scrolled {
  background: rgba(237,232,224,0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--warm-grey);
}
.nav.is-scrolled .nav__inner { padding-block: clamp(0.7rem, 1.4vw, 1rem); }

/* ── Nav over the dark hero ──────────────────────────────────────────────
   The nav is transparent until it scrolls, so on the homepage it sits on the
   dark hero and has to invert. Once `.is-scrolled` gives it a solid limestone
   bar it reverts to the normal dark-on-light treatment. Scoped to
   `body.has-dark-hero` so project pages — which open light — are untouched. */
.has-dark-hero .nav:not(.is-scrolled) .brand { color: var(--cream); }
.has-dark-hero .nav:not(.is-scrolled) .brand__mark,
.has-dark-hero .nav:not(.is-scrolled) .brand__sub { color: var(--brass); }
.has-dark-hero .nav:not(.is-scrolled) .nav__links a { color: var(--stone-lt); }
.has-dark-hero .nav:not(.is-scrolled) .nav__links a:hover { color: var(--cream); }
.has-dark-hero .nav:not(.is-scrolled) .nav__links a::after { background: var(--brass); }
.has-dark-hero .nav:not(.is-scrolled) .nav__phone { color: var(--stone-lt); }
.has-dark-hero .nav:not(.is-scrolled) .nav__phone:hover { color: var(--cream); }
.has-dark-hero .nav:not(.is-scrolled) .nav__phone svg { color: var(--brass); }
.has-dark-hero .nav:not(.is-scrolled) .nav__cta {
  border-color: rgba(201,168,76,0.5); color: var(--brass);
}
.has-dark-hero .nav:not(.is-scrolled) .nav__cta:hover {
  border-color: var(--brass); background: rgba(201,168,76,0.08);
}
.has-dark-hero .nav:not(.is-scrolled) .nav__toggle { color: var(--cream); }
.has-dark-hero .nav:not(.is-scrolled) .nav__toggle-bars i { background: var(--brass); }
/* The mobile menu overlay is light, so its own toggle must stay dark on it. */
.has-dark-hero.is-menu-open .nav:not(.is-scrolled) .nav__toggle { color: var(--matte-black); }
.has-dark-hero.is-menu-open .nav:not(.is-scrolled) .nav__toggle-bars i { background: var(--matte-black); }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--matte-black); }
.brand__mark { width: 34px; height: 34px; color: var(--clay); flex: none; }
.brand__type { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--serif); font-weight: 500; font-size: 1.32rem;
  letter-spacing: 0.02em; color: inherit;
}
.brand__sub {
  font-family: var(--mono); font-weight: 400; font-size: 0.56rem;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--clay-dk); margin-top: 0.28rem;
}

.nav__links { display: flex; gap: clamp(1.4rem, 2.5vw, 2.6rem); }
.nav__links a {
  font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--stone-deep); position: relative; padding-block: 0.3rem;
  transition: color 0.3s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--clay); transition: width 0.35s var(--ease);
}
.nav__links a:hover { color: var(--matte-black); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { color: var(--matte-black); }

/* Mobile toggle */
.nav__toggle { display: none; align-items: center; gap: 0.6rem; color: var(--matte-black); }
.nav__toggle-label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.nav__toggle-bars { display: inline-flex; flex-direction: column; gap: 5px; width: 24px; }
.nav__toggle-bars i {
  height: 1.5px; background: var(--matte-black); width: 100%;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.is-menu-open .nav__toggle-bars i:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.is-menu-open .nav__toggle-bars i:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* Mobile menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--limestone);
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.is-menu-open .menu { opacity: 1; visibility: visible; }
.menu__nav { display: flex; flex-direction: column; gap: 0.4rem; }
.menu__nav a {
  font-family: var(--serif); font-size: clamp(2rem, 9vw, 3rem); font-weight: 400;
  color: var(--heading); display: flex; align-items: baseline; gap: 1rem;
  padding-block: 0.35rem; opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s;
}
.is-menu-open .menu__nav a { opacity: 1; transform: none; }
.menu__nav a:nth-child(1) { transition-delay: 0.08s; }
.menu__nav a:nth-child(2) { transition-delay: 0.13s; }
.menu__nav a:nth-child(3) { transition-delay: 0.18s; }
.menu__nav a:nth-child(4) { transition-delay: 0.23s; }
.menu__nav a:nth-child(5) { transition-delay: 0.28s; }
.menu__nav a:nth-child(6) { transition-delay: 0.33s; }
.menu__nav a:nth-child(7) { transition-delay: 0.38s; }
.menu__nav a:nth-child(8) { transition-delay: 0.43s; }
.menu__nav a:hover { color: var(--clay-dk); }
.menu__no {
  font-family: var(--mono); font-size: 0.8rem; color: var(--clay-dk); letter-spacing: 0.1em;
}
.menu__foot {
  margin-top: 3rem; display: flex; flex-direction: column; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--stone-deep);
}
.menu__foot a { color: var(--clay-dk); }

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
/* The hero is the one place the original ink-and-brass treatment is kept:
   a dark plate with a self-drafting elevation, bookending the dark footer at
   the other end of the page. The brass below is deliberately scoped here and
   must not leak back into the light body of the site. */
.hero {
  position: relative; background: var(--ink); color: var(--parchment);
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(7rem, 14vh, 11rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  overflow: hidden;
}
.hero::before { /* warm brass wash from lower-right */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 88% 92%, rgba(201,168,76,0.14), transparent 55%),
    radial-gradient(100% 80% at 8% 0%, rgba(46,43,37,0.9), transparent 60%);
}
.hero::after { /* fine paper grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.hero__grid {
  position: relative; z-index: 1;
  max-width: var(--wrap); margin-inline: auto; width: 100%;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__copy { max-width: 40rem; }
.hero__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  line-height: 1.02; letter-spacing: -0.025em;
  color: var(--white); margin: clamp(1.2rem, 3vw, 1.8rem) 0;
}
.hero__title em {
  font-style: italic; font-weight: 400;
  color: var(--brass);
}
/* Top line set in engraved caps to match the client's mark; em stays gold italic */
.hero__stand { text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400; }
.hero__lede {
  font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7;
  color: var(--stone-lt); max-width: 34rem; font-weight: 400;
}
.hero__actions {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  display: flex; flex-wrap: wrap; gap: 1rem;
}

/* Buttons and eyebrow are styled for the light page, so the hero re-states
   them for its dark ground. */
.hero .eyebrow--accent { color: var(--brass); }
.hero .btn--solid { background: var(--brass); color: var(--ink); }
.hero .btn--solid:hover { background: var(--brass-lt); }
.hero .btn--line { border-color: rgba(223,192,122,0.45); color: var(--parchment); }
.hero .btn--line:hover {
  background: rgba(201,168,76,0.1); border-color: var(--brass); color: var(--brass);
}

/* Elevation plate — draws itself in on load (see [data-draw] in main.js) */
.hero__plate { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.elevation { width: 100%; height: auto; }
.elevation .ln {
  stroke: var(--brass-lt); stroke-width: 1.1; stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}
.elevation .ln--faint { stroke: var(--stone-lt); opacity: 0.55; }
.elevation .ln--dim { stroke: var(--brass-dk); stroke-width: 0.8; opacity: 0.7; }
.hero__titleblock {
  margin-top: 1.4rem; padding-top: 0.9rem; border-top: 1px solid rgba(201,168,76,0.25);
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--stone-lt);
}

/* Scroll cue */
.hero__scroll {
  position: relative; z-index: 1; margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--stone-lt);
  align-self: center;
}
.hero__scroll-line {
  width: 1px; height: 44px; background: linear-gradient(var(--brass), transparent);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: var(--brass-lt);
  animation: scrollpulse 2.4s var(--ease-io) infinite;
}
@keyframes scrollpulse {
  0% { transform: translateY(0); } 60%, 100% { transform: translateY(300%); }
}

/* ═══════════════════════════════════════════════════════════
   PHILOSOPHY  (light)
═══════════════════════════════════════════════════════════ */
.philosophy { background: var(--parchment); color: var(--text-body); }
.philosophy__grid {
  display: grid; grid-template-columns: 0.28fr 0.72fr; gap: clamp(1.5rem, 4vw, 3rem);
}
.philosophy__label { padding-top: 0.7rem; }
.philosophy__cols {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
}
.philosophy__cols p { font-size: 1.02rem; line-height: 1.8; color: var(--text-body); max-width: 34ch; }
.signature {
  margin-top: clamp(2rem, 5vw, 3rem);
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--stone);
}

/* ═══════════════════════════════════════════════════════════
   STATS  (dark band)
═══════════════════════════════════════════════════════════ */
.stats {
  background: var(--cream); color: var(--text-body);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--warm-grey);
  border-bottom: 1px solid var(--warm-grey);
}
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem);
}
.stat { display: flex; flex-direction: column; gap: 0.6rem; position: relative; padding-left: 1.4rem; }
.stat::before {
  content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 1px;
  background: linear-gradient(var(--clay), transparent);
}
.stat__num {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5.5vw, 4rem);
  line-height: 1; color: var(--heading); letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__num--word { font-style: italic; color: var(--heading); }
.stat__plus { color: var(--clay-dk); font-style: normal; }
.stat__label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--stone-deep); line-height: 1.5; max-width: 16ch;
}

/* ═══════════════════════════════════════════════════════════
   SERVICES  (light) — index + preview
═══════════════════════════════════════════════════════════ */
.services { background: var(--parchment-2); color: var(--text-body); }
.services__layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.services__index { border-top: 1px solid var(--hair); }
.svc {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 1.2rem; text-align: left; padding: clamp(1.1rem, 2.4vw, 1.7rem) 0;
  border-bottom: 1px solid var(--hair);
  transition: padding-left 0.4s var(--ease), color 0.3s var(--ease);
  color: var(--stone);
}
.svc__no {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-body);
  transition: color 0.3s var(--ease);
}
.svc__name {
  font-family: var(--serif); font-size: clamp(1.55rem, 3.4vw, 2.05rem); font-weight: 400;
  line-height: 1.1; color: var(--heading); transition: color 0.3s var(--ease);
}
.svc__arrow {
  font-family: var(--sans); color: var(--gold-dk); opacity: 0;
  transform: translateX(-8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.svc:hover, .svc[aria-expanded="true"] { padding-left: clamp(0.6rem, 1.6vw, 1.3rem); }
.svc:hover .svc__name, .svc[aria-expanded="true"] .svc__name { color: var(--gold-dk); }
.svc[aria-expanded="true"] .svc__arrow, .svc:hover .svc__arrow { opacity: 1; transform: none; }
.svc[aria-expanded="true"] .svc__no { color: var(--heading); }

/* Preview */
.services__preview { position: relative; min-height: 30rem; }
.svc-panel {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transform: translateY(14px); pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0.5s;
}
.svc-panel.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; position: relative; }
.svc-panel__text { margin-top: 1.6rem; }
.svc-panel__text h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--heading);
  margin-bottom: 0.6rem;
}
.svc-panel__text p { font-size: 0.98rem; line-height: 1.75; color: var(--text-body); max-width: 40ch; }

/* ═══════════════════════════════════════════════════════════
   IMAGE PLACEHOLDERS (.ph) — designed, not broken
   Replace inner content with <img> to go live.
═══════════════════════════════════════════════════════════ */
.ph {
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(176,141,95,0.06), transparent 60%),
    linear-gradient(var(--warm-grey), #C9C1B4);
  border: 1px solid var(--warm-grey);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
}
.ph::before { /* corner ticks + label from data-ph */
  content: attr(data-ph);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--stone-deep); padding: 2rem;
}
.ph::after { /* faint framing inset */
  content: ""; position: absolute; inset: 0.85rem; pointer-events: none;
  border: 1px solid rgba(250,247,242,0.32);
}
.ph--tall { aspect-ratio: 3 / 4; }
.ph__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.7rem 0.9rem;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  /* Sits over photography, so the scrim has to carry the contrast on its own. */
  color: var(--cream); background: linear-gradient(transparent, rgba(26,25,23,0.88) 45%);
  padding-top: 2rem; text-align: center; z-index: 2;
}
/* Empty-state placeholder: centered gable mark + label */
.ph--empty::before { content: none; }
.ph__empty {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; color: var(--stone-deep); text-align: center; padding: 1rem;
  transition: color 0.4s var(--ease);
}
.ph__glyph {
  width: clamp(34px, 4vw, 54px); height: auto; color: var(--clay-dk); opacity: 0.6;
  transition: opacity 0.45s var(--ease), transform 0.5s var(--ease);
}
.ph__pending {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase;
}
/* Real photography fills the placeholder frame; caption + framing inset sit above it */
.ph__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ═══════════════════════════════════════════════════════════
   SELECTED WORK  (dark)
═══════════════════════════════════════════════════════════ */
.work { background: var(--limestone); color: var(--text-body); }
.work .section-head__title { color: var(--heading); }
.work .section-head__title em { color: var(--clay-dk); }
.work__grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.work__item {
  grid-column: span 2; margin: 0;
  display: flex; flex-direction: column;
}
.work__item--lg { grid-column: span 4; grid-row: span 2; }
.work__item--wide { grid-column: span 4; }
/* The whole card is the link — the caption travels with the image. */
.work__link { display: flex; flex-direction: column; height: 100%; }
.work__tag {
  position: absolute; z-index: 2; top: 0.85rem; left: 0.85rem;
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--matte-black); color: var(--cream); padding: 0.45em 0.8em;
}
.work__item .ph {
  aspect-ratio: auto; flex: 1 1 auto; min-height: 15rem;
  transition: border-color 0.5s var(--ease);
}
.work__item--lg .ph { min-height: 30rem; }
.work__item .ph::after { transition: inset 0.6s var(--ease); }
.work__item:hover .ph { border-color: var(--clay); }
.work__item:hover .ph::after { inset: 0.45rem; }
.work__item:hover .ph__glyph { opacity: 0.95; transform: translateY(-3px); }
.work__item:hover .ph__empty { color: var(--stone-deep); }
.work__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-top: 0.9rem; flex-wrap: wrap;
}
.work__cap-name { font-family: var(--serif); font-size: 1.15rem; color: var(--heading); }
.work__cap-meta {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone-deep);
}
.work__more { margin-top: clamp(2rem, 4vw, 3rem); }

/* ═══════════════════════════════════════════════════════════
   PROCESS  (light) — drawn timeline
═══════════════════════════════════════════════════════════ */
.process { background: var(--parchment); color: var(--text-body); }
.timeline { position: relative; margin-left: clamp(0, 2vw, 1rem); }
.timeline__spine {
  position: absolute; left: clamp(1.1rem, 3vw, 1.6rem); top: 0.5rem; bottom: 0.5rem; width: 1px;
  background: var(--hair);
}
.timeline__spine-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(var(--gold), var(--gold-dk));
  transition: height 0.15s linear;
}
.timeline__list { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.2rem); }
.step {
  position: relative; display: grid;
  grid-template-columns: clamp(2.4rem, 6vw, 3.4rem) 1fr; gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
.step__no {
  font-family: var(--mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.05em;
  color: var(--gold-dk); background: var(--parchment);
  width: clamp(2.4rem, 6vw, 3.4rem); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--gold-dk);
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.step__body { padding-top: 0.25rem; max-width: 44rem; }
.step__title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 3vw, 1.85rem);
  color: var(--heading); margin-bottom: 0.5rem; letter-spacing: -0.01em;
}
.step__text { font-size: 1rem; line-height: 1.75; color: var(--text-body); }

/* Wide screens: heading pinned left, steps right, the same split as the FAQ.
   Single column left the right half of a 1,600px-tall section empty. */
@media (min-width: 1025px) {
  .process .wrap {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 6vw, 6rem); align-items: start;
  }
  .process .section-head { position: sticky; top: 7.5rem; margin-bottom: 0; }
  .process .timeline__list { gap: clamp(2rem, 3vw, 2.6rem); }
}

/* ═══════════════════════════════════════════════════════════
   THE WAGNER STANDARD  (dark)
═══════════════════════════════════════════════════════════ */
.standard { background: var(--cream); color: var(--text-body); }
.standard .section-head__title { color: var(--heading); }
.standard .section-head__title em { color: var(--clay-dk); }
.pillars {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--warm-grey);
  border: 1px solid var(--warm-grey);
}
.pillar {
  background: var(--cream); padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: background 0.4s var(--ease);
}
.pillar:hover { background: var(--limestone); }
.pillar__no {
  font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--clay-dk);
  text-transform: lowercase;
}
.pillar__title {
  font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--heading);
  line-height: 1.15;
}
.pillar__text { font-size: 0.92rem; line-height: 1.7; color: var(--stone-deep); }

/* ═══════════════════════════════════════════════════════════
   ASSURANCES  (light)
═══════════════════════════════════════════════════════════ */
.assurances { background: var(--parchment-2); color: var(--text-body); }
.assurances__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.assurances__lede {
  margin-top: 1.4rem; font-size: 1rem; line-height: 1.75; color: var(--text-body); max-width: 32ch;
}
.assurances__badge {
  margin-top: 2rem; display: flex; flex-direction: column; gap: 0.5rem;
  padding-top: 1.4rem; border-top: 1px solid var(--hair);
}
.assurances__badge-line {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-dk);
}
.assurances__badge-note { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--stone); }
.assurances__list { border-top: 1px solid var(--hair); }
.assure {
  display: grid; grid-template-columns: 0.42fr 0.58fr; gap: 1.4rem;
  padding: clamp(1.2rem, 2.5vw, 1.7rem) 0; border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.assure__k {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-dk);
}
.assure__v { font-size: 1.02rem; line-height: 1.6; color: var(--heading); }

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS  (dark)
═══════════════════════════════════════════════════════════ */
.voices { background: var(--limestone); color: var(--text-body); }
.voices .section-head__title { color: var(--heading); }
.voices .section-head__title em { color: var(--clay-dk); }
.voices__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem);
}
.quote {
  border: 1px solid var(--warm-grey); padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1.2rem; position: relative;
  background: var(--cream);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.quote:hover { border-color: var(--clay); transform: translateY(-4px); }
.quote__mark {
  font-family: var(--serif); font-size: 3.5rem; line-height: 0.5; color: var(--clay-dk);
  height: 1rem;
}
.quote__text {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.55; color: var(--heading);
}
.tbd--block {
  background: none; padding: 0; color: var(--stone-deep); font-style: italic;
  border-left: 2px solid var(--clay); padding-left: 0.9rem; display: block;
}
.quote__by {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stone-deep); margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT  (dark)
═══════════════════════════════════════════════════════════ */
.contact { background: var(--parchment-2); color: var(--text-body); }
.contact__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact__title {
  font-family: var(--serif); font-weight: 300; font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--heading); margin-top: 1.1rem;
}
.contact__title em { font-style: italic; color: var(--clay-dk); }
.contact__lede { margin-top: 1.4rem; color: var(--text-body); line-height: 1.75; max-width: 34ch; }
.contact__facts { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 1.3rem; }
.contact__fact { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: baseline; }
.contact__fact dt {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--clay-dk);
}
.contact__fact dd { color: var(--heading); font-size: 0.98rem; }
.contact__fact a { border-bottom: 1px solid var(--clay); transition: border-color 0.3s; }
.contact__fact a:hover { border-color: var(--matte-black); }

/* Form */
.form {
  background: var(--cream); border: 1px solid var(--warm-grey);
  padding: clamp(1.6rem, 3.5vw, 2.6rem); position: relative;
}
.field { margin-bottom: 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field label {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stone-deep);
}
.field__opt { color: var(--stone-deep); text-transform: none; letter-spacing: 0.04em; }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-weight: 400; font-size: 0.98rem; color: var(--heading);
  background: var(--limestone); border: 1px solid var(--warm-grey);
  padding: 0.85rem 1rem; width: 100%; transition: border-color 0.3s var(--ease), background 0.3s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--stone-deep); opacity: 0.85; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--matte-black); background: var(--cream); outline: none;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; }
.select-wrap__arrow {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--stone-deep); pointer-events: none; font-size: 0.9rem;
}
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #A33D24; }
.field__err {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; color: #8C3319;
  min-height: 0.9rem; display: none;
}
.field.is-invalid .field__err { display: block; }
.form__note {
  margin-top: 1rem; font-size: 0.78rem; color: var(--stone-deep); line-height: 1.6; text-align: center;
}
.form__success {
  position: absolute; inset: 0; background: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; text-align: center; padding: 2rem;
  animation: fadein 0.5s var(--ease);
}
.form__success[hidden] { display: none; }
.form__success-mark {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 1px solid var(--clay);
  display: flex; align-items: center; justify-content: center; color: var(--clay-dk); font-size: 1.4rem;
}
.form__success p { color: var(--text-body); line-height: 1.7; max-width: 26rem; }
.form__success strong { color: var(--heading); font-weight: 500; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════
   FOOTER  (ink) — titleblock
═══════════════════════════════════════════════════════════ */
/* The single deliberate dark moment on the page. */
.footer {
  background: var(--matte-black); color: var(--stone-lt);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(176,141,95,0.28);
}
.footer .brand__mark { color: var(--oak); }
.footer .brand__sub { color: var(--oak); }
.footer__top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.brand--footer { color: var(--parchment); }
.footer__tag {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--stone-lt); max-width: 24rem; text-align: right;
}
.footer__block { padding-block: clamp(1.5rem, 3vw, 2.2rem); border-top: 1px solid rgba(122,112,96,0.2); }
.footer__nav { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.4rem); }
.footer__nav a {
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-lt);
  transition: color 0.3s;
}
.footer__nav a:hover { color: var(--oak); }
.titleblock {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(122,112,96,0.28); margin-block: clamp(1.5rem, 3vw, 2.2rem);
}
.titleblock > div {
  padding: 1rem 1.2rem; border-right: 1px solid rgba(122,112,96,0.28);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.titleblock > div:last-child { border-right: none; }
.titleblock dt {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--stone-lt);
}
.titleblock dd { font-family: var(--serif); font-size: 1rem; color: var(--parchment); }
.footer__legal {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--stone-lt);
  padding-top: clamp(1.2rem, 2vw, 1.6rem); border-top: 1px solid rgba(122,112,96,0.2);
}
.footer__legal a { color: var(--stone-lt); border-bottom: 1px solid rgba(122,112,96,0.45); transition: color 0.3s; }
.footer__legal a:hover { color: var(--oak); }

/* ═══════════════════════════════════════════════════════════
   HONEYPOT (spam trap, visually hidden)
═══════════════════════════════════════════════════════════ */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════
   NAV PHONE (click-to-call)
═══════════════════════════════════════════════════════════ */
.nav__phone {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--stone-deep); transition: color 0.3s var(--ease); white-space: nowrap;
}
.nav__phone svg { color: var(--clay); flex: none; }
.nav__phone:hover { color: var(--matte-black); }

/* ═══════════════════════════════════════════════════════════
   MID-PAGE CTA BAND
═══════════════════════════════════════════════════════════ */
.cta-band {
  position: relative; background: var(--cream); color: var(--text-body);
  padding-block: clamp(4rem, 8vw, 6.5rem); overflow: hidden; text-align: center;
  border-top: 1px solid var(--warm-grey); border-bottom: 1px solid var(--warm-grey);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 130% at 50% 125%, rgba(176,141,95,0.13), transparent 60%);
}
.cta-band__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
}
.cta-band .eyebrow { justify-content: center; }
.cta-band__title {
  font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.04; letter-spacing: -0.02em; color: var(--heading);
}
.cta-band__title em { font-style: italic; color: var(--clay-dk); }
.cta-band__text { max-width: 44ch; color: var(--text-body); line-height: 1.7; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 0.5rem; }
.cta-band__trust {
  margin-top: 0.9rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--stone-deep); max-width: 64ch; line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   FAQ  (light) — native <details> accordion
═══════════════════════════════════════════════════════════ */
.faq { background: var(--parchment); color: var(--text-body); }
.faq__grid {
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.faq__note { margin-top: 1.4rem; color: var(--muted); font-size: 0.95rem; line-height: 1.7; }
.faq__note a { color: var(--gold-dk); border-bottom: 1px solid currentColor; }
.faq__list { border-top: 1px solid var(--hair); }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__item summary {
  list-style: none; cursor: pointer;
  padding: clamp(1.1rem, 2.4vw, 1.55rem) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  transition: color 0.3s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.42rem); color: var(--heading); line-height: 1.25; }
.faq__item summary:hover .faq__q { color: var(--gold-dk); }
.faq__icon { position: relative; flex: none; width: 15px; height: 15px; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--gold-dk);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq__icon::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
.faq__item[open] .faq__icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq__answer { padding-bottom: clamp(1.1rem, 2.4vw, 1.55rem); }
.faq__answer p { color: var(--text-body); line-height: 1.75; max-width: 62ch; font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════
   MOBILE STICKY QUICK-ACTIONS
═══════════════════════════════════════════════════════════ */
.mobilebar { display: none; }

/* ═══════════════════════════════════════════════════════════
   PROJECT CASE STUDIES — drone video, before/after, spec, gallery
═══════════════════════════════════════════════════════════ */

/* --- Page header --- */
.proj-head { background: var(--limestone); padding-block: clamp(7rem, 14vh, 10rem) clamp(2rem, 4vw, 3rem); }
.proj-head__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--heading); margin-top: 1.1rem; max-width: 20ch;
}
.proj-head__title em { font-style: italic; color: var(--clay-dk); }
.proj-head__lede { margin-top: 1.4rem; font-size: 1.05rem; line-height: 1.75; color: var(--text-body); max-width: 58ch; }
.proj-back {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone-deep); gap: 0.6em; align-items: center;
  transition: color 0.3s var(--ease);
  /* flex (not inline-flex) so the eyebrow below it starts a new line —
     both were inline-flex and collided on one row. */
  display: flex; width: max-content;
}
.proj-back:hover { color: var(--matte-black); }

/* --- Drone video stage --- */
.stage { background: var(--limestone); padding-bottom: var(--section-y); }
.stage__frame {
  position: relative; overflow: hidden; background: var(--warm-grey);
  border: 1px solid var(--warm-grey); aspect-ratio: 16 / 9;
}
.stage__media { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 12:5 is the drone edits' own frame once the letterbox bars are cropped off. */
.stage__frame--wide { aspect-ratio: 12 / 5; }
/* The <video> lies over the poster rather than after it, so a video that has
   not loaded (reduced motion: no autoplay) still shows its poster and controls. */
.stage__frame video.stage__media { position: absolute; inset: 0; z-index: 1; }
.stage__badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--matte-black); color: var(--cream); padding: 0.5em 0.9em;
}
/* Shown when a slot has no Cloudinary id yet — the poster carries the frame
   and this states plainly that footage is still to come. */
.stage__pending {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.8rem; text-align: center; padding: 1.5rem;
  background: rgba(26,25,23,0.55); color: var(--cream);
}
.stage__pending-label {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
}
.stage__pending-note { font-size: 0.88rem; line-height: 1.6; max-width: 34ch; color: var(--limestone); }
.stage__cap {
  margin-top: 0.9rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stone-deep);
}

/* --- Before / after slider --- */
.ba { background: var(--cream); }
/* Both layers are cropped to the same box, so the two frames stay in
   register no matter the source ratio — full-bleed 4:3 was too tall. */
.ba__frame {
  position: relative; overflow: hidden; user-select: none;
  border: 1px solid var(--warm-grey); background: var(--warm-grey);
  touch-action: pan-y; cursor: ew-resize;
  aspect-ratio: 3 / 2;
}
.ba__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The "after" layer is clipped from the left by the divider position. */
.ba__after {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: inset(0 0 0 var(--ba-pos, 50%));
}
.ba__after .ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%);
  width: 2px; margin-left: -1px; background: var(--cream);
  box-shadow: 0 0 0 1px rgba(26,25,23,0.25);
  z-index: 3; cursor: ew-resize;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--warm-grey);
  display: flex; align-items: center; justify-content: center;
  color: var(--matte-black);
  box-shadow: 0 2px 14px rgba(26,25,23,0.22);
}
.ba__grip svg { width: 1.3rem; height: 1.3rem; display: block; }
.ba__handle:focus-visible { outline: 2px solid var(--matte-black); outline-offset: 2px; }
.ba__tag {
  position: absolute; bottom: 1rem; z-index: 2;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  background: rgba(26,25,23,0.8); color: var(--cream); padding: 0.45em 0.85em;
  pointer-events: none;
}
.ba__tag--before { left: 1rem; }
.ba__tag--after { right: 1rem; }
.ba__hint {
  margin-top: 0.9rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--stone-deep); text-align: center;
}

/* --- Spec list --- */
.spec { background: var(--limestone); }
.spec__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--warm-grey); border: 1px solid var(--warm-grey); }
.spec__cell { background: var(--limestone); padding: clamp(1.4rem, 3vw, 2.1rem); display: flex; flex-direction: column; gap: 0.7rem; }
.spec__k {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--clay-dk);
}
.spec__v { font-size: 1rem; line-height: 1.7; color: var(--heading); }
.spec__v ul { display: flex; flex-direction: column; gap: 0.35rem; }
.spec__v li { position: relative; padding-left: 1rem; }
.spec__v li::before { content: "—"; position: absolute; left: 0; color: var(--stone-deep); }

/* --- Gallery --- */
.gallery { background: var(--cream); }
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.gallery__item { margin: 0; }
.gallery__item img {
  width: 100%; height: auto; object-fit: cover; display: block;
  border: 1px solid var(--warm-grey); aspect-ratio: 4 / 3;
}
.gallery__item--tall img { aspect-ratio: 3 / 4; }
/* A looping clip in a gallery slot: framed exactly like a tall photo, and
   the <video> main.js adds lies over the poster. */
.gallery__video {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  border: 1px solid var(--warm-grey); background: var(--warm-grey);
}
.gallery__video img, .gallery__video video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border: 0; aspect-ratio: auto;
}
/* Before/after pairs: two-up so each pair reads side by side, capped so
   portrait shots don't run a full screen tall on desktop. */
.gallery__grid--pairs { grid-template-columns: repeat(2, 1fr); max-width: 60rem; margin-inline: auto; }
/* Two landscape photos that aren't a before/after: two-up, widescreen. */
.gallery__grid--two { grid-template-columns: repeat(2, 1fr); }
.gallery__grid--two .gallery__item img { aspect-ratio: 16 / 9; }
.gallery__cap {
  margin-top: 0.7rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--stone-deep);
}

/* --- Projects index --- */
.proj-index { background: var(--limestone); }
.proj-index__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.proj-card { margin: 0; }
.proj-card__link { display: flex; flex-direction: column; height: 100%; }
.proj-card__media { position: relative; overflow: hidden; border: 1px solid var(--warm-grey); background: var(--warm-grey); }
.proj-card__media img {
  /* height:auto is load-bearing — the width/height attributes on the <img>
     otherwise win as presentational hints and defeat aspect-ratio. */
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease);
}
.proj-card__link:hover .proj-card__media img { transform: scale(1.03); }
/* Lead project spans the row, so an odd count still closes on a full row. */
@media (min-width: 861px) {
  .proj-card--lead { grid-column: 1 / -1; }
  .proj-card--lead .proj-card__media img { aspect-ratio: 21 / 9; }
}
.proj-card__body { padding-top: 1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.proj-card__name { font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--heading); line-height: 1.2; }
.proj-card__meta {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stone-deep);
}
.proj-card__text { font-size: 0.95rem; line-height: 1.7; color: var(--text-body); max-width: 46ch; }
.proj-card--soon .proj-card__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; }
.proj-card__soon {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center;
  padding: 1.5rem; color: var(--stone-deep);
}
.proj-card__soon-label {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
}

@media (max-width: 860px) {
  .spec__grid { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .proj-index__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gallery__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Draw-in for SVG lines */
.elevation .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-draw].is-in .ln {
  animation: draw 1.6s var(--ease-io) forwards;
}
[data-draw].is-in .ln--faint { animation-delay: 0.5s; }
[data-draw].is-in .ln--dim { animation-delay: 1s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__plate { max-width: 30rem; margin-top: 2.5rem; }
  .section-head--split { grid-template-columns: 1fr; align-items: start; }
  .services__layout { grid-template-columns: 1fr; }
  .services__preview { min-height: 0; margin-top: 1rem; }
  .contact__grid { grid-template-columns: 1fr; }
  .assurances__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .philosophy__grid { grid-template-columns: 1fr; }
  .voices__grid { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .nav__phone { display: none; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .philosophy__cols { grid-template-columns: 1fr; }
  .work__grid { grid-template-columns: repeat(2, 1fr); }
  .work__item, .work__item--lg, .work__item--wide { grid-column: span 1; grid-row: auto; }
  .work__item--lg .ph { min-height: 18rem; }
}

@media (max-width: 760px) {
  .mobilebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: flex; gap: 0.6rem;
    background: rgba(250,247,242,0.95);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border-top: 1px solid var(--warm-grey);
    padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  }
  .mobilebar a {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
    padding: 0.9rem 1rem; border-radius: 2px;
    font-family: var(--sans); font-size: 0.76rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .mobilebar__call { flex: 0 0 auto; color: var(--matte-black); border: 1px solid rgba(26,25,23,0.4); }
  .mobilebar__cta { flex: 1 1 auto; background: var(--matte-black); color: var(--cream); }
  .is-menu-open .mobilebar { display: none; }
  body { padding-bottom: 4.75rem; }
}

@media (max-width: 560px) {
  :root { --section-y: clamp(3.5rem, 12vw, 5rem); }
  .field-row { grid-template-columns: 1fr; }
  .pillars, .work__grid { grid-template-columns: 1fr; }
  /* Keep the four stats as a balanced 2×2 on phones (not a ragged single column).
     Grid rows stretch to equal height, so the gold accent rules stay uniform. */
  .stats__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 2.75rem) 1.25rem; }
  .stat { padding-left: 1.1rem; min-width: 0; }
  .stat__label { max-width: none; }
  .contact__fact { grid-template-columns: 1fr; gap: 0.3rem; }
  .assure { grid-template-columns: 1fr; gap: 0.4rem; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock > div:nth-child(2n) { border-right: none; }
  .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__tag { text-align: left; }
  .hero__titleblock { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .elevation .ln { stroke-dashoffset: 0 !important; }
  .hero__scroll-line::after { display: none; }
}