/* ---------- Fonts ----------
   GT America is the Brookline brand face (Grilli Type, licensed). It is listed
   first so machines with it installed — and the site itself, once a webfont
   licence is bought — render true. Archivo (width axis, stands in for GT
   America Extended) and Inter ship here as the fallbacks so the page is
   correct everywhere else. See README §4. */
@font-face {
  font-family: "Archivo Var";
  src: url("/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Var";
  src: url("/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* =========================================================================
   Brookline Development Group — Design System
   ========================================================================= */

/* ---------- Tokens ----------
   Brand values come from the Brookline brand system (references/brand.md in the
   pitch-deck skill). Sky Blue carries ~60-70% of the accent weight. Seafoam,
   salmon and gold are SEMANTIC ONLY — they signal money direction (gain / loss /
   break-even) and must never be used decoratively. They are declared here for
   charts and figures; nothing in the page chrome touches them. */
:root {
  /* --- Brand, as specified --- */
  --charcoal:     #141E28;
  --panel-dark:   #1C2B40;
  --sky:          #4682FF;
  --gray:         #646E78;
  --gray-light:   #5A6470;
  --panel-light:  #EEF3FB;
  --white:        #FFFFFF;

  /* Semantic money colours — charts and figures only */
  --seafoam:      #3CBEBE;
  --seafoam-ink:  #1E9898;
  --salmon:       #FF6E50;
  --gold:         #FFC81E;

  /* --- Derived, for contrast. Sky at #4682FF is 3.56:1 on white, which fails
         AA for text, so light grounds use --sky-deep; dark grounds can use
         --sky (4.73:1 on charcoal) or --sky-light for emphasis. --- */
  --sky-deep:     #236AFF;   /* 4.59:1 both ways against white */
  --sky-ink:      #0B58F5;   /* 4.53:1 on the --panel-light band */
  --sky-light:    #7BA6FF;   /* 7.01:1 on charcoal */

  /* --- Surfaces --- */
  --ink:        var(--charcoal);
  --ink-900:    #18242F;
  --ink-800:    var(--panel-dark);
  --ink-700:    #24364E;
  --ink-600:    #2E425C;
  --line:       rgba(255, 255, 255, 0.18);
  --line-soft:  rgba(255, 255, 255, 0.11);

  /* --- Paper --- */
  --bone:       var(--white);
  --bone-2:     var(--panel-light);
  --bone-3:     #D7E0F0;
  --stone:      var(--gray);
  --stone-dim:  #8A94A0;

  /* --- Accent aliases used through the sheet --- */
  --clay:       var(--sky);
  --clay-deep:  var(--sky-deep);
  --clay-hi:    var(--sky-light);
  --brass:      var(--sky-light);
  --moss:       var(--seafoam);

  /* --- Semantic --- */
  --bg:         var(--ink);
  --fg:         var(--white);
  --muted:      rgba(255, 255, 255, 0.62);
  --faint:      rgba(255, 255, 255, 0.50);

  /* --- Type --- */
  --display: "GT America Extended", "Archivo Var", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans:    "GT America", "Inter Var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Scale — fluid. Tightened from the serif scale: an extended grotesk sets
     much wider per character, so the display sizes come down a step. */
  --t-mega:  clamp(2.5rem, 7.4vw, 7rem);
  --t-xxl:   clamp(2.1rem, 5vw, 4.5rem);
  --t-xl:    clamp(1.75rem, 3.5vw, 3rem);
  --t-lg:    clamp(1.4rem, 2.3vw, 2rem);
  --t-md:    clamp(1.1rem, 1.6vw, 1.4rem);
  --t-body:  clamp(1rem, 1.02vw, 1.1rem);
  --t-sm:    0.9375rem;
  --t-xs:    0.8125rem;
  --t-eyebrow: 0.72rem;

  /* Space */
  --gutter: clamp(1.25rem, 4.2vw, 4.5rem);
  --section: clamp(5.5rem, 11vw, 11rem);
  --maxw: 1560px;
  --measure: 62ch;

  /* Motion */
  --e-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --e-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --e-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --d-fast: 160ms;
  --d-base: 220ms;
  --d-slow: 420ms;

  --radius: 2px;
  --nav-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--sky); color: var(--charcoal); }

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

.skip {
  position: absolute; left: 8px; top: -100px; z-index: 999;
  background: var(--bone); color: var(--ink);
  padding: 0.75rem 1.25rem; font-weight: 600; font-size: var(--t-sm);
  transition: top var(--d-base) var(--e-out);
}
.skip:focus { top: 8px; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Typography ---------- */
.display {
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 112%;          /* stands in for GT America Extended */
  font-variation-settings: "wdth" 112, "wght" 500;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
/* Brand rule: headline accent words are Sky Blue, not italic. */
.display em { font-style: normal; color: var(--sky-light); }
.on-light .display em, .on-bone .display em { color: var(--sky-ink); }

h1.display { font-size: var(--t-xxl); }
h2.display { font-size: var(--t-xl); }
h3.display { font-size: var(--t-lg); }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 1px;
  background: var(--clay);
  flex: none;
}
.eyebrow.bare::before { display: none; }

.lede {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

.prose { max-width: var(--measure); }
.prose p { color: var(--muted); margin-bottom: 1.15em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose h2,
.prose h3 {
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 2.25em 0 0.65em;
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1.15em; }
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.55em;
  color: var(--muted);
}
.prose ul li::before {
  content: "";
  position: absolute; left: 0; top: 0.72em;
  width: 0.5rem; height: 1px;
  background: var(--clay);
}
.prose a:not(.btn) {
  color: var(--fg);
  border-bottom: 1px solid var(--clay);
  transition: color var(--d-fast) ease, border-color var(--d-fast) ease;
}
.prose a:not(.btn):hover { color: var(--clay-hi); border-color: var(--clay-hi); }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); position: relative; }
/* The final section's bottom padding used to stack with the footer's top
   padding, reading as one large empty band before the footer began. Halve the
   trailing half of that pair; the footer's own padding supplies the rest. */
main > section:last-child { padding-bottom: calc(var(--section) * 0.45); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 7rem); }
.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-sticky { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); }
.g-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: clamp(2rem, 6vw, 6rem); }
@media (max-width: 900px) { .g-contact { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1000px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-sticky { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head > .eyebrow { grid-column: 1 / -1; margin-bottom: -0.75rem; }
@media (max-width: 860px) { .section-head { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--bone);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--d-fast) var(--e-out), color var(--d-base) var(--e-out);
  will-change: transform;
}
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--clay-deep);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-base) var(--e-out);
}
.btn .arw { transition: transform var(--d-base) var(--e-out); flex: none; }
.btn:active { transform: scale(0.97); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--clay { --btn-bg: var(--clay-deep); --btn-fg: var(--bone); }
.btn--clay::after { background: var(--bone); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--bone); }
  .btn:hover::after { clip-path: inset(0 0 0 0); }
  .btn:hover .arw { transform: translateX(4px); }
  .btn--clay:hover { color: var(--ink); }
}

