/* GENERATED - do not edit. Built by _internal/build-css.js from
   tokens.css + base.css + home.css (minus sections the homepage never uses). */
/* ──────────────────────────────────────────────
   TRU Realty — Design Tokens
   Editorial Luxury × Cinematic Storytelling
   ────────────────────────────────────────────── */

/* JetBrains Mono, self-hosted. It is SIL OFL licensed, so serving it ourselves
   is permitted and it drops two third-party origins (fonts.googleapis.com and
   fonts.gstatic.com) off the critical path. One variable file covers both
   weights we use; latin subset only, since the site is English. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ─── Color ─── */
  --paper:      #FAFAF9;   /* page background */
  --paper-2:    #F2EFEA;   /* warm off-white sections */
  --ink:        #0C0A09;   /* primary text on light */
  --ink-2:      #1C1917;   /* deep surface, hero scrim */
  --ink-3:      #292524;   /* secondary deep */
  --bone:       #E8E2D6;   /* warm divider, soft border */
  --mute:       #57534E;   /* secondary text */
  --mute-2:     #78716C;   /* tertiary text */
  --gold:       #18769B;   /* CTA, accent (teal) */
  --gold-2:     #1E96C2;   /* hover */
  --gold-soft:  #7FC0D8;   /* on dark headlines accent */
  --botanical:  #0F2E1F;   /* deep green for tags / dividers */
  --line:       rgba(12, 10, 9, 0.12);
  --line-light: rgba(250, 250, 249, 0.18);

  /* ─── Typography ─── */
  --font-display: "bressay-display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "nunito-sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (clamped for fluid responsive) */
  --fs-eyebrow: 0.72rem;            /* 11.5px mono uppercase */
  --fs-body:    1rem;               /* 16px */
  --fs-lede:    clamp(1.075rem, 0.95rem + 0.55vw, 1.35rem);
  --fs-h2:      clamp(2rem,    1.4rem  + 2.4vw, 3.4rem);
  --fs-h3:      clamp(1.625rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 6.25rem);
  --fs-display-md: clamp(2.4rem, 1.6rem + 3.2vw, 4.6rem);

  /* Line-heights */
  --lh-tight:  1.0;
  --lh-snug:   1.15;
  --lh-base:   1.55;
  --lh-prose:  1.7;

  /* Tracking */
  --tr-mono:   0.16em;
  --tr-tight: -0.01em;
  --tr-display: -0.015em;

  /* ─── Spacing scale (4pt) ─── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;
  --s-12: 200px;

  /* ─── Layout ─── */
  --container:    1320px;
  --container-sm: 880px;
  /* Min raised 20px → 24px: at 375px the page was running very close to the
     edge, which read as dense rather than composed. */
  --gutter:       clamp(24px, 4vw, 48px);

  /* ─── Motion ─── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph:   cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast:   180ms;
  --d-base:   320ms;
  --d-slow:   600ms;
  --d-cinema: 900ms;

  /* ─── Elevation ─── */
  --shadow-1: 0 1px 2px rgba(12, 10, 9, 0.06), 0 1px 1px rgba(12, 10, 9, 0.04);
  --shadow-2: 0 8px 24px rgba(12, 10, 9, 0.08), 0 2px 6px rgba(12, 10, 9, 0.05);
  --shadow-3: 0 24px 60px rgba(12, 10, 9, 0.18), 0 6px 18px rgba(12, 10, 9, 0.08);

  /* ─── Z-index scale ─── */
  --z-base:   1;
  --z-sticky: 50;
  --z-header: 100;
  --z-fab:    200;
  --z-modal:  500;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast:   0ms;
    --d-base:   0ms;
    --d-slow:   0ms;
    --d-cinema: 0ms;
  }
}

/* ──────────────────────────────────────────────
   TRU Realty — Base
   Reset, typography primitives, header, footer, buttons
   ────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: 400;
  overflow-x: clip;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out);
}
a:hover { color: var(--gold); }

button { font: inherit; cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

p { margin: 0; }

::selection { background: var(--gold); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── Layout primitives ─── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--sm { max-width: var(--container-sm); }

/* ─── Typography primitives ─── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  margin: 0;
}
.eyebrow--light { color: rgba(250, 250, 249, 0.72); }

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 0.96;
  letter-spacing: var(--tr-display);
  margin: 0;
  color: var(--paper);
}
.display--md {
  font-size: var(--fs-display-md);
  line-height: 1.0;
}
.display__italic {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-soft);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-5);
  max-width: 24ch;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}

/* ─── Buttons ─── */
.btn {
  --pad-y: 14px;
  --pad-x: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              transform var(--d-base) var(--ease-out);
  white-space: nowrap;
}

.btn--gold {
  background: var(--gold);
  color: var(--paper);
}
.btn--gold:hover {
  background: var(--gold-2);
  color: var(--paper);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn--ghost-light {
  background: transparent;
  color: var(--paper);
  border-color: rgba(250, 250, 249, 0.4);
}
.btn--ghost-light:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.btn--link {
  padding: 8px 0;
  background: transparent;
  color: var(--ink);
  border: none;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  position: relative;
}
.btn--link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform var(--d-base) var(--ease-out);
}
.btn--link:hover::after { transform-origin: left; transform: scaleX(0); animation: btn-link-redraw var(--d-base) var(--ease-out) forwards 0.05s; }
@keyframes btn-link-redraw { from { transform-origin: left; transform: scaleX(0); } to { transform-origin: left; transform: scaleX(1); } }

/* ─── Header ─── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  padding: 18px var(--gutter);
  background: transparent;
  transition: background var(--d-base) var(--ease-out),
              backdrop-filter var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header[data-scrolled="true"] {
  background: rgba(250, 250, 249, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.site-header__brand img {
  height: 32px;
  width: auto;
  filter: invert(1) brightness(2);
  transition: filter var(--d-base) var(--ease-out);
}
.site-header[data-scrolled="true"] .site-header__brand img { filter: none; }

.site-header__nav {
  display: flex;
  gap: clamp(20px, 2.4vw, 40px);
}
/* Seven top-level items once Resources landed. The row is nowrap, so without
   this the failure mode is a label breaking mid-word rather than clean
   overflow. */
.site-header__nav > a,
.nav-group__label { white-space: nowrap; }
.site-header__nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(250, 250, 249, 0.78);
  letter-spacing: 0.01em;
  position: relative;
  padding: 6px 0;
}
.site-header__nav a:hover { color: var(--paper); }
.site-header__nav a.is-active { color: var(--paper); }
.site-header__nav a.is-active::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  width: 4px; height: 4px;
  background: var(--gold-soft);
  border-radius: 50%;
  transform: translateX(-50%);
}
/* Direct children only. The dropdown panel keeps its own dark background at
   every scroll position, so its links must not be flipped to ink with the
   rest of the bar — that left them near-black on near-black. */
.site-header[data-scrolled="true"] .site-header__nav > a {
  color: var(--ink-3);
}
.site-header[data-scrolled="true"] .site-header__nav > a.is-active { color: var(--ink); }
.site-header[data-scrolled="true"] .site-header__nav > a.is-active::before { background: var(--gold); }

.site-header[data-scrolled="false"] .site-header__cta {
  color: var(--paper);
  border-color: rgba(250, 250, 249, 0.4);
}
.site-header[data-scrolled="false"] .site-header__cta:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ─── Touch target sizing ───
   WCAG 2.2 AA (2.5.8) asks for at least 24x24px; primary controls are taken
   to 44px. Applied only on touch-ish widths so desktop density is unchanged. */
