/* ============================================================
   BBRE Commercial — heritage-classic editorial / drafting identity
   Parchment · warm-black · burgundy · antique gold
   Libre Caslon Text (display) · Source Serif 4 (body) · Work Sans (labels)
   ============================================================ */

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

:root {
  /* Heritage Classic (warm evolution) — parchment · warm-black · burgundy · antique gold */
  --paper:   #FBF9F4;   /* parchment surface */
  --paper-2: #EDE8DE;   /* alt section — deepened so tonal bands read (Fable) */
  --card:    #F1EDE3;   /* raised surface — deepened one step (Fable) */
  --paper-3: #EAE8E3;   /* tonal hover / deeper container */
  --ink:     #1B1C19;   /* on-surface */
  --ink-soft:#3B3E43;   /* body / secondary text — darkened for readability */
  --muted:   #4D5055;   /* label/body text — darkened for readability */

  /* warm near-black — the page's dark tone (recolored from navy to remove the blue cast) */
  --deep:      #1D1B17;
  --deep-2:    #14120E;
  --deep-soft: rgba(29,27,23,0.05);

  --burgundy:   #A13C3F; /* secondary — interactive / active */
  --burgundy-2: #86282B;

  --gold:   #A47E33;    /* antique gold — large/decorative accents: frames, rules, dots, dividers */
  --gold-ink: #836429;  /* darker gold — small text only (kicker, tags, labels) for >=4.5:1 contrast */
  --gold-2: #D9B25E;    /* brighter gold — glint, diamonds, active */
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  /* muted aura hues — soft washes on light sections (dark sections override stronger) */
  --aura-amber:  rgba(199,154,62,0.20);
  --aura-rose:   rgba(161,60,63,0.16);
  --aura-sage:   rgba(110,122,94,0.16);
  --aura-violet: rgba(107,94,134,0.15);

  --line:   #DAD4C6;    /* warm hairline on parchment */
  --line-2: #C7C1B2;

  --on-navy:      #F2F1EC;   /* on-dark text (name kept; values warm now) */
  --on-navy-soft: #B4AC9E;   /* warm taupe-grey (was cool #A9B2C1) */
  --on-navy-line: rgba(242,241,236,0.18);

  --serif: 'Libre Caslon Text', 'Caslon Fallback', Georgia, serif; /* headings */
  --body:  'Source Serif 4', 'Serif Body Fallback', Georgia, serif;    /* body copy */
  --sans:  'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* labels/UI */
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

/* Metric-adjusted fallbacks so the pre-webfont paint matches the webfonts —
   kills the flash-of-unstyled-text reflow while Caslon / Source Serif load. */
@font-face {
  font-family: 'Caslon Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 94%;
  ascent-override: 90%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Serif Body Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 96%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }

/* Accessibility: visible keyboard focus on every interactive control + skip link */
:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 200;
  background: var(--deep); color: var(--on-navy);
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 0.6rem 1rem; transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }
ol, ul { list-style: none; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 2.5rem; }
.section-pad { padding: clamp(46px, 6vw, 82px) 0; }

/* ---- reveal (JS-gated so no-JS shows everything) ---- */
.js .reveal-up { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal-up.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal-up { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---- duotone image treatment (unifies stock photos) ---- */
.duotone { position: relative; overflow: hidden; background: var(--deep-2); }
.duotone img {
  /* warm grade, not a flat sepia wash — lets real density/colour through */
  filter: grayscale(0.4) sepia(0.2) contrast(1.06) brightness(1.02) saturate(1.08);
  opacity: 0.95;
}
.duotone::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(74,52,26,0.28), rgba(29,27,23,0.16));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---- shared type ---- */
.kicker {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.kicker::before {
  content: ''; width: 26px; height: 1px; background: var(--gold); flex-shrink: 0;
}
.kicker[style*="center"]::before { display: none; }

.section-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); max-width: 760px; }
.section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.section-sub {
  margin-top: 1.25rem;
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 540px;
  line-height: 1.7;
}

/* ---- buttons ---- */
.btn-solid, .btn-line {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.85rem 1.7rem;
  border-radius: 0;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn-solid { background: var(--deep); color: var(--on-navy); border: 1px solid var(--gold); }
.btn-solid:hover { background: var(--burgundy); transform: translateY(-2px); }
.btn-line { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-line:hover { border-color: var(--burgundy); color: var(--burgundy); transform: translateY(-2px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(251,249,244,0.80);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 2.5rem;
  height: 58px; display: flex; align-items: center; justify-content: space-between;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.12rem; font-weight: 400; letter-spacing: 0; color: var(--ink);
}
.wordmark span {
  font-family: var(--sans);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-left: 0.55em; vertical-align: middle;
}
.nav-links { display: flex; align-items: center; gap: 2.5rem; }
.nav-links a { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-soft); transition: color .2s; }
.nav-links a:hover { color: var(--burgundy); }
.nav-cta {
  padding: 0.5rem 1.15rem; border: 1px solid var(--gold); border-radius: 0;
  color: var(--deep) !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.08em;
  transition: background .2s, color .2s !important;
}
.nav-cta:hover { background: var(--deep); color: var(--on-navy) !important; }
.hamburger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; width: 44px; height: 44px; padding: 0; margin: -8px -10px -8px 0; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: .3s; }
.mobile-menu { display: none; flex-direction: column; background: var(--paper); border-top: 1px solid var(--line); padding: 0.5rem 2.5rem 1.5rem; }
.mobile-menu a { font-size: 1rem; font-weight: 500; color: var(--ink-soft); padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.mobile-menu.open { display: flex; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: clamp(92px, 11vh, 120px) 0 clamp(34px, 5vw, 56px); position: relative; }
.hero::before {
  /* faint architectural hairline down the page */
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: var(--line); opacity: 0.5; display: none;
}
.hero-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 2.5rem;
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.topline {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: 1.75rem;
}
.topline i { width: 34px; height: 1px; background: var(--line-2); }
.hero-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.008em;
  color: var(--ink);
  max-width: 11em;
}
.hero-h1 em {
  font-style: italic; font-weight: 400;
  color: var(--burgundy);
}
/* second emphasis word stays plain ink italic — one gilded word per headline */
.hero-h1 em.plain {
  background: none; -webkit-text-fill-color: currentColor; color: var(--ink);
}
.hero-proof {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem;
  margin-top: 2rem;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.hero-proof i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.8; }
.hero-lead {
  margin-top: 2rem;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  color: var(--ink-soft);
  max-width: 46ch;
  line-height: 1.7;
}
.hero-actions { margin-top: 2.5rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }

.hero-fig-col { align-self: end; }
.fig { position: relative; }
.fig-frame {
  aspect-ratio: 3 / 4;
  border-radius: 0;
  border: 1px solid var(--gold);
}
.fig figcaption {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: 0.9rem;
  font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em;
}
.fig-tag { font-family: var(--mono); font-style: normal; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--gold-ink); }

/* ============================================================
   CREDENTIALS BAND (signature dark moment)
   ============================================================ */
.band { background: var(--paper-2); color: var(--ink); }
.band-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 2.5rem;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.band-item {
  padding: 1.8rem 2rem;
  border-right: 1px solid var(--line);
}
.band-item:first-child { padding-left: 0; }
.band-item:last-child { border-right: none; }
.band-item strong {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}
.band-item span { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }

/* ============================================================
   SERVICES — ledger list
   ============================================================ */
.services { background: var(--paper); }

/* Services — structured cards (Direction B) */
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
  border-top: 1px solid var(--line-2); padding-top: clamp(1.4rem, 2.4vw, 2rem);
}
.svc-card {
  display: flex; flex-direction: column; min-height: 224px;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.svc-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 14px 30px -22px rgba(41,33,18,0.42); }
.svc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.svc-idx { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--gold-ink); }
.svc-tag { font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); border: 1px solid var(--line-2); padding: 0.25rem 0.5rem; }
.svc-name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.14; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.55rem; transition: color .3s var(--ease); }
.svc-card:hover .svc-name { color: var(--burgundy); }
.svc-desc { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; flex: 1; }
.svc-go { align-self: flex-start; margin-top: 1.1rem; font-size: 1.15rem; color: var(--line-2); transition: color .3s var(--ease), transform .3s var(--ease); }
.svc-card:hover .svc-go { color: var(--burgundy); transform: translateX(4px); }
.svc-prompt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(0.85rem, 1.6vw, 1.25rem); padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1.1rem, 2vw, 1.6rem); background: var(--deep); border: 1px solid var(--gold); transition: background .3s var(--ease); }
.svc-prompt:hover { background: var(--deep-2); }
.svc-prompt span { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-2); }
.svc-prompt .svc-prompt-arrow { font-size: 1.1rem; }
@media (max-width: 960px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .svc-grid { gap: 0.6rem; padding-top: 1.4rem; }
  .svc-card { min-height: 0; padding: 0.95rem 0.85rem; }
  .svc-top { margin-bottom: 0.7rem; }
  .svc-idx { font-size: 1.25rem; }
  .svc-tag { font-size: 0.52rem; padding: 0.2rem 0.4rem; }
  .svc-name { font-size: 1.02rem; margin-bottom: 0.4rem; }
  .svc-desc { font-size: 0.8rem; line-height: 1.45; }
  .svc-go { margin-top: 0.7rem; font-size: 1rem; }
  .svc-prompt { padding: 0.9rem 1rem; }
  .svc-prompt span { font-size: 0.7rem; }
}

/* ============================================================
   FEATURED SPACES — editorial contact-sheet plates
   ============================================================ */
.spaces { background: var(--deep); }
.spaces .section-head h2 { color: var(--on-navy); }

.spaces-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.spaces-head .section-head { margin-bottom: 0; }
/* Keep each half of the heading whole so it stays exactly 2 lines in the wide
   Caslon face (the natural break sits right on the wrap threshold otherwise).
   nowrap also raises the column's min-width, so the "View all" link wraps
   below on tight widths instead of squeezing the heading into a 3rd line. */
.spaces-head h2 { white-space: nowrap; }

.spaces-all {
  font-size: 0.82rem; font-weight: 600; color: var(--on-navy);
  display: inline-flex; align-items: center; gap: 0.4rem;
  border-bottom: 1px solid var(--on-navy-line); padding-bottom: 0.2rem;
  white-space: nowrap; align-self: flex-end;
  transition: border-color .25s var(--ease), color .25s;
}
.spaces-all:hover { border-color: var(--gold-2); color: var(--gold-2); }

.spaces-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.space-plate { display: flex; flex-direction: column; }

.plate-fig { margin: 0; }
.plate-frame {
  aspect-ratio: 3 / 4;
  border-radius: 0;
  border: 1px solid var(--gold);
}
.plate-fig figcaption {
  margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em;
}

.plate-body {
  flex: 1; border-top: 1px solid var(--line);
  padding-top: 1.1rem; margin-top: 1.1rem;
}
.plate-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.15; letter-spacing: -0.01em; color: var(--ink);
  margin-bottom: 1rem;
}

/* Spec-sheet hairline table */
.spec-sheet {
  width: 100%; border-collapse: collapse;
  border-top: 1px solid var(--line);
  margin-bottom: 1.1rem;
}
.spec-sheet tr { border-bottom: 1px solid var(--line); }
.spec-sheet td { padding: 0.55rem 0; vertical-align: baseline; }
.spec-label {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink);
  width: 36%; padding-right: 0.75rem; white-space: nowrap;
}
.spec-val {
  font-family: var(--serif); font-size: 0.92rem; color: var(--ink); line-height: 1.4;
}

/* Status marker — reuses the 8px dot language of the process timeline */
.plate-status {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep);
}
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dot-filled  { background: var(--deep); }
.dot-hollow  { background: transparent; border: 1.5px solid var(--deep); }

.status-preleased { color: var(--ink-soft); }
.status-preleased .dot-hollow { border-color: var(--ink-soft); }

/* ============================================================
   PROCESS — pinned raw-space → asset journey
   ============================================================ */
.proc-section { background: var(--paper-2); position: relative; }
.journey-scroll { position: relative; }
.journey-sticky { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(237,232,222,0.10) 0%, rgba(237,232,222,0.48) 38%, rgba(237,232,222,0.68) 100%); }   /* translucent scrim softens the survey grid behind the buildings/floor-plate */
.journey-sticky > .container { position: relative; z-index: 1; width: 100%; }
.proc-section .section-head { text-align: center; max-width: 760px; margin: 0 auto; }

.journey-stage {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem); align-items: center;
  margin-top: clamp(1.2rem, 2.2vw, 2rem);
}
.journey-visual { position: relative; margin: 0; }
.floor-svg {
  display: block; width: 100%; height: auto; aspect-ratio: 480 / 340;  /* size locked — never changes per stage */
  background: var(--paper); border: 1px solid var(--line);
}
.fl-layer { opacity: 0; transition: opacity .55s var(--ease); }
.fl-layer.is-on { opacity: 1; }
/* evolving environment: a district that grows behind the scene as you scroll */
.journey-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.env-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.env-layer { opacity: 0; transition: opacity .7s var(--ease); }
.env-layer.is-on { opacity: 1; }
/* sun arcs up from the horizon as the asset comes to life (JS drives transform) */
.env-sun {
  position: absolute; left: 16%; top: 12%;
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,178,94,0.6) 34%, rgba(217,178,94,0.2) 52%, transparent 70%);
  opacity: 0; will-change: transform, opacity;
}
@media (max-width: 900px) { .journey-bg { display: none; } }
.floor-cap {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 0.7rem; font-family: var(--mono); font-size: 0.72rem; color: var(--muted);
}
.floor-cap .fig-tag { color: var(--gold-ink); font-style: normal; }
.floor-stage-name { letter-spacing: 0.02em; }
.floor-cap-static { display: none; letter-spacing: 0.02em; }   /* shown on mobile (frozen diagram) */

