/* ============================================================
   CHROME + SECTION SCAFFOLD
   Phase 1: persistent chrome (nav, footer, button, logo) +
   placeholder shells that make the flow, rhythm, and type legible.
   Phase 2 replaces the .shell blocks with real section content.
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.95em 1.5em; border-radius: var(--radius);
  background: var(--terracotta); color: #fff;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--terracotta-deep); transform: translateY(-1px); }
.btn--sm { padding: 0.64em 0.95em; font-size: clamp(0.66rem, 0.58rem + 0.28vw, 0.78rem); }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--text-on-dark); }
.btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---- Brandmark (nav + footer ONLY) ---- */
.brandmark {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 1;
}
.brandmark img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}
.brandmark--nav img {
  width: clamp(5.85rem, 7.35vw, 8.15rem);
  max-height: 4.45rem;
  filter: drop-shadow(0 0 0.85rem rgba(10, 10, 10, 0.14));
}
.brandmark--footer img {
  width: clamp(8.8rem, 14vw, 12.8rem);
  max-height: clamp(8.8rem, 14vw, 12.8rem);
}

/* ---- Nav ---- */
@media (min-width: 761px) {
  :root { --nav-h: 3.8rem; }
  .brandmark--nav img {
    width: clamp(5.45rem, 6.8vw, 7.45rem);
    max-height: 3.55rem;
  }
}
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h); display: flex; align-items: center;
  color: var(--text-on-dark);
  background: rgba(23, 23, 23, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out),
              background var(--dur) var(--ease-out), backdrop-filter var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.nav.is-hero-complete {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); width: 100%; position: relative; z-index: 2; }
.nav__links { display: flex; gap: clamp(1rem, 0.5rem + 1.5vw, 2.2rem); }
.nav__links a {
  font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-on-dark-muted); transition: color var(--dur-fast) var(--ease-out);
  position: relative;
}
.nav__links a:hover { color: var(--text-on-dark); }
.nav__toggle,
.nav__panel {
  display: none;
}
.nav.is-scrolled {
  background: rgba(23, 23, 23, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}
@media (max-width: 760px) {
  .nav {
    background: rgba(23, 23, 23, 0.82);
    backdrop-filter: saturate(140%) blur(14px);
    box-shadow: 0 1px 0 var(--hairline);
  }
  .nav.is-mobile-hidden:not(.is-menu-open) {
    transform: translateY(calc(-100% - 0.4rem));
  }
  .nav__links { display: none; }
  .nav__toggle {
    display: grid;
    place-items: center;
    width: 2.9rem;
    aspect-ratio: 1;
    border: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  .nav__toggle span {
    grid-area: 1 / 1;
    display: block;
    width: 1.15rem;
    height: 1px;
    background: currentColor;
    transition: transform 320ms var(--ease-out), opacity 220ms var(--ease-out);
  }
  .nav__toggle span:first-child { transform: translateY(-0.24rem); }
  .nav__toggle span:last-child { transform: translateY(0.24rem); }
  .nav.is-menu-open .nav__toggle span:first-child { transform: rotate(42deg); }
  .nav.is-menu-open .nav__toggle span:last-child { transform: rotate(-42deg); }
  .nav__panel {
    display: grid;
    align-content: start;
    gap: clamp(1.4rem, 7vw, 2.4rem);
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    min-height: calc(100svh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    padding: clamp(2rem, 8vw, 3.5rem) clamp(1.15rem, 7vw, 2.2rem) 2rem;
    background: rgba(18, 18, 18, 0.96);
    color: var(--text-on-dark);
    border-top: 1px solid rgba(245, 242, 236, 0.12);
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.8rem);
    transition:
      opacity 260ms var(--ease-out),
      visibility 0s linear 260ms,
      transform 380ms var(--ease-out);
  }
  .nav.is-menu-open .nav__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity 260ms var(--ease-out),
      visibility 0s linear 0s,
      transform 380ms var(--ease-out);
  }
  .nav__panel-links {
    display: grid;
    gap: 0.16rem;
    justify-items: center;
    text-align: center;
  }
  .nav__panel-links a,
  .nav__panel-cta {
    opacity: 0;
    transform: translateY(0.65rem);
    transition:
      opacity 320ms var(--ease-out),
      transform 420ms var(--ease-out);
    transition-delay: 0ms;
  }
  .nav.is-menu-open .nav__panel-links a,
  .nav.is-menu-open .nav__panel-cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(90ms + var(--i) * 46ms);
  }
  .nav__panel-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.6rem;
    border-bottom: 1px solid rgba(245, 242, 236, 0.14);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 4vw, 1.4rem);
    line-height: 1.2;
    color: inherit;
  }
  .nav__panel-cta {
    justify-self: center;
    margin-top: 0.2rem;
  }
  html.nav-menu-open,
  body.nav-menu-open {
    overflow: hidden;
  }
}

/* Phase-1 placeholder-shell scaffold (.section--shell / .shell*) removed Jun 21:
   real sections fully replaced it; zero references remained in index.html/JS. */

/* Phase 2: the scaffolding seam hairline is gone — real sections own their
   seams. Same-family neighbors (ink↔ink) blend into one continuous surface;
   cross-family seams read by color alone. */

/* ---- Depth seams: the "stacked drafting paper" SHEET LOOK (DUMP R3 §16) ----
   Static look ONLY (rounded top + soft lift + z-order) on the 4 light-over-ink
   over-sections; the SLIDE itself is GSAP (Lane B2 initOverlapSeam) — one
   animator per seam. This rule NEVER animates, sets sticky, or transforms.
   Gated on .motion-ready so reduced-motion / no-JS get a flat, honest seam. */
.motion-ready .stack-over {
  position: relative;
  z-index: 2;
  border-top-left-radius: var(--seam-radius);
  border-top-right-radius: var(--seam-radius);
  box-shadow: var(--seam-shadow);
}

/* ════════════════════════════════════════════════════════════
   PHASE 2 — SECTION CONTENT  (batch 1: hero · trust · services ·
   selected work · before/after · tile.stone.built)
   ════════════════════════════════════════════════════════════ */

/* ---- Shared section head ---- */
.sec-head { max-width: 56ch; margin-bottom: var(--space-l); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head .eyebrow { display: block; margin-bottom: var(--space-s); }
.sec-head h2 { font-size: var(--step-4); line-height: 1.04; }
.sec-head__lede { margin-top: var(--space-s); font-size: var(--step-0); color: var(--text-on-dark-muted); max-width: 46ch; }
.sec-head--center .sec-head__lede { margin-inline: auto; }
[data-bg="marble"] .sec-head__lede,
[data-bg="cream"] .sec-head__lede { color: var(--text-on-light-muted); }

/* eyebrow tone shifts with the surface — darkened from --stone-500 (#8c8678,
   fails AA-normal) to a readable stone so light-section eyebrows hold up
   (David 06.21: eyebrows hard to read). */
[data-bg="marble"] .eyebrow,
[data-bg="cream"] .eyebrow { color: #6b6557; }

/* inline arrow link (terracotta, grows on hover) */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--terracotta); padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: gap var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.link-arrow:hover { gap: 0.85em; border-color: var(--terracotta); }

/* ---- 01 · HERO ---- */
.hero {
  --hero-reveal: 56%;
  --hero-seam-angle: clamp(0.85rem, 1.7vw, 2.8rem);
  position: relative; min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; padding-block: 0;
  background: var(--ink-900);
}
.js .hero { --hero-reveal: 8%; }
.is-solo .hero,
.is-reduced-motion .hero { --hero-reveal: 56%; }
@media (prefers-reduced-motion: reduce) {
  .js .hero { --hero-reveal: 56%; }
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media::before { content: none; }
.hero__media::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: calc(100% - var(--hero-reveal));
  width: 2px;
  z-index: 5;
  background: linear-gradient(180deg, transparent, rgba(226, 190, 156, 0.95) 18%, rgba(255, 255, 255, 0.72) 48%, rgba(226, 190, 156, 0.72) 76%, transparent);
  box-shadow: 0 0 2.3rem rgba(226, 190, 156, 0.42);
  opacity: 0.82;
  transform: translateX(-50%) rotate(6deg);
  transform-origin: 50% 50%;
  pointer-events: none;
}
.hero__layer { position: absolute; inset: 0; background-size: cover; background-position: 54% center; }
.hero__layer--sketch {
  background-image: url('../assets/hero-sketch-current-sketch3.webp');
  filter: none;
  opacity: 1;
}
.hero__layer--life {
  background-image: url('../assets/hero-reality-current-site3.webp?v=20260622-230641');
  filter: none;
  clip-path: polygon(
    calc(100% - var(--hero-reveal) + var(--hero-seam-angle)) 0,
    100% 0,
    100% 100%,
    calc(100% - var(--hero-reveal) - var(--hero-seam-angle)) 100%
  );
  will-change: clip-path;
}
.hero__sketch-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url('../assets/hero-sketch-current-sketch3.webp');
  background-size: cover;
  background-position: 54% center;
  filter: none;
  clip-path: polygon(
    0 0,
    calc(100% - var(--hero-reveal) + var(--hero-seam-angle)) 0,
    calc(100% - var(--hero-reveal) - var(--hero-seam-angle)) 100%,
    0 100%
  );
  opacity: 0.36;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: clip-path;
}
.hero__scrim {
  position: absolute; inset: 0;
  z-index: 4;
  background:
    linear-gradient(23deg, rgba(5,5,5,0.7) 0%, rgba(6,6,6,0.5) 24%, rgba(8,8,8,0.22) 44%, rgba(8,8,8,0.06) 58%, transparent 72%),
    linear-gradient(102deg, rgba(5,5,5,0.18) 0%, rgba(7,7,8,0.08) 17%, transparent 36%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-block: calc(var(--nav-h) + var(--space-l)) var(--space-xl); }
.hero__content {
  position: relative;
  isolation: isolate;
  max-width: 35rem;
  padding: clamp(1.15rem, 2.4vw, 2rem) clamp(1.15rem, 2.6vw, 2.35rem);
  transform: translateY(clamp(1.4rem, 4.8vh, 3.6rem));
}
.hero__content::before { content: none; }
/* Terracotta + soft dark halo so the eyebrow survives BOTH hero states — the light
   sketch (initial) AND the dark life-photo it wipes to. Light text vanished on the
   sketch; terracotta is the one hue readable on both, and it leads in from the
   terracotta dash (David 06.21: "hard to read, especially over the white sketch"). */
.hero__eyebrow { display: flex; align-items: center; gap: 0.85em; color: var(--terracotta); text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 1px 10px rgba(0,0,0,0.3); }
.hero__eyebrow::before { content: ''; width: 2.2rem; height: 1px; background: var(--terracotta); flex: none; }
.hero__title { font-size: var(--step-display); margin: 0 0 clamp(0.75rem, 1.6vw, 1.25rem); max-width: 7.25ch; line-height: 0.94; letter-spacing: 0; text-shadow: 0 0.2rem 1.6rem rgba(0,0,0,0.38); }
.hero__lede { font-size: var(--step-1); color: var(--text-on-dark); opacity: 0.9; max-width: 31ch; margin-bottom: clamp(1.1rem, 2.2vw, 1.75rem); text-shadow: 0 1px 1.5rem rgba(0,0,0,0.34); }
.hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); }
.hero__cta .btn { min-width: min(24.5rem, 100%); justify-content: space-between; }
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(1.75rem, 4vh, 3rem); transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 0.9em;
  font-size: clamp(0.78rem, 0.84vw, 0.98rem); font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 0 rgba(0,0,0,0.36), 0 0 1.4rem rgba(0,0,0,0.58);
}
.hero__scroll i {
  width: 2px; height: clamp(3.2rem, 5.5vh, 4.4rem);
  background: linear-gradient(rgba(255,255,255,0.96) 0%, var(--terracotta) 46%, transparent 100%);
  box-shadow: 0 0 1rem rgba(0,0,0,0.42), 0 0 0.7rem rgba(201,92,49,0.32);
  transform-origin: top; animation: scrollcue 2.4s var(--ease-inout) infinite;
}
@keyframes scrollcue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---- 02 · TRUST BAR (scope rail + proof stats) ---- */
.trust {
  padding-block: clamp(1.45rem, 2vw, 2.35rem) clamp(1.65rem, 2.4vw, 2.65rem);
  overflow: hidden;
  background:
    linear-gradient(rgba(18,18,19,0.42), rgba(18,18,19,0.42)),
    url('../assets/bg-deep-gray-slate.webp') center / cover,
    var(--ink-900);
}
.scope-rail {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  overflow: hidden;
  border-block: 1px solid rgba(236,233,227,0.13);
}
.scope-rail::before,
.scope-rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: min(18vw, 16rem);
  pointer-events: none;
}
.scope-rail::before {
  left: 0;
  background: linear-gradient(90deg, var(--ink-900), rgba(26,26,27,0));
}
.scope-rail::after {
  right: 0;
  background: linear-gradient(270deg, var(--ink-900), rgba(26,26,27,0));
}
.scope-rail__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(2.4rem, 4vw, 4.6rem);   /* a touch airier than D&P's grid gap; uniform so the clone seam is invisible */
  padding-block: clamp(1rem, 1.5vw, 1.5rem);
  /* NO padding-inline — it poisons the -50% wrap math (see hero-rail ROOT CAUSE). */
  animation: scope-marquee 42s linear infinite;
  will-change: transform;
}
.scope-rail:hover .scope-rail__track {
  animation-play-state: paused;   /* no scale/pop; a pause is fine and already shipped */
}
.scope-rail__track span {
  /* graduated from .design-planning__rail — sleek sans, dim ecru, wide tracking */
  font-family: inherit;                 /* body sans, NOT --font-display serif */
  font-size: clamp(0.82rem, 1.05vw, 1rem);
  font-weight: 600;
  line-height: 1;
  color: rgba(236,233,227,0.62);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  white-space: nowrap;
}
.scope-rail__track i {
  /* SQUARE terracotta dot — the detail David specifically loved */
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 0;                     /* square, NOT round */
  background: var(--terracotta);
  flex: none;
}
/* ── Trust badges (David 06.21): three visual credentials, not text stats — an
   "established" laurel seal, the real Bath Crashers torn-paper clipping, and a
   Tennessee outline. The clipping carries its own cream backing (NO mono filter);
   the seal + state are ecru line-art with terracotta accents. ── */
.trust__proofs--badges li { gap: clamp(0.3rem, 0.5vw, 0.5rem); }
.trust__proofs--badges { align-items: stretch; }
.trust__badge-label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  text-align: center;
}
.trust__viz { display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; margin: auto; }
.trust__emblem { filter: drop-shadow(0 6px 16px rgba(0,0,0,0.55)); }
/* TN flag read visually oversized next to its neighbors at equal slot height
   (wide asset, mostly-opaque rectangle) — scale it down ~15% in place (David
   07.02); slot height stays uniform, only the rendered flag shrinks. */
.trust__tn   { filter: drop-shadow(0 5px 12px rgba(0,0,0,0.5)); transform: scale(0.85); }
.trust__cred-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  margin: auto;
  filter: drop-shadow(0 6px 15px rgba(0,0,0,0.45));
}
/* 25+ emblem = David-generated medallion (self-contained); tennessee = real flag-filled
   state icon (David 06.21; echoes Emanuel's flag uniform patch) */
/* Trust shelf uniformity (David 07.02): every cell shares one fixed cell height, one
   fixed-height emblem SLOT (images object-fit:contain inside it regardless of native
   aspect ratio), one emblem→caption gap, and one caption→bottom-edge padding. The
   warranty badge no longer gets a bigger box or a lower caption than its neighbors. */