@media (max-width: 820px) {
  .site-header__brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .btn--link { padding: 12px 0; }
  .proj-hero__crumbs a,
  .disclosure__items a,
  .proj-cta__sub a,
  .press-contact__kit a {
    display: inline-block;
    padding: 5px 0;
  }
}

/* ─── Projects dropdown ───
   There is no standalone projects page, so "Projects" is a disclosure button
   rather than a link: it opens the four project pages directly. */
.nav-group { position: relative; }
.nav-group__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(250, 250, 249, 0.78);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease-out);
}
.nav-group__label:hover { color: var(--paper); }
.site-header[data-scrolled="true"] .nav-group__label { color: var(--ink-3); }
.nav-group__chev { transition: transform var(--d-base) var(--ease-out); }
.nav-group[data-open="true"] .nav-group__chev { transform: rotate(180deg); }

.nav-sub {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 210px;
  padding: 10px;
  background: var(--ink);
  border: 1px solid rgba(250, 250, 249, 0.12);
  border-radius: 6px;
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              visibility var(--d-base) var(--ease-out);
}
/* Keeps the pointer path from the button to the panel hoverable */
.nav-sub::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}
.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub,
.nav-group[data-open="true"] .nav-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Scoped to .site-header__nav so a future bare `.site-header__nav a` colour
   rule can't outrank the panel's own light-on-dark palette again. */
.site-header__nav .nav-sub a {
  display: block;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  color: rgba(250, 250, 249, 0.88);
  white-space: nowrap;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.site-header__nav .nav-sub a:hover,
.site-header__nav .nav-sub a:focus-visible { background: rgba(250, 250, 249, 0.10); color: var(--paper); }
.site-header__nav .nav-sub a.is-active { color: var(--gold-soft); }

/* ─── Mobile nav ───
   Below 820px the primary nav used to be display:none with no replacement,
   which left phone and tablet visitors no way to navigate except the footer.
   It now becomes a drawer opened by the toggle below. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--paper);
}
.site-header[data-scrolled="true"] .nav-toggle { color: var(--ink); }
[data-nav-open="true"] .nav-toggle { color: var(--paper); }

.nav-toggle__box {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
}
.nav-toggle__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--d-base) var(--ease-out),
              opacity var(--d-fast) var(--ease-out);
}
.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { top: 6px; }
.nav-toggle__box span:nth-child(3) { top: 12px; }

/* Burger morphs into a close cross while the drawer is open */
[data-nav-open="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[data-nav-open="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
[data-nav-open="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 1);
  background: rgba(12, 10, 9, 0.55);
  opacity: 0;
  visibility: hidden;
  /* Belt and braces: visibility is transitioned, so it lingers for the length
     of the fade. pointer-events makes sure a closing scrim can never swallow
     a tap in the meantime. */
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out),
              visibility var(--d-base) var(--ease-out);
}
[data-nav-open="true"] .nav-scrim { pointer-events: auto; }

@media (max-width: 820px) {
  /* Without JS the toggle cannot work, so keep the old behaviour and let the
     footer carry navigation rather than showing a dead button. */
  html:not(.js) .site-header__nav { display: none; }

  .js .nav-toggle { display: inline-flex; }

  .js .site-header__nav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(82vw, 330px);
    flex-direction: column;
    /* `safe` matters now that the drawer holds seven rows plus two accordions:
       a plain centred flex column puts its overflow at the start edge, where
       scrolling cannot reach it. `safe` falls back to flex-start instead. */
    justify-content: safe center;
    gap: 0;
    padding: var(--s-9) var(--s-7) var(--s-8);
    background: var(--ink);
    box-shadow: -24px 0 60px rgba(12, 10, 9, 0.4);
    z-index: calc(var(--z-header) + 2);
    transform: translateX(101%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform var(--d-base) var(--ease-emph),
                visibility var(--d-base) var(--ease-emph);
  }
  .js [data-nav-open="true"] .site-header__nav,
  .js[data-nav-open="true"] .site-header__nav {
    transform: none;
    visibility: visible;
  }
  [data-nav-open="true"] .nav-scrim { opacity: 1; visibility: visible; }

  /* The header must outrank the drawer, otherwise the drawer covers the very
     button needed to close it. Force its dark-background treatment too, since
     while the drawer is open the header sits on the dark panel regardless of
     how far the page happens to be scrolled. */
  [data-nav-open="true"] .site-header {
    z-index: calc(var(--z-header) + 3);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
  [data-nav-open="true"] .site-header[data-scrolled="true"] .site-header__brand img {
    filter: invert(1) brightness(2);
  }
  [data-nav-open="true"] .site-header__cta {
    color: var(--paper);
    border-color: rgba(250, 250, 249, 0.4);
  }
  /* The drawer is a sibling of the toggle and CTA inside the header's own
     stacking context, so raising the header alone is not enough — these two
     must also outrank the panel or the drawer paints over the close button. */
  .js .nav-toggle,
  [data-nav-open="true"] .site-header__cta,
  [data-nav-open="true"] .site-header__brand {
    position: relative;
    z-index: calc(var(--z-header) + 4);
  }

  /* Comfortable 48px tap rows rather than 18px text links */
  .js .site-header__nav a {
    display: block;
    padding: 14px 0;
    font-size: 1.35rem;
    font-family: var(--font-display);
    font-weight: 500;
    color: rgba(250, 250, 249, 0.82);
    border-bottom: 1px solid rgba(250, 250, 249, 0.10);
  }
  .js .site-header__nav a:last-child { border-bottom: 0; }

  /* Projects becomes an inline accordion inside the drawer rather than a
     floating panel, which has nowhere to float to on a phone. */
  .js .nav-group { position: static; width: 100%; }
  .js .nav-group__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    color: rgba(250, 250, 249, 0.82);
    border-bottom: 1px solid rgba(250, 250, 249, 0.10);
  }
  /* max-height rather than the 0fr→1fr grid trick: that only animates the
     first child, and this list has four, so the rest landed in unanimated
     implicit rows and escaped the panel. */
  .js .nav-sub {
    position: static;
    transform: none;
    display: block;
    min-width: 0;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--d-base) var(--ease-emph);
  }
  .js .nav-sub::before { content: none; }
  /* Hover must not open the accordion on touch; only the explicit toggle.
     These also have to re-clear the transform: the desktop open/hover rules
     re-apply translateX(-50%) at a higher specificity than `.js .nav-sub`,
     which shunted the whole list out of the drawer. */
  .js .nav-group:hover .nav-sub,
  .js .nav-group:focus-within .nav-sub {
    max-height: 0;
    transform: none;
  }
  .js .nav-group[data-open="true"] .nav-sub,
  .js .nav-group:focus-within[data-open="true"] .nav-sub {
    max-height: 320px;
    transform: none;
  }

  .js .nav-sub a {
    padding: 12px 0 12px var(--s-4);
    font-family: var(--font-body);
    font-size: 1rem;
    border-bottom: 1px solid rgba(250, 250, 249, 0.06);
  }
  .js .nav-sub li:last-child a { border-bottom: 1px solid rgba(250, 250, 249, 0.10); }
  /* The drawer sits on dark regardless of the header's scrolled state */
  .js .site-header[data-scrolled="true"] .site-header__nav a { color: rgba(250, 250, 249, 0.82); }
  .js .site-header__nav a.is-active,
  .js .site-header[data-scrolled="true"] .site-header__nav a.is-active { color: var(--paper); }
  .js .site-header__nav a.is-active::before {
    left: auto;
    right: 0;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gold-soft);
  }
}