.j-steps { position: relative; margin-bottom: clamp(1.4rem, 2.5vw, 2rem); }
.j-nums { list-style: none; display: flex; justify-content: space-between; padding: 0 0 0.7rem; margin: 0; }
.j-nums li { font-family: var(--mono); font-size: 0.7rem; color: var(--line-2); transition: color .3s var(--ease); }
.j-nums li.is-done { color: var(--ink-soft); }
.j-nums li.is-active { color: var(--gold); }
.j-track { height: 2px; background: var(--line-2); position: relative; }
.j-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--gold); width: 0; transition: width .45s var(--ease); }

.j-panels { display: grid; min-height: 9rem; margin-bottom: clamp(1.4rem, 2.5vw, 2rem); }
.j-panel {
  grid-area: 1 / 1; opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .14s var(--ease);
}
.j-panel.is-active {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .22s var(--ease) .14s, transform .32s var(--ease) .14s;
}
.j-panel h4 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.08; color: var(--ink); margin-bottom: 0.85rem; }
.j-panel p { font-size: clamp(1rem, 1.2vw, 1.1rem); color: var(--ink-soft); line-height: 1.7; max-width: 40ch; }

.j-checks { list-style: none; margin: clamp(1.2rem, 2.2vw, 1.7rem) 0 0; padding: clamp(1.1rem, 2vw, 1.5rem) 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: clamp(0.55rem, 1.1vw, 0.8rem); }
.j-checks li { display: flex; align-items: center; gap: 0.75rem; font-family: var(--sans); font-size: clamp(0.85rem, 1.1vw, 0.95rem); color: var(--muted); transition: color .35s var(--ease); }
.j-checks li::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--line-2); background: transparent center / 58% no-repeat;
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.j-checks li.done { color: var(--ink); }
.j-checks li.done::before {
  border-color: var(--gold); background-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF9F4' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E");
}

@media (min-width: 901px) {
  .journey-scroll { height: 560vh; }
  .journey-sticky {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; justify-content: flex-start;
    overflow: hidden; padding: clamp(80px, 11vh, 112px) 0 clamp(20px, 3.5vh, 36px);
  }
}
@media (max-width: 900px) {
  /* Mobile journey (per Fable review): the floor diagram is FROZEN at its final
     built state with a neutral caption — no scroll-linked state that could desync
     from the copy. The six steps read as a ledger (number beside heading, hairline
     rules) matching Services, and fade up as they enter view. */
  .journey-stage { grid-template-columns: 1fr; gap: clamp(1.4rem, 4vw, 2rem); align-items: start; }
  .journey-visual { position: static; margin: 0; }
  .fl-layer { opacity: 1; }                 /* frozen: fully-built floor plate */
  .floor-stage-name { display: none; }      /* hide the changing stage label */
  .floor-cap-static { display: inline; }    /* neutral caption instead */
  .j-steps { display: none; }
  .j-panels { display: block; min-height: 0; counter-reset: jp; border-bottom: 1px solid var(--line); }
  .j-panel {
    grid-area: auto; opacity: 1; transform: none; pointer-events: auto;
    position: relative; min-height: 0; margin: 0;
    padding: clamp(1.5rem, 5vw, 2rem) 0 clamp(1.5rem, 5vw, 2rem) 46px;
    border-top: 1px solid var(--line);
  }
  .j-panel h4 { font-size: clamp(1.45rem, 5.6vw, 1.65rem); line-height: 1.14; margin-bottom: 0.5rem; }
  .j-panel h4::before {
    counter-increment: jp;
    content: counter(jp, decimal-leading-zero);
    position: absolute; left: 0; top: clamp(1.5rem, 5vw, 2rem);
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 1.3rem; line-height: 1; color: var(--gold-ink);
  }
  .j-panel p { max-width: none; }
  /* steps fade up as they enter view (class added by JS on mobile only) */
  .j-panel.m-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .j-panel.m-reveal.in-view { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-scroll { height: auto; }
  .journey-sticky { position: static; height: auto; }
  .journey-visual { position: static; }
  .fl-layer { opacity: 1; }
  .j-panel { grid-area: auto; opacity: 1; transform: none; min-height: 0; }
  .j-panels { display: block; min-height: 0; }
}

/* ============================================================
   WHO WE HELP
   ============================================================ */
.who { background: var(--paper); }

/* ---- segmented switch with sliding underline ---- */
.persona-switch {
  position: relative;
  display: inline-flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
  max-width: 100%;
  flex-wrap: wrap;
}
/* (removed dead .persona-tab rules — the live control is .dial-point; focus handled by the global :focus-visible) */
.persona-underline {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--burgundy);
  transition: transform .35s var(--ease), width .35s var(--ease);
  pointer-events: none;
}

/* ---- equal-height stack: all panels share one grid cell ---- */
.persona-stack { display: grid; }
.persona-panel {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.persona-panel.is-active {
  opacity: 1; visibility: visible; transform: none;
  pointer-events: auto;
}
.persona-grid {
  display: grid; grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.persona-eyebrow {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: 1.1rem;
}
.persona-h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 1rem; max-width: 22ch;
}
.persona-lead { font-size: 1rem; color: var(--ink-soft); line-height: 1.7; max-width: 46ch; }
.persona-points { margin: 1.6rem 0 2rem; border-top: 1px solid var(--line); }
.persona-points li {
  padding: 0.7rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.92rem; color: var(--ink);
  display: flex; align-items: center; gap: 0.7rem;
}
.persona-points li::before { content: '—'; color: var(--gold); }
.persona-foot { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.persona-stat {
  display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 0.78rem; color: var(--muted); max-width: 18ch; line-height: 1.4;
}
.persona-stat strong {
  font-family: var(--serif); font-weight: 400; font-style: normal;
  font-size: 1.6rem; color: var(--deep); letter-spacing: -0.01em;
}
.persona-fig { position: relative; }
.persona-fig .fig-frame { aspect-ratio: 4 / 3; border-radius: 0; border: 1px solid var(--gold); }
.persona-fig figcaption {
  display: flex; align-items: center; gap: 0.7rem; margin-top: 0.9rem;
  font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em;
}

/* no-JS: flow every panel normally (undo the grid overlap), hide the switch */
html:not(.js) .persona-switch { display: none; }
html:not(.js) .persona-stack { display: block; }
html:not(.js) .persona-panel {
  grid-area: auto; opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
@media (prefers-reduced-motion: reduce) {
  .persona-panel { transition: opacity .15s linear, visibility .15s; transform: none; }
  .persona-panel.is-active { transform: none; }
  .persona-underline { transition: none; }
}

/* ============================================================
   CLIENTS — two groups, opposite-scrolling marquee
   ============================================================ */
.clients {
  position: relative;
  overflow: hidden;
  /* warm wash + gold crown + faint rose bloom so the logo wall reads intentional, not grey */
  background:
    radial-gradient(120% 92% at 50% -20%, rgba(199,154,62,0.20), transparent 55%),
    radial-gradient(70% 120% at 88% 118%, rgba(161,60,63,0.10), transparent 60%),
    linear-gradient(180deg, var(--card) 0%, var(--paper-3) 55%, var(--card) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(24px, 3.2vw, 40px) 0;
  text-align: center;
}
.clients .aura { z-index: 0; }
.clients .aura--amber { background: radial-gradient(closest-side, rgba(199,154,62,0.20), transparent 76%); }

/* two groups, one scrolling each way */
.client-rows { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(1.6rem, 3vw, 2.2rem); }
.client-row-label {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted);
  margin-bottom: 0.9rem;
}
.client-row-label::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
}

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: inline-flex; gap: 3.5rem; white-space: nowrap; animation: marquee 34s linear infinite; }
.marquee-track--rev { animation-direction: reverse; }   /* opposite direction */
.marquee-track span {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.5rem; color: #706450; letter-spacing: 0.01em;   /* warm taupe, darkened for contrast */
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   "Fit-out" — signature animated term.
   Fit-out is where raw space becomes a premium asset, so the word
   catches the light: a BRIGHT gold shine sweeps across a deep-green
   word, continuously. Marked at rest by a fine gold underline;
   intensifies on hover. Falls back to solid green if unsupported.
   ============================================================ */
/* "Fit-Out" is BBRE's branded term — marked with a committed full gold underline,
   never a gradient sheen (that clipped mid-sweep and read as a rendering glitch). */
.fitout {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  font-weight: 600;                    /* heavier than neighbours so it reads as special */
  color: inherit;
  white-space: nowrap;
}
.fitout::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.08em;
  height: 1.5px;
  background: var(--gold);
  opacity: 0.9;
  transition: opacity .3s var(--ease), height .3s var(--ease), background .3s var(--ease);
}
/* react to hovering the word OR its containing row / card / step */
.fitout:hover,
.ledger-row:hover   .fitout,
.space-plate:hover  .fitout,
.proc-step:hover    .fitout,
.clients-note:hover .fitout {
  color: var(--burgundy);
}
.fitout:hover::after,
.ledger-row:hover   .fitout::after,
.space-plate:hover  .fitout::after,
.proc-step:hover    .fitout::after,
.clients-note:hover .fitout::after {
  opacity: 1;
  height: 2.5px;
  background: var(--gold-2);
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.clients-note { font-size: 0.74rem; color: var(--muted); max-width: 480px; margin: 0 auto; padding: 0 2rem; }

/* ============================================================
   LOCATIONS
   ============================================================ */
.locations { background: var(--paper); }
.locations-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.locations-left h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.08; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 1.1rem;
}
.locations-left p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.7; max-width: 42ch; }
.loc-list {
  columns: 2; column-gap: 2.5rem; border-top: 1px solid var(--line);
}
.loc-list li {
  padding: 0.85rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.05rem; color: var(--ink);
  display: flex; align-items: center; gap: 0.7rem;
  break-inside: avoid;
  transition: color .25s, padding-left .25s var(--ease);
}
.loc-list li::before { content: '—'; color: var(--gold); font-family: var(--sans); }
.loc-list li:hover { color: var(--burgundy); padding-left: 0.4rem; }

/* ---- Coverage schematic map ---- */
.coverage-panel {
  border: 1px solid var(--line); border-radius: 0;
  overflow: hidden; margin-bottom: 1.5rem;
}
.coverage-map { display: block; width: 100%; height: auto; }
/* NCR silhouette map — sketches itself in on scroll */
.ncr-outline { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.7s var(--ease); }
.locations-right.in-view .ncr-outline { stroke-dashoffset: 0; }
.ncr-river { opacity: 0; transition: opacity .7s var(--ease) .4s; }
.locations-right.in-view .ncr-river { opacity: 0.6; }
.ncr-pin, .ncr-labels text { opacity: 0; transition: opacity .55s var(--ease); }
.locations-right.in-view .ncr-labels text { opacity: 1; transition-delay: .9s; }
.locations-right.in-view .ncr-pin { opacity: 1; }
.locations-right.in-view .ncr-pin:nth-child(1) { transition-delay: .60s; }
.locations-right.in-view .ncr-pin:nth-child(2) { transition-delay: .74s; }
.locations-right.in-view .ncr-pin:nth-child(3) { transition-delay: .88s; }
.locations-right.in-view .ncr-pin:nth-child(4) { transition-delay: 1.02s; }
.locations-right.in-view .ncr-pin:nth-child(5) { transition-delay: 1.16s; }
.locations-right.in-view .ncr-pin:nth-child(6) { transition-delay: 1.30s; }
.locations-right.in-view .ncr-pin:nth-child(7) { transition-delay: 1.44s; }
@media (prefers-reduced-motion: reduce) {
  .ncr-outline { stroke-dashoffset: 0; transition: none; }
  .ncr-river, .ncr-pin, .ncr-labels text { opacity: 1; transition: none; }
  .ncr-river { opacity: 0.6; }
}