.trust__proofs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(1.2rem, 2vw, 1.95rem);
  border: 1px solid rgba(236,233,227,0.13);
  background: rgba(11,11,11,0.24);
}
.trust__proofs li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: clamp(8rem, 10vw, 9.4rem);
  padding: clamp(0.85rem, 1.3vw, 1.2rem) clamp(1rem, 1.55vw, 1.55rem) clamp(0.9rem, 1.35vw, 1.2rem);
  text-align: center;
}
.trust__proofs li + li {
  border-left: 1px solid rgba(236,233,227,0.13);
}
.trust__badge {
  /* Uniform emblem slot: every icon (medallion, flag, seal, clipping) sits inside the
     same fixed-height box and is centered/contained within it, so no image can make
     its cell taller or push its caption lower than the others. */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.trust__badge > img,
.trust__badge > .trust__warranty-badge {
  flex: 0 0 clamp(4.4rem, 5.8vw, 5.3rem);
  height: clamp(4.4rem, 5.8vw, 5.3rem);
}
.trust__proofs strong {
  color: rgba(236,233,227,0.95);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.85vw, 1.95rem);
  font-weight: 420;
  line-height: 1.04;
  text-wrap: balance;
}
.trust__badge-label {
  margin-top: 0;
}
.trust__proofs span {
  color: var(--text-on-dark-muted);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.trust__badge--warranty {
  min-width: 0;
}
.trust__warranty-badge {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  margin: auto;
  /* Thin-ring/small-core medallion reads visually lighter/smaller than the 25+
     emblem at the same slot height — scale it up ~17% in place (David 07.02)
     so the two medallions read as equal weight. */
  transform: scale(1.39);
  filter:
    drop-shadow(0 0 1rem rgba(192,97,61,0.18))
    drop-shadow(0 0.6rem 1.35rem rgba(0,0,0,0.22));
}
@keyframes scope-marquee {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .scope-rail__track { animation: none; }
}

/* ---- 03 · SERVICES — "Everything, under one roof" (text-forward offerings) ----
   A marble breath between the dark trust bar and the dark Selected Work. NO
   project photos here (those live in #work) so the two stop competing. Clean
   even 3-col grid of text cards in Emanuel's voice — fits the viewport, nothing
   cut off. Cards keep .svc-tile + .svc-tile__name as hooks (global hover-pop). */
.services {
  overflow: hidden;
  padding-block: var(--section-pad);
  background:
    linear-gradient(rgba(245,242,236,0.82), rgba(245,242,236,0.82)),
    url('../assets/bg-creamy-herringbone.webp') center / cover,
    var(--marble-50);
}
.services__head {
  max-width: 56rem;
  margin-bottom: clamp(1.5rem, 2.4vw, 2.4rem);
  text-align: center;
}
.services__head .eyebrow {
  color: var(--terracotta);
  margin-bottom: clamp(0.85rem, 1.2vw, 1.15rem);
}
.services__head h2 {
  font-size: var(--step-4);
  line-height: 0.96;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.services__head .sec-head__lede {
  max-width: 50rem;
  margin-top: clamp(0.9rem, 1.2vw, 1.25rem);
  font-size: clamp(1.02rem, 1.18vw, 1.22rem);
  line-height: 1.6;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.95rem, 1.3vw, 1.6rem);
  align-items: stretch;
}
.svc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  /* These are tappable image links — kill text-selection, the iOS long-press
     callout, and the tap-highlight so a draggy tap can't leave a stuck terracotta
     ::selection wash over the card (David Jun 22). */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  border: 1px solid rgba(68, 64, 58, 0.14);
  border-radius: var(--radius-card);
  background:
    linear-gradient(150deg, rgba(250, 247, 241, 0.95), rgba(240, 235, 225, 0.92)),
    var(--marble-50);
  box-shadow: 0 18px 42px -28px rgba(31, 25, 20, 0.34);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.svc-tile:hover {
  border-color: rgba(192, 97, 61, 0.4);
  box-shadow: 0 26px 54px -26px rgba(31, 25, 20, 0.42);
}
/* Image-led card (David Jun 21): a uniform 4:3 photo caps each card, all the text
   underneath in the box. The original six service icons are restored as a
   right-side accent inside the copy block. */
.svc-tile__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--stone-200, #e8e2d6);
}
.svc-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.97) contrast(1.02);
  transition: transform var(--dur-slow) var(--ease-out);
}
.svc-tile:hover .svc-tile__media img { transform: scale(1.04); }
/* Text panel target ≈30% of tile height (image ≈70%): eyebrow + title both render
   ONE line at every breakpoint, icon sits top-right of the panel via absolute
   positioning (out of flow so it never forces the copy column to wrap or grow the
   panel), tight caption-to-bottom padding (David 07.02 consistency pass). */
.svc-tile__text {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(0.85rem, 1.15vw, 1.15rem) clamp(3rem, 3.6vw, 3.5rem) clamp(0.85rem, 1.1vw, 1.1rem) clamp(1.2rem, 1.6vw, 1.7rem);
}
.svc-tile__head {
  display: block;
}
.svc-tile__copy {
  min-width: 0;
}
.svc-tile__icon {
  position: absolute;
  top: clamp(0.7rem, 1vw, 0.95rem);
  right: clamp(0.7rem, 1vw, 0.95rem);
  display: inline-flex;
  opacity: 0.94;
}
.svc-tile__icon img {
  width: clamp(1.7rem, 2.1vw, 2.15rem);
  height: auto;
}
.svc-tile__meta {
  display: block;
  font-size: clamp(0.6rem, 0.68vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-tile__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #1c1916;
  margin-top: clamp(0.3rem, 0.5vw, 0.5rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-tile__name::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  margin-top: clamp(0.55rem, 0.8vw, 0.8rem);
  background: var(--terracotta);
}
.svc-tile__blurb {
  padding-top: clamp(0.85rem, 1.2vw, 1.2rem);
  color: rgba(68, 64, 58, 0.82);
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }
  /* Tight nameplate (mirrors the team tiles): compact label + name, no rule
     line, so the 2-up cards shrink to mostly-image + caption. Icon stays
     top-right (inherited from base .svc-tile__icon, just re-sized here). */
  .svc-tile__text {
    padding: 0.62rem 2.35rem 0.6rem 0.75rem;
  }
  .svc-tile__meta {
    font-size: 0.54rem;
    letter-spacing: 0.1em;
  }
  .svc-tile__name {
    font-size: 0.87rem;
    letter-spacing: -0.015em;
    margin-top: 0.22rem;
  }
  .svc-tile__icon {
    top: 0.5rem;
    right: 0.5rem;
  }
  .svc-tile__icon img {
    width: 1.4rem;
  }
  .svc-tile__name::after { display: none; }
}

/* ---- 04 · SELECTED WORK — "One client, every surface" ---- */
.work {
  padding-block: var(--section-pad);
  background:
    linear-gradient(to bottom, rgba(16,16,17,0.08), rgba(16,16,17,0.17) 72%, rgba(16,16,17,0.3)),
    url('../assets/bg-deep-gray-slate.webp') center top / cover no-repeat,
    var(--ink-900);
}
/* Contain the mosaic to the standard page width (David R3 §5: kill the edge-
   bleed — "why are those cards going to the edge of the screen?"). */
.work .wrap--wide {
  max-width: var(--maxw-wide);
  padding-inline: var(--gutter);
}
.work__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.72fr);
  align-items: center;
  gap: clamp(2.35rem, 4.25vw, 5rem);
  margin-bottom: var(--space-l);
}
.work__head h2 { font-size: var(--step-4); line-height: 1.0; margin-top: 0.22em; max-width: 14ch; text-wrap: balance; }
.work__head > p {
  color: rgba(236,233,227,0.82);
  font-size: clamp(1rem, 1.12vw, 1.2rem);
  line-height: 1.7;
  padding-left: clamp(2rem, 3.75vw, 4rem);
  border-left: 1px solid var(--hairline-strong);
}
.work__mosaic {
  display: grid;
  grid-template-columns: 1fr 1.42fr 0.9fr 0.9fr;
  grid-template-rows: clamp(18rem, 25.2vw, 23rem) clamp(14rem, 18.7vw, 17.5rem) clamp(15rem, 20vw, 19rem);
  gap: clamp(1rem, 1.3vw, 1.5rem);
}
.work-card {
  position: relative;
  overflow: hidden;
  min-height: 0;
  border-radius: var(--radius-card);
  background: var(--ink-800);
  /* Same selection/callout/tap-highlight guard as .svc-tile — these are tappable
     image links, so a draggy tap must not leave a stuck terracotta selection wash
     (David Jun 22). */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* AI top/edge frame removed (David R3 §5: "way too A.I. — that little edge
     framing on top"). The gradient scrim + the grid gap do the separation now. */
}
.work-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.03) brightness(1.03);
  transition: transform var(--dur-slow) var(--ease-out);
}
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Subtle tint anchored at the very bottom edge (David Jun 21): solid enough right
     under the now bottom-edged caption to keep it legible, then fades fast up so
     most of the image stays untinted — like the waterfall-marble card reads. */
  background: linear-gradient(to top,
    rgba(9,9,10,0.86) 0%,
    rgba(9,9,10,0.6) 12%,
    rgba(9,9,10,0.26) 28%,
    rgba(9,9,10,0.06) 48%,
    transparent 66%);
}
.work-card > span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: 0.28rem;
  padding: clamp(0.82rem, 1.15vw, 1.08rem) clamp(1rem, 1.45vw, 1.25rem) clamp(0.92rem, 1.25vw, 1.18rem);
  /* No gradient of its own (David Jul 2 regression fix): a second, harder-edged
     gradient stacked here on top of .work-card::after's soft 5-stop fade was
     what read as a sharp line under the caption. The ::after scrim alone (soft,
     long fade, ends fully transparent) carries the whole backdrop again — this
     span just stays flush to the edges for layout. */
}
.work-card strong {
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.work-card em {
  font-style: normal;
  font-size: clamp(0.7rem, 0.8vw, 0.82rem);
  letter-spacing: 0.05em;
  color: rgba(236,233,227,0.7);
}
/* Mosaic re-balanced after the Mitered Stone card was removed (David R3 §5):
   hole-free 4-col × 3-row arrangement. Flag the final layout for David. */
.work-card--kitchen { grid-column: 1; grid-row: 1; }
.work-card--feature { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-rows: 1fr 0.98fr; }
.work-card--feature::after { display: none; }
.work-card--feature img { min-height: 0; object-position: 50% 52%; }
.work-card__story {
  padding: clamp(1.3rem, 1.85vw, 1.95rem);
  background: rgba(13,13,13,0.95);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.work-card__story p:first-child {
  color: var(--terracotta-soft);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.work-card__story h3 { font-size: var(--step-3); line-height: 1; }  /* re-tokened off a bespoke clamp -> the --step-3 rung (DUMP §14) */
.work-card__story i {
  display: block;
  width: 3.2rem;
  height: 2px;
  background: var(--terracotta-soft);
  margin: clamp(1rem, 1.5vw, 1.45rem) 0;
}
.work-card__story p:not(:first-child) { color: rgba(236,233,227,0.72); max-width: 34ch; }
.work-card--penthouse { grid-column: 3; grid-row: 1; }
.work-card--green { grid-column: 4; grid-row: 1; }
/* row 2: kitchen slot is now free at col 1 -> modern leads the row */
.work-card--modern { grid-column: 1; grid-row: 2; }
.work-card--spa { grid-column: 3; grid-row: 2; }
.work-card--detail { grid-column: 4; grid-row: 2; }
/* third row — full-width landscape closer */
.work-card--powder { grid-column: 1 / span 4; grid-row: 3; }
/* per-slot framing — portrait images sit in narrow slots, landscapes fill the wide ones */
.work-card--green img { object-position: 50% 38%; }  /* powder-room portrait: keep vanity/mirror in frame */
.work-card--green strong { font-size: clamp(0.68rem, 0.76vw, 0.8rem); letter-spacing: 0.1em; }
.work-card--modern img { filter: saturate(0.9) contrast(1.02) brightness(0.88); }
.work-card--powder img { object-position: 50% 50%; }
.work-card--spa img { object-position: 50% 58%; }     /* kitchen landscape in near-square: hold the island */
.work-card--detail img { object-position: 50% 50%; }

/* ---- Selected Work — click-to-expand overlay (David R3 §5) ----
   Lane A owns the static end-state (dim+blur backdrop, centered ~75% stage).
   Lane B (motion.js) owns the FLIP grow from the card's rect + open/close +
   scroll lock. Hidden until JS toggles [data-work-open] on the overlay. */
.work-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;                 /* above sticky nav (.nav z-index 50) */
  display: none;                /* hidden at rest; JS flips [data-work-open] on open */
  place-items: center;
  pointer-events: none;         /* JS flips to auto on open */
}
/* Gate display on the open state. An always-on `display: grid` beat the UA
   [hidden]{display:none} rule (equal specificity, author wins), so the overlay
   painted fullscreen over the hero at load. Honor [hidden] AND key display off
   the open attr the JS toggles. */
.work-overlay[hidden] { display: none !important; }
.work-overlay[data-work-open] { display: grid; pointer-events: auto; }
.work-overlay__dim {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 10, 0.62);
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
  opacity: 0;                   /* Lane B fades 0 -> 1 on open */
  transition: opacity var(--dur) var(--ease-out);
}
.work-overlay[data-work-open] .work-overlay__dim { opacity: 1; }
.work-overlay__stage {
  position: relative;
  width: min(76vw, 1120px);     /* ~70-80% target = "screenshot 5" size */
  max-height: 82vh;
  aspect-ratio: 16 / 10;        /* lane B may override per-card; safe default */
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ink-800);
  box-shadow: 0 40px 120px -40px rgba(0,0,0,0.7);
  /* opacity/transform on open is Lane B's FLIP timeline. */
}
.work-overlay__stage img { width: 100%; height: 100%; object-fit: cover; }
/* Bottom-anchored caption bar over the cover image — the stage img has no scrim
   of its own, so this carries its own gradient. Mirrors the .work-card caption
   language, scaled up for the overlay. pointer-events:none keeps the close btn
   (z2) and click-to-close on the dim reachable. (DUMP R3 §5 / G4.1) */
.work-overlay__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
  display: grid;
  gap: 0.4rem;
  padding: clamp(2.4rem, 4vw, 3.6rem) clamp(1.6rem, 2.4vw, 2.4rem) clamp(1.4rem, 2vw, 2rem);
  color: var(--text-on-dark);
  background: linear-gradient(to top, rgba(9,9,10,0.82), rgba(9,9,10,0.34) 46%, rgba(9,9,10,0) 100%);
}
.work-overlay__caption strong {
  /* Match the PRE-TAP card label (Inter sans, uppercase, tracked), not the display
     serif — David Jun 22: "the font should not change when I tap an image; I prefer
     the pre-expansion font." Scaled up for the overlay but same treatment. */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.12;
}
.work-overlay__caption em {
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(236,233,227,0.74);
}
/* Service-tile detail overlay (David Jun 22): the small grid cards can't hold
   the blurb in place, so on expand the work overlay shows an about-us-style text
   layer (dim scrim + label + blurb) over the image. motion.js injects it only for
   [data-work-blurb] cards and fades it in (.is-detail-shown) AFTER the FLIP grow;
   Selected Work photos carry no blurb and stay bare. Mirrors .team-card__bio. */
.work-overlay__note {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(1.6rem, 3vw, 2.8rem) clamp(1.5rem, 2.6vw, 2.4rem) clamp(1.9rem, 3.2vw, 3rem);
  background: rgba(15, 14, 12, 0.58);
  color: rgba(245, 242, 236, 0.97);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}