/* ─── Footer ─── */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--ink-2);
  color: rgba(250, 250, 249, 0.72);
  padding: var(--s-10) 0 var(--s-6);
}
.site-footer .eyebrow {
  color: rgba(250, 250, 249, 0.5);
  margin-bottom: var(--s-4);
}
.site-footer__inner {
  display: grid;
  /* 1fr rather than 1.3fr: the link block went from three columns to four
     when Resources landed, and needed the width more than the address does. */
  grid-template-columns: 1fr 2.6fr;
  gap: var(--s-9);
  padding-bottom: var(--s-9);
  border-bottom: 1px solid var(--line-light);
}
.site-footer__brand img {
  height: 42px;
  width: auto;
  filter: invert(1) brightness(2);
  margin-bottom: var(--s-6);
}
.site-footer__address,
.site-footer__contact {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--s-5);
  color: rgba(250, 250, 249, 0.72);
}
.site-footer__contact a:hover { color: var(--gold-soft); }

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-7);
}
.site-footer__nav ul li { margin-bottom: var(--s-3); }
.site-footer__nav a {
  font-size: 0.95rem;
  color: rgba(250, 250, 249, 0.72);
}
.site-footer__nav a:hover { color: var(--paper); }

.site-footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.42);
}

@media (max-width: 820px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .site-footer__nav { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-5); }
  .site-footer__base { flex-direction: column; gap: var(--s-3); text-align: center; }

  /* Footer links were 18px tall — well under a comfortable touch target.
     Padding brings each row to ~44px without changing the type size. */
  .site-footer__nav ul li { margin-bottom: 0; }
  .site-footer__nav a,
  .site-footer__contact a {
    display: inline-block;
    padding: 12px 0;
    line-height: 1.25;
  }
}

/* ─── Floating Enquire CTA ─── */
.enquire-fab {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(20px, 3vw, 32px);
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
.enquire-fab[data-visible="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.enquire-fab:hover {
  background: var(--gold);
  color: var(--paper);
  transform: translateY(-2px) scale(1.02);
}
.enquire-fab__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 0 0 var(--gold-soft);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 178, 90, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(214, 178, 90, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .enquire-fab__dot { animation: none; }
}

/* ─────────────────  ENQUIRY MODAL  ─────────────────
   Markup is injected by js/enquire.js so the component lives in one place
   rather than being duplicated across seven pages. */
.enquire-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.enquire-modal[hidden] { display: none; }

.enquire-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 9, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-out);
}
[data-enquire-open="true"] .enquire-modal__backdrop { opacity: 1; }

/* Sized to fit without scrolling: three short fields and nothing else. The
   overflow rule below is a fallback for very short viewports (landscape
   phones) only — data-lenis-prevent on the panel is what lets a wheel or
   touch actually scroll it, since Lenis swallows wheel events while stopped
   and the scrollbar thumb was the only thing that worked before. */
.enquire-modal__panel {
  position: relative;
  width: min(100%, 460px);
  max-height: min(92dvh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  box-shadow: var(--shadow-3);
  padding: clamp(26px, 4vw, 40px);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity var(--d-base) var(--ease-emph),
              transform var(--d-base) var(--ease-emph);
}
[data-enquire-open="true"] .enquire-modal__panel {
  opacity: 1;
  transform: none;
}

.enquire-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--mute);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.enquire-modal__close:hover { background: rgba(12, 10, 9, 0.06); color: var(--ink); }

.enquire-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: var(--s-2) 0 var(--s-3);
}
.enquire-modal__intro {
  color: var(--mute);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 var(--s-6);
  max-width: 40ch;
}

.enquire-form { display: flex; flex-direction: column; gap: var(--s-4); }
/* display:flex above outranks the UA [hidden] rule, so the form kept its
   height after a successful submit and pushed the thank-you into a scroll. */
.enquire-form[hidden] { display: none; }
.enquire-field { display: flex; flex-direction: column; gap: 6px; }

/* Label and error share one row, so validation never changes the panel's height. */
.enquire-field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 1em;
}
.enquire-field label,
.enquire-field__error {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.enquire-field__error {
  color: #B4442E;
  letter-spacing: 0.08em;
  text-align: right;
  white-space: nowrap;
}

.enquire-field input {
  width: 100%;
  /* 16px minimum stops iOS Safari zooming the page on focus */
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  transition: border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.enquire-field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(24, 118, 155, 0.16);
}
.enquire-field input[aria-invalid="true"] { border-color: #B4442E; }

/* Honeypot. Moved off-screen rather than display:none or visibility:hidden,
   because a filler that reads computed styles skips anything hidden that way
   and the trap never springs. Nothing here is focusable or announced: the
   inputs carry tabindex="-1" and the wrapper is aria-hidden. */
.enquire-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form-level failure (network, or a rejected submission). Sits above the
   button so it is between the visitor and the thing they are about to press
   again, and reserves no height until it has something to say. */
.enquire-form__alert {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(180, 68, 46, 0.35);
  border-left-width: 3px;
  border-radius: 4px;
  background: rgba(180, 68, 46, 0.06);
  color: #8F3524;
  font-size: 0.85rem;
  line-height: 1.6;
}
.enquire-form__alert[hidden] { display: none; }

.enquire-form__submit { width: 100%; justify-content: center; margin-top: var(--s-2); }
.enquire-form__submit:disabled { opacity: 0.6; cursor: default; }
.enquire-form__note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--mute-2);
  text-align: center;
}

/* The reCAPTCHA v3 badge is fixed bottom-right, landing on top of
   .enquire-fab. Google allows hiding it provided the disclosure below is shown
   in the form, so the badge goes and .enquire-form__legal carries the notice.
   Removing one without the other breaks Google's terms, so they stay together. */
.grecaptcha-badge { visibility: hidden; }

.enquire-form__legal {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--mute-2);
  text-align: center;
  opacity: 0.75;
}
.enquire-form__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.enquire-form__legal a:hover { color: var(--ink); }

.enquire-modal__panel[data-state="done"] > .eyebrow,
.enquire-modal__panel[data-state="done"] > .enquire-modal__title,
.enquire-modal__panel[data-state="done"] > .enquire-modal__intro { display: none; }

.enquire-modal__done { text-align: center; padding: var(--s-5) 0 var(--s-2); }
.enquire-modal__done h3 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 500;
  margin: 0 0 var(--s-3);
}
.enquire-modal__done p { color: var(--mute); line-height: 1.7; margin: 0 0 var(--s-6); }

@media (prefers-reduced-motion: reduce) {
  .enquire-modal__backdrop,
  .enquire-modal__panel { transition: none; }
}

/* ──────────────────────────────────────────────
   TRU Realty — Home Page Styles
   ────────────────────────────────────────────── */

/* ────────────────────  LOADER HERO (video reel)  ──────────────────── */
.loader-hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
  color: var(--paper);
  isolation: isolate;
  z-index: 0;
}
.loader-hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Sits under the reel and carries the first paint. The clips stack above it as
   later siblings, so each one covers it as it fades in. */
.loader-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.loader-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease-emph);
  will-change: opacity, transform;
}
.loader-hero__video.is-active {
  opacity: 1;
}
.loader-hero__sepia {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #704214;
  opacity: 0.30;
  mix-blend-mode: multiply;
}
.loader-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.65) 100%);
}
.loader-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
}
.loader-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}
.loader-hero__line { display: block; }
.loader-hero__line--em {
  font-style: italic;
  color: var(--gold-soft);
  font-weight: 400;
}
.loader-hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--s-6);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.loader-hero__cue-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, var(--paper));
  opacity: 0.6;
  animation: cue 2.4s var(--ease-in-out) infinite;
  transform-origin: top;
}
.loader-hero__cue-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .loader-hero__video { transition: none; }
  .loader-hero__cue-line { animation: none; }
}