.loc-groups {
  display: grid; grid-template-columns: 1.5fr 1fr 0.75fr;
  gap: 1.5rem; align-items: start;
}
.loc-hub {
  font-family: var(--serif); font-style: italic; font-size: 0.82rem;
  font-weight: 400; color: var(--muted); letter-spacing: 0.01em;
  margin-bottom: 0.5rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.loc-group .loc-list { columns: 1; border-top: none; }
.loc-group .loc-list li {
  font-size: 0.875rem; padding: 0.55rem 0; gap: 0.5rem;
}

/* ============================================================
   CTA (signature dark moment)
   ============================================================ */
.cta { background: var(--deep); color: var(--on-navy); padding: clamp(52px, 6.5vw, 84px) 2.5rem clamp(116px, 12vw, 146px); }
.cta-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.cta .kicker { color: var(--on-navy-soft); justify-content: center; }
.cta .kicker::before { background: var(--on-navy-soft); }
.cta-inner h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.1; letter-spacing: -0.005em;
  color: var(--on-navy); margin-bottom: 1.2rem;
}
.cta-sub { font-size: 1.02rem; color: var(--on-navy-soft); margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.cta-actions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--on-navy-line); border-radius: 0; overflow: hidden;
}
.cta-tile {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.9rem 1.6rem; text-align: left;
  border-right: 1px solid var(--on-navy-line);
  transition: background .25s;
}
.cta-tile:last-child { border-right: none; }
.cta-tile:hover { background: rgba(241,236,224,0.06); }
.cta-tile-label { font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-navy-soft); }
.cta-tile-value { font-family: var(--serif); font-size: 1.02rem; color: var(--on-navy); }
/* WhatsApp is the primary channel for this audience — give it weight */
.cta-tile--primary { background: rgba(199,154,62,0.12); position: relative; box-shadow: inset 0 0 0 1px var(--gold); }
.cta-tile--primary:hover { background: rgba(199,154,62,0.18); }
.cta-tile--primary .cta-tile-label { color: var(--on-navy); }
.cta-tile--primary .cta-tile-value { color: var(--gold-2); }   /* primary action reads as the gold one */
.wa-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); margin-left: 0.55rem; vertical-align: middle; box-shadow: 0 0 0 3px rgba(217,178,94,0.20); }
.cta-promise { display: inline-block; color: var(--on-navy); font-weight: 500; }   /* emphasis via brightness, not more gold */

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--paper); padding: 2.75rem 2.5rem 1.75rem; }
.footer-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem;
  padding-bottom: 1.75rem; border-bottom: 1px solid var(--line);
}
.footer-brand .wordmark { font-size: 1.1rem; display: block; margin-bottom: 0.4rem; color: var(--ink); }
.footer-brand .wordmark span { color: var(--muted); }
.footer-brand p { font-size: 0.74rem; color: var(--muted); }
.footer-brand .footer-descriptor {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.65rem;
  margin-top: 0.9rem; font-family: var(--sans); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-ink);
}
.footer-brand .footer-descriptor i { width: 5px; height: 5px; background: var(--gold); opacity: 0.6; transform: rotate(45deg); flex-shrink: 0; }
.footer-links { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer-links a { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); transition: color .2s; }
.footer-links a:hover { color: var(--deep); }
/* institutional stationery — Indian corporate buyers scan for exactly this */
.footer-legal {
  max-width: 1180px; margin: 1.5rem auto 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: center;
  font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.footer-note { max-width: 720px; margin: 0.9rem auto 0; font-size: 0.68rem; line-height: 1.5; color: var(--muted); text-align: center; padding: 0 1.5rem; }
.footer-copy { max-width: 1180px; margin: 1.1rem auto 0; font-size: 0.72rem; color: var(--muted); text-align: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-fig-col { max-width: 380px; }
  .fig-frame { aspect-ratio: 4 / 3; }
  .band-inner { grid-template-columns: repeat(2, 1fr); }
  .band-item:nth-child(2) { border-right: none; }
  .band-item { border-bottom: 1px solid var(--line); padding-left: 0; }
  .band-item:nth-child(odd) { padding-left: 0; }
  .band-item:nth-child(even) { padding-right: 0; }
  /* Featured Spaces — 2 columns at tablet */
  .spaces-grid { grid-template-columns: repeat(2, 1fr); }
  .spaces-all { align-self: auto; }
  /* Persona switch — stack copy over figure */
  .persona-grid { grid-template-columns: 1fr; gap: 2rem; }
  .persona-fig { order: -1; max-width: 480px; }
  .locations-inner { grid-template-columns: 1fr; }
  /* Coverage map — groups stack 2+1 at tablet */
  .loc-groups { grid-template-columns: 1fr 1fr; }
  .loc-group:last-child { grid-column: 1 / -1; }
  .cta-actions { grid-template-columns: repeat(2, 1fr); }
  .cta-tile:nth-child(2n) { border-right: none; }
  .cta-tile { border-bottom: 1px solid var(--on-navy-line); }
}
@media (max-width: 600px) {
  .container { padding: 0 1.5rem; }
  .hero-grid { padding: 0 1.5rem; }
  /* let the headline flow naturally on narrow screens instead of forcing breaks */
  .hero-h1 { max-width: 100%; overflow-wrap: break-word; }
  .hero-h1 .hb { display: none; }
  /* grid items default to min-width:auto and refuse to shrink → overflow.
     Let both columns shrink to the viewport. */
  .hero-lead-col, .hero-fig-col { min-width: 0; }
  /* eyebrow holds one line */
  .topline { letter-spacing: 0.12em; font-size: 0.62rem; gap: 0.55rem; }
  .topline i { width: 18px; }
  /* trim the hero lead's tail clause on phone */
  .lead-tail { display: none; }
  /* the same three stats appear (animated) in the credentials band right below —
     hide the hero proof line on phone to kill the duplication + save vertical space */
  .hero-proof { display: none; }
  .ledger-row { grid-template-columns: 44px 1fr; gap: 1rem; padding-right: 0; }
  .ledger-arrow { display: none; }
  .band-inner { grid-template-columns: repeat(2, 1fr); padding: 0 1.5rem; column-gap: 1.3rem; }
  .band-item { padding: 1.1rem 0 !important; border-right: none; }
  /* Featured Spaces — single column on mobile */
  .spaces-grid { grid-template-columns: 1fr; }
  .plate-frame { aspect-ratio: 4 / 3; }
  .spaces-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .spaces-head h2 { white-space: normal; }   /* don't clip the headline on phones */
  /* even dark inset around the cards instead of a naked ~46px strip below them */
  .spaces.section-pad { padding-bottom: 1.7rem; }
  /* two featured plates on phone; the "View all spaces →" link carries the rest */
  .spaces-grid .space-plate:nth-child(3) { display: none; }
  /* Persona switch — tighter tabs / stat wraps under CTA */
  .persona-switch { gap: 1.4rem; }
  .persona-foot { gap: 1.1rem; }
  /* Coverage map groups — single column on mobile */
  .loc-groups { grid-template-columns: 1fr; }
  .loc-group:last-child { grid-column: auto; }
  /* declutter the small map: drop tertiary labels (Faridabad, Manesar) — pins stay */
  .ncr-labels text:nth-of-type(5), .ncr-labels text:nth-of-type(7) { display: none; }
  /* trim the Gurgaon corridor list to its 5 prime corridors on phone */
  .loc-group:first-child .loc-list li:nth-child(n+6) { display: none; }
  .cta-actions { grid-template-columns: 1fr; }
  .cta-tile { border-right: none; }
  .cta { padding-top: 4.8rem; }   /* clear the fixed nav so the headline isn't sliced */
  .hero-actions { flex-direction: column; }
  .hero-actions a { text-align: center; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
}

/* ============================================================
   SECTION DECORATION — muted, translucent architectural line-work.
   Sits BEHIND all content (pointer-events:none, low opacity) to add
   depth to the large empty areas. Calm/light; never dark.
   ============================================================ */
.hero { overflow: hidden; }                    /* contain the warm bloom */
.services, .cta { position: relative; overflow: hidden; }

/* content always above the decoration */
.hero-grid,
.services > .container,
.proc-section > .container,
.proc-section > .proc-scroll,
.who-sticky > .container,
.cta-inner { position: relative; z-index: 1; }

.deco { position: absolute; z-index: 0; pointer-events: none; }
.deco svg { display: block; width: 100%; height: 100%; overflow: visible; }
.deco svg :where(path, line, rect, circle, polyline, polygon) {
  fill: none; stroke-width: 1; vector-effect: non-scaling-stroke;
}
.deco--ink svg :where(path, line, rect, circle, polyline, polygon) { stroke: var(--deep); }
.deco-skyline svg :where(path, line, rect, circle, polyline, polygon) { stroke: var(--on-navy); }

.deco-facade  { bottom: 0; right: -40px;
                width: min(42vw, 500px); height: 640px; opacity: 0.30; }
.deco-plan    { top: clamp(32px, 5vw, 72px); right: 3%;
                width: min(34vw, 430px); height: 300px; opacity: 0.32; }
.deco-contour { top: 0; right: -140px;
                width: min(48vw, 740px); height: min(96%, 900px); opacity: 0.13; }
.deco-skyline { left: 0; right: 0; bottom: 0; width: 100%; height: 104px; opacity: 0.26; }
.deco-district { left: clamp(-60px, -2vw, -10px); bottom: 0;
                 width: min(74vw, 940px); height: min(64vh, 540px); opacity: 0.30; }

/* warm depth bloom behind the hero headline */
.hero::before {
  content: ""; position: absolute; z-index: 0; top: -12%; left: -8%;
  width: 48vw; height: 48vw; pointer-events: none;
  background: radial-gradient(closest-side, rgba(154,110,46,0.12), transparent 72%);
}

/* tighten the same-colour seam between Spaces and Process */
.proc-section { padding-top: clamp(30px, 4vw, 52px); }

@media (max-width: 900px) {
  .deco-facade, .deco-plan, .deco-contour, .deco-district { display: none; }  /* keep small screens clean */
  .deco-skyline { height: 92px; opacity: 0.11; }
  .hero::before { width: 80vw; height: 80vw; }
}

/* process timeline wraps instead of scrolling horizontally */
@media (max-width: 940px) {
  .proc { grid-template-columns: repeat(3, 1fr); row-gap: 2.75rem; }
}
@media (max-width: 560px) {
  .proc { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
}

/* Heritage ornament — hairline rule with a centered gold diamond */
.ornament { display: flex; align-items: center; justify-content: center; gap: 0.9rem; }
.ornament::before, .ornament::after { content: ''; height: 1px; width: clamp(48px, 12vw, 130px); background: var(--gold); opacity: 0.5; }
.ornament span { width: 7px; height: 7px; background: var(--gold-2); transform: rotate(45deg); flex-shrink: 0; }
.ornament-divider { padding: clamp(16px, 2.6vw, 30px) 0; }

/* ============================================================
   WHO WE HELP — scroll-pinned personas + semicircle dial
   ============================================================ */
.who { position: relative; background: var(--paper); }
.who-scroll { position: relative; }
@media (min-width: 901px) {
  .who-scroll { height: 300vh; }
  .who-sticky {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; justify-content: flex-start;
    overflow: hidden; padding: clamp(96px, 12vh, 124px) 0 40px;
  }
}
.who-sticky > .container { width: 100%; }
.who-stage {
  display: grid; grid-template-columns: 300px 1fr;
  gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
  margin-top: clamp(0.75rem, 1.6vw, 1.3rem);
}
.who .section-head { max-width: 860px; margin-bottom: clamp(1.1rem, 2vw, 1.7rem); }
.who-dial { position: relative; width: 300px; aspect-ratio: 300 / 420; flex-shrink: 0; }
.dial-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial-track { stroke: var(--line-2); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.dial-progress {
  stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .45s var(--ease);
}
.dial-point {
  position: absolute; transform: translate(calc(-100% + 7px), -50%);
  display: flex; align-items: center; gap: 0.7rem;
  background: none; border: none; padding: 0; cursor: pointer;
}
.dial-point .dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--line-2); background: var(--paper);
  flex-shrink: 0; transition: border-color .4s, background .4s, box-shadow .4s;
}
.dial-point .dial-num { font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; color: var(--muted); transition: color .4s; }
.dial-point .dial-name { font-family: var(--serif); font-size: 1.05rem; color: var(--ink-soft); white-space: nowrap; transition: color .4s; }
.dial-point.is-active .dot { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 4px rgba(164,126,51,0.16); }
.dial-point.is-active .dial-num { color: var(--gold); }
.dial-point.is-active .dial-name { color: var(--burgundy); }
.dial-point:hover .dial-name { color: var(--ink); }
.who-panels { display: grid; }
.who-slide {
  grid-area: 1 / 1; opacity: 0; transform: translateY(8px); pointer-events: none;
  z-index: 0;
  /* outgoing panel fades out fast and on its own — no simultaneous crossfade */
  transition: opacity .14s var(--ease);
}
.who-slide.is-active {
  opacity: 1; transform: none; pointer-events: auto; z-index: 1;
  /* incoming waits for the old panel to clear, then rises in */
  transition: opacity .22s var(--ease) .14s, transform .32s var(--ease) .14s;
}
@media (max-width: 900px) {
  .who-scroll { height: auto; }
  .who-sticky { position: static; height: auto; padding: clamp(30px, 5vw, 50px) 0; }
  .who-stage { grid-template-columns: 1fr; margin-top: 1.5rem; }
  .who-dial { display: none; }
  .who-panels { display: block; counter-reset: whoaud; }
  /* Clean, scannable audience list (the dial can't work on phone): each of the three
     audiences reads as a numbered, ruled block — no imagery, bullets or trailing stat. */
  .who-slide {
    grid-area: auto; opacity: 1; transform: none; pointer-events: auto;
    border-top: 1px solid var(--line-2); padding-top: 1.9rem; margin-bottom: 1.9rem;
  }
  .who-slide:first-child { border-top: none; padding-top: 0; }
  .who-slide:last-child { margin-bottom: 0; }
  .persona-fig { display: none; }
  .persona-points, .persona-stat { display: none; }
  .persona-grid { grid-template-columns: 1fr; gap: 0; }
  .persona-eyebrow { margin-bottom: 0.6rem; }
  .persona-eyebrow::before {
    counter-increment: whoaud; content: counter(whoaud, decimal-leading-zero) "  ·  "; color: var(--gold);
  }
  .persona-h { font-size: clamp(1.45rem, 5.4vw, 1.7rem); margin-bottom: 0.7rem; max-width: none; }
  .persona-lead { font-size: 0.97rem; max-width: none; }
  .persona-lead .lead-more { display: none; }   /* one punchy sentence per audience on phone */
  .persona-foot { margin-top: 1.3rem; }
  .who-slide.m-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .who-slide.m-reveal.in-view { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .who-scroll { height: auto; }
  .who-sticky { position: static; height: auto; overflow: visible; padding: clamp(46px, 6vw, 82px) 0; }
  .who-dial { display: none; }
  .who-panels { display: block; }
  .who-slide { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 3rem; }
}

/* ===== Aura background glows (muted, multi-hue) + film grain ===== */
.aura { position: absolute; z-index: 0; pointer-events: none; }
.aura--amber  { background: radial-gradient(closest-side, var(--aura-amber),  transparent 82%); }
.aura--rose   { background: radial-gradient(closest-side, var(--aura-rose),   transparent 82%); }
.aura--sage   { background: radial-gradient(closest-side, var(--aura-sage),   transparent 82%); }
.aura--violet { background: radial-gradient(closest-side, var(--aura-violet), transparent 82%); }
/* stronger glows tuned for the dark sections */
.band .aura--amber { background: radial-gradient(closest-side, rgba(199,154,62,0.16), transparent 70%); }
.cta  .aura--rose  { background: radial-gradient(closest-side, rgba(161,60,63,0.22), transparent 70%); }
.cta  .aura--amber { background: radial-gradient(closest-side, rgba(199,154,62,0.12), transparent 70%); }

.grain {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  opacity: 0.065; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 120px 120px;
}

/* sections host auras behind their content */
.hero, .band, .services, .spaces, .locations, .cta { position: relative; overflow: hidden; }
/* NOTE: proc-section deliberately omitted — an overflow-hidden ancestor kills the
   sticky pin; the journey aura is contained by .journey-sticky itself (see above). */
.hero-grid, .band-inner, .services > .container, .spaces > .container,
.proc-section > .container, .proc-section > .proc-scroll,
.who-sticky > .container, .locations > .container, .cta-inner { position: relative; z-index: 1; }

/* ===== Frosted glass surfaces (sharp corners kept) ===== */
.space-plate {
  padding: 0.85rem 0.85rem 1.35rem;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.space-plate:hover { transform: translateY(-4px); box-shadow: 0 10px 22px -18px rgba(41,33,18,0.28); }
.coverage-panel {
  background: var(--card);
}
.cta-tile {
  background: rgba(245,240,230,0.04);
}

.cta-inner h2 em {
  font-style: normal;
  color: var(--gold-2);
}

/* ===== Chapter progress rail ===== */
.chapters {
  position: fixed; right: 26px; top: 50%; z-index: 60;
  display: flex; flex-direction: column; gap: 1.05rem; align-items: flex-end;
  transform: translateY(-50%) translateX(8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
/* revealed only after the hero (first screen) is scrolled past — set by JS */
.chapters.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.chapters-line { position: absolute; right: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--line-2); z-index: -1; }
.chapters-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--gold); transition: height .15s linear; }
.chapter { display: flex; align-items: center; gap: 0.6rem; opacity: 0.55; transition: opacity .3s var(--ease); }
.chapter .ch-num { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.04em; color: var(--muted); }
.chapter .ch-label {
  font-family: var(--sans); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-soft); white-space: nowrap; opacity: 0; transform: translateX(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
/* rail is just the progress line + dots — numbers and labels removed */
.chapter .ch-num, .chapter .ch-label { display: none; }
.chapter::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--line-2); background: var(--paper); flex-shrink: 0; transition: all .3s var(--ease);
}
.chapter:hover, .chapter.is-active { opacity: 1; }
.chapter:hover .ch-label, .chapter.is-active .ch-label { opacity: 1; transform: none; }
.chapter.is-active::after { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 4px rgba(164,126,51,0.16); }
/* fixed rail passing over a dark section — flip to light ink so it stays legible */
.chapters.on-dark .ch-num { color: rgba(242,241,236,0.55); }
.chapters.on-dark .ch-label { color: rgba(242,241,236,0.9); }
.chapters.on-dark .chapters-line { background: rgba(242,241,236,0.22); }
.chapters.on-dark .chapter::after { border-color: rgba(242,241,236,0.45); background: transparent; }
.chapters.on-dark .chapter.is-active::after { border-color: var(--gold-2); background: var(--gold-2); box-shadow: 0 0 0 4px rgba(217,178,94,0.2); }
@media (max-width: 1380px) { .chapters { display: none; } }

.k-idx { font-family: var(--mono); font-weight: 500; color: var(--gold-2); margin-right: 0.15rem; letter-spacing: 0; }

/* ============================================================
   MOBILE-FIRST REFINEMENTS (Direction B) — sticky enquiry bar,
   listings carousel, corridor chips, tighter rhythm
   ============================================================ */
.mobile-cta { display: none; }
@media (max-width: 700px) {
  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: var(--deep); border-top: 1px solid var(--gold);
    box-shadow: 0 -8px 24px -12px rgba(20,18,14,0.6);
  }
  .mobile-cta a {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.95rem 0.75rem calc(0.95rem + env(safe-area-inset-bottom, 0px));
    font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .mobile-cta-wa { color: var(--gold-2); border-right: 1px solid var(--on-navy-line); }
  .mcta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 3px rgba(217,178,94,0.2); }
  .mobile-cta-call { color: var(--on-navy); }
  body { padding-bottom: 58px; }
}
@media (max-width: 600px) {
  .section-pad { padding: 34px 0; }
  .hero { padding-top: 84px; }
  .cta { padding-top: 3.2rem; padding-bottom: 3rem; }

  /* Featured spaces \2192 swipe carousel (all three plates) */
  .spaces-grid {
    display: flex; grid-template-columns: none;
    gap: 0.85rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -1.5rem; padding: 0 1.5rem 0.6rem;
    -webkit-overflow-scrolling: touch;
  }
  .spaces-grid .space-plate { flex: 0 0 78%; scroll-snap-align: start; }
  .spaces-grid .space-plate:nth-child(3) { display: flex; }

  /* Coverage corridors \2192 chips */
  .loc-group .loc-list { columns: 1; display: flex; flex-wrap: wrap; gap: 0.5rem; border-top: none; }
  .loc-group .loc-list li {
    padding: 0.4rem 0.7rem; border: 1px solid var(--line-2);
    background: var(--card); font-size: 0.82rem; gap: 0;
  }
  .loc-group .loc-list li::before { display: none; }
  .loc-group:first-child .loc-list li:nth-child(n+6) { display: inline-flex; }
}

/* Phone: compress the tall editorial sections so the page reads dense, not endless */
@media (max-width: 600px) {
  .section-pad { padding: 25px 0; }

  /* Hero — cap image, trim rhythm */
  .fig-frame { aspect-ratio: 16 / 11; }
  .hero-lead { margin-top: 1.35rem; }
  .hero-actions { margin-top: 1.5rem; gap: 0.65rem; }

  /* Process — drop the decorative floor plate, tighten the six steps */
  .journey-visual { display: none; }
  .journey-stage { gap: 0; margin-top: 0.4rem; }
  .j-panel { padding: 1rem 0 1rem 42px !important; }
  .j-panel h4 { font-size: 1.2rem !important; margin-bottom: 0.28rem !important; }
  .j-panel h4::before { top: 1rem !important; font-size: 1.1rem !important; }
  .j-panel p { font-size: 0.9rem; line-height: 1.5; }
  .proc-section .section-head { margin-bottom: 0.3rem; }

  /* Who we help — tighter stacked personas */
  .who-slide { padding-top: 1.15rem !important; margin-bottom: 1.15rem !important; }
  .persona-h { font-size: 1.26rem !important; margin-bottom: 0.5rem !important; }
  .persona-lead { font-size: 0.9rem; }
  .persona-foot { margin-top: 0.95rem !important; }

  /* Services — a touch tighter */
  .services .section-head { margin-bottom: 1rem; }
  .svc-desc { font-size: 0.78rem; }

  /* Contact */
  .cta-inner h2 { font-size: 1.9rem; }
}

/* Mobile: one consistent LEFT edge down the whole page (Process + Contact were
   centered against an otherwise left-aligned page — that's the "misaligned" feel).
   !important because these overrides sit earlier than the base centered rules. */
@media (max-width: 600px) {
  .proc-umbrella, .proc-section .section-head { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; padding-top: clamp(18px, 6vw, 30px); }
  .proc-umbrella-sub { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
  .proc-mobile-intro { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
  .cta-inner { text-align: left !important; margin-left: 0 !important; }
  .cta .kicker { justify-content: flex-start !important; }
  .who-slide { padding-top: 1rem !important; margin-bottom: 1rem !important; }
  .about-notes p:not(.notes-h) { font-size: 0.94rem; line-height: 1.58; }
  .coverage-map { max-width: 340px; }
}

/* ============================================================
   DESKTOP "WOW" MOMENTS — self-drawing Grade-A elevation,
   kinetic headline reveal, ghost-numeral service cards
   ============================================================ */
.hero-elevation { width: 100%; height: 100%; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FCFAF6, #F3F0E8); }
.hero-elevation .el-svg { width: 100%; height: 100%; display: block; }
.hero-elevation .el-struct { fill: none; stroke: var(--deep); stroke-width: 1.4;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.hero-elevation .el-gold { stroke: var(--gold); }
.hero-elevation .el-win { fill: var(--gold); opacity: .9; transform-box: fill-box; transform-origin: center bottom; }
.hero-elevation .el-sun { fill: rgba(217,178,94,.42); }
.hero-elevation .el-tree { fill: none; stroke: var(--gold-ink); stroke-width: 1.3; opacity: .5; }
.js .hero-elevation .el-struct { stroke-dasharray: 1; stroke-dashoffset: 1; animation: elDraw 1.5s var(--ease) forwards; }
.js .hero-elevation .el-a { animation-delay: .2s; }
.js .hero-elevation .el-b { animation-delay: .85s; }
.js .hero-elevation .el-c { animation-delay: 1.2s; }
.js .hero-elevation .el-win { opacity: 0; animation: elLight .55s var(--ease) forwards; }
.js .hero-elevation .el-sun { opacity: 0; animation: elFade 1.3s var(--ease) .3s forwards; }
.js .hero-elevation .el-tree { opacity: 0; animation: elFade 1s var(--ease) 3.1s forwards; }
@keyframes elDraw { to { stroke-dashoffset: 0; } }
@keyframes elLight { from { opacity: 0; transform: scaleY(.12); } to { opacity: .9; transform: none; } }
@keyframes elFade { from { opacity: 0; } to { opacity: .5; } }

/* Kinetic headline reveal (desktop) */
@media (min-width: 768px) {
  .js .hero-h1 .hl { display: inline-block; opacity: 0; transform: translateY(28px); animation: hlRise .95s var(--ease) forwards; }
  @keyframes hlRise { to { opacity: 1; transform: none; } }
  .hero-h1 .ul { position: relative; }
  .js .hero-h1 .ul::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.06em; height: 2px;
    background: var(--gold); transform: scaleX(0); transform-origin: left; animation: ulDraw .75s var(--ease) 1.15s forwards; }
  @keyframes ulDraw { to { transform: scaleX(1); } }
}

/* Service cards */
.svc-card { position: relative; }

/* Elevation is a desktop delight — compact, text-first hero on phones */
@media (max-width: 600px) { .hero-fig-col { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-elevation .el-struct { stroke-dashoffset: 0 !important; animation: none !important; }
  .hero-elevation .el-win { opacity: .9 !important; animation: none !important; transform: none !important; }
  .hero-elevation .el-sun { opacity: .42 !important; animation: none !important; }
  .hero-elevation .el-tree { opacity: .5 !important; animation: none !important; }
  .hero-h1 .hl { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-h1 .ul::after { transform: scaleX(1) !important; animation: none !important; }
}

/* ============================================================
   HERO — editorial full-bleed masthead (premium, type-forward)
   ============================================================ */
.hero--masthead {
  position: relative; min-height: 100vh;
  background: var(--paper); color: var(--ink);
  display: flex; align-items: stretch;
  overflow: hidden;
}
.hero--masthead .mh-bg {
  position: absolute; top: -8%; left: 0; right: 0; height: 118%; z-index: 0; will-change: transform;
  background:
    repeating-linear-gradient(90deg, rgba(242,241,236,0.055) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(242,241,236,0.030) 0 1px, transparent 1px 74px),
    radial-gradient(130% 80% at 80% 6%, rgba(199,154,62,0.13), transparent 58%),
    linear-gradient(180deg, #1C1811 0%, #14110C 100%);
}
.hero--masthead .mh-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 120% at 50% 38%, transparent 60%, rgba(244,239,230,0.42) 100%);
}
.hero--masthead .mh-inner {
  position: relative; z-index: 2; order: 0; flex: 1.02 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(1.4rem, 3vh, 2.4rem);
  padding: clamp(104px, 14vh, 150px) clamp(2rem, 4vw, 3.6rem) clamp(48px, 7vh, 76px) clamp(1.7rem, 5.5vw, 5.5rem);
}
.hero--masthead .mh-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-2);
}
.hero--masthead .mh-kicker { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-ink); }
.hero--masthead .mh-meta { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--muted); }
.hero--masthead .mh-center { display: block; }
.hero--masthead .mh-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.7vw, 3.5rem); line-height: 1.08; letter-spacing: -0.014em; color: var(--ink); margin: 0; text-wrap: balance; padding-left: 0.14em; }
.hero--masthead .mh-h1 .hl { display: block; }
.hero--masthead .mh-h1 em.plain { font-style: italic; color: #8B4A47; -webkit-text-fill-color: #8B4A47; }   /* muted dusty oxblood — calmer than --burgundy on the soft hero */
.hero--masthead .mh-h1 em.ul { font-style: italic; color: var(--gold-ink); position: relative; }
.hero--masthead .mh-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.hero--masthead .mh-lead { font-family: var(--body); font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.66; color: var(--ink-soft); max-width: 42ch; }
.hero--masthead .mh-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.btn-paper { display: inline-block; font-family: var(--sans); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.9rem 1.75rem; background: var(--deep); color: var(--on-navy); border: 1px solid var(--gold); transition: background .25s var(--ease), color .25s, transform .25s var(--ease); }
.btn-paper:hover { background: var(--gold-ink); border-color: var(--gold-ink); color: var(--on-navy); transform: translateY(-2px); }
.btn-ghost { display: inline-block; font-family: var(--sans); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.9rem 1.75rem; background: transparent; color: var(--ink); border: 1px solid var(--line-2); transition: border-color .25s, color .25s, transform .25s var(--ease); }
.btn-ghost:hover { border-color: var(--gold-ink); color: var(--gold-ink); transform: translateY(-2px); }
.hero--masthead .mh-scroll { position: absolute; z-index: 3; left: clamp(1.7rem, 5.5vw, 5.5rem); bottom: clamp(20px, 4vh, 40px); display: flex; flex-direction: row; align-items: center; gap: 0.7rem; font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.hero--masthead .mh-scroll i { transform: rotate(0deg); }
.hero--masthead .mh-scroll i { width: 1px; height: 32px; background: linear-gradient(var(--gold), transparent); transform-origin: top; animation: mhScroll 2.4s var(--ease) infinite; }
@keyframes mhScroll { 0%, 100% { transform: scaleY(0.4); opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } }

/* ============================================================
   HERO — cinematic photographic full-bleed (skyline)
   ============================================================ */
.hero--masthead .mh-media { position: relative; order: 1; flex: 0.98 1 0; overflow: hidden; border-left: 1px solid var(--line-2); }
.hero--masthead .mh-scene {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 46%;
  filter: url(#mhDuo) contrast(1.03);   /* warm ink->parchment duotone (branded, muted) */
  transform: scale(1.04); transform-origin: 60% 58%;
  will-change: transform;
}
.hero--masthead .mh-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(251,249,244,0.44) 0%, rgba(251,249,244,0.08) 22%,
      rgba(251,249,244,0.10) 50%, rgba(251,249,244,0.40) 80%, rgba(251,249,244,0.66) 100%),
    linear-gradient(90deg,
      rgba(251,249,244,0.72) 0%, rgba(251,249,244,0.30) 38%,
      rgba(251,249,244,0.03) 66%, transparent 100%);
}
.hero--masthead .mh-meta { white-space: nowrap; }
/* gilded emphasis word — drawn underline */
.hero--masthead .mh-h1 em.ul::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -0.04em; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  /* Ken Burns — slow, tasteful zoom/drift */
  .js .hero--masthead .mh-scene { animation: mhKen 34s ease-in-out infinite alternate; }
  @keyframes mhKen {
    from { transform: scale(1.05) translate3d(0, 0, 0); }
    to   { transform: scale(1.13) translate3d(-1.2%, -1.4%, 0); }
  }
  /* Entrance — staggered rise of the three content rows */
  .js .hero--masthead .mh-top,
  .js .hero--masthead .mh-center,
  .js .hero--masthead .mh-bottom { opacity: 0; animation: mhRise 1s var(--ease) forwards; }
  .js .hero--masthead .mh-top    { animation-delay: 0.15s; }
  .js .hero--masthead .mh-center { animation-delay: 0.34s; }
  .js .hero--masthead .mh-bottom { animation-delay: 0.52s; }
  @keyframes mhRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .js .hero--masthead .mh-h1 em.ul::after { animation: mhUl 0.7s var(--ease) 1.15s forwards; }
  @keyframes mhUl { to { transform: scaleX(1); } }
}