.link-u {
  /* A long unbreakable string (an email address) must not widen its track. */
  display: inline-flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap; overflow-wrap: anywhere; max-width: 100%;
  font-size: var(--t-sm); font-weight: 600;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--clay), var(--clay));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--d-base) var(--e-out), color var(--d-fast) ease;
}
.link-u .arw { transition: transform var(--d-base) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .link-u:hover { color: var(--clay-hi); }
  .link-u:hover .arw { transform: translateX(4px); }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color var(--d-slow) var(--e-out),
              backdrop-filter var(--d-slow) var(--e-out),
              border-color var(--d-slow) var(--e-out);
  border-bottom: 1px solid transparent;
}
.nav[data-stuck="true"] {
  /* Opaque fallback first — browsers without backdrop-filter still get a
     readable bar rather than text bleeding through. */
  background: rgba(10, 16, 14, 0.97);
  border-bottom-color: var(--line-soft);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav[data-stuck="true"] {
    background: rgba(10, 16, 14, 0.80);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
  }
}
.nav__in {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.brand {
  display: flex; align-items: center; gap: 1.05rem; flex: none;
  /* The scroll-dock animates this element itself rather than a stand-in, so
     there is never a swap or a seam at the hand-off. transform-origin is the
     left edge because that is the anchor it settles onto in the bar. */
  transform-origin: 0 50%;
  will-change: transform;
}
.brand__mark {
  /* The Zakim tower mark, masked so it takes currentColor on any ground. */
  width: 76px; height: 39px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("/images/tower-mark.png") left center / contain no-repeat;
  mask: url("/images/tower-mark.png") left center / contain no-repeat;
}
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--display); font-weight: 600;
  font-stretch: 108%; font-variation-settings: "wdth" 108, "wght" 600;
  font-size: 1.32rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.brand__sub {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--faint); margin-top: 4px;
}
@media (max-width: 560px) {
  .brand__mark { width: 60px; height: 31px; }
  .brand__name { font-size: 1.1rem; }
  .brand__sub  { font-size: 0.56rem; }
}

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav__link {
  font-size: var(--t-sm); font-weight: 500; color: var(--muted);
  padding: 0.4rem 0; position: relative;
  transition: color var(--d-fast) ease;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--clay);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--fg); }