/* ─────────────────  POSITIONING  ───────────────── */
.positioning {
  position: relative;
  z-index: 1;
  padding: var(--s-8) 0 var(--s-7);
  background: var(--paper);
}
.positioning .h2 {
  max-width: 22ch;
  margin-block: var(--s-3) var(--s-6);
}
.positioning__lede {
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mute);
  font-weight: 400;
  margin-bottom: var(--s-4);
  text-align: left;
}
.positioning__lede:last-of-type { margin-bottom: var(--s-9); }
.positioning__lede em { font-family: var(--font-display); font-style: italic; color: var(--ink); font-weight: 500; }

/* ─── Half-and-half split (text left, image right, stamp emblem) ─── */
.positioning__split {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.25fr;
  gap: var(--s-8);
  align-items: center;
  margin-bottom: var(--s-10);
}
.positioning__text {
  max-width: 56ch;
  text-align: left;
}
.positioning__text .eyebrow,
.positioning__text .h2,
.positioning__text .positioning__lede {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.positioning__text .h2 {
  max-width: 22ch;
  margin-block: var(--s-3) var(--s-6);
  text-align: left;
}
.positioning__media {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
}
.positioning__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.positioning__emblem {
  position: absolute;
  bottom: -6%;
  left: 45%;
  width: clamp(128px, 14.4vw, 208px);
  height: auto;
  transform: translateX(-50%) rotate(-6deg);
  z-index: 5;
  pointer-events: none;
  filter:
    drop-shadow(0 18px 24px rgba(12, 10, 9, 0.35))
    drop-shadow(0 6px 10px rgba(12, 10, 9, 0.25))
    drop-shadow(0 1px 2px rgba(12, 10, 9, 0.4));
  transition: transform var(--d-slow) var(--ease-emph);
}
.positioning__split:hover .positioning__emblem {
  transform: translateX(-50%) rotate(-3deg) scale(1.04);
}

@media (max-width: 900px) {
  .positioning__split {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .positioning__media { aspect-ratio: 4 / 3; }
  .positioning__emblem {
    bottom: -10%;
    left: auto;
    right: 6%;
    width: 112px;
    transform: rotate(-6deg);
  }
  .positioning__split:hover .positioning__emblem {
    transform: rotate(-3deg) scale(1.04);
  }
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  border-top: 1px solid var(--line);
  padding-top: var(--s-7);
}
.stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.stats__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.7rem + 3vw, 4.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stats__sym {
  color: var(--gold);
  font-weight: 400;
  margin-left: 0.05em;
}
.stats__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
@media (max-width: 820px) {
  .stats { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-4); }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
}

/* ─────────────────  RECOGNITION STRIP (awards + media)  ───────────────── */
.trust-strip {
  background: var(--paper);
  padding: var(--s-7) 0 var(--s-8);
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.trust-strip__eyebrow {
  text-align: center;
  color: var(--mute-2);
  margin-bottom: var(--s-6);
}
.trust-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s-5), 3.5vw, var(--s-8));
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-strip__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 2px;
}
.trust-strip__item img {
  max-height: var(--logo-h, 22px);
  max-width: var(--logo-w, 160px);
  width: auto;
  height: auto;
  filter: brightness(0);
  opacity: 0.42;
  transition: opacity var(--d-base) var(--ease-out),
              filter var(--d-base) var(--ease-out);
}
.trust-strip__item a:hover img,
.trust-strip__item a:focus-visible img {
  filter: none;
  opacity: 1;
}
@media (max-width: 680px) {
  .trust-strip { padding: var(--s-6) 0 var(--s-7); }
  .trust-strip__eyebrow { margin-bottom: var(--s-5); }
  .trust-strip__row { gap: var(--s-5) var(--s-6); }
  .trust-strip__item img { max-height: calc(var(--logo-h, 22px) * 0.84); }
}

/* ─────────────────  ACCREDITATION BAND (Forbes DGEMS + GPTW)  ─────────────────
   B3 + D2. The Forbes emblem used to float over the positioning image; both
   badges now sit here, at a readable size, with what they are spelled out. */
.accred {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: var(--s-8) 0;
  position: relative;
  z-index: 1;
}
.accred__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-8);
  align-items: center;
}
.accred__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-4);
  max-width: 20ch;
}
.accred__title em { font-style: italic; color: var(--gold); }
.accred__lede {
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.1rem);
  line-height: 1.65;
  color: var(--mute);
  font-weight: 300;
  max-width: 44ch;
  margin: 0;
}
.accred__badges {
  display: flex;
  align-items: flex-start;
  gap: clamp(var(--s-5), 3vw, var(--s-7));
  margin: 0;
  padding: 0;
  list-style: none;
}
.accred__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
  max-width: 168px;
}
.accred__badge > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-decoration: none;
  border-radius: 4px;
  transition: transform var(--d-base) var(--ease-out);
}
.accred__badge > a:hover,
.accred__badge > a:focus-visible { transform: translateY(-3px); }
/* Both badges are different aspect ratios; normalise on height, not width. */
.accred__badge img {
  height: clamp(96px, 9vw, 132px);
  width: auto;
  display: block;
}
.accred__badge-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--mute-2);
}

@media (max-width: 900px) {
  .accred__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .accred__badges { justify-content: flex-start; }
  .accred__title { max-width: none; }
}
@media (max-width: 480px) {
  .accred { padding: var(--s-7) 0; }
  .accred__badges { gap: var(--s-5); }
  .accred__badge img { height: 88px; }
}

/* ─── Sticky accreditation badges (float in once .accred scrolls past) ─── */
.accred-float {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(20px, 3vw, 32px);
  z-index: var(--z-fab);
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  opacity: 0;
  transform: translateY(16px) scale(0.94);
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.accred-float[data-visible="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.accred-float__badge {
  height: 52px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
}
@media (max-width: 480px) {
  .accred-float { right: 12px; bottom: 16px; gap: var(--s-3); }
  .accred-float__badge { height: 40px; }
}

/* ─────────────────  PRESS FEATURE (D5 — editorial cards on the homepage)  ───────────────── */
.press-feature {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: var(--s-8) 0;
  position: relative;
  z-index: 1;
}
.press-feature__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: var(--s-3) 0 0;
}
.press-feature__head { margin-bottom: var(--s-7); }
.press-feature__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.press-feature__card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper);
  transition: border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.press-feature__card a:hover,
.press-feature__card a:focus-visible {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.press-feature__media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--line);
}
.press-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Some press creatives carry burnt-in headline text; --img-pos anchors the crop
     so that text survives the 16/10 window. */
  object-position: var(--img-pos, 50% 50%);
  display: block;
  transition: transform var(--d-slow) var(--ease-out);
}
.press-feature__card a:hover .press-feature__media img { transform: scale(1.04); }
.press-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  flex: 1;
}
/* Masthead logos vary wildly in aspect; pin height and let width follow. */
.press-feature__logo {
  height: var(--logo-h, 16px);
  width: auto;
  max-width: 60%;
  filter: brightness(0);
  opacity: 0.55;
}
.press-feature__headline {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.24rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.press-feature__more {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.press-feature__all { margin: var(--s-7) 0 0; }

@media (max-width: 900px) {
  .press-feature__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .press-feature { padding: var(--s-7) 0; }
  .press-feature__grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ─────────────────  STAT BANNER (accent strip after positioning)  ───────────────── */
.stat-banner {
  background: var(--gold);
  color: var(--paper);
  padding: var(--s-6) 0;
  position: relative;
  z-index: 1;
}
.stat-banner__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6) var(--s-5);
  align-items: start;
}
.stat-banner__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border-left: 1px solid rgba(250, 250, 249, 0.28);
  padding-left: var(--s-5);
}
.stat-banner__item:first-child {
  border-left: none;
  padding-left: 0;
}
.stat-banner__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin: 0;
}
.stat-banner__sym {
  font-weight: 400;
  opacity: 0.85;
}
.stat-banner__unit {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.6em;
  font-weight: 400;
  opacity: 0.9;
  margin-left: 0.1em;
  letter-spacing: 0;
}
.stat-banner__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.78);
  margin: 0;
}

