@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-serif-display-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-serif-display-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/manrope-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --parchment: #F1ECE3;
  --limestone: #CEC7B9;
  --oxblood: #30121C;
  --ink: #0F2138;
  --night: #1C1A18;
  --brass: #C6A25C;
  --serif: 'DM Serif Display', 'Iowan Old Style', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Opacity ladder — primary / support / meta. Compose with the canvas-appropriate
     base color (night on light surfaces, parchment on dark). Apply consistently
     to replace the scattered rgba() values across the site. */
  --text:               var(--night);
  --text-support:       rgba(28, 26, 24, 0.72);
  --text-meta:          rgba(28, 26, 24, 0.6);
  --text-on-dark:           var(--parchment);
  --text-on-dark-support:   rgba(241, 236, 227, 0.78);
  --text-on-dark-meta:      rgba(241, 236, 227, 0.62);

  /* Reading width cap for body paragraphs — keeps copy from spanning the
     full container on desktop. ~32–44ch per design.md type discipline. */
  --reading-width: 42ch;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--parchment); color: var(--night); }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }

/* Limestone breath — the spacer that lets two darks coexist without the seam
   muddying. design.md §Color: "Limestone's first job is exactly this." */
.surface-breath {
  background: var(--limestone);
  height: 120px;
}
@media (max-width: 760px) {
  .surface-breath { height: 80px; }
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--parchment);
  color: var(--oxblood);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================
   Nav — pre-scroll: transparent with subtle top scrim so logo
   and CTA stay readable on any hero photo. Scrolled: a parchment
   band that fades + slides in from above.
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 96px;
  padding: 22px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 6;
  color: var(--parchment);
  background: transparent;
  /* Subtle top scrim — keeps the brass logo + CTA legible against
     any hero photo (including the gold tree tops on services /
     suburban) without looking like a real band yet. */
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 60%, rgba(0, 0, 0, 0) 100%);
  transition:
    min-height 320ms ease-out,
    padding 320ms ease-out,
    color 320ms ease-out,
    background-image 320ms ease-out;
}
/* The parchment band — a pseudo-element so we can animate it in
   independently of the layout. Slides down + dissolves on scroll. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--parchment);
  border-bottom: 1px solid rgba(198, 162, 92, 0.48);
  box-shadow: 0 12px 28px -18px rgba(15, 33, 56, 0.28);
  opacity: 0;
  transform: translateY(-100%);
  transition:
    opacity 360ms ease-out,
    transform 460ms cubic-bezier(.2, .6, .2, 1);
  z-index: -1;
  pointer-events: none;
}
.nav.scrolled {
  color: var(--ink);
  min-height: 60px;
  padding: 10px 40px;
  background-image: none;
}
.nav.scrolled::before {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Wordmark — slot holds two images stacked, cross-faded on scroll.
   Pre-scroll: serif HW (bold, brand-statement).
   Scrolled:   shield (compact, navigation-tool).
   ============================================================ */
.wordmark {
  position: relative;
  display: inline-block;
  width: 132px;
  height: 64px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: width 320ms ease-out, height 320ms ease-out;
}
/* Source images are square 1024×1024 (serif) and 896×896 (shield) with
   significant whitespace around the actual logo. background-image lets us
   zoom into the logo (auto height = X% of slot) so it reads at nav scale.
   The <img> tags in the markup still carry alt for accessibility but are
   visually hidden — background-image renders the logo. */
.wordmark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.wordmark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/hw-logo-serif.png');
  /* The HW sits in the upper-middle of the source — push focus up + zoom
     to ~210% of slot height so the HW reads big in the nav. */
  background-position: center 32%;
  background-size: auto 210%;
  background-repeat: no-repeat;
  transition: background-size 320ms ease-out;
}
.wordmark-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nav.scrolled .wordmark {
  width: 88px;
  height: 48px;
}
.nav.scrolled .wordmark::before {
  background-size: auto 230%;
  background-position: center 30%;
}

/* ============================================================
   Nav links + CTA. Pre-scroll color = parchment (visible on any
   hero). Scrolled color = ink (visible on parchment band).
   ============================================================ */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  transition: gap 240ms ease-out, font-size 240ms ease-out, color 240ms ease-out;
}
.nav-links a {
  text-decoration: none;
  opacity: 0.92;
  color: inherit;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  position: relative;
  transition: opacity 200ms ease-out, border-bottom-color 200ms ease-out, color 200ms ease-out;
}
.nav-links a + a::before {
  content: '·';
  color: var(--brass);
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  opacity: 0.9;
  letter-spacing: 0;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  opacity: 1;
  border-bottom-color: var(--brass);
}
.nav.scrolled .nav-links { font-size: 11px; gap: 22px; }
.nav.scrolled .nav-links a { color: var(--ink); opacity: 1; }
.nav.scrolled .nav-links a + a::before { left: -22px; color: var(--brass); }
.nav.scrolled .nav-links a:hover,
.nav.scrolled .nav-links a[aria-current="page"] {
  border-bottom-color: var(--brass);
  color: var(--oxblood);
}

/* CTA — pre-scroll: parchment text so it reads on any hero;
   brass underline carries the brand color cue. Scrolled: ink
   text on parchment band with the brass underline preserved.
   Arrow lives in ::after so we can hide it on mobile (where it
   reads as pointing at the Menu button). nowrap stops the arrow
   from wrapping below the text when the band compresses. */
.nav-cta {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--parchment);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color 200ms ease-out, border-bottom-color 200ms ease-out;
}
.nav-cta::after {
  content: ' \2192'; /* → */
  margin-left: 6px;
  transition: margin-left 220ms ease-out;
  display: inline-block;
}
.nav-cta:hover::after { margin-left: 10px; }
.nav-cta:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
}
.nav.scrolled .nav-cta {
  color: var(--ink);
  font-size: 11px;
  border-bottom-color: var(--brass);
}
.nav.scrolled .nav-cta:hover { color: var(--oxblood); }

/* Current-page CTA — when .nav-cta carries aria-current="page" (e.g. on /book),
   dim and suppress interaction so it reads as "you are here" rather than a fresh
   target. Mirrors the .nav-links a[aria-current="page"] indicator. */
.nav-cta[aria-current="page"] {
  pointer-events: none;
  opacity: 0.55;
}
.nav-cta[aria-current="page"]::after { display: none; }
.nav.scrolled .nav-cta[aria-current="page"] { opacity: 0.55; }
.menu-trigger {
  display: none; background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: inherit;
  min-height: 44px; min-width: 44px; padding: 0;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease-out, border-bottom-color 200ms ease-out;
}
.menu-trigger:hover { border-bottom-color: var(--brass); }
.nav.scrolled .menu-trigger { color: var(--ink); }
/* Editorial mobile overlay — parchment ground, ink type, brass hairlines.
   Strips the map image + scrim + eyebrow atmosphere that read as dated. */
.menu-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 64px 32px;
  background: var(--parchment);
  color: var(--page-black, var(--night));
}
.menu-overlay.open { display: flex; }
/* Atmospheric layer — DC map ghosted behind a parchment scrim so the
   menu reads as a place, not a list. Restored 2026-06-01. */
.menu-map {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.22;
  filter: sepia(0.25) saturate(0.7);
  pointer-events: none;
  z-index: 0;
}
.menu-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 38%,
      rgba(247, 240, 224, 0.55) 0%,
      rgba(247, 240, 224, 0.94) 72%);
  z-index: 1;
  pointer-events: none;
}
.menu-eyebrow {
  position: absolute; top: 28px; left: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  z-index: 3;
}
.menu-close {
  position: absolute; top: 24px; right: 24px;
  background: none; border: 0;
  border-bottom: 1px solid var(--brass);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--oxblood); z-index: 3;
  min-height: 40px; padding: 4px 0;
  transition: color 200ms ease-out, border-bottom-color 200ms ease-out;
}
.menu-close:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.menu-links {
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: min(620px, calc(100% - 64px));
  /* Stronger top + bottom brass rules so the panel reads as deliberate. */
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
  padding: 8px 0;
}
.menu-links a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 20px 4px;
  text-decoration: none;
  color: var(--oxblood);
  /* Brass inter-row hairline */
  border-bottom: 1px solid rgba(198, 162, 92, 0.42);
  transition: padding-left 220ms ease-out, background 220ms ease-out;
}
.menu-links a:last-child { border-bottom: 0; }
/* Entrance is scoped to the open state so it (re)fires on the
   display:none → flex transition. iOS Safari won't run an animation that was
   attached while the element was display:none, which left the links stuck at
   opacity:0 (invisible) on phones. Links are visible by default now, so they
   can never be stuck hidden if the animation doesn't play; `backwards` keeps
   them hidden only during the stagger delay while the menu is open. */