.nav__link[aria-current="page"]::after, .nav__link:hover::after { transform: scaleX(1); }

.nav__cta { flex: none; }
.nav__toggle { display: none; }

@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; align-items: flex-end;
  }
  .nav__toggle span {
    display: block; height: 1.5px; width: 24px; background: var(--fg);
    transition: transform var(--d-base) var(--e-out), opacity var(--d-fast) ease, width var(--d-base) var(--e-out);
  }
  .nav__toggle span:nth-child(2) { width: 16px; }
  .nav[data-open="true"] .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav[data-open="true"] .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav[data-open="true"] .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); width: 24px; }
}

.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink-900);
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--d-slow) var(--e-drawer), visibility 0s linear var(--d-slow);
}
.drawer[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--d-slow) var(--e-drawer), visibility 0s;
}
.drawer__links { display: flex; flex-direction: column; }
.drawer__link {
  font-family: var(--display); font-size: clamp(2rem, 9vw, 3.25rem);
  line-height: 1.12; padding: 0.42rem 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: baseline; gap: 1rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}
.drawer[data-open="true"] .drawer__link { opacity: 1; transform: none; }
.drawer__link .n {
  font-family: var(--sans); font-size: 0.7rem; color: var(--faint);
  letter-spacing: 0.1em;
}
.drawer__foot { padding-top: 2.5rem; color: var(--muted); font-size: var(--t-sm); }
.drawer__foot a { display: block; margin-bottom: 0.4rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--nav-h) + 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  animation: heroDrift 24s var(--e-in-out) infinite alternate;
}
.hero__media video { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; }
.hero__media video[data-ready="true"] { opacity: 1; }
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.6%, 0); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(20,30,40,0.96) 0%, rgba(20,30,40,0.80) 30%, rgba(20,30,40,0.34) 58%, rgba(20,30,40,0.10) 78%, rgba(20,30,40,0.55) 100%),
    radial-gradient(110% 75% at 10% 95%, rgba(20,30,40,0.75), transparent 66%);
}
.hero__inner { position: relative; }
.hero h1 {
  font-size: var(--t-mega);
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}
.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 1280px) { .hero__foot { padding-right: 4.5rem; } }
@media (max-width: 860px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .hero { padding-top: calc(var(--nav-h) + 2rem); min-height: 88svh; }
  .hero h1 { margin-bottom: 1.5rem; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Line-by-line mask reveal */
.reveal-lines { display: block; }
.reveal-lines .ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.reveal-lines .ln > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1000ms var(--e-out);
}
.reveal-lines[data-in="true"] .ln > span { transform: translateY(0); }
.reveal-lines .ln:nth-child(2) > span { transition-delay: 90ms; }
.reveal-lines .ln:nth-child(3) > span { transition-delay: 180ms; }

.scroll-cue { display: none; }
@media (min-width: 1280px) {
  .scroll-cue {
    position: absolute; right: calc(var(--gutter) - 0.35rem);
    bottom: clamp(2.5rem, 5vw, 4rem);
    display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
    pointer-events: none;
  }
  .scroll-cue span {
    font-size: var(--t-eyebrow); letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--faint); writing-mode: vertical-rl; order: -1;
  }
  .scroll-cue i {
    display: block; width: 1px; height: 64px; background: var(--line);
    position: relative; overflow: hidden;
  }
  .scroll-cue i::after {
    content: ""; position: absolute; inset: 0; background: var(--clay);
    animation: cue 2.6s var(--e-in-out) infinite;
  }
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ---------- Scroll reveal ---------- */
[data-rv] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 780ms var(--e-out), transform 780ms var(--e-out);
  will-change: opacity, transform;
}
[data-rv][data-in="true"] { opacity: 1; transform: none; }
[data-rv="clip"] {
  opacity: 1; transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms var(--e-out);
}
[data-rv="clip"][data-in="true"] { clip-path: inset(0 0 0 0); }
[data-rv-d="1"] { transition-delay: 70ms; }
[data-rv-d="2"] { transition-delay: 140ms; }
[data-rv-d="3"] { transition-delay: 210ms; }
[data-rv-d="4"] { transition-delay: 280ms; }
[data-rv-d="5"] { transition-delay: 350ms; }