/* "By the numbers" variant — four metrics with a heading above them.
   Only the homepage uses this; project pages keep the plain 3-up strip. */
.stat-banner__head {
  margin-bottom: var(--s-6);
  max-width: 46ch;
}
.stat-banner__eyebrow { color: rgba(250, 250, 249, 0.72); }
.stat-banner__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin: var(--s-3) 0 0;
}
.stat-banner__title em { font-style: italic; opacity: 0.82; }
.stat-banner__grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Four across still wants a touch less display size than the 3-up strip. */
.stat-banner__grid--4 .stat-banner__num { font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.6rem); }
.stat-banner__grid--4 .stat-banner__label { font-size: 0.7rem; letter-spacing: 0.11em; }

@media (max-width: 1080px) {
  /* 2 x 2 rather than 3 + 1, which left an obvious hole on the second row. */
  .stat-banner__grid--4 { grid-template-columns: 1fr 1fr; }
  .stat-banner__grid--4 .stat-banner__item:nth-child(odd) { border-left: none; padding-left: 0; }
}
@media (max-width: 820px) {
  .stat-banner__grid { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-4); }
  .stat-banner__item:nth-child(odd) { border-left: none; padding-left: 0; }
  .stat-banner__grid--4 { gap: var(--s-7) var(--s-4); }
}
@media (max-width: 480px) {
  .stat-banner__grid,
  .stat-banner__grid--4 { grid-template-columns: 1fr; }
  .stat-banner__item {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(250, 250, 249, 0.28);
    padding-top: var(--s-5);
  }
  .stat-banner__item:first-child { border-top: none; padding-top: 0; }
}

/* ─────────────────  HERO GALLERY → QUOTE  ───────────────── */
.hero-gallery {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  isolation: isolate;
  z-index: 2;
}
.hero-gallery__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
  z-index: 1;
  will-change: transform;
}
.hero-gallery__cell {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #0c0a09;
  will-change: transform, opacity;
}
.hero-gallery__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.05);
}
.hero-gallery__cell--mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1c1917 0%, #0c0a09 100%);
  color: var(--gold-soft);
}
.hero-gallery__cell--mark span {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4rem);
  letter-spacing: 0.08em;
  font-weight: 500;
}
.hero-gallery__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(60% 70% at 50% 50%, rgba(12,10,9,0.55) 0%, rgba(12,10,9,0.95) 100%);
  opacity: 0;
  will-change: opacity;
}
.hero-gallery__quote {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  opacity: 0;
  transform: scale(0.92);
  will-change: opacity, transform;
  pointer-events: none;
}
.hero-gallery__quote .eyebrow {
  margin-bottom: var(--s-6);
}
.hero-gallery__quote-body {
  margin: 0;
  padding: 0;
  max-width: none;
}
.hero-gallery__quote-body p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.68rem, 1.08rem + 1.8vw, 2.88rem);
  line-height: 1.4;
  color: var(--paper);
  letter-spacing: -0.005em;
  white-space: normal;
}
.hero-gallery__quote-body em {
  font-style: italic;
  color: var(--gold-soft);
}
.hero-gallery__attr {
  margin-top: var(--s-6);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.6);
}

@media (max-width: 820px) {
  .hero-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 4px;
    padding: 4px;
  }
  /* Hide the 12th wordmark tile on 3-col layouts so 11 images fit cleanly */
  .hero-gallery__cell--mark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-gallery__scrim { opacity: 0.85; }
  .hero-gallery__quote { opacity: 1; transform: none; }
}

/* ─────────────────  FOUNDER NOTE (D4 + E3)  ───────────────── */
.founder-note {
  position: relative;
  z-index: 1;
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-10) 0 var(--s-9);
}
.founder-note__split {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: center;
}
.founder-note__media {
  margin: 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--line);
  box-shadow: var(--shadow-2);
}
.founder-note__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.founder-note__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-6);
}
.founder-note__quote {
  margin: 0;
  padding-left: var(--s-5);
  border-left: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.founder-note__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.founder-note__quote em { font-style: italic; color: var(--gold); }
.founder-note__attrib {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--s-6) 0 0;
}
.founder-note__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
}
.founder-note__role {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-2);
}
.founder-note__more { margin: var(--s-6) 0 0; }

@media (max-width: 860px) {
  .founder-note__split { grid-template-columns: 1fr; gap: var(--s-7); }
  /* Portrait would dominate the fold at full width, so cap it. */
  .founder-note__media { max-width: 300px; }
}

/* ─────────────────  IN THEIR WORDS (D3)  ───────────────── */
.voice {
  position: relative;
  z-index: 1;
  background: var(--paper-2, #f5f5f4);
  color: var(--ink);
  padding: var(--s-10) 0 var(--s-9);
}
.voice__head { max-width: 60ch; margin-bottom: var(--s-7); }
.voice__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-4);
}
.voice__lede {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.12rem);
  line-height: 1.65;
  font-weight: 300;
  color: var(--mute);
  margin: 0;
  max-width: 50ch;
}
.voice__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  align-items: start;
}
.voice__card { margin: 0; }
.voice__player {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
  transition: border-color var(--d-base) var(--ease-out);
}
.voice__player:hover,
.voice__player:focus-visible { border-color: var(--gold); }
.voice__player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--d-slow) var(--ease-out),
              filter var(--d-base) var(--ease-out);
  filter: saturate(0.94);
}
.voice__player:hover img { transform: scale(1.02); filter: none; }
.voice__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(12, 10, 9, 0.62);
  color: var(--paper);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(250, 250, 249, 0.5);
  transition: transform var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out);
}
.voice__player:hover .voice__play,
.voice__player:focus-visible .voice__play {
  transform: scale(1.08);
  background: var(--gold);
}
/* Once the iframe is in, the button is inert scaffolding — drop its chrome. */
.voice__player.is-playing { cursor: default; border-color: var(--line); }
.voice__frame { width: 100%; height: 100%; border: 0; display: block; }
.voice__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
}
.voice__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.voice__where {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin: 0;
}
.voice__aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-left: var(--s-5);
  border-left: 1px solid var(--line);
}
.voice__aside-body {
  font-size: 0.98rem;
  line-height: 1.68;
  font-weight: 300;
  color: var(--mute);
  margin: 0;
}
.voice__aside-cta { margin: var(--s-2) 0 0; }
/* Sits under the whole grid, not inside the aside: the aside already ends
   in a .btn--link, and two stacked in a narrow column reads as clutter. */
.voice__all { margin: var(--s-7) 0 0; }

@media (max-width: 860px) {
  .voice__grid { grid-template-columns: 1fr; }
  .voice__aside {
    padding-left: 0;
    border-left: none;
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
  }
}

/* ─────────────────  PROJECTS SHOWCASE (horizontal banners)  ───────────────── */
.projects {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}

.banners {
  position: relative;
  display: flex;
  flex-direction: column;
}

.banner {
  position: relative;
  display: block;
  width: 100%;
  height: 32vh;
  min-height: 280px;
  overflow: hidden;
  color: var(--paper);
  text-decoration: none;
  isolation: isolate;
  border-top: 1px solid rgba(250, 250, 249, 0.08);
  background: var(--ink-2);
}
.banner:last-child { border-bottom: 1px solid rgba(250, 250, 249, 0.08); }