.menu-overlay.open .menu-links a { animation: menu-link-in 360ms ease-out backwards; }
.menu-overlay.open .menu-links a:nth-child(1) { animation-delay: 120ms; }
.menu-overlay.open .menu-links a:nth-child(2) { animation-delay: 180ms; }
.menu-overlay.open .menu-links a:nth-child(3) { animation-delay: 240ms; }
.menu-overlay.open .menu-links a:nth-child(4) { animation-delay: 300ms; }
.menu-overlay.open .menu-links a:nth-child(5) { animation-delay: 360ms; }
@keyframes menu-link-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero poster settle — used by index.threshold-image and services
   .hero-services-v2 hero img on first paint. Single canonical home;
   pages reference via `animation: hero-settle …`. */
@keyframes hero-settle {
  0%   { transform: scale(1.045); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scale(1.0);   opacity: 1; }
}
.menu-link-name {
  font-family: var(--serif);
  font-size: clamp(28px, 4.2vw, 40px);
  letter-spacing: -0.014em;
  color: var(--oxblood);
  line-height: 1;
}
/* Mono uppercase tag — matches the eyebrow's voice and lets brass actually pop
   instead of competing with the serif name in italic. */
.menu-link-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1;
  align-self: center;
  font-weight: 500;
}
.menu-links a:hover { padding-left: 12px; background: rgba(198, 162, 92, 0.06); }
.menu-links a[aria-current="page"] .menu-link-name::after {
  content: ' →';
  color: var(--brass);
  font-style: normal;
}
.menu-meta {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(48, 18, 28, 0.6);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 3;
  white-space: nowrap;
}
.menu-meta a {
  color: var(--oxblood);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
  transition: opacity 200ms ease-out;
}
.menu-meta a:hover { opacity: 0.75; }
.menu-dot { color: var(--brass); opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .menu-overlay.open .menu-links a { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   Menu overlay — DARK variant. Opt in by adding .menu-overlay--dark
   to the overlay container (used on the homepage so the menu reads
   as a continuation of the dark threshold). Other pages keep the
   parchment default above. Only the diffs from canonical are
   declared here — everything else is inherited.
   ============================================================ */
.menu-overlay--dark {
  background: var(--oxblood);
  color: var(--parchment);
  padding: 56px 40px;
}
.menu-overlay--dark .menu-map {
  filter: brightness(0.42) saturate(0.7) contrast(1.05);
  opacity: 0.55;
}
.menu-overlay--dark .menu-scrim {
  background:
    radial-gradient(ellipse 100% 70% at center,
      rgba(28, 14, 20, 0.20) 0%,
      rgba(28, 14, 20, 0.55) 75%,
      rgba(28, 14, 20, 0.85) 100%);
}
.menu-overlay--dark .menu-eyebrow {
  top: 40px; left: 48px;
  font-size: 12px;
  letter-spacing: 0.28em;
  font-weight: 500;
}
.menu-overlay--dark .menu-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--brass);
  vertical-align: middle;
  margin-right: 14px;
}
.menu-overlay--dark .menu-close {
  top: 32px; right: 40px;
  border: 1px solid rgba(198, 162, 92, 0.55);
  border-bottom: 1px solid rgba(198, 162, 92, 0.55);
  border-radius: 999px;
  color: var(--brass);
  padding: 8px 18px;
  transition: background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.menu-overlay--dark .menu-close:hover {
  background: var(--brass);
  color: var(--oxblood);
  border-color: var(--brass);
  border-bottom-color: var(--brass);
}
.menu-overlay--dark .menu-links a {
  color: var(--parchment);
  border-bottom-color: rgba(198, 162, 92, 0.22);
}
.menu-overlay--dark .menu-link-name {
  color: var(--parchment);
}
.menu-overlay--dark .menu-meta {
  color: rgba(241, 236, 227, 0.55);
}
.menu-overlay--dark .menu-meta a {
  color: var(--brass);
}
.menu-overlay--dark .menu-dot {
  color: inherit;
  opacity: 0.35;
}

.spread {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  padding: 80px 40px 60px;
  overflow: hidden;
}
.spread--short { min-height: 72vh; }
.spread--soft { background: var(--parchment); }
.spread--stone { background: var(--limestone); }
.spread--warm { background: var(--oxblood); color: var(--parchment); }
.spread--cool { background: var(--ink); color: var(--parchment); }
.spread--warm + .spread--cool,
.spread--cool + .spread--warm { border-top: 32px solid var(--limestone); }


.hero {
  background: var(--oxblood);
  color: var(--parchment);
  min-height: 100vh;
  grid-template-rows: 100vh;
  padding: 0;
}
.hero-media {
  grid-column: 1 / 8;
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--oxblood);
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 58%, rgba(61,43,53,0.72) 100%);
  pointer-events: none;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-caption {
  position: absolute;
  bottom: 32px;
  left: 32px;
  max-width: 280px;
  z-index: 2;
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  opacity: 0.82;
}
.hero-text {
  grid-column: 8 / 13;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 56px 96px 48px;
  position: relative;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.78;
}
.hero .eyebrow { position: absolute; top: 128px; left: 48px; }
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--brass);
  vertical-align: middle;
  margin-right: 12px;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 7.4vw, 136px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  max-width: 8.5ch;
}
.hero-title em,
.close-headline em,
.ledger-anchor em,
.statement-quote em,
.note-copy em { font-style: italic; color: var(--brass); }
.hero-lead {
  max-width: 36ch;
  margin-top: 34px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(241,236,227,0.78);
}
.hero-footer, .link-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}
.brass-rule { display: block; width: 56px; height: 1px; background: var(--brass); }
.text-cta {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--brass);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--brass);
}

.statement {
  background: var(--parchment);
  grid-template-rows: auto 1fr auto;
  padding-top: 112px;
  padding-bottom: 112px;
}
.statement-kicker {
  grid-column: 9 / 13;
  grid-row: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--oxblood);
  text-align: right;
}
.statement-quote {
  grid-column: 2 / 11;
  grid-row: 2;
  align-self: center;
  margin-top: 32px;
  font-family: var(--serif);
  font-size: clamp(38px, 5.2vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.statement-quote em { color: var(--oxblood); }
.statement-footer {
  grid-column: 2 / 13;
  grid-row: 3;
  padding-top: 32px;
  border-top: 1px solid rgba(30,26,29,0.18);
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr auto;
  column-gap: 56px;
  align-items: end;
}
.small-copy { font-size: 13.5px; line-height: 1.55; opacity: 0.72; }
.mono-meta {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.65;
}

.image-ledger {
  background: var(--ink);
  color: var(--parchment);
  padding: 0;
  grid-template-rows: 100vh;
}
.image-pane { grid-column: 1 / 7; position: relative; height: 100vh; overflow: hidden; border-radius: 16px; }
.image-pane img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.image-pane::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(61,43,53,0.18), rgba(61,43,53,0.46)); }
.image-pane .caption {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 2;
  max-width: 260px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
  opacity: 0.72;
}
.ledger-body {
  grid-column: 7 / 13;
  padding: 112px 56px 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-self: stretch;
}
.ledger-anchor {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  max-width: 14ch;
}
.ledger-rows { display: flex; flex-direction: column; }
.ledger-row {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 32px;
  padding: 22px 0;
  border-top: 1px solid rgba(241,236,227,0.16);
  align-items: baseline;
}
.ledger-row:last-child { border-bottom: 1px solid rgba(241,236,227,0.16); }
.key {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.68;
}
.val {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.32;
  letter-spacing: -0.005em;
}
.note-spread {
  background: var(--limestone);
  min-height: 82vh;
  align-items: center;
}
.note-label { grid-column: 2 / 4; align-self: start; margin-top: 14px; color: var(--oxblood); }
.note-spread > div:last-child { grid-column: 4 / 12; }
.note-copy {
  font-family: var(--serif);
  font-size: clamp(32px, 4.1vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.016em;
}
/* Intentional override: in the .note-spread / .signed-note context, em
   resolves to oxblood (legible on limestone) rather than the default brass
   from the group rule above. Verified design decision — do not "normalize". */
.note-copy em { color: var(--oxblood); }
.note-attribution { grid-column: 4 / 9; margin-top: 42px; color: var(--night); }

.split-list {
  background: var(--parchment);
  min-height: 92vh;
  align-items: center;
}
.split-title {
  grid-column: 2 / 6;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--oxblood);
  max-width: 13ch;
}
.split-title em { font-style: italic; }
.list-panel { grid-column: 6 / 12; border-top: 1px solid rgba(61,43,53,0.22); }
.list-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(61,43,53,0.22);
  align-items: baseline;
}
.list-num { font-family: var(--serif); font-size: 32px; color: var(--oxblood); line-height: 1; }
.list-copy { font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.3; }
.list-copy em { font-style: italic; color: var(--oxblood); }
.list-meta { text-align: right; color: rgba(30,26,29,0.56); }