/* ---------- Intro: the logo as a hole ----------
   A sheet of brand navy covers the hero; the lockup is cut out of it, so the
   only place the video shows is inside the letters. Scrolling drives the sheet
   toward the viewer until it passes the camera and the hero is simply there.

   Progressive enhancement, deliberately: the extra scroll range and the panel
   itself only exist once JS sets data-dock="on". No JS, an old browser, or
   reduced motion and this is a plain one-screen hero - never a blank screen
   waiting on script, and never a panel with no way to get past it. */
.hero-dock { position: relative; }
.hero-dock[data-dock="on"] { height: 235svh; }
.hero-dock[data-dock="on"] > .hero { position: sticky; top: 0; height: 100svh; min-height: 0; }

.intro {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  overflow: hidden;                 /* the sheet is vast; never let it scroll */
  pointer-events: none;
  contain: strict;                  /* its growth must not reflow the page */
}
.intro[hidden] { display: none; }
/* The sheet fills the viewport and the zoom happens inside it, by re-cutting
   the viewBox each frame. Scaling the element instead would hand the
   compositor one bitmap to stretch, and the letter edges would pixelate the
   further it travelled. Only opacity is animated on the element itself. */
.intro__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: var(--intro-alpha, 1);
  will-change: opacity;
}

/* The wordmark is masked text, so it has to carry the brand's own metrics
   here too or the hole will not match the mark in the corner. */
/* A custom property cannot resolve inside a presentation attribute, so the
   panel colour is set as a real CSS property or it silently renders black. */
.intro__panel { fill: var(--charcoal); }

.intro__name {
  fill: #000; font-family: var(--display); font-weight: 600;
  font-stretch: 108%; font-variation-settings: "wdth" 108, "wght" 600;
  font-size: 58px; letter-spacing: 0.06em;
}
.intro__sub {
  fill: #000; font-family: var(--display); font-weight: 500;
  font-size: 15.5px; letter-spacing: 0.34em;
}

/* Hero copy waits behind the sheet and arrives as it clears. The scrim comes
   up with it: while the cut-out is the only window onto the video, the video
   should be bright; once the headline lands it needs something to sit on. */
[data-dock="on"] .hero__inner { opacity: var(--dock-copy, 1); transform: translate3d(0, calc((1 - var(--dock-copy, 1)) * 14px), 0); }
[data-dock="on"] .hero__scrim { opacity: var(--dock-copy, 1); }
/* While the cut-out is the only window onto the footage, that footage has to
   out-read the panel around it or the logo just looks like flat navy. Lift it
   while the sheet is up and ease back to true colour as the sheet clears. */
[data-dock="on"] .hero__media {
  filter: brightness(calc(1 + var(--intro-lift, 0) * 0.55))
          contrast(calc(1 + var(--intro-lift, 0) * 0.12))
          saturate(calc(1 + var(--intro-lift, 0) * 0.15));
}
/* The cue has to sit ON the panel, not behind it: during the intro it is the
   only instruction on screen, so it is centred at the bottom and shown at
   every width, not just the desktop rail it normally lives on. It fades early,
   well before the sheet clears, so it never competes with the headline. */