/* Full-bleed project image as the banner background (image URL set inline per banner) */
.banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.04);
  transition: transform var(--d-slow) var(--ease-out);
  will-change: transform;
}
/* Scroll-revealed, not hover-revealed.
   This used to sit opaque at rest and lift only on :hover, so the reveal
   existed for mouse users only; touch devices got a flat static overlay
   and never saw the moment. The image reveal is now driven by scroll, so
   every device gets the same one. Base value below is the no-JS fallback
   (image visible); .js starts it opaque and .is-in performs the reveal. */
.banner__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(12, 10, 9, 0.55);
  transition: background-color var(--d-slow) var(--ease-out);
}
.js .banner__scrim { background: rgba(12, 10, 9, 1); }
.js .banner.is-in .banner__scrim { background: rgba(12, 10, 9, 0.45); }
.js .banner.is-in .banner__bg { transform: scale(1); }

.banner__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-7);
}

.banner__text {
  max-width: 56ch;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
/* Index and city sit on one line; the city is the prominent half, since the
   two-city footprint is the thing we want read at a glance. */
.banner__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
}
.banner__index {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0;
}
.banner__city {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid rgba(250, 250, 249, 0.34);
  border-radius: 999px;
  padding: 5px 12px 4px;
  background: rgba(12, 10, 9, 0.32);
  backdrop-filter: blur(2px);
  white-space: nowrap;
}
.banner__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.8rem + 3.6vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--paper);
  margin: var(--s-2) 0 var(--s-3);
}
.banner__lede {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.18rem);
  line-height: 1.55;
  color: rgba(250, 250, 249, 0.85);
  font-weight: 300;
  max-width: 52ch;
  margin: 0;
}

.banner__action { flex-shrink: 0; }
.banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px 16px 28px;
  border: 1px solid rgba(250, 250, 249, 0.4);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  background: transparent;
  transition:
    background var(--d-base) var(--ease-out),
    border-color var(--d-base) var(--ease-out),
    color var(--d-base) var(--ease-out),
    transform var(--d-base) var(--ease-out);
  white-space: nowrap;
}
.banner__arrow {
  display: inline-block;
  transition: transform var(--d-base) var(--ease-out);
}

@media (hover: hover) {
  /* Hover is now an extra lift on top of the scroll reveal, not the only
     way to see the image. Falls back gracefully where .is-in never lands. */
  .banner:hover .banner__scrim {
    background: rgba(12, 10, 9, 0.28);
  }
  .banner:hover .banner__bg {
    transform: scale(1);
  }
  .banner:hover .banner__cta {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--paper);
    transform: translateY(-1px);
  }
  .banner:hover .banner__arrow {
    transform: translateX(6px);
  }
}

/* Touch devices now get the same scroll reveal as everyone else, so the old
   static no-hover override is gone. Only the bg scale fallback remains for
   the no-JS case, where .is-in never arrives. */
@media (hover: none) {
  html:not(.js) .banner__bg { transform: scale(1); }
}

/* Honor reduced-motion: snap state changes instead of fading/scaling */
@media (prefers-reduced-motion: reduce) {
  .banner__bg,
  .banner__scrim { transition: none; }
}

@media (max-width: 820px) {
  .banner {
    height: auto;
    min-height: 0;
    padding: var(--s-9) 0;
  }
  .banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-5);
    height: auto;
  }
  .banner__cta { padding: 14px 20px; }
}
@media (max-width: 480px) {
  .banner__title { font-size: clamp(2rem, 1.4rem + 4vw, 3rem); }
}

.projects__intro {
  padding: var(--s-10) 0 var(--s-8);
}
.projects__intro .eyebrow { color: rgba(250, 250, 249, 0.55); }
.projects__intro .h2 {
  color: var(--paper);
  max-width: 22ch;
}

.projects__track {
  position: relative;
}

.chapter {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: var(--s-9) var(--gutter) var(--s-9);
  overflow: hidden;
  isolation: isolate;
}
.chapter__media {
  position: absolute;
  inset: -8%;
  z-index: -2;
  background-image: var(--chapter-img);
  background-size: cover;
  background-position: center;
  will-change: transform;
  transform: scale(1.08);
  transition: transform var(--d-cinema) var(--ease-out);
}
.chapter__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12, 10, 9, 0.4) 0%, rgba(12, 10, 9, 0.05) 30%, rgba(12, 10, 9, 0.05) 50%, rgba(12, 10, 9, 0.78) 100%),
    linear-gradient(90deg, rgba(12, 10, 9, 0.55) 0%, rgba(12, 10, 9, 0) 60%);
}

.chapter__content {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.chapter__content .eyebrow {
  margin-bottom: var(--s-4);
  color: var(--gold-soft);
}

.chapter__content .display--md {
  max-width: 14ch;
  margin-bottom: var(--s-5);
  color: var(--paper);
}

.chapter__lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-prose);
  max-width: 52ch;
  color: rgba(250, 250, 249, 0.85);
  font-weight: 300;
  margin-bottom: var(--s-6);
}

.chapter__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 220px));
  gap: var(--s-5);
  padding: var(--s-5) 0;
  margin-bottom: var(--s-6);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}
.chapter__meta li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chapter__meta span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.5);
}
.chapter__meta strong {
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--paper);
  letter-spacing: -0.005em;
}

/* hover physics on chapter — subtle scale + cross-fade on the bg image */
@media (hover: hover) {
  .chapter:hover .chapter__media {
    transform: scale(1.12);
  }
}

@media (max-width: 820px) {
  .chapter { padding-top: var(--s-7); padding-bottom: var(--s-7); }
  .chapter__meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .chapter__meta { grid-template-columns: 1fr; }
}

/* ─────────────────  ENTRANCE ANIMATIONS  ───────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--ease-emph), transform 800ms var(--ease-emph);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"].is-in { transition-delay: 80ms; }
[data-reveal-delay="2"].is-in { transition-delay: 160ms; }
[data-reveal-delay="3"].is-in { transition-delay: 240ms; }
[data-reveal-delay="4"].is-in { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────  SCROLL REVEAL SYSTEM  ─────────────────
   Drives the scroll-triggered entrances across every page.

   The hidden state is gated on `.js` (set inline in <head>), so with JS
   disabled — or if reveal.js fails to load — all of this content renders
   fully visible instead of being trapped at opacity 0.

   :where() holds the list at zero specificity, so the single `.is-revealed`
   rule below can un-hide everything without repeating the list or
   resorting to !important.

   Duration uses --d-slow, which tokens.css zeroes under
   prefers-reduced-motion, so reduced-motion users get the end state
   instantly rather than a fade.

   Components that reveal themselves (banner, pull-quote, proj-cta,
   tru-diff) use `.is-in` instead and are defined with their component.

   Keep this list in sync with REVEAL in js/reveal.js.
   ────────────────────────────────────────────────────────── */
.js :where(
  .positioning__text .eyebrow,
  .positioning__text .h2,
  .positioning__lede,
  .trust-strip__eyebrow,
  .stat-banner__item,
  .tru-diff__head > *,
  .treos__text > *,
  .projects__intro .eyebrow,
  .proj-intro__text > *,
  .design-note__text > *,
  .setting__text > *,
  .hallmarks__head > *,
  .configs__head > *,
  .configs__lede,
  .rationale__head > *,
  .rationale__lede,
  .amenities__head > *,
  .amenities__lede,
  .specs__head > *,
  .specs__lede,
  .sustain__intro > *,
  .invest__intro > *,
  .connect__lede,
  .pull-quote__body,
  .proj-cta__title,
  .proj-nav__head > *,
  .founder-letter__eyebrow,
  .founder-letter__body,
  .press-section__head > *,
  .press-awards__head > *,
  /* Phase 4 sections */
  .accred__text > *,
  .accred__badge,
  .press-feature__head > *,
  .press-feature__card,
  .stat-banner__head > *,
  .compare__head > *,
  .compare__row,
  .cocreate__head > *,
  .cocreate__step,
  .founder-note__text > *,
  .founder-note__media,
  .voice__head > *,
  .voice__card
) {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--d-slow) var(--ease-emph),
    transform var(--d-slow) var(--ease-emph);
}
.js .is-revealed {
  opacity: 1;
  transform: none;
}