.detail-pair {
  background: var(--parchment);
  min-height: 88vh;
  align-items: center;
}
.detail-image { grid-column: 2 / 7; height: min(58vw, 620px); position: relative; overflow: hidden; background: var(--limestone); border-radius: 16px; }
.detail-image img { width: 100%; height: 100%; object-fit: cover; }
.detail-text { grid-column: 8 / 12; }
.detail-title {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: clamp(34px, 4.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.018em;
}
.detail-title em { color: var(--oxblood); font-style: italic; }

.book-spine {
  background: var(--limestone);
  min-height: auto;
  padding-top: 112px;
  padding-bottom: 112px;
}
.book-card {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  column-gap: 56px;
  background: var(--parchment);
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
  padding: 64px 56px;
}
.book-card .form-lead { grid-column: 1; }
.book-card .book-form { grid-column: 2; }
.form-trust {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid rgba(61,43,53,0.18);
  border-bottom: 1px solid rgba(61,43,53,0.18);
  margin-bottom: 32px;
}
.form-trust .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oxblood);
  opacity: 0.7;
}
.form-trust .phone {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  color: var(--oxblood);
  text-decoration: none;
  border-bottom: 1px solid rgba(61,43,53,0.32);
  padding-bottom: 2px;
}
.form-trust .phone:hover { border-bottom-color: var(--oxblood); }
.form-trust .note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--night);
  opacity: 0.6;
  text-align: right;
}
.form-lead { grid-column: 2 / 6; }
.form-lead h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--oxblood);
  max-width: 12ch;
}
.form-lead h2 em { font-style: italic; }
.form-lead p { margin-top: 32px; font-size: 19px; line-height: 1.62; max-width: 33ch; }
.promise { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(61,43,53,0.22); display: grid; gap: 10px; }
.promise b { display: block; margin-top: 2px; font-family: var(--serif); font-weight: 400; font-size: 18px; letter-spacing: -0.01em; color: var(--night); }
.book-form { grid-column: 6 / 12; display: grid; gap: 32px; }
.ride-set { border: 0; display: grid; gap: 14px; }
.ride-set legend, .field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.ride-options { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ride-options label { position: relative; cursor: pointer; font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.005em; }
.ride-options input { position: absolute; opacity: 0; pointer-events: none; }
.ride-options span { border-bottom: 1px solid transparent; padding-bottom: 2px; }
.ride-options label:has(input:checked) span { color: var(--oxblood); border-bottom-color: var(--brass); }
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.field-grid.three { grid-template-columns: 1.2fr 1fr 1fr; }
.field { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid rgba(61,43,53,0.22); }
.field.full { grid-column: 1 / -1; }
.field em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--brass); }
.field input, .field textarea {
  width: 100%;
  border: 0;
  background: transparent;
  outline: 0;
  color: var(--night);
  font-size: 18px;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(30,26,29,0.36); font-family: var(--sans); font-size: 16px; }
.form-submit { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding-top: 18px; border-top: 1px solid rgba(61,43,53,0.22); }
.form-submit button { min-height: 44px; border: 0; background: transparent; color: var(--oxblood); cursor: pointer; font-family: var(--serif); font-size: clamp(26px, 2.5vw, 36px); letter-spacing: -0.012em; border-bottom: 1px solid var(--brass); padding: 4px 0; }
.form-submit button:hover { border-bottom-color: var(--oxblood); }
.form-confirm { display: grid; gap: 14px; align-items: baseline; }
.form-confirm .brass-rule { width: 56px; }
.form-confirm .confirm-lead { font-family: var(--serif); font-size: clamp(26px, 2.5vw, 36px); letter-spacing: -0.012em; color: var(--oxblood); }

.close {
  background: var(--oxblood);
  color: var(--parchment);
  min-height: 68vh;
  grid-template-rows: 1fr auto;
  align-items: center;
}
.close-headline {
  grid-column: 2 / 9;
  grid-row: 1;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.022em;
}
.close-meta { grid-column: 9 / 13; grid-row: 1; display: flex; flex-direction: column; gap: 24px; align-self: center; text-align: right; }
.close-row { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.close-row .val { font-family: var(--serif); font-size: 22px; letter-spacing: -0.008em; }
.close-row .val a { text-decoration: none; border-bottom: 1px solid rgba(184,148,79,0.5); padding-bottom: 2px; }
.close-row .val a:hover { border-bottom-color: var(--brass); }
.close-cta {
  grid-column: 2 / 13;
  grid-row: 2;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid rgba(184,148,79,0.4);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.close-cta a { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 56px); letter-spacing: -0.02em; text-decoration: none; color: var(--brass); border-bottom: 1px solid var(--brass); padding-bottom: 4px; line-height: 1; }
.brand-seal {
  width: min(260px, 52vw);
  height: auto;
  opacity: 0.82;
  mix-blend-mode: screen;
}

/* Close-ask — the unified V1 close pattern used across every page. Eyebrow
   ("The ask"), italic question, brass divider, prompt, italic brass Book CTA,
   and a small sign-off. Followed on every page by .book-meta with the contact
   row. Lifted from about.astro on 2026-06-01. */
.close-ask {
  background: var(--oxblood);
  color: var(--parchment);
  min-height: 70vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 24px;
  padding: 96px 40px 72px;
}
.close-ask-eyebrow {
  grid-column: 2 / 11;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.close-ask-eyebrow .brass-rule { width: 36px; height: 1px; background: var(--brass); display: inline-block; }
.close-ask-inner {
  grid-column: 2 / 11;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-self: center;
  padding: 64px 0;
}
.close-ask-question {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 7.4vw, 124px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--parchment);
  max-width: 16ch;
  margin: 0 0 40px 0;
}
.close-ask-question em {
  font-style: italic;
  color: var(--brass);
}
.close-ask-divider {
  width: 64px;
  height: 1px;
  background: var(--brass);
  opacity: 0.7;
  border: 0;
  margin: 0 0 32px 0;
}
.close-ask-prompt {
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--parchment);
  opacity: 0.82;
  max-width: 42ch;
  margin: 0 0 56px 0;
}
.close-ask-cta {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  color: var(--brass);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  max-width: max-content;
  border-bottom: 1px solid rgba(184, 148, 79, 0.55);
  padding-bottom: 8px;
  transition: color 200ms ease-out, border-bottom-color 200ms ease-out;
}
.close-ask-cta .close-ask-arrow {
  font-style: normal;
  display: inline-block;
  margin-left: 0.22em;
  font-size: 0.6em;
  transform: translateY(-0.08em);
  transition: transform 220ms ease-out;
}
.close-ask-cta:hover { color: #d8b06b; border-bottom-color: var(--brass); }
.close-ask-cta:hover .close-ask-arrow { transform: translateY(-0.08em) translateX(0.18em); }
.close-ask-sign {
  grid-column: 2 / 11;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(184, 148, 79, 0.28);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--parchment);
  opacity: 0.62;
}
.close-ask-sign-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--brass);
  opacity: 1;
  text-transform: none;
}
@media (max-width: 760px) {
  .close-ask {
    min-height: auto;
    padding: 56px 20px 48px;
    grid-template-columns: repeat(6, 1fr);
  }
  .close-ask-eyebrow {
    grid-column: 1 / 7;
    font-size: 10.5px;
    letter-spacing: 0.22em;
  }
  .close-ask-eyebrow .brass-rule { width: 22px; }
  .close-ask-inner {
    grid-column: 1 / 7;
    padding: 32px 0 24px;
  }
  .close-ask-question {
    font-size: clamp(26px, 6.4vw, 36px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    max-width: 14ch;
    margin-bottom: 22px;
  }
  .close-ask-divider { width: 36px; margin-bottom: 20px; }
  .close-ask-prompt {
    font-size: 15px;
    line-height: 1.45;
    max-width: 100%;
    margin-bottom: 36px;
  }
  .close-ask-cta { font-size: clamp(26px, 7vw, 36px); padding-bottom: 6px; }
  .close-ask-sign {
    grid-column: 1 / 7;
    margin-top: 32px;
    padding-top: 20px;
    font-size: 9.5px;
    letter-spacing: 0.2em;
  }
  .close-ask-sign-mark { font-size: 13px; }
}

.settle-block { opacity: 0; transform: translateY(8px); transition: opacity 520ms ease-out, transform 520ms ease-out; }
.settle-block.in { opacity: 1; transform: none; }

/* ——— About: drivers (asymmetric two-up) ——— */
.drivers {
  background: var(--oxblood);
  color: var(--parchment);
  min-height: auto;
  padding-top: 120px;
  padding-bottom: 120px;
  align-items: start;
  row-gap: 56px;
}
.drivers-eyebrow {
  grid-column: 2 / 6;
  grid-row: 1;
  color: var(--brass);
  align-self: start;
}
.driver {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 24px;
  row-gap: 28px;
}
.driver--lead { grid-column: 2 / 9; grid-row: 2; }
.driver--counter {
  grid-column: 9 / 13;
  grid-row: 2;
  margin-top: 96px;
}
.driver-rail {
  grid-column: 1;
  grid-row: 1 / span 3;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: 0.78;
  align-self: start;
}
.driver-frame {
  grid-column: 2;
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(241,236,227,0.04), rgba(241,236,227,0.10)),
    url('/hw-logo-shield.png') center/40% no-repeat;
  border: 1px solid rgba(184,148,79,0.45);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  filter: grayscale(1);
}
.driver--counter .driver-frame { aspect-ratio: 3 / 4; }
.driver-mark { display: inline-flex; opacity: 0.55; }
.driver-mark img { width: 40px; height: 40px; object-fit: contain; }
.driver-pending {
  align-self: flex-end;
  color: var(--brass);
  opacity: 0.85;
}
.driver-meta {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid rgba(184,148,79,0.45);
  padding-top: 18px;
}
.driver-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--parchment);
}
.driver--counter .driver-name { font-size: clamp(32px, 3.2vw, 52px); }
.driver-role { color: var(--brass); }
.driver-bio {
  grid-column: 2;
  font-family: var(--serif);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.003em;
  color: rgba(241,236,227,0.86);
  max-width: 42ch;
}