/* Seam: a gold hairline sets the stats band off from the light hero above */
.band { border-top: 1px solid rgba(164,126,51,0.28); }

/* ---- Nav: transparent over the cinematic hero, solid once past it ---- */
.wordmark { transition: color .3s; }
.nav.over-hero {
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav.over-hero .wordmark { color: var(--ink); }
.nav.over-hero .wordmark span { color: var(--muted); }
.nav.over-hero .nav-links a { color: var(--ink-soft); }
.nav.over-hero .nav-links a:hover { color: var(--burgundy); }
.nav.over-hero .nav-cta { color: var(--ink) !important; border-color: var(--gold); }
.nav.over-hero .nav-cta:hover { background: var(--deep); border-color: var(--deep); color: var(--on-navy) !important; }
.nav.over-hero .hamburger span { background: var(--ink); }

/* ---- Properties dropdown ---- */
.nav-links { gap: clamp(1.5rem, 2.2vw, 2.5rem); }
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-toggle { display: inline-flex; align-items: center; gap: 0.42em; cursor: pointer; }
.dd-caret { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: 0.6; transition: transform .2s var(--ease), opacity .2s; }
.nav-dd:hover .dd-caret, .nav-dd:focus-within .dd-caret { transform: rotate(180deg); opacity: 1; }
.nav-dd-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 200px; padding: 0.35rem 0;
  background: var(--paper); border: 1px solid var(--line-2); border-top: 2px solid var(--gold);
  box-shadow: 0 22px 46px -20px rgba(29,27,23,0.42);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 130;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(6px);
}
.nav-dd-menu a {
  display: block; padding: 0.62rem 1.25rem;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft);
  white-space: nowrap; transition: background .15s, color .15s;
}
.nav-dd-menu a:hover { background: var(--paper-3); color: var(--burgundy); }
/* keep dropdown items dark even when the bar is transparent over the hero */
.nav.over-hero .nav-dd-menu a { color: var(--ink-soft); }
.nav.over-hero .nav-dd-menu a:hover { color: var(--burgundy); }