/* Failure path, set by revealEverything() in js/reveal.js: apply the end
   states with no transition at all. Without this, a page that never paints a
   frame would hold the transition at its start value and stay invisible. */
.reveal-off .is-revealed,
.reveal-off .is-in,
.reveal-off .is-in .banner__scrim,
.reveal-off .is-in .banner__bg,
.reveal-off .is-in .pull-quote__scrim,
.reveal-off .is-in .pull-quote__bg,
.reveal-off .is-in .proj-cta__scrim,
.reveal-off .is-in .proj-cta__bg {
  transition: none !important;
}

/* ╭─────────────────────────────────────────────╮
   │   PHASE 1 — CINEMATIC PRIMITIVES            │
   ╰─────────────────────────────────────────────╯ */

/* ─── Curtain page-load ─── */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: clip-path, transform;
}
/* The intro is pure CSS so it starts at first paint instead of waiting for
   enhance.js (which sits behind three third-party scripts). The inline head
   script only sets data-curtain, so there is no flash on a repeat visit and
   the curtain still lifts if JS never runs at all. */
html[data-curtain="skip"] .curtain {
  display: none;
}
html[data-curtain="play"] {
  overflow: hidden;
}
.curtain__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}
.curtain__mark {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--paper);
  opacity: 0;
  /* Delays start after the grace period in index.html: on a fast load the
     curtain is gone before any of this becomes visible. */
  animation: curtainMark 300ms var(--ease-emph) 60ms forwards;
}
@keyframes curtainMark {
  from { opacity: 0; transform: translateY(8px); letter-spacing: 0.18em; }
  to   { opacity: 1; transform: translateY(0);   letter-spacing: 0.04em; }
}
.curtain__line {
  width: 1px;
  height: 0;
  background: var(--gold-soft);
  animation: curtainLine 200ms var(--ease-emph) 300ms forwards;
}
@keyframes curtainLine {
  to { height: 56px; }
}

.curtain__sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.55);
  opacity: 0;
  animation: curtainSub 220ms var(--ease-out) 420ms forwards;
}
@keyframes curtainSub {
  to { opacity: 1; }
}

/* The exit is triggered by the head script the moment the page is ready. The
   4s delay here is only a backstop for the case where that script never runs;
   setting data-curtain="exit" collapses the delay to zero. */
.curtain {
  animation: curtainExit 400ms var(--ease-emph) 4000ms forwards;
}
html[data-curtain="exit"] .curtain {
  animation-delay: 0s;
}
@keyframes curtainExit {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}

@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
}

/* ─── Stats count-up bar ─── */
.stats__item { position: relative; }
.stats__bar {
  display: block;
  height: 1px;
  width: 0%;
  background: var(--gold);
  margin-top: var(--s-3);
  transition: width 1.4s var(--ease-emph);
}
.stats__item.is-in .stats__bar { width: 100%; }

/* ─── Split-text reveal ─── */
[data-split] .split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
[data-split] .split-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease-emph);
  will-change: transform;
}
[data-split].is-in .split-word > span { transform: translateY(0); }
[data-split] .split-word + .split-word { margin-left: 0.27em; } /* word gap */

@media (prefers-reduced-motion: reduce) {
  [data-split] .split-word > span { transform: none; transition: none; }
}

/* ╭─────────────────────────────────────────────╮
   │   PHASE 2 — NEW SECTIONS                    │
   ╰─────────────────────────────────────────────╯ */

/* ─── Video Lightbox ─── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(12, 10, 9, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 60px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out);
}
.lightbox[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
/* Sized by the video rather than by a hard 16/9 box: one of the channel
   partner testimonials is shot portrait (608x1080), and in a forced
   landscape frame it collapsed to a ~106px-wide sliver on a phone. Letting
   the frame shrink-wrap the video handles any aspect with no JS. */
.lightbox__frame {
  display: flex;
  width: auto;
  height: auto;
  max-width: min(1280px, 100%);
  max-height: 82vh;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  transform: scale(0.96);
  transition: transform 480ms var(--ease-emph);
}
.lightbox[data-open="true"] .lightbox__frame { transform: scale(1); }
.lightbox__frame video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 82vh;
}
.lightbox__close {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(250, 250, 249, 0.08);
  border: 1px solid rgba(250, 250, 249, 0.2);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.lightbox__close:hover { background: var(--gold); transform: scale(1.06); border-color: var(--gold); }

/* ╭─────────────────────────────────────────────╮
   │   PHASE 2 — POSTER (pre-footer)             │
   ╰─────────────────────────────────────────────╯ */

.poster {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-12) 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
}
.poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 80% 100%, rgba(161, 98, 7, 0.25) 0%, transparent 60%),
    radial-gradient(50% 70% at 10% 0%, rgba(214, 178, 90, 0.10) 0%, transparent 60%);
  z-index: -1;
}
.poster__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}
.poster__eyebrow { color: rgba(250, 250, 249, 0.55); }
.poster__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 1.6rem + 6vw, 7.5rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-6);
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}
.poster__title-em {
  font-style: italic;
  color: var(--gold-soft);
  font-weight: 400;
}
.poster__cta { padding: 18px 36px; font-size: 0.9rem; }
.poster__sub {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.55);
  margin-top: var(--s-3);
}
.poster__sub a { color: var(--gold-soft); }
.poster__sub a:hover { color: var(--paper); }

/* ─────────────────  THE TRU DIFFERENCE (pinned scrolly)  ───────────────── */
.tru-diff {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-10) 0 var(--s-9);
  z-index: 1;
}
.tru-diff__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(48px, 7vw, 128px);
  align-items: start;
}
.tru-diff__head {
  position: sticky;
  top: 96px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block: var(--s-3) var(--s-5);
}
.tru-diff__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: var(--s-3) 0 0;
  max-width: 16ch;
}
.tru-diff__title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
  display: block;
}
.tru-diff__lede {
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mute);
  margin-top: var(--s-3);
}

/* Right column: vertical list of pointers */
.tru-diff__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: diff;
}
.tru-diff__item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--s-5);
  align-items: flex-start;
  padding: var(--s-7) 0;
  border-top: 1px solid var(--line);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
/* Hidden only when JS can reveal it. Previously this was unconditional while
   the reveal lived in motion.js, which early-returns under reduced motion —
   so reduced-motion users were served a permanently empty section. */
.js .tru-diff__item {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}
.tru-diff__item:last-child { border-bottom: 1px solid var(--line); }
.tru-diff__item.is-in {
  opacity: 1;
  transform: translateY(0);
}

.tru-diff__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(24, 118, 155, 0.10);
  color: var(--gold);
  flex-shrink: 0;
  transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}
.tru-diff__icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  display: block;
}
.tru-diff__item:hover .tru-diff__icon {
  background: var(--gold);
  color: var(--paper);
}

.tru-diff__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
}
.tru-diff__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1rem + 0.55vw, 1.55rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.tru-diff__desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--mute);
  margin: 0;
  max-width: 52ch;
}