/* ——— About: values stack (oversized numerals + alternating cadence) ——— */
.values {
  background: var(--parchment);
  min-height: auto;
  padding-top: 128px;
  padding-bottom: 128px;
  align-items: start;
}
.values-title {
  grid-column: 2 / 8;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--oxblood);
  max-width: 14ch;
}
.values-title em { font-style: italic; color: var(--brass); }
.values-stack {
  grid-column: 2 / 13;
  list-style: none;
  margin-top: 72px;
  display: flex;
  flex-direction: column;
}
.value {
  position: relative;
  display: grid;
  align-items: baseline;
  border-top: 1px solid rgba(61,43,53,0.22);
  padding: 36px 0;
}
.value:last-child { border-bottom: 1px solid rgba(61,43,53,0.22); }
.value--large {
  grid-template-columns: 220px 1fr 140px;
  column-gap: 48px;
}
.value--inset {
  grid-template-columns: 120px 1fr 140px;
  column-gap: 32px;
  padding-left: 96px;
  background: linear-gradient(180deg, rgba(61,43,53,0.025), transparent);
}
.value--rhyme::before {
  content: '';
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  background: url('/hw-logo-shield.png') center/contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
.value-num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--brass);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.value--large .value-num { font-size: clamp(96px, 11vw, 180px); }
.value--inset .value-num { font-size: clamp(56px, 5.6vw, 88px); opacity: 0.78; }
.value-text {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--night);
  max-width: 28ch;
}
.value--inset .value-text { font-size: clamp(19px, 1.6vw, 26px); }
.value-text em { font-style: italic; color: var(--oxblood); }
.value-tag {
  align-self: center;
  text-align: right;
  color: rgba(30,26,29,0.56);
}

/* ——— About: signed note (good-friction left offset + brass rule) ——— */
.signed-note { padding-top: 132px; padding-bottom: 132px; }
.signed-note .note-label { color: var(--oxblood); }
.signed-note > div:last-child { position: relative; padding-top: 28px; }
.signed-rule {
  display: block;
  width: 96px;
  height: 1px;
  background: var(--brass);
  margin-bottom: 28px;
  transform: translateX(-32px);
}
.signed-note .note-attribution { margin-top: 36px; color: var(--oxblood); opacity: 0.78; }

/* ——— Suburban: detail strip (3-up desktop, snap-scroll mobile) ——— */
/* Cabinet of details — replaces the old 3-up detail strip. One dominant
   cabin photo, a vertical ledger rail of work-facts, two small inset
   detail crops arranged asymmetrically. design.md "leverage" + the
   editorial restraint rec. */
.cabinet {
  background: var(--parchment);
  min-height: auto;
  padding: 128px 40px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 48px;
  align-items: start;
}
.cabinet-head {
  grid-column: 2 / 8;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cabinet-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--oxblood);
  max-width: 14ch;
}
.cabinet-title em { font-style: italic; color: var(--brass); }
.cabinet-hero {
  grid-column: 2 / 9;
  grid-row: 2 / 5;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--limestone);
}
.cabinet-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cabinet-ledger {
  grid-column: 9 / 13;
  grid-row: 2;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(28, 26, 24, 0.18);
}
.cabinet-row {
  display: grid;
  grid-template-columns: minmax(110px, 130px) 1fr;
  column-gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(28, 26, 24, 0.18);
  align-items: baseline;
}
.cabinet-row-key {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--oxblood);
}
.cabinet-row-val {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.4;
  color: var(--text);
}
.cabinet-inset {
  margin: 0;
  overflow: hidden;
  background: var(--limestone);
}
.cabinet-inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cabinet-inset--charger {
  grid-column: 9 / 12;
  grid-row: 3;
  aspect-ratio: 4 / 3;
}
.cabinet-inset--mats {
  grid-column: 10 / 13;
  grid-row: 4;
  aspect-ratio: 1 / 1;
}

@media (max-width: 760px) {
  .cabinet {
    padding: 80px 20px 88px;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 8px;
    row-gap: 28px;
  }
  .cabinet-head {
    grid-column: 1 / 7;
    grid-row: 1;
  }
  .cabinet-title { font-size: clamp(32px, 9vw, 56px); max-width: none; }
  .cabinet-hero {
    grid-column: 1 / 7;
    grid-row: 2;
  }
  .cabinet-ledger {
    grid-column: 1 / 7;
    grid-row: 3;
  }
  .cabinet-row {
    grid-template-columns: 84px 1fr;
    column-gap: 16px;
    padding: 18px 0;
  }
  .cabinet-inset--charger {
    grid-column: 1 / 7;
    grid-row: 4;
  }
  .cabinet-inset--mats {
    grid-column: 1 / 7;
    grid-row: 5;
  }
}

/* Detail strip — 3-up with horizontal scroll on mobile (restored to the
   original layout). */
.detail-strip {
  background: var(--parchment);
  min-height: auto;
  padding-top: 128px;
  padding-bottom: 128px;
  align-items: start;
}
.detail-strip-head {
  grid-column: 2 / 8;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.detail-strip-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--oxblood);
  max-width: 14ch;
}
.detail-strip-title em { font-style: italic; color: var(--brass); }
.detail-strip-rail {
  grid-column: 2 / 13;
  list-style: none;
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.detail-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.detail-card-photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--limestone);
}
.detail-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.detail-card-meta {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: baseline;
  border-top: 1px solid rgba(61,43,53,0.22);
  padding-top: 18px;
}
.detail-card-num {
  color: var(--brass);
  font-style: italic;
}
.detail-card-text {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.4;
  letter-spacing: -0.004em;
  color: var(--night);
  max-width: 28ch;
}