.work-overlay.is-detail-shown .work-overlay__note { opacity: 1; }
.work-overlay__note-label {
  align-self: start;
  justify-self: start;
  color: var(--terracotta-soft);
  font-family: var(--font-sans);
  font-size: clamp(0.72rem, 0.95vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.work-overlay__note-text {
  align-self: center;
  max-width: 30ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.15rem);
  line-height: 1.34;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}
.work-overlay__close {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  z-index: 2;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  font-size: 1.6rem; line-height: 1;
  color: #fff;
  background: rgba(9,9,10,0.5);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.work-overlay__close:hover { background: rgba(9,9,10,0.8); }
@media (max-width: 760px) {
  .work-overlay__stage { width: 92vw; max-height: 86vh; aspect-ratio: 4 / 3; }
  .work-overlay__caption {
    gap: 0.22rem;
    padding: 2.2rem 1rem 0.9rem;
  }
  .work-overlay__caption strong {
    font-size: clamp(0.95rem, 4.4vw, 1.25rem);
    line-height: 1.14;
    max-width: 20ch;
  }
  .work-overlay__caption em {
    font-size: 0.66rem;
    letter-spacing: 0.11em;
  }
  .work-overlay__note {
    padding: 1.4rem 1.25rem 1.7rem;
  }
  .work-overlay__note-text {
    font-size: clamp(1.05rem, 4vw, 1.32rem);
    line-height: 1.36;
    max-width: 34ch;
  }
}
@media (prefers-reduced-motion: reduce) {
  .work-overlay__dim { transition: none; }
}

/* ---- 05 · BEFORE / AFTER (draggable reveal) ---- */
.ba {
  /* Asymmetric top (David 07.01/07.02: the move out of "Made to live in" read
     as a dead gap/unintentional break, not a deliberate seam) — tighten the
     approach into this section while keeping the bottom exhale intact. */
  padding-block: var(--section-pad-tight) var(--section-pad);
  background:
    radial-gradient(circle at 17% 22%, rgba(192,97,61,0.08), transparent 24rem),
    linear-gradient(rgba(12,12,12,0.26), rgba(12,12,12,0.42)),
    url('../assets/bg-deep-gray-slate.webp') center bottom / cover no-repeat,
    var(--ink-900);
}
/* Crisscross diptych (David's diagonal mockup): "Dated to"↖ · pair↗ · pair↙ · "done right."+CTA↘ */
/* Balanced split (David 06.21): full headline cluster ("Dated to" + "done right")
   anchored top-left as a text rail, the two reveal sliders side by side on the
   right, vertically centered against the copy — the whole section clears one
   scroll viewport instead of the taller diagonal crisscross. */
.ba__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  column-gap: clamp(1.8rem, 3.4vw, 4rem);
}
.ba__cell { min-width: 0; }
.ba__copy {
  min-width: 0;
  /* Explicit placement (David 07.02): needed because .ba__actions below is
     also explicitly placed into col 1 — once ANY grid child has an explicit
     position, auto-placed siblings can get pushed into unexpected implicit
     rows/columns, so all three children of .ba__grid are pinned explicitly. */
  grid-column: 1;
  grid-row: 1;
}
.ba__copy .eyebrow { margin-bottom: clamp(0.7rem, 1vw, 1.1rem); }
.ba__head { font-size: clamp(2.8rem, 1.6rem + 3.6vw, 4.8rem); line-height: 0.94; text-wrap: balance; margin: 0; }
.ba__pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 1.5vw, 1.5rem);
  align-items: start;
  /* Explicit placement (David 07.02, see .ba__copy above): col 2, spanning
     both grid rows so it stays vertically centered against the copy+CTA
     stack in col 1, matching the original balanced-split intent. */
  grid-column: 2;
  grid-row: 1 / 3;
}
/* hint rides under the pair (it's about dragging them) — spans both, centered */
.ba__pairs .ba__hint {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: clamp(0.9rem, 1.4vw, 1.5rem);
}
.ba__pairs .ba__hint::before { margin: 0 auto 0.7rem; }
.ba__lede {
  margin-top: clamp(1.2rem, 1.7vw, 1.9rem);
  color: rgba(236,233,227,0.78);
  max-width: 34ch;
  font-size: clamp(1.02rem, 1.12vw, 1.18rem);
  line-height: 1.72;
}
.ba__actions {
  /* Desktop (David 07.02): HTML now sits after .ba__pairs so the CTA follows
     the proof in source/reading order, but on desktop it's placed BACK into
     the copy column (row 2, under .ba__copy in row 1), left-aligned under
     the lede — the original balance. Mobile restores the full-width
     centered-below-both-pairs layout below. */
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: clamp(1.1rem, 1.7vw, 2rem);
  margin-top: clamp(1.8rem, 2.5vw, 2.8rem);
}
.ba__actions .btn {
  min-width: min(20rem, 100%);
  min-height: 4.6rem;
  justify-content: center;
  letter-spacing: 0.09em;
}
.ba__actions .link-arrow { margin-top: 0; }
.ba__pair { margin: 0; }
.ba__caption {
  margin-top: clamp(0.75rem, 1vw, 1rem);
  color: rgba(236,233,227,0.74);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ba__slider {
  /* FULL UNCROPPED: real masters are 1448×1086 (4:3 horizontal). The container
     AR is locked to the image AR so object-fit: cover shows the WHOLE image with
     zero pixels cut. Both pairs share identical-dimension files → identical AR. */
  position: relative; width: 100%; margin: 0;
  aspect-ratio: 1448 / 1086; overflow: hidden; border-radius: var(--radius-card);
  touch-action: pan-y; user-select: none; --pos: 50%;
  box-shadow: 0 30px 60px -34px rgba(0,0,0,0.7);
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none; }
.ba__img--after { object-position: 50% 50%; }
.ba__before .ba__img { object-position: 50% 50%; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3.5rem;
  transform: translateX(-50%);
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
  z-index: 3;
}
.ba__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.9);
}
.ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.7rem; height: 1.7rem; border-radius: 50%; background: rgba(245,242,236,0.96); color: #121419; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.32); }
.ba__grip svg { width: 0.6rem; height: 0.6rem; }
.ba__tag { position: absolute; top: var(--space-s); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.42em 0.72em; border-radius: var(--radius-card); background: rgba(16,16,16,0.74); backdrop-filter: blur(6px); color: #fff; pointer-events: none; }
.ba__tag--before { left: var(--space-s); }
.ba__tag--after { right: var(--space-s); background: var(--terracotta); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ba__slider:focus-within .ba__grip { outline: 2px solid #fff; outline-offset: 3px; }
.ba__hint {
  margin-top: clamp(1.4rem, 2vw, 2.2rem);
  text-align: left;
  color: rgba(236,233,227,0.72);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ba__hint::before {
  content: "";
  display: block;
  width: 4.2rem;
  height: 2px;
  margin: 0 0 0.85rem;
  background: var(--terracotta-soft);
}

/* ---- 06 · FRAME TO FINISH ---- */
@property --r {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@keyframes framefinishProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.framefinish {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.3rem, 6vw, 5.2rem);
  color: var(--text-on-light);
  background:
    radial-gradient(circle at 50% 0%, rgba(197, 96, 60, 0.08), transparent 32rem),
    linear-gradient(180deg, rgba(255,255,255,0.42), rgba(240,233,221,0.3)),
    var(--marble-50);
}
.framefinish::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.58;
  background-image:
    linear-gradient(rgba(25,25,24,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,25,24,0.028) 1px, transparent 1px);
  background-size: 5.2rem 5.2rem;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.framefinish__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
}
.framefinish__head {
  width: min(100%, 62rem);
  margin: 0 auto clamp(1.15rem, 2.1vw, 1.75rem);
  text-align: center;
}
.framefinish__title {
  margin: 0;
  color: var(--ink-800);
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4.6vw, 4.55rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: 0;
}
.framefinish__title span {
  color: var(--terracotta);
  font-style: italic;
  font-weight: 500;
}
.framefinish__lede {
  max-width: 42rem;
  margin: clamp(0.65rem, 1.05vw, 0.9rem) auto 0;
  color: var(--text-on-light-muted);
  font-size: clamp(0.98rem, 0.9rem + 0.34vw, 1.16rem);
  line-height: 1.55;
}
.framefinish__stage {
  --mx: 50%;
  --my: 50%;
  --r: 0px;
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(25, 25, 24, 0.12);
  border-radius: 8px;
  background: #0e0e0c;
  box-shadow: 0 2.2rem 5rem rgba(25, 25, 24, 0.2);
  cursor: crosshair;
  touch-action: pan-y;
  contain: layout paint;
}
.framefinish__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(
      circle var(--r) at var(--mx) var(--my),
      transparent 0%,
      transparent 57%,
      rgba(197, 96, 60, 0.32) 62%,
      rgba(197, 96, 60, 0.95) 70%,
      rgba(230, 138, 104, 0.98) 72.5%,
      rgba(197, 96, 60, 0.95) 75%,
      rgba(197, 96, 60, 0.5) 87%,
      transparent 100%
    );
  opacity: 0;
  transition: opacity 180ms ease;
  contain: layout paint;
}
.framefinish__stage[data-framefinish-open="true"]::after { opacity: 1; }
.framefinish__handle {
  display: none;
}
.framefinish__track {
  display: flex;
  width: 100%;
  height: 100%;
}
.framefinish__panel {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.framefinish__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.framefinish__img--finish {
  --mx: 50%;
  --my: 50%;
  --r: 0px;
  z-index: 2;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), transparent 0%, transparent 80%, #000 100%);
  mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), transparent 0%, transparent 80%, #000 100%);
  transition: --r 240ms ease;
}
.framefinish__progress {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(197,96,60,0.2), var(--terracotta));
  pointer-events: none;
}
.framefinish__hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(0.72rem, 1.35vw, 1.1rem);
  transform: translateX(-50%);
  margin: 0;
  padding: 0.64rem 1rem;
  border: 1px solid rgba(236,233,227,0.13);
  border-radius: 999px;
  color: #fff;
  background: rgba(18,18,16,0.74);
  backdrop-filter: blur(10px);
  box-shadow: 0 0.8rem 2rem rgba(0,0,0,0.22);
  font-size: clamp(0.68rem, 0.78vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.framefinish__hint-mobile { display: none; }
.framefinish__dots {
  display: flex;
  justify-content: center;
  gap: 0.72rem;
  margin-top: clamp(1.2rem, 2vw, 1.7rem);
}
.framefinish__dot {
  width: 0.72rem;
  height: 0.72rem;
  padding: 0;
  border: 2px solid rgba(25,25,24,0.28);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.framefinish__dot.is-active {
  border-color: var(--terracotta);
  background: radial-gradient(circle, var(--terracotta-soft) 0 42%, transparent 47%);
  transform: scale(1.18);
}
@media (prefers-reduced-motion: reduce) {
  .framefinish__progress { display: none; }
}

/* ---- 08 · DESIGN & PLANNING ---- */
.design-planning {
  min-height: clamp(44rem, 86svh, 54rem);
  overflow: hidden;
  padding-block: var(--section-pad);
  background:
    linear-gradient(90deg, rgba(9,9,10,0.68) 0%, rgba(23,23,23,0.9) 35%, rgba(23,23,23,0.62) 100%),
    url('../assets/bg-deep-gray-slate.webp') center / cover,
    var(--ink-900);
}
.design-planning::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,0.08) 12.1% 12.18%, transparent 12.3%),
    linear-gradient(0deg, transparent 0 28%, rgba(255,255,255,0.06) 28.08% 28.16%, transparent 28.25%),
    linear-gradient(32deg, transparent 0 54%, rgba(255,255,255,0.08) 54.08% 54.18%, transparent 54.28%);
  pointer-events: none;
}
.design-planning__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(19rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.design-planning__copy {
  max-width: 37rem;
  padding-top: clamp(1rem, 4vw, 4rem);
}
.design-planning__eyebrow,
.exterior__eyebrow {
  color: var(--terracotta);
  margin-bottom: clamp(1.2rem, 2vw, 1.8rem);
}
.design-planning__eyebrow::after,
.exterior__eyebrow::after {
  content: "";
  display: block;
  width: 3.35rem;
  height: 2px;
  margin-top: clamp(1rem, 1.4vw, 1.25rem);
  background: currentColor;
}
.design-planning__title {
  margin-left: clamp(-0.35rem, -0.5vw, -0.1rem);
  font-size: var(--step-4);
  line-height: 0.98;
  letter-spacing: 0;
  color: rgba(246,243,237,0.96);
  text-wrap: balance;
}
.design-planning__lede {
  max-width: 31rem;
  margin-top: clamp(1.5rem, 2vw, 2rem);
  color: rgba(236,233,227,0.72);
  line-height: 1.78;
}
.design-planning__stage {
  position: relative;
  /* tightened (David Jun 21) so the square build + 4:3 sketch — both shorter than
     the old tall boxes — fill the stage instead of floating in dead dark space. */
  min-height: clamp(26rem, 46vw, 40rem);
  /* NB: no `isolation: isolate` here — it's a grouping property that force-flattens
     transform-style, which would break the preserve-3d depth-swap (the cards would
     paint in source order instead of by translateZ). See motion.js card-swap. */
}
.design-planning__photo,
.design-planning__sketch {
  position: absolute;
  height: auto;
  object-fit: cover;
  box-shadow: 0 2.2rem 5rem rgba(0,0,0,0.42);
}
/* Both cards are sized to their image's NATIVE aspect ratio (David Jun 21) so the
   sketch + build show FULL and uncropped in original proportions — single-corner
   anchor + width + aspect-ratio (no 4-side inset / height% box that cropped via
   object-fit:cover). build = 1:1 square, sketch = 1448/1086 (~4:3). */
.design-planning__photo {
  top: 12%;
  right: 0;
  width: 60%;
  aspect-ratio: 1 / 1;
  filter: saturate(0.97) contrast(1.02);
}
.design-planning__sketch {
  top: 1%;
  left: 2%;
  width: 60%;
  aspect-ratio: 1448 / 1086;
  filter: contrast(1.04);
  transform: rotate(-4deg);
  background: var(--marble-50);
}
.design-planning__cad {
  position: absolute;
  inset: 18% 43% 5% 0;
  z-index: 0;
  opacity: 0.26;
  background:
    linear-gradient(90deg, rgba(236,233,227,0.28) 1px, transparent 1px) 0 0 / 4.5rem 4.5rem,
    linear-gradient(0deg, rgba(236,233,227,0.2) 1px, transparent 1px) 0 0 / 4.5rem 4.5rem;
}
/* .design-planning__rail removed (David R3 §3: "remove this one from [under D&P]")
   — its sleek style graduated up to the hero scope-rail. */

/* ---- 10 · EXTERIOR DESIGN ---- */
.exterior {
  min-height: clamp(50rem, 96svh, 59rem);
  overflow: hidden;
  padding: 0;
  display: grid;
  align-items: stretch;
  background: var(--ink-900);
}
.exterior__media {
  position: absolute;
  /* Overscan top & bottom so the depth-parallax (yPercent ±2.8 in motion.js)
     can never expose the section's ink background as a hairline seam mid-scroll.
     .exterior is overflow:hidden, so this bleed is clipped — it never spills onto
     the section above. (David Jun 21: tiny gap that only shows while scrolling.) */
  inset: -6% 0;
  overflow: hidden;
}
.exterior__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 32% 46%;
  /* undimmed (Jun 19): full-brightness photo; the right-side legibility scrim
     in ::after carries text contrast, so the image itself stays bright. */
  filter: saturate(1.0) brightness(1.02) contrast(1.03);
  transform: scale(1.09);
}
/* right-weighted: darken the RIGHT side (where the copy sits) — breaks the
   left-text repetition of Design&Planning / Custom Solutions above it. */
.exterior__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, rgba(16,16,17,0.92) 0%, rgba(18,18,19,0.66) 28%, rgba(18,18,19,0.12) 60%, transparent 100%),
    linear-gradient(0deg, rgba(16,16,17,0.62) 0%, transparent 30%);
}
.exterior__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: clamp(39rem, 77svh, 48rem);
  padding-block: var(--section-pad) calc(var(--section-pad) + var(--space-l)); /* asymmetric bottom clears the absolute scope strip */
}
.exterior__copy {
  width: min(100%, 36rem);
  text-align: right;
}
.exterior__title {
  font-size: var(--step-4);
  line-height: 0.98;
  letter-spacing: 0;
  color: rgba(246,243,237,0.96);
  text-wrap: balance;
}
.exterior__copy p:not(.eyebrow) {
  max-width: 33rem;
  margin-top: clamp(1.6rem, 2vw, 2.1rem);
  margin-left: auto;
  color: rgba(236,233,227,0.76);
  line-height: 1.82;
}
.exterior__eyebrow::after { margin-left: auto; margin-right: 0; }
.exterior__scope {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(1.4rem, 2.4vw, 2.4rem);
  display: grid;
  grid-template-columns: repeat(7, max-content);
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 3vw, 4.5rem);
  padding-top: clamp(1.25rem, 2vw, 1.8rem);
  border-top: 1px solid rgba(236,233,227,0.2);
  color: rgba(236,233,227,0.76);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.34em;
}
.exterior__scope i {
  width: 1px;
  height: 2.4rem;
  background: rgba(236,233,227,0.2);
}

/* ---- 11 · VALUES / STATEMENT BREATH ---- */
.statement {
  min-height: clamp(42rem, 78svh, 52rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  margin-top: clamp(-2.2rem, -2.3vw, -1.75rem);
  padding-block: var(--section-pad-breath);
  color: #161411;
  background: #f5f1ea;
}
.statement__stone {
  position: absolute;
  inset: -8%;
  background:
    url('../assets/marble-wide.webp') center / cover,
    #f4f0e9;
  filter: invert(1) grayscale(1) brightness(1.54) contrast(0.7);
  opacity: 0.5;
}
.statement__stone::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(245,242,236,0.96) 0%, rgba(245,242,236,0.72) 52%, rgba(245,242,236,0.18) 100%);
}
.statement__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(20rem, 0.78fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 7.5rem);
  align-items: center;
}
.statement__portrait {
  position: relative;
  min-height: clamp(31rem, 58vw, 43rem);
  overflow: hidden;
  background: var(--stone-200);
  box-shadow:
    1.15rem 1.45rem 2.1rem -1.15rem rgba(30,26,21,0.34),
    3.2rem 3.8rem 5.5rem -3.8rem rgba(30,26,21,0.28),
    0 1px 0 rgba(255,255,255,0.38) inset;
}
.statement__portrait img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: 50% 30%; /* frames both faces (him + wife, seated) */
  transform: scale(1.035);
  transform-origin: 50% 34%;
  filter: saturate(0.94) brightness(0.92) contrast(1.0);
}
.statement__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20,18,16,0.16), transparent 48%);
}
.statement__quote {
  max-width: 56rem;
}
.statement__eyebrow {
  color: var(--terracotta-deep);
  margin-bottom: clamp(1.2rem, 2vw, 1.7rem);
}
.statement__eyebrow::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 2px;
  margin-top: clamp(0.95rem, 1.4vw, 1.2rem);
  background: currentColor;
}
.statement blockquote {
  margin: 0;
}
.statement blockquote > p {
  max-width: 18ch;
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: 0;
  color: #171512;
  text-wrap: balance;
}
.statement__cite {
  display: grid;
  gap: 0.25rem;
  margin-top: clamp(1.7rem, 2.4vw, 2.35rem);
  padding-top: clamp(1.1rem, 1.5vw, 1.4rem);
  border-top: 2px solid var(--terracotta-deep);
  width: min(100%, 21rem);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.statement__cite strong {
  color: #171512;
  font-size: var(--step--1);
}
.statement__cite span {
  color: var(--stone-500);
  font-size: 0.72rem;
}

/* ---- 09 · PROCESS ---- */
.process {
  overflow: hidden;
  padding-block: var(--section-pad);
  background:
    linear-gradient(rgba(9,9,10,0.46), rgba(9,9,10,0.46)),
    url('../assets/marble-wide.webp') center / cover,
    var(--ink-900);
}
.process::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(192,97,61,0.08), transparent 21rem),
    radial-gradient(circle at 82% 22%, rgba(101,101,101,0.08), transparent 28rem);
  pointer-events: none;
}
.process__inner {
  position: relative;
  z-index: 1;
}
.process__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  gap: clamp(3rem, 10vw, 10rem);
  align-items: end;
}
.process__eyebrow {
  color: var(--terracotta);
  margin-bottom: clamp(1.3rem, 2vw, 1.9rem);
}
.process__title {
  font-size: var(--step-4);
  line-height: 1.0;
  color: rgba(245,242,236,0.94);
  text-wrap: balance;
}
.process__lede {
  max-width: 31rem;
  margin-bottom: clamp(0.2rem, 1vw, 0.7rem);
  color: rgba(236,233,227,0.72);
  font-size: clamp(1.05rem, 1.3vw, 1.32rem);
  line-height: 1.82;
}
.process__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--space-l);
}
.process__step {
  position: relative;
  min-height: 22.8rem;
  padding: 0 clamp(1.2rem, 2vw, 2rem) 0 clamp(1.1rem, 1.7vw, 1.6rem);
}
.process__step + .process__step {
  border-left: 1px solid rgba(236,233,227,0.15);
}
.process__num {
  display: block;
  margin-bottom: 1.35rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--terracotta);
}
.process__rail {
  position: absolute;
  top: 3.4rem;
  right: 1.65rem;
  width: clamp(5.4rem, 7.4vw, 8rem);
  border-top: 2px dotted rgba(192,97,61,0.58);
}
.process__rail::after {
  content: "";
  position: absolute;
  right: -0.46rem;
  top: -0.37rem;
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid var(--terracotta);
  border-radius: 50%;
  background: var(--ink-900);
}
.process__step:last-child .process__rail {
  display: none;
}
.process__glyph {
  display: block;
  margin: 0 0 clamp(1.75rem, 2.5vw, 2.35rem);
  color: var(--terracotta);       /* warm line-art on the ink process bg */
}
.process__glyph .icon,
.process__glyph img {
  display: block;
  width: clamp(3rem, 3.6vw, 3.6rem);
  height: clamp(3rem, 3.6vw, 3.6rem);
}
.process__step h3 {
  margin-bottom: clamp(1.15rem, 1.7vw, 1.55rem);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.08;
  color: rgba(245,242,236,0.94);
}
.process__step h3::after {
  content: "";
  display: block;
  width: 2.7rem;
  height: 2px;
  margin-top: clamp(1.1rem, 1.55vw, 1.45rem);
  background: var(--terracotta);
}
.process__step p {
  max-width: 14.5rem;
  color: rgba(236,233,227,0.66);
  line-height: 1.92;
}
.process__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 27rem);
  align-items: center;
  gap: clamp(1.3rem, 2.4vw, 2.6rem);
  margin-top: clamp(1.9rem, 3.3vw, 3.25rem);
  padding: clamp(1rem, 1.45vw, 1.35rem) clamp(1.4rem, 2.8vw, 2.6rem);
  border: 1px solid rgba(236,233,227,0.18);
  background: rgba(7,7,8,0.06);
}
.process__cta-icon {
  display: none;
}
.process__cta-rule {
  display: none;
}
.process__cta-copy {
  display: grid;
  grid-template-columns: minmax(10.5rem, max-content) minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.7rem, 1.3vw, 1.15rem);
}
.process__cta-copy strong {
  font-size: clamp(1.38rem, 1.55vw, 1.9rem);
  font-weight: 400;
  line-height: 0.94;
  color: rgba(245,242,236,0.95);
}
.process__cta-copy span {
  color: rgba(236,233,227,0.66);
  font-size: clamp(0.88rem, 0.96vw, 1rem);
  line-height: 1.45;
}
.process__cta-button {
  min-height: 3.5rem;
  justify-content: center;
  gap: clamp(1.1rem, 2vw, 1.8rem);
  font-size: clamp(0.76rem, 0.88vw, 0.9rem);
  letter-spacing: 0.18em;
}