.tru-diff__idx {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  padding-top: 14px;
  align-self: flex-start;
}

/* When user prefers reduced motion, show items immediately */
@media (prefers-reduced-motion: reduce) {
  .tru-diff__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  .tru-diff__inner {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .tru-diff__head {
    position: static;
    top: auto;
  }
  .tru-diff__item {
    grid-template-columns: 52px 1fr;
    gap: var(--s-4);
    padding: var(--s-5) 0;
  }
  .tru-diff__idx {
    grid-column: 2 / 3;
    padding-top: 0;
  }
}
@media (max-width: 480px) {
  .tru-diff__icon { width: 48px; height: 48px; }
  .tru-diff__icon svg { width: 24px; height: 24px; }
}

/* ─────────────────  HOW WE BUILD DIFFERENTLY (E1)  ─────────────────
   Dark, so it reads as a deliberate break between two light sections.
   Built on a CSS grid rather than a <table> because it has to restack
   to stacked pairs on mobile, which a real table cannot do cleanly.
   Roles are declared in the markup so it still announces as a table. */
.compare {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-10) 0 var(--s-9);
}
.compare__head { max-width: 62ch; margin-bottom: var(--s-8); }
.compare__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-4);
  color: var(--paper);
}
.compare__title em { font-style: italic; color: var(--gold-soft); }
.compare__lede {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  line-height: 1.65;
  font-weight: 300;
  color: rgba(250, 250, 249, 0.72);
  margin: 0;
  max-width: 52ch;
}
.compare__table { display: flex; flex-direction: column; }
.compare__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid rgba(250, 250, 249, 0.14);
  align-items: baseline;
}
.compare__row--head {
  border-top: none;
  padding-bottom: var(--s-4);
}
.compare__row--head .compare__cell {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.compare__row--head .compare__cell--them { color: rgba(250, 250, 249, 0.5); }
.compare__row--head .compare__cell--us { color: var(--gold); }
.compare__cell { display: block; }
.compare__cell--topic {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.5);
  line-height: 1.7;
}
.compare__cell--them {
  font-size: 0.98rem;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(250, 250, 249, 0.55);
}
.compare__cell--us {
  font-size: 1.02rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--paper);
  border-left: 2px solid var(--gold);
  padding-left: var(--s-5);
}

@media (max-width: 860px) {
  /* Stack to label + them + us, with the topic acting as a heading. */
  .compare__row { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-6) 0; }
  .compare__row--head { display: none; }
  .compare__cell--them::before {
    content: "Conventional \2014 ";
    color: rgba(250, 250, 249, 0.38);
  }
  .compare__cell--us {
    border-left: 2px solid var(--gold);
    padding-left: var(--s-4);
    margin-top: var(--s-2);
  }
  .compare__cell--us::before {
    content: "TRU \2014 ";
    color: var(--gold);
  }
}

/* ─────────────────  CO-CREATE JOURNEY (E2)  ───────────────── */
.cocreate {
  position: relative;
  z-index: 1;
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-10) 0 var(--s-9);
}
.cocreate__head { max-width: 62ch; margin-bottom: var(--s-8); }
.cocreate__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-4);
  color: var(--ink);
}
.cocreate__title em { font-style: italic; color: var(--gold); }
.cocreate__lede {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  line-height: 1.65;
  font-weight: 300;
  color: var(--mute);
  margin: 0;
  max-width: 54ch;
}
.cocreate__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.cocreate__step {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  position: relative;
}
/* The connecting tick between steps — decorative, hidden when stacked. */
.cocreate__step::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.cocreate__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.cocreate__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.cocreate__desc {
  font-size: 0.98rem;
  line-height: 1.62;
  font-weight: 300;
  color: var(--mute);
  margin: 0;
}
.cocreate__you {
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--ink);
}
.cocreate__you span { color: var(--gold); margin-right: 6px; }

@media (max-width: 980px) {
  .cocreate__steps { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-6); }
}
@media (max-width: 600px) {
  .cocreate__steps { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ─────────────────  TREOS (operating system)  ───────────────── */
.treos {
  position: relative;
  background: var(--paper-2, #f5f5f4);
  padding: var(--s-10) 0 var(--s-9);
  color: var(--ink);
  overflow: hidden;
  z-index: 1;
}
.treos__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.treos__text {
  max-width: 52ch;
}
.treos__text .eyebrow {
  margin-bottom: var(--s-5);
}
.treos__text .h2 {
  margin-bottom: var(--s-4);
  max-width: 18ch;
}
.treos__lede {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mute);
  margin-bottom: var(--s-4);
}
.treos__lede em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}
.treos__caps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-6) 0;
  padding: 0;
  list-style: none;
}
.treos__caps li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(12, 10, 9, 0.04);
  padding: 8px 16px;
  border-radius: 99px;
  color: var(--ink);
}
.treos__cta {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-6);
  flex-wrap: wrap;
}

/* Treos Media (Dashboard frame) */
.treos__media {
  position: relative;
  margin: 0;
  perspective: 1000px;
}
.treos__frame {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-3);
  transform: rotateY(4deg) rotateX(2deg);
  transition: transform 0.6s var(--ease-out);
  transform-origin: center right;
}
.treos__split:hover .treos__frame {
  transform: rotateY(0deg) rotateX(0deg);
}

.treos__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--paper-2, #f5f5f4);
  border-bottom: 1px solid var(--line);
}
.treos__chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}
.treos__chrome span:nth-child(1) { background: #ff5f56; }
.treos__chrome span:nth-child(2) { background: #ffbd2e; }
.treos__chrome span:nth-child(3) { background: #27c93f; }
.treos__url {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--mute);
  margin: 0 auto;
  letter-spacing: 0.05em;
  background: var(--paper);
  padding: 4px 16px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.treos__ui {
  padding: var(--s-5);
  background: var(--paper);
}
.treos__ui-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--s-5);
}
.treos__ui-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--mute);
  padding: 4px 8px;
  background: rgba(12, 10, 9, 0.04);
  border-radius: 4px;
}
.treos__ui-tag--live {
  color: #27c93f;
  background: rgba(39, 201, 63, 0.1);
  font-weight: 500;
}

.treos__ui-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.treos__ui-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.treos__ui-stat span {
  font-size: 0.75rem;
  color: var(--mute);
}
.treos__ui-stat strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.treos__ui-stat em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--gold);
}

.treos__ui-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
  margin-bottom: var(--s-5);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.treos__ui-bars span {
  flex: 1;
  background: var(--gold-soft);
  height: var(--h);
  border-radius: 2px 2px 0 0;
  transition: height 1s ease-out;
}
.treos__ui-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 900px) {
  .treos__split {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  .treos__frame {
    transform: none;
  }
}
@media (max-width: 480px) {
  .treos__ui-grid {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

/* ─────────────────  MOBILE READING COMFORT  ─────────────────
   Homepage body copy bottomed out at 14–15px on phones, which reads dense
   and undercuts the brief that luxury brands should breathe. Lift the floor
   and open the leading. Desktop type is unchanged.

   Placed at the end of the file deliberately: several of these components
   are defined further down, so an earlier block would lose on source order.
   ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .positioning__lede,
  .treos__lede,
  .tru-diff__lede,
  .banner__lede {
    font-size: 1rem;
    line-height: 1.75;
  }
  .tru-diff__desc {
    font-size: 0.9375rem;
    line-height: 1.7;
  }
  .positioning__lede + .positioning__lede,
  .treos__lede + .treos__lede {
    margin-top: var(--s-4);
  }
  /* The five pillars sat tight against their dividers in a narrow column */
  .tru-diff__item { padding: var(--s-6) 0; }
}