@media (max-width: 760px) {
  .nav { min-height: 76px; padding: 16px 24px; }
  .nav.scrolled { min-height: 54px; padding: 8px 24px; }
  .nav-links { display: none; }
  .menu-trigger { display: block; font-size: 12px; }
  .wordmark { width: 88px; height: 52px; }
  .wordmark::before { background-size: auto 220%; background-position: center 30%; }
  .nav.scrolled .wordmark { width: 44px; height: 42px; }
  /* Mobile nav: ARRANGE A RIDE + MENU on the right side, balanced. The
     nav has the same horizontal padding in both states so MENU sits the
     same distance from the right edge whether scrolled or not. */
  .nav-actions {
    gap: 0;
    margin-right: 16px;
  }
  /* Drop the arrow on mobile — it visually pointed at Menu. The brass
     underline still signals the CTA is clickable. */
  .nav-cta { font-size: 11px; }
  .nav-cta::after { display: none; }
  /* Menu trigger sits flush-right inside the nav padding; no extra padding
     so the visual edge of MENU matches the right inset of the wordmark. */
  .menu-trigger { padding: 0; letter-spacing: 0.16em; }
  .menu-overlay { padding: 24px 20px 28px; }
  .menu-eyebrow { top: 22px; left: 20px; }
  .menu-eyebrow { top: 22px; left: 22px; font-size: 10px; }
  .menu-eyebrow::before { width: 16px; margin-right: 10px; }
  .menu-close { top: 18px; right: 18px; font-size: 10px; }
  .menu-links { width: calc(100% - 16px); padding: 8px 0; }
  .menu-links a { padding: 14px 4px; }
  .menu-meta { flex-direction: column; gap: 6px; bottom: 24px; text-align: center; }
  .menu-meta .menu-dot { display: none; }
  .spread { grid-template-columns: repeat(6, 1fr); column-gap: 8px; padding: 64px 20px 48px; }

  .hero { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 100vh; padding: 0; }
  .hero-media { grid-column: 1 / -1; grid-row: 1; height: 100vh; }
  .hero-media::after { background: linear-gradient(180deg, rgba(61,43,53,0.55) 0%, transparent 24%, transparent 52%, rgba(61,43,53,0.94) 100%); }
  .hero-caption { display: none; }
  .hero-text { grid-column: 1 / -1; grid-row: 1; z-index: 3; padding: 0 24px 48px; justify-content: flex-end; }
  .hero .eyebrow { top: 116px; left: 24px; font-size: 11.5px; }
  .hero-title { font-size: clamp(52px, 15vw, 112px); max-width: 9ch; }
  .hero-lead { font-size: 16px; max-width: 30ch; margin-top: 24px; }

  .statement { padding: 88px 20px 64px; min-height: 86vh; }
  .statement-kicker, .statement-quote, .statement-footer { grid-column: 1 / 7; }
  .statement-kicker { text-align: left; font-size: 16px; }
  .statement-quote { font-size: clamp(34px, 8.4vw, 62px); margin-top: 36px; margin-bottom: 36px; }
  .statement-footer { grid-template-columns: 1fr; gap: 16px; }
  .statement-footer > div:nth-child(2) { display: none; }

  .image-ledger { grid-template-columns: 1fr; grid-template-rows: 54vh auto; min-height: auto; }
  .image-pane { grid-column: 1 / -1; grid-row: 1; height: 54vh; border-radius: 0; }
  .ledger-body { grid-column: 1 / -1; grid-row: 2; padding: 48px 20px 56px; gap: 36px; }
  .ledger-anchor { font-size: clamp(36px, 9.5vw, 60px); }
  .ledger-row { grid-template-columns: 92px 1fr; gap: 18px; padding: 16px 0; }
  .val { font-size: 17px; }

  .note-label, .note-copy, .note-attribution,
  .split-title, .list-panel, .detail-image, .detail-text, .form-lead, .book-form,
  .close-headline, .close-meta, .close-cta { grid-column: 1 / 7; }
  .note-spread > div:last-child { grid-column: 1 / 7; }
  .note-copy { font-size: clamp(30px, 8vw, 56px); margin-top: 30px; }
  .split-list, .detail-pair, .book-spine { min-height: auto; padding-top: 88px; padding-bottom: 72px; }
  .list-panel { margin-top: 32px; }
  .list-row { grid-template-columns: 42px 1fr; gap: 14px; }
  .list-meta { grid-column: 2; text-align: left; margin-top: 4px; }
  .detail-image { height: clamp(280px, 80vw, 440px); }

  /* detail strip — horizontal snap-scroll on mobile */
  .detail-strip { padding: 80px 0 80px; }
  .detail-strip-head { grid-column: 1 / 7; padding: 0 20px; }
  .detail-strip-title { font-size: clamp(36px, 10vw, 60px); }
  .detail-strip-rail {
    grid-column: 1 / 7;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    margin-top: 40px;
    gap: 16px;
    padding: 0 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .detail-strip-rail::-webkit-scrollbar { display: none; }
  .detail-card { scroll-snap-align: start; }
  .detail-card-photo { aspect-ratio: 3 / 4; }
  .detail-card-text { font-size: 17px; }
  .detail-text { margin-top: 32px; }
  .field-grid, .field-grid.three { grid-template-columns: 1fr; }
  .book-form { margin-top: 0; }
  .book-card {
    grid-column: 1 / 7;
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 40px 20px;
  }
  .book-card .form-lead,
  .book-card .book-form { grid-column: 1; }
  .book-card .book-form { margin-top: 40px; }
  .form-trust { grid-template-columns: 1fr; gap: 10px; padding: 14px 0; margin-bottom: 24px; }
  .form-trust .note { text-align: left; }
  .form-submit { align-items: flex-start; flex-direction: column; }

  /* drivers — asymmetric stack with horizontal offset on dad */
  .drivers { padding: 72px 20px 80px; row-gap: 56px; }
  .drivers-eyebrow { grid-column: 1 / 7; grid-row: 1; }
  .driver { grid-template-columns: 18px 1fr; column-gap: 16px; row-gap: 22px; }
  .driver--lead { grid-column: 1 / 7; grid-row: 2; }
  .driver--counter {
    grid-column: 1 / 7;
    grid-row: 3;
    margin-top: 16px;
    padding-left: 20px;
    border-left: 1px solid rgba(184,148,79,0.35);
  }
  .driver-rail { font-size: 9.5px; letter-spacing: 0.24em; }
  .driver-frame { padding: 16px; }
  .driver-name { font-size: clamp(38px, 11vw, 60px); }
  .driver--counter .driver-name { font-size: clamp(30px, 9vw, 46px); }
  .driver-bio { font-size: 17px; line-height: 1.55; }

  /* values — collapse columns, keep alternating cadence by scale */
  .values { padding: 80px 20px 72px; }
  .values-title { grid-column: 1 / 7; font-size: clamp(36px, 10vw, 60px); }
  .values-stack { grid-column: 1 / 7; margin-top: 48px; }
  .value { padding: 28px 0; }
  .value--large { grid-template-columns: 80px 1fr; column-gap: 18px; }
  .value--inset {
    grid-template-columns: 56px 1fr;
    column-gap: 14px;
    padding-left: 28px;
  }
  .value--large .value-num { font-size: clamp(64px, 18vw, 96px); }
  .value--inset .value-num { font-size: clamp(40px, 11vw, 60px); }
  .value-text { font-size: clamp(19px, 5.4vw, 26px); }
  .value--inset .value-text { font-size: clamp(17px, 4.8vw, 22px); }
  .value-tag { display: none; }
  .value--rhyme::before { width: 120px; height: 120px; right: -10px; opacity: 0.05; }

  /* signed note */
  .signed-note { padding: 80px 20px 80px; }
  .signed-rule { width: 64px; transform: translateX(-12px); margin-bottom: 22px; }

  .close { min-height: 78vh; padding: 96px 20px 56px; grid-template-rows: auto auto auto; }
  .close-headline { grid-row: 1; }
  .close-meta { grid-row: 2; margin-top: 48px; text-align: left; }
  .close-row { align-items: flex-start; }
  .close-cta { grid-row: 3; margin-top: 56px; flex-direction: column; align-items: flex-start; }
}

/* Services — Service detail band (extends .image-ledger row) */ /* retired — was V1 service detail band */
.service-detail .ledger-row { padding: 26px 0; }
.service-detail .val { display: block; }
.row-includes { /* retired — was V1 service detail band */
  display: block;
  margin-top: 10px;
  color: rgba(241, 236, 227, 0.62);
  font-size: 10.5px;
  letter-spacing: 0.18em;
}

/* Services — Boundary spread (good fit / not the fit) */
.boundary-spread {
  background: var(--parchment);
  min-height: 92vh;
  align-items: center;
  padding-top: 112px;
  padding-bottom: 112px;
}
.boundary-spread .split-title { grid-column: 2 / 8; }
.boundary-grid {
  grid-column: 2 / 12;
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.boundary-col { display: grid; gap: 0; align-content: start; }
.boundary-head {
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--brass);
  color: var(--oxblood);
  opacity: 0.9;
}
.boundary-col .list-row {
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(61, 43, 53, 0.18);
}
.boundary-col .list-row:last-child { border-bottom: none; }
.boundary-col .list-num { font-size: 22px; }
.boundary-col .list-copy { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; }

@media (max-width: 760px) {
  .service-detail .val { font-size: 17px; }
  .row-includes { font-size: 10px; letter-spacing: 0.16em; }
  .boundary-spread { padding: 88px 20px 72px; min-height: auto; }
  .boundary-spread .split-title { grid-column: 1 / 7; }
  .boundary-grid { grid-column: 1 / 7; grid-template-columns: 1fr; gap: 36px; margin-top: 36px; }
  .boundary-col .list-num { font-size: 20px; }
  .boundary-col .list-copy { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .settle-block { transition: none; opacity: 1; transform: none; }
}

/* =============================================================================
   V2 Services — Block 1: Service index row thumbnails
   ============================================================================= */
.split-list .list-panel.with-thumbs .list-row {
  grid-template-columns: 56px 80px 1fr auto;
  gap: 20px;
  align-items: center;
}
.row-thumb {
  width: 80px;
  height: 80px;
  overflow: hidden;
  background: var(--limestone);
}
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .split-list .list-panel.with-thumbs .list-row {
    grid-template-columns: 42px 64px 1fr;
    gap: 12px;
  }
  .row-thumb { width: 64px; height: 64px; }
  .with-thumbs .list-meta { grid-column: 3; }
}

/* =============================================================================
   V2 Services — Block 2: Flagship pull-quote
   ============================================================================= */
.flagship-pull {
  margin-top: 28px;
  padding: 20px 24px;
  border-left: 1px solid var(--brass);
  background: rgba(184, 148, 79, 0.06);
}
.flagship-pull p {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.35;
  color: var(--oxblood);
}
.flagship-pull cite {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--night);
  opacity: 0.7;
  font-style: normal;
}