/* mobile drawer sub-items */
.mobile-menu .mm-sub { padding-left: 1.4rem; font-size: 0.92rem; color: var(--muted); }
.mobile-menu .mm-sub::before { content: '—'; margin-right: 0.5rem; color: var(--gold); opacity: 0.65; }

/* ---- Process: tenant track (precedes the pinned owner journey) ---- */
.proc-track { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(8px, 2vw, 24px); position: relative; z-index: 2; }
.track-eyebrow { display: inline-block; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 1rem; }
.track-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.track-h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
.tenant-steps { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4.5rem); row-gap: 0; }
.tstep { display: flex; gap: 1.1rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.tstep-num { font-family: var(--mono); font-size: 0.92rem; font-weight: 600; color: var(--gold-ink); letter-spacing: 0.04em; padding-top: 0.28rem; flex-shrink: 0; }
.tstep-body h4 { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--ink); margin-bottom: 0.4rem; }
.tstep-body p { font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); max-width: 40ch; }
.track-divide { display: flex; align-items: center; justify-content: center; padding-top: clamp(34px, 5vw, 60px); }
.track-divide span { width: 7px; height: 7px; background: var(--gold-2); transform: rotate(45deg); flex-shrink: 0; }
.track-divide::before, .track-divide::after { content: ''; height: 1px; width: clamp(44px, 11vw, 120px); background: var(--gold); opacity: 0.5; margin: 0 0.9rem; }
@media (max-width: 720px) {
  .tenant-steps { grid-template-columns: 1fr; }
  .tstep { padding: 0.9rem 0; }
  .tstep-body h4 { font-size: 1.1rem; }
}

/* ---- About Us: see "Sheet 01 — the table, drawn" (.about-sheet) below ---- */

/* ---- Shared section eyebrow (wayfinding: carries the nav's names) ---- */
.kicker { display: inline-block; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 1rem; }

/* ---- Process: unified umbrella + matched tracks + lease hinge ---- */
.proc-umbrella { max-width: 880px; margin-left: auto; margin-right: auto; text-align: center; padding-top: clamp(56px, 8vw, 104px); }
.proc-umbrella-h { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.012em; color: var(--ink); }
.proc-umbrella-sub { margin: 1.1rem auto 0; max-width: 54ch; font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }

/* tracks are now sub-heads under the umbrella */
.proc-track { padding-top: clamp(30px, 4.5vw, 60px); }
.track-h { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.track-head--owner { margin-bottom: clamp(1.3rem, 3vw, 2.1rem); }

/* audience colour-key — occupier = burgundy, owner = gold */
.track-eyebrow--occupier { color: var(--burgundy); }
.track-eyebrow--owner { color: var(--gold-ink); }
.proc-track .tstep-num { color: var(--burgundy); }

/* mirrored closing CTAs (Process finally has a conversion moment) */
.track-cta { display: inline-block; margin-top: clamp(1.5rem, 3vw, 2.4rem); font-family: var(--sans); font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.78rem 1.55rem; border: 1px solid var(--line-2); background: transparent; transition: border-color .25s, color .25s, background .25s, transform .25s var(--ease); }
.track-cta:hover { transform: translateY(-2px); }
.track-cta--occupier { color: var(--burgundy); border-color: rgba(161,60,63,0.45); }
.track-cta--occupier:hover { background: var(--burgundy); color: var(--paper); border-color: var(--burgundy); }
.track-cta--owner { color: var(--gold-ink); border-color: rgba(164,126,51,0.55); }
.track-cta--owner:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }
.track-foot { padding-bottom: clamp(44px, 6vw, 84px); }