/* ---- 10 · REVIEWS ---- */
/* bottom padding tightened (Round 2): the .reviews__trust stat bar was deleted,
   so the marquee rail is now the closing element — it sits closer to the
   dark→marble seam into #team so there's no dead gap. */
.reviews {
  overflow: hidden;
  padding-block: var(--section-pad);
  background:
    radial-gradient(circle at 83% 8%, rgba(192,97,61,0.08), transparent 30rem),
    linear-gradient(rgba(7,7,8,0.68), rgba(7,7,8,0.66)),
    url('../assets/bg-deep-gray-slate.webp') center top / cover,
    var(--ink-900);
}
.reviews__inner {
  max-width: 1540px;
}
.reviews__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 0.62fr);
  align-items: end;
  gap: clamp(2rem, 4.4vw, 5.2rem);
  margin-bottom: clamp(1.5rem, 2.4vw, 2.4rem);
}
.reviews__eyebrow {
  grid-column: 1 / -1;
  color: var(--terracotta);
  margin-bottom: 0;
}
.reviews__title {
  max-width: 14ch;
  font-size: var(--step-4);                /* main-header rung, like every other section h2 (was --step-5 = hero-display size, the loudest off-scale outlier — DUMP §14) */
  line-height: 0.96;
  color: rgba(245,242,236,0.94);
  text-wrap: balance;
}
.reviews__lede {
  max-width: 38rem;
  color: rgba(236,233,227,0.72);
  /* (07.02) demoted to the site's established lede rung — the exact scale the
     Frame-to-Finish lede uses under ITS display title. At --step-1 with 1.7
     leading this line read as a stray half-heading (too big for a lede, sans
     where headings are serif) instead of the quiet support line every other
     section head carries (David: "weirdly sized/weighted"). */
  font-size: clamp(0.98rem, 0.9rem + 0.34vw, 1.16rem);
  line-height: 1.55;
}
.reviews__rail {
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  padding-block: 0.5rem;
  overflow: hidden;
}
/* Edge fade (David Jun 21): the cards must DISSOLVE into the section bg, not sit
   under a darker smear. Earlier #0c0c0d tint was darker than the ink-900 canvas
   AND the backdrop-blur frosted the text — both read as a defect. Clean scrim:
   a solid bg-color → transparent gradient in the EXACT section bg, no blur. */
.reviews__rail::before,
.reviews__rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(4rem, 8vw, 10rem);
  z-index: 3;
  pointer-events: none;
}
.reviews__rail::before {
  left: 0;
  background: linear-gradient(90deg, var(--ink-900) 0%, var(--ink-900) 18%, rgba(25,25,24,0) 100%);
}
.reviews__rail::after {
  right: 0;
  background: linear-gradient(270deg, var(--ink-900) 0%, var(--ink-900) 18%, rgba(25,25,24,0) 100%);
}
.reviews__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  gap: clamp(1rem, 1.5vw, 1.45rem);
  padding-inline: var(--gutter);
  animation: reviews-marquee 92s linear infinite;
}
/* When JS takes over the scroll (transform driven), the CSS keyframe is off. */
.reviews__rail.is-js .reviews__track { animation: none; }
.reviews__rail:hover .reviews__track,
.reviews__rail:focus-within .reviews__track {
  animation-play-state: paused;
}
.reviews__rail.is-static {
  overflow: visible;
}
.reviews__rail.is-static::before,
.reviews__rail.is-static::after { display: none; }
.reviews__rail.is-static .reviews__track {
  flex-wrap: wrap;
  width: auto;
  animation: none;
}
@keyframes reviews-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}
/* CONTENT-AWARE scrapboard columns (07.02 recomposition — David rejected the
   old flex-band grid: cards were sized blind to their text, Kevin/Gail's
   3-liners floated in ~300px of whitespace while Adam's column set the rail
   height). Every card now hugs its own text: flex-basis:auto (card starts at
   min-content), flex-shrink:0 (can never clip), and the small column slack
   left by pairing long-with-short distributes by the per-card --w weight set
   inline in the HTML (weights ≈ relative content height, so slack spreads
   proportionally instead of pooling in one card). Columns are hand-paired so
   every column's content sum lands within ~50px of the tallest — measured,
   not eyeballed. Two --wide anchor columns (Tammy feature / Adam long-read)
   sit non-adjacent at irregular spacing so the loop reads as a pinned board,
   not a repeating grid. */
.reviews__col {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.5vw, 1.45rem);
  flex: 0 0 min(31rem, calc(100vw - (var(--gutter) * 2)));
}
.reviews__col--wide {
  flex-basis: min(43rem, calc(100vw - (var(--gutter) * 2)));
}
.reviews__col--narrow {
  flex-basis: min(28rem, calc(100vw - (var(--gutter) * 2)));
}
/* the feature (Tammy) column is the single widest slot on the board — the
   flagship card wins on area + type, not on inflated empty height */
.reviews__col--hero {
  flex-basis: min(46rem, calc(100vw - (var(--gutter) * 2)));
}
.review-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  flex: var(--w, 1) 0 auto;
  padding: clamp(1.25rem, 1.62vw, 1.65rem);
  border: 1px solid rgba(236,233,227,0.28);
  background:
    linear-gradient(140deg, rgba(250,246,239,0.94), rgba(236,230,219,0.91)),
    url('../assets/marble-wide.webp') center / cover,
    var(--marble-50);
  color: var(--text-on-light);
  box-shadow: 0 22px 46px -38px rgba(0,0,0,0.68);
}
/* Watermark quote: KILLED (07.02). The old small top-left double-quote under
   the stars read as "devil horns" (David). The one sanctioned replacement — a
   single \201C at ~10x, top-right, quarter-cropped into the card at ~0.05
   opacity — was built and captured (Site_carve/_captures/reviews-recomp-0702/
   probe-B/C vs reviews-1440-quoteNONE-*): at watermark opacity the giant
   glyph reads as a vague stain across the marble, not a quote. It fights the
   composition, so per the dead-default rule ALL quote marks are gone. */
.review-card__stars,
.review-card__quote,
.review-card__name,
.review-card__source {
  position: relative;
  z-index: 1;
}
/* Size-band flex ratios retired (07.02): card size is now content-driven via
   flex-basis:auto + per-card --w (see the column comment above). --feature
   keeps only its flagship TYPE treatment; --tall keeps only its dense quote
   font (Adam's 110-word long-read). */
.review-card__stars {
  margin-bottom: clamp(0.45rem, 0.78vw, 0.75rem);
  color: var(--terracotta-deep);
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.18rem);
  font-weight: 800;
  letter-spacing: 0.14em;
}
.review-card__quote {
  margin-top: 0;
  color: rgba(38,35,30,0.86);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.15vw, 1.28rem);
  line-height: 1.44;
}
.review-card--tall .review-card__quote {
  font-size: clamp(1.02rem, 1.12vw, 1.22rem);   /* was --step-1 — the 875-char card ran the rail >1.4 screens (David 06.21) */
}
/* Feature (Tammy) — the flagship reads loudest: biggest type on the board,
   wide column, roomier leading. Size comes from her 8 lines at this scale,
   not from an inflated flex ratio. */
.review-card--feature .review-card__quote {
  font-size: clamp(1.22rem, 1.45vw, 1.56rem);
  line-height: 1.52;
}
.review-card__name {
  margin-top: auto;
  align-self: flex-end;
  max-width: calc(100% - 4.25rem);
  padding-top: clamp(0.55rem, 0.95vw, 0.85rem);
  color: #171512;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: right;
}
.review-card__source {
  position: absolute;
  left: clamp(1.05rem, 1.45vw, 1.45rem);
  bottom: clamp(0.95rem, 1.25vw, 1.25rem);
  width: clamp(2.1rem, 2.6vw, 2.9rem);
  opacity: 0.68;
  pointer-events: none;
}
.review-card__source img {
  display: block;
  width: 100%;
  height: auto;
}
.reviews__warranty-slot {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.4rem, 2.4vw, 2.6rem);
}
.reviews__warranty-slot.is-pending {
  display: none;
}
.reviews__warranty-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  padding: 0.65rem 0.9rem 0.65rem 0.7rem;
  border: 1px solid rgba(236,233,227,0.22);
  background: rgba(11,11,12,0.42);
  color: rgba(245,242,236,0.9);
}
.reviews__warranty-seal {
  display: grid;
  place-items: center;
  width: 3.6rem;
  aspect-ratio: 1;
  border: 1px solid rgba(192,97,61,0.55);
  border-radius: 50%;
  color: var(--terracotta);
  font-family: var(--font-display);
  line-height: 0.9;
}
.reviews__warranty-seal strong {
  font-size: 1.38rem;
}
.reviews__warranty-seal em {
  font-size: 0.72rem;
  font-style: italic;
}
.reviews__warranty-img {
  display: block;
  width: 3.9rem;
  aspect-ratio: 1;
  object-fit: contain;
}
.reviews__warranty-badge figcaption {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .reviews__rail {
    overflow: visible;
  }
  .reviews__rail::before, .reviews__rail::after { display: none; }
  .reviews__track {
    flex-wrap: wrap;
    width: auto;
    animation: none;
  }
}

/* ---- 11 · TEAM / ABOUT ---- */
.team {
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h) + 1rem);
  padding-block: calc(var(--section-pad-tight) + var(--nav-h) * 0.3) var(--section-pad-tight);
  background: var(--marble-50);
}
.team__stone {
  position: absolute;
  inset: -6%;
  background:
    linear-gradient(rgba(245,242,236,0.73), rgba(245,242,236,0.83)),
    url('../assets/marble-wide.webp') center / cover,
    var(--marble-50);
  opacity: 0.86;
  filter: saturate(0.65) brightness(1.08);
}
.team__inner {
  position: relative;
  z-index: 1;
  max-width: 1540px;
}
.team__intro {
  display: grid;
  grid-template-columns: minmax(22rem, 0.82fr) minmax(34rem, 1fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 6rem);
  margin-bottom: clamp(1rem, 1.7vw, 1.75rem);
}
.team__head {
  max-width: 52rem;
  margin-bottom: 0;
}
.team__eyebrow {
  color: var(--terracotta-deep);
  margin-bottom: clamp(1.2rem, 1.8vw, 1.7rem);
}
.team__title {
  color: #171512;
  font-size: var(--step-4);
  line-height: 1.0;
}
/* The trust copy belongs as a compact horizontal band, not a skinny center column. */
.team__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: end;
  width: 100%;
  border-block: 1px solid rgba(68,64,58,0.16);
  text-align: left;
}
.team__pillars article {
  min-width: 0;
  min-height: clamp(7.4rem, 8vw, 8.8rem);
  padding: clamp(1rem, 1.35vw, 1.35rem);
}
.team__pillars article + article {
  border-left: 1px solid rgba(68,64,58,0.16);
}
.team__pillars span {
  color: #171512;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.45vw, 1.7rem);
  line-height: 1.12;
}
.team__pillars p {
  max-width: 17ch;
  margin-top: 0.65rem;
  color: rgba(68,64,58,0.7);
  font-size: clamp(0.86rem, 0.9vw, 0.96rem);
  line-height: 1.42;
  text-wrap: balance;
}
.team__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  align-items: start;
  gap: clamp(1.6rem, 2.4vw, 3rem);
  max-width: 1480px;
  margin-inline: auto;
}
@media (max-width: 1040px) {
  .team__cards { grid-template-columns: minmax(0, min(100%, 31rem)); justify-content: center; }
}
.team-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  overflow: visible;
  background: rgba(247,243,235,0.82);
  border: 1px solid rgba(68,64,58,0.08);
  box-shadow: 0 22px 42px -34px rgba(39,34,27,0.46);
}
.team-card__portrait {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ddd6ca;
  text-align: left;
  cursor: pointer;
}
.team-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: none;
  transform: none;
  transition: filter 0.35s var(--ease-out), transform 0.45s var(--ease-out);
}
.team-card__portrait--founder img {
  object-position: center center;
}
.team-card__portrait--foreman img {
  object-position: center center;
}
.team-card__portrait--manager img {
  object-position: center center;
}
.team-card__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15,14,12,0.56);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.team-card__bio {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(1.05rem, 1.9vw, 1.6rem) clamp(1.2rem, 2.2vw, 1.9rem) clamp(1.3rem, 2.3vw, 2rem);
  color: rgba(245,242,236,0.97);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s var(--ease-out), transform 0.4s var(--ease-out);
  pointer-events: none;
}
.team-card__bio-label {
  align-self: start;
  justify-self: start;
  color: var(--terracotta-soft);
  font-size: clamp(0.72rem, 0.8vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.team-card__bio-text {
  align-self: center;
  text-align: center;
  font-family: var(--font-display);
  max-width: 35ch;
  margin-inline: auto;
  font-size: clamp(1.14rem, 1.24vw, 1.48rem);
  line-height: 1.16;
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(0,0,0,0.4);
}
/* Reveal — desktop = hover only (no click-stay); touch = tap (focus / is-open) */
@media (hover: hover) {
  .team-card:hover .team-card__portrait img {
    filter: saturate(0.8) brightness(0.6) blur(3px);
    transform: scale(1.045);
  }
  .team-card:hover .team-card__portrait::after,
  .team-card:hover .team-card__bio { opacity: 1; }
  .team-card:hover .team-card__bio { transform: translateY(0); }
}
@media (hover: none), (pointer: coarse) {
  .team-card:focus-within .team-card__portrait img,
  .team-card.is-open .team-card__portrait img {
    filter: saturate(0.8) brightness(0.6) blur(3px);
    transform: scale(1.045);
  }
  .team-card:focus-within .team-card__portrait::after,
  .team-card.is-open .team-card__portrait::after,
  .team-card:focus-within .team-card__bio,
  .team-card.is-open .team-card__bio { opacity: 1; }
  .team-card:focus-within .team-card__bio,
  .team-card.is-open .team-card__bio { transform: translateY(0); }
}
.team-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.7rem, 1.1vw, 1rem);
  min-height: 0;
  padding: clamp(0.82rem, 1vw, 1.05rem) clamp(1rem, 1.35vw, 1.45rem);
  background: rgba(247,243,235,0.94);
  border-top: 1px solid rgba(68,64,58,0.09);
}
.team-card__id {
  min-width: 0;
}
.team-card h3 {
  color: #171512;
  font-size: clamp(1.32rem, 1.5vw, 2rem);
  line-height: 1.05;
  white-space: nowrap;
}
.team-card__role {
  margin-top: 0.48rem;
  color: var(--terracotta-deep);
  font-size: clamp(0.62rem, 0.78vw, 0.86rem);
  font-weight: 700;
  letter-spacing: clamp(0.12em, 0.35vw, 0.24em);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.team-card__cue {
  flex-shrink: 0;
  align-self: center;
  text-align: right;
  color: rgba(68,64,58,0.66);
  font-size: clamp(0.58rem, 0.68vw, 0.78rem);
  line-height: 1.2;
  letter-spacing: clamp(0.1em, 0.28vw, 0.18em);
  text-transform: uppercase;
  white-space: nowrap;
}
.team-card__cue .cue-tap { display: none; }
@media (hover: none), (pointer: coarse) {
  .team-card__cue .cue-hover { display: none; }
  .team-card__cue .cue-tap { display: inline; }
}

/* Desktop polish: keep the exact same card grammar as mobile — square portrait,
   one-line name/role, bounded readable note — only tighten the spacing for 3-up. */
@media (hover: hover) and (pointer: fine) and (min-width: 1041px) {
  .team__cards {
    gap: clamp(1.25rem, 2vw, 2.25rem);
  }
  .team-card__portrait--foreman img {
    object-position: 50% 28%;
  }
  .team-card__portrait--founder img {
    object-position: 50% 34%;
  }
  .team-card__portrait--manager img {
    object-position: 50% 30%;
  }
  .team-card__bio {
    inset: 0;
    display: grid;
    padding: clamp(1rem, 1.45vw, 1.35rem) clamp(1.12rem, 1.65vw, 1.55rem) clamp(1.12rem, 1.75vw, 1.65rem);
  }
  .team-card__bio-label {
    margin-bottom: 0;
    font-size: clamp(0.66rem, 0.68vw, 0.74rem);
    letter-spacing: 0.24em;
  }
  .team-card__bio-text {
    display: block;
    align-self: center;
    max-width: 33ch;
    margin-inline: auto;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.22rem, 1.36vw, 1.55rem);
    line-height: 1.2;
    text-wrap: balance;
    text-shadow: 0 1px 14px rgba(0,0,0,0.4);
  }
  .team-card__body {
    min-height: clamp(5.6rem, 6.3vw, 6.8rem);
  }
  .team-card h3 {
    font-size: clamp(1.22rem, 1.55vw, 1.86rem);
  }
  .team-card__role {
    font-size: clamp(0.58rem, 0.72vw, 0.78rem);
    letter-spacing: clamp(0.1em, 0.28vw, 0.2em);
  }
  .team-card__cue {
    max-width: 8.5rem;
    font-size: clamp(0.54rem, 0.62vw, 0.68rem);
    letter-spacing: clamp(0.1em, 0.22vw, 0.16em);
  }
}
.team__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(1.35rem, 2.2vw, 2.2rem);
  border: 1px solid rgba(68,64,58,0.12);
  background: rgba(247,243,235,0.62);
}
.team__facts article {
  min-width: 0;
  padding: clamp(1.1rem, 1.65vw, 1.55rem);
}
.team__facts article + article {
  border-left: 1px solid rgba(68,64,58,0.12);
}
.team__facts strong {
  display: block;
  color: var(--terracotta-deep);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.team__facts span {
  display: block;
  margin-top: 0.55rem;
  color: rgba(68,64,58,0.74);
  font-size: var(--step--1);
  line-height: 1.48;
}

/* ---- 12 · FAQ ---- */
.faq {
  overflow: hidden;
  padding-block: var(--section-pad);
  background:
    linear-gradient(rgba(240,233,221,0.88), rgba(240,233,221,0.92)),
    url('../assets/bg-creamy-herringbone.webp') center / cover,
    var(--cream);
}
.faq__inner {
  display: grid;
  grid-template-columns: minmax(20rem, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(3rem, 5vw, 5.5rem);
  align-items: start;
}
.faq__intro {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  padding-top: clamp(0.4rem, 0.9vw, 0.9rem);
}
.faq__eyebrow {
  color: var(--terracotta-deep);
  margin-bottom: clamp(2.15rem, 3.2vw, 3.15rem);
}
.faq__title {
  color: #171512;
  font-size: var(--step-4);
  line-height: 0.98;
}
.faq__intro i {
  display: block;
  width: 4.5rem;
  height: 2px;
  margin: clamp(2.25rem, 3.25vw, 3.25rem) 0 clamp(1.65rem, 2.35vw, 2.35rem);
  background: var(--terracotta-deep);
}
.faq__intro > p {
  max-width: 38rem;
  color: rgba(68,64,58,0.78);
  font-size: clamp(1.05rem, 1.22vw, 1.28rem);
  line-height: 1.82;
}
.faq__call {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 2.8vw, 2.8rem);
  padding-top: clamp(1.6rem, 2.35vw, 2.35rem);
  border-top: 1px solid rgba(68,64,58,0.16);
  color: rgba(38,35,30,0.88);
}
.faq__call span {
  position: relative;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid var(--terracotta-deep);
  border-radius: 50%;
}
.faq__call svg {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1.15rem;
  height: 1.15rem;
  transform: translate(-50%, -50%);
  stroke: var(--terracotta-deep);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faq__call strong {
  font-weight: 500;
  line-height: 1.45;
}
.faq__call u {
  color: var(--terracotta-deep);
  text-underline-offset: 0.22em;
}
.faq__list {
  border-top: 1px solid rgba(68,64,58,0.18);
}
.faq-item {
  position: relative;
  border-bottom: 1px solid rgba(68,64,58,0.18);
}
.faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.4rem;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1.2rem, 1.7vw, 1.75rem) 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary span {
  color: #171512;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.2;
}
.faq-item summary i {
  position: relative;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid rgba(164,78,47,0.42);
  border-radius: 50%;
}
.faq-item summary i::before,
.faq-item summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9rem;
  height: 1px;
  background: var(--terracotta-deep);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, opacity 180ms ease;
}
.faq-item summary i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item[open] summary i::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-item p {
  max-width: 58rem;
  margin: -0.7rem 4rem clamp(1.55rem, 2.2vw, 2.25rem) 0;
  color: rgba(38,35,30,0.76);
  font-size: clamp(0.98rem, 1.06vw, 1.12rem);
  line-height: 1.64;
}