[data-dock="on"] .scroll-cue {
  opacity: var(--intro-cue, 1);
  /* position must be restated: the base rule only sets it inside the >=1280
     media query, so below that width left/bottom would do nothing and the cue
     would fall into normal flow at the left edge. */
  position: absolute; display: flex; z-index: 4;
  left: 50%; right: auto; transform: translateX(-50%);
  bottom: clamp(1.75rem, 4vh, 3rem);
  flex-direction: column; align-items: center; gap: 0.7rem;
}
[data-dock="on"] .scroll-cue span {
  writing-mode: horizontal-tb; order: 0;
  /* uppercase is only in the >=1280 base rule, so restate it or the cue reads
     "Scroll" on a phone and "SCROLL" on a desktop. */
  text-transform: uppercase;
  font-size: 0.58rem; letter-spacing: 0.34em; color: var(--muted);
}
[data-dock="on"] .scroll-cue i { height: 44px; order: 1; }
/* Chevron, drawn rather than shipped as an asset. */
[data-dock="on"] .scroll-cue::after {
  content: ""; order: 2;
  width: 9px; height: 9px; margin-top: -0.25rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  animation: cue-dip 2.6s var(--e-in-out) infinite;
}
@keyframes cue-dip {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.55; }
  55%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

.nav__links, .nav__cta, .nav__toggle, .nav .brand {
  transition: opacity var(--d-base) var(--e-out);
}
body[data-dock-active="true"] .nav__links,
body[data-dock-active="true"] .nav__cta,
body[data-dock-active="true"] .nav__toggle,
body[data-dock-active="true"] .nav .brand { opacity: var(--dock-nav, 1); }
body[data-dock-active="true"] .nav { background: none !important; border-bottom-color: transparent !important; backdrop-filter: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hero-dock[data-dock="on"] { height: auto; }
  .hero-dock[data-dock="on"] > .hero { position: relative; height: auto; min-height: 100svh; }
  .intro { display: none; }
}

/* A project card with nowhere to go loses its hover lift and pointer. */
.pcard--static { cursor: default; }
.pcard--static:hover .pcard__media img { transform: none; }

/* ---------- Marquee ----------
   Tenant logo wall: single-weight white marks straight on the dark ground.
   --logo-h is the only knob; everything else derives from it. */
.marquee {
  --speed: 64s;
  --logo-h: clamp(30px, 3.1vw, 44px);
  overflow: hidden;
  position: relative;
  padding-block: clamp(0.5rem, 1vw, 0.9rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: slide var(--speed) linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee__group { display: flex; align-items: center; flex: none; }

.mq__logo {
  flex: none;
  display: block;
  /* Cap both axes: height alone lets a wide wordmark run away, width alone
     lets a square badge tower over its neighbours. */
  max-height: var(--logo-h);
  max-width: clamp(104px, 12vw, 168px);
  width: auto; height: auto;
  object-fit: contain;
  margin-inline: clamp(1.5rem, 3.2vw, 3rem);
  opacity: 0.88;
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .mq__logo:hover { opacity: 1; transform: translateY(-2px) scale(1.04); }
}

/* Tenants with no usable single-colour mark - set as names, never as fake art. */
.mq__also {
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  text-align: center;
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  color: var(--muted);
  line-height: 1.75;
  letter-spacing: 0.005em;
  max-width: 58ch;
  margin-inline: auto;
  text-wrap: pretty;
}

@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 880px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 420px) { .stats { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .stat { border-left: 0; padding-left: 0; } .stat + .stat { border-top: 1px solid var(--line-soft); } }
.stat {
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--line-soft);
  position: relative;
}
.stat:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 880px) {
  .stat:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
.stat__n {
  font-family: var(--display); font-weight: 500;
  font-stretch: 112%; font-variation-settings: "wdth" 112, "wght" 500;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 1.0; letter-spacing: -0.03em;
  display: flex; align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.stat__n .pre, .stat__n .suf { color: var(--clay); }
.stat__l {
  margin-top: 0.9rem; font-size: var(--t-sm); color: var(--muted);
  max-width: 26ch; text-wrap: pretty;
}
@media (max-width: 880px) { .stat__l { max-width: none; } }

/* ---------- Service list ---------- */
.svc-media { isolation: isolate; overflow: clip; }
.svc-media > .wrap { position: relative; z-index: 1; }
.svc-media__layer { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.svc-media__frame { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.svc-media__frame img, .svc-media__frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.svc-media__frame video { opacity: 0; transition: opacity 900ms ease; }
.svc-media__frame video[data-ready="true"] { opacity: 1; }
/* Heavy, even scrim: the service titles and body copy sit directly on top of
   moving footage, so contrast has to hold at every frame, not just the dark ones. */
.svc-media__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(20,30,40,0.86) 14%, rgba(20,30,40,0.80) 50%, rgba(20,30,40,0.86) 86%, var(--bg) 100%);
}
.svc-sticky { position: sticky; top: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem)); align-self: start; }
@media (max-width: 1000px) { .svc-sticky { position: static; } }

.svc-list { border-top: 1px solid var(--line-soft); }
.svc {
  display: block;
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(1.5rem, 2.6vw, 2.35rem) 0;
  position: relative;
  transition: padding-left var(--d-slow) var(--e-out);
}
.svc__top { display: flex; align-items: baseline; gap: clamp(1rem, 2vw, 2rem); }
.svc__n {
  font-size: var(--t-xs); color: var(--faint); letter-spacing: 0.12em;
  flex: none; padding-top: 0.45em; font-variant-numeric: tabular-nums;
  transition: color var(--d-base) ease;
}
.svc__body { flex: 1; min-width: 0; display: block; }
.svc__n { display: block; }
.svc__t {
  display: block;
  font-family: var(--display); font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  line-height: 1.12; letter-spacing: -0.015em;
  transition: color var(--d-base) ease;
}
.svc__d {
  display: block;
  color: var(--muted); font-size: var(--t-sm); margin-top: 0.6rem;
  max-width: 56ch; text-wrap: pretty;
}
.svc__arw {
  flex: none; align-self: center;
  transition: transform var(--d-slow) var(--e-out), color var(--d-base) ease;
  color: var(--faint);
}
@media (hover: hover) and (pointer: fine) {
  .svc:hover { padding-left: 1.1rem; }
  .svc:hover .svc__t { color: var(--brass); }
  .svc:hover .svc__n { color: var(--clay); }
  .svc:hover .svc__arw { transform: translateX(6px); color: var(--clay); }
}

/* ---------- Project cards ---------- */
.pcard { display: block; position: relative; }
.pcard__media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--ink-800);
  border-radius: var(--radius);
}
.pcard--wide .pcard__media { aspect-ratio: 16 / 9; }
.pcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.01);
  transition: transform 900ms var(--e-out), filter 600ms ease;
}
.pcard__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,30,40,0.78), rgba(20,30,40,0.05) 55%);
  opacity: 0.85; transition: opacity var(--d-slow) ease;
}
.pcard__tag {
  position: absolute; z-index: 2; top: 1rem; left: 1rem;
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  background: rgba(20,30,40,0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-soft);
  color: var(--bone-2);
}
.pcard__cap { position: absolute; z-index: 2; left: 1.35rem; right: 1.35rem; bottom: 1.25rem; }
.pcard--wide .pcard__cap { left: 1.75rem; right: 1.75rem; bottom: 1.6rem; }
.pcard__t {
  font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.1; letter-spacing: -0.015em;
}
.pcard__m {
  font-size: var(--t-xs); color: var(--bone-3); margin-top: 0.3rem;
  letter-spacing: 0.04em;
}
.pcard__x {
  font-size: var(--t-sm); color: var(--muted); margin-top: 0.85rem;
  max-width: 48ch; text-wrap: pretty;
}
@media (hover: hover) and (pointer: fine) {
  .pcard:hover .pcard__media img { transform: scale(1.06); }
  .pcard:hover .pcard__media::after { opacity: 1; }
}

/* ---------- Before / After slider ---------- */
.ba {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-800);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none; -webkit-user-select: none;
  --p: 50%;
}
.ba img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.ba__after { clip-path: inset(0 0 0 var(--p)); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--p);
  width: 2px; margin-left: -1px;
  background: var(--bone);
  z-index: 3; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(20,30,40,0.35), 0 0 32px rgba(20,30,40,0.5);
}
.ba__knob {
  position: absolute; top: 50%; left: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: var(--bone); color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  transition: transform var(--d-base) var(--e-out);
}
.ba:active .ba__knob { transform: scale(0.94); }
.ba__lbl {
  position: absolute; z-index: 4; bottom: 1rem;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  background: rgba(20,30,40,0.62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-soft);
  color: var(--bone-2);
  transition: opacity var(--d-base) ease;
}
.ba__lbl--b { left: 1rem; }
.ba__lbl--a { right: 1rem; }
.ba__range {
  /* Present for keyboard and screen-reader users only — pointer dragging is
     handled on the container so the gesture is consistent everywhere. */
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%;
  opacity: 0; margin: 0;
  pointer-events: none;
}
.ba__range:focus-visible + .ba__handle .ba__knob {
  outline: 2px solid var(--brass); outline-offset: 3px;
}

/* ---------- Facts table ---------- */
.facts { border-top: 1px solid var(--line-soft); }
.facts div {
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 1.25rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
}
.facts dt { color: var(--faint); letter-spacing: 0.02em; }
.facts dd { margin: 0; color: var(--fg); text-wrap: pretty; }
@media (max-width: 520px) { .facts div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } }

/* ---------- Q&A ---------- */
.qa { border-top: 1px solid var(--line-soft); }
.qa__i { border-bottom: 1px solid var(--line-soft); }
.qa__q {
  width: 100%; text-align: left;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0;
  font-size: var(--t-md); font-weight: 500; letter-spacing: -0.012em;
  transition: color var(--d-fast) ease;
}
.qa__q:hover { color: var(--brass); }
.qa__ic {
  flex: none; width: 20px; height: 20px; margin-top: 0.3em; position: relative;
}
.qa__ic::before, .qa__ic::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 100%; height: 1.5px; background: var(--clay);
  transition: transform var(--d-base) var(--e-out);
}
.qa__ic::after { transform: rotate(90deg); }
.qa__i[data-open="true"] .qa__ic::after { transform: rotate(0deg); }
.qa__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-slow) var(--e-out);
}
.qa__i[data-open="true"] .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p {
  color: var(--muted); padding-bottom: 1.5rem; max-width: var(--measure);
  text-wrap: pretty;
}

/* ---------- Markets ---------- */
.mkt { border-top: 1px solid var(--line-soft); }
.mkt__i {
  display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.5rem, 2.6vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}
@media (max-width: 760px) { .mkt__i { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } }
.mkt__n {
  font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.08; letter-spacing: -0.015em;
}
.mkt__tag { font-size: var(--t-xs); color: var(--clay); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.4rem; }
.mkt__d { color: var(--muted); font-size: var(--t-sm); max-width: 62ch; text-wrap: pretty; }
.mkt__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.pill {
  font-size: var(--t-xs); padding: 0.32rem 0.7rem;
  border: 1px solid var(--line); color: var(--bone-3);
  border-radius: 100px;
}

/* ---------- Team ---------- */
.person__media {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-800);
  border-radius: var(--radius); margin-bottom: 1.25rem;
}
.person__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 900ms var(--e-out), filter 600ms ease; }
@media (hover: hover) and (pointer: fine) { .person:hover .person__media img { transform: scale(1.04); filter: saturate(1); } }
.person__n { font-family: var(--display); font-size: var(--t-lg); line-height: 1.1; }
.person__r { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay); margin-top: 0.4rem; }

/* ---------- Panels & CTA ---------- */
.panel {
  min-width: 0;
  background: var(--ink-900);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  height: 100%;
  transition: border-color var(--d-slow) ease, background-color var(--d-slow) ease, transform var(--d-slow) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  a.panel:hover { border-color: var(--line); background: var(--ink-800); transform: translateY(-3px); }
}
.panel__k {
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 1rem;
}
.panel__t { font-family: var(--display); font-size: var(--t-lg); line-height: 1.12; margin-bottom: 0.75rem; }
.panel__d { color: var(--muted); font-size: var(--t-sm); text-wrap: pretty; }

.cta {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius);
  /* This card's own padding sits inside the section's padding, which in turn
     sits above the footer's. Three generous paddings in a row read as one
     empty band, so the card's is the one that gives. */
  padding: clamp(2.25rem, 4.5vw, 4rem) clamp(1.5rem, 5vw, 5rem);
  text-align: center;
}
.cta__bg { position: absolute; inset: 0; z-index: -2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(20,30,40,0.74), rgba(20,30,40,0.90));
}
.cta h2 { margin-inline: auto; max-width: 18ch; }
.cta .lede { margin-inline: auto; text-align: center; margin-top: 1.25rem; }
.cta .hero__actions { justify-content: center; margin-top: 2rem; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.field label { font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.field input, .field select, .field textarea {
  /* A <select> otherwise sizes to its longest option and blows out the
     layout on a 320px viewport. */
  min-width: 0; max-width: 100%;
  text-overflow: ellipsis;
  font: inherit; font-size: var(--t-sm);
  background: var(--ink-900); color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  transition: border-color var(--d-base) ease, background-color var(--d-base) ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--clay); background: var(--ink-800);
}
.field input::placeholder, .field textarea::placeholder { color: var(--stone-dim); }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23A39B8C' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ---------- Page header (interior) ---------- */
.phead {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(4rem, 9vw, 8rem));
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
.phead__bg { position: absolute; inset: 0; z-index: -2; }
.phead__bg img { width: 100%; height: 100%; object-fit: cover; }
.phead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--ink) 3%, rgba(20,30,40,0.86) 42%, rgba(20,30,40,0.58) 100%);
}
.phead h1 { font-size: var(--t-xxl); margin-block: 1.25rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--t-xs); color: var(--faint); }
.crumbs a { transition: color var(--d-fast) ease; }
.crumbs a:hover { color: var(--bone); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; color: var(--line); }
.crumbs li { display: flex; align-items: center; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line-soft); background: var(--ink-900); }
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.7fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 4vw, 3.75rem);
}
/* The footer sheds a column for every link group that is snoozed; the grid is
   built from the count that actually renders so no empty track is reserved. */
.foot__grid--4 { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.7fr)); }
.foot__grid--3 { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 0.8fr)); }
.foot__grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .foot__grid, .foot__grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .foot__grid, .foot__grid--3 { grid-template-columns: minmax(0, 1fr); } }
.foot__h {
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 1.15rem;
}
.foot__l a, .foot__l span { display: block; overflow-wrap: anywhere; font-size: var(--t-sm); color: var(--muted); padding-block: 0.3rem; transition: color var(--d-fast) ease; }
.foot__l a:hover { color: var(--bone); }
.foot__bar {
  border-top: 1px solid var(--line-soft);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--t-xs); color: var(--faint);
}
.foot__bar a:hover { color: var(--bone); }
.wordmark {
  font-family: var(--display); font-weight: 600;
  font-stretch: 118%; font-variation-settings: "wdth" 118, "wght" 600;
  font-size: clamp(2.2rem, 10vw, 9rem);
  line-height: 0.86; letter-spacing: 0.01em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  padding-block: clamp(0.25rem, 1vw, 0.9rem);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

/* ---------- Utility ---------- */
.on-bone { background: var(--panel-light); color: var(--charcoal); }
.on-bone { --fg: var(--charcoal); --muted: #4A5462; --faint: var(--gray-light); --line-soft: rgba(20,30,40,0.13); --line: rgba(20,30,40,0.22); }
.on-bone .display em { color: var(--clay-deep); }
.on-bone .panel__k { color: var(--sky-ink); }
.on-bone .panel .panel__k { color: var(--sky-deep); }
.on-bone .mkt__tag { color: var(--sky-ink); }
.on-bone .person__r { color: var(--sky-ink); }
.on-bone .link-u { background-image: linear-gradient(var(--sky-ink), var(--sky-ink)); }
.on-bone .prose a:not(.btn) { border-bottom-color: var(--sky-ink); }
.on-bone .btn { --btn-bg: var(--charcoal); --btn-fg: var(--white); }
.on-bone .btn--ghost { --btn-bg: transparent; --btn-fg: var(--charcoal); }
.on-bone .btn:hover { color: var(--white); }
.on-bone .panel { background: var(--white); border-color: rgba(20,30,40,0.10); }
.on-bone a.panel:hover { background: var(--white); border-color: var(--sky); }

.t-clay { color: var(--clay); }
.t-brass { color: var(--brass); }
.mt-1 { margin-top: 0.75rem; } .mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.25rem; } .mt-4 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1.5rem; } .mb-3 { margin-bottom: 2.25rem; }
.nowrap { white-space: nowrap; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .reveal-lines .ln > span { transform: none !important; }
  .hero__media img, .hero__media video { animation: none; transform: scale(1.02); }
  .marquee__track { animation: none; }
  .drawer { transition: opacity 120ms ease, visibility 0s; transform: none; opacity: 0; }
  .drawer[data-open="true"] { opacity: 1; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .drawer, .marquee, .scroll-cue, .cta { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Contact form confirmation ---------- */
.form-sent {
  margin: 0; padding: 1.25rem 1.5rem;
  border: 1px solid var(--line); border-left: 3px solid var(--sky);
  font-size: var(--t-md, 1.125rem); color: var(--fg);
}
.form-sent--err { border-left-color: #E5484D; }
.form-sent a { text-decoration: underline; }