/* the lease hinge — set-piece divider between the two journeys */
.track-hinge { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); padding: clamp(20px, 3.2vw, 36px) 0 clamp(12px, 2vw, 22px); }
.hinge-rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); opacity: 0.45; }
.track-hinge .hinge-rule:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.hinge-note {
  flex-shrink: 0; max-width: 42ch; text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.hinge-note em { font-style: italic; color: var(--gold-ink); }
@media (max-width: 720px) {
  .track-hinge { flex-direction: column; gap: 0.9rem; padding: clamp(14px,4vw,22px) 0 clamp(8px,3vw,14px); }
  .track-hinge .hinge-rule { width: 45%; flex: none; }
  .hinge-note { font-size: clamp(1rem,4.2vw,1.2rem); }
}

/* ---- Who We Help: two-column layout (copy left, figure right) ---- */
.who-panels .persona-grid { grid-template-columns: 1.08fr 0.92fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
.who-panels .persona-copy { max-width: 48ch; }
.persona-eyebrow--occupier { color: var(--burgundy); }
.persona-eyebrow--owner { color: var(--gold-ink); }
.persona-cta { display: inline-block; font-family: var(--sans); font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.78rem 1.55rem; border: 1px solid var(--line-2); transition: border-color .25s, color .25s, background .25s, transform .25s var(--ease); }
.persona-cta:hover { transform: translateY(-2px); }
.persona-cta--occupier { color: var(--burgundy); border-color: rgba(161,60,63,0.45); }
.persona-cta--occupier:hover { background: var(--burgundy); color: var(--paper); border-color: var(--burgundy); }
.persona-cta--owner { color: var(--gold-ink); border-color: rgba(164,126,51,0.55); }
.persona-cta--owner:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }

/* dark-section eyebrows use the brighter gold for contrast */
.spaces .kicker, .cta .kicker { color: var(--gold-2); }
/* audience colour-key on the client marquee row labels */
.client-row-label--owner { color: var(--gold-ink); }
.client-row-label--occupier { color: var(--burgundy); }

/* ---- Visual-richness pass: engraved plate borders + drafting-vellum texture ---- */
.svc-card { border-color: var(--line-2); }
.svc-card::before { content: ''; position: absolute; inset: 7px; pointer-events: none; border: 1px solid var(--line); opacity: 0.6; }

/* faint ruled/survey texture so the two barest fields read as fine paper, not blank */
/* (About ledger texture removed — the section carries a photo plate instead) */
.proc-section {
  background-image:
    repeating-linear-gradient(180deg, transparent 0 63px, rgba(29,27,23,0.045) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(29,27,23,0.045) 63px 64px);
}

/* ---- Mobile masthead ---- */
@media (max-width: 900px) {
  .hero--masthead .mh-h1 { font-size: clamp(2.3rem, 8.4vw, 3.6rem); }
}
@media (max-width: 600px) {
  .hero--masthead { min-height: 100svh; padding: clamp(84px, 15vh, 118px) 0 clamp(30px, 8vh, 60px); }
  .hero--masthead .mh-meta { display: none; }
  .hero--masthead .mh-h1 { font-size: clamp(2.15rem, 9vw, 3rem); letter-spacing: -0.01em; }
  .hero--masthead .mh-lead { font-size: 0.98rem; }
  .hero--masthead .mh-bottom { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .hero--masthead .mh-actions { width: 100%; }
  .hero--masthead .mh-actions .btn-paper,
  .hero--masthead .mh-actions .btn-ghost { flex: 1; text-align: center; }
  .hero--masthead .mh-scroll { display: none; }
  .hero--masthead .mh-photo { object-position: 56% 44%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--masthead .mh-photo { transform: scale(1.05); animation: none; }
  .hero--masthead .mh-h1 em.ul::after { transform: scaleX(1); }
  .hero--masthead .mh-top,
  .hero--masthead .mh-center,
  .hero--masthead .mh-bottom { opacity: 1; }
  .hero--masthead .mh-scroll i { animation: none; }
}

/* motion — a little, tasteful */
.js .hero--masthead .mh-h1 .hl { opacity: 0; transform: translateY(30px); animation: mhRise 1s var(--ease) forwards; }
.js .hero--masthead .mh-h1 .hl:nth-child(1) { animation-delay: .2s; }
.js .hero--masthead .mh-h1 .hl:nth-child(2) { animation-delay: .34s; }
.js .hero--masthead .mh-h1 .hl:nth-child(3) { animation-delay: .48s; }
.js .hero--masthead .mh-h1 em.ul::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.04em; height: 2px; background: var(--gold-2); transform: scaleX(0); transform-origin: left; animation: mhUnder .8s var(--ease) 1.35s forwards; }
.js .hero--masthead .mh-top { opacity: 0; animation: mhFade 1.1s var(--ease) .1s forwards; }
.js .hero--masthead .mh-bottom { opacity: 0; animation: mhFade 1.1s var(--ease) .75s forwards; }
.js .hero--masthead .mh-scroll { opacity: 0; animation: mhFade 1s var(--ease) 1.5s forwards; }
@keyframes mhRise { to { opacity: 1; transform: none; } }
@keyframes mhFade { to { opacity: 1; } }
@keyframes mhUnder { to { transform: scaleX(1); } }

/* (masthead nav treatment removed) */

@media (max-width: 700px) {
  .hero--masthead { min-height: 92vh; }
  .hero--masthead .mh-meta { display: none; }
  .hero--masthead .mh-actions { width: 100%; }
  .hero--masthead .btn-paper, .hero--masthead .btn-ghost { flex: 1; text-align: center; padding-left: 0.5rem; padding-right: 0.5rem; }
  .hero--masthead .mh-scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero--masthead .mh-h1 .hl,
  .js .hero--masthead .mh-top,
  .js .hero--masthead .mh-bottom,
  .js .hero--masthead .mh-scroll { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js .hero--masthead .mh-h1 em.ul::after { transform: scaleX(1) !important; animation: none !important; }
  .hero--masthead .mh-scroll i { animation: none !important; }
}

/* ============================================================
   VISUAL RICHNESS PASS v52
   ============================================================ */

/* ---- Task 1: Who We Help persona figure — mobile hide (existing rule kept) ---- */
/* The .persona-fig { display: none } on mobile is in the @max-width:900px block above */

/* ---- About: "Sheet 01 — the table, drawn" (both sides of the table, dimensioned in years) ---- */
.about { position: relative; }
.about-sheet { position: relative; padding: clamp(1.7rem, 4vw, 3.4rem); border: 1px solid var(--line-2); background: var(--paper); }
/* engraved inner plate — same device as .svc-card::before, scaled up */
.about-sheet::before { content: ''; position: absolute; inset: 8px; pointer-events: none; border: 1px solid var(--line); opacity: 0.7; z-index: 0; }
/* faint drafting grid */
.about-sheet::after { content: ''; position: absolute; inset: 8px; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(to right, transparent 0 47px, var(--line) 47px 48px);
  opacity: 0.14; }
.about-sheet > * { position: relative; z-index: 1; }

/* sheet edges — a drawing frame, not a kicker (full-width rule, mono, top + bottom) */
.sheet-edge { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.4rem); }
.sheet-edge--top { margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
.sheet-edge--bot { margin-top: clamp(1.8rem, 3.5vw, 2.8rem); }
.edge-label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.edge-rule { flex: 1; height: 1px; background: var(--line-2); }

.about-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.8vw, 3.1rem); line-height: 1.1; letter-spacing: -0.014em; color: var(--ink); text-wrap: balance; max-width: 20em; margin: 0 0 clamp(2rem, 4vw, 3.2rem); }

/* the plan */
.about-plan-wrap { margin: 0 0 clamp(2rem, 4vw, 3.2rem); }
.plan-side { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.4rem 0.7rem; text-align: center; }
.plan-side--occ { margin-bottom: 0.5rem; }
.plan-side--own { margin-top: 0.5rem; }
.ps-k { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.plan-side--occ .ps-k { color: var(--burgundy); }
.plan-side--own .ps-k { color: var(--gold-ink); }
.ps-v { font-family: var(--body); font-style: italic; font-size: 0.9rem; color: var(--muted); }

.about-table { display: block; width: 100%; height: auto; overflow: visible; }
.about-table .ln { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.about-table .seat { stroke-width: 1.5; stroke-linecap: round; }
.about-table .seat--occ { stroke: var(--burgundy); }
.about-table .seat--own { stroke: var(--gold); }
.about-table .seat--bbre { stroke: var(--gold-ink); stroke-width: 1.4; stroke-linecap: round; }
.about-table .seatmark { fill: var(--gold-2); }
.about-table .seat-lbl { font-family: var(--mono); font-size: 15px; letter-spacing: 0.06em; fill: var(--gold-ink); }

.about-dim { display: block; width: 100%; height: auto; overflow: visible; margin-top: clamp(0.9rem, 1.8vw, 1.35rem); }
.about-dim .ext { stroke: var(--ink); stroke-width: 1; opacity: 0.3; }
.about-dim .dimline { stroke: var(--ink); stroke-width: 1; opacity: 0.4; }
.about-dim .ticks { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.32; }
.about-dim .arw { fill: var(--ink); opacity: 0.5; }

.plan-years { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: clamp(0.9rem, 1.8vw, 1.35rem); padding: 0 20.37%; }
.plan-years span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.plan-years .py-end { color: var(--ink-soft); }
.plan-years .py-mid { color: var(--muted); letter-spacing: 0.14em; }

/* general notes + title block */
.about-notes-row { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(2rem, 4.5vw, 4rem); align-items: start; padding-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--line); }
.notes-h { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.9rem; }
.about-notes p:not(.notes-h) { font-family: var(--body); font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.72; color: var(--ink-soft); max-width: 58ch; }
.about-notes p:not(.notes-h) + p { margin-top: 1rem; }

.about-block { border: 1px solid var(--line-2); align-self: start; background: color-mix(in srgb, var(--paper) 55%, transparent); }
.ab-head { padding: 0.72rem 0.9rem; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 0.16rem; }
.ab-firm { font-family: var(--serif); font-size: 1rem; color: var(--ink); }
.ab-sub { font-family: var(--sans); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
.ab-rows { margin: 0; }
.ab-row { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 0.7rem; padding: 0.58rem 0.9rem; }
.ab-row + .ab-row { border-top: 1px solid var(--line); }
.ab-row dt { font-family: var(--sans); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); align-self: center; }
.ab-row dd { margin: 0; font-family: var(--body); font-size: 0.9rem; line-height: 1.4; color: var(--ink); }
.ab-row .fig { font-family: var(--mono); letter-spacing: -0.01em; }
.ab-row .ab-lines { display: flex; flex-direction: column; gap: 0.12rem; line-height: 1.3; }

@media (max-width: 820px) {
  .about-sheet { border-left: none; border-right: none; padding: clamp(1.4rem, 5vw, 2rem) 0; }
  .about-sheet::before { display: none; }
  .about-sheet::after { left: 0; right: 0; }
  .about-notes-row { grid-template-columns: 1fr; gap: 1.6rem; }
  .about-title { font-size: clamp(1.7rem, 6.4vw, 2.4rem); }
  .about-block { max-width: 460px; }
  /* Phone: the wide table plan is illegible at this width — drop the drawing and present
     the two sides as a clean left-aligned labelled pair (the concept lives in the headline + notes). */
  .about-table, .about-dim, .plan-years { display: none; }
  .about-plan-wrap { margin-bottom: clamp(1.4rem, 5vw, 2.2rem); }
  .plan-side { justify-content: flex-start; text-align: left; }
  .plan-side--occ { margin-bottom: 0; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line); }
  .plan-side--own { margin-top: 0.85rem; }
}
@media (max-width: 520px) {
  .plan-years .py-mid { display: none; }
}

/* draw-on motion — the SVG is fully drawn by default; this only enhances */
@media (prefers-reduced-motion: no-preference) {
  .about-table .ln { stroke-dasharray: 1; stroke-dashoffset: 0; }
  .about-table .seatmark { transform-box: fill-box; transform-origin: center; }
  .about-plan-wrap.is-drawing .tbl { animation: aboutDraw 0.6s var(--ease) both; }
  .about-plan-wrap.is-drawing .seat--occ { animation: aboutDraw 0.5s var(--ease) both; animation-delay: calc(0.5s + var(--i) * 0.06s); }
  .about-plan-wrap.is-drawing .seat--own { animation: aboutDraw 0.5s var(--ease) both; animation-delay: calc(0.72s + var(--i) * 0.06s); }
  .about-plan-wrap.is-drawing .seat--bbre { animation: aboutDraw 0.5s var(--ease) both; animation-delay: 1.05s; }
  .about-plan-wrap.is-drawing .seatmark { animation: aboutMark 0.45s var(--ease) both; animation-delay: 1.2s; }
  .about-plan-wrap.is-drawing .dimg { animation: aboutWipe 0.7s var(--ease) both; animation-delay: 1.1s; }
}
@keyframes aboutDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aboutMark { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes aboutWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- Task 4: Coverage map corridor animation + caption ---- */
.ncr-corridors { opacity: 0; transition: opacity 0.9s var(--ease) 1.1s; }
.ncr-hatch     { opacity: 0; transition: opacity 0.7s var(--ease) 0.6s; }
.ncr-corridor-labels { transition: opacity 0.6s var(--ease) 1.5s; }
.locations-right.in-view .ncr-corridors { opacity: 1; }
.locations-right.in-view .ncr-hatch     { opacity: 1; }
.locations-right.in-view .ncr-corridor-labels { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ncr-corridors, .ncr-hatch, .ncr-corridor-labels { opacity: 1; transition: none; }
}

.coverage-figure { margin: 0; }
.coverage-cap {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 0.6rem; margin-bottom: 1.5rem;
  font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em;
}

/* ---- Task 5: Editorial margin markers (desktop only, ≥1440px) ---- */
.margin-marker {
  display: none;
}
@media (min-width: 1440px) {
  .margin-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    position: absolute;
    /* sit in the right margin between the container edge and the chapter rail (which is at right:26px).
       Container max is 1280px so at 1440px the right margin is 80px wide.
       We park at right:56px — well inside the margin, clear of the 26px rail. */
    right: 56px;
    top: clamp(56px, 8vw, 96px);
    z-index: 2;
    pointer-events: none;
  }
  .mm-num {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    opacity: 0.7;
  }
  .mm-label {
    font-family: var(--sans);
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--gold-ink);
    opacity: 0.65;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    /* vertical line above the label */
  }
  .mm-label::before {
    content: '';
    display: block;
    width: 1px;
    height: 18px;
    background: var(--gold);
    opacity: 0.4;
    margin: 0 auto 0.35rem;
  }
  /* Dark-section marker — lighter text */
  .margin-marker--dark .mm-num  { color: var(--on-navy-soft); }
  .margin-marker--dark .mm-label { color: var(--gold-2); }
  .margin-marker--dark .mm-label::before { background: var(--gold-2); }
}

/* ---- Task 6: Service card architectural glyphs ---- */
.svc-glyph {
  position: absolute;
  bottom: clamp(0.9rem, 1.5vw, 1.3rem);
  right: clamp(0.9rem, 1.5vw, 1.3rem);
  width: 30px;
  height: 30px;
  color: var(--ink);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s var(--ease);
}
.svc-card:hover .svc-glyph { opacity: 0.32; }

/* ============================================================
   PROCESS ACCORDION — PHONE ONLY (≤600px)
   Gate collapse CSS on .js so no-JS keeps descriptions visible.
   Above 600px: zero changes — desktop layout untouched.
   ============================================================ */