/* =============================================================================
   V2 Services — Block 3: Experience-of-the-Ride spread
   ============================================================================= */
.experience-spread {
  background: var(--parchment);
  min-height: auto;
  padding-top: 112px;
  padding-bottom: 112px;
  align-items: start;
}
.experience-anchor {
  grid-column: 2 / 8;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--oxblood);
  margin-bottom: 64px;
}
.experience-anchor em { font-style: italic; }
.experience-rows {
  grid-column: 2 / 12;
  display: grid;
  gap: 72px;
}
.experience-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
}
.experience-row:nth-child(even) { direction: rtl; }
.experience-row:nth-child(even) > * { direction: ltr; }
.experience-row figure {
  overflow: hidden;
  background: var(--limestone);
  height: clamp(280px, 32vw, 440px);
}
.experience-row figure img { width: 100%; height: 100%; object-fit: cover; }
.experience-text p {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--night);
}
.experience-text p em { font-style: italic; color: var(--oxblood); }
.experience-attribution {
  display: block;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  opacity: 0.78;
}
@media (max-width: 760px) {
  .experience-spread { padding: 80px 20px 64px; }
  .experience-anchor { grid-column: 1 / 7; font-size: clamp(32px, 8vw, 56px); margin-bottom: 40px; }
  .experience-rows { grid-column: 1 / 7; gap: 48px; }
  .experience-row { grid-template-columns: 1fr; gap: 20px; direction: ltr; }
  .experience-row:nth-child(even) { direction: ltr; }
  .experience-row figure { height: clamp(220px, 60vw, 320px); }
  .experience-text p { font-size: clamp(19px, 5.4vw, 24px); }
}

/* =============================================================================
   V2 Services — Block 4: Boundary head override (serif display, wins by cascade)
   ============================================================================= */
.boundary-head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.0;
  letter-spacing: -0.012em;
  text-transform: none;
  opacity: 1;
  padding-bottom: 18px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--brass);
  color: var(--oxblood);
}

/* =============================================================================
   V2 Services — Block 5: Route-map crop fix + blank experience figure + detail-close band
   ============================================================================= */

/* Preserve the HW logo at the top-left of the route-map composite */
.experience-figure-route img {
  object-position: left center;
}

/* Blank placeholder figure (used for the night-runs row — no image, neutral fill) */
.experience-figure-blank {
  background: var(--limestone);
  position: relative;
}
.experience-figure-blank::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(61, 43, 53, 0.06) 0%, rgba(61, 43, 53, 0) 60%),
    linear-gradient(315deg, rgba(61, 43, 53, 0.04) 0%, rgba(61, 43, 53, 0) 60%);
  pointer-events: none;
}

/* Detail close band — image-only spread inserted between Boundary and Close */
.detail-close-band {
  background: var(--parchment);
  min-height: auto;
  padding-top: 96px;
  padding-bottom: 96px;
  align-items: center;
}
.detail-close-figure {
  grid-column: 2 / 12;
  overflow: hidden;
  background: var(--limestone);
  height: clamp(320px, 42vw, 560px);
  border-top: 1px solid rgba(61, 43, 53, 0.18);
  border-bottom: 1px solid rgba(61, 43, 53, 0.18);
}
.detail-close-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .detail-close-band { padding: 64px 20px; }
  .detail-close-figure { grid-column: 1 / 7; height: clamp(240px, 70vw, 360px); }
}

/* ─────────────────────────────────────────────
   SERVICES PAGE REBUILD
   ───────────────────────────────────────────── */

/* Buttons — flat editorial base. Most usages (.service-body, .close-cta-group)
   override to a brass-underline text style; this rule sets a sane default. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 6px 0;
  min-height: 44px;
  border-radius: 0;
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease-out, border-bottom-color 200ms ease-out;
  cursor: pointer;
}
.btn-lg { font-size: 19px; padding: 16px 32px; min-height: 56px; }
.btn-primary {
  background: var(--brass);
  color: var(--oxblood);
}
.btn-primary:hover { background: var(--parchment); }
.btn-secondary {
  background: transparent;
  color: var(--oxblood);
  border-color: rgba(61, 43, 53, 0.4);
}
.btn-secondary:hover { border-color: var(--oxblood); background: rgba(61, 43, 53, 0.04); }
.btn-tel {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--parchment);
  opacity: 0.72;
  padding: 8px 4px;
  border-bottom: 1px solid transparent;
  transition: opacity 200ms ease-out, border-bottom-color 200ms ease-out;
}
.btn-tel:hover { opacity: 1; border-bottom-color: var(--brass); }

/* Hero — services-specific overrides */
.hero-services .hero-text { padding: 0 56px 96px 48px; }
.hero-cta-row {
  margin-top: 36px;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
/* Mobile: full-bleed photo, no border-radius (user feedback: rounded edge on mobile reads cheap) */
.hero-media-rounded { border-radius: 0; }
.hero-media-rounded img { border-radius: 0; }
@media (min-width: 761px) {
  .hero-media-rounded {
    margin: 96px 0 96px 40px;
    height: calc(100vh - 192px);
    border-radius: 20px;
    overflow: hidden;
  }
  .hero-media-rounded img { border-radius: 20px; }
  .hero-services .hero-media::after { border-radius: 20px; }
}

/* Service photo — appears in accordion body when open */
.service-photo {
  margin: 0 0 24px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: rgba(61, 43, 53, 0.04);
}
.service-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Placeholder used inside an accordion body — match service photo geometry */
.service-photo-placeholder {
  margin: 0 0 24px;
  border-radius: 12px;
  aspect-ratio: 16 / 10;
}

/* ============================================================
   /book threshold — oxblood band that frames the booking widget.
   Replaces the prior /book hero. The widget IS the page focus;
   the threshold gives it a dark surround so the parchment card
   pops. No photo, no duplicate headline — the widget asks its
   own questions.
   ============================================================ */
.book-threshold {
  background: var(--oxblood);
  color: var(--parchment);
  min-height: 0;
  padding: 140px 40px 96px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  row-gap: 0;
  overflow: hidden;
}
.book-threshold-copy {
  grid-column: 2 / 12;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 48px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.book-threshold-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.book-threshold-eyebrow .brass-rule { width: 32px; }
.book-threshold-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: var(--parchment);
  margin: 0;
  max-width: 14ch;
}
.book-threshold-title em {
  font-style: italic;
  color: var(--brass);
}
.book-threshold-sub {
  font-family: var(--sans);
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--text-on-dark-support);
  margin: 0;
  max-width: var(--reading-width);
}
.book-threshold-widget {
  grid-column: 1 / -1;
  scroll-margin-top: 88px;
}
/* The widget defaults to a limestone surround when mode='inline'; on the
   threshold we want the oxblood to come through behind the card. */