/* ---- 13 · CONTACT ---- */
.contact {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  min-height: 100dvh;
  padding-block: var(--section-pad);
  background:
    radial-gradient(circle at 84% 5%, rgba(255,231,209,0.12), transparent 31rem),
    linear-gradient(105deg, rgba(135,47,23,0.28), rgba(135,47,23,0.06) 48%, rgba(72,22,11,0.18)),
    var(--terracotta);
}
.contact::before {
  content: "";
  position: absolute;
  left: -2vw;
  bottom: -1vw;
  width: min(45rem, 48vw);
  aspect-ratio: 1.38 / 1;
  opacity: 0.13;
  background:
    linear-gradient(33deg, transparent 0 18%, rgba(255,248,239,0.25) 18.15% 18.35%, transparent 18.5%),
    linear-gradient(24deg, transparent 0 39%, rgba(255,248,239,0.22) 39.1% 39.3%, transparent 39.45%),
    linear-gradient(90deg, transparent 0 17%, rgba(255,248,239,0.2) 17.1% 17.3%, transparent 17.45%),
    linear-gradient(90deg, transparent 0 58%, rgba(255,248,239,0.18) 58.1% 58.3%, transparent 58.45%),
    linear-gradient(0deg, transparent 0 28%, rgba(255,248,239,0.18) 28.1% 28.3%, transparent 28.45%),
    linear-gradient(0deg, transparent 0 64%, rgba(255,248,239,0.17) 64.1% 64.3%, transparent 64.45%);
  pointer-events: none;
}
.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 5rem 5rem;
  opacity: 0.16;
  pointer-events: none;
}
.contact__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(20rem, 0.72fr) minmax(34rem, 1fr);
  gap: clamp(4rem, 8vw, 9.2rem);
  align-items: start;
}
.contact__copy {
  padding-top: clamp(0.45rem, 1.1vw, 1.4rem);
}
.contact__eyebrow {
  color: rgba(255,248,239,0.82);
}
.contact__title {
  max-width: 8.35ch;
  margin-top: clamp(0.9rem, 1.4vw, 1.4rem);
  color: rgba(255,248,239,0.92);
  font-size: var(--step-4);
  line-height: 0.94;
  letter-spacing: -0.018em;
}
.contact__title em {
  display: block;
  font-style: normal;
  color: inherit;
}
.contact__lede {
  max-width: 29rem;
  margin-top: clamp(1.05rem, 1.6vw, 1.6rem);
  color: rgba(255,248,239,0.92);
  font-size: clamp(1.1rem, 1.35vw, 1.35rem);
  line-height: 1.72;
}
.contact__copy > i {
  display: block;
  width: 4.3rem;
  height: 2px;
  margin: clamp(1.2rem, 2vw, 1.85rem) 0;
  background: rgba(255,248,239,0.64);
}
.contact__phone,
.contact__service {
  display: grid;
  grid-template-columns: 4.9rem minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.1rem, 1.7vw, 1.8rem);
  color: rgba(255,248,239,0.88);
}
.contact__phone span,
.contact__service span {
  position: relative;
  width: 4.25rem;
  height: 4.25rem;
  border: 1px solid rgba(255,248,239,0.72);
  border-radius: 50%;
}
.contact__phone svg {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1.75rem;
  height: 1.75rem;
  transform: translate(-50%, -50%);
  stroke: rgba(255,248,239,0.9);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact__phone strong {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.32vw, 1.3rem);
  font-weight: 400;
  line-height: 1.55;
}
.contact__service {
  margin-top: clamp(1.45rem, 2vw, 1.95rem);
  color: rgba(255,248,239,0.72);
  font-size: clamp(1.05rem, 1.32vw, 1.3rem);
  line-height: 1.55;
}
.contact__service span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.18rem;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid rgba(255,248,239,0.88);
  border-radius: 50% 50% 50% 0;
  transform: translateX(-50%) rotate(-45deg);
}
.contact__service span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.54rem;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: rgba(255,248,239,0.88);
  transform: translateX(-50%);
}
.contact__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.7rem, 1vw, 1rem) clamp(1.45rem, 2vw, 2rem);
}
.contact__field {
  display: grid;
  gap: 0.5rem;
  grid-column: 1 / -1;
}
.contact__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.contact__field--half {
  grid-column: auto;
}
.contact__field label,
.contact__upload b {
  color: rgba(255,248,239,0.9);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 450;
  line-height: 1;
}
.contact__field input,
.contact__field select,
.contact__field textarea {
  width: 100%;
  min-height: 3.3rem;
  border: 1px solid rgba(255,248,239,0.42);
  border-radius: 2px;
  background: rgba(133,48,24,0.28);
  color: #fffaf3;
  padding: 0 1.1rem;
  font: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,248,239,0.06);
}
.contact__field textarea {
  min-height: clamp(5.3rem, 7vw, 6.6rem);
  padding-block: 0.85rem;
  resize: vertical;
}
.contact__field select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, rgba(255,248,239,0.9) 50%) calc(100% - 1.55rem) 50% / 0.48rem 0.48rem no-repeat,
    linear-gradient(135deg, rgba(255,248,239,0.9) 50%, transparent 50%) calc(100% - 1.18rem) 50% / 0.48rem 0.48rem no-repeat,
    rgba(133,48,24,0.28);
}
.contact__field option {
  background: var(--ink-900);
  color: var(--text-on-dark);
}
.contact__upload {
  position: relative;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: center;
  gap: 1.15rem 1.8rem;
  grid-column: 1 / -1;
  min-height: clamp(4.7rem, 6vw, 5.6rem);
  padding: 1.05rem clamp(1.5rem, 2.7vw, 2.8rem);
  border: 1px dashed rgba(255,248,239,0.48);
  background: rgba(133,48,24,0.16);
  cursor: pointer;
}
.contact__upload > span {
  position: relative;
  grid-row: 1 / span 2;
  width: 4.1rem;
  height: 4.1rem;
}
.contact__upload > span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.3rem;
  width: 1.9rem;
  height: 1.9rem;
  border-left: 2px solid rgba(255,248,239,0.92);
  border-top: 2px solid rgba(255,248,239,0.92);
  transform: translateX(-50%) rotate(45deg);
}
.contact__upload > span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.42rem;
  width: 2.95rem;
  height: 1.35rem;
  border: 3px solid rgba(255,248,239,0.92);
  border-top: 0;
  transform: translateX(-50%);
}
.contact__upload small {
  color: rgba(255,248,239,0.64);
  font-size: clamp(0.96rem, 1.08vw, 1.12rem);
  line-height: 1.45;
}
.contact__upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.contact__talk {
  grid-column: 1 / -1;
  color: rgba(255,248,239,0.78);
  font-size: var(--step--1);
}
.contact__status,
.contact__noscript {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.78rem 0.92rem;
  border: 1px solid rgba(255,248,239,0.22);
  background: rgba(18,18,17,0.2);
  color: rgba(255,248,239,0.9);
  font-size: clamp(0.88rem, 0.96vw, 1rem);
  line-height: 1.5;
}
.contact__status:empty {
  display: none;
}
.contact__status.is-error {
  border-color: rgba(255,222,210,0.38);
  background: rgba(92,28,16,0.28);
}
.contact__status.is-success {
  border-color: rgba(255,248,239,0.26);
  background: rgba(17,17,16,0.3);
}
.contact__noscript a {
  color: #fffaf3;
  text-decoration: underline;
  text-underline-offset: 0.24em;
}
.contact__talk a {
  color: #fffaf3;
  text-decoration: underline;
  text-underline-offset: 0.24em;
}
.contact__submit {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  justify-self: start;
  min-height: 0;
  padding: 0.95em 1.5em;
  border-radius: var(--radius);
  background: var(--terracotta);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.contact__submit:hover {
  transform: translateY(-1px);
  background: var(--terracotta-deep);
}
.contact__submit[disabled] {
  opacity: 0.72;
  cursor: wait;
  transform: none;
}
.contact__submit span:last-child {
  font-size: inherit;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
}
.contact__submit:hover span:last-child { transform: translateX(3px); }

/* ---- 14 · FOOTER ---- */
.footer {
  overflow: hidden;
  padding-block: 0;
  background:
    linear-gradient(rgba(11,11,11,0.67), rgba(11,11,11,0.67)),
    url('../assets/bg-deep-gray-slate.webp') center top / cover no-repeat,
    var(--ink-900);
}
.footer__statement {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(15rem, 22vw, 20rem);
  padding-block: clamp(3.4rem, 5vw, 5rem);
  text-align: center;
  overflow: hidden;
  /* Terracotta brand sign-off panel (David Jun 21): real material grain over the
     flat terracotta, plus a hairline lid + grounding shadow so it reads as a
     deliberate closing panel, not an orphan strip. */
  background:
    radial-gradient(circle at 84% 8%, rgba(255,231,209,0.12), transparent 30rem),
    linear-gradient(105deg, rgba(135,47,23,0.30), rgba(135,47,23,0.06) 50%, rgba(72,22,11,0.20)),
    var(--terracotta);
  border-top: 1px solid rgba(255,231,209,0.16);
  box-shadow: inset 0 -40px 64px -44px rgba(38,11,4,0.72);
}
.footer__statement::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../assets/marble-wide.webp') center / cover;
  mix-blend-mode: soft-light;
  opacity: 0.3;
  pointer-events: none;
}
.footer__statement .wrap { position: relative; z-index: 1; }
.footer__statement p {
  max-width: 18ch;
  margin-inline: auto;
  color: var(--text-on-dark);            /* cream reads clean on terracotta */
  font-family: var(--font-display);       /* keep Newsreader display face */
  font-weight: 500;
  text-transform: uppercase;              /* the all-caps ask */
  letter-spacing: 0.04em;                 /* "not quite as much" tracking */
  font-size: var(--step-4);               /* re-tokened off a bespoke clamp -> the main-header rung (DUMP §14) */
  line-height: 1.04;                      /* caps need a hair more leading */
}
.footer__statement i {
  display: block;
  width: 6rem;
  height: 2px;
  margin: clamp(1.4rem, 2.2vw, 2.1rem) auto 0;
  background: rgba(255,248,239,0.7);   /* cream rule, visible on terracotta */
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(22rem, 1.35fr) minmax(13rem, 0.78fr) minmax(13rem, 0.78fr);
  gap: clamp(2.2rem, 4.3vw, 5.1rem);
  padding-block: clamp(3.6rem, 4.85vw, 4.95rem) clamp(3rem, 4vw, 4.2rem);
}
.footer__brand,
.footer__nav {
  min-width: 0;
}
.footer__brand {
  padding-right: clamp(1rem, 2.5vw, 3rem);
}
.footer__brand .brandmark {
  margin-bottom: clamp(1rem, 1.6vw, 1.55rem);
}
.footer__brand i {
  display: block;
  width: 4.9rem;
  height: 1px;
  margin: 0 0 clamp(1.35rem, 2.2vw, 2.2rem);
  background: var(--terracotta);
}
.footer__brand p {
  max-width: 24rem;
  color: rgba(236,233,227,0.74);
  font-size: clamp(1rem, 1.18vw, 1.18rem);
  line-height: 1.84;
}
.footer__brand-contact {
  margin-top: clamp(1.3rem, 2vw, 2rem);
  color: rgba(236,233,227,0.58) !important;
  font-size: clamp(0.92rem, 1.02vw, 1.04rem) !important;
  line-height: 1.7 !important;
}
.footer__brand-contact a {
  color: rgba(236,233,227,0.78);
}
.footer__brand em {
  color: rgba(236,233,227,0.92);
  font-style: italic;
}
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.78rem;
  padding-left: clamp(1.8rem, 3vw, 3.1rem);
  border-left: 1px solid rgba(236,233,227,0.13);
}
.footer h2 {
  margin-bottom: clamp(0.85rem, 1.2vw, 1.2rem);
  color: var(--terracotta-soft);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.footer__nav a,
.footer__bottom {
  color: rgba(236,233,227,0.68);
}
.footer__nav a,
.footer__brand-contact,
.footer__brand-contact a {
  font-size: clamp(1rem, 1.18vw, 1.2rem);
  line-height: 1.5;
}
.footer__nav a,
.footer__brand-contact a,
.footer__bottom a {
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__nav a:hover,
.footer__brand-contact a:hover,
.footer__bottom a:hover {
  color: var(--text-on-dark);
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: clamp(1.6rem, 2.5vw, 2.4rem);
  border-top: 1px solid rgba(192,97,61,0.38);
  font-size: var(--step--1);
}
.footer__bottom div {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
}
.footer__bottom span {
  color: var(--terracotta-soft);
}

/* ---- Responsive (batch 1/2) ---- */
@media (max-width: 900px) {
  .work__feature { grid-template-columns: 1fr; }
  .trust__proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__proofs li:nth-child(3) { border-left: 0; border-top: 1px solid rgba(236,233,227,0.13); }
  .trust__proofs li:nth-child(4) { border-top: 1px solid rgba(236,233,227,0.13); }
  .work__head,
  .ba__grid { grid-template-columns: 1fr; row-gap: clamp(1.6rem, 4vw, 2.4rem); }
  .ba__pairs { grid-template-columns: 1fr; gap: clamp(1rem, 4vw, 1.6rem); }
  .ba__head { font-size: var(--step-4); }
  /* Undo the desktop explicit grid placement (David 07.02) — single column
     now, so every child falls back into normal source-order stacking:
     copy → pairs → actions. */
  .ba__copy,
  .ba__pairs,
  .ba__actions {
    grid-column: 1;
    grid-row: auto;
  }
  /* Normal CTA scale below this width — the desktop min-height/min-width pair
     (4.6rem / 20rem) reads oversized once the button is full-width under the
     stacked grid (David 07.01/07.02: "huge on mobile"). Also undo the desktop
     copy-column placement so it falls back into normal source order — below
     both pairs — centered and full width (David 07.02). */
  .ba__actions {
    align-self: auto;
    width: 100%;
    justify-content: center;
    /* David 07.02 final: hint killed on mobile — pull the CTA up to the
       captions so the ba section reads self-contained, and the remaining
       air below becomes the section break before Real Transformations. */
    margin-top: 1.5rem;
  }
  .ba__actions .btn {
    min-width: 0;
    min-height: 0;
    width: auto;
  }
  /* David 07.02 final: "drag a handle" hint (and its rule line) dies on mobile */
  .ba__hint { display: none; }
  .ba { padding-block-end: calc(var(--section-pad) * 1.15); }
  .work__head > p { padding-left: 0; border-left: 0; }
  .work__mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, minmax(14rem, auto)); }
  .work-card--kitchen { grid-column: 1; grid-row: 1; }
  .work-card--penthouse { grid-column: 2; grid-row: 1; }
  .work-card--feature { grid-column: 1 / span 2; grid-row: 2 / span 2; }
  .work-card--green { grid-column: 1; grid-row: 4; }
  .work-card--modern { grid-column: 2; grid-row: 4; }
  .work-card--spa { grid-column: 1; grid-row: 5; }
  .work-card--detail { grid-column: 2; grid-row: 5; }
  .work-card--powder { grid-column: 1 / span 2; grid-row: 6; }
  .design-planning__inner,
  .statement__inner { grid-template-columns: 1fr; }
  .design-planning__copy { max-width: 44rem; padding-top: 0; }
  .design-planning__stage { min-height: clamp(28rem, 74vw, 40rem); }
  .exterior__media img { object-position: 42% 45%; }
  .exterior__inner { justify-content: flex-start; }
  .exterior__copy { text-align: left; }
  .exterior__copy p:not(.eyebrow) { margin-left: 0; }
  .exterior__eyebrow::after { margin-left: 0; }
  .exterior__media::after {
    background:
      linear-gradient(90deg, rgba(16,16,17,0.92) 0%, rgba(18,18,19,0.66) 28%, rgba(18,18,19,0.12) 60%, transparent 100%),
      linear-gradient(0deg, rgba(16,16,17,0.62) 0%, transparent 30%);
  }
  .exterior__scope {
    overflow-x: auto;
    justify-content: start;
    padding-bottom: 0.35rem;
  }
  .statement { min-height: 0; }
  .statement__inner {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(0.95rem, 3.2vw, 1.9rem);
    align-items: center;
  }
  .statement__portrait {
    width: 100%;
    min-height: clamp(18rem, 38vw, 30rem);
  }
  .statement blockquote > p {
    max-width: none;
    font-size: clamp(1.65rem, 5.7vw, 4rem);
    line-height: 1.08;
  }
  .process__head,
  .process__steps,
  .process__cta { grid-template-columns: 1fr; }
  .process__head { gap: var(--space-l); align-items: start; }
  .process__steps { gap: var(--space-l); }
  .process__step {
    min-height: auto;
    padding: 0 0 0 4.2rem;
    border-left: 1px solid rgba(236,233,227,0.15);
  }
  .process__step + .process__step { border-left: 1px solid rgba(236,233,227,0.15); }
  .process__num {
    position: absolute;
    left: 0;
    top: 0;
  }
  .process__rail { display: none; }
  .process__glyph { margin-top: 0.25rem; }
  .process__step p { max-width: 38rem; }
  .process__cta {
    gap: var(--space-m);
    padding: var(--space-l);
  }
  .process__cta-rule { display: none; }
  /* Mobile-only stack (David 07.02): the heading was sitting beside a strangled
     narrow support-text column (~5 words/line). Full-width heading, full-width
     support text below it, then the button — desktop side-by-side is untouched. */
  .process__cta-copy {
    grid-template-columns: 1fr;
    align-items: start;
    text-align: left;
    gap: 0.5rem;
  }
  .reviews__head,
  .team__head,
  .faq__inner { grid-template-columns: 1fr; }
  .reviews__title { max-width: none; }
  .team__intro {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .team__pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 3 short fact cards stay 3-up at this band so the 3rd never orphans on a second row */
  .team__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq__intro {
    position: relative;
    top: auto;
    padding-top: 0;
  }
  .contact {
    min-height: 0;
  }
  .contact__inner,
  .footer__inner {
    grid-template-columns: 1fr;
  }
  .contact__title {
    max-width: 9ch;
  }
  .contact__form {
    grid-template-columns: 1fr;
  }
  .contact__field--half {
    grid-column: 1 / -1;
  }
  .footer__statement p {
    font-size: clamp(2.5rem, 7.4vw, 4rem);
  }
  .footer__nav {
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-width: 600px) {
  /* --nav-h must track the same value as .nav's real height below, or the
     mobile panel (positioned via inset: var(--nav-h) ...) opens with a
     visible gap against the bar (owner review Jul 2). */
  :root { --nav-h: clamp(4.4rem, 17vw, 5.25rem); }
  .nav {
    height: var(--nav-h);
  }
  .nav__inner {
    gap: 0.65rem;
    padding-inline: 0.8rem;
  }
  .brandmark--nav img {
    width: clamp(4rem, 18vw, 5.15rem);
    max-height: 3.5rem;
  }
  .nav .btn--sm {
    padding: 0.72em 0.9em;
    font-size: clamp(0.67rem, 2.8vw, 0.78rem);
    white-space: nowrap;
  }
  .hero {
    --hero-seam-angle: clamp(1rem, 8vw, 2.6rem);
    min-height: 100svh;
    min-height: 100dvh;
  }
  .hero__scrim {
    background:
      linear-gradient(17deg, rgba(5,5,5,0.8) 0%, rgba(5,5,5,0.58) 29%, rgba(8,8,8,0.24) 48%, rgba(8,8,8,0.06) 62%, transparent 76%),
      linear-gradient(102deg, rgba(5,5,5,0.16) 0%, rgba(7,7,8,0.06) 46%, transparent 76%);
  }
  .hero__layer,
  .hero__sketch-lines { background-position: 50% center; }
  .hero__media::after { opacity: 0.5; }
  .hero__inner {
    display: flex;
    align-items: flex-end;
    /* Content column stays pinned to the SMALLEST viewport (100svh = chrome
       expanded / worst case) so the bottom-anchored CTA is never clipped when
       iOS Safari's chrome reappears mid-scroll inside the GSAP-pinned hero.
       .hero itself (the background/pin box) keeps filling 100dvh separately —
       only the content-bearing box below anchors to svh (owner review Jul 2:
       "first box and half of the second" getting eaten as chrome expands). */
    min-height: 100svh;
    padding-top: 2rem;
    padding-bottom: clamp(0.85rem, 2.4svh, 1.45rem);
  }
  .hero__content {
    width: calc(100vw - 2rem);
    max-width: 24rem;
    padding: 1rem 1rem 1.05rem;
    transform: none;
  }
  .hero__content::before {
    content: none;
  }
  .hero__title {
    max-width: 6.5ch;
    margin: 0 0 1rem;
    font-size: clamp(3.35rem, 15vw, 5.1rem);
    line-height: 0.88;
  }
  .hero__lede {
    max-width: 31ch;
    margin-bottom: 1.25rem;
    font-size: clamp(0.92rem, 4vw, 1.04rem);
    line-height: 1.55;
    opacity: 0.96;
  }
  .hero__cta {
    gap: 0.65rem;
  }
  .hero__cta .btn {
    width: fit-content;
    min-width: 0;
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0.9em 1.12em;
    font-size: clamp(0.69rem, 3vw, 0.78rem);
    gap: 0.9em;
  }
  .hero__scroll { display: none; }
  .trust__proofs { grid-template-columns: 1fr; }
  .trust__proofs li + li,
  .trust__proofs li:nth-child(3),
  .trust__proofs li:nth-child(4) {
    border-left: 0;
    border-top: 1px solid rgba(236,233,227,0.13);
  }
  .ba__grip { width: 1.5rem; height: 1.5rem; }
  .ba__handle { width: 4.5rem; }
  .work {
    padding-block: clamp(3.4rem, 13vw, 4.8rem);
  }
  .work__head {
    gap: 0.9rem;
    margin-bottom: clamp(1rem, 4vw, 1.35rem);
  }
  .work__head h2 {
    max-width: 9ch;
    font-size: clamp(2.65rem, 12.4vw, 3.9rem);
    line-height: 0.9;
  }
  .work__head > p {
    max-width: 28ch;
    font-size: clamp(0.84rem, 3.35vw, 0.96rem);
    line-height: 1.45;
  }
  .work__mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(16, clamp(3.05rem, 12.8vw, 3.8rem));
    gap: clamp(0.38rem, 1.55vw, 0.52rem);
  }
  .work-card,
  .work-card--kitchen,
  .work-card--feature,
  .work-card--penthouse,
  .work-card--green,
  .work-card--modern,
  .work-card--powder,
  .work-card--spa,
  .work-card--detail {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    border-radius: 6px;
  }
  .work-card--feature {
    grid-column: 1 / -1;
    grid-row: 3 / span 3;
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(8.65rem, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .work-card--feature img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-position: 47% 52%;
  }
  .work-card--feature .work-card__story {
    display: grid !important;
    align-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .work-card__story {
    min-width: 0;
    padding: clamp(0.66rem, 2.75vw, 0.86rem);
  }
  .work-card__story p:first-child {
    margin-bottom: 0.34rem;
    font-size: clamp(0.45rem, 1.85vw, 0.54rem);
    line-height: 1.08;
    letter-spacing: 0.14em;
  }
  .work-card__story h3 {
    font-size: clamp(1.05rem, 5.6vw, 1.48rem);
    line-height: 0.9;
    white-space: nowrap;
  }
  .work-card__story h3 br {
    display: block;
  }
  .work-card__story h3 .em {
    display: block;
    white-space: nowrap;
  }
  .work-card__story i {
    width: 1.65rem;
    margin: 0.42rem 0 0;
  }
  .work-card__story p:not(:first-child) {
    display: none;
  }
  .work-card--modern {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
  }
  .work-card--powder {
    grid-column: 1 / span 2;
    grid-row: 6 / span 3;
  }
  .work-card--kitchen { grid-column: 3 / span 2; grid-row: 6 / span 3; }
  .work-card--penthouse { grid-column: 1 / span 2; grid-row: 9 / span 2; }
  .work-card--green { grid-column: 3 / span 2; grid-row: 9 / span 2; }
  .work-card--spa { grid-column: 1 / -1; grid-row: 11 / span 2; }
  .work-card--detail { grid-column: 1 / -1; grid-row: 13 / span 3; }
  .work-card > span {
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0.12rem;
    padding: 0.58rem 0.58rem 0.5rem;
  }
  .work-card strong {
    font-size: clamp(0.56rem, 2.55vw, 0.72rem);
    line-height: 1.15;
    letter-spacing: 0.1em;
  }
  .work-card em {
    display: none;
  }
  .work-card--feature em,
  .work-card--powder em {
    display: block;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }
  .work-card--powder > span {
    left: 0;
    bottom: 0;
  }
  .work-card--modern > span {
    left: 0;
    bottom: 0;
  }
  .work-card--detail > span {
    left: 0;
    bottom: 0;
  }
  .work-card--powder strong {
    font-size: clamp(0.56rem, 2.55vw, 0.72rem);
  }
  .work-card--modern strong,
  .work-card--detail strong {
    font-size: clamp(0.68rem, 3vw, 0.82rem);
  }
  .work-card--kitchen img { object-position: 49% 52%; }
  .work-card--penthouse img { object-position: 54% 54%; }
  .work-card--modern img { object-position: 50% 50%; }
  .work-card--detail img { object-position: 50% 52%; }
  .work-card--green img { object-position: 50% 42%; }
  .work-card--spa img { object-position: 50% 56%; }
  .team-card__bio {
    padding: 0.92rem 1.05rem 1.05rem;
  }
  .team-card__bio-text {
    max-width: 30ch;
    font-size: clamp(1.04rem, 4.6vw, 1.36rem);
    line-height: 1.14;
  }
  .framefinish {
    padding-block: clamp(2.4rem, 9vw, 3.4rem);
  }
  .framefinish__head {
    margin-bottom: 0.85rem;
    text-align: center;
  }
  .framefinish__stage {
    width: 100%;
    max-width: 100%;
    border-radius: 6px;
    cursor: default;
  }
  .framefinish__handle {
    /* BOTTOM-RIM FIX (David's #1 flag, ~5x): the handle's TOP edge (not center)
       anchors to the circle's bottom rim (--my + --r) and the whole pill hangs
       BELOW it -- translate(-50%, 0), no upward straddle. The previous
       translate(-50%, -52%) put the handle's vertical center just above the rim,
       so the pill (and the thumb on it) overlapped INTO the circle and covered
       the revealed content. Now the circle always floats clear above the thumb.
       Tracks the circle every frame via the same --mx/--my/--r custom props the
       reveal itself is driven by, so it follows drag/roam 1:1. */
    position: absolute;
    left: var(--mx);
    top: calc(var(--my) + var(--r) + 0.4rem);
    z-index: 4;
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 1.1rem;
    border: 1px solid rgba(245, 242, 236, 0.72);
    border-radius: 999px;
    background: color-mix(in srgb, var(--terracotta) 84%, rgba(17,17,16,0.3));
    box-shadow: 0 0.35rem 1rem rgba(0,0,0,0.28);
    opacity: 0;
    pointer-events: auto;
    touch-action: none;
    transform: translate(-50%, 0);
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .framefinish__handle::before {
    /* Restored from the original (pre "finish polish r2") grabber: a single pale
       grip-line on a solid terracotta pill -- reads as a handle, not (per the
       owner) "a sideways pancake burger" (dark pill + two orange dash "buns"). */
    content: "";
    width: 1.1rem;
    height: 0.15rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0.26rem 0 rgba(255,255,255,0.45);
  }
  .framefinish__stage[data-framefinish-open="true"] .framefinish__handle,
  .framefinish__stage[data-framefinish-auto="true"] .framefinish__handle {
    opacity: 0.94;
  }
  .framefinish__stage[data-framefinish-dragging="handle"] .framefinish__handle {
    transform: translate(-50%, 0) scale(0.96);
  }
  .framefinish__hint {
    bottom: 0.72rem;
    width: max-content;
    max-width: calc(100% - 1.2rem);
    padding: 0.56rem 0.78rem;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }
  .framefinish__hint-desktop { display: none; }
  .framefinish__hint-mobile { display: inline; }
  .framefinish__dots {
    gap: 0.5rem;
    margin-top: 1rem;
    min-width: min(14rem, 72vw);
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .framefinish__dot {
    width: 0.62rem;
    height: 0.62rem;
    border-width: 2px;
    pointer-events: none;
  }
  .framefinish__dot.is-active {
    transform: scale(1.12);
  }
  .design-planning__stage {
    min-height: clamp(19rem, 62vw, 25rem);
    margin-inline: 0;
  }
  /* Shrunk to native-AR thumbnails (David Jun 21: "these images need to shrink").
     Sketch top-left, build bottom-right — an overlapping diagonal pair that sits
     INSIDE the column instead of bleeding off the right edge. Matches the desktop
     single-anchor + width + aspect-ratio approach (no inset/height% crop box). */
  .design-planning__sketch {
    top: 0; left: 0; right: auto; bottom: auto;
    width: 64%; height: auto;
    aspect-ratio: 1448 / 1086;
  }
  .design-planning__photo {
    top: auto; left: auto; right: 0; bottom: 0;
    width: 58%; height: auto;
    aspect-ratio: 1 / 1;
  }
  .exterior__scope {
    grid-template-columns: repeat(7, max-content);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    bottom: 3.5rem;
  }
  .exterior__copy p:not(.eyebrow),
  .design-planning__lede {
    font-size: 0.98rem;
  }
  .exterior {
    min-height: 48rem;
  }
  .exterior__inner {
    align-items: start;
    min-height: 42rem;
  }
  .exterior__media img {
    object-position: 62% 50%;
  }
  /* "Why we do this" — image LEFT, text RIGHT, both shrunk so they sit SIDE BY
     SIDE on phones (David Jun 21: "shrink the image and the text... put it side by
     side. Image on the left, the text... on the right"). Overrides the ≤900 stack. */
  .statement__inner {
    grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(0.85rem, 3vw, 1.25rem);
    align-items: center;
  }
  .statement__portrait {
    width: 100%;
    min-height: clamp(14rem, 46vw, 19rem);
  }
  .statement blockquote > p {
    max-width: none;
    font-size: clamp(1.12rem, 5vw, 1.55rem);
    line-height: 1.14;
  }
  .statement__eyebrow { margin-bottom: 0.65rem; }
  .statement__eyebrow::after { width: 2.2rem; margin-top: 0.6rem; }
  .statement__cite {
    width: 100%;
    margin-top: clamp(0.9rem, 3vw, 1.3rem);
    padding-top: clamp(0.7rem, 2vw, 1rem);
    letter-spacing: 0.13em;
  }
  .statement__cite span { font-size: 0.62rem; }
  .process__lede {
    font-size: 1rem;
  }
  .process__step {
    padding-left: 3.5rem;
  }
  .process__cta {
    padding: var(--space-m);
  }
  .process__cta-button {
    width: 100%;
    min-height: 4.5rem;
    letter-spacing: 0.13em;
  }
  /* Compact automatic review carousel on phones. Horizontal touch gestures are
     intentionally disabled; the JS marquee owns the movement. */
  .reviews__rail {
    --review-mobile-card-w: min(82vw, 20rem);
    margin-inline: calc(var(--gutter) * -1);
    padding-block: 0.5rem;
    overflow-x: hidden;
    overflow-y: hidden;
    touch-action: pan-y;
  }
  .reviews__rail::before,
  .reviews__rail::after {
    display: block;
    width: 2.25rem;
  }
  .reviews__track,
  .reviews__rail.is-js .reviews__track {
    flex-direction: row;
    align-items: stretch;
    width: max-content;
    gap: 0.8rem;
    padding-inline: var(--gutter);
  }
  /* Fixed-width column slides. The explicit width + min-width:0 stop a long review's
     text from ballooning the column to its single-line width — THAT was the "gray
     void": the rail crawling across one ultra-wide card. align-items:stretch makes
     every column the same height (the tallest pair sets it), and each card flexes to
     fill half its column — so all six cards are IDENTICAL size, a clean 3×2 grid with
     no empty black gaps (David Jun 21: "two-by-twos, equal sizing, no black spaces"). */
  .reviews__col {
    flex: 0 0 var(--review-mobile-card-w);
    width: var(--review-mobile-card-w);
    min-width: 0;
    gap: 0.8rem;
  }
  /* DETERMINISTIC card sizing (07.02 mobile-chaos fix): every card is EXACTLY
     16rem tall, flex pinned to 0 0 16rem (no grow/shrink races). The desktop
     size-band modifiers are re-listed here because the 2-class
     .review-card--feature.review-card--tall rule otherwise out-specifies the
     single-class rule and leaks its flex ratio into the phone carousel —
     measured live: Tammy's feature card collapsed to 170px while her column
     mate ballooned to 342px, misaligning the rows into an overlapping
     staircase. Size rhythm on phones comes from the running-bond offset, not
     card size (David Jun 21: "equal sizing"). */
  .review-card,
  .review-card--compact,
  .review-card--roomy,
  .review-card--tall,
  .review-card--feature,
  .review-card--feature.review-card--tall {
    min-width: 0;
    height: 16rem;
    flex: 0 0 16rem;
    overflow: hidden;
    padding: 1rem;
    pointer-events: none;
  }
  /* Running-bond (brick) offset — driven by `left`, NEVER `transform`:
     the GSAP card reveal owns the transform channel (gsap.set y:16 →
     animate → clearProps) and was wiping this offset at load, then snapping
     it back per-card mid-wave — the "bottom card shifted right on reload"
     nondeterminism David saw live. `left` on the already position:relative
     card is applied by CSS at t0 and can never race a script.
     Half-card offset = the approved round-1 item-20 bond; the resulting
     cut card at one viewport edge is the deliberate peek. */
  .reviews__col .review-card:nth-child(2) {
    left: calc(var(--review-mobile-card-w) / 2);
  }
  /* (07.02) watermark-quote ::before override removed — the quote mark was
     killed site-wide with the desktop rule (see the reviews block). */
  .review-card__stars {
    margin-bottom: 0.45rem;
    font-size: 0.94rem;
  }
  .review-card__quote,
  .review-card--tall .review-card__quote,
  .review-card--feature .review-card__quote {
    margin-top: 0.3rem;
    font-size: clamp(0.86rem, 3.75vw, 1rem);
    line-height: 1.42;
    display: -webkit-box;
    /* 7, not 8 (07.02): inside the fixed 16rem card the quote box only gets
       ~7.5 line-heights of room (stars + name eat the rest), so an 8-line
       clamp rendered the 8th line horizontally half-cut on every long card
       (measured live: Tammy/Adam/Brad/Joe all squeezed to 7.51 lines).
       7 full lines + a clean ellipsis always fit. */
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .review-card__name {
    align-self: flex-end;
    max-width: calc(100% - 3.5rem);
    padding-top: 0.5rem;
    font-size: 0.84rem;
    text-align: right;
  }
  .review-card__source {
    left: 0.95rem;
    bottom: 0.9rem;
    width: 2rem;
  }
  .review-card:hover {
    transform: none !important;
    box-shadow: 0 22px 46px -38px rgba(0,0,0,0.68) !important;
  }
  /* (07.02) the old :nth-child(2):hover transform re-instatement is gone —
     the bond offset now rides `left`, which no hover/GSAP transform can touch. */
  .team__cards,
  .team__facts {
    grid-template-columns: 1fr;
  }
  .team__pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 0.35rem;
  }
  .team__pillars article {
    min-height: 0;
    padding: 0.82rem 0.62rem 0.88rem;
  }
  .team__pillars span {
    font-size: clamp(0.98rem, 4.2vw, 1.22rem);
    line-height: 1.05;
  }
  .team__pillars p {
    max-width: 12ch;
    margin-top: 0.45rem;
    font-size: clamp(0.68rem, 2.95vw, 0.78rem);
    line-height: 1.28;
  }
  .team-card__bio-text {
    max-width: 30ch;
    font-size: clamp(1.04rem, 4.6vw, 1.36rem);
    line-height: 1.14;
  }
  .team__facts article + article,
  .team__facts article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(68,64,58,0.12);
  }
  .team__pillars article + article {
    border-left: 1px solid rgba(68,64,58,0.12);
    border-top: 0;
  }
  .team-card__body {
    gap: 0.7rem;
    padding: 0.9rem 1rem;
  }
  .team-card h3 {
    font-size: clamp(1.25rem, 6.9vw, 1.9rem);
  }
  .team-card__role {
    font-size: clamp(0.62rem, 3.15vw, 0.82rem);
    letter-spacing: clamp(0.1em, 1.8vw, 0.22em);
  }
  .team-card__cue {
    font-size: clamp(0.56rem, 2.8vw, 0.72rem);
    letter-spacing: clamp(0.08em, 1.4vw, 0.16em);
  }
  .faq-item summary span {
    font-size: clamp(1.3rem, 5.2vw, 1.7rem);
  }
  .faq-item p { margin-right: 0; }
  .contact::before {
    width: 35rem;
    max-width: 100vw;
    opacity: 0.06;
  }
  .contact__phone,
  .contact__service {
    grid-template-columns: 3.65rem minmax(0, 1fr);
    gap: 0.9rem;
  }
  .contact__phone span,
  .contact__service span {
    width: 3.35rem;
    height: 3.35rem;
  }
  .contact__phone svg { width: 1.45rem; height: 1.45rem; }
  .contact__phone strong,
  .contact__service { font-size: clamp(1rem, 4.6vw, 1.2rem); }
  .contact__title {
    font-size: clamp(3.55rem, 14vw, 4rem);
  }
  .contact__title em {
    font-size: 0.88em;
  }
  .contact__upload {
    grid-template-columns: 2.15rem minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon help";
    align-items: center;
    gap: 0.12rem 0.72rem;
    justify-self: start;
    width: min(15.25rem, 100%);
    min-height: 3.15rem;
    padding: 0.52rem 0.68rem;
  }
  .contact__upload > span {
    grid-area: icon;
    grid-row: auto;
    width: 2.05rem;
    height: 2.05rem;
  }
  .contact__upload > span::before {
    top: 0.18rem;
    width: 0.92rem;
    height: 0.92rem;
    border-width: 1.5px;
  }
  .contact__upload > span::after {
    bottom: 0.24rem;
    width: 1.42rem;
    height: 0.66rem;
    border-width: 2px;
    border-top: 0;
  }
  .contact__upload b {
    grid-area: title;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 650;
    letter-spacing: 0.02em;
  }
  .contact__upload small {
    grid-area: help;
    font-size: 0.62rem;
    line-height: 1.15;
  }
  .contact__submit {
    gap: 0.6em;
    letter-spacing: 0.04em;
    font-size: var(--step--1);
  }
  .footer__statement {
    min-height: 15rem;
    padding-block: clamp(2.6rem, 9vw, 3.6rem);
  }
  .footer__statement p {
    font-size: clamp(2.2rem, 9.5vw, 3.2rem);
  }
  .footer__bottom {
    flex-direction: column;
  }
}

/* ════════════════════════════════════════════════════════════
   05b · FLAGSHIP — compact whole-home proof grid
   One real home, fast impact. A premium bento wall instead of a long
   editorial walkthrough.
   ════════════════════════════════════════════════════════════ */
.flagship {
  overflow: hidden;
}
.flagship--in-design {
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 5vw, 5.25rem);
  padding-top: clamp(2.4rem, 4vw, 4rem);
}
.flagship__inner { position: relative; z-index: 1; }

.flagship__head {
  display: grid;
  grid-template-columns: auto minmax(24rem, 0.9fr);
  grid-template-areas: "proof title";
  align-items: end;
  gap: clamp(1.2rem, 3vw, 3rem);
  margin-bottom: clamp(1.15rem, 2.2vw, 2rem);
}
.flagship__head > div {
  grid-area: title;
  justify-self: end;
  text-align: right;
}
.flagship__eyebrow {
  display: block;
  margin-bottom: var(--space-xs);
  transform: translateX(-0.42em);
}
.flagship__title { font-size: clamp(3.15rem, 5.8vw, 5.55rem); line-height: 0.94; }
.flagship__proof {
  grid-area: proof;
  justify-self: start;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(192, 97, 61, 0.38);
  border-radius: var(--radius-card);
  color: var(--terracotta-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(14, 14, 14, 0.62);
}

.flagship__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, clamp(4.4rem, 5.8vw, 6.85rem));
  gap: clamp(0.56rem, 0.9vw, 0.95rem);
}

.fs-tile {
  position: relative;
  margin: 0;
  min-height: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ink-850);
  box-shadow: 0 1px 0 var(--hairline), 0 24px 60px -36px rgba(0, 0, 0, 0.86);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.fs-tile:focus-visible {
  outline: 2px solid var(--terracotta-soft);
  outline-offset: 3px;
}
.fs-tile__frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: transform var(--dur) var(--ease-out);
}
.fs-tile__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.fs-tile--great { grid-column: 1 / span 3; grid-row: 1 / span 5; }
.fs-tile--kitchen { grid-column: 4 / span 5; grid-row: 1 / span 3; }
.fs-tile--livingdining { grid-column: 9 / span 4; grid-row: 1 / span 3; }
.fs-tile--guest { grid-column: 1 / span 3; grid-row: 6 / span 3; }
.fs-tile--suite { grid-column: 4 / span 3; grid-row: 4 / span 2; }
.fs-tile--hall { grid-column: 4 / span 3; grid-row: 6 / span 3; }
.fs-tile--bath { grid-column: 7 / span 6; grid-row: 4 / span 5; }
.fs-tile--stair { display: none; }

.fs-tile--guest .fs-tile__img { object-position: 50% 35%; }
.fs-tile--suite .fs-tile__img { object-position: 50% 42%; }
.fs-tile--bath .fs-tile__img { object-position: 50% 54%; }

.fs-tile__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  padding: clamp(0.72rem, 1.35vw, 1.25rem);
  color: var(--text-on-dark);
  background: linear-gradient(to top, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.46) 44%, transparent 100%);
  opacity: 0.92;
  transform: translateY(0);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  pointer-events: none;
}
.fs-tile__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.1vw + 0.62rem, 2rem);
  line-height: 1;
  color: var(--terracotta-soft);
}
.fs-tile__room {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.98rem, 0.78vw + 0.72rem, 1.55rem);
  line-height: 1.04;
  color: var(--text-on-dark);
}