/* Mobile intro sentence — phone only, hidden on desktop */
.proc-mobile-intro {
  display: none;
}
@media (max-width: 600px) {
  .proc-mobile-intro {
    display: block;
    margin: 0.85rem auto 0;
    max-width: 52ch;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--gold-ink);
    font-family: var(--sans);
    font-style: italic;
  }
}

/* Chevron SVG affordance — only rendered by JS on mobile */
.step-chevron {
  display: none; /* JS adds it; desktop never sees it */
}

@media (max-width: 600px) {
  /* ---------- Tenant track (Part I — .tstep) ---------- */

  /* Make the title row a button-like target */
  .js .tstep-trigger {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.9rem 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  /* When JS is active: collapse the step container itself (remove its own padding —
     the trigger now owns the padding) and hide the description by default */
  .js .tstep {
    display: block;
    padding: 0;
    border-top: 1px solid var(--line);
  }

  .js .tstep-body {
    /* trigger contains num + h4; only p collapses */
  }

  .js .tstep-body p {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding-bottom: 0;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.24s ease,
                padding-bottom 0.32s ease;
  }

  /* Open state */
  .js .tstep.is-open .tstep-body p {
    max-height: 16rem; /* generous ceiling — no step description is this tall */
    opacity: 1;
    padding-bottom: 0.85rem;
  }

  /* Chevron in the trigger row */
  .js .tstep .step-chevron {
    display: inline-flex;
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
    width: 18px;
    height: 18px;
    color: var(--muted);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .js .tstep.is-open .step-chevron {
    transform: rotate(180deg);
  }

  /* ---------- Who We Help personas (.who-slide) — same collapse pattern ---------- */
  .js .who-trigger { display: flex; align-items: flex-start; gap: 0.8rem; width: 100%; padding: 0; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
  .js .who-trigger-txt { flex: 1; min-width: 0; }
  .js .who-trigger .step-chevron { display: inline-flex; flex-shrink: 0; align-self: center; width: 18px; height: 18px; color: var(--muted); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
  .js .who-slide.is-open .who-trigger .step-chevron { transform: rotate(180deg); }
  .js .who-slide .persona-lead, .js .who-slide .persona-foot {
    overflow: hidden; max-height: 0; opacity: 0; margin-top: 0;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease, margin-top 0.32s ease;
  }
  .js .who-slide.is-open .persona-lead { max-height: 16rem; opacity: 1; margin-top: 0.7rem; }
  .js .who-slide.is-open .persona-foot { max-height: 8rem; opacity: 1; margin-top: 0.9rem; }
  .js .who-trigger:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; border-radius: 2px; }

  /* Focus ring */
  .js .tstep-trigger:focus-visible {
    outline: 2px solid var(--burgundy);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ---------- Owner panels (Part II — .j-panel) ---------- */

  .js .j-panel {
    /* j-panel already becomes a list on mobile (see existing rules) —
       wrap the trigger the same way */
    padding: 0 !important;
  }

  .js .j-panel-trigger {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    background: none;
    border: none;
    padding: 0.9rem 0 0.9rem 42px !important;
    margin: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  .js .j-panel-trigger:focus-visible {
    outline: 2px solid var(--gold-ink);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* h4 inside the trigger keeps its ::before counter (number) and existing size */
  .js .j-panel h4 {
    font-size: 1.2rem !important;
    margin-bottom: 0 !important;
    flex: 1;
  }

  /* description collapse */
  .js .j-panel p {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0 0 0 42px;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.24s ease,
                padding-bottom 0.32s ease;
  }

  .js .j-panel.is-open p {
    max-height: 16rem;
    opacity: 1;
    padding-bottom: 0.85rem;
  }

  /* chevron on owner panels */
  .js .j-panel .step-chevron {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--muted);
    margin-left: auto;
    margin-right: 0;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .js .j-panel.is-open .step-chevron {
    transform: rotate(180deg);
  }
}

/* Respect prefers-reduced-motion — instant open/close, no slide */
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .js .tstep-body p,
  .js .j-panel p {
    transition: none;
  }
  .js .tstep .step-chevron,
  .js .j-panel .step-chevron {
    transition: none;
  }
}

/* --------------------------------------------------------------
   MOBILE TYPE ROBUSTNESS — headings/labels must REFLOW, not shatter,
   on narrow phones with large device text-scaling. Smaller display
   sizes, gentle label tracking, chevron pinned to the top.
   -------------------------------------------------------------- */
@media (max-width: 600px) {
  .mh-h1 { font-size: clamp(1.6rem, 7.2vw, 2rem) !important; line-height: 1.14 !important; }
  .section-head h2, .about-title, .proc-umbrella-h, .track-h,
  .cta-inner h2, .spaces-head h2 {
    font-size: clamp(1.42rem, 6.2vw, 1.85rem) !important; line-height: 1.16 !important;
  }
  .persona-h { font-size: clamp(1.08rem, 5vw, 1.32rem) !important; margin-bottom: 0.5rem !important; line-height: 1.18 !important; }
  /* kill the wide uppercase tracking that shatters labels onto 3 lines */
  .kicker, .mh-kicker, .track-eyebrow, .about-eyebrow, .notes-h,
  .client-row-label, .persona-eyebrow, .edge-label, .band-item span {
    letter-spacing: 0.05em !important;
  }
  .persona-eyebrow { font-size: 0.62rem !important; }
  /* chevron pinned to the top of a (possibly tall) heading, not floating mid-way */
  .js .who-trigger { align-items: flex-start !important; }
  .js .who-trigger .step-chevron { align-self: flex-start !important; margin-top: 0.15rem; }
}

/* Editorial split hero → stack on tablet/phone: text block, then image band */
@media (max-width: 860px) {
  .hero--masthead { flex-direction: column; min-height: auto !important; }
  .hero--masthead .mh-inner { order: 0; flex: 0 0 auto; padding: clamp(92px, 15vh, 116px) clamp(1.4rem, 6vw, 2.4rem) clamp(28px, 5vh, 40px); }
  .hero--masthead .mh-media { order: 1; flex: 0 0 auto; border-left: none; border-top: 1px solid var(--line-2); min-height: 44vh; }
  .hero--masthead .mh-scroll { display: none; }
}

/* --------------------------------------------------------------
   PAGE TEASERS — slim editorial bands on the home page that invite
   into the two split-off pages (/process, /spaces). Full-width
   hairline rules (ledger feel), Caslon line + gold-ink eyebrow,
   arrow that advances on hover. Kept deliberately short.
   -------------------------------------------------------------- */
.page-teaser {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.page-teaser--alt { background: var(--paper-2); }
.teaser-link {
  /* full-width link so the whole band is the hover/click target (edge to edge),
     while the content stays aligned to the 1180px content column */
  max-width: none;
  margin: 0;
  padding: clamp(2.1rem, 4.4vw, 3.3rem) max(2.5rem, calc((100% - 1180px) / 2 + 2.5rem));
  display: grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows: min-content;
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 3.2rem);
  text-decoration: none;
  color: var(--ink);
  transition: background .3s var(--ease);
}
.teaser-link:hover { background: rgba(164, 126, 51, 0.045); }
.page-teaser--alt .teaser-link:hover { background: rgba(164, 126, 51, 0.07); }
.teaser-eyebrow {
  grid-column: 1;
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.85rem;
}
.teaser-h {
  grid-column: 1;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}
.teaser-sub {
  grid-column: 1;
  font-family: var(--body);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 0.7rem;
  max-width: 48ch;
}
.teaser-go {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.teaser-go i { font-style: normal; transition: transform .3s var(--ease); }
.teaser-link:hover .teaser-go i { transform: translateX(6px); }
.teaser-link:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -4px; }

@media (max-width: 720px) {
  .teaser-link {
    grid-template-columns: 1fr;
    padding: clamp(1.8rem, 7vw, 2.4rem) 1.5rem;
    column-gap: 0;
  }
  .teaser-go {
    grid-column: 1;
    grid-row: auto;
    margin-top: 1.15rem;
    justify-self: start;
  }
  .teaser-h { font-size: clamp(1.3rem, 6vw, 1.7rem); max-width: none; }
  .teaser-sub { max-width: none; }
}

/* --------------------------------------------------------------
   THE FORK — mobile-only audience router ("two sides of the table").
   Desktop keeps the split hero + the Who dial; on phones the two
   doors ARE the router. Full-width ledger panels, audience-keyed
   background tints (never a side stripe), Caslon display, arrow that
   advances on press. Hidden above 860px.
   -------------------------------------------------------------- */
.fork { display: none; }

@media (max-width: 860px) {
  .fork {
    display: block;
    border-top: 1px solid var(--line-2);
  }
  .fork-door {
    position: relative;
    display: block;
    padding: clamp(1.9rem, 7vw, 2.7rem) clamp(3.4rem, 14vw, 4.4rem) clamp(1.9rem, 7vw, 2.7rem) clamp(1.5rem, 6vw, 2.1rem);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    -webkit-tap-highlight-color: transparent;
    transition: background .25s var(--ease);
  }
  .fork-door--occ { background: rgba(161, 60, 63, 0.035); }
  .fork-door--own { background: rgba(164, 126, 51, 0.05); }
  .fork-door--occ:active { background: rgba(161, 60, 63, 0.09); }
  .fork-door--own:active { background: rgba(164, 126, 51, 0.11); }
  .fork-eyebrow {
    display: block; font-family: var(--sans);
    font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; margin-bottom: 0.65rem;
  }
  .fork-door--occ .fork-eyebrow { color: var(--burgundy); }
  .fork-door--own .fork-eyebrow { color: var(--gold-ink); }
  .fork-h {
    display: block; font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.95rem, 8.5vw, 2.5rem); line-height: 1.03;
    letter-spacing: -0.02em; color: var(--ink);
  }
  .fork-dek {
    display: block; font-family: var(--body);
    font-size: 0.96rem; line-height: 1.45; color: var(--ink-soft);
    margin-top: 0.7rem; max-width: 32ch;
  }
  .fork-meta {
    display: block; font-family: var(--sans);
    font-size: 0.7rem; letter-spacing: 0.03em; color: var(--muted);
    text-transform: uppercase; margin-top: 1rem;
  }
  .fork-stat { font-family: var(--serif); font-size: 0.98rem; font-weight: 700; color: var(--ink); letter-spacing: 0; }
  .fork-go {
    position: absolute; right: clamp(1.4rem, 6vw, 2rem);
    top: 50%; transform: translateY(-50%);
    font-size: 1.5rem; line-height: 1;
    transition: transform .3s var(--ease);
  }
  .fork-door--occ .fork-go { color: var(--burgundy); }
  .fork-door--own .fork-go { color: var(--gold-ink); }
  .fork-door--occ:active .fork-go,
  .fork-door--own:active .fork-go { transform: translateY(-50%) translateX(5px); }
  .fork-door:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -3px; }

  /* The Fork is the mobile router — retire the Who dial (its scroll
     runway was a chunk of the length) and the Process teaser (the
     doors already lead to /process). Desktop keeps both. */
  #who { display: none; }
  .page-teaser:not(.page-teaser--alt) { display: none; }
}

/* ==============================================================
   THE POCKET LEDGER — mobile experience (<=700px)
   Desktop is the drawing sheet on the table; mobile is the firm's
   ledger folded into the pocket: one parchment, one left edge,
   ruled entries, a brass rail at the foot. New components (rail,
   sheet, side-chip) are hidden above this breakpoint; desktop is
   untouched. One accent tracks which side of the table you chose.
   ============================================================== */

/* new mobile-only components — hidden on desktop */
.rail { display: none; }
.side-chip { display: none; }
.mh-cap { display: none; }
.sheet { border: none; padding: 0; margin: 0; width: 100%; height: 100%;
  max-width: 100%; max-height: 100%; background: transparent; color: var(--ink); overflow: visible; }
.sheet:not([open]) { display: none; }
.sheet::backdrop { background: rgba(20,18,14,0.001); transition: background .3s; }
.sheet.rise::backdrop { background: rgba(27,28,25,0.5); }

/* which side of the table — set on <html> by JS, persisted */
:root { --side-accent: var(--gold-2); }
html[data-side="occ"] { --side-accent: var(--burgundy); }
html[data-side="own"] { --side-accent: var(--gold); }

@media (max-width: 700px) {
  /* ---------- strip desktop clutter, make room for the rail ---------- */
  body { padding-bottom: 58px; }
  .aura, .deco, .grain, .margin-marker, .ornament-divider,
  .mh-scroll, .chapters, .journey-bg, .mobile-cta { display: none !important; }

  /* ---------- LETTERHEAD (static top strip) ---------- */
  .nav { position: static; background: var(--paper); border-bottom: 1px solid var(--line);
    backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-inner { padding: 0.72rem 1.15rem; align-items: center; }
  .hamburger, .mobile-menu { display: none !important; }
  .wordmark { font-size: 1rem; }
  /* side-chip removed — let the user explore freely, no side-locking */
  .side-chip { display: none !important; }
  .side-chip[hidden] { display: none; }
  .side-chip-dia { width: 7px; height: 7px; background: var(--side-accent); transform: rotate(45deg); }
  html[data-side] .side-chip { color: var(--ink); border-color: var(--side-accent); }

  /* ---------- S1 · THE COVER ---------- */
  .hero--masthead { min-height: 0 !important; overflow: visible; padding: 0 !important; }
  .hero--masthead .mh-inner { order: 0; flex: 0 0 auto;
    padding: clamp(1.5rem,7vw,2.1rem) 1.15rem 0.2rem !important; gap: 0.55rem; }
  .mh-top { flex-direction: column; gap: 0.12rem; }
  .mh-kicker { font-size: 0.62rem; letter-spacing: 0.14em; color: var(--gold-ink); }
  .mh-meta { font-size: 0.62rem; color: var(--muted); }
  .mh-h1 { font-size: clamp(1.95rem, 8.6vw, 2.25rem) !important; line-height: 1.07 !important;
    letter-spacing: -0.015em !important; text-wrap: balance; padding-left: 0 !important; }
  .mh-bottom { display: none !important; }
  /* skyline demoted to a captioned plate */
  .hero--masthead .mh-media { order: 1; flex: 0 0 auto; position: relative; height: 116px;
    min-height: 0 !important; margin: 0.85rem 1.15rem 0; border: 1px solid var(--line-2);
    border-top: 1px solid var(--line-2); overflow: hidden; }
  .mh-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    object-position: center 60%; transform: none;
    filter: grayscale(1) sepia(0.22) contrast(1.05) brightness(1.07) !important; }
  .hero--masthead .mh-media::after { content: ''; position: absolute; inset: 0; z-index: 1;
    background: var(--gold); mix-blend-mode: multiply; opacity: 0.07; pointer-events: none; }
  .mh-cap { display: block; position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--deep);
    color: var(--on-navy); font-family: var(--sans); font-size: 0.55rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.6rem; }

  /* ---------- THE FORK (the cover's CTAs) ---------- */
  .fork { border-top: 1px solid var(--line); margin-top: 1.05rem; }
  .fork-door { padding: 1.15rem 3rem 1.15rem 1.15rem; border-bottom: 1px solid var(--line);
    position: relative; display: block; text-decoration: none;
    transition: background .25s var(--ease); }
  .fork-door--occ { background: rgba(161,60,63,0.035); }
  .fork-door--own { background: rgba(164,126,51,0.05); }
  .fork-eyebrow { display: block; font-family: var(--sans); font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.4rem; }
  .fork-door--occ .fork-eyebrow { color: var(--burgundy); }
  .fork-door--own .fork-eyebrow { color: var(--gold-ink); }
  .fork-h { display: block; font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.7rem, 7.6vw, 2rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); }
  .fork-dek { display: block; font-family: var(--body); font-size: 0.9rem; line-height: 1.4;
    color: var(--ink-soft); margin-top: 0.42rem; }
  .fork-meta { display: block; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--muted); margin-top: 0.55rem; }
  .fork-stat { font-family: var(--serif); font-weight: 700; color: var(--ink); font-size: 0.9rem; letter-spacing: 0; }
  .fork-go { position: absolute; right: 1.15rem; top: 1.3rem; font-size: 1.3rem; transition: transform .25s var(--ease); }
  .fork-door--occ .fork-go { color: var(--burgundy); }
  .fork-door--own .fork-go, .fork-row--inv .fork-go { color: var(--gold-ink); }
  .fork-door:active .fork-go, .fork-row:active .fork-go { transform: translateX(4px); }
  /* investor slim row */
  .fork-row { display: flex; align-items: baseline; gap: 0.55rem; position: relative;
    padding: 0.9rem 3rem 0.9rem 1.15rem; border-bottom: 1px solid var(--line);
    text-decoration: none; background: rgba(164,126,51,0.028); }
  .fork-row-h { font-family: var(--serif); font-size: 1.12rem; color: var(--ink); }
  .fork-row-dek { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--muted); }
  .fork-row-dek strong { color: var(--gold-ink); font-family: var(--serif); }
  .fork-row .fork-go { top: 50%; transform: translateY(-50%); }

  /* ---------- FOLIO GRAMMAR — one section-head device ---------- */
  .container { padding: 0 1.15rem; }
  .section-pad { padding: 2rem 0 !important; }
  .section-head { text-align: left !important; margin-bottom: 1rem; }
  .kicker { display: flex; align-items: baseline; justify-content: space-between; width: 100%;
    margin: 0 0 0.9rem !important; padding-top: 0.85rem; border-top: 1px solid var(--line);
    font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em !important;
    text-transform: uppercase; color: var(--gold-ink); }
  .kicker::before { display: none !important; }
  .services .kicker::after { content: "Six lines of work"; font-weight: 400; letter-spacing: 0.04em; color: var(--muted); }
  .section-head h2 { text-align: left !important; }

  /* ---------- S2 · THE RECORD (stats + client marks) ---------- */
  .band { padding: 0; }
  .band-inner { grid-template-columns: repeat(2,1fr); gap: 0; padding: 0 1.15rem !important; }
  .band-item { padding: 1rem 0; border-top: 1px solid var(--line); align-items: flex-start; text-align: left; }
  .band-item:nth-child(even) { padding-left: 1.15rem; }
  .band-item strong { font-family: var(--serif); font-size: 1.85rem; color: var(--ink); }
  .band-item span { font-size: 0.66rem; }
  .clients { padding: 1.4rem 0; }
  .client-rows, .client-row { text-align: left !important; align-items: flex-start !important; }
  .client-row-label { display: block !important; text-align: left !important; align-self: flex-start;
    margin-left: 1.15rem !important; margin-right: 1.15rem !important; }

  /* ---------- S3 · THE TABLE (about) ---------- */
  .about.section-pad { padding: 2rem 0 !important; }
  .about-table, .about-dim, .plan-years, .about-block { display: none !important; }
  .about-notes p:nth-of-type(3) { display: none; }
  .about-title { font-size: clamp(1.4rem,6vw,1.7rem) !important; line-height: 1.18 !important; margin-bottom: 1rem; }
  .plan-side { justify-content: flex-start; text-align: left; }
  .about-notes p:not(.notes-h) { font-size: 0.95rem; line-height: 1.55; }

  /* ---------- S4 · THE INDEX (services as ledger rows) ---------- */
  .svc-grid { display: block; }
  .svc-card { display: grid; grid-template-columns: 1.9rem 1fr auto; align-items: center;
    gap: 0.7rem; padding: 0.95rem 0 0.95rem 0; border: none; border-top: 1px solid var(--line);
    box-shadow: none; position: relative; min-height: 0; background: none; transform: none; }
  /* one uniform ledger — no row wears special dress (kills the stray Fit-Outs underline) */
  .svc-name .fitout, .tstep-body .fitout, .j-panel h4 .fitout, .fitout {
    color: inherit !important; font-weight: inherit !important; background: none !important; }
  .fitout::after { display: none !important; }
  .notes-h { letter-spacing: 0.14em !important; }
  .svc-card::after, .svc-card::before { display: none; }
  .svc-glyph, .svc-desc, .svc-tag { display: none !important; }
  .svc-top { display: contents; }
  .svc-idx { font-family: var(--serif); font-style: italic; color: var(--gold-ink); font-size: 1rem; }
  .svc-name { font-family: var(--serif); font-weight: 400; font-size: 1.14rem; color: var(--ink); margin: 0; }
  .svc-go { position: static; opacity: 1; color: var(--muted); transform: none; font-size: 1rem; }
  /* prompt as a clean ledger row (was a dark box clipping its own text) */
  .svc-prompt { margin-top: 0.2rem; padding: 1.05rem 0; border: none; border-top: 1px solid var(--line);
    background: none !important; box-shadow: none; }
  .svc-prompt span { color: var(--ink) !important; font-size: 0.82rem; }
  .svc-prompt .svc-prompt-arrow { color: var(--gold-ink) !important; font-size: 1rem; }

  /* ---------- S5 · THE CLOSE ---------- */
  .page-teaser--alt .teaser-link { padding: 1.4rem 1.15rem; grid-template-columns: 1fr; }
  .cta { padding: 2.4rem 0; }
  .cta-inner { padding: 0 1.15rem; }
  .cta .kicker { border-top-color: var(--on-navy-line); color: var(--gold-2); }
  .cta-inner h2 { font-size: clamp(1.5rem,6.4vw,1.9rem) !important; }
  /* footer joins the one left edge (was centred — the loudest alignment break) */
  .footer { padding: 2rem 1.15rem 1.5rem; text-align: left; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.3rem; padding: 0; max-width: none; }
  .footer-brand { align-items: flex-start; text-align: left; }
  .footer-descriptor { justify-content: flex-start; }
  .footer-links { justify-content: flex-start; align-items: flex-start; gap: 0.55rem 1.4rem; }
  .footer-legal { justify-content: flex-start; text-align: left; gap: 0.3rem 1.3rem; }
  .footer-note, .footer-copy { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }

  /* ---------- THE BRASS RAIL (bottom nav) ---------- */
  .rail { display: grid; grid-template-columns: repeat(4,1fr); position: fixed; left: 0; right: 0;
    bottom: 0; z-index: 200; background: var(--deep); border-top: 1px solid var(--gold);
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .rail-tab { position: relative; display: flex; align-items: center; justify-content: center;
    padding: 0.82rem 0 0.72rem; background: none; border: none; cursor: pointer;
    font-family: var(--sans); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--on-navy-soft); text-decoration: none;
    -webkit-tap-highlight-color: transparent; }
  .rail-tab.is-active { color: var(--on-navy); }
  .rail-tab--enquire .rail-lbl { border: 1px solid var(--gold); padding: 0.26rem 0.5rem; color: var(--gold-2); }
  .rail-diamond { position: absolute; top: -5.5px; left: 0; width: 9px; height: 9px;
    background: var(--side-accent); transform: rotate(45deg);
    transition: left .28s var(--ease), background .3s; z-index: 2; }

  /* ---------- THE ENQUIRE SHEET ---------- */
  .sheet-inner { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper);
    border-top: 1px solid var(--gold); padding: 1.3rem 1.15rem calc(1.3rem + env(safe-area-inset-bottom,0px));
    transform: translateY(100%); transition: transform .32s var(--ease); }
  .sheet.rise .sheet-inner { transform: translateY(0); }
  .sheet-grip { display: block; width: 38px; height: 3px; background: var(--line-2); margin: 0 auto 1rem; }
  .sheet-head { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.5rem; }
  .sheet-row { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0;
    border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
  .sheet-row-k { font-family: var(--serif); font-size: 1.14rem; }
  .sheet-row-v { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--muted); }
  .sheet-close { display: block; width: 100%; margin-top: 0.8rem; padding: 0.7rem; background: none;
    border: none; font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
  .sheet .wa-dot { display: none; }
  .wa-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold-2); margin-left: 5px; }
}