.book-threshold .hw-widget--inline {
  background: transparent;
  padding: 0 0 24px;
}
.book-threshold .hw-widget__card {
  scroll-margin-top: 88px;
}

@media (max-width: 760px) {
  .book-threshold {
    padding: 112px 20px 64px;
    column-gap: 8px;
  }
  .book-threshold-copy {
    grid-column: 1 / -1;
    padding-bottom: 36px;
    gap: 14px;
  }
  .book-threshold-title { font-size: clamp(36px, 11vw, 52px); }
  .book-threshold-sub  { font-size: 16px; }
  .book-threshold .hw-widget--inline { padding: 0 0 16px; }
}

/* ============================================================
   /book — cinematic letter band below the widget. Full-bleed
   real photo of the door-opening, oxblood-graded scrim weight
   anchors a typeset note from Wale and his father in their voice.
   Replaces the prior note-spread / split-list / close trio.
   ============================================================ */
.book-letter {
  position: relative;
  min-height: 76vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--night);
  color: var(--parchment);
}
.book-letter-photo {
  position: absolute;
  inset: 0;
  margin: 0;
}
.book-letter-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.book-letter-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 12, 16, 0.0) 0%, rgba(15, 12, 16, 0.0) 38%, rgba(15, 12, 16, 0.75) 92%, rgba(15, 12, 16, 0.92) 100%),
    linear-gradient(90deg, rgba(48, 18, 28, 0.78) 0%, rgba(48, 18, 28, 0.32) 46%, rgba(48, 18, 28, 0.0) 70%);
  pointer-events: none;
}
.book-letter-copy {
  position: relative;
  z-index: 2;
  max-width: 56ch;
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.book-letter-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.book-letter-eyebrow .brass-rule { width: 32px; }
.book-letter-note {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--parchment);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.book-letter-note p { margin: 0; }
.book-letter-note em {
  font-style: italic;
  color: var(--brass);
}
.book-letter-sign {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(241, 236, 227, 0.78);
  font-style: normal;
}

/* Limestone meta band — quiet contact info close, brass-hairline eyebrow,
   three items in a row (call, email, area). Replaces the old close band. */
.book-meta {
  background: var(--limestone);
  color: var(--oxblood);
  min-height: 0;
  padding: 56px 48px 64px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  row-gap: 28px;
}
.book-meta-eyebrow {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--oxblood);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.book-meta-eyebrow .brass-rule { width: 32px; }
.book-meta-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: end;
}
.book-meta-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid rgba(48, 18, 28, 0.18);
  padding-top: 14px;
  transition: border-color 200ms ease-out;
}
a.book-meta-item:hover { border-top-color: var(--brass); }
.book-meta-key {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(48, 18, 28, 0.62);
}
.book-meta-val {
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--oxblood);
}

/* Footer connect strip — social icons + Yelp rating badge */
.book-meta-connect {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(48, 18, 28, 0.18);
  padding-top: 28px;
}
.book-social-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.book-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(48, 18, 28, 0.3);
  color: var(--oxblood);
  text-decoration: none;
  transition: border-color 200ms ease-out, color 200ms ease-out;
}
.book-social svg { width: 20px; height: 20px; display: block; }
.book-social:hover { border-color: var(--brass); color: var(--brass); }
.book-yelp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--oxblood);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transition: color 200ms ease-out;
}
.book-yelp-mark { width: 18px; height: 18px; color: #FF1A1A; display: block; }
.book-yelp-mark path { fill: currentColor; }
.book-yelp-stars {
  color: var(--brass);
  letter-spacing: 2px;
  font-size: 14px;
}
.book-yelp:hover { color: var(--brass); }

@media (max-width: 760px) {
  .book-letter {
    min-height: 80vh;
  }
  .book-letter-photo img { object-position: center 35%; }
  .book-letter-scrim {
    background:
      linear-gradient(180deg, rgba(15, 12, 16, 0.10) 0%, rgba(15, 12, 16, 0.45) 48%, rgba(15, 12, 16, 0.92) 100%);
  }
  .book-letter-copy {
    padding: 48px 24px 40px;
    max-width: none;
  }
  .book-letter-note { font-size: clamp(19px, 5vw, 24px); }

  .book-meta {
    padding: 44px 20px 52px;
    column-gap: 8px;
  }
  .book-meta-row {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .book-meta-connect {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* Cinematic testimonials — full-bleed photo with overlaid quote */
.testimonials {
  background: var(--oxblood);
  color: var(--parchment);
  padding: 0;
  min-height: 70vh;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
}
.testimonial-photo {
  grid-column: 1; grid-row: 1;
  position: relative;
  width: 100%; height: 100%;
  min-height: 70vh;
  overflow: hidden;
}
.testimonial-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.testimonial-scrim {
  grid-column: 1; grid-row: 1;
  position: relative;
  /* Scrim color matches .testimonials oxblood ground (#30121C), not --night. */
  background: linear-gradient(180deg, rgba(48, 18, 28, 0.2) 0%, rgba(48, 18, 28, 0.4) 50%, rgba(48, 18, 28, 0.92) 100%);
  pointer-events: none;
}
.testimonial-quote {
  grid-column: 1; grid-row: 1;
  align-self: end;
  justify-self: start;
  position: relative;
  z-index: 2;
  max-width: 56ch;
  padding: 0 80px 88px 80px;
}
.testimonial-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--parchment);
  transition: opacity 220ms ease-out;
  margin-bottom: 20px;
}
.testimonial-quote p em { font-style: italic; color: inherit; }
.testimonial-quote cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brass);
  opacity: 0.9;
}
.testimonial-nav {
  grid-column: 1; grid-row: 1;
  align-self: end;
  justify-self: end;
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  padding: 0 80px 88px 0;
}
.testimonial-nav button {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  background: transparent; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.testimonial-nav button::after {
  content: '';
  display: block;
  width: 24px; height: 2px;
  background: var(--brass);
  opacity: 0.35;
  transition: opacity 200ms ease-out;
}
.testimonial-nav button.active::after { opacity: 1; }
.testimonial-nav button:hover::after { opacity: 0.7; }

/* Section title pattern */
.section-title {
  grid-column: 1 / 13;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--oxblood);
  margin-bottom: 56px;
}
.section-title em { font-style: italic; color: var(--brass); }

/* Services accordion */
.services-accordion {
  background: var(--parchment);
  min-height: 0;
  padding: 120px 40px 72px;
  grid-template-rows: auto auto;
}
.accordion {
  grid-column: 1 / 13;
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(61, 43, 53, 0.14);
}
.service-row {
  border-bottom: 1px solid rgba(61, 43, 53, 0.14);
}
.service-row > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  gap: 24px;
  padding: 28px 8px;
  min-height: 72px;
  align-items: center;
  user-select: none;
  transition: background-color 200ms ease-out;
}
.service-row > summary:hover { background: rgba(61, 43, 53, 0.03); }
.service-row > summary::-webkit-details-marker { display: none; }
.service-num {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brass);
  opacity: 0.9;
}
.service-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.service-name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--oxblood);
}
.service-meta {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(30, 26, 29, 0.56);
}
.service-chevron {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--brass);
  line-height: 1;
  text-align: center;
  transition: transform 240ms ease-out;
}
.service-row[open] .service-chevron { transform: rotate(45deg); }

/* Editorial open-state — photo on the left, 1px vertical hairline,
   structured content on the right (intro + labeled spec + CTA, plus
   the airport/long-distance board where applicable). Mobile stacks
   the columns and hides the divider. */
.service-body {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 24px;
  padding: 8px 8px 32px 56px;
  align-items: stretch;
}
.service-body > .service-photo,
.service-body > .placeholder {
  margin: 0;
  align-self: start;
  width: 100%;
}
.service-divider {
  display: none;
}
.service-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

@media (min-width: 761px) {
  .service-body {
    grid-template-columns: 1fr 1px 1fr;
    column-gap: 48px;
    row-gap: 0;
    padding: 16px 88px 64px;
  }
  .service-divider {
    display: block;
    background: rgba(61, 43, 53, 0.14);
    align-self: stretch;
    width: 1px;
  }
}