@media (hover: hover) and (pointer: fine) {
  .fs-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 0 var(--hairline-strong), 0 38px 76px -36px rgba(0, 0, 0, 0.92);
  }
  .fs-tile:hover .fs-tile__cap { opacity: 1; }
  .fs-tile:hover .fs-tile__img { filter: saturate(1.04) contrast(1.02); }
  .fs-tile:hover .fs-tile__frame { transform: scale(1.018); }
}

@keyframes flagshipKenBurns {
  0%   { transform: scale(1.0)  translate3d(0, 0, 0); }
  50%  { transform: scale(1.055) translate3d(-1.1%, -0.85%, 0); }
  100% { transform: scale(1.0)  translate3d(0, 0, 0); }
}
.fs-tile__img--kenburns {
  transform-origin: 58% 42%;
  animation: flagshipKenBurns 32s ease-in-out infinite;
}
.fs-tile--anchor { box-shadow: 0 0 0 1px rgba(192, 97, 61, 0.3), 0 30px 72px -38px rgba(0, 0, 0, 0.9); }

.motion-ready .flagship .fs-tile { opacity: 0.001; transform: translateY(16px); }
.motion-ready .flagship .fs-tile.is-in { opacity: 1; transform: translateY(0); }

@media (max-width: 1080px) {
  .flagship__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(10, clamp(4.4rem, 8vw, 6.8rem));
  }
  .fs-tile--great { grid-column: 1 / span 3; grid-row: 1 / span 5; }
  .fs-tile--kitchen { grid-column: 4 / span 5; grid-row: 1 / span 3; }
  .fs-tile--livingdining { grid-column: 6 / span 3; grid-row: 4 / span 3; }
  .fs-tile--guest { grid-column: 1 / span 3; grid-row: 6 / span 5; }
  .fs-tile--suite { grid-column: 4 / span 2; grid-row: 4 / span 3; }
  .fs-tile--hall { grid-column: 4 / span 2; grid-row: 7 / span 4; }
  .fs-tile--bath { grid-column: 6 / span 3; grid-row: 7 / span 4; }
}

@media (max-width: 760px) {
  .flagship--in-design {
    margin-top: clamp(2.15rem, 8vw, 3rem);
    padding-top: clamp(1.55rem, 6vw, 2.1rem);
  }
  .flagship__head {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "proof";
    gap: 0.72rem;
    margin-bottom: clamp(0.95rem, 4vw, 1.3rem);
  }
  .flagship__head > div {
    justify-self: start;
    text-align: left;
  }
  .flagship__eyebrow {
    margin-bottom: 0.48rem;
    transform: none;
  }
  .flagship__title {
    font-size: clamp(2.65rem, 12vw, 4.2rem);
    line-height: 0.9;
  }
  .flagship__proof {
    justify-self: start;
    padding: 0.58rem 0.68rem;
    font-size: 0.58rem;
    letter-spacing: 0.13em;
  }
  .flagship__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(8, clamp(3.45rem, 14.5vw, 4.35rem));
    grid-auto-rows: clamp(3.45rem, 14.5vw, 4.35rem);
    gap: clamp(0.38rem, 1.6vw, 0.52rem);
  }
  .fs-tile {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    border-radius: 6px;
  }
  .fs-tile--great { grid-column: 1 / span 2; grid-row: 1 / span 3; }
  .fs-tile--livingdining { grid-column: 3 / span 2; grid-row: 1 / span 2; }
  .fs-tile--guest { grid-column: 3 / span 2; grid-row: 3 / span 2; }
  .fs-tile--bath { grid-column: 1 / span 2; grid-row: 4 / span 3; }
  .fs-tile--suite { grid-column: 3 / span 1; grid-row: 5 / span 2; }
  .fs-tile--hall { grid-column: 4 / span 1; grid-row: 5 / span 2; }
  .fs-tile--kitchen { grid-column: 1 / span 4; grid-row: 7 / span 2; }
  .fs-tile--great .fs-tile__img { object-position: 52% 48%; }
  .fs-tile--kitchen .fs-tile__img { object-position: 46% 52%; }
  .fs-tile--livingdining .fs-tile__img { object-position: 47% 50%; }
  .fs-tile--bath .fs-tile__img { object-position: 55% 55%; }
  .fs-tile--guest .fs-tile__img { object-position: 52% 44%; }
  .fs-tile__cap {
    gap: 0.38em;
    padding: 0.46rem;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.5) 50%, transparent 100%);
  }
  .fs-tile__num {
    font-size: clamp(0.76rem, 3.6vw, 1.05rem);
  }
  .fs-tile__room {
    max-width: 100%;
    font-size: clamp(0.73rem, 3.15vw, 0.96rem);
    line-height: 1;
    white-space: normal;
  }
  .fs-tile--suite .fs-tile__cap,
  .fs-tile--hall .fs-tile__cap {
    align-items: flex-end;
    min-height: 44%;
    padding: 0.36rem;
  }
  .fs-tile--suite .fs-tile__num,
  .fs-tile--hall .fs-tile__num {
    display: none;
  }
  .fs-tile--suite .fs-tile__room,
  .fs-tile--hall .fs-tile__room {
    font-size: clamp(0.64rem, 2.65vw, 0.78rem);
  }
}

@media (max-width: 350px) {
  .flagship__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(8, clamp(3.1rem, 14vw, 3.55rem));
    grid-auto-rows: clamp(3.1rem, 14vw, 3.55rem);
  }
  .flagship__title {
    font-size: clamp(2.45rem, 12.6vw, 3.05rem);
  }
  .fs-tile__cap {
    padding: 0.34rem;
  }
  .fs-tile__num {
    font-size: 0.72rem;
  }
  .fs-tile__room {
    font-size: 0.66rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-tile__img--kenburns { animation: none; transform: none; }
  .fs-tile { transition: none; }
  .motion-ready .flagship .fs-tile { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════
   05b · OFFERS — "Upfront Pricing" productized flat-rate block (added 06.23)
   The accessible counterweight to the luxury work: Emanuel's flyer ("Transform your
   bathroom / Elevate your everyday") in this site's editorial voice. Ink section
   (background + on-dark text come from .section[data-bg="ink"] in base.css).
   STATIC by design — a clean side-by-side before/after (NOT the #before-after drag
   slider) + one bordered offer card (mirrors the trust/warranty panel finish) +
   a minimal 4-feature row (echoes .svc-tile simplicity). No JS, alive at t0.
   ════════════════════════════════════════════════════════════ */
.offers { overflow: hidden; }
.offers__inner { display: block; }
.offers__poster {
  --offer-accent: var(--terracotta);
  --offer-accent-soft: var(--terracotta);
  --offer-surface: color-mix(in srgb, var(--ink-850) 82%, var(--terracotta) 18%);
  display: grid;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.offers__mast {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(13rem, 0.72fr);
  align-items: center;
  gap: clamp(1.4rem, 3vw, 3.4rem);
  padding: 0 0 clamp(1.15rem, 2.3vw, 2rem);
}
.offers__headline { min-width: 0; }
.offers__eyebrow {
  margin-bottom: clamp(0.4rem, 0.8vw, 0.7rem);
  color: var(--offer-accent-soft);
}
.offers__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.45rem + 3vw, 4.25rem);
  font-weight: 420;
  line-height: 0.96;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.96);
  text-wrap: balance;
}
.offers__title span {
  color: var(--offer-accent-soft);
  font-style: italic;
}
.offers__promise {
  justify-self: end;
  margin: 0;
  max-width: 16rem;
  font-size: clamp(0.72rem, 0.62rem + 0.4vw, 0.98rem);
  font-weight: 560;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

.offers__ba {
  /* Borderless by default: the door-edge keyline made the pair read like an
     optical illusion. The gap carries the separation and gives the arrow room. */
  --offers-frame: clamp(0.14rem, 0.22vw, 0.22rem);
  --offers-feather: clamp(0.18rem, 0.28vw, 0.28rem);
  --offers-frame-rgb: 236, 230, 219;
  --offers-frame-color: rgb(236, 230, 219);
  --offers-pair-gap: clamp(4.25rem, 7.5vw, 6.75rem);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--offers-pair-gap);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 30px 76px -54px rgba(0, 0, 0, 0.82);
}
.offers__shot {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: #171717;
  overflow: hidden;
}
.offers__shot[data-work-card] {
  cursor: pointer;
}
.offers__shot:first-child {
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}
.offers__shot:last-child {
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.offers__shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  box-sizing: border-box;
  pointer-events: none;
  border: var(--offers-frame) solid var(--offers-frame-color);
  /* Keep this as an actual frame. The prior pass painted marble across the
     whole pseudo-element, which sat above the photos and turned the before/after
     imagery into full marble slabs. */
  background: none;
  display: none;
}
.offers__shot::after {
  content: "";
  position: absolute;
  inset: var(--offers-frame);
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(var(--offers-frame-rgb), 0.22), rgba(var(--offers-frame-rgb), 0)) top / 100% var(--offers-feather) no-repeat,
    linear-gradient(to top, rgba(var(--offers-frame-rgb), 0.22), rgba(var(--offers-frame-rgb), 0)) bottom / 100% var(--offers-feather) no-repeat,
    linear-gradient(to right, rgba(var(--offers-frame-rgb), 0.22), rgba(var(--offers-frame-rgb), 0)) left / var(--offers-feather) 100% no-repeat,
    linear-gradient(to left, rgba(var(--offers-frame-rgb), 0.22), rgba(var(--offers-frame-rgb), 0)) right / var(--offers-feather) 100% no-repeat;
  display: none;
}
.offers__shot:first-child::before {
  border-right-width: calc(var(--offers-frame) / 2);
}
.offers__shot:last-child::before {
  border-left-width: calc(var(--offers-frame) / 2);
}
.offers__shot:first-child::after {
  right: calc(var(--offers-frame) / 2);
}
.offers__shot:last-child::after {
  left: calc(var(--offers-frame) / 2);
}
.offers__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.framefinish__stage,
.offers__ba,
.offers__shot,
.offers__img,
[data-work-card],
[data-work-card] img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.offers__tag {
  position: absolute;
  top: auto;
  bottom: clamp(0.42rem, 0.9vw, 0.62rem);
  left: clamp(0.42rem, 0.9vw, 0.62rem);
  z-index: 4;
  padding: 0.3rem 0.51rem;
  background: rgba(25, 25, 24, 0.76);
  color: #fff;
  font-size: clamp(0.5rem, 0.39rem + 0.42vw, 0.79rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.offers__tag--after { background: color-mix(in srgb, var(--offer-accent) 76%, transparent); }
.offers__cap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  z-index: 4;
  padding: clamp(0.24rem, 0.58vw, 0.44rem) clamp(0.75rem, 1.8vw, 1.35rem);
  background: rgba(10, 10, 10, 0.82);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.58rem, 0.48rem + 0.42vw, 0.82rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  border-radius: 0;
}
.offers__shot:nth-of-type(2) .offers__cap {
  background: color-mix(in srgb, var(--offer-accent) 82%, transparent);
}
.offers__arrow-track {
  /* Spans EXACTLY the gap between BEFORE and AFTER. overflow:hidden is the
     whole trick: the arrow extrudes tip-first out of BEFORE's right edge and
     is progressively chopped into AFTER's left edge at the clip boundaries.
     motion.js (initOffersArrowRamp) drives translateX only — no CSS keyframes. */
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--offers-pair-gap) / 2);
  width: var(--offers-pair-gap);
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}
.offers__arrow {
  position: absolute;
  left: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(3.4rem, 5.4vw, 5rem);
  height: clamp(2.1rem, 3.25vw, 3.05rem);
  /* Parked + hidden until GSAP takes over (it owns x / yPercent / scaleX). */
  transform: translate(-110%, -50%) scaleX(1.25);
  background: transparent;
  color: var(--offer-accent);
  opacity: 0;
  font-size: 0;
  line-height: 1;
  box-shadow: none;
  will-change: transform;
}
.offers__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: color-mix(in srgb, var(--offer-accent) 56%, transparent);
  stroke: var(--offer-accent);
  stroke-width: 1.05;
  stroke-linejoin: miter;
  paint-order: fill stroke;
  filter:
    drop-shadow(0.14rem 0.18rem 0.19rem rgba(58, 24, 12, 0.29))
    drop-shadow(0 0.46rem 0.96rem rgba(0, 0, 0, 0.34));
  transform-origin: center;
}
/* Static contexts (reduced motion, ?solo captures, no GSAP): park it mid-gap,
   visible, motionless. motion.js adds .motion-static on those paths. */
.motion-static .offers__arrow {
  left: 50%;
  transform: translate(-50%, -50%) scaleX(1.25);
  opacity: 0.94;
}
@media (max-width: 640px) {
  /* Mobile RT is the stacked swap (its styles live in the mobile block below);
     this only removes the desktop-only arrow track. */
  .offers__arrow-track { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .work-card:hover img { transform: scale(1.04); }
}

.offers__deal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(0.9rem, 1.7vw, 1.5rem);
  align-items: stretch;
  padding: clamp(0.85rem, 1.55vw, 1.25rem) 0 0;
  border-top: 0;
  background: transparent;
}
.offers__feature-panel {
  display: grid;
  align-content: center;
  gap: clamp(0.7rem, 1.1vw, 1rem);
  min-width: 0;
  padding: clamp(0.85rem, 1.35vw, 1.15rem);
  border: 1px solid rgba(236, 233, 227, 0.11);
  border-radius: var(--radius-card);
  background: rgba(17, 17, 16, 0.42);
}
.offers__features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.2rem);
  align-items: stretch;
  min-width: 0;
}
.offers__feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.44rem, 0.78vw, 0.64rem);
  align-items: start;
  min-width: 0;
}
.offers__feature-icon {
  width: clamp(2rem, 2.85vw, 2.85rem);
  height: clamp(2rem, 2.85vw, 2.85rem);
  object-fit: contain;
  filter: none;
  opacity: 0.94;
}
.offers__feature strong {
  display: block;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.72rem, 0.6rem + 0.38vw, 0.94rem);
  font-weight: 820;
  line-height: 1.18;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.offers__feature em {
  display: block;
  margin-top: 0.34rem;
  color: rgba(236, 233, 227, 0.72);
  font-size: clamp(0.72rem, 0.62rem + 0.3vw, 0.9rem);
  font-style: normal;
  line-height: 1.35;
}
.offers__quote-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: 0.8rem;
  min-height: clamp(2.65rem, 3.4vw, 3.15rem);
  padding: 0.72rem clamp(1.15rem, 2vw, 1.7rem);
  border: 1px solid rgba(192, 97, 61, 0.46);
  border-radius: var(--radius-card);
  color: rgba(245, 242, 236, 0.92);
  background: rgba(192, 97, 61, 0.1);
  font-size: clamp(0.68rem, 0.78vw, 0.88rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.offers__quote-link:hover {
  border-color: rgba(192, 97, 61, 0.82);
  background: rgba(192, 97, 61, 0.22);
  transform: translateY(-1px);
}
.offers__card {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.42rem;
  width: clamp(18rem, 27vw, 25rem);
  min-width: 0;
  margin-left: 0;
  padding: clamp(0.95rem, 1.45vw, 1.22rem) clamp(1.2rem, 2vw, 1.65rem);
  border: 1px solid rgba(192, 97, 61, 0.22);
  border-radius: var(--radius-card);
  background: rgba(17, 17, 16, 0.52);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  text-align: center;
}
/* Quiet mobile-only support line — fills the space freed by the price card's
   equalized padding (fix #3). Hidden on desktop; the cta-strip carries it there. */
.offers__deal-note { display: none; margin: 0; }
.offers__price {
  color: var(--offer-accent-soft);
  font-family: var(--font-display);
  font-size: clamp(2.45rem, 1.8rem + 2.35vw, 4rem);
  font-style: normal;
  font-weight: 760;
  line-height: 0.85;
  letter-spacing: 0.01em;
}
.offers__kicker {
  margin: 0;
  padding-bottom: clamp(0.22rem, 0.44vw, 0.42rem);
  color: rgba(236, 233, 227, 0.62);
  font-family: var(--font-display);
  font-size: clamp(0.74rem, 0.64rem + 0.34vw, 0.96rem);
  font-style: italic;
  font-weight: 520;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.offers__cta-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: center;
  margin-top: clamp(0.75rem, 1.35vw, 1.05rem);
  padding: clamp(0.72rem, 1.1vw, 0.95rem) 0 0;
  border-top: 1px solid rgba(236, 233, 227, 0.12);
  border-radius: 0;
  background: transparent;
}
.offers__cta-copy {
  display: grid;
  grid-template-columns: minmax(12rem, max-content) minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.7rem, 1.3vw, 1.15rem);
  padding-left: clamp(0.85rem, 1.35vw, 1.15rem);
}
.offers__cta-copy strong {
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(1.38rem, 1.55vw, 1.9rem);
  font-weight: 400;
  line-height: 0.94;
}
.offers__cta-copy span {
  color: rgba(236, 233, 227, 0.8);
  font-size: clamp(0.88rem, 0.96vw, 1rem);
  line-height: 1.45;
}
.offers__cta-button {
  justify-self: end;
  white-space: nowrap;
}
.offers__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(0.8rem, 1.5vw, 1.2rem);
  min-height: clamp(2.25rem, 3.2vw, 3.1rem);
  padding: 0.55rem clamp(1rem, 3vw, 2.8rem);
  border: 1px solid rgba(236, 233, 227, 0.11);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--ink-800) 78%, var(--terracotta) 22%);
  color: var(--text-on-dark);
  text-decoration: none;
}
.offers__bar span,
.offers__bar strong {
  min-width: 0;
  font-size: clamp(0.62rem, 0.5rem + 0.55vw, 0.92rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.offers__bar span:last-child { justify-self: end; }
.offers__bar strong {
  justify-self: center;
  color: var(--offer-accent-soft);
  letter-spacing: 0.18em;
}

@media (max-width: 980px) {
  .offers__mast {
    grid-template-columns: 1fr;
  }
  .offers__promise {
    justify-self: stretch;
    max-width: none;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(236, 233, 227, 0.14);
    text-align: center;
  }
  .offers__deal { grid-template-columns: 1fr; }
  .offers__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offers__card {
    width: min(100%, 24rem);
    margin: 0;
    justify-self: center;
  }
  .offers__cta-strip {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .offers__cta-copy {
    padding-left: 0;
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .offers .wrap--wide { padding-inline: clamp(0.85rem, 4vw, 1.25rem); }
  .offers__poster { border-radius: 0; }
  .offers__mast {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.45rem;
    padding-bottom: 0.8rem;
  }
  .offers__headline {
    justify-self: center;
    text-align: center;
  }
  .offers__eyebrow {
    margin-bottom: 0.24rem;
    font-size: clamp(0.56rem, 2.35vw, 0.68rem);
    letter-spacing: 0.18em;
  }
  .offers__title {
    max-width: 15ch;
    margin-inline: auto;
    font-size: clamp(2rem, 9vw, 3.5rem);
    line-height: 0.96;
    text-wrap: pretty;
  }
  .offers__promise {
    justify-self: center;
    max-width: none;
    font-size: clamp(0.54rem, 2.2vw, 0.68rem);
    letter-spacing: 0.16em;
    line-height: 1.14;
    white-space: nowrap;
  }
  .offers__promise br { display: none; }
  .offers__ba {
    --offers-stagger: clamp(1rem, 4.5vw, 1.9rem);
    display: block;
    width: 100%;
    aspect-ratio: 9 / 5;
    margin-inline: 0;
    touch-action: manipulation;
    cursor: pointer;
    box-shadow: none;
  }
  .offers__shot {
    position: absolute;
    inset: auto;
    height: calc(100% - var(--offers-stagger));
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-card);
    box-shadow: 0 22px 54px -36px rgba(0, 0, 0, 0.86);
    transition:
      transform 820ms cubic-bezier(0.22, 1, 0.24, 1),
      opacity 680ms var(--ease-out),
      filter 680ms var(--ease-out);
  }
  .offers__shot:first-child {
    left: 0;
    top: 0;
    z-index: 2;
    transform-origin: left top;
    transform: scale(1);
    opacity: 1;
    filter: none;
  }
  .offers__shot:last-child {
    right: 0;
    bottom: 0;
    z-index: 1;
    transform-origin: right bottom;
    transform: scale(0.9);
    opacity: 0.85;
    filter: blur(2.5px) saturate(0.94) brightness(0.85);
  }
  .offers__ba.is-after-front .offers__shot:first-child {
    z-index: 1;
    transform: scale(0.9);
    opacity: 0.85;
    filter: blur(2.5px) saturate(0.94) brightness(0.85);
  }
  .offers__ba.is-after-front .offers__shot:last-child {
    z-index: 2;
    transform: scale(1);
    opacity: 1;
    filter: none;
  }
  .offers__shot:first-child::before,
  .offers__shot:last-child::before,
  .offers__shot:first-child::after,
  .offers__shot:last-child::after {
    border-width: var(--offers-frame);
    inset: 0;
  }
  .offers__shot:first-child::after,
  .offers__shot:last-child::after {
    inset: var(--offers-frame);
  }
  .offers__shot .offers__tag,
  .offers__shot .offers__cap {
    transition: opacity 280ms var(--ease-out), transform 420ms var(--ease-out);
  }
  .offers__cap,
  .offers__shot:nth-of-type(2) .offers__cap {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    border-radius: 0;
    padding: 0.28rem 0.56rem 0.32rem;
  }
  .offers__shot:last-child .offers__tag,
  .offers__shot:last-child .offers__cap,
  .offers__ba.is-after-front .offers__shot:first-child .offers__tag,
  .offers__ba.is-after-front .offers__shot:first-child .offers__cap {
    opacity: 0;
    transform: translateY(0.25rem);
  }
  .offers__ba.is-after-front .offers__shot:last-child .offers__tag,
  .offers__ba.is-after-front .offers__shot:last-child .offers__cap {
    opacity: 1;
    transform: translateY(0);
  }
  .offers__arrow {
    display: none;
  }
  .offers__deal {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    grid-template-rows: auto 1fr;
    gap: 0.72rem;
    padding: 0.9rem 0 0;
  }
  .offers__feature-panel {
    grid-row: 1 / 3;
    margin-left: -0.28rem;
    padding: 0.76rem 0.68rem 0.72rem 0.58rem;
  }
  .offers__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.56rem 0.7rem;
  }
  .offers__feature {
    grid-template-columns: 1fr;
    gap: 0.24rem;
    align-content: start;
    padding-block: 0.16rem;
  }
  .offers__feature-icon {
    width: 1.3rem;
    height: 1.3rem;
    margin-bottom: 0.04rem;
  }
  .offers__feature strong {
    font-size: clamp(0.54rem, 2.45vw, 0.66rem);
    line-height: 1.12;
  }
  .offers__feature em {
    margin-top: 0;
    font-size: clamp(0.5rem, 2.2vw, 0.6rem);
    line-height: 1.22;
  }
  .offers__card {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    width: 100%;
    min-width: 0;
    padding: 0.62rem;
    gap: 0.22rem;
  }
  .offers__deal-note {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    height: 100%;
    padding-inline: 0.2rem;
    padding-block: 0.15rem 0.05rem;
    color: rgba(236, 233, 227, 0.58);
    font-size: clamp(0.58rem, 2.6vw, 0.72rem);
    line-height: 1.5;
    text-align: center;
  }
  .offers__deal-note p {
    margin: 0;
  }
  .offers__kicker {
    padding-bottom: 0.06rem;
    font-size: clamp(0.52rem, 2.3vw, 0.66rem);
    line-height: 1.1;
    letter-spacing: 0.14em;
  }
  .offers__price {
    font-size: clamp(1.74rem, 8.2vw, 2.42rem);
    line-height: 0.82;
  }
  .offers__cta-button {
    width: 100%;
  }
  .offers__cta-copy {
    grid-template-columns: 1fr;
    align-items: center;
    gap: 0.65rem;
  }
  .offers__cta-copy strong {
    font-size: clamp(1.08rem, 5vw, 1.36rem);
  }
  /* The support line lives under the price card on mobile (.offers__deal-note);
     hide the duplicate here so it reads once. */
  .offers__cta-copy span {
    display: none;
  }
  .offers__bar {
    grid-template-columns: 1fr;
    gap: 0.36rem;
    padding-block: 0.8rem;
    text-align: center;
  }
  .offers__bar span:last-child,
  .offers__bar strong { justify-self: center; }
  .offers__bar strong { letter-spacing: 0.16em; }
}