/* Pocket Ledger — respect reduced motion: no diamond slide, no sheet rise */
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .rail-diamond, .sheet-inner, .fork-door, .fork-go { transition: none !important; }
}

/* ===== Pocket Ledger — Process page seams (Fable critique) ===== */
@media (max-width: 700px) {
  /* ONE accordion anatomy for both sides: italic Caslon numeral in a 42px gutter,
     Source Serif title 1.15rem, centred chevron, indented body. Colour (occupier
     burgundy / owner gold) is the ONLY thing that differs — that's the whole story. */
  .tstep-num, .proc-track .tstep-num {
    font-family: var(--serif) !important; font-style: italic; font-weight: 400;
    font-size: 1.1rem !important; letter-spacing: 0 !important; color: var(--burgundy) !important;
    padding-top: 0 !important; align-self: center; width: 1.6rem; flex-shrink: 0; text-align: left;
  }
  .js .tstep-trigger { align-items: center !important; gap: 1rem !important; }
  .tstep h4, .tstep-trigger h4, .js .tstep-body h4, .js .j-panel h4 {
    font-family: var(--serif) !important; font-weight: 400 !important; font-size: 1.15rem !important; line-height: 1.2 !important; }
  .js .tstep-body p { padding-left: 2.6rem; }
  .j-panel h4::before { color: var(--gold) !important; font-size: 1.1rem !important; font-style: italic; }

  /* cut the tonally-off tap instruction — the chevrons already say "expandable" */
  .proc-mobile-intro { display: none !important; }
  /* trim the dead space between the owner CTA and the footer */
  .track-foot { padding-bottom: 1.4rem !important; }

  /* draw the hinge instead of captioning it: burgundy rule → gold diamond → gold rule */
  .track-hinge { flex-direction: column; align-items: center; gap: 0 !important;
    padding: 2.3rem 0 1.9rem !important; text-align: center; }
  .track-hinge .hinge-rule { width: 1px !important; height: 26px; flex: none !important; opacity: 1; }
  .track-hinge .hinge-rule:first-child { background: linear-gradient(180deg, transparent, var(--burgundy)) !important; }
  .track-hinge .hinge-rule:last-child { background: linear-gradient(180deg, var(--gold), transparent) !important; }
  .hinge-note { position: relative; font-size: 1.02rem !important; line-height: 1.45; max-width: 28ch;
    margin: 1rem auto !important; padding-top: 1.25rem; }
  .hinge-note::before { content: ''; position: absolute; top: 0; left: 50%; width: 9px; height: 9px;
    margin-left: -4.5px; background: var(--gold-2); transform: rotate(45deg); }
  .hinge-note em { color: var(--gold-ink); }
}