/* Intro line — sets the tone in one beat before the spec. */
.service-intro {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--night);
  margin: 0 0 28px;
  max-width: 26ch;
}

/* Cabinet of details — labeled spec sheet. Mono brass labels in the
   left column, sans body copy in the right. */
.service-spec {
  margin: 0 0 28px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(61, 43, 53, 0.14);
  display: grid;
  row-gap: 18px;
  width: 100%;
}
.service-spec > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: baseline;
}
.service-spec dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1.6;
  margin: 0;
}
.service-spec dd {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--night);
  margin: 0;
}

.service-content > .btn,
.service-content > .btn-secondary {
  justify-self: start;
  align-self: flex-start;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--brass);
  border-radius: 0;
  padding: 6px 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oxblood);
  text-decoration: none;
  margin-top: 4px;
  transition: color 180ms ease-out, border-bottom-color 180ms ease-out;
}
.service-content > .btn:hover,
.service-content > .btn-secondary:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Closed-row hush — subordinated to the open row. design.md "leverage" rule. */
.service-row:not([open]) .service-name {
  color: rgba(48, 18, 28, 0.62);
}
.service-row:not([open]) .service-meta {
  color: rgba(30, 26, 29, 0.42);
}
.service-row[open] > summary {
  background: transparent;
}
.service-row[open] .service-name {
  font-size: clamp(26px, 2.8vw, 38px);
}

/* Close — overrides for services page. Paired CTAs: filled brass Book
   button leads, mono phone line sits below as a quieter affordance. */
.close .close-cta-group {
  grid-column: 2 / 13;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 56px;
}
.close .close-cta-group .btn-primary.btn-lg {
  background: var(--brass);
  color: var(--oxblood);
  border: 0;
  border-radius: 0;
  padding: 16px 32px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 56px;
  align-self: flex-start;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.close .close-cta-group .btn-primary.btn-lg:hover {
  background: var(--parchment);
  color: var(--oxblood);
}
.close .close-tel {
  font-family: var(--mono);
  font-style: normal;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--parchment);
  opacity: 0.78;
  border: 0;
  padding: 0;
  line-height: 1.2;
  transition: opacity 200ms ease-out, color 200ms ease-out;
}
.close .close-tel:hover {
  opacity: 1;
  color: var(--brass);
}

/* Book page contact band — phone elevated as the primary action. */
.book-meta-row .book-meta-item:first-child .book-meta-val {
  font-size: clamp(28px, 3.4vw, 48px);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 10px;
  display: inline-block;
  line-height: 1;
}
.book-meta-row .book-meta-item:first-child .book-meta-key {
  color: var(--oxblood);
  opacity: 1;
  margin-bottom: 4px;
}

.book-meta-row {
  align-items: start;
}
.book-meta-item {
  justify-content: space-between;
  min-height: 100%;
}

/* Sticky mobile book-bar — unified pill. Dark oxblood pill, brass border,
   backdrop blur. Floating above the viewport bottom edge with a safe-area
   inset. "Book a ride" is the filled primary; the phone is the bordered
   secondary so both read clearly against the dark bar. */
.book-bar {
  display: none;
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 40;
  padding: 8px;
  background: rgba(48, 18, 28, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(184, 148, 79, 0.3);
  border-radius: 999px;
  gap: 6px;
  box-shadow: 0 8px 32px rgba(30, 26, 29, 0.35);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 320ms ease-out, transform 320ms ease-out;
  pointer-events: none;
}
.book-bar.in {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.book-bar a {
  flex: 1;
  text-align: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: -0.008em;
  text-decoration: none;
  min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.book-bar a.book-bar-primary {
  background: var(--brass);
  color: var(--oxblood);
}
.book-bar a.book-bar-primary:hover { background: var(--parchment); }
.book-bar a.book-bar-secondary {
  color: #ffffff;
  border: 1px solid #ffffff;
}
.book-bar a.book-bar-secondary:hover { background: rgba(255, 255, 255, 0.08); }
/* Sticky mobile book-bar — present on index, about, services, the-suburban.
   Intentionally absent on /book (the widget IS the booking surface; the page
   omits the .book-bar markup). If a future page adds the markup unintended,
   audit whether that page also needs a hideTargets selector update. */
@media (max-width: 760px) {
  .book-bar { display: flex; }
}

/* Placeholder pattern — labeled, intentional */
.placeholder {
  background: var(--limestone);
  border: 1px dashed rgba(184, 148, 79, 0.6);
  border-radius: 16px;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  overflow: hidden;
}
/* Mobile overrides — services rebuild */
@media (max-width: 760px) {
  .hero-services .hero-text { padding: 0 24px 96px; }
  .hero-cta-row { margin-top: 32px; gap: 12px; }
  .btn-lg { font-size: 17px; padding: 14px 28px; min-height: 52px; width: 100%; }
  .hero-cta-row .btn { width: 100%; }
  .hero-cta-row .btn-tel { width: auto; }

  .services-accordion { padding: 80px 20px 64px; }
  .section-title { grid-column: 1 / 7; font-size: clamp(34px, 9vw, 52px); margin-bottom: 32px; }
  .accordion { grid-column: 1 / 7; }
  .service-row > summary {
    grid-template-columns: 40px 1fr 24px;
    gap: 12px;
    padding: 20px 4px;
    min-height: 64px;
  }
  .service-name { font-size: 20px; }
  .service-body { padding: 0 4px 24px 56px; }
  .service-body p { font-size: 16px; line-height: 1.55; }
  .service-body .btn { width: 100%; }

  /* Service photo in expanded body — mobile */
  .service-photo { margin: 0 0 20px; border-radius: 10px; }

/* Cinematic testimonials — mobile */
  .testimonials { min-height: 70vh; }
  .testimonial-photo, .testimonial-photo img { min-height: 70vh; }
  .testimonial-quote { padding: 0 24px 80px 24px; max-width: 100%; }
  .testimonial-quote p { font-size: clamp(22px, 6.2vw, 36px); margin-bottom: 16px; }
  .testimonial-nav { padding: 0 16px 80px 0; }
  .testimonial-nav button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }

  .close .close-cta-group { grid-column: 1 / 7; margin-top: 36px; }
  .close .close-cta-group .btn { width: 100%; }
}

/* ==================================================== */
/* Home — "Around the DMV" collage (map + pinned moments) */
/* ==================================================== */
.dmv-collage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--parchment);
}
.dmv-collage-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 48px;
}
.dmv-collage-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-meta);
}
.dmv-collage-eyebrow .brass-rule { width: 32px; }
.dmv-collage-line {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--text);
}
.dmv-collage-line em { font-style: italic; color: var(--brass); }

/* Stage: map is the in-flow backdrop; cards float over its lower-left.
   The map is given breathing room (narrower, right-weighted) so the two photo
   cards have space on the left and read as distinct layered frames rather than
   a cramped overlapping cluster. */
.dmv-collage-stage { position: relative; padding-bottom: 6%; }
.dmv-collage-map {
  width: 64%;
  margin-left: auto;          /* right-weighted */
  position: relative;
  z-index: 1;
}
.dmv-collage-map img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(48, 18, 28, 0.16);
  border-radius: 16px;
}
.dmv-collage-card {
  position: absolute;
  overflow: hidden;
  border: 6px solid var(--parchment);
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(28, 26, 24, 0.30);
}
.dmv-collage-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dmv-collage-card--vineyard {
  width: 33%;
  aspect-ratio: 1 / 1;
  left: 0;
  bottom: 16%;
  z-index: 2;
}
/* This source fades to parchment on its LEFT half; the couple + Suburban sit on
   the right. A squarer frame + right-biased crop trims the empty parchment and
   keeps the subjects in view. */
.dmv-collage-card--vineyard img { object-position: 78% 50%; }
.dmv-collage-card--mgm {
  width: 25%;
  aspect-ratio: 2 / 3;
  left: 25%;
  bottom: -2%;
  z-index: 3;
}

@media (max-width: 760px) {
  .dmv-collage-head { margin-bottom: 28px; }
  /* Mobile: a rounded 2-up collage — map full width on top, the two cards side
     by side beneath it — rather than a flat vertical stack. */
  .dmv-collage-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-bottom: 0;
  }
  .dmv-collage-map { grid-column: 1 / -1; width: 100%; margin: 0; }
  .dmv-collage-card {
    position: static;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-width: 5px;
  }
  .dmv-collage-card--mgm { aspect-ratio: 1 / 1; }
  .dmv-collage-card img { height: 100%; }
}