/* Da Vinci Woodwork — The Object v2.1 (accepted by Marko 2026-11-03 16:28 CT, round 7; rounds 8–10 through
   2026-11-04 08:28 CT). Black, stone and blueprint blue; Archivo. Source of truth: the accepted Home and Kitchens
   mockups (v2.1 round 10). Blue is only for the action, the phone and links (60-30-10).
   The tokens below re-point the older token names to the v2.1 palette; the look of each component is set in
   "THE OBJECT v2.1 KIT" at the end of this file, which wins over the older layers above it.
   Staging: noindex site — not for production indexing */

:root {
  /* v2.1 tokens (from the accepted mockups) */
  --field: #0F0F0F;      /* near-black ground (60) */
  --deep: #0A0A0A;
  --step: #171717;       /* one tone step up from the ground: question rows, cards */
  --bone: #E8E9E6;       /* stone: text on black, and the light ground (30) */
  --soft: #A3A5A6;       /* secondary text on black, 7.6:1 */
  --ink: #1A1A1A;        /* body text on stone */
  --ink-soft: #53565A;   /* secondary text on stone, 6.1:1 */
  --accent: #2E5BD6;     /* blueprint blue: the one action fill, white text on it; as text on stone 5.1:1 (10) */
  --accent-press: #2550C4;
  --accent-t: #7EA0F5;   /* blue as text or icon on black, 7.4:1 */
  --font: "Archivo V", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pad: 16px;           /* the mockup's side gutter; stays 16px when the visitor sets larger browser text */
  --gap: clamp(5rem, 10vw, 10.5rem);
  /* Older token names, re-pointed to v2.1 (the older layers above the kit read these) */
  --near-black: #0F0F0F;
  --black: #0F0F0F;
  --black-soft: #171717;
  --charcoal: #171717;
  --graphite: #0F0F0F;
  --white: #ffffff;
  --parchment: #E8E9E6;
  --parchment-deep: #E8E9E6;
  --parchment-soft: #E8E9E6;
  --living-draft-cream: #E8E9E6;
  --ivory: #E8E9E6;
  --ivory-deep: #E8E9E6;
  --ivory-soft: #E8E9E6;
  --bronze: #7EA0F5;       /* was the bronze accent: now blue text on black (links, focus) */
  --bronze-deep: #2E5BD6;  /* blue on stone */
  --bronze-text: #2E5BD6;  /* blue as text on stone */
  --bronze-soft: rgba(46, 91, 214, 0.14);
  --text: #E8E9E6;          /* running text on the black ground; stone surfaces set it back to --ink (kit) */
  --text-muted: #A3A5A6;    /* secondary text on black; stone surfaces set it back to --ink-soft (kit) */
  --border: #CDCFCC;
  --border-strong: #9C9FA1;
  --danger: #8b2e2e;
  --ok: #2e5c3e;
  --font-display: var(--font);
  --font-body: var(--font);
  --max: 74rem;
  --measure: 62ch;
  --header-h: 4.25rem;     /* 68px at the default text size, as the mockups */
  --radius: 12px;          /* fields and small controls */
  --radius-card: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --space-section: clamp(2.75rem, 5vw, 5.25rem);
  --space-block: clamp(1.5rem, 3vw, 2.5rem);
}
/* Self-hosted font: Archivo, one variable WOFF2 (weight 100–900, width 62–125%: the full family, byte-identical to the
   accepted mockups' file; the home page's scroll story uses widths up to 125), licence in /assets/fonts/OFL.txt. One family for headings and text; the width axis does the work a second family did.
   The older Outfit and Cormorant Garamond files stay in /assets/fonts/ but no rule here asks for them, so no page
   downloads them. */
@font-face {
  font-family: "Archivo V";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
}
/* Metric fallback while Archivo loads (font-display: swap): Arial scaled to Archivo's width at the text setting
   (wdth 92: 0.917 of Arial's advance) and to its ascent and descent (0.878 / 0.21 em), measured in Chromium, so the
   swap moves almost nothing. The bold face covers headings and buttons (Archivo 850 at wdth 84: 0.91 of Arial Bold).
   The 600 face covers the narrow labels (eyebrows, the FAQ jump pills: Archivo 600 at wdth 86 is 0.84 of Arial Bold;
   at 0.91 the six pills wrapped onto a fourth row until Archivo arrived, and the FAQ page jumped 52 px). */
@font-face {
  font-family: "Archivo Fallback";
  font-weight: 600 649;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica Bold"), local("Liberation Sans Bold");
  size-adjust: 84%;
  ascent-override: 104.5%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  font-weight: 100 599;
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 91.5%;
  ascent-override: 96%;
  descent-override: 23%;
  line-gap-override: 0%;
}
/* The breadcrumbs are set narrower than running text (Archivo 400 at wdth 86: about 0.875 of Arial), so they get their
   own stand-in: at 0.915 three project pages' breadcrumbs wrapped onto a second line until Archivo arrived (a 19 px
   jump). 0.875 was chosen on all 45 breadcrumbs at 360–430 px: each one wraps the same way in both fonts. */
@font-face {
  font-family: "Archivo Narrow Fallback";
  font-weight: 100 599;
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 87.5%;
  ascent-override: 100.3%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  font-weight: 650 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica Bold"), local("Liberation Sans Bold");
  size-adjust: 91%;
  ascent-override: 96.5%;
  descent-override: 23%;
  line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  background: var(--parchment-deep); /* parchment page ground */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a {
  color: var(--bronze-text);
  text-underline-offset: 0.2em;
  transition: color 0.2s var(--ease);
}
@media (hover: hover) { a:hover { color: var(--black); } }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--black);
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); font-weight: 500; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); }
p { margin: 0 0 1.05em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
.muted { color: var(--text-muted); }
.small { font-size: 0.9rem; line-height: 1.55; }
.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 38rem;
}
.open-placeholder {
  color: var(--bronze-deep);
  font-style: italic;
  font-weight: 500;
  border-bottom: 1px dashed rgba(163, 165, 166, 0.5);
}

/* Layout */
.container {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2.5rem, 44rem); }
.section { padding: var(--space-section) 0; }
.section--ivory { background: var(--parchment-deep); }
.section--soft { background: var(--parchment); position: relative; }
.section--stone { background: var(--parchment-deep); }
.section--dark {
  background: var(--black);
  color: rgba(232, 233, 230, 0.88);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--white); }
.section--dark .muted { color: rgba(232, 233, 230, 0.62); }
.section--dark a { color: var(--bronze); }
@media (hover: hover) { .section--dark a:hover { color: var(--white); } }
.section--dark .eyebrow { color: var(--bronze); }
.grid-2 {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.grid-3 {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-text);
  margin: 0 0 1rem;
}
.section-intro {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  max-width: 40rem;
}
.section-intro h2 { margin-bottom: 0.65em; }
.bronze-rule {
  width: 2.75rem;
  height: 1px;
  background: var(--bronze);
  border: 0;
  margin: 0 0 1.5rem;
}

/* Staging banner — staging builds only: apply-production-transforms.py strips the element from every
   production page, so production never renders it. The fixed header (.site-header--fixed-luxe on
   .page-home / .page-inner) is pushed down by --staging-banner-h, which is 0 unless a banner element is
   actually rendered directly above the header (the header is the banner's next sibling on every page).
   Before the 2026-09-20 SEO audit fix the 2.15rem offset was unconditional and production showed a
   34px band (body background) above the header. */
.page-home,
.page-inner {
  --staging-banner-h: 0px;
}
.staging-banner {
  --staging-banner-h: 2.15rem;
  min-height: var(--staging-banner-h, 0px);
  background: var(--black);
  color: rgba(232, 233, 230, 0.85);
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5rem 1rem;
  letter-spacing: 0.06em;
  font-weight: 400;
}
.staging-banner strong { color: var(--bronze); font-weight: 500; }
.staging-banner + .site-header--fixed-luxe {
  --staging-banner-h: 2.15rem;
}

/* Header — dark glass chrome (sitewide; reverse logo, no CSS invert) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 15, 15, 0.72);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid rgba(232, 233, 230, 0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 1rem;
}
.logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.logo-link img {
  height: 40px;
  width: auto;
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(232, 233, 230, 0.28);
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius);
}
.nav-toggle span {
  display: block;
  width: 1.1rem;
  height: 1.5px;
  background: var(--ivory);
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ivory);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.site-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: rgba(15, 15, 15, 0.96);
  border-bottom: 1px solid rgba(232, 233, 230, 0.1);
  padding: 0.75rem 1.25rem 1.25rem;
}
.site-nav.is-open { display: block; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.site-nav a {
  display: block;
  padding: 0.7rem 0.65rem;
  color: rgba(232, 233, 230, 0.88);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.site-nav a[aria-current="page"] {
  color: var(--white);
  background: rgba(232, 233, 230, 0.06);
}
@media (hover: hover) { .site-nav a:hover {
  color: var(--white);
  background: rgba(232, 233, 230, 0.06);
} }
.nav-phone {
  display: none;
  color: var(--ivory) !important;
  font-weight: 500;
  text-decoration: underline !important; /* phone numbers read as an action: same underline as the in-text links (auto thickness, 0.2em offset) */
  text-underline-offset: 0.2em;
  white-space: nowrap;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
@media (hover: hover) { .nav-phone:hover { color: var(--bronze) !important; } }

@media (min-width: 1040px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: block;
    position: static;
    border: 0;
    padding: 0;
    background: transparent;
  }
  .site-nav ul {
    flex-direction: row;
    align-items: center;
    gap: 0.05rem;
  }
  .site-nav a {
    padding: 0.4rem 0.55rem;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
  }
  .nav-phone { display: inline-block; margin-left: 0.75rem; padding-block: 0.65rem; } /* 44px+ hit area; sits inside the 72px header, so the header does not grow */
}
/* Header phone label: measured on the live site — "Office (847) 461-3444" wraps the primary nav onto a second
   row at 1040–1099px; the bare number fits. Show the label from 1100px up. */
@media (max-width: 1099px) {
  .nav-phone__label { display: none; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.55rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none; /* locked CTA sentence case */
  text-decoration: none !important;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  line-height: 1.2;
}
.btn--primary {
  background: var(--black);
  color: var(--ivory) !important;
  border-color: var(--black);
}
@media (hover: hover) { .btn--primary:hover {
  background: var(--charcoal);
  color: var(--white) !important;
} }
.btn--secondary {
  background: transparent;
  color: var(--black) !important;
  border-color: var(--black);
}
@media (hover: hover) { .btn--secondary:hover {
  background: var(--black);
  color: var(--ivory) !important;
} }
.btn--ghost {
  background: transparent;
  color: var(--ivory) !important;
  border-color: rgba(232, 233, 230, 0.72);
  color: #E8E9E6 !important;
}
@media (hover: hover) { .btn--ghost:hover {
  background: rgba(232, 233, 230, 0.14);
  color: var(--white) !important;
  border-color: rgba(232, 233, 230, 0.92);
} }
.btn--ghost-dark {
  background: transparent;
  color: var(--ivory) !important;
  border-color: rgba(232, 233, 230, 0.4);
}
.btn--on-dark {
  background: var(--ivory);
  color: var(--black) !important;
  border-color: var(--ivory);
}
@media (hover: hover) { .btn--on-dark:hover {
  background: var(--white);
  color: var(--black) !important;
} }
.btn--bronze {
  background: var(--bronze);
  color: var(--black) !important;
  border-color: var(--bronze);
}
@media (hover: hover) { .btn--bronze:hover {
  background: var(--bronze-deep);
  color: var(--white) !important;
  border-color: var(--bronze-deep);
} }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.75rem;
}
.btn-row--tight { margin-top: 1.25rem; }

/* ========== CINEMATIC HERO ========== */
.hero-cinematic {
  position: relative;
  min-height: min(92vh, 52rem);
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  overflow: hidden;
  background: var(--black);
}
.hero-cinematic__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-cinematic__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transform: scale(1.02);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-cinematic__media img {
    animation: hero-pan 28s var(--ease) alternate infinite;
  }
}
@keyframes hero-pan {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(-1.2%, -0.6%, 0); }
}
.hero-cinematic__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(18,18,18,0.35) 0%, rgba(18,18,18,0.15) 28%, rgba(18,18,18,0.55) 62%, rgba(18,18,18,0.88) 100%),
    linear-gradient(90deg, rgba(18,18,18,0.55) 0%, rgba(18,18,18,0.2) 55%, rgba(18,18,18,0.35) 100%);
  pointer-events: none;
}
.hero-cinematic__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.hero-cinematic .eyebrow { color: var(--bronze); }
.hero-cinematic h1 {
  color: var(--white);
  max-width: 16ch;
  margin-bottom: 0.75em;
}
.hero-cinematic .who {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  max-width: 36rem;
  color: rgba(232, 233, 230, 0.9);
  margin-bottom: 0.85em;
}
.hero-cinematic .nap-line {
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  color: rgba(232, 233, 230, 0.62);
  margin-bottom: 2rem;
}
.hero-paths {
  display: grid;
  gap: 0;
  max-width: 42rem;
  border: 1px solid rgba(232, 233, 230, 0.22);
}
@media (min-width: 640px) {
  .hero-paths { grid-template-columns: 1.15fr 0.85fr; }
}
.hero-path {
  padding: 1.35rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-decoration: none !important;
  transition: background 0.25s var(--ease);
}
.hero-path--primary {
  background: rgba(232, 233, 230, 0.97);
  color: var(--black);
}
@media (hover: hover) { .hero-path--primary:hover { background: var(--white); color: var(--black); } }
.hero-path--secondary {
  background: transparent;
  color: var(--ivory);
  border-top: 1px solid rgba(232, 233, 230, 0.22);
}
@media (min-width: 640px) {
  .hero-path--secondary {
    border-top: 0;
    border-left: 1px solid rgba(232, 233, 230, 0.22);
  }
}
@media (hover: hover) { .hero-path--secondary:hover { background: rgba(232, 233, 230, 0.06); color: var(--white); } }
.hero-path__label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.hero-path__title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  color: inherit;
}
.hero-path__text {
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
  opacity: 0.78;
  max-width: none;
}
.hero-path__cta {
  margin-top: auto;
  padding-top: 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-path--primary .hero-path__cta { color: var(--bronze-deep); }
.hero-path--secondary .hero-path__cta { color: var(--bronze); }

/* Legacy dual-card (contact/etc) — differentiated */
.dual-path {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .dual-path { grid-template-columns: 1.1fr 0.9fr; }
}
.dual-card {
  padding: 1.6rem 1.5rem;
  border-radius: var(--radius);
}
.dual-card--solid {
  background: var(--black);
  color: var(--ivory);
  border: 1px solid var(--black);
}
.dual-card--solid h3 { color: var(--white); }
.dual-card--solid p { color: rgba(232, 233, 230, 0.72); }
.dual-card--outline {
  background: transparent;
  border: 1px solid var(--border-strong);
}
.dual-card h3 { margin-bottom: 0.35em; }
.dual-card p {
  margin-bottom: 1.15rem;
  font-size: 0.95rem;
  max-width: none;
}

/* ========== PROOF STRIP ========== */
.proof-strip {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 860px) {
  .proof-strip {
    grid-template-columns: 1.35fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
  }
}
.proof-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ivory-deep);
  color: inherit;
  text-decoration: none !important;
  min-height: 22rem;
}
.proof-tile--tall { min-height: 28rem; }
@media (min-width: 860px) {
  .proof-tile--tall { min-height: 100%; }
}
.proof-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 0.8s var(--ease);
}
@media (hover: hover) { .proof-tile:hover img { transform: scale(1.04); } }
.proof-tile__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.5rem 1.4rem;
  background: linear-gradient(transparent, rgba(18,18,18,0.78));
  color: var(--white);
  z-index: 1;
}
.proof-tile__eyebrow {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.4rem;
}
.proof-tile__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 500;
  margin: 0 0 0.35rem;
  color: var(--white);
  line-height: 1.15;
}
.proof-tile__text {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(232, 233, 230, 0.78);
  max-width: 28rem;
}

/* ========== EDITORIAL OFFER ROWS ========== */
.offer-row {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--border);
}
.offer-row:first-of-type { padding-top: 0; }
.offer-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.offer-row__media {
  overflow: hidden;
  background: var(--ivory-deep);
  aspect-ratio: 5 / 4;
}
.offer-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.offer-row--portrait .offer-row__media { aspect-ratio: 4 / 5; }
@media (min-width: 860px) {
  .offer-row.offer-row--portrait { grid-template-columns: 0.8fr 1.2fr; }
  .offer-row.offer-row--portrait.offer-row--reverse { grid-template-columns: 1.2fr 0.8fr; }
}
.offer-row__body h3 {
  margin-bottom: 0.5em;
}
.offer-row__body p {
  color: var(--text-muted);
}
.offer-row__link {
  display: inline-flex;
  margin-top: 1.15rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--black);
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 0.15rem;
}
@media (hover: hover) { .offer-row__link:hover { color: var(--bronze-deep); } }
@media (min-width: 860px) {
  .offer-row {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .offer-row--reverse {
    grid-template-columns: 0.95fr 1.05fr;
  }
  .offer-row--reverse .offer-row__media { order: 2; }
  .offer-row--reverse .offer-row__body { order: 1; }
  .offer-row--asym {
    grid-template-columns: 1.25fr 0.75fr;
  }
}

/* ========== TRADE TEASER ========== */
.trade-teaser {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 800px) {
  .trade-teaser {
    grid-template-columns: 1fr 1.1fr;
    gap: 3.5rem;
  }
}
.trade-teaser__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--charcoal);
}
.trade-teaser__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}

/* ========== CLOSING BAND ========== */
.closing-band {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto;
}
.closing-band .phone-xl {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 5vw, 3.5rem);
  font-weight: 500;
  color: var(--black);
  text-decoration: none !important;
  margin: 0.75rem 0 1.5rem;
  letter-spacing: 0.02em;
}
@media (hover: hover) { .closing-band .phone-xl:hover { color: var(--bronze-deep); } }
.section--dark .closing-band .phone-xl { color: var(--white); }
@media (hover: hover) { .section--dark .closing-band .phone-xl:hover { color: var(--bronze); } }
.closing-paths {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.75rem;
}

/* Media frame (inner pages) */
.media-frame {
  overflow: hidden;
  background: var(--ivory-deep);
  aspect-ratio: 4 / 3;
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-frame--tall { aspect-ratio: 3 / 4; }
.media-frame--wide { aspect-ratio: 16 / 10; }

/* Cards — restrained, for contact/GC only */
.card {
  background: var(--parchment-soft); /* Phase1 NICE: drop stale white */
  border: 1px solid var(--border);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card__media {
  aspect-ratio: 4/3;
  background: var(--ivory-deep);
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__body { padding: 1.35rem 1.4rem 1.55rem; flex: 1; }
.card__body h3 { margin-bottom: 0.35em; }
.card a.stretched {
  color: inherit;
  text-decoration: none;
}

/* Work — editorial masonry */
.work-masonry {
  columns: 1;
  column-gap: 1.25rem;
}
@media (min-width: 640px) {
  .work-masonry { columns: 2; }
}
@media (min-width: 980px) {
  .work-masonry { columns: 3; }
}
.work-masonry .work-item {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  aspect-ratio: auto;
}
.work-masonry .work-item img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.work-masonry .work-item--feature img { aspect-ratio: 4/5; object-fit: cover; height: auto; }
.work-masonry .work-item--wide img { aspect-ratio: 16/10; object-fit: cover; }

.work-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .work-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); }
}
.work-item {
  position: relative;
  overflow: hidden;
  background: var(--ivory-deep);
  aspect-ratio: 4/3;
  margin: 0;
}
.work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
@media (hover: hover) { .work-item:hover img { transform: scale(1.03); } }
.work-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.75rem 1.1rem 1rem;
  background: linear-gradient(transparent, rgba(18,18,18,0.72));
  color: var(--white);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}

/* Page hero (inner) */
.page-hero {
  padding: clamp(3.25rem, 7vw, 5rem) 0 clamp(2.5rem, 4vw, 3.25rem);
  background: var(--near-black);
  color: var(--ivory);
  border-bottom: 0;
  position: relative;
}
.page-hero h1 { color: var(--white); }
.page-hero .lede { color: rgba(232, 233, 230, 0.78); }
.page-hero .eyebrow { color: rgba(232, 233, 230, 0.82); }
.page-hero .bronze-rule { background: var(--bronze); }
.page-hero a { color: var(--bronze); }
.page-hero--media {
  min-height: 22rem;
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  background: var(--black);
  border-bottom: 0;
  overflow: hidden;
}
.page-hero--media .page-hero__bg {
  position: absolute;
  inset: 0;
}
.page-hero--media .page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.page-hero--media .page-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,18,18,0.25), rgba(18,18,18,0.82));
}
.page-hero--media .container { position: relative; z-index: 1; padding-bottom: 0.5rem; }
.page-hero--media h1 { color: var(--white); }
.page-hero--media .lede { color: rgba(232, 233, 230, 0.78); }
.page-hero--media .eyebrow { color: var(--bronze); }
.page-hero--media .bronze-rule { background: var(--bronze); }

/* Pros list */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.checklist li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.7rem;
  max-width: var(--measure);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.45rem;
  height: 1px;
  background: var(--bronze);
}

/* Panel / aside */
.panel {
  background: #E8E9E6;
  border: 1px solid var(--border);
  padding: 1.6rem 1.5rem;
}
.panel h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Footer */
.site-footer {
  background: #0F0F0F;
  color: rgba(232, 233, 230, 0.78);
  padding: 3.75rem 0 2rem;
  margin-top: 0;
}
.site-footer--quiet {
  border-top: 1px solid rgba(232, 233, 230, 0.06);
}
.site-footer a {
  color: rgba(232, 233, 230, 0.88);
  text-decoration: none;
}
@media (hover: hover) { .site-footer a:hover { color: var(--bronze); } }
.footer-grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 1.45fr 1fr 1fr; }
}
.footer-logo { height: 34px; width: 87px; aspect-ratio: 200 / 78; margin-bottom: 1.15rem; opacity: 0.95; }

.footer-social {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}
.footer-social a {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.footer-nav ul { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: 0.45rem; }
.footer-nav h3,
.footer-nap h3 {
  color: var(--white);
  font-size: 0.7rem;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-bottom {
  margin-top: 2.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(232, 233, 230, 0.1);
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  color: rgba(232, 233, 230, 0.62); /* was 0.45 (4.1:1) */
}

/* Forms / Intake */
.intake-shell { max-width: 40rem; margin: 0 auto; }
.path-picker {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
@media (min-width: 560px) {
  .path-picker { grid-template-columns: 1.1fr 0.9fr; }
}
.path-btn {
  text-align: left;
  background: var(--ivory);
  border: 1px solid var(--border-strong);
  padding: 1.35rem 1.25rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s, background 0.2s;
}
@media (hover: hover) { .path-btn:hover { border-color: var(--bronze); background: var(--ivory-deep); } }
.path-btn.is-active {
  border-color: var(--black);
  background: var(--ivory-deep);
}
.path-btn#path-trade.is-active {
  background: var(--black);
  color: var(--ivory);
  border-color: var(--black);
}
@media (hover: hover) { .path-btn#path-trade:hover {
  background: var(--black);
  color: var(--ivory);
  border-color: var(--black);
} }
.path-btn#path-trade.is-active span { color: rgba(232, 233, 230, 0.65); }
@media (hover: hover) { .path-btn#path-trade:hover span { color: rgba(232, 233, 230, 0.65); } }
.path-btn strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}
.path-btn span { color: var(--text-muted); font-size: 0.9rem; }

.wizard-progress {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.wizard-progress .step {
  flex: 1;
  min-width: 5rem;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}
.wizard-progress .step.is-active {
  color: var(--black);
  border-bottom-color: var(--bronze);
}
.wizard-progress .step.is-done {
  color: var(--bronze-deep);
  border-bottom-color: var(--bronze);
}
/* Reels desk #9 (2026-10-19): "Step N of M" line on each wizard step (contact.js stepCountHtml, ad pages' step 1) */
.wizard-step-count {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bronze-text);
}
.wizard-panel { display: none; }
.wizard-panel.is-active { display: block; }
.form-card {
  background: var(--ivory);
  border: 1px solid var(--border-strong);
  padding: 1.6rem 1.5rem;
}
.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-weight: 500;
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}
.label-like {
  display: block;
  font-weight: 500;
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}
.field .hint {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 0.25rem;
}
/* Inline required/optional markers inside labels */
.field label .hint {
  display: inline;
  margin-top: 0;
  margin-left: 0.25em;
  font-size: 0.8rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  background: var(--ivory-soft);
  color: var(--text);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 1px solid var(--bronze);
  border-color: var(--bronze);
  background: var(--ivory);
}
.field-row { display: grid; gap: 1rem; }
@media (min-width: 560px) {
  .field-row--2 { grid-template-columns: 1fr 1fr; }
}
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.choice-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--ivory);
  font-size: 0.9rem;
}
.choice-group input { accent-color: var(--bronze-deep); }
.upload-zone {
  border: 1px dashed var(--bronze);
  background: var(--bronze-soft);
  padding: 1.35rem;
  text-align: center;
}
.upload-zone p { margin: 0.35rem 0; max-width: none; }
.upload-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  text-align: left;
  font-size: 0.9rem;
}
.wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.intake-consent { margin: 0.85rem 0 0; }
.intake-consent a { color: inherit; text-decoration: underline; }

/* PR #9: privacy policy page — long-form text in the narrow container */
.privacy-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-top: 2.25rem;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.privacy-body ul { max-width: var(--measure); }
.privacy-body li { margin-bottom: 0.35em; }
.privacy-body address { font-style: normal; line-height: 1.65; }
.prefer-call {
  background: var(--ivory);
  border: 1px solid var(--border);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.25rem;
}
.prefer-call a {
  display: inline-block;
  padding-block: 0.5rem; /* 44px+ hit area */
  font-weight: 500;
  color: var(--black);
  text-decoration: underline; /* phone numbers read as an action: same underline as the in-text links */
  text-underline-offset: 0.2em;
  font-size: 1.0625rem;
  font-family: var(--font-body);
}
@media (hover: hover) { .prefer-call a:hover { color: var(--bronze-deep); } }
.form-status {
  display: none;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
}
.form-status.is-error {
  display: block;
  background: #f8ecec;
  color: var(--danger);
  border: 1px solid #e4c4c4;
}
.form-status.is-ok {
  display: block;
  background: #eaf3ee;
  color: var(--ok);
  border: 1px solid #c5dbc9;
}
.form-status.is-info {
  display: block;
  background: var(--ivory);
  color: var(--text);
  border: 1px solid var(--border);
}
.turnstile-slot {
  min-height: 65px;
  margin: 1rem 0;
  border: 1px dashed var(--border);
  background: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 2rem 0;
}
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}
.btn:focus-visible,
.path-btn:focus-visible,
.site-nav a:focus-visible,
.hero-path:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}
.nap address { font-style: normal; }
.nap .phone { font-weight: 500; font-size: 1.15rem; font-family: var(--font-display); }
/* Header phone under 1040px, where the desktop .nav-phone is hidden. The link itself is .nav-phone-mobile (the old rule
   here styled an <a> inside a wrapper no page ever had). Same ivory, weight and underline as .nav-phone; at least 44px
   tall to tap; sits between the logo and the menu button, which keep their size and never wrap or overlap. */
.nav-phone-mobile {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 2.75rem;
  margin-left: auto;
  color: var(--ivory) !important;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
@media (hover: hover) { .nav-phone-mobile:hover { color: var(--bronze) !important; } } /* mouse only: on a phone a tap must not leave the number stuck in bronze, nearly invisible on the tan header */
.nav-phone-mobile + .nav-toggle { flex-shrink: 0; } /* the menu button keeps its 44px even if the number is ever squeezed */
@media (max-width: 339px) {
  /* 320px phones: logo + number + menu button leave about 101px; the smaller size and tighter gaps keep a safety margin. */
  .nav-phone-mobile { font-size: 0.8125rem; letter-spacing: 0.01em; margin-right: -0.25rem; }
}
/* Enlarged browser text: a rem media query follows the visitor's default text size, so this never fires at normal size
   (17.9rem = 286px, below the smallest 320px phone) and hides the number only when bigger text would push the menu button off screen.
   v2.1: the same query as the kit's header guard (measured there). */
@media (max-width: 14.95rem) and (max-width: 389px), (max-width: 12.1rem) { .nav-phone-mobile { display: none !important; } }
@media (min-width: 1040px) {
  .nav-phone-mobile { display: none !important; }
}

/* Soft fade-in for content below fold */
@media (prefers-reduced-motion: no-preference) {
  .fade-rise {
    animation: fade-rise 0.9s var(--ease) both;
  }
}
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Skip to content */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 10000;
  background: var(--black);
  color: var(--ivory);
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0.75rem;
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
  color: var(--ivory);
}

/* Work figure meta labels */
.work-meta {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  margin-bottom: 0.25rem;
}
.proof-link {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
}
.proof-link a {
  font-weight: 500;
}
.territory {
  max-width: 40rem;
  margin-top: 0.75rem;
}

/* Responsive picture elements inside media frames */
.hero-cinematic__media picture,
.hero-cinematic__media img,
.page-hero__bg picture,
.page-hero__bg img,
.proof-tile picture,
.offer-row__media picture,
.trade-teaser__media picture,
.work-item picture {
  width: 100%;
  height: 100%;
}
.hero-cinematic__media img,
.page-hero__bg img,
.proof-tile img,
.offer-row__media img,
.trade-teaser__media img,
.work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ========== DARK EDITORIAL HOMEPAGE RESET 2026-09-05 ==========
   Supersedes hybrid notes for this branch.
   Direction from Superdesign draft — implemented in tokens, not Tailwind.
=============================================================== */

.page-home {
  background: var(--graphite);
  color: rgba(232, 233, 230, 0.88);
}
.page-home a { color: var(--bronze); }
@media (hover: hover) { .page-home a:hover { color: var(--white); } }
.page-home h1,
.page-home h2,
.page-home h3 { color: var(--white); }
.page-home .muted { color: rgba(232, 233, 230, 0.58); }

.section--graphite {
  background: var(--graphite);
  color: rgba(232, 233, 230, 0.88);
}
.section--charcoal {
  background: var(--charcoal);
  color: rgba(232, 233, 230, 0.88);
}
.section--charcoal h2,
.section--graphite h2,
.section--charcoal h3,
.section--graphite h3 { color: var(--white); }
.section-intro--on-dark { max-width: 40rem; }
.section-intro--on-dark .eyebrow { color: rgba(232, 233, 230, 0.78); }

/* Hero editorial — immersive full-bleed */
.hero-editorial {
  position: relative;
  min-height: min(100vh, 56rem);
  min-height: min(100svh, 56rem);
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  overflow: hidden;
  background: var(--graphite);
}
.hero-editorial__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-editorial__media picture,
.hero-editorial__media img {
  width: 100%;
  height: 100%;
}
.hero-editorial__media img {
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.02);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-editorial__media img {
    animation: hero-pan 28s var(--ease) alternate infinite;
  }
}
.hero-editorial__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15,15,15,0.28) 0%, rgba(15,15,15,0.04) 30%, rgba(15,15,15,0.22) 62%, rgba(15,15,15,0.72) 100%),
    linear-gradient(90deg, rgba(15,15,15,0.48) 0%, rgba(15,15,15,0.14) 48%, rgba(15,15,15,0.18) 100%);
}
.hero-editorial__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(4.5rem, 12vw, 8rem) 0 clamp(4rem, 8vw, 6.5rem);
}
.hero-editorial__copy { max-width: 40rem; }
.hero-editorial__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(232, 233, 230, 0.82);
  margin-bottom: 1.25rem;
}
.bronze-rule-inline {
  display: inline-block;
  width: 2.25rem;
  height: 1px;
  background: var(--bronze);
  flex-shrink: 0;
}
.hero-editorial h1 {
  color: var(--white);
  font-size: clamp(2.35rem, 7.5vw, 5.25rem);
  line-height: 1.08;
  max-width: min(18ch, 100%);
  margin-bottom: 0.7em;
  text-wrap: balance;
  font-weight: 500;
}
.hero-editorial h1 em {
  font-style: italic;
  font-weight: 500;
  color: rgba(232, 233, 230, 0.92);
}
@media (max-width: 480px) {
  .hero-editorial h1 {
    font-size: clamp(2.05rem, 8.5vw, 2.65rem);
    max-width: 16ch;
  }
}
.hero-editorial__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  font-weight: 300;
  line-height: 1.6;
  max-width: 34rem;
  color: rgba(232, 233, 230, 0.86);
  margin-bottom: 2rem;
}
.hero-editorial__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  align-items: center;
}
.text-cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  padding: 0.35rem 0;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.text-cta--primary {
  color: var(--ivory) !important;
  border-bottom-color: rgba(232, 233, 230, 0.55);
}
@media (hover: hover) { .text-cta--primary:hover {
  color: var(--white) !important;
  border-bottom-color: var(--white);
} }
.text-cta--bronze {
  color: var(--bronze) !important;
  border-bottom-color: rgba(163, 165, 166, 0.55);
}
@media (hover: hover) { .text-cta--bronze:hover {
  color: var(--ivory) !important;
  border-bottom-color: var(--ivory);
} }
.text-link-on-dark {
  color: rgba(232, 233, 230, 0.88) !important;
  font-weight: 500;
  text-decoration: none !important;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(163, 165, 166, 0.55);
  padding-bottom: 0.15rem;
}
@media (hover: hover) { .text-link-on-dark:hover { color: var(--white) !important; border-bottom-color: var(--bronze); } }

/* Ivory statement breath — only major light band */
.statement-breath {
  background: var(--ivory-deep);
  color: var(--text);
  padding: clamp(3.75rem, 8vw, 6.5rem) 0;
  text-align: center;
}
.statement-breath__inner {
  max-width: 42rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
}
.statement-breath__mark {
  height: 36px;
  width: auto;
  opacity: 0.92;
}
.statement-breath__line {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.35;
  color: var(--black);
  margin: 0;
  max-width: 36rem;
  text-wrap: balance;
}
.statement-breath__services {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 1.35rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-text);
}
.statement-breath a { color: var(--bronze-text); }

/* Unequal dual paths — D2-adjacent: photo + dark copy panel (copy OFF photo) */
.dual-path-editorial { padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.dual-path-editorial__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .dual-path-editorial__grid {
    grid-template-columns: 7fr 5fr;
    gap: 1.5rem;
    align-items: start;
  }
}
.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  text-decoration: none !important;
  color: var(--ivory) !important;
  isolation: isolate;
  background: var(--black-soft);
  border: 1px solid rgba(232, 233, 230, 0.1);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.path-card:focus-visible {
  border-color: rgba(163, 165, 166, 0.45);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}
@media (hover: hover) { .path-card:hover {
  border-color: rgba(163, 165, 166, 0.45);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
} }
@media (min-width: 900px) {
  .path-card--trade {
    margin-top: 4.5rem; /* visual asymmetry vs homeowner */
  }
}
.path-card__media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--near-black);
  aspect-ratio: 4 / 3;
}
.path-card--homeowner .path-card__media {
  aspect-ratio: 5 / 4;
  min-height: clamp(14rem, 34vw, 22rem);
}
.path-card--trade .path-card__media {
  aspect-ratio: 16 / 10;
  min-height: clamp(10rem, 22vw, 14rem);
}
.path-card__media picture,
.path-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.path-card__media img {
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.path-card:focus-visible .path-card__media img {
  transform: scale(1.04);
}
@media (hover: hover) { .path-card:hover .path-card__media img {
  transform: scale(1.04);
} }
.path-card__overlay {
  display: none; /* no type-on-photo chrome */
}
.path-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.55rem;
  padding: clamp(1.35rem, 2.6vw, 1.9rem) clamp(1.35rem, 2.8vw, 2rem) clamp(1.5rem, 2.8vw, 2.1rem);
  background: var(--black-soft);
  flex: 1;
}
.path-card__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A3A5A6;
}
.path-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  line-height: 1.15;
  color: var(--ivory);
}
.path-card__text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(232, 233, 230, 0.72);
  max-width: 28rem;
}
.path-card__cta {
  margin-top: 0.85rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black) !important;
  background: var(--ivory);
  border: 1px solid var(--ivory);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(15,15,15,0.18);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.path-card--trade .path-card__cta {
  background: transparent;
  color: var(--ivory) !important;
  border-color: rgba(232, 233, 230, 0.55);
  box-shadow: none;
}
.path-card:focus-visible .path-card__cta {
  background: var(--ivory-deep);
  border-color: var(--ivory-deep);
  color: var(--black) !important;
}
@media (hover: hover) { .path-card:hover .path-card__cta {
  background: var(--ivory-deep);
  border-color: var(--ivory-deep);
  color: var(--black) !important;
} }
.path-card--trade:focus-visible .path-card__cta {
  background: rgba(232, 233, 230, 0.12);
  color: var(--ivory) !important;
  border-color: rgba(232, 233, 230, 0.85);
}
@media (hover: hover) { .path-card--trade:hover .path-card__cta {
  background: rgba(232, 233, 230, 0.12);
  color: var(--ivory) !important;
  border-color: rgba(232, 233, 230, 0.85);
} }
.path-card:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

/* Selected works mosaic — captions always visible (not hover-only) */
.works-mosaic__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .works-mosaic__grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(12rem, auto);
    gap: 1.15rem;
  }
  .mosaic-tile--feature { grid-column: span 7; grid-row: span 2; min-height: 28rem; }
  .mosaic-tile--portrait { grid-column: span 5; min-height: 18rem; }
  .mosaic-tile--vanity { grid-column: span 5; min-height: 16rem; }
  .mosaic-tile--detail { grid-column: span 7; min-height: 16rem; }
  .mosaic-tile--support { grid-column: span 5; min-height: 16rem; }
}
.mosaic-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--black);
  color: inherit;
  text-decoration: none !important;
  min-height: 18rem;
}
.mosaic-tile picture,
.mosaic-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
@media (hover: hover) { .mosaic-tile:hover img { transform: scale(1.04); } }
.mosaic-tile__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2.25rem 1.25rem 1.2rem;
  background: linear-gradient(transparent, rgba(15,15,15,0.82));
  /* Always visible — glass panel for polish, not hover-gated */
  backdrop-filter: blur(0px);
}
.mosaic-tile__eyebrow {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 233, 230, 0.82);
  margin-bottom: 0.35rem;
}
.mosaic-tile__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  margin: 0;
  color: var(--white);
  line-height: 1.2;
}
.works-mosaic__link {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Finish carpentry image-led story */
.finish-story__row {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .finish-story__row {
    grid-template-columns: 1.25fr 0.9fr;
  }
}
.finish-story__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--black);
}
.finish-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.finish-story__body .eyebrow { color: rgba(232, 233, 230, 0.78); }
.finish-story__body p {
  color: rgba(232, 233, 230, 0.78);
  max-width: 32rem;
  margin-bottom: 1.5rem;
}

/* GC architectural photo break */
.gc-break {
  position: relative;
  min-height: min(72vh, 36rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--graphite);
  color: var(--ivory);
}
.gc-break__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.gc-break__media picture,
.gc-break__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.gc-break__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(15,15,15,0.68) 0%, rgba(15,15,15,0.38) 42%, rgba(15,15,15,0.18) 100%),
    linear-gradient(180deg, rgba(15,15,15,0.18) 0%, rgba(15,15,15,0.36) 100%);
  pointer-events: none;
}
.gc-break__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}
.gc-break__content .container { max-width: 38rem; margin-left: max(1.25rem, calc((100% - var(--max)) / 2 + 1.25rem)); margin-right: auto; }
.gc-break h2 {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3.1rem);
  max-width: 14ch;
}
.gc-break .eyebrow { color: rgba(232, 233, 230, 0.78); }
.gc-break__lede {
  color: rgba(232, 233, 230, 0.82);
  max-width: 32rem;
  font-size: clamp(1.02rem, 1.4vw, 1.12rem);
  line-height: 1.65;
}

/* Quiet conversion */
.conversion-quiet__inner {
  max-width: 36rem;
  text-align: center;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.conversion-quiet .eyebrow { color: rgba(232, 233, 230, 0.78); }
.phone-xl--on-dark {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  font-weight: 500;
  color: var(--white) !important;
  text-decoration: underline !important; /* phone numbers read as an action: same underline as the in-text links */
  text-underline-offset: 0.2em;
  line-height: 1.1;
  padding-block: 0.25rem; /* 44px+ hit area at 390px */
}
@media (hover: hover) { .phone-xl--on-dark:hover { color: var(--bronze) !important; } }
.closing-paths {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 0.75rem;
}

/* Mobile polish — keep dual paths unequal (not twin stacks) */
@media (max-width: 759px) {
  .path-card--homeowner {
    min-height: clamp(26rem, 88vw, 34rem);
  }
  .path-card--trade {
    min-height: clamp(14rem, 48vw, 18.5rem);
  }
  .path-card__body {
    padding: 1.65rem 1.35rem 1.75rem;
  }
  .btn {
    min-height: 2.75rem;
    padding: 1rem 1.45rem;
  }
  .closing-paths .btn,
  .gc-break .btn,
  .hero-editorial__ctas .btn {
    width: 100%;
    max-width: 22rem;
  }
  .hero-editorial__ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }
}

/* Ensure mosaic captions readable on keyboard focus */
.mosaic-tile:focus-visible .mosaic-tile__caption,
.mosaic-tile:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}


/* Critiquito pass-1: ivory labels on dark; bronze reserved for rules/micro */
.finish-story__body .text-cta--bronze {
  color: rgba(232, 233, 230, 0.92) !important;
  border-bottom-color: rgba(163, 165, 166, 0.55);
}
@media (hover: hover) { .finish-story__body .text-cta--bronze:hover {
  color: var(--white) !important;
  border-bottom-color: var(--bronze);
} }
.page-home .site-footer a {
  color: rgba(232, 233, 230, 0.78);
}
@media (hover: hover) { .page-home .site-footer a:hover {
  color: var(--white);
} }

/* ========== SIGNATURE MOMENTS 2026-09-05 ==========
   Supersedes dark-editorial candidate on this branch.
   Immersive hero · pinned project chapters · micro-detail system
   Critiquito pass-1 improve: environment hero + de-chromed chapters + mobile snap
=============================================================== */

/* Section numerals — bronze micro-system */
.section-numeral {
  margin: 0 0 1.25rem;
}
.section-numeral span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
}
.section-numeral--inline {
  margin-bottom: 0.85rem;
}

/* Hero — ENVIRONMENT (type living in the kitchen plane) */
.hero-editorial--signature,
.hero-editorial--environment {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  align-items: stretch;
  border-radius: 0;
}
.hero-editorial--environment .hero-editorial__media,
.hero-editorial--environment .hero-editorial__media img {
  border-radius: 0;
}
.hero-editorial--environment .hero-editorial__media img {
  object-position: 58% 40%;
  transform: scale(1.02);
}
.hero-editorial--signature .hero-editorial__content,
.hero-editorial--environment .hero-editorial__content {
  display: flex;
  align-items: flex-end;
  padding: clamp(5.5rem, 12vw, 8rem) 0 clamp(6.5rem, 12vw, 8.5rem);
  min-height: inherit;
}
.hero-editorial--environment .hero-editorial__copy--env {
  max-width: min(58rem, 96vw);
  margin-left: clamp(-0.5rem, -2vw, 0);
  padding-right: clamp(0rem, 4vw, 3rem);
}
.hero-editorial--signature h1,
.hero-editorial--environment h1 {
  font-size: clamp(3.25rem, 12vw, 8.35rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  max-width: min(15ch, 100%);
  margin-bottom: 0.38em;
  text-wrap: pretty;
  text-shadow: 0 2px 34px rgba(15, 15, 15, 0.45), 0 1px 0 rgba(15,15,15,0.2);
}
.hero-editorial--signature h1 .hero-line,
.hero-editorial--environment h1 .hero-line {
  display: block;
}
.hero-editorial--environment h1 .hero-line:nth-child(2) {
  margin-left: clamp(0rem, 3vw, 2.5rem);
}
.hero-editorial--environment h1 .hero-line--em {
  margin-top: 0.04em;
  margin-left: clamp(0.5rem, 6vw, 4.5rem);
  max-width: 18ch;
}
.hero-editorial--signature h1 em,
.hero-editorial--environment h1 em {
  font-style: italic;
  color: rgba(232, 233, 230, 0.96);
}
.hero-editorial--signature .hero-editorial__lede,
.hero-editorial--environment .hero-editorial__lede {
  max-width: 26rem;
  font-size: clamp(0.95rem, 1.35vw, 1.08rem);
}
.hero-editorial--environment .hero-editorial__lede--thin {
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.55;
  color: rgba(232, 233, 230, 0.72);
  margin-bottom: 1.65rem;
  max-width: 28rem;
}
.hero-editorial--environment .hero-editorial__ctas--secondary {
  opacity: 0.96;
}
.hero-editorial--signature .hero-editorial__veil,
.hero-editorial--environment .hero-editorial__veil {
  /* Lighter craft window — reduce haze so photography reads crisp */
  background:
    linear-gradient(180deg, rgba(15,15,15,0.22) 0%, rgba(15,15,15,0.02) 28%, rgba(15,15,15,0.08) 52%, rgba(15,15,15,0.62) 100%),
    linear-gradient(100deg, rgba(15,15,15,0.42) 0%, rgba(15,15,15,0.12) 38%, rgba(15,15,15,0.02) 62%, rgba(15,15,15,0.10) 100%);
}

/* Hero — SCHAUMBURG EURO: designed around the photograph (restraint veil) */
.hero-editorial--schaumburg .hero-editorial__media img {
  object-position: 46% 42%;
  transform: scale(1.015);
}
.hero-editorial--schaumburg .hero-editorial__veil {
  /* Targeted refine: open craft window — less fog, keep type legible */
  background:
    linear-gradient(180deg, rgba(15,15,15,0.16) 0%, rgba(15,15,15,0.0) 32%, rgba(15,15,15,0.04) 58%, rgba(15,15,15,0.55) 100%),
    linear-gradient(105deg, rgba(15,15,15,0.36) 0%, rgba(15,15,15,0.10) 36%, rgba(15,15,15,0.0) 58%, rgba(15,15,15,0.06) 100%);
}
.hero-editorial--schaumburg .hero-editorial__copy--env {
  max-width: min(56rem, 94vw);
}
.hero-editorial--schaumburg h1 {
  text-shadow: 0 2px 28px rgba(15, 15, 15, 0.55), 0 1px 2px rgba(15,15,15,0.35);
}
.hero-editorial--schaumburg .hero-editorial__lede--thin {
  color: rgba(232, 233, 230, 0.78);
  text-shadow: 0 1px 12px rgba(15, 15, 15, 0.45);
}

/* Photo-pass restraint: quieter section numerals (less marketing chrome) */
.page-home .section-numeral {
  opacity: 1; /* was 0.55 (2.6:1 on charcoal); full bronze is 5.6:1 */
}
.page-home .section-numeral span {
  letter-spacing: 0.12em;
}
.page-home .dual-path-editorial__intro h2,
.page-home .project-chapters .section-intro h2 {
  letter-spacing: -0.03em;
}
/* path-card overlay retired — copy lives in dark panel under photo */
.page-home .path-card__overlay { display: none; }
.page-home .gc-break__veil {
  background:
    linear-gradient(180deg, rgba(15,15,15,0.18) 0%, rgba(15,15,15,0.28) 45%, rgba(15,15,15,0.62) 100%),
    linear-gradient(90deg, rgba(15,15,15,0.38) 0%, rgba(15,15,15,0.12) 55%, rgba(15,15,15,0.22) 100%);
}


/* First-3s motion: veil lift + type settle (respect reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .hero-editorial--signature .hero-editorial__veil,
  .hero-editorial--environment .hero-editorial__veil {
    animation: hero-veil-lift 2.4s var(--ease) both;
  }
  .hero-editorial--signature .hero-editorial__copy--settle,
  .hero-editorial--environment .hero-editorial__copy--settle {
    animation: hero-type-settle 1.6s var(--ease) 0.25s both;
  }
  .hero-editorial--signature .hero-editorial__media img,
  .hero-editorial--environment .hero-editorial__media img {
    animation: hero-pan 34s var(--ease) alternate infinite;
  }
}
@keyframes hero-veil-lift {
  from { opacity: 0.55; }
  to { opacity: 1; }
}
@keyframes hero-type-settle {
  from { opacity: 0; transform: translateY(1.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Bronze scroll-line cue */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3vw, 2rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  transform: translateX(-50%);
  pointer-events: none;
}
.hero-scroll-cue__line {
  display: block;
  width: 1px;
  height: 3.25rem;
  background: linear-gradient(180deg, rgba(163, 165, 166, 0.15), var(--bronze));
  transform-origin: top center;
}
.hero-scroll-cue__label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232, 233, 230, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-cue__line {
    animation: scroll-line-pulse 2.2s var(--ease) 1.1s infinite;
  }
}
@keyframes scroll-line-pulse {
  0%, 100% { transform: scaleY(0.55); opacity: 0.45; }
  50% { transform: scaleY(1); opacity: 1; }
}
@media (max-width: 480px) {
  .hero-editorial--signature h1,
  .hero-editorial--environment h1 {
    font-size: clamp(2.65rem, 13vw, 3.55rem);
    max-width: 12ch;
  }
  .hero-editorial--environment h1 .hero-line:nth-child(2),
  .hero-editorial--environment h1 .hero-line--em {
    margin-left: 0;
  }
  .hero-scroll-cue { display: none; }
}

/* Dual-path intro + richer hovers */
.dual-path-editorial__intro {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.dual-path-editorial__intro h2 {
  max-width: 14ch;
}
.path-card__cta {
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.path-card:focus-visible .path-card__cta {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 15, 15, 0.28);
}
@media (hover: hover) { .path-card:hover .path-card__cta {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 15, 15, 0.28);
} }
.path-card--trade:focus-visible .path-card__cta {
  box-shadow: none;
}
@media (hover: hover) { .path-card--trade:hover .path-card__cta {
  box-shadow: none;
} }
/* Overlay chrome removed (Critiquito pass-1 IMPORTANT #2) */
.path-card__overlay { display: none; }

/* ----- Pinned project chapters — hard edges, editorial captions, bronze numerals ----- */
.project-chapters {
  position: relative;
  /* no overflow clip — sticky chapter frames need a non-clipping ancestor */
  padding-bottom: 0;
}
.project-chapters > .container {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.project-chapters__stage {
  display: none;
  width: 100%;
  margin-inline: 0;
  gap: 0;
  align-items: start;
}
.project-chapters__sticky {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  max-height: none;
  border-radius: 0; /* photography as page geometry */
  overflow: hidden;
  background: var(--near-black);
  isolation: isolate;
}
.project-chapters__frames {
  position: absolute;
  inset: 0;
}
.chapter-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  /* No crossfade — image must swap atomically with bound meta/numeral (Critiquito PASS 2 CRITICAL #1) */
  transition: none;
  pointer-events: none;
  border-radius: 0;
  z-index: 0;
  visibility: hidden;
}
.chapter-frame.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.chapter-frame picture,
.chapter-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* Bronze chapter numerals (replaces carousel dots) */
.project-chapters__progress {
  position: absolute;
  left: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 3;
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
}
.chapter-progress-num {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(232, 233, 230, 0.35);
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.chapter-progress-num.is-active {
  color: var(--bronze);
}

.project-chapters__rail {
  display: flex;
  flex-direction: column;
  background: var(--charcoal, #0f0f0f);
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.chapter-caption {
  min-height: 90svh;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem) 0;
  opacity: 0.28;
  transition: opacity 0.2s var(--ease);
}
.chapter-caption.is-active {
  opacity: 1;
}
.chapter-caption__editorial {
  width: 100%;
  max-width: 28rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.chapter-caption__numeral {
  margin: 0 0 0.85rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
}
.chapter-caption__meta {
  margin: 0 0 0.75rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 233, 230, 0.72);
}
.chapter-caption__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.06;
  color: var(--white);
  margin: 0 0 0.75em;
  font-weight: 500;
}
.chapter-caption__body {
  color: rgba(232, 233, 230, 0.78);
  margin-bottom: 1.35rem;
  max-width: 34rem;
  font-weight: 300;
}
.chapter-caption.is-active .chapter-caption__title {
  color: var(--white);
}

/* Mobile-native full-bleed stacked chapters (snap storytelling) */
.project-chapters__static[hidden] { display: none !important; }
.project-chapters__static:not([hidden]) {
  display: block;
}
.mobile-chapter {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 0;
  scroll-snap-align: start;
  background: var(--near-black);
}
.mobile-chapter--lead {
  border-radius: 0;
}
.mobile-chapter__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  overflow: hidden;
}
.mobile-chapter__media picture,
.mobile-chapter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.mobile-chapter__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15,15,15,0.08) 0%, rgba(15,15,15,0.06) 42%, rgba(15,15,15,0.68) 100%);
}
.mobile-chapter__overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(1.75rem, 6vw, 2.5rem) clamp(1.25rem, 5vw, 1.75rem) clamp(2.25rem, 7vw, 3rem);
  max-width: 36rem;
}
.mobile-chapter__numeral {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--bronze);
}
.mobile-chapter__overlay h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 2.75rem);
  line-height: 1.05;
  color: var(--white);
  margin: 0 0 0.65em;
  font-weight: 500;
}
.mobile-chapter__overlay p:not(.chapter-caption__meta):not(.mobile-chapter__numeral) {
  color: rgba(232, 233, 230, 0.78);
  font-weight: 300;
  font-size: 0.98rem;
  max-width: 34rem;
  margin: 0;
}
.mobile-chapter__link {
  padding: 1.75rem 1.25rem 0.5rem;
  margin: 0;
}

/* Enable pinned stage on wider screens when motion allowed */
@media (min-width: 900px) {
  .project-chapters.is-pinned .project-chapters__stage {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
  }
  .project-chapters.is-pinned .project-chapters__static {
    display: none !important;
  }
  .project-chapters:not(.is-pinned) .project-chapters__static {
    display: block;
  }
  .project-chapters:not(.is-pinned) .project-chapters__stage {
    display: none;
  }
  .project-chapters.is-pinned .project-chapters__rail {
    /* Soft left edge so caption sits on charcoal beside hard photo edge */
    box-shadow: inset 1px 0 0 rgba(232, 233, 230, 0.06);
  }
}

/* Narrow: mobile-native snap chapters (intentional, not gallery strip) */
@media (max-width: 899px) {
  .project-chapters__stage { display: none !important; }
  .project-chapters__static { display: block !important; }
  .project-chapters__static[hidden] { display: block !important; }
  .project-chapters__static {
    scroll-snap-type: y proximity;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-chapters__stage { display: none !important; }
  .project-chapters__static { display: block !important; }
  .project-chapters__static[hidden] { display: block !important; }
  .hero-scroll-cue { display: none; }
  .project-chapters__static {
    scroll-snap-type: none;
  }
}

/* GC break — stronger type breaks */
.gc-break h2 {
  max-width: 16ch;
  line-height: 1.08;
}
@media (hover: hover) { .gc-break .btn--ghost:hover {
  border-color: rgba(232, 233, 230, 0.9);
  background: rgba(232, 233, 230, 0.08);
} }

/* Finish story hover polish */
.finish-story__media img {
  transition: transform 0.8s var(--ease);
}
@media (hover: hover) { .finish-story__row:hover .finish-story__media img {
  transform: scale(1.03);
} }
@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) { .finish-story__row:hover .finish-story__media img {
    transform: none;
  } }
}

/* Statement breath tighter editorial measure */
.statement-breath__line {
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.32;
}

/* Nav micro hover polish on homepage */
.page-home .site-nav a {
  transition: color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.page-home .site-nav a[aria-current="page"] {
  box-shadow: inset 0 -1px 0 rgba(163, 165, 166, 0.55);
}
@media (hover: hover) { .page-home .site-nav a:hover {
  box-shadow: inset 0 -1px 0 rgba(163, 165, 166, 0.55);
} }


/* ========== TARGETED ART-DIRECTION REFINE 2026-09-06 ==========
   Fork: visual/targeted-refine-2026-09-06
   Goals: exact owner H1 · warm post-hero breath · less haze · cohesive crisp grade
=============================================================== */

/* H1 — longer editorial partner line (not mega display kitchen stack) */
.hero-editorial--schaumburg h1,
.page-home .hero-editorial--signature h1,
.page-home .hero-editorial--environment h1 {
  font-size: clamp(1.85rem, 4.8vw, 3.35rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  max-width: min(22ch, 100%);
  margin-bottom: 0.55em;
  text-shadow: 0 2px 22px rgba(15, 15, 15, 0.42), 0 1px 2px rgba(15,15,15,0.28);
}
.page-home .hero-editorial h1 .hero-line--sub {
  display: block;
  margin-top: 0.42em;
  margin-left: 0;
  max-width: 28ch;
  font-size: 0.62em;
  line-height: 1.28;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: rgba(232, 233, 230, 0.88);
  font-style: normal;
}
.page-home .hero-editorial--environment h1 .hero-line:nth-child(2) {
  margin-left: clamp(0rem, 1.5vw, 1.25rem);
}
.page-home .hero-editorial--environment h1 .hero-line--em {
  margin-left: 0;
}
@media (max-width: 480px) {
  .hero-editorial--schaumburg h1,
  .page-home .hero-editorial--signature h1,
  .page-home .hero-editorial--environment h1 {
    font-size: clamp(1.55rem, 7.2vw, 2.05rem);
    max-width: 20ch;
  }
  .page-home .hero-editorial h1 .hero-line--sub {
    font-size: 0.68em;
    max-width: 26ch;
  }
}

/* Post-hero band — warm refined calm (V1 ivory-deep / soft charcoal accents; not stark white) */
.page-home .statement-breath,
.page-home .statement-breath--warm {
  background: var(--ivory-deep);
  color: var(--text);
  border-top: 1px solid rgba(26, 26, 26, 0.06);
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  box-shadow: inset 0 18px 40px rgba(15, 15, 15, 0.03), inset 0 -12px 28px rgba(163, 165, 166, 0.04);
}
.page-home .statement-breath__line {
  color: var(--charcoal);
}
.page-home .statement-breath__services {
  color: var(--bronze-text);
  opacity: 0.92;
}
.page-home .statement-breath__mark {
  opacity: 0.88;
  filter: none;
}

/* Sitewide homepage photo crispness — no blur/brightness washes; micro contrast only */
.page-home .hero-editorial__media img,
.page-home .path-card__media img,
.page-home .chapter-frame img,
.page-home .mobile-chapter__media img,
.page-home .finish-story__media img,
.page-home .gc-break__media img {
  filter: contrast(1.045) saturate(1.02);
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .page-home .hero-editorial__media img,
  .page-home .path-card__media img,
  .page-home .chapter-frame img,
  .page-home .mobile-chapter__media img,
  .page-home .finish-story__media img,
  .page-home .gc-break__media img {
    filter: contrast(1.03) saturate(1.01);
  }
}

/* Keep hero type readable with lighter veil */
.page-home .hero-editorial--schaumburg .hero-editorial__lede--thin {
  color: rgba(232, 233, 230, 0.86);
  text-shadow: 0 1px 14px rgba(15, 15, 15, 0.5);
}
.page-home .hero-editorial--schaumburg .hero-editorial__eyebrow {
  color: rgba(232, 233, 230, 0.88);
  text-shadow: 0 1px 10px rgba(15, 15, 15, 0.45);
}


/* ========== HYBRID D2 + D1 2026-09-06 ==========
   D2 chassis: split hero (copy dark panel ≠ photo overlay)
   D1 chrome: transparent fixed header · immersive dark-first
   Reject: bright D3 / foggy veils / type pasted on kitchen photo
=============================================================== */

/* D1 — transparent fixed header that stays on top (homepage) */
.page-home .staging-banner {
  position: relative;
  z-index: 110;
}
.page-home .site-header--fixed-luxe {
  position: fixed;
  top: var(--staging-banner-h, 0px); /* 0 in production; 2.15rem only under a rendered staging banner (see .staging-banner) */
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(15, 15, 15, 0.42);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(232, 233, 230, 0.08);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.page-home.has-scrolled .site-header--fixed-luxe,
.page-home .site-header--fixed-luxe.is-solid {
  background: rgba(15, 15, 15, 0.88);
  border-bottom-color: rgba(232, 233, 230, 0.1);
}
.page-home #main {
  /* Banner stays in flow; fixed header overlays main top — pad header height only */
  padding-top: var(--header-h);
}

/* Shared dark glass header (inner pages keep sticky; hybrid class OK sitewide) */
.site-header--fixed-luxe {
  background: rgba(15, 15, 15, 0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(232, 233, 230, 0.08);
}

/* D2 — split architectural hero */
.hero-split {
  width: min(100% - 0rem, 100%);
  margin: 0;
  display: grid;
  gap: 0;
  background: var(--near-black);
  border: none;
  overflow: hidden;
  min-height: min(78vh, 42rem);
}
@media (min-width: 768px) {
  .hero-split {
    grid-template-columns: minmax(20rem, 0.92fr) 1.18fr;
    min-height: min(82vh, 44rem);
    width: min(100% - 2.5rem, 74rem);
    margin: 0.75rem auto 0;
    border: 1px solid rgba(232, 233, 230, 0.08);
  }
}
.hero-split__copy {
  padding: clamp(2rem, 4.5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--near-black);
  color: var(--ivory);
  position: relative;
  z-index: 1;
}
.hero-split__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  color: var(--bronze);
}
.hero-split h1.hero-split__h1 {
  /* new H1: sits above the approved tagline at the old sub-line size */
  font-size: clamp(1.07rem, 1.87vw, 1.69rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0;
  margin: 0 0 0.6rem;
  max-width: 34ch;
  color: rgba(232, 233, 230, 0.88);
}
.hero-split h1,
.hero-split .hero-tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.05rem, 3.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 1rem;
  max-width: 16ch;
  text-shadow: none; /* copy lives on solid dark — no photo haze */
}
.hero-split .hero-tagline { text-wrap: balance; }
.hero-split .hero-tagline .hero-line { display: block; }
.hero-split .hero-tagline .hero-line--sub {
  display: block;
  margin-top: 0.5em;
  font-size: 0.52em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.28;
  opacity: 0.82;
  max-width: 28ch;
  color: rgba(232, 233, 230, 0.88);
}
.hero-split__lede {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(232, 233, 230, 0.65);
  margin: 0 0 1.6rem;
  max-width: 32ch;
}
.hero-split__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.hero-split__media {
  position: relative;
  min-height: 22rem;
  background: var(--charcoal);
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero-split__media {
    /* Floor so split reads strong at 768–960; grid stretch grows further */
    min-height: min(70vh, 36rem);
  }
}
.hero-split__media picture,
.hero-split__media img {
  width: 100%;
  height: 100%;
}
.hero-split__media img {
  object-fit: cover;
  object-position: 42% 38%;
  position: absolute;
  inset: 0;
  /* Crisp architectural grade — no muddy veil */
  filter: contrast(1.08) saturate(1.02) brightness(1.01);
  transform: none;
}
.hero-split__frame {
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(232, 233, 230, 0.22);
  pointer-events: none;
  z-index: 1;
}
.hero-split__meta {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 2;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(15, 15, 15, 0.55);
  padding: 0.4rem 0.65rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-split__copy {
    animation: hero-type-settle 1.35s var(--ease) 0.15s both;
  }
}

/* Soft warm stone breath — muted ivory only (not stark white) */
.page-home .statement-breath--stone,
.page-home .statement-breath.statement-breath--stone {
  background: var(--living-draft-cream); /* Phase 1 L2 parchment cream */
  color: var(--text);
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
  box-shadow: inset 0 14px 32px rgba(15, 15, 15, 0.04);
}
.page-home .statement-breath--stone .statement-breath__line {
  color: var(--near-black);
}

/* Kill residual haze on GC / mobile (dark-luxury, not foggy); path overlay retired */
.page-home .path-card__overlay { display: none; }
.page-home .gc-break__veil {
  background:
    linear-gradient(180deg, rgba(15,15,15,0.12) 0%, rgba(15,15,15,0.22) 45%, rgba(15,15,15,0.68) 100%),
    linear-gradient(90deg, rgba(15,15,15,0.32) 0%, rgba(15,15,15,0.08) 55%, rgba(15,15,15,0.18) 100%);
}
.page-home .mobile-chapter__veil {
  background: linear-gradient(to top, rgba(15,15,15,0.82) 0%, rgba(15,15,15,0.18) 55%, transparent 100%);
}

/* Homepage photo crispness — include split hero media */
.page-home .hero-split__media img,
.page-home .path-card__media img,
.page-home .chapter-frame img,
.page-home .mobile-chapter__media img,
.page-home .finish-story__media img,
.page-home .gc-break__media img {
  filter: contrast(1.07) saturate(1.02);
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.page-home .hero-split__media img {
  filter: contrast(1.08) saturate(1.02) brightness(1.01);
}

@media (max-width: 767px) {
  .hero-split {
    min-height: 0;
  }
  .hero-split__media {
    min-height: min(52vw, 22rem);
    aspect-ratio: 4 / 3;
  }
  .hero-split__media img {
    position: absolute;
  }
  .hero-split h1.hero-split__h1 {
    font-size: clamp(0.91rem, 3.64vw, 1.22rem);
    max-width: 34ch;
  }
  .hero-split h1,
  .hero-split .hero-tagline {
    font-size: clamp(1.75rem, 7vw, 2.35rem);
    max-width: 18ch;
  }
}

/* ========== SITEWIDE HYBRID D2+D1 2026-09-06 ==========
   Coherent design system · not identical clones
   Dark-first chrome · D2 split / dark+photo heroes · warm stone only
=============================================================== */

/* Desktop: logo goes home — drop Home link; keep on mobile drawer */
@media (min-width: 1040px) {
  .site-nav .nav-home { display: none; }
}

/* Contrast: bronze punctuation on dark — prefer lighter bronze / ivory for small type */
.hero-split__eyebrow,
.page-hero--media .eyebrow,
.section--dark .eyebrow,
.section--graphite .eyebrow,
.section--charcoal .eyebrow,
.gc-break .eyebrow {
  color: #A3A5A6;
}
.section-intro--on-dark h2 {
  color: var(--white);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}
.dual-path-editorial__intro h2 {
  color: var(--white);
}
.section--dark a,
.section--graphite a:not(.btn),
.section--charcoal a:not(.btn) {
  color: #7EA0F5;
}
@media (hover: hover) { .section--dark a:hover, .section--graphite a:not(.btn):hover, .section--charcoal a:not(.btn):hover {
  color: var(--white);
} }

/* Sitewide fixed/premium header (inner pages share D1 chrome) */
.page-inner {
  background: #E8E9E6;
  color: var(--text);
}
.page-inner .staging-banner {
  position: relative;
  z-index: 110;
}
.page-inner .site-header--fixed-luxe {
  position: fixed;
  top: var(--staging-banner-h, 0px); /* 0 in production; 2.15rem only under a rendered staging banner (see .staging-banner) */
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(15, 15, 15, 0.42);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(232, 233, 230, 0.08);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.page-inner.has-scrolled .site-header--fixed-luxe,
.page-inner .site-header--fixed-luxe.is-solid {
  background: rgba(15, 15, 15, 0.88);
  border-bottom-color: rgba(232, 233, 230, 0.1);
}
.page-inner #main {
  padding-top: var(--header-h);
}

/* Inner-page D2 split hero — slightly shorter than home */
.hero-split--page {
  min-height: min(58vh, 32rem);
}
@media (min-width: 768px) {
  .hero-split--page {
    min-height: min(62vh, 34rem);
    margin-top: 0.5rem;
  }
}
.hero-split--page h1 {
  max-width: 18ch;
  font-size: clamp(1.85rem, 3.2vw, 2.85rem);
}
.hero-split--page .hero-split__lede {
  max-width: 36ch;
  color: rgba(232, 233, 230, 0.72);
}

/* Quiet footer sitewide */
.site-footer--quiet {
  background: #0F0F0F;
  border-top: 1px solid rgba(232, 233, 230, 0.06);
}
.site-footer--quiet a {
  color: rgba(232, 233, 230, 0.78);
}
@media (hover: hover) { .site-footer--quiet a:hover {
  color: var(--white);
} }
/* Footer small print (batch 5 D): .muted is --text-muted (#53565A), which is 2.67:1 on this dark footer on inner pages.
   Same cream at 62% the footer's own bottom line already uses (about 6.9:1). Footer only: no other .muted changes. */
.site-footer .muted {
  color: rgba(232, 233, 230, 0.62);
}

/* Inner sections: v2.1 sets them on the black ground (this rule used to paint them warm stone); the kit at the end
   of this file decides which sections take the stone field. */
.page-inner .offer-row__body h2 { color: var(--bone); }
.page-inner .conversion-band {
  background: var(--near-black);
  color: rgba(232, 233, 230, 0.88);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.page-inner .conversion-band h2 { color: var(--white); }
.page-inner .conversion-band .muted { color: rgba(232, 233, 230, 0.62); }

/* Contact path picker on warm stone */
.page-contact .intake-shell {
  background: transparent;
  contain: layout;
}
/* Site-audit CLS reserves — empty wizard shells + late JS paint (narrow perf; no visual redesign) */
/* #wizard-progress is empty since the 2026-11-03 restyle (the progress bar moved into the step), so it reserves nothing. */
.page-contact #wizard-progress {
  display: none;
}
.page-contact #wizard-panels {
  min-height: 22rem;
}
body.page-contact[data-intake-path="homeowner"] #wizard-panels {
  min-height: 26rem;
}
.page-contact .page-hero {
  background: var(--near-black);
}

/* Kill leftover hero-split meta (removed from DOM; hide if residual) */
.hero-split__meta { display: none !important; }

/* Button letter-spacing for sentence case */
.btn {
  letter-spacing: 0.02em;
  font-weight: 500;
}

/* ==========================================================================
   Homeowner intake visual refine (2026-09-06)
   Scoped to body.page-contact[data-intake-path="homeowner"] — trade stays lean.
   ========================================================================== */

/* Wider shell when HO editorial layout is active */
body.page-contact[data-intake-path="homeowner"] .intake-shell {
  max-width: 64rem;
}

/* Layout: form + optional aside; stacks on small screens */
.intake-layout {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}
.intake-aside {
  display: none;
}
body.page-contact[data-intake-path="homeowner"] .intake-aside {
  display: block;
}
body.page-contact[data-intake-path="trade"] .intake-aside {
  display: none;
}
.intake-aside__figure {
  margin: 0;
  background: var(--ivory);
  border: 1px solid var(--border-strong);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(15, 15, 15, 0.08);
}
.intake-aside__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.intake-aside__caption {
  margin: 0;
  padding: 0.75rem 1rem 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.intake-aside__note:empty {
  display: none;
}
.intake-aside__note:not(:empty) {
  margin: 0.85rem 0 0;
  max-width: none;
}
@media (min-width: 900px) {
  body.page-contact[data-intake-path="homeowner"] .intake-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(14rem, 0.7fr);
    gap: 2rem;
    align-items: stretch;
  }
  body.page-contact[data-intake-path="homeowner"] .intake-aside {
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
    align-self: start;
  }
}

/* Path picker — HO elevated when active; trade remains near-black lean */
body.page-contact[data-intake-path="homeowner"] .path-picker {
  margin-bottom: 2.25rem;
}
body.page-contact[data-intake-path="homeowner"] .path-btn {
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(15, 15, 15, 0.04);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
body.page-contact[data-intake-path="homeowner"] .path-btn#path-homeowner.is-active {
  background: var(--ivory);
  border-color: var(--near-black);
  border-width: 1.5px;
  box-shadow:
    0 0 0 1px rgba(15, 15, 15, 0.04),
    0 8px 22px rgba(15, 15, 15, 0.1);
}
body.page-contact[data-intake-path="homeowner"] .path-btn#path-homeowner.is-active strong {
  color: var(--near-black);
}
@media (hover: hover) { body.page-contact[data-intake-path="homeowner"] .path-btn#path-homeowner:hover:not(.is-active) {
  border-color: var(--bronze);
  background: var(--ivory-deep);
} }

/* Progress: the dot stepper that stood here was replaced on 2026-11-03 by the bar in each step's "Step N of M"
   line (contact.js stepCountHtml; styles in "Inquiry form restyle" at the end of this file). */

/* Form card — charcoal frame + soft depth on warm ivory */
body.page-contact[data-intake-path="homeowner"] .form-card {
  background: var(--ivory);
  border: 1px solid rgba(15, 15, 15, 0.14);
  border-radius: var(--radius-card);
  padding: 1.85rem 1.65rem 1.7rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 12px 32px rgba(15, 15, 15, 0.08),
    0 2px 6px rgba(15, 15, 15, 0.04);
}
@media (min-width: 560px) {
  body.page-contact[data-intake-path="homeowner"] .form-card {
    padding: 2.1rem 2rem 1.9rem;
  }
}

/* Field hierarchy + spacing */
body.page-contact[data-intake-path="homeowner"] .field {
  margin-bottom: 1.35rem;
}
body.page-contact[data-intake-path="homeowner"] .field label,
body.page-contact[data-intake-path="homeowner"] .field .label-like {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--near-black);
  margin-bottom: 0.5rem;
}
body.page-contact[data-intake-path="homeowner"] .field label .hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.78rem;
}
body.page-contact[data-intake-path="homeowner"] .field input,
body.page-contact[data-intake-path="homeowner"] .field select,
body.page-contact[data-intake-path="homeowner"] .field textarea {
  background: var(--ivory-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.82rem 0.95rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
body.page-contact[data-intake-path="homeowner"] .field input:focus,
body.page-contact[data-intake-path="homeowner"] .field select:focus,
body.page-contact[data-intake-path="homeowner"] .field textarea:focus {
  outline: none;
  border-color: var(--bronze);
  background: #F3F4F2; /* ivory-deep adjacent, not stark white */
  box-shadow: 0 0 0 3px var(--bronze-soft);
}
body.page-contact[data-intake-path="homeowner"] .field textarea {
  min-height: 7.5rem;
}

/* Choice chips */
body.page-contact[data-intake-path="homeowner"] .choice-group label {
  background: var(--ivory-soft);
  border-color: var(--border-strong);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
body.page-contact[data-intake-path="homeowner"] .choice-group label:has(input:checked) {
  border-color: var(--bronze-deep);
  background: var(--bronze-soft);
}
@media (hover: hover) { body.page-contact[data-intake-path="homeowner"] .choice-group label:hover {
  border-color: var(--bronze);
} }

/* Prefer-call band */
body.page-contact[data-intake-path="homeowner"] .prefer-call {
  background: var(--ivory-soft);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--bronze);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.4rem;
}

/* Upload zone — premium dashed, no live-upload implication */
body.page-contact[data-intake-path="homeowner"] .upload-zone {
  border: 1.5px dashed rgba(163, 165, 166, 0.55);
  background: linear-gradient(180deg, rgba(163, 165, 166, 0.08), rgba(232, 233, 230, 0.5));
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
}

/* Actions + status */
body.page-contact[data-intake-path="homeowner"] .wizard-actions {
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border-strong);
}
body.page-contact[data-intake-path="homeowner"] .form-status.is-info {
  background: var(--ivory-soft);
  border-color: var(--border-strong);
  border-radius: var(--radius);
}
body.page-contact[data-intake-path="homeowner"] .form-status.is-error,
body.page-contact[data-intake-path="homeowner"] .form-status.is-ok {
  border-radius: var(--radius);
}
body.page-contact[data-intake-path="homeowner"] .turnstile-slot {
  background: var(--ivory-soft);
  border-color: var(--border-strong);
  border-radius: var(--radius);
}

/* Soften any residual stark white inside HO intake surfaces */
body.page-contact[data-intake-path="homeowner"] .intake-main,
body.page-contact[data-intake-path="homeowner"] .intake-form {
  background: transparent;
}
body.page-contact[data-intake-path="homeowner"] .wizard-panel.is-active.form-card {
  background: var(--ivory);
}

/* Empty hooks for Humanizer microcopy (no string changes yet) */
body.page-contact[data-intake-path="homeowner"] [data-copy-hook] {
  /* reserved */
}

/* Trade lean — keep narrow shell, no HO ornament */
body.page-contact[data-intake-path="trade"] .intake-shell {
  max-width: 40rem;
}
body.page-contact[data-intake-path="trade"] .intake-layout {
  display: block;
}


/* ==========================================================================
   Living Draft APPROVED artwork (2026-09-07) — exact DV-REF-A/C/B JPGs
   Visible art = original JPG. Launch motion = fade + settle + subtle parallax
   (no stroke / mask-path drawing). Surfaces: HO (A), Home (C), About (B).
   ========================================================================== */

:root {
  --ld-art-l1: 0.52;   /* HO — richer, form still dominant */
  --ld-art-l2: 0.22;   /* Home — quieter, preserve negative space */
  --ld-art-l3: 0.28;   /* About supporting */
}

/* --- Neutralize prior sitewide tiled drafting wallpaper --- */
.section--soft::before,
.section--stone::before,
.section--ivory::before,
.page-contact .intake-shell::before,
.page-home .statement-breath--stone::before,
.statement-breath.statement-breath--stone::before,
body.page-contact[data-intake-path="homeowner"] .form-card::after {
  content: none !important;
  background-image: none !important;
  animation: none !important;
}

.section--soft,
.section--stone,
.section--ivory {
  position: relative;
}

/* --- Living Draft sheet chrome --- */
.living-draft {
  position: relative;
  overflow: hidden;
}
.living-draft__sheet {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* Narrow CWV: isolate decorative sheet from font-swap reflow attribution */
  contain: layout style paint;
}

/* I1 narrow CWV — /contact/ desktop CLS: reserve Living Draft sheet geometry */
body.page-contact[data-intake-path="homeowner"] .living-draft.living-draft--l1 {
  contain: layout style;
}
@media (min-width: 900px) {
  body.page-contact[data-intake-path="homeowner"] .living-draft.living-draft--l1 {
    /* Lab sheet ~1261px; reserve above that so font metrics cannot grow the section */
    min-height: max(100vh, 90rem);
  }
  body.page-contact[data-intake-path="homeowner"] .living-draft.living-draft--l1 .intake-shell {
    min-height: 52rem;
  }
}

.living-draft > .container,
.living-draft > .intake-shell,
.living-draft .statement-breath__inner {
  position: relative;
  z-index: 1;
}
.living-draft.is-ld-suppressed .living-draft__sheet {
  display: none;
}

.living-draft__art {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
  transition: opacity 1.15s cubic-bezier(0.22, 0.61, 0.36, 1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* No-JS fallback: the original JPG as a background, only when scripting is unavailable.
   With scripting on, living-draft.js builds a responsive <picture> (WebP srcset) inside .living-draft__art,
   and these rules must not fire at all: before the 2026-09-20 SEO audit fix they were unconditional, so
   every page load fetched the full ~570 KiB JPG from the stylesheet before the script ran — the request
   competed with the hero image for bandwidth and sat inside the LCP window (see PR). Browsers without the
   `scripting` media feature (Chrome < 120, Safari < 17, Firefox < 113) ignore the block: with scripting
   on they get the script-built picture as before; with scripting off they get the parchment sheet only. */
@media (scripting: none) {
  body.page-contact[data-intake-path="homeowner"] .living-draft--l1 .living-draft__art:not(.is-ld-built) {
    background-image: url("/assets/img/living-draft/DV-REF-A-HAND-DRAFTED-PERSPECTIVE.jpg");
    mix-blend-mode: multiply;
    opacity: var(--ld-art-l1);
  }
  .page-home .living-draft--l2 .living-draft__art:not(.is-ld-built) {
    background-image: url("/assets/img/living-draft/DV-REF-C-LIGHT-DRAFTING-STUDIES.jpg");
    mix-blend-mode: multiply;
    opacity: var(--ld-art-l2);
  }
  .page-about .living-draft--l3 .living-draft__art:not(.is-ld-built) {
    background-image: url("/assets/img/living-draft/DV-REF-B-PERSPECTIVE-FRAGMENTS.jpg");
    mix-blend-mode: multiply;
    opacity: var(--ld-art-l3);
  }
}
.living-draft__art.is-ld-built {
  background-image: none !important;
}
/* Script-built responsive artwork: <picture> wrapper fills the sheet; the <img> keeps the styling below */
.living-draft__art .living-draft__picture {
  display: block;
  width: 100%;
  height: 100%;
}
.living-draft__art .living-draft__photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  /* JPG pencil on parchment — multiply keeps graphite thin as in source */
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}
/* Legacy SVG class kept harmless if any residual markup */
.living-draft__art .living-draft__svg {
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: multiply;
}

/* Pending: slightly faded + settle offset applied by JS; opacity fade via CSS */
.living-draft.is-ld-motion:not(.is-ld-revealed) .living-draft__art {
  opacity: 0.36;
}
.living-draft.is-ld-revealed .living-draft__art,
.living-draft.is-ld-static .living-draft__art {
  opacity: 1;
}

/* ========== L1 — Homeowner intake · DV-REF-A ========== */
body.page-contact.page-inner[data-intake-path="homeowner"] .living-draft.living-draft--l1.section--soft,
body.page-contact[data-intake-path="homeowner"] .living-draft.living-draft--l1.section--soft {
  background: transparent !important; /* v2.1: the drawing sits on the black ground (was cream paper) */
}
body.page-contact[data-intake-path="homeowner"] .living-draft--l1 .living-draft__art .living-draft__photo,
body.page-contact[data-intake-path="homeowner"] .living-draft--l1 .living-draft__art .living-draft__svg {
  opacity: var(--ld-art-l1);
}

/* Form card — CLEANER: drafting stays on outer shell, not dense behind fields */
body.page-contact[data-intake-path="homeowner"] .form-card {
  background: rgba(232, 233, 230, 0.94);
  border-color: rgba(15, 15, 15, 0.22);
  box-shadow:
    0 1px 0 rgba(232, 233, 230, 0.55) inset,
    0 14px 36px rgba(15, 15, 15, 0.08),
    0 2px 6px rgba(15, 15, 15, 0.04);
  position: relative;
  overflow: hidden;
}
body.page-contact[data-intake-path="homeowner"] .form-card::after {
  content: none !important;
  display: none !important;
}
body.page-contact[data-intake-path="homeowner"] .field input,
body.page-contact[data-intake-path="homeowner"] .field select,
body.page-contact[data-intake-path="homeowner"] .field textarea {
  background: rgba(232, 233, 230, 0.96);
}
body.page-contact[data-intake-path="homeowner"] .field input:focus,
body.page-contact[data-intake-path="homeowner"] .field select:focus,
body.page-contact[data-intake-path="homeowner"] .field textarea:focus {
  background: #E8E9E6;
}

body.page-contact[data-intake-path="homeowner"] .field-help {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 40rem;
}
body.page-contact[data-intake-path="homeowner"] .field-branch {
  margin: 0.35rem 0 1.1rem;
  padding: 0.85rem 0.95rem 0.35rem;
  border-left: 3px solid var(--bronze);
  background: rgba(232, 233, 230, 0.45);
  border-radius: 0 var(--radius) var(--radius) 0;
}
body.page-contact[data-intake-path="homeowner"] .choice-group--wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
body.page-contact[data-intake-path="homeowner"] .wizard-intro {
  margin-bottom: 1.15rem;
}

/* Trade — lean; no Living Draft art */
body.page-contact[data-intake-path="trade"] .section.section--soft {
  background: transparent; /* v2.1 black ground (was parchment) */
}
body.page-contact[data-intake-path="trade"] .living-draft__sheet {
  display: none !important;
}
body.page-contact[data-intake-path="trade"] .form-card {
  background: var(--parchment);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem;
  box-shadow: none;
}
body.page-contact[data-intake-path="trade"] .field-help {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ========== L2 — Homepage statement-breath--stone · DV-REF-C ========== */
.page-home .living-draft--l2 .living-draft__art .living-draft__photo,
.page-home .living-draft--l2 .living-draft__art .living-draft__svg {
  opacity: var(--ld-art-l2);
}

/* ========== L3 — About judgment section--stone · DV-REF-B (supporting once) ========== */
.page-about .living-draft--l3.section--stone {
  background-color: transparent; /* v2.1 black ground (was cream) */
}
.page-about .living-draft--l3 .living-draft__art .living-draft__photo,
.page-about .living-draft--l3 .living-draft__art .living-draft__svg {
  opacity: var(--ld-art-l3);
}

/* Reduced motion: show finished static original, no parallax / settle */
@media (prefers-reduced-motion: reduce) {
  .living-draft__art {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .living-draft.is-ld-motion:not(.is-ld-revealed) .living-draft__art {
    opacity: 1 !important;
  }
}

/* Living Draft grounds, v2.1: no aged-paper texture. The home page's statement band is the stone field (the drawing
   stays pencil-on-stone there); the Contact (L1) and About (L3) drawings sit on the black ground as light lines (kit). */
:root {
  --living-draft-cream: #E8E9E6;
}
.living-draft.living-draft--l1.section--soft,
.living-draft.living-draft--l2.statement-breath--stone,
.living-draft.living-draft--l3.section--stone {
  background-image: none;
}
.living-draft.living-draft--l1.section--soft {
  background-color: transparent !important;
}
.page-home .living-draft.living-draft--l2.statement-breath--stone {
  background-color: var(--bone);
}
.page-about .living-draft.living-draft--l3.section--stone {
  background-color: transparent;
}

/* Soften remaining bright ivory / white light surfaces sitewide (light sections) */
.card,
.proof-card,
.path-btn:not(#path-trade),
.intake-aside__figure {
  background: var(--parchment-soft);
}

/* FAQ page (t1482u) — native <details> accordion + section jump links */
.page-faq .faq-jump ul {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.page-faq .faq-jump a {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(232, 233, 230, 0.28);
  border-radius: 999px;
  color: var(--ivory) !important;
  text-decoration: none !important;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.page-faq .faq-jump a:focus-visible {
  border-color: var(--bronze);
  color: var(--white) !important;
}
@media (hover: hover) { .page-faq .faq-jump a:hover {
  border-color: var(--bronze);
  color: var(--white) !important;
} }
.faq-group + .faq-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.faq-group h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.faq-group[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.faq-item { border-top: 1px solid var(--border-strong); }
.faq-group .faq-item:last-of-type { border-bottom: 1px solid var(--border-strong); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  transition: color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--bronze);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) { .faq-item summary:hover { color: var(--bronze-deep); } }
.faq-item summary:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 4px;
}
.faq-answer { padding: 0 2.5rem 1.25rem 0; max-width: var(--measure); }
.faq-answer p,
.faq-answer ul,
.faq-answer ol { margin-bottom: 0.75em; }
.faq-answer > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

/* ==========================================================================
   Ad landing pages (decision A, 2026-10-19) — the Contact wizard's homeowner
   step 1 on /kitchens/ and /architectural-millwork/ (.inquiry-start), and the
   plain-language line under the millwork H1 (.hero-split__plain).
   Field look follows the homeowner wizard on /contact/.
   ========================================================================== */
.hero-split__plain {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(232, 233, 230, 0.9);
  margin: 0 0 0.85rem;
  max-width: 36ch;
}
.inquiry-start__shell {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 62rem;
}
@media (min-width: 900px) {
  .inquiry-start__shell {
    grid-template-columns: minmax(14rem, 0.8fr) 1.2fr;
    align-items: start;
  }
}
.inquiry-start__intro h2 { margin-top: 0; }
.inquiry-start .form-card {
  background: var(--ivory);
  border-color: var(--border-strong);
}
.inquiry-start .wizard-progress { margin-bottom: 1.25rem; }
.inquiry-start .wizard-progress .step { min-width: 0; }
.inquiry-start .wizard-progress .step.is-active {
  color: var(--black);
  border-bottom-color: var(--bronze);
}
.inquiry-start .field-help {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 40rem;
}
.inquiry-start .field select,
.inquiry-start .field textarea {
  background: var(--ivory-soft);
  border-color: var(--border-strong);
}
.inquiry-start .field select:focus,
.inquiry-start .field textarea:focus {
  background: #E8E9E6;
}
.inquiry-start .wizard-actions { margin-top: 1rem; }

/* Home: "How a project works" */
.how-it-works__list {
  margin: 0 0 1.5rem;
  padding-left: 1.4rem;
  max-width: 44rem;
  color: rgba(232, 233, 230, 0.85);
  line-height: 1.6;
}
.how-it-works__list li { margin-bottom: 0.85rem; padding-left: 0.3rem; }
.how-it-works__list strong { color: var(--white); font-weight: 500; }
.how-it-works__link { margin: 0; }

/* --- Learning pages (how-we-build-cabinets, from-visit-to-install, how-to-measure-kitchen-cabinets) ---
   Built only from existing tokens: breadcrumb and byline in the hero, a scrolling comparison table, SVG diagrams. */
.breadcrumb { font-size: 0.875rem; margin: 0 0 1rem; color: rgba(232, 233, 230, 0.82); }
.breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
@media (hover: hover) { .breadcrumb a:hover { color: var(--bronze); } }
.byline { margin: 1rem 0 0; font-size: 0.875rem; color: rgba(232, 233, 230, 0.7); }
.learn h2 { margin-top: clamp(2rem, 4vw, 3rem); scroll-margin-top: calc(var(--header-h) + 1rem); }
.learn > .container > h2:first-child { margin-top: 0; }
.learn ul, .learn ol { margin-bottom: 1.25em; }
.learn li { margin-bottom: 0.4em; }
.learn .faq-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.table-wrap { overflow-x: auto; margin: 0 0 1.25em; -webkit-overflow-scrolling: touch; }
.compare { border-collapse: collapse; width: 100%; min-width: 44rem; font-size: 0.9375rem; line-height: 1.5; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 0.7rem 0.8rem; border-top: 1px solid var(--border-strong); }
.compare thead th { border-top: 0; border-bottom: 2px solid var(--bronze); color: var(--bronze-text); font-weight: 600; }
.compare tbody th { font-weight: 600; width: 8.5rem; }
.diagram { margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--border-strong); background: var(--parchment-soft); }
.diagram svg { display: block; width: 100%; max-width: 26rem; height: auto; margin: 0 auto; }
.diagram svg text { font-family: var(--font-body); font-size: 12px; fill: var(--text); }
.diagram svg .dg-small { font-size: 10px; }
.diagram .dg-run { fill: var(--white); stroke: var(--bronze-deep); stroke-width: 1.5; }
.diagram .dg-corner { fill: var(--bronze-soft); stroke: var(--bronze-deep); stroke-width: 1.5; }
.diagram .dg-skip { fill: url(#dgE-h); stroke: var(--text-muted); stroke-width: 1; }
.diagram .dg-hatch { stroke: var(--text-muted); stroke-width: 1; }
.diagram .dg-dim { stroke: var(--text-muted); stroke-width: 1.5; }
.diagram figcaption { margin-top: 0.75rem; font-size: 0.875rem; color: var(--text-muted); }

/* Batch 1 facts 2026-10-27: hero proof row on the home page, and the per-path proof line on /contact/ */
.hero-proof {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(232, 233, 230, 0.78);
}
.hero-proof li {
  margin: 0;
  position: relative;
  padding-left: 0.9rem;
}
.hero-proof li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.4rem;
  height: 1px;
  background: var(--bronze);
}
.intake-proof {
  display: none;
  margin: 0 0 2rem;
  max-width: 60ch;
}
body.page-contact[data-intake-path="homeowner"] .intake-proof--homeowner,
body.page-contact[data-intake-path="trade"] .intake-proof--trade {
  display: block;
}


/* Areas we serve hub: one card per town (name + one line + link). The whole card is the tap target. */
.area-grid {
  list-style: none;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
.area-card {
  position: relative;
  margin: 0;
  padding: 1.1rem 1.25rem 1.2rem;
  background: var(--parchment-soft);
  border: 1px solid var(--border);
  min-height: 44px;
}
.area-card h3 { margin: 0 0 0.3em; }
.area-card h3 a { color: inherit; text-decoration: none; }
.area-card h3 a::after { content: ""; position: absolute; inset: 0; }
.area-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.area-card:focus-within { border-color: var(--bronze-deep); }
@media (hover: hover) { .area-card:hover { border-color: var(--bronze-deep); } }
.area-card h3 a:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 4px; }
@media (min-width: 640px) {
  .area-grid { grid-template-columns: repeat(2, 1fr); }
}
.learn .area-grid li { margin-bottom: 0; }

/* Work tiles that link to a project page: the caption link stretches over the whole tile. */
.work-item figcaption a { color: inherit; text-decoration: none; }
.work-item figcaption a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.work-item:focus-within { outline: 2px solid var(--bronze); outline-offset: -2px; }

/* ========== PHONE LINKS LOOK TAPPABLE (2026-11-02) ==========
   Every phone number reads as an action, not as decoration: body font (Outfit), full opacity, underlined
   with the same thickness and offset as the in-text links (auto / 0.2em), and at least 44px tall to tap on a
   phone (padding, not a bigger font). Colours are existing tokens: ivory on the dark footer (the same cream as
   the header number), hover bronze as in the header. The header, closing-band and wizard numbers are set in
   their own rules above (.nav-phone, .phone-xl--on-dark, .prefer-call a). No words, markup or data-cta change. */
.site-footer a[href^="tel:"] {
  display: inline-block;
  padding-block: 0.5rem; /* 28.9px line + 16px = 44.9px */
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ivory);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (hover: hover) { .site-footer a[href^="tel:"]:hover { color: var(--bronze); } }
/* Phone numbers that already look like links (About, Privacy, App terms): same 44px hit area, look untouched. */
main .nap p a[href^="tel:"],
.privacy-contact a[href^="tel:"] {
  display: inline-block;
  padding-block: 0.5rem;
}

/* ==========================================================================
   Inquiry form restyle (2026-11-03) — /contact/ (both paths) and the ad pages' step 1 (/kitchens/,
   /architectural-millwork/).
   Same steps, fields and words; the locked palette, fonts and corner radii only (tokens above, plus the locked warm
   ivory #E8E9E6 as the field fill). One progress indicator (a segmented bar under "Step N of M"), sentence-case labels
   at 16px, fields, choices and buttons at least 48px tall with the site's --radius corners, a small press response
   (off under reduced motion), a styled file button that also takes a dropped file, a calmer drawing behind the form,
   and a shorter title band on phones.
   Rules for /contact/ only sit under body.page-contact[data-intake-path]; the rules the ad pages' step 1 shares read
   :is(body.page-contact[data-intake-path], .inquiry-start), and its own few rules are at the end of this block.
   ========================================================================== */
body.page-contact,
.inquiry-start {
  --form-ink: var(--ink);                  /* #1A1A1A on the stone card */
  --form-help: var(--ink-soft);            /* #53565A, 6.1:1 on the card */
  --form-card: var(--bone);                /* v2.1 stone card, opaque */
  --form-field: #FFFFFF;                   /* v2.1 field fill (the mockups' white field) */
  --form-line: #7C7F82;                    /* v2.1 field edge, 4.1:1 on the white fill */
  --form-accent: var(--accent);            /* #2E5BD6: bar, focus ring, step line, 5.1:1 on the card */
  --form-press: cubic-bezier(0.22, 1, 0.36, 1);
  --ld-art-l1: 0.26;                       /* the drawing behind the form, was 0.52 */
}

/* --- Title band and the space above the form, phones: the first question comes sooner, nothing removed --- */
@media (max-width: 599px) {
  body.page-contact[data-intake-path] .page-hero {
    padding: 1.75rem 0 1.5rem;
  }
  body.page-contact[data-intake-path] .page-hero .eyebrow { margin-bottom: 0.5rem; }
  body.page-contact[data-intake-path] .page-hero h1 {
    font-size: 2.25rem;
    margin-bottom: 0.35em;
  }
  body.page-contact[data-intake-path] .page-hero .bronze-rule { margin: 0.6rem 0 0.75rem; }
  body.page-contact[data-intake-path] .page-hero .lede { font-size: 1rem; line-height: 1.55; }
  body.page-contact[data-intake-path] .living-draft--l1.section,
  body.page-contact[data-intake-path] .section.section--soft {
    padding-top: 1.25rem;
    padding-bottom: 3rem;
  }
  body.page-contact[data-intake-path] .intake-proof { margin-bottom: 1.25rem; }
}

/* Wider screens: less empty paper between the title band and the path cards (was up to 7.5rem). */
@media (min-width: 600px) {
  body.page-contact[data-intake-path] .living-draft--l1.section,
  body.page-contact[data-intake-path] .section.section--soft {
    padding-top: clamp(2rem, 4vw, 3rem);
  }
}

/* --- Path cards: side by side on every width, the site radius, compact on phones --- */
body.page-contact[data-intake-path] .path-picker {
  grid-template-columns: 1.1fr 0.9fr; /* the two paths stay unequal (VISUAL-DIRECTION), now on phones too */
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}
body.page-contact[data-intake-path] .path-btn {
  border-radius: var(--radius);
  min-height: 3rem;
  padding: 1rem 1.1rem;
  box-shadow: none;
  touch-action: manipulation;
  transition: transform 140ms var(--form-press), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
body.page-contact[data-intake-path="homeowner"] .path-btn#path-homeowner.is-active {
  box-shadow: none;
}
@media (max-width: 599px) {
  body.page-contact[data-intake-path] .path-btn { padding: 0.8rem 0.9rem; }
  body.page-contact[data-intake-path] .path-btn strong { font-size: 1.2rem; margin-bottom: 0.15rem; }
  body.page-contact[data-intake-path] .path-btn span { font-size: 0.875rem; line-height: 1.35; display: block; }
}

/* --- The card: opaque, no resting shadow, its corners as before; the drawing stays around it, never behind the fields --- */
:is(body.page-contact[data-intake-path], .inquiry-start) .form-card {
  background: var(--form-card);
  border: 1px solid rgba(15, 15, 15, 0.22);
  box-shadow: none;
  padding: 1.5rem 1.25rem 1.5rem;
}
@media (min-width: 560px) {
  :is(body.page-contact[data-intake-path], .inquiry-start) .form-card { padding: 2rem 2rem 1.85rem; }
}
body.page-contact[data-intake-path] .wizard-panel.is-active.form-card { background: var(--form-card); }

/* --- One progress indicator: "Step N of M" with a segmented bar under it --- */
:is(body.page-contact[data-intake-path], .inquiry-start) .wizard-step-head { margin: 0 0 1.5rem; }
:is(body.page-contact[data-intake-path], .inquiry-start) .wizard-step-count {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--form-accent);
}
body.page-contact[data-intake-path] .wizard-bar {
  display: flex;
  gap: 4px;
  height: 4px;
}
body.page-contact[data-intake-path] .wizard-bar__seg {
  flex: 1;
  background: rgba(15, 15, 15, 0.2);
}
body.page-contact[data-intake-path] .wizard-bar__seg.is-filled { background: var(--form-accent); }
body.page-contact[data-intake-path] .wizard-intro { margin-bottom: 1.5rem; }
body.page-contact[data-intake-path] .wizard-intro .lede { color: var(--form-ink); max-width: none; }

/* --- Labels: sentence case as written, 16px, with the help line under them --- */
:is(body.page-contact[data-intake-path], .inquiry-start) .field { margin-bottom: 1.5rem; }
:is(body.page-contact[data-intake-path], .inquiry-start) .field label,
:is(body.page-contact[data-intake-path], .inquiry-start) .field .label-like {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--form-ink);
  margin-bottom: 0.4rem;
}
:is(body.page-contact[data-intake-path], .inquiry-start) .field label .hint {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--form-help);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0;      /* the space before it in the label already separates it; a margin indented it when it wrapped */
  white-space: nowrap; /* "(required)" never breaks inside */
}
:is(body.page-contact[data-intake-path], .inquiry-start) .field-help {
  margin: 0 0 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--form-help);
  max-width: 40rem;
}
body.page-contact[data-intake-path] .field-branch {
  margin: 0.25rem 0 1.5rem;
  padding: 1rem 1rem 0.25rem;
  border-left: 3px solid var(--bronze);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(232, 233, 230, 0.55);
}

/* --- Fields: 48px or taller, light fill, a visible edge, a clear focus ring --- */
:is(body.page-contact[data-intake-path], .inquiry-start) .field input,
:is(body.page-contact[data-intake-path], .inquiry-start) .field select,
:is(body.page-contact[data-intake-path], .inquiry-start) .field textarea {
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--form-ink);
  background: var(--form-field);
  border: 1px solid var(--form-line);
  border-radius: var(--radius);
  box-shadow: none;
}
:is(body.page-contact[data-intake-path], .inquiry-start) .field textarea { min-height: 7.5rem; line-height: 1.5; }
:is(body.page-contact[data-intake-path], .inquiry-start) .field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%231a1a1a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 9px;
  text-overflow: ellipsis;
}
:is(body.page-contact[data-intake-path], .inquiry-start) .field input::placeholder,
:is(body.page-contact[data-intake-path], .inquiry-start) .field textarea::placeholder {
  color: rgba(83, 86, 90, 0.88); /* --text-muted at 88%: lighter than the help text, 4.8:1 on the field fill */
  opacity: 1;
}
:is(body.page-contact[data-intake-path], .inquiry-start) .field input:focus,
:is(body.page-contact[data-intake-path], .inquiry-start) .field select:focus,
:is(body.page-contact[data-intake-path], .inquiry-start) .field textarea:focus {
  outline: 2px solid var(--form-accent);
  outline-offset: 1px;
  border-color: var(--form-accent);
  background-color: var(--form-field);
  box-shadow: none;
}

/* --- Choices (checkbox and radio groups): each one a 48px tappable box --- */
body.page-contact[data-intake-path] .choice-group,
body.page-contact[data-intake-path] .choice-group--wrap { gap: 0.5rem; }
body.page-contact[data-intake-path] .choice-group label {
  min-height: 3rem;
  margin: 0;
  padding: 0.6rem 1rem 0.6rem 0.85rem;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--form-ink);
  background: var(--form-field);
  border: 1px solid var(--form-line);
  border-radius: var(--radius);
  touch-action: manipulation;
}
body.page-contact[data-intake-path] .choice-group input {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--form-accent);
}
body.page-contact[data-intake-path] .choice-group label:has(input:checked) {
  border-color: var(--form-accent);
  background: rgba(163, 165, 166, 0.18);
  box-shadow: inset 0 0 0 1px var(--form-accent);
}
body.page-contact[data-intake-path] .choice-group label:has(input:focus-visible) {
  outline: 2px solid var(--form-accent);
  outline-offset: 2px;
}

/* --- Files: the title is the button; the chosen names are listed under it --- */
body.page-contact[data-intake-path] .upload-zone {
  position: relative;
  text-align: left;
  padding: 1.25rem;
  background: var(--form-field);
  border: 1.5px dashed rgba(15, 15, 15, 0.55);
  border-radius: var(--radius);
}
/* A file dragged over the box (review round 1: the box takes a drop again). */
body.page-contact[data-intake-path] .upload-zone.is-dragover {
  border-style: solid;
  border-color: var(--form-accent);
  background: rgba(163, 165, 166, 0.18);
}
body.page-contact[data-intake-path] .upload-zone p { margin: 0.75rem 0 0; }
body.page-contact[data-intake-path] .field input.upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
body.page-contact[data-intake-path] .field label.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  margin: 0;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  color: var(--black);
  background: transparent;
  border: 1px solid var(--black);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
  transition: transform 140ms var(--form-press), background 0.2s var(--ease), color 0.2s var(--ease);
}
@media (hover: hover) { body.page-contact[data-intake-path] .field label.upload-btn:hover {
  background: var(--black);
  color: #E8E9E6;
} }
body.page-contact[data-intake-path] .field input.upload-input:focus-visible + .upload-btn {
  outline: 2px solid var(--form-accent);
  outline-offset: 2px;
}
body.page-contact[data-intake-path] .upload-note {
  color: var(--form-ink);
  font-size: 0.9375rem;
  font-weight: 500;
}
body.page-contact[data-intake-path] .upload-list {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
}
body.page-contact[data-intake-path] .upload-list:empty { display: none; }
body.page-contact[data-intake-path] .upload-list li {
  padding: 0.5rem 0;
  border-top: 1px solid rgba(15, 15, 15, 0.2);
  overflow-wrap: anywhere;
}
body.page-contact[data-intake-path] .upload-list__name { font-weight: 500; }

/* --- Buttons: one style, the site radius, sentence case, 48px, Continue and Send fill the row on phones --- */
:is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(15, 15, 15, 0.22);
  gap: 0.75rem;
  flex-wrap: nowrap;
  align-items: stretch;
}
:is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions .btn,
body.page-contact[data-intake-path] .prefer-call a,
:is(body.page-contact[data-intake-path], .inquiry-start) .intake-form .btn {
  touch-action: manipulation;
}
:is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions .btn {
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: var(--radius);
  transition: transform 140ms var(--form-press), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
:is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions .btn--primary { min-width: 10rem; }
:is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions .btn:disabled { opacity: 0.6; cursor: progress; }
@media (max-width: 559px) {
  :is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions .btn--primary { flex: 1 1 auto; min-width: 0; }
  :is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions > span:empty { display: none; }
}
@media (min-width: 560px) {
  :is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions { justify-content: space-between; }
}
/* Press: a small give under the finger (Emil Kowalski's scale(0.97), 140ms), never under reduced motion. */
:is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions .btn:active:not(:disabled),
body.page-contact[data-intake-path] .field label.upload-btn:active,
body.page-contact[data-intake-path] .path-btn:active {
  transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  :is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions .btn:active:not(:disabled),
  body.page-contact[data-intake-path] .field label.upload-btn:active,
  body.page-contact[data-intake-path] .path-btn:active {
    transform: none;
  }
}
body.page-contact[data-intake-path] .intake-consent { margin-top: 1rem; }

/* --- Prefer-call box, the security check and messages: the site radius, same tones --- */
body.page-contact[data-intake-path] .prefer-call {
  background: var(--form-field);
  border: 1px solid rgba(15, 15, 15, 0.22);
  border-left: 3px solid var(--bronze);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}
body.page-contact[data-intake-path] .turnstile-slot,
body.page-contact[data-intake-path] .form-status { border-radius: var(--radius); }
body.page-contact[data-intake-path] .form-status.is-info { background: var(--form-field); }

/* --- Welcome back (browser auto-save): one quiet line above the card, with Start over --- */
body.page-contact[data-intake-path] .form-resume {
  margin: 0 0 1rem;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 3px solid var(--bronze);
}
body.page-contact[data-intake-path] .form-resume[hidden] { display: none; }
body.page-contact[data-intake-path] .form-resume p { margin: 0; max-width: none; }
body.page-contact[data-intake-path] .form-resume__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--form-ink);
}
body.page-contact[data-intake-path] .form-resume__reset {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 500;
  color: var(--form-accent);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  vertical-align: middle;
  touch-action: manipulation;
}
@media (hover: hover) { body.page-contact[data-intake-path] .form-resume__reset:hover { color: var(--black); } }
body.page-contact[data-intake-path] .form-resume__reset:focus-visible {
  outline: 2px solid var(--form-accent);
  outline-offset: 2px;
}
body.page-contact[data-intake-path] .form-resume__photos {
  font-size: 0.9375rem;
  color: var(--form-help);
  padding-bottom: 0.5rem;
}
/* Two fields side by side (city and ZIP, first and last name): each field already keeps its own space below. */
body.page-contact[data-intake-path] .field-row { row-gap: 0; column-gap: 1rem; }
/* The two phone numbers in the title band never break inside the number. */
body.page-contact[data-intake-path] .page-hero .lede a[href^="tel:"] { white-space: nowrap; }
/* The two phone links in the "Prefer to talk first?" box: 48px tall to tap, like every other control in the form. */
body.page-contact[data-intake-path] .prefer-call a { padding-block: 0.6rem; }
/* Phones narrower than 380px: the security check widget is a fixed 300px wide, so the form's section uses a 16px side
   gutter and the card a 12px inner gutter there, which leaves it room at 360px (inner width 302px). */
@media (max-width: 379px) {
  body.page-contact[data-intake-path] .living-draft > .intake-shell.container { width: calc(100% - 2rem); }
  :is(body.page-contact[data-intake-path], .inquiry-start) .form-card { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* --- The ad pages' step 1 (/kitchens/, /architectural-millwork/): the same look as the wizard above ---
   The shared rules above already cover the card, the labels, the fields and the button (:is(... .inquiry-start)).
   Here: the four .step names (kept in the markup; the step-1 script counts them) drawn as the same segmented bar under
   "Step 1 of 4", their text kept for screen readers but moved out of sight, and the card ground and button press. */
.inquiry-start .wizard-step-head .wizard-progress {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  height: 4px;
  margin: 0;
  min-height: 0;
}
.inquiry-start .wizard-step-head .wizard-progress .step {
  flex: 1;
  min-width: 0;
  height: 4px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 110%;
  background: rgba(15, 15, 15, 0.2);
}
.inquiry-start .wizard-step-head .wizard-progress .step.is-active,
.inquiry-start .wizard-step-head .wizard-progress .step.is-done {
  background: var(--form-accent);
}
.inquiry-start .form-card { background: var(--form-card); border-color: rgba(15, 15, 15, 0.22); }

/* ==========================================================================
   THE OBJECT v2.1 KIT (redesign batch 1, step 1, 2026-11-04)
   The accepted look on every page, without changing any page's words or layout structure: black ground with the
   blueprint grid, stone type, blueprint blue only for the action, the phone and links; Archivo; the mockups' header,
   menu, buttons, question rows, captions and footer. Source: the accepted Home and Kitchens mockups (round 10).
   Everything here restyles existing markup; it comes last, so it wins over the older layers above.
   ========================================================================== */

/* ---------- ground, type, links ---------- */
html {
  background: var(--field);
  color-scheme: dark; /* scrollbars and any browser-drawn control follow the black ground; the stone surfaces set light */
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
}
body,
body.page-home,
body.page-inner,
body.page-404 {
  background: transparent;
  color: var(--bone);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  font-variation-settings: "wdth" 92;
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
}
/* the blueprint field from the home page, behind everything (the mockups' .field; no markup needed) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(232, 233, 230, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 233, 230, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(232, 233, 230, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 233, 230, 0.024) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-t); outline-offset: 3px; }

h1, h2, h3, h4,
.page-inner h1, .page-inner h2, .page-inner h3, .page-inner h4 {
  font-family: var(--font);
  font-weight: 850;
  font-variation-settings: "wdth" 84;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-wrap: balance;
  hyphens: none;
}
h1 { font-size: min(clamp(2.125rem, 9.4vw, 2.75rem), 11vw); line-height: 0.98; }
h2 { font-size: min(clamp(1.75rem, 7.6vw, 2.125rem), 9.5vw); line-height: 1.02; } /* the vw caps only bite at large browser text, where a long word ("Entertainment") would otherwise run off a phone */
h3 { font-size: 1.3125rem; line-height: 1.2; font-weight: 750; font-variation-settings: "wdth" 92; letter-spacing: 0; }
h4 { font-size: 1.0625rem; line-height: 1.3; font-weight: 700; font-variation-settings: "wdth" 92; letter-spacing: 0; }
/* from 600 px, section headings fill their lines instead of balancing them (measured: balanced two-line headings broke
   at "Arlington-Kenilworth", "one-acre", "built-ins" and "reach-ins" on 34 width and page pairs; filled lines on 1) */
@media (min-width: 600px) { h2, .page-inner h2 { text-wrap: pretty; } }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
.muted { color: var(--soft); }
.small { font-size: 0.9375rem; line-height: 1.5; }
.lede { font-size: 1.0625rem; line-height: 1.55; color: var(--bone); max-width: 46ch; }

a { color: var(--accent-t); text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
@media (hover: hover) { a:hover { color: var(--bone); } }

/* small labels above headings: the words stay, set in sentence case at a readable size, no tracking */
.eyebrow,
.hero-split__eyebrow,
.page-hero .eyebrow,
.page-hero--media .eyebrow,
.section--dark .eyebrow,
.section--graphite .eyebrow,
.section--charcoal .eyebrow,
.gc-break .eyebrow,
.work-meta,
.panel h3 {
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variation-settings: "wdth" 86;
  letter-spacing: 0;
  text-transform: none;
  color: var(--soft);
}
/* decorative thin rules and frames: none in v2.1 (space and a step in tone separate things instead) */
.bronze-rule,
.bronze-rule-inline,
.hero-split__frame { display: none; }
.statement-breath__mark { filter: grayscale(1) brightness(0.55); } /* the bronze logo mark, in the stone field's ink tones */

/* skip link (the mockups' .skip) */
.skip-link {
  left: var(--pad);
  top: -5rem;
  background: var(--bone);
  color: var(--field);
  padding: 0.625rem 0.875rem;
  border-radius: 10px;
  font-weight: 700;
}
.skip-link:focus,
.skip-link:focus-visible { top: 0.5rem; color: var(--field); outline: 2px solid var(--accent-t); outline-offset: 2px; }

/* staging banner (staging builds only; production strips the element) */
.staging-banner {
  background: var(--deep);
  color: var(--soft);
  font-size: 0.8125rem;
  letter-spacing: 0;
  font-variation-settings: "wdth" 86;
}
.staging-banner strong { color: var(--bone); font-weight: 700; }

/* ---------- page frame: the mockups' gutters (16 / 32 / 48 px), the site's measure ---------- */
.container { width: min(100% - 2 * var(--pad), var(--max)); }
.container--narrow { width: min(100% - 2 * var(--pad), 46rem); }
@media (min-width: 600px) and (max-width: 899px) { :root { --pad: 2rem; } }
@media (min-width: 900px) {
  :root { --pad: 3rem; }
  body, body.page-home, body.page-inner, body.page-404 { font-size: 1.125rem; }
  h1 { font-size: clamp(3rem, 4.4vw, 4.5rem); }
  h2 { font-size: clamp(2.25rem, 3vw, 3rem); }
  h3 { font-size: 1.5rem; }
  .lede { font-size: 1.1875rem; }
}

/* ---------- header: logo, the full number, Menu (all widths) ---------- */
.site-header,
.page-home .site-header--fixed-luxe,
.page-inner .site-header--fixed-luxe,
.page-home.has-scrolled .site-header--fixed-luxe,
.page-inner.has-scrolled .site-header--fixed-luxe,
.page-home .site-header--fixed-luxe.is-solid,
.page-inner .site-header--fixed-luxe.is-solid {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 100;
  background: var(--field);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  transition: none;
}
.page-home #main,
.page-inner #main { padding-top: 0; }
.site-header .header-inner {
  min-height: var(--header-h);
  gap: 0.5rem;
  justify-content: flex-start;
}
.site-header .logo-link { min-height: 44px; margin-right: auto; }
.site-header .logo-link img { height: 30px; width: auto; }
.site-header .nav-phone-mobile,
.site-header .nav-phone {
  display: none;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 0.25rem;
  color: var(--bone) !important;
  font-size: 0.875rem;
  font-weight: 600;
  font-variation-settings: "wdth" 80;
  letter-spacing: 0;
  text-decoration: none !important;
  white-space: nowrap;
}
.site-header .nav-phone-mobile { display: inline-flex; }
.site-header .nav-phone__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .site-header .nav-phone-mobile:hover,
  .site-header .nav-phone:hover { color: var(--accent-t) !important; }
}
@media (min-width: 1040px) {
  .site-header .nav-phone-mobile { display: none !important; }
  .site-header .nav-phone { display: inline-flex; margin-right: 0.5rem; padding-block: 0; }
}
/* the Menu button (site.js toggles aria-expanded and .is-open on the nav; one of the two words shows) */
.site-header .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  height: auto;
  min-height: 44px;
  min-width: min(4rem, 76px);
  padding: 0 min(1rem, 18px); /* at larger browser text the button's padding stops growing, so the number keeps its room */
  border-radius: 999px;
  border: 1px solid rgba(232, 233, 230, 0.38);
  background: transparent;
  color: var(--bone);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 650;
  font-variation-settings: "wdth" 86;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.14s var(--out), border-color 0.18s ease;
}
.site-header .nav-toggle span {
  display: inline;
  width: auto;
  height: auto;
  background: none;
  position: static;
}
.site-header .nav-toggle span::before,
.site-header .nav-toggle span::after { content: none; }
.site-header .nav-toggle .nav-toggle__close { display: none; }
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline; }
.site-header .nav-toggle[aria-expanded="true"] { border-color: var(--accent-t); box-shadow: inset 0 0 0 1px var(--accent-t); }
.site-header .nav-toggle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .site-header .nav-toggle:hover { border-color: rgba(232, 233, 230, 0.75); }
}
/* Larger browser text: the number steps aside only when it would push Menu off a narrow screen */
@media (max-width: 22rem) {
  .site-header .header-inner { gap: 0.375rem; }
  .site-header .nav-phone-mobile { font-size: 0.8125rem; padding-inline: 0.125rem; }
}
/* hidden only where the row cannot hold it: rem follows the visitor's text size, px the screen (both measured on the
   v2.1 row: at 24px text the number shows from 360px phones up, at 32px text from 390px) */
@media (max-width: 14.95rem) and (max-width: 389px), (max-width: 12.1rem) { .site-header .nav-phone-mobile { display: none !important; } }

/* the menu: a plain sheet under the header bar (the header's own logo, number and Close stay on top of it) */
.site-header .site-nav,
.site-header .site-nav.is-open {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: grid;
  align-content: start;
  gap: 1rem;
  margin: 0;
  padding: calc(var(--header-h) + 0.5rem) var(--pad) 0;
  background: var(--field);
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-header .site-nav {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.16s ease-in, transform 0.16s ease-in, visibility 0s linear 0.16s;
}
.site-header .site-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.24s var(--out), transform 0.24s var(--out), visibility 0s;
}
.site-header .site-nav ul {
  display: grid;
  gap: 0;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header .site-nav .nav-home { display: list-item; }
.site-header .site-nav ul a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  position: relative;
  padding: 0;
  background: none;
  color: var(--bone);
  text-decoration: none;
  font-size: 1.5rem;
  line-height: 1.05;
  font-weight: 800;
  font-variation-settings: "wdth" 84;
  letter-spacing: -0.005em;
}
@media (hover: hover) { .site-header .site-nav ul a:hover { background: none; color: var(--accent-t); } }
.site-header .site-nav ul a[aria-current="page"] { background: none; color: var(--bone); }
.site-header .site-nav ul a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 1.1em;
  height: 4px;
  border-radius: 2px;
  background: var(--accent-t);
}
.site-header .site-nav__visit p { max-width: 30ch; margin: 0; color: var(--soft); font-size: 1rem; line-height: 1.4; }
.site-header .site-nav__visit .btn { margin-top: 0.625rem; }
/* phones: the visit button stays on screen at the foot of the sheet; on a short screen the links scroll under it */
@media (max-width: 899px) {
  .site-header .site-nav__visit {
    position: sticky;
    bottom: 0;
    padding: 0.75rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--field);
    box-shadow: 0 -1.25rem 1.25rem -0.25rem var(--field);
  }
  /* a link reached with Tab stops above that block and its fade, never under it (WCAG 2.4.11): the block is 8.4rem
     tall with a two-line note, the fade 1rem more */
  .site-header .site-nav { scroll-padding-bottom: calc(10rem + env(safe-area-inset-bottom, 0px)); }
}
/* the header row is a solid bar across the full width, as the mockups' header: menu links scrolled up go under it
   instead of showing through beside the logo, and a link reached with Shift+Tab stops below it. Closed, it is the
   same black as the header behind it. (border-image paints the bar edge to edge without a stacking context, so the
   menu sheet stays under the logo, the number and Close) */
.site-header .header-inner { border-image: linear-gradient(var(--field), var(--field)) fill 0 / / 0 100vw; }
.site-header .site-nav { scroll-padding-top: calc(var(--header-h) + 0.5rem); }
/* while the menu is open the page behind it does not scroll and takes no focus (the header stays usable) */
html:has(.site-nav.is-open) { overflow: hidden; }
html:has(.site-nav.is-open) body > :not(.site-header):not(script) { visibility: hidden; }
html:has(.site-nav.is-open) .staging-banner { display: none; } /* staging only: the bar then sits at the top, above the menu */
@media (min-width: 900px) {
  .site-header .logo-link img { height: 38px; }
  .site-header .site-nav,
  .site-header .site-nav.is-open {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-content: start;
    align-content: safe center; /* centred when it fits; a short window scrolls from the top instead of clipping it */
    padding-inline: max(var(--pad), calc((100% - var(--max)) / 2));
    padding-top: calc(var(--header-h) + 1.5rem);
    padding-bottom: 2rem;
  }
  .site-header .site-nav ul { grid-column: 1 / span 6; }
  .site-header .site-nav__visit { grid-column: 8 / span 5; align-self: end; position: sticky; bottom: 1.5rem; } /* a short window: the button stays in view while the links scroll */
  .site-header .site-nav ul a { font-size: 2rem; min-height: 50px; }
  .site-header .site-nav__visit p { font-size: 1.25rem; color: var(--bone); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .site-nav,
  .site-header .site-nav.is-open { transition: none; transform: none; }
}
/* No script: the menu cannot open, so its links show as a plain list under the bar instead */
@media (scripting: none) {
  .site-header,
  .page-home .site-header--fixed-luxe,
  .page-inner .site-header--fixed-luxe,
  .page-home .site-header--fixed-luxe.is-solid,
  .page-inner .site-header--fixed-luxe.is-solid { position: relative; } /* the list makes the bar tall, so it scrolls away */
  .site-header .nav-toggle { display: none; }
  .site-header .header-inner { flex-wrap: wrap; }
  .site-header .site-nav {
    position: static; z-index: auto; visibility: visible; opacity: 1; transform: none;
    width: 100%; padding: 0 0 1rem; background: none; display: block;
  }
  .site-header .site-nav ul { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 1rem; }
  .site-header .site-nav ul a { font-size: 1rem; font-weight: 600; min-height: 44px; }
  .site-header .site-nav__visit { display: none; }
}

/* ---------- buttons: one blue pill for the action; the second choice is a blue text link ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  border: 0;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 750;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  touch-action: manipulation;
  transition: transform 0.14s var(--out), background-color 0.18s ease, color 0.18s ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary,
.btn--on-dark,
.btn--bronze,
.section--dark .btn--on-dark,
.page-hero .btn--on-dark {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff !important;
}
@media (hover: hover) { .btn--primary:hover, .btn--on-dark:hover, .btn--bronze:hover {
  background: var(--accent-press);
  border-color: var(--accent-press);
  color: #fff !important;
} }
.btn--secondary,
.btn--ghost,
.btn--ghost-dark {
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--accent-t) !important;
  font-weight: 500;
  font-variation-settings: "wdth" 92;
  text-decoration: underline !important;
  text-decoration-thickness: 0.07em !important;
  text-underline-offset: 0.18em;
}
@media (hover: hover) { .btn--secondary:hover, .btn--ghost:hover, .btn--ghost-dark:hover {
  background: transparent;
  border-color: transparent;
  color: var(--bone) !important;
} }
.btn--secondary:active,
.btn--ghost:active,
.btn--ghost-dark:active { transform: none; }
.btn-row,
.hero-split__ctas,
.closing-paths {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
@media (prefers-reduced-motion: reduce) {
  .btn, .site-header .nav-toggle { transition: none; }
  .btn:active, .site-header .nav-toggle:active { transform: none; }
}

/* ---------- breadcrumbs (the mockups' .crumbs) ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--soft);
  font-family: "Archivo V", "Archivo Narrow Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variation-settings: "wdth" 86;
}
.breadcrumb a,
main .breadcrumb a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--accent-t);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.breadcrumb [aria-current="page"] { color: var(--soft); }

/* ---------- sections ---------- */
.section,
.section--ivory,
.section--stone,
.section--soft,
.page-inner .section--stone,
.page-inner .section--soft { background: transparent; }
.section { padding: var(--space-section) 0; }
.section--dark,
.section--graphite,
.section--charcoal {
  background: var(--deep);
  color: var(--bone);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--graphite h2, .section--graphite h3,
.section--charcoal h2, .section--charcoal h3,
.section-intro--on-dark h2,
.dual-path-editorial__intro h2 { color: var(--bone); text-shadow: none; }
.section--dark .muted,
.section--graphite .muted,
.section--charcoal .muted { color: var(--soft); }
.section--dark a:not(.btn),
.section--graphite a:not(.btn),
.section--charcoal a:not(.btn) { color: var(--accent-t); }
.section-intro { max-width: 46rem; }
.section-intro p { color: var(--bone); }

/* the stone field: the one light ground of v2.1 (the mockups' .spec), on the plain "soft" sections */
.section.section--soft:not(.inquiry-start):not(.living-draft),
.statement-breath--stone,
.page-home .statement-breath--stone,
.page-home .statement-breath.statement-breath--stone {
  background: var(--bone);
  color: var(--ink);
  color-scheme: light;
}
:is(.section.section--soft:not(.inquiry-start):not(.living-draft), .statement-breath--stone) :is(h1, h2, h3, h4, p, li, strong) { color: var(--ink); }
:is(.section.section--soft:not(.inquiry-start):not(.living-draft), .statement-breath--stone) .muted,
:is(.section.section--soft:not(.inquiry-start):not(.living-draft), .statement-breath--stone) .eyebrow { color: var(--ink-soft); }
:is(.section.section--soft:not(.inquiry-start):not(.living-draft), .statement-breath--stone) a:not(.btn) { color: var(--accent); }
@media (hover: hover) { :is(.section.section--soft:not(.inquiry-start):not(.living-draft), .statement-breath--stone) a:not(.btn):hover { color: var(--ink); } }
:is(.section.section--soft:not(.inquiry-start):not(.living-draft), .statement-breath--stone) .btn--secondary,
:is(.section.section--soft:not(.inquiry-start):not(.living-draft), .statement-breath--stone) .btn--ghost { color: var(--accent) !important; }
:is(.section.section--soft:not(.inquiry-start):not(.living-draft), .statement-breath--stone) .checklist li::before { background: var(--accent); }
:is(.section.section--soft:not(.inquiry-start):not(.living-draft), .statement-breath--stone) :focus-visible { outline-color: var(--accent); }

/* ---------- lists: a small blue square, no rules (the mockups' .ticks) ---------- */
.checklist { list-style: none; padding: 0; display: grid; gap: 0.625rem; }
.checklist li { position: relative; padding-left: 1.375rem; margin: 0; color: inherit; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: var(--accent-t);
}
.checklist strong { font-weight: 750; }

/* ---------- page heroes ---------- */
.page-hero,
.page-hero--media {
  background: transparent;
  color: var(--bone);
  padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.page-hero--media { background: var(--deep); }
.page-hero h1,
.page-hero--media h1 { color: var(--bone); max-width: 18ch; }
@media (min-width: 600px) {
  .page-hero h1,
  .page-hero--media h1 { max-width: 26ch; } /* a 72-character heading in three lines at 1024 px and up */
}
.page-hero .lede,
.page-hero--media .lede { color: var(--bone); }
.page-hero a:not(.btn) { color: var(--accent-t); }

.hero-split,
.hero-split--page {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.hero-split__copy { background: transparent; color: var(--bone); }
.hero-split h1,
.hero-split .hero-tagline,
.hero-split--page h1 {
  font-family: var(--font);
  font-weight: 850;
  font-variation-settings: "wdth" 84;
  letter-spacing: -0.01em;
  color: var(--bone);
  font-size: clamp(2.125rem, 9.4vw, 2.75rem);
  line-height: 0.98;
  max-width: 20ch;
}
.hero-split h1.hero-split__h1 {
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  font-weight: 600;
  font-variation-settings: "wdth" 92;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--bone);
  max-width: 34ch;
}
.hero-split .hero-tagline .hero-line--sub { color: var(--soft); opacity: 1; font-weight: 500; font-variation-settings: "wdth" 92; letter-spacing: 0; }
.hero-split__lede,
.hero-split--page .hero-split__lede,
.hero-split__plain {
  color: var(--bone);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
  max-width: 46ch;
}
.hero-split__media { background: var(--step); border-radius: 0; }
.hero-proof li { color: var(--bone); }
@media (min-width: 768px) {
  .hero-split { border: 0; }
}
@media (min-width: 900px) {
  .hero-split .hero-tagline { font-size: clamp(2rem, 2.9vw, 2.625rem); max-width: none; } /* the home page's display line (its H1 is the small line above it) */
  .hero-split h1.hero-split__h1 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); max-width: 34ch; }
  .hero-split__lede, .hero-split--page .hero-split__lede, .hero-split__plain { font-size: 1.1875rem; }
}
/* two-column split hero from 768 px: the frame lines up with the logo and the page's photos (no 56 px inset) */
@media (min-width: 768px) {
  .hero-split { width: min(100% - 2 * var(--pad), var(--max)); }
  .hero-split__copy { padding-left: 0; padding-right: clamp(1.5rem, 3vw, 2.5rem); }
}
@media (min-width: 768px) and (max-width: 899px) {
  .hero-split .hero-tagline { font-size: 2rem; max-width: none; text-wrap: pretty; }
}
/* Page heroes (every split hero but the home page's), from 768 px: the heading is the page's largest type, a step above
   the section headings (34–48 px) at the mockups' display scale (taste type.md §1: hero 43–109 px on desktop; Kitchens
   60 px at 1440, the mockup 63). Its size follows the copy column (cqi), so each heading breaks at the same words at
   every width from 768 up: measured on all split heroes, at most 4 lines, no word split, no break at a hyphen.
   The copy column takes about half the frame on tablets (the heading needs the room) and 47% from 1280 px. */
@media (min-width: 768px) {
  .hero-split--page { grid-template-columns: clamp(20rem, 6rem + 36vw, 34.75rem) minmax(0, 1fr); }
  .hero-split--page .hero-split__copy { container-type: inline-size; }
  .hero-split--page h1 {
    font-size: clamp(2rem, 2.9vw, 2.625rem); /* browsers without container units */
    font-size: min(11.7cqi, 3.75rem);
    max-width: none;
    text-wrap: pretty;
  }
  /* About: the longest of these headings (66 characters) gets a wider copy column and a slightly smaller ratio */
  .page-about .hero-split { grid-template-columns: minmax(20rem, 1.3fr) 0.9fr; }
  .page-about .hero-split h1 { font-size: min(10.5cqi, 3.75rem); }
  /* For General Contractors: its 105-character heading takes the frame's full width, with the photo under it */
  .page-gc .hero-split { grid-template-columns: minmax(0, 1fr); }
  .page-gc .hero-split h1 { font-size: min(6.8cqi, 3.75rem); text-wrap: balance; }
}

/* ---------- photos and captions: square photos, caption under the photo in stone ---------- */
.offer-row { border-bottom: 0; }
.offer-row__media,
.media-frame,
.card__media { background: var(--step); border-radius: 0; }
.offer-row__body p,
.offer-row__body li { color: var(--bone); }
.offer-row__link {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-t);
  border-bottom: 0;
  text-decoration: underline !important;
  text-decoration-thickness: 0.07em !important;
  text-underline-offset: 0.18em;
  min-height: 44px;
  align-items: center;
}
figcaption,
.work-item figcaption,
.intake-aside__caption {
  color: var(--bone);
  font-size: 0.9375rem;
  line-height: 1.4;
  font-variation-settings: "wdth" 92;
}
.work-meta { color: var(--soft); }

/* ---------- question rows (the mockups' .faq-item: a step in tone, a blue plus) ---------- */
.faq-item,
.faq-group .faq-item:last-of-type {
  background: var(--step);
  border: 0;
  border-radius: 14px;
}
.faq-item + .faq-item { margin-top: 0.5rem; }
.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0.875rem 3.5rem 0.875rem 1rem;
  border-radius: 14px;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 650;
  font-variation-settings: "wdth" 92;
  color: var(--bone);
  touch-action: manipulation;
}
@media (hover: hover) { .faq-item summary:hover { color: var(--bone); } }
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--accent-t);
  font-size: 0;
  transition: transform 0.2s var(--out);
}
.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary::before { transform: rotate(45deg); }
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-t); outline-offset: 2px; }
.faq-answer { padding: 0 1rem 1.125rem; max-width: 62ch; }
.faq-answer p, .faq-answer li { font-size: 1rem; color: var(--bone); }
.faq-group h2 { font-size: clamp(1.75rem, 7.6vw, 2.125rem); }
@media (min-width: 900px) { .faq-group h2 { font-size: clamp(2.25rem, 3vw, 3rem); } }
.page-faq .faq-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 1rem;
  border: 1px solid rgba(232, 233, 230, 0.35);
  border-radius: 999px;
  color: var(--bone) !important;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variation-settings: "wdth" 86;
  letter-spacing: 0;
}
.page-faq .faq-jump a:focus-visible { border-color: var(--accent-t); color: var(--bone) !important; }
@media (hover: hover) { .page-faq .faq-jump a:hover { border-color: var(--accent-t); color: var(--bone) !important; } }
@media (prefers-reduced-motion: reduce) { .faq-item summary::before, .faq-item summary::after { transition: none; } }

/* ---------- cards and panels: a step in tone, never a line ---------- */
.card,
.panel,
.area-card,
.path-card__body {
  background: var(--step);
  border: 0;
  border-radius: 14px;
  color: var(--bone);
}
.card { overflow: hidden; }
.panel h3 { margin-bottom: 0.75rem; }

/* ---------- the closing ("Next step") ---------- */
.conversion-band,
.page-inner .conversion-band {
  background: transparent;
  color: var(--bone);
  padding: var(--gap) 0;
  border: 0;
}
.conversion-band h2,
.page-inner .conversion-band h2 { color: var(--bone); font-size: clamp(2.25rem, 10vw, 2.875rem); line-height: 0.98; max-width: 16ch; }
.conversion-band p,
.conversion-band .muted,
.page-inner .conversion-band .muted { color: var(--soft); font-size: 1.125rem; max-width: 46ch; }
@media (min-width: 900px) {
  .conversion-band h2, .page-inner .conversion-band h2 { font-size: clamp(3.5rem, 5vw, 5.25rem); }
}

/* ---------- tables ---------- */
.compare { border-collapse: collapse; color: var(--bone); }
.compare th,
.compare td { border-color: rgba(232, 233, 230, 0.16); color: var(--bone); }
.compare th { font-weight: 700; background: var(--step); }

/* ---------- phone numbers in the page: blue, the action colour ---------- */
main a[href^="tel:"]:not(.btn) { color: var(--accent-t); }
.phone-xl,
.phone-xl--on-dark,
.closing-band .phone-xl {
  font-family: var(--font);
  font-weight: 850;
  font-variation-settings: "wdth" 84;
  letter-spacing: -0.01em;
  color: var(--accent-t) !important;
}

/* ---------- footer: the same quiet type and colours as the mockups' footer, every link kept ---------- */
.site-footer,
.site-footer--quiet {
  position: relative;
  background: transparent;
  border-top: 0;
  color: var(--soft);
  font-size: 0.9375rem;
  line-height: 1.5;
  font-variation-settings: "wdth" 86;
  padding: 2rem 0 calc(3rem + env(safe-area-inset-bottom, 0px));
}
.site-footer a,
.site-footer--quiet a {
  color: var(--bone);
  text-decoration: none;
  position: relative;
}
@media (hover: hover) { .site-footer a:hover, .site-footer--quiet a:hover { color: var(--accent-t); } }
.site-footer .small,
.site-footer p,
.site-footer address { color: var(--soft); font-style: normal; }
.site-footer .muted { color: var(--soft); }
.footer-logo { height: 30px; width: auto; opacity: 1; }
.footer-nav h3,
.footer-nap h3 {
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variation-settings: "wdth" 92;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone);
  margin-bottom: 0.25rem;
}
.footer-nav li { margin: 0; }
.footer-nav a,
.footer-social a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  letter-spacing: 0;
}
.footer-social { gap: 0 1.25rem; margin-top: 0.25rem; }
/* phone numbers and links set inside a line: a 44px tap area without moving a letter (the mockups' footer link) */
.site-footer .phone a::after,
.site-footer p.small a::after,
.footer-bottom a::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.site-footer .phone { line-height: 2.75rem; margin-top: 0.5rem !important; }
.site-footer .phone a { color: var(--bone); white-space: nowrap; }
.footer-bottom {
  margin-top: 2rem;
  padding-top: 0;
  border-top: 0;
  font-size: 0.8125rem;
  line-height: 2.75rem;
  color: var(--soft);
  font-variation-settings: "wdth" 80;
}
.footer-hours { color: var(--soft); }

/* ---------- forms (the inquiry form keeps every step, field, word and script; v2.1 colours and corners) ---------- */
:is(body.page-contact[data-intake-path], .inquiry-start) .form-card,
.inquiry-start .form-card {
  border: 0;
  border-radius: 28px;
  padding: 1.375rem 1.125rem;
  color: var(--form-ink);
}
@media (min-width: 560px) {
  :is(body.page-contact[data-intake-path], .inquiry-start) .form-card { padding: 1.75rem; }
}
@media (min-width: 900px) {
  :is(body.page-contact[data-intake-path], .inquiry-start) .form-card { padding: 2rem 2rem 1.75rem; }
}
@media (max-width: 379px) {
  :is(body.page-contact[data-intake-path], .inquiry-start) .form-card { padding-left: 0.75rem; padding-right: 0.75rem; }
}
:is(body.page-contact[data-intake-path], .inquiry-start) .form-card :is(h2, h3, h4, p, li, legend, strong) { color: var(--form-ink); }
:is(body.page-contact[data-intake-path], .inquiry-start) .form-card .muted { color: var(--form-help); }
:is(body.page-contact[data-intake-path], .inquiry-start) .form-card a:not(.btn) { color: var(--accent); }
:is(body.page-contact[data-intake-path], .inquiry-start) .form-card :focus-visible { outline-color: var(--accent); }
:is(body.page-contact[data-intake-path], .inquiry-start) .field input,
:is(body.page-contact[data-intake-path], .inquiry-start) .field select,
:is(body.page-contact[data-intake-path], .inquiry-start) .field textarea {
  border-width: 1.5px;
  font-family: var(--font);
  font-variation-settings: "wdth" 92;
}
:is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions {
  border-top: 0;
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}
:is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions .btn {
  min-height: 3.25rem;
  border-radius: 999px;
  font-weight: 750;
  font-variation-settings: "wdth" 100;
}
:is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions .btn--secondary {
  padding: 0 1.25rem;
  border: 1.5px solid var(--ink-soft);
  color: var(--ink) !important;
  text-decoration: none !important;
  background: transparent;
}
@media (hover: hover) { :is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions .btn--secondary:hover { border-color: var(--ink); color: var(--ink) !important; } }
:is(body.page-contact[data-intake-path], .inquiry-start) .wizard-actions .btn--secondary:active:not(:disabled) { transform: scale(0.97); }
.inquiry-start .wizard-step-head .wizard-progress .step { border-radius: 2px; }
body.page-contact[data-intake-path] .wizard-bar__seg { border-radius: 2px; }
.inquiry-start .section-intro h2,
.inquiry-start > .container > h2 { color: var(--bone); }
/* the menu's action keeps the button look (the older ".site-nav a" rules would otherwise reach it) */
.site-header .site-nav__visit .btn {
  display: inline-flex;
  min-height: 3.25rem;
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: 0;
  background: var(--accent);
  color: #fff !important;
}
@media (hover: hover) { .site-header .site-nav__visit .btn:hover { background: var(--accent-press); color: #fff !important; } }

/* ---------- light surfaces: text tokens back to ink (the older layers read --text and --text-muted) ---------- */
.section.section--soft:not(.inquiry-start):not(.living-draft),
.statement-breath--stone,
.form-card,
.inquiry-start .form-card,
body.page-contact[data-intake-path] .form-card {
  --text: var(--ink);
  --text-muted: var(--ink-soft);
}
body.page-contact[data-intake-path] .form-card,
body.page-contact[data-intake-path="homeowner"] .form-card,
body.page-contact[data-intake-path="trade"] .form-card,
.inquiry-start .form-card {
  background: var(--form-card);
  box-shadow: none;
  color-scheme: light; /* the form's own controls stay as they were: light, on stone */
}
body.page-contact[data-intake-path] .field-branch,
body.page-contact[data-intake-path] .form-resume { border-left-color: var(--accent); }
/* "Prefer to talk first?": a stone card outlined like the fields, no blue stripe (the blue is kept for the actions) */
body.page-contact[data-intake-path] .prefer-call {
  background: var(--bone);
  border: 1px solid var(--form-line);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
}
body.page-contact[data-intake-path] .field-branch { background: rgba(15, 15, 15, 0.04); }
body.page-contact[data-intake-path] .form-resume { --text: var(--bone); --form-ink: var(--bone); --form-help: var(--soft); --form-accent: var(--accent-t); }

/* ---------- the drawings behind Contact and About: light lines on the black ground ---------- */
.living-draft--l1 .living-draft__art .living-draft__photo,
.living-draft--l3 .living-draft__art .living-draft__photo,
.living-draft--l1 .living-draft__art .living-draft__svg,
.living-draft--l3 .living-draft__art .living-draft__svg {
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
}
body.page-contact[data-intake-path] { --ld-art-l1: 0.16; }
.page-about { --ld-art-l3: 0.2; }
.living-draft--l2 .living-draft__art .living-draft__photo { filter: grayscale(1); }

/* ---------- Contact: the two paths, as the mockups' choice buttons (a step in tone; the chosen one ringed in blue) ---------- */
.path-btn,
.path-btn:not(#path-trade),
body.page-contact[data-intake-path] .path-btn,
body.page-contact[data-intake-path="homeowner"] .path-btn {
  background: var(--step);
  color: var(--bone);
  border: 1px solid rgba(232, 233, 230, 0.28);
  border-radius: 14px;
  box-shadow: none;
}
.path-btn strong,
body.page-contact[data-intake-path] .path-btn strong {
  font-family: var(--font);
  font-weight: 800;
  font-variation-settings: "wdth" 84;
  color: var(--bone);
}
.path-btn span,
body.page-contact[data-intake-path] .path-btn span { color: var(--soft); }
.path-btn.is-active,
.path-btn#path-trade.is-active,
body.page-contact[data-intake-path="homeowner"] .path-btn#path-homeowner.is-active {
  background: var(--step);
  color: var(--bone);
  border-color: var(--accent-t);
  border-width: 1px;
  box-shadow: inset 0 0 0 1px var(--accent-t);
}
body.page-contact[data-intake-path="homeowner"] .path-btn#path-homeowner.is-active strong,
.path-btn#path-trade.is-active strong { color: var(--bone); }
.path-btn#path-trade.is-active span { color: var(--soft); }
@media (hover: hover) and (pointer: fine) {
  .path-btn:hover,
  .path-btn#path-trade:hover,
  body.page-contact[data-intake-path="homeowner"] .path-btn#path-homeowner:hover:not(.is-active) {
    background: var(--step);
    color: var(--bone);
    border-color: rgba(232, 233, 230, 0.75);
  }
  .path-btn#path-trade:hover span { color: var(--soft); }
}
.path-btn:focus-visible { outline: 2px solid var(--accent-t); outline-offset: 3px; }
.intake-proof { color: var(--soft); }

/* ---------- hero: the mockups' 16 px gutter on phones; the proof list as the mockups' list ---------- */
@media (max-width: 767px) {
  .hero-split__copy { padding: 1rem var(--pad) 2.5rem; }
}
.hero-proof {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: grid;
  gap: 0.625rem;
  font-size: 1rem;
  color: var(--bone);
}
.hero-proof li {
  position: relative;
  display: block;
  padding-left: 1.375rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--bone);
}
.hero-proof li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: var(--accent-t);
}

/* ---------- figures and drawings: photos and diagrams sit on the black ground, caption under them ---------- */
.diagram,
.intake-aside__figure {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 1.5rem 0;
}
.diagram figcaption,
.intake-aside__caption,
figcaption.muted { color: var(--soft); font-size: 0.9375rem; margin-top: 0.625rem; }
.diagram svg text { font-family: var(--font); fill: var(--bone); }
.diagram .dg-run { fill: var(--step); stroke: var(--bone); }
.diagram .dg-corner { fill: rgba(126, 160, 245, 0.16); stroke: var(--accent-t); }
.diagram .dg-skip,
.diagram .dg-hatch,
.diagram .dg-dim { stroke: var(--soft); }
.compare thead th { color: var(--bone); border-bottom: 2px solid rgba(232, 233, 230, 0.35); }
.compare tbody th { color: var(--bone); }
.skip-link,
.page-home .skip-link,
.page-inner .skip-link { color: var(--field); }

/* ---------- every small tracked uppercase label of the older layers: sentence case as written, readable size ---------- */
.hero-path__label,
.proof-tile__eyebrow,
.mosaic-tile__eyebrow,
.path-card__label,
.chapter-caption__meta,
.hero-split__meta,
.hero-scroll-cue__label,
.section-numeral span,
.chapter-caption__numeral,
.statement-breath__services,
.text-cta,
.hero-path__cta,
.path-card__cta {
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variation-settings: "wdth" 86;
  letter-spacing: 0;
  text-transform: none;
}
.hero-path__label,
.proof-tile__eyebrow,
.mosaic-tile__eyebrow,
.path-card__label,
.chapter-caption__meta,
.hero-split__meta,
.hero-scroll-cue__label,
.section-numeral span,
.chapter-caption__numeral { color: var(--soft); }
.statement-breath__services { color: var(--ink-soft); }
.text-cta,
.hero-path__cta {
  color: var(--accent-t) !important;
  border-bottom: 0;
  text-decoration: underline !important;
  text-decoration-thickness: 0.07em !important;
  text-underline-offset: 0.18em;
}

/* ---------- photo tiles: the photo, then its caption under it (the mockups' .ph figcaption; no fade over the photo) ---------- */
.proof-tile,
.mosaic-tile { background: none; border-radius: 0; }
.proof-tile { min-height: 0; overflow: visible; }
.proof-tile picture { display: block; height: auto; aspect-ratio: 4 / 3; overflow: hidden; background: var(--step); }
.proof-tile--tall picture { aspect-ratio: 4 / 5; }
.proof-tile img { position: static; inset: auto; width: 100%; height: 100%; object-fit: cover; }
.proof-tile__caption { position: static; padding: 0.625rem 0 0; background: none; color: var(--bone); }
.proof-tile__eyebrow { color: var(--soft); margin-bottom: 0.125rem; }
.proof-tile__title {
  font-family: var(--font);
  font-size: 1.25rem;
  font-weight: 800;
  font-variation-settings: "wdth" 84;
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 0 0 0.25rem;
  color: var(--bone);
}
.proof-tile__text { color: var(--bone); font-size: 0.9375rem; line-height: 1.4; max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { @media (hover: hover) { .proof-tile:hover img { transform: none; } } }

/* ---------- home: the two path cards (a step in tone; the homeowner action is the blue pill, the trade one a link) ---------- */
.path-card__title {
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 800;
  font-variation-settings: "wdth" 84;
  letter-spacing: -0.005em;
  line-height: 1.05;
  color: var(--bone);
}
.path-card__text { color: var(--bone); }
.path-card .path-card__cta,
.path-card:focus-visible .path-card__cta {
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  background: var(--accent);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 1rem;
  font-weight: 750;
  font-variation-settings: "wdth" 100;
  transform: none;
}
@media (hover: hover) { .path-card:hover .path-card__cta {
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  background: var(--accent);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 1rem;
  font-weight: 750;
  font-variation-settings: "wdth" 100;
  transform: none;
} }
@media (hover: hover) { .path-card:hover .path-card__cta { background: var(--accent-press); } }
.path-card--trade .path-card__cta,
.path-card--trade:focus-visible .path-card__cta {
  min-height: 44px;
  padding: 0;
  background: transparent;
  color: var(--accent-t) !important;
  font-weight: 500;
  font-variation-settings: "wdth" 92;
  text-decoration: underline !important;
  text-decoration-thickness: 0.07em !important;
  text-underline-offset: 0.18em;
}
@media (hover: hover) { .path-card--trade:hover .path-card__cta {
  min-height: 44px;
  padding: 0;
  background: transparent;
  color: var(--accent-t) !important;
  font-weight: 500;
  font-variation-settings: "wdth" 92;
  text-decoration: underline !important;
  text-decoration-thickness: 0.07em !important;
  text-underline-offset: 0.18em;
} }
@media (hover: hover) { .path-card--trade:hover .path-card__cta { color: var(--bone) !important; } }

/* ---------- home chapters and work captions: v2.1 display type ---------- */
.chapter-caption__title,
.mobile-chapter h3,
.mobile-chapter__overlay h3,
.finish-story h3,
.gc-break h2 {
  font-family: var(--font);
  font-weight: 850;
  font-variation-settings: "wdth" 84;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--bone);
}
.chapter-caption__body,
.mobile-chapter p { color: var(--bone); }
.mobile-chapter__numeral,
.section-numeral { color: var(--soft); font-family: var(--font); font-variation-settings: "wdth" 62; font-weight: 700; letter-spacing: 0; }
.statement-breath__line {
  font-family: var(--font);
  font-weight: 750;
  font-variation-settings: "wdth" 92;
  letter-spacing: -0.005em;
  color: var(--ink);
}
:is(body.page-contact[data-intake-path], .inquiry-start) .form-card .wizard-step-count { color: var(--form-accent); font-weight: 600; }

/* ---------- work tiles: the photo, then its caption under it (the mockups' .ph figcaption); the whole tile is the link ---------- */
.work-item { aspect-ratio: auto; overflow: visible; background: none; }
.work-item picture { display: block; height: auto; aspect-ratio: 4 / 3; overflow: hidden; background: var(--step); }
.work-masonry .work-item picture { aspect-ratio: auto; }
.work-item img { width: 100%; height: 100%; object-fit: cover; }
.work-masonry .work-item img { height: auto; }
.work-item figcaption {
  position: static;
  margin-top: 0.625rem;
  padding: 0;
  background: none;
  color: var(--bone);
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 600;
  font-variation-settings: "wdth" 92;
  letter-spacing: 0;
}
.work-item figcaption a { color: var(--bone); text-decoration: none; }
.work-item .work-meta { color: var(--soft); margin-bottom: 0.125rem; }
.work-item:focus-within { outline: 2px solid var(--accent-t); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { @media (hover: hover) { .work-item:hover img { transform: none; } } }

/* ---------- links inside sentences: a slightly larger tap area that stays clear of a neighbouring link ----------
   3 px around the words: two links on one line ("Johnsburg, Spring Grove") are at least a comma and a space apart
   (about 8 px), so their areas do not meet (6 px at the sides did, by up to 4 px), and two links on lines one above the
   other stay apart too (4 px above and below met by up to 1 px at the 1.55 line height). The mockups' 14 px made
   stacked links' areas overlap, so a tap could land on the next link. Zero specificity, so
   component rules (the FAQ jump pills, breadcrumbs, cards) always win. Phone and email links are left out: their own
   rules already give them 44 px, and so are the address blocks (.nap, .privacy-contact). */
:where(main) :where(p, li, dd, td) a:where(:not(.btn, [class], [href^="tel:"], [href^="mailto:"])):where(:not(.nap a, .privacy-contact a, .faq-jump a, .proof-link a)),
.faq-answer a:where(:not([href^="tel:"], [href^="mailto:"])) {
  padding: 3px;
  margin: -3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* links that stand on a line of their own ("See every step…", the address blocks' numbers): the box itself is 44 px
   tall, so it takes that room in the layout and can never reach the next link */
.proof-link { margin-bottom: 0.5rem; }
.proof-link a { display: inline-flex; align-items: center; min-height: 44px; }
main .nap p a[href^="tel:"],
.privacy-contact a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
/* lists of links ("Related pages", "Nearest town pages"): a 44 px tall tap area on each link, and 26 px between two
   link items so two areas never meet (26 > 2 x 12.5 px reach). Only items that are one link, next to another such item
   or alone in their list: a list of plain items with a link in one of them (Closets "We build:") keeps its 10 px gap,
   and that link the sentence links' area above. (Written per item: a :has() inside a :has(), which a whole-list test
   needs, is not valid CSS, so browsers would drop the rule.) */
.checklist > li:has(> a:only-child) + li:has(> a:only-child) { margin-top: 1rem; }
.checklist > li:has(> a:only-child):is(:only-child, :has(+ li > a:only-child)) > a,
.checklist > li:has(> a:only-child) + li:has(> a:only-child) > a { padding-block: 12.5px; margin-block: -12.5px; }

/* ---------- larger browser text: long words and addresses wrap instead of pushing the page sideways ---------- */
main a { overflow-wrap: anywhere; }
h1, h2, h3 { overflow-wrap: normal; hyphens: manual; } /* headings never split inside a word */
.inquiry-start__shell > *,
.inquiry-start .form-card,
.intake-main,
.intake-layout > * { min-width: 0; }
:is(body.page-contact[data-intake-path], .inquiry-start) .field label .hint { white-space: normal; }
.text-link-on-dark,
.offer-row__link,
.how-it-works__link,
.works-mosaic__link,
.mobile-chapter__link { display: inline-flex; align-items: center; min-height: 44px; }
.text-link-on-dark { color: var(--accent-t) !important; border-bottom: 0; text-decoration: underline !important; text-decoration-thickness: 0.07em !important; text-underline-offset: 0.18em; }

/* ---------- home: the GC photo break — a neutral scrim dense enough for its words, measured on the photo ---------- */
.gc-break__veil,
.page-home .gc-break__veil {
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.78) 55%, rgba(10, 10, 10, 0.45) 100%);
}
@media (max-width: 767px) {
  .gc-break__veil,
  .page-home .gc-break__veil { background: rgba(10, 10, 10, 0.8); }
}
.gc-break__lede { color: var(--bone); }

/* ---------- words set on a photo: a neutral scrim dense enough for them (measured on the real photos) ---------- */
.hero-split__media > p.small[style] {
  background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.8) 60%, rgba(10, 10, 10, 0) 100%) !important;
  color: var(--bone) !important;
}
.chapter-progress-num,
.mobile-chapter__numeral {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(10, 10, 10, 0.72);
  color: var(--bone);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.mobile-chapter .chapter-caption__meta,
.chapter-caption .chapter-caption__meta { color: var(--bone); }
.mobile-chapter__veil,
.page-home .mobile-chapter__veil {
  background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.78) 45%, rgba(10, 10, 10, 0.1) 80%, transparent 100%);
}

/* ---------- the hero's words show at once: no entrance animation (measured: the older 1.35 s fade, and even the
   mockups' 0.7 s rise, held the largest paint of /kitchens/ about 0.33 s later on a slow phone connection) ---------- */
.hero-split__copy,
.page-home .hero-split__copy { animation: none; }

/* ===== Batch 1 pages: Home and Kitchens ===== */
/* Redesign batch 1, step 2 (2026-11-04): the accepted Home (the scroll story of The Object v2.1, round 10) and Kitchens
   (round 8) layouts, carried onto the live pages with the reviewed words. Everything here is scoped to body.b1 (the two
   pages), and the home's scroll story to its own st- classes. The story's pinned layout applies only under html.gl (the
   3D cabinet runs); without it (no script, reduced motion, Save-Data, no WebGL) the same scenes are plain sections with
   a still of the same 3D model in each. Kit tokens and components above (header, menu, buttons, question rows, form,
   footer) are used as they are. */

/* ---------- shared: links, actions, lists, the section pattern ---------- */
.b1 [hidden] { display: none !important; }   /* a hidden stain row or caption stays hidden whatever its display */
.b1 .lnk {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent-t);
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
}
@media (hover: hover) { .b1 .lnk:hover { color: var(--bone); } }
.b1 .b1-strong { font-weight: 700; }
.b1-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1.5rem; }
.b1-acts .btn { min-height: 3.25rem; }
.b1-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; max-width: 62ch; }
.b1-ticks li { position: relative; padding-left: 1.375rem; margin: 0; color: inherit; }
.b1-ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: var(--accent-t);
}
.b1-ticks strong { font-weight: 750; }
.b1 .b1-body > p,
.b1 .b1-txt p { max-width: 62ch; color: var(--bone); }
.b1 .b1-txt p + p,
.b1 .b1-txt p + ul,
.b1 .b1-txt ul + p { margin-top: 0.9em; }
.b1 :is(.b1-body, .b1-txt) p a:not([class]),
.b1 .b1-strong,
.b1 .st-more a {
  color: var(--accent-t);
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
  padding: 14px 8px;
  margin: -14px -8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.b1-mod { padding-bottom: var(--gap); }
.b1-mod > h2 { margin: 0 0 1.5rem; max-width: 20ch; }
.b1-body { display: grid; gap: 2rem; min-width: 0; }
.b1-body > * { min-width: 0; }
.b1-faq { display: grid; max-width: 680px; }
.b1-faq .faq-answer a { color: var(--accent-t); }
.b1 .b1-body h3 { margin: 0 0 0.5rem; }
.k-wrap,
.b1-wrap,
.b1-below > .b1-mod,
.b1-below > .b1-close { max-width: 1600px; margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }

/* the stone section: the one light ground (the mockups' .spec) */
.b1-spec { background: var(--bone); color: var(--ink); padding: var(--gap) 0; margin: 0 0 var(--gap); }
.b1 .b1-spec :is(h2, h3, p, li, strong, td, th, caption) { color: var(--ink); }
.b1 .b1-spec h2 { margin: 0 0 1.5rem; max-width: 20ch; }
.b1 .b1-spec h3 { margin: 1rem 0 0.25rem; }
.b1 .b1-spec .b1-ticks li::before { background: var(--accent); }
.b1 .b1-spec a:not(.btn) { color: var(--accent); }
@media (hover: hover) { .b1 .b1-spec a:not(.btn):hover { color: var(--ink); } }
.b1 .b1-spec :focus-visible { outline-color: var(--accent); }
.k-specs { gap: 0; max-width: none; }
.k-specs li { padding: 14px 0 14px 22px; }
.k-specs li::before { top: calc(14px + 0.62em); }

/* tables: a decision laid side by side (desktop); on a phone each column becomes a card, row names kept */
.b1-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.b1-table caption { text-align: left; font-weight: 700; margin-bottom: 0.75rem; color: var(--bone); }
.b1-table th,
.b1-table td { text-align: left; vertical-align: top; padding: 0.875rem 1rem; border: 0; }
.b1-table thead th { font-weight: 800; font-variation-settings: "wdth" 92; font-size: 1.0625rem; line-height: 1.25; }
.b1-table tbody th { font-weight: 700; color: var(--soft); font-size: 0.9375rem; white-space: nowrap; }
.b1-table tbody tr { background: var(--step); }
.b1-table tbody tr:nth-child(even) { background: transparent; }
.b1-table td a:not(.btn) { color: var(--accent-t); }
/* a link that stands alone in a table cell ("Where to see it") is a target of its own, 44 px tall (the kit's sentence
   links get only 4 px around the words) */
.b1 .b1-table td a:not([class]) { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 2px; }
.b1-spec .b1-table tbody tr { background: rgba(15, 15, 15, 0.06); }
.b1-spec .b1-table tbody tr:nth-child(even) { background: transparent; }
.b1-spec .b1-table tbody th { color: var(--ink-soft); }
.b1-table .btn { min-height: 3rem; padding: 0.5rem 1.25rem; white-space: nowrap; }
/* a table beside its heading: the buttons and row names may wrap, so the three-option table on the home page fits its
   eight columns (it ran 105 px past a 1024 px screen, and 324 px past a 1280 px screen with 24 px browser text);
   on a small laptop or a tablet held sideways (900–1279 px) the cells are a little tighter too */
@media (min-width: 900px) {
  .b1-table tbody th { white-space: normal; }
  .b1-table .btn { white-space: normal; text-align: center; }
  .b1-table td { overflow-wrap: break-word; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .b1-table th,
  .b1-table td { padding: 0.75rem 0.625rem; }
  .b1-table .btn { padding: 0.5rem 0.875rem; }
}
@media (max-width: 899px) {
  .b1-table,
  .b1-table thead,
  .b1-table tbody,
  .b1-table tr { display: contents; }
  .b1-table { display: grid; gap: 0; }
  .b1-table caption { display: block; }
  .b1-table thead td,
  .b1-table tbody th { display: none; }
  .b1-table thead th,
  .b1-table td { display: block; padding: 0.375rem 1rem; background: var(--step); }
  .b1-spec .b1-table thead th,
  .b1-spec .b1-table td { background: rgba(15, 15, 15, 0.06); }
  .b1-table thead th { padding-top: 1rem; border-radius: 14px 14px 0 0; margin-top: 1rem; font-size: 1.1875rem; }
  .b1-table tbody tr:last-child td { padding-bottom: 1rem; border-radius: 0 0 14px 14px; }
  .b1-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--soft);
    font-variation-settings: "wdth" 86;
  }
  .b1-spec .b1-table td::before { color: var(--ink-soft); }
  /* column by column: each option's name, then its four rows */
  .b1-table thead th:nth-child(2), .b1-table tbody td:nth-child(2) { order: 1; }
  .b1-table thead th:nth-child(3), .b1-table tbody td:nth-child(3) { order: 2; }
  .b1-table thead th:nth-child(4), .b1-table tbody td:nth-child(4) { order: 3; }
}

/* ---------- desktop: one 12-column grid, the heading on the left third, the answer on the right ---------- */
@media (min-width: 900px) {
  .b1-mod,
  .k-start {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  .b1-mod > h2,
  .k-start > h2 { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 32px); margin: 0; padding-right: 16px; }
  .b1-mod > .b1-body,
  .k-start > .form-card { grid-column: 5 / -1; }
  .b1-body { gap: 2.5rem; }
  .b1-spec .b1-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .b1-spec .b1-wrap > h2 { grid-column: 1 / span 4; margin: 0; }
  .b1-spec .b1-wrap > :not(h2) { grid-column: 5 / -1; }
  .k-specs li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 24px; padding: 16px 0; }
  .k-specs li::before { display: none; }
  .k-specs li strong { display: block; }
  .b1-table tbody th { width: 10.5rem; }
}

/* ==========================================================================
   HOME: the scroll story
   ========================================================================== */
/* header over the story: the same bar, set on a shade instead of a black band (the mockup's header); once the story
   is over it takes the black ground again so the sections below read clearly under it */
.page-story .site-header,
.page-story .site-header.is-solid,
.page-story.has-scrolled .site-header--fixed-luxe,
.page-story .site-header--fixed-luxe.is-solid {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}
.page-story .staging-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 101; }
.page-story .staging-banner + .site-header { top: var(--staging-banner-h, 0px); }
.page-story .site-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 36px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, 0.62) 0, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0) 100%);
  transition: opacity 0.3s;
}
.page-story .site-header :is(.nav-phone, .nav-phone-mobile) { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.page-story .site-header.st-solid { background: var(--field); }
.page-story .site-header.st-solid::before { opacity: 0; }
/* the kit paints the header row as a solid bar edge to edge (for the open menu: links scrolled up go under it); over the
   story the closed header stays see-through with its shade, as in the accepted design, and takes its black ground from
   .st-solid below the story. The bar comes back while the menu is open. */
.page-story .site-header .header-inner { border-image: none; }
.page-story .site-header .header-inner:has(> .site-nav.is-open) { border-image: linear-gradient(var(--field), var(--field)) fill 0 / / 0 100vw; }
.page-story #main { position: relative; z-index: 2; padding-top: 0; }
.page-story .site-footer { z-index: 2; }
/* the blueprint field: on this page an element of its own (the kit draws it as body::before), so the 3D can fade it
   by writing that element's opacity, not a variable on <html> or <body>, which restyled the whole page every frame */
body.page-story::before { content: none; }
.st-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(232, 233, 230, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 233, 230, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(232, 233, 230, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 233, 230, 0.024) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}
.st-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: none; pointer-events: none; }
html.gl .st-gl { display: block; }
.st-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;   /* the 3D writes this element's opacity (the lamp) and --gx / --gy (on resize) */
  background: radial-gradient(60% 45% at var(--gx, 50%) var(--gy, 40%), rgba(232, 233, 230, 0.1), transparent 70%);
}

/* ---------- the scenes: plain sections by default; pinned (html.gl) while the 3D runs ---------- */
.st-scene { position: relative; }
.st-sticky {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--header-h) + 1.5rem) var(--pad) calc(92px + env(safe-area-inset-bottom, 0px));
}
.st-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.st-poster img { width: 100%; height: 100%; object-fit: cover; }
.st-poster--faint { opacity: 0.15; }
.st-copy { position: relative; z-index: 1; }
.st-title {
  margin: 0;
  max-width: none;
  color: var(--bone);
  font-weight: 850;
  line-height: 0.92;
  letter-spacing: -0.01em;
  font-size: clamp(40px, 11.4vw, 128px);
  font-variation-settings: "wdth" var(--w, 112);
  text-wrap: balance;
}
.st-copy p:not(.st-title) { margin-top: 14px; max-width: 34ch; font-size: 1rem; line-height: 1.45; color: var(--soft); font-variation-settings: "wdth" 92; }
.st-count { display: block; margin-bottom: 10px; font-size: 14px; color: var(--soft); font-variation-settings: "wdth" 62; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-hint { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--soft); font-variation-settings: "wdth" 70; }
.st-facts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; max-width: 46ch; font-size: 15px; line-height: 1.45; color: var(--soft); }
.st-facts b { color: var(--bone); font-weight: 700; }
html:not(.gl) :is(.st-gl-only, .st-count, .st-hint) { display: none; }
/* without the 3D the words sit over the still; where a long scene's words reach up into the cabinet (scene 4's list),
   a shade behind them keeps them readable (measured: the title's darkest 5% of ground was 1.6:1 without it) */
html:not(.gl) .st-scene[data-gl] .st-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(-1 * var(--pad));
  right: calc(-1 * var(--pad));
  top: -56px;
  bottom: -24px;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0, rgba(15, 15, 15, 0.85) 56px);
  pointer-events: none;
}
@media (min-width: 900px) {
  .st-sticky { padding-bottom: 64px; justify-content: center; }
  .st-copy { width: 44vw; }
  .st-copy p:not(.st-title) { font-size: 1.125rem; }
  .st-title { font-size: clamp(56px, 5.8vw, 104px); }
  .st-scene:not(#s5) > .st-sticky > .st-poster,
  #s9 > .st-poster { left: auto; width: 58%; }
}

/* pinned while the 3D runs */
html.gl #s7 { height: 700vh; }
html.gl #s1 { height: 170vh; }
html.gl #s2 { height: 300vh; }
html.gl #s3 { height: 220vh; }
html.gl #s4 { height: 450vh; }
html.gl #s5 { height: 500vh; }
html.gl #s6 { height: 200vh; }
html.gl #s8 { height: 520vh; }
html.gl .st-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; display: block; padding: 0; }
html.gl .st-copy { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
html.gl .st-poster { display: none; }
html.gl:not(.gl-ready) .st-poster { display: block; } /* the stills stand in until the 3D has drawn its first frame */
html.gl :is(.st-nogl-only, .st-nogl-cap) { display: none; }
html.gl .st-facts { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; } /* the rings carry these facts on screen; the list stays in the page */
@media (min-width: 900px) {
  html.gl .st-copy { left: var(--pad); right: auto; width: 44vw; bottom: auto; top: 50%; transform: translateY(-50%); }
}

/* the measure labels and the rings (3D only) */
.st-labels,
.st-hots { position: fixed; inset: 0; z-index: 3; pointer-events: none; display: none; }
html.gl-ready .st-labels,
html.gl-ready .st-hots { display: block; }
.st-dim { position: absolute; left: 0; top: 0; font-size: 13px; letter-spacing: 0.02em; color: var(--accent-t); font-variation-settings: "wdth" 62; font-weight: 500; white-space: nowrap; transform: translate(-50%, -50%); opacity: 0; padding: 2px 6px; background: var(--field); }
.st-hot { position: absolute; left: 0; top: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 0; padding: 0; background: none; pointer-events: auto; cursor: pointer; opacity: 0; visibility: hidden; color: var(--bone); font: inherit; touch-action: manipulation; }
.st-hot::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; border: 2px solid var(--accent-t); background: rgba(10, 10, 10, 0.55); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.45); }
.st-hot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px solid rgba(126, 160, 245, 0.7); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(0, 0, 0, 0.35); }
.st-hot.open::before { background: var(--accent-t); }
.st-hotcard { position: fixed; left: 0; top: 0; z-index: 8; width: min(270px, calc(100vw - 32px)); background: var(--bone); color: var(--field); padding: 14px 16px; border-radius: 16px; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.st-hotcard.open { opacity: 1; }
.st-hotcard b { display: block; font-size: 17px; font-variation-settings: "wdth" 112; font-weight: 800; line-height: 1.1; margin-bottom: 4px; color: var(--field); }
.st-hotcard span { font-size: 14px; line-height: 1.35; display: block; color: var(--field); }

/* ---------- the opening: the type window over the Long Grove kitchen ---------- */
#s7 .st-sticky { background: var(--deep); padding: 0; height: 100vh; height: 100svh; display: block; }
.st-plates { display: none; }
html.gl .st-plates { display: block; }
.st-plates,
.st-plates picture,
.st-plates img,
.st-twA { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-plates img,
.st-twA img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.st-plates picture + picture { opacity: 0; }
.st-twA { z-index: 1; }
.st-twA img { position: absolute; inset: 0; }
.st-tw-mask { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; visibility: hidden; }
html.tw-ready .st-tw-mask { visibility: visible; }   /* hidden, not removed, until laid out: the layout measures the letters in it */
#twSvg2 { visibility: hidden; }
.st-tw-mask text { font-family: var(--font); font-weight: 900; font-variation-settings: "wdth" 80; word-spacing: 0.04em; }
/* the tagline as words: laid exactly over the cut-out letters (transparent, so it can be selected, found and read);
   without the layout script it shows as plain words over the photo */
.st-tw-copy {
  position: absolute;
  z-index: 6;
  left: var(--pad);
  right: var(--pad);
  top: calc(var(--header-h) + 8vh);
  margin: 0;
  max-width: none;
  color: var(--bone);
  font-family: var(--font);
  font-weight: 900;
  font-variation-settings: "wdth" 80;
  word-spacing: 0.04em;
  letter-spacing: 0;
  font-size: clamp(40px, 11vw, 96px);
  line-height: 0.98;
  text-wrap: balance;
}
html:not(.tw-ready) #s7 .st-twA::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, 0.6); }
.st-tw-copy--close { display: none; }
html.tw-ready .st-tw-copy { left: 0; top: 0; right: auto; width: 0; height: 0; color: transparent; overflow: visible; }
html.tw-ready .st-tw-copy span { position: absolute; white-space: nowrap; line-height: 0.98; }
html.tw-ready .st-tw-copy::selection,
html.tw-ready .st-tw-copy span::selection { background: rgba(126, 160, 245, 0.35); color: transparent; }
html.gl.tw-ready .st-tw-copy--close { display: block; }
.st-tw-h1 {
  position: absolute;
  z-index: 5;
  left: var(--pad);
  right: var(--pad);
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  max-width: 44ch;
}
.b1 .st-tw-h1 h1 {
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--soft);
  font-variation-settings: "wdth" 80;
  text-wrap: wrap;
}
.st-tw-sub { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: var(--soft); font-variation-settings: "wdth" 80; letter-spacing: 0.02em; }
.st-nw { white-space: nowrap; }
@media (min-width: 900px) { .st-tw-h1 { bottom: 40px; } }
/* without the 3D: the evening kitchen with the closing line, after the opening screen */
.st-nogl-kitchen { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
html.gl .st-nogl-kitchen { display: none; }
.st-nogl-kitchen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.st-nogl-kitchen::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0) 50%); }
.st-kline {
  position: absolute;
  z-index: 3;
  left: var(--pad);
  right: var(--pad);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  color: var(--bone);
  font-weight: 850;
  line-height: 0.95;
  font-size: clamp(34px, 9.4vw, 104px);
  font-variation-settings: "wdth" var(--w, 96);
  letter-spacing: -0.01em;
  max-width: 14ch;
  text-wrap: balance;
}
@media (min-width: 900px) { .st-kline { bottom: 64px; font-size: clamp(48px, 5.2vw, 84px); } }

/* ---------- your species: the wood plate is drawn on the canvas behind (3D); a close-up photo without it ---------- */
#s5 .st-sticky {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(env(safe-area-inset-top, 0px) + 84px) var(--pad) calc(96px + env(safe-area-inset-bottom, 0px));
}
html.gl #s5 .st-sticky { touch-action: pan-y; cursor: ew-resize; }
#s5 .st-sticky > :not(.st-poster) { position: relative; }
.st-sp-name {
  all: unset;
  cursor: pointer;
  display: block;
  font-family: var(--font);
  font-weight: 900;
  font-size: clamp(64px, 19vw, 260px);
  line-height: 0.82;
  white-space: nowrap;
  letter-spacing: -0.01em;
  font-variation-settings: "wdth" var(--w, 62);
  color: var(--bone);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.25);
  min-height: 44px;
  position: relative;
}
.st-sp-name:focus-visible { outline: 2px solid var(--accent-t); outline-offset: 6px; }
.st-sp-sub { max-width: 30ch; margin-top: 16px; font-size: 1rem; line-height: 1.45; font-variation-settings: "wdth" 86; font-weight: 560; color: var(--bone); }
#s5.light-sp .st-sp-name,
#s5.light-sp .st-sp-sub { color: #1A1A1A; text-shadow: none; }
.st-sw { display: flex; flex-wrap: wrap; gap: 8px; }
.st-woods { margin-top: calc(clamp(6.4px, 1.9vw, 26px) + 12px); }
.st-sp-fin { display: grid; }
.st-sp-fin > * { grid-area: 1 / 1; align-self: end; }
.st-paints,
.st-stains { opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s linear 0.35s; }
.st-paints.on,
.st-stains.on { opacity: 1; visibility: visible; transition: opacity 0.35s, visibility 0s; }
.st-sw-note { margin: 0 0 10px; font-size: 15px; font-weight: 560; font-variation-settings: "wdth" 86; color: var(--bone); }
#s5.light-sp .st-sw-note { color: var(--deep); font-weight: 650; text-shadow: 0 0 6px rgba(232, 233, 230, 0.7), 0 0 2px rgba(232, 233, 230, 0.6); }
.st-sw button {
  min-height: 44px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(232, 233, 230, 0.35);
  background: rgba(15, 15, 15, 0.7);
  color: var(--bone);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  font-variation-settings: "wdth" 86;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  touch-action: manipulation;
  transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s ease;
}
.st-sw button::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(232, 233, 230, 0.35); }
.st-sw button[aria-pressed="true"] { border-color: var(--accent-t); box-shadow: inset 0 0 0 1px var(--accent-t); }
.st-sw button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .st-sw button[aria-pressed="false"]:hover { border-color: rgba(232, 233, 230, 0.75); } }
@media (prefers-reduced-motion: reduce) { .st-sw button { transition: none; } .st-sw button:active { transform: none; } }
@media (max-width: 374px) { .st-woods button { padding-right: 11px; } }
@media (min-width: 900px) {
  html.gl #s5 .st-sticky { padding-bottom: 40px; }
  .st-sp-sub { font-size: 1.1875rem; }
}

/* ---------- the work: four chapters (pinned and wiped in with the 3D; stacked without it) ---------- */
#s8 .st-sticky { background: var(--deep); padding: 0; display: block; }
/* owner's note after round 10 (2026-11-04): no word or marker sits over the cabinetry in a photo. Each chapter is the photo
   and a band of words beside it (desktop) or under it (phones and portrait tablets); the photo keeps its own shape and is
   only cropped, from the edges its --op names, when a short screen has no room for all of it. The words sit on the dark
   ground, so their contrast no longer depends on the photo. */
.st-chap { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; padding-top: var(--header-h); background: var(--deep); }
.st-ph { position: relative; flex: 0 1 auto; width: 100%; aspect-ratio: var(--ar, 4 / 3); min-height: 120px; margin: auto 0; overflow: hidden; --r: 12px; }
.st-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
.st-seam { display: none; }
.st-t { position: relative; flex: 0 0 auto; padding: 14px var(--pad) calc(92px + env(safe-area-inset-bottom, 0px)); }
.st-marks { display: flex; gap: 10px; margin: 0 0 10px; padding: 0; list-style: none; }
.st-marks li { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 62; color: var(--soft); }
.st-marks li::after { content: ""; width: 12px; height: 2px; background: currentColor; }
.st-marks li.on { color: var(--bone); }
.st-marks li.on::after { width: 30px; }
.b1 .st-work-h { margin: 0 0 12px; max-width: none; font-size: 15px; line-height: 1.35; font-weight: 650; letter-spacing: 0; color: var(--bone); font-variation-settings: "wdth" 86; text-wrap: wrap; }
.b1 .st-chap h3 { overflow-wrap: normal; margin: 0; font-size: clamp(48px, 15vw, 190px); line-height: 0.88; font-weight: 900; font-variation-settings: "wdth" var(--w, 125); letter-spacing: -0.02em; color: var(--bone); }
.st-t p { margin-top: 10px; font-size: 1rem; line-height: 1.45; color: var(--bone); font-variation-settings: "wdth" 90; max-width: 40ch; }
.st-t p + p { margin-top: 4px; }
.st-where { display: block; margin-top: 6px; font-size: 13px; color: var(--soft); font-variation-settings: "wdth" 70; }
.st-t .st-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 2px; }
.st-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--bone); text-decoration: underline; text-decoration-color: var(--accent-t); text-underline-offset: 0.22em; text-decoration-thickness: 2px; font-variation-settings: "wdth" 86; }
@media (hover: hover) { .st-link:hover { color: var(--accent-t); } }
.st-rail { display: none; }
html.gl .st-chaps { position: absolute; inset: 0; }
html.gl .st-chap { position: absolute; inset: 0; height: auto; clip-path: inset(100% 0 0 0); }
html.gl .st-chap:first-child { clip-path: inset(0 0 0 0); }
html.gl .st-chap .st-ph { --r: 2.2px; -webkit-mask-image: radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + 0.5px)); mask-image: radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + 0.5px)); -webkit-mask-size: 12px 12px; mask-size: 12px 12px; }
html.gl .st-chap:first-child .st-ph { --r: 12px; }
html.gl .st-seam { display: block; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--bone); box-shadow: 0 0 12px 2px rgba(232, 233, 230, 0.35); opacity: 0; }
/* the shared chapter rail of the mockup sat over the photos; each chapter's band now carries its own marks (.st-marks) */
@media (min-width: 900px) {
  .st-chap { flex-direction: row-reverse; align-items: center; }
  /* the photo shrinks rather than crops, and stays clear of the floating button's corner (128 px: header gap and button) */
  .st-ph { flex: 0 0 auto; width: min(62%, calc((100vh - var(--header-h) - 128px) * var(--ar, 4 / 3))); width: min(62%, calc((100svh - var(--header-h) - 128px) * var(--ar, 4 / 3))); margin: 0 0 24px; }
  .st-t { flex: 1 1 auto; min-width: 0; padding: 0 32px 72px var(--pad); }
  .b1 .st-chap h3 { font-size: clamp(56px, 5.4vw, 112px); }
}
.st-more { position: relative; padding: 3rem var(--pad) 1rem; max-width: 1600px; margin: 0 auto; }
.st-more p { max-width: 62ch; font-size: 1.0625rem; line-height: 1.55; color: var(--bone); }

/* ---------- the visit: how a project works, and the form's first step ---------- */
.st-visit-scene { min-height: 100vh; }
.st-visit { position: relative; padding: 110px var(--pad) 120px; max-width: 1180px; margin: 0 auto; outline: 0; }
.b1 .st-visit h2 { margin: 0; max-width: none; font-size: clamp(42px, 11.6vw, 132px); line-height: 0.9; font-weight: 900; font-variation-settings: "wdth" var(--w, 108); letter-spacing: -0.015em; text-wrap: balance; }
.b1 .st-visit-how h3 { margin: 34px 0 0; font-size: 1.3125rem; }
.st-steps { margin: 18px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
.st-steps li { list-style: none; display: grid; grid-template-columns: 44px 1fr; gap: 10px; font-size: 1rem; line-height: 1.45; color: var(--soft); font-variation-settings: "wdth" 92; max-width: 46ch; }
.st-steps li::before { counter-increment: s; content: counter(s); font-size: 30px; line-height: 1; font-weight: 900; color: var(--bone); font-variation-settings: "wdth" 62; }
.st-steps b { color: var(--bone); font-weight: 700; }
.st-visit-how .lnk { margin-top: 12px; }
.st-trust { margin-top: 18px; max-width: 46ch; font-size: 1rem; line-height: 1.45; color: var(--bone); }
.st-call { margin-top: 18px; }
.st-callbtn { display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; justify-content: center; color: var(--accent-t); text-decoration: none; font-size: 1rem; }
.st-callbtn svg { flex: none; }
.st-callnum { color: var(--bone); }   /* the number is the button's text at every width (the words file), beside the icon */
.st-form { margin-top: 36px; }
.b1 .st-form h3 { margin: 0 0 16px; font-size: 1.3125rem; color: var(--bone); }
.st-form .form-card { transform-origin: 50% 100%; }
@media (min-width: 900px) {
  .st-visit { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px 64px; align-items: start; padding-top: 140px; }
  .st-visit > h2 { grid-column: 1 / -1; }
  .b1 .st-visit h2 { font-size: clamp(64px, 7.4vw, 124px); }
  .st-form { margin-top: 34px; }
}

/* ---------- below the story ---------- */
.b1-below { padding-top: var(--gap); }
.b1-services { display: grid; gap: 2rem; }
.b1-services > div { max-width: 46ch; }
.b1-services p { color: var(--bone); }
.b1-services .lnk { margin-top: 0.25rem; }
.b1-towns { display: grid; gap: 1.5rem 2rem; }
.b1 .b1-towns h3 { font-size: 1.0625rem; margin: 0 0 0.25rem; }
.b1-towns ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.b1-towns a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-t); text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
@media (hover: hover) { .b1-towns a:hover { color: var(--bone); } }
.b1-close { padding: var(--gap) 0; }
.b1-close p { max-width: 46ch; color: var(--soft); font-size: 1.125rem; margin-top: 16px; }
.b1 .b1-close .b1-big { margin: 0; max-width: 16ch; color: var(--bone); font-weight: 850; font-variation-settings: "wdth" 84; letter-spacing: -0.01em; font-size: clamp(36px, 10vw, 46px); line-height: 0.98; text-wrap: balance; }
/* the closing number is a link inside a sentence: underlined, not marked by colour alone (WCAG 1.4.1) */
.b1-big a { color: var(--accent-t); text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.12em; white-space: nowrap; }
@media (min-width: 640px) { .b1-towns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .b1-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
  .b1-close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .b1-close > * { grid-column: 5 / -1; }
  .b1 .b1-close .b1-big { font-size: clamp(56px, 5vw, 84px); }
}
@media (min-width: 1200px) { .b1-towns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- the floating action (both pages) ---------- */
.st-pill {
  position: fixed;
  z-index: 7;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(15, 15, 15, 0.86);   /* measured: the scene label keeps 4.5:1 over the white-painted cabinet */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(232, 233, 230, 0.16);
  transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.st-pill__state { font-size: 13px; color: var(--soft); padding: 0 10px 0 12px; font-variation-settings: "wdth" 70; font-weight: 600; min-width: 84px; white-space: nowrap; overflow: hidden; }
.st-pill__state i { display: inline-block; font-style: normal; }
.st-pill--solo .st-pill__state { display: none; }

/* Lenis (home page, a mouse only): the page's own smooth scrolling is switched off while Lenis runs, so find-in-page,
   focus and the browser's own jumps land at once and Lenis follows them (Lenis's own stylesheet rules, plus that) */
html.lenis { scroll-behavior: auto !important; }
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
.st-pill__cta { display: flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: #fff !important; text-decoration: none; font-weight: 750; font-variation-settings: "wdth" 100; font-size: 15px; white-space: nowrap; touch-action: manipulation; }
@media (hover: hover) { .st-pill__cta:hover { background: var(--accent-press); } }
.st-pill.is-hidden,
.st-pill.is-docked,
.st-pill.is-away { opacity: 0; transform: translateX(-50%) translateY(30px) scale(0.8); pointer-events: none; visibility: hidden; transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.45s; }
html:has(.site-nav.is-open) .st-pill { visibility: hidden; }
@media (min-width: 900px) {
  .st-pill { left: auto; right: 28px; transform: none; bottom: 28px; }
  .st-pill.is-hidden,
  .st-pill.is-docked,
  .st-pill.is-away { transform: translateY(30px) scale(0.8); }
}
@media (prefers-reduced-motion: reduce) { .st-pill { transition: none; } }

/* ---------- poster capture (the stills are rendered from the page itself, ?poster=N) ---------- */
html.posterMode #main,
html.posterMode .site-footer { visibility: hidden; }
html.posterMode :is(.site-header, .st-pill, .st-labels, .st-hots, .staging-banner, .skip-link) { display: none !important; }

/* ==========================================================================
   KITCHENS
   ========================================================================== */
.k-crumbs { padding-top: 4px; }
.k-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 15px; color: var(--soft); font-variation-settings: "wdth" 86; }
.k-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--soft); }
.k-crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--accent-t); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
.k-hero { padding-bottom: var(--gap); display: flex; flex-direction: column; }
.k-hero__copy { display: contents; }
.k-hero h1 { order: 0; margin: 12px 0 0; }
.k-hero .k-ph { order: 1; margin-top: 24px; }
.k-hero .k-lede,
.k-hero .b1-acts,
.k-hero .k-proof { order: 2; }
.b1 .k-lede { margin-top: 24px; font-size: 1.0625rem; line-height: 1.55; max-width: 46ch; color: var(--bone); }
.k-proof { margin-top: 28px; font-size: 1rem; }
.k-ph { margin: 0; display: block; }
.k-img { position: relative; display: block; overflow: hidden; background: #1a1a1a; aspect-ratio: 4 / 3; }
.k-img img { width: 100%; height: 100%; object-fit: cover; }
.k-tall .k-img { aspect-ratio: 4 / 5; }
.k-ph figcaption,
.k-cap { display: block; margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--bone); font-variation-settings: "wdth" 92; max-width: 62ch; }
.k-ph figcaption b,
.k-cap b { font-weight: 700; }
.k-sep { color: var(--soft); }
.k-desc { display: block; margin-top: 4px; color: var(--soft); }
.k-bleed { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }
.k-bleed figcaption { padding: 0 var(--pad); }
.k-tile { color: var(--bone); text-decoration: none; }
.k-tile:focus-visible .k-cap b { color: var(--accent-t); text-decoration: underline; text-underline-offset: 0.18em; }
@media (hover: hover) { .k-tile:hover .k-cap b { color: var(--accent-t); text-decoration: underline; text-underline-offset: 0.18em; } }
.k-tile .k-cap b { text-decoration: underline; text-decoration-color: var(--accent-t); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
/* the halftone resolve: a photo arrives as dots and fills in, once (motion allowed only) */
@property --r { syntax: "<length>"; inherits: false; initial-value: 9px; }
html.anim .k-ph.k-wait .k-img { --r: 2.2px; -webkit-mask-image: radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + 0.5px)); mask-image: radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + 0.5px)); -webkit-mask-size: 12px 12px; mask-size: 12px 12px; transition: --r 0.85s cubic-bezier(0.45, 0, 0.55, 1); }
html.anim .k-ph.k-wait.on .k-img { --r: 9px; }
html.anim .k-ph.k-wait.done .k-img { -webkit-mask-image: none; mask-image: none; }
.k-start { padding-bottom: var(--gap); }
.k-start > h2 { margin: 0 0 24px; color: var(--bone); }
.k-types caption { font-size: 1rem; }
.k-gal { display: grid; gap: 40px; }
.k-port .k-img { aspect-ratio: 4 / 5; }
.k-ctx { padding-bottom: var(--gap); }
.k-ctx__head h2 { margin: 0 0 24px; }
.k-ctx__head .b1-txt { margin-bottom: 32px; }
.k-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 12px; }
.k-tiles .k-cap { font-size: 14px; }
.k-moment { padding-bottom: var(--gap); }
.k-moment__txt { margin-top: 32px; }
.k-moment__txt h2 { margin: 0; }
.b1 .k-moment__txt p { margin-top: 16px; font-size: 20px; line-height: 1.4; max-width: 34ch; color: var(--bone); }
.b1 .k-moment__txt p .lnk { font-size: 1rem; }
.k-qidx ul { list-style: none; margin: 0; padding: 0; display: grid; }
.k-qidx li a { display: flex; align-items: center; min-height: 48px; padding: 6px 0; color: var(--bone); text-decoration: underline; text-decoration-color: rgba(126, 160, 245, 0.7); text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; font-size: 17px; line-height: 1.35; }
@media (hover: hover) { .k-qidx li a:hover { color: var(--accent-t); } }
/* lists of links (the questions index, the town lists): each row is its own 44 px target, so the kit's sentence-link
   tap area (14 px padding pulled back by a negative margin) is switched off here; with it the rows' tap areas overlapped
   and a tap on one question opened the next */
.b1 .k-qidx li a:not([class]),
.b1 .b1-towns li a:not([class]) { margin: 0; padding: 6px 0; }
.b1 .b1-towns li a:not([class]) { padding: 0; }
.k-next { padding-bottom: var(--gap); }
.b1 .k-next h2 { font-size: clamp(36px, 10vw, 46px); line-height: 0.98; max-width: 16ch; }
.b1 .k-next p { margin-top: 16px; font-size: 18px; color: var(--soft); }
.b1 .k-next p a { color: var(--accent-t); white-space: nowrap; }
@media (min-width: 560px) { .k-start .form-card { padding: 28px; } }
@media (min-width: 600px) and (max-width: 899px) { .k-tiles { gap: 32px 20px; } }
@media (min-width: 900px) {
  .k-crumbs { padding-top: 8px; }
  .k-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .k-hero__copy { display: block; grid-column: 1 / span 5; padding-bottom: 24px; }
  .k-hero h1 { max-width: 13ch; }
  .b1 .k-lede { font-size: 1.1875rem; }
  .k-hero .k-ph { grid-column: 6 / -1; margin: 0 calc(-1 * var(--pad)) 0 0; }
  .k-hero .k-ph figcaption { padding-right: var(--pad); }
  .k-start > .form-card { max-width: 720px; }
  .k-bleed { margin: 0; }
  .k-bleed figcaption { padding: 0; }
  .k-tall { max-width: 560px; }
  .k-gal { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .k-gal .k-port { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
  .k-gal .k-port .k-img { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
  .k-ctx__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; margin-bottom: 40px; }
  .k-ctx__head h2 { grid-column: 1 / span 4; margin-bottom: 0; }
  .k-ctx__head .b1-txt { grid-column: 5 / span 7; margin: 0; }
  .k-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .k-tiles .k-cap { font-size: 15px; }
  .k-moment { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .k-moment .k-ph { grid-column: 1 / span 7; }
  .k-moment__txt { grid-column: 8 / -1; margin: 0; }
  .b1 .k-moment__txt p { font-size: 26px; }
  .k-next { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .k-next > * { grid-column: 5 / -1; }
  .b1 .k-next h2 { font-size: clamp(56px, 5vw, 84px); }
}
@media (prefers-reduced-motion: reduce) {
  html.anim .k-ph.k-wait .k-img { -webkit-mask-image: none; mask-image: none; transition: none; }
}