/* =============================================================
   MKG Events: Design System
   One stylesheet, no build. Sections:
     0. Webfont (self-hosted Space Grotesk)
     1. Tokens (color, type, spacing, motion)
     2. Reset & base
     3. Typography
     4. Layout helpers
     5. Header / Nav
     6. Footer
     7. Buttons + bespoke link treatment
     8. Motion primitives (entrance + IO reveal)
     9. Sample-page-only styleguide blocks
   ============================================================= */


/* 0. WEBFONT --------------------------------------------------- */
/* Space Grotesk: a modern grotesque with a little character (the G, a, k).
   Self-hosted woff2, ~40KB total, swap so text paints immediately. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/space-grotesk-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/space-grotesk-700.woff2') format('woff2');
}


/* 1. TOKENS ---------------------------------------------------- */
:root {
  /* Palette: restrained, warm, editorial */
  --color-ink:        #0E0E0C;   /* deep near-black, warm */
  --color-ink-soft:   #1A1916;   /* lifted surface, sections */
  --color-ink-line:   rgba(245, 241, 234, 0.12);
  --color-paper:      #F5F1EA;   /* warm off-white */
  --color-paper-soft: #E8E2D6;
  --color-paper-mute: rgba(245, 241, 234, 0.62);
  --color-paper-dim:  rgba(245, 241, 234, 0.38);
  --color-accent:     #D4A24C;   /* warm amber/gold: pulled from logo chevron */
  --color-accent-deep:#B9883A;

  /* Type families: one modern grotesque (Space Grotesk) across display and
     body, the way a studio uses Neue Montreal. System grotesques fall back. */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Space Grotesk', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale: fluid, modular ratio ~1.25 */
  --type-display-xl: clamp(3rem, 4vw + 2rem, 7rem);
  --type-display-lg: clamp(2.25rem, 2.5vw + 1.5rem, 4.5rem);
  --type-display-md: clamp(1.875rem, 1.5vw + 1.25rem, 3rem);
  --type-h2:         clamp(1.5rem, 1vw + 1rem, 2.25rem);
  --type-h3:         1.375rem;
  --type-body-lg:    1.125rem;
  --type-body:       1rem;
  --type-body-sm:    0.9375rem;
  --type-micro:      0.75rem;

  /* Line heights */
  --leading-display: 1.04;
  --leading-tight:   1.18;
  --leading-snug:    1.35;
  --leading-body:    1.6;

  /* Letter-spacing (tuned for a grotesque: tight display, calmer caps) */
  --tracking-display: -0.025em;
  --tracking-tight:   -0.015em;
  --tracking-body:    -0.005em;
  --tracking-micro:   0.14em;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;

  /* Layout */
  --container-max: 1440px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Motion */
  --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  200ms;
  --dur-base:  400ms;
  --dur-slow:  800ms;
  --dur-hero:  1200ms;
}


/* 2. RESET & BASE ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-ink);
  color: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  background: var(--color-ink);
  color: var(--color-paper);
  overflow-x: hidden;
}

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

a { color: inherit; text-decoration: none; }

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

::selection { background: var(--color-accent); color: var(--color-ink); }

/* Reduced motion: global guard */
@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;
  }
}


/* 3. TYPOGRAPHY ------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--color-paper);
}

.display-xl { font-size: var(--type-display-xl); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.display-lg { font-size: var(--type-display-lg); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.display-md { font-size: var(--type-display-md); line-height: var(--leading-tight);   letter-spacing: var(--tracking-tight); }
.h2         { font-size: var(--type-h2);         line-height: var(--leading-tight);   letter-spacing: var(--tracking-tight); }
.h3         { font-size: var(--type-h3);         line-height: var(--leading-snug);    letter-spacing: var(--tracking-tight); }

.body-lg    { font-size: var(--type-body-lg); line-height: var(--leading-body); }
.body       { font-size: var(--type-body);    line-height: var(--leading-body); }
.body-sm    { font-size: var(--type-body-sm); line-height: var(--leading-body); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-paper-mute);
}

.lede {
  font-size: var(--type-body-lg);
  line-height: var(--leading-body);
  color: var(--color-paper-mute);
  max-width: 56ch;
}


/* 4. LAYOUT HELPERS -------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}
.section--tight { padding-top: var(--space-8); padding-bottom: var(--space-8); }

.rule {
  width: 100%;
  height: 1px;
  background: var(--color-ink-line);
  border: 0;
  margin: 0;
}

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


/* 5. HEADER / NAV ---------------------------------------------- */
/* The nav is scroll-aware: a faint top-gradient scrim is always present
   (so links stay readable over the hero), and a dark translucent fill plus
   subtle backdrop-blur fade in once the user has scrolled past the hero.
   The `.is-scrolled` class is toggled by an IntersectionObserver that
   watches the hero element on each page. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 6px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  background-color: transparent;
  background-image: linear-gradient(to bottom, rgba(14,14,12,0.45) 0%, rgba(14,14,12,0) 100%);
  transition: background-color var(--dur-slow) var(--ease-luxe),
              backdrop-filter var(--dur-slow) var(--ease-luxe),
              -webkit-backdrop-filter var(--dur-slow) var(--ease-luxe),
              border-color var(--dur-slow) var(--ease-luxe);
  border-bottom: 1px solid transparent;
}
.site-header > * { pointer-events: auto; }

.site-header.is-scrolled {
  background-color: rgba(14, 14, 12, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(245, 241, 234, 0.08);
}

/* Brand mark: uses the paper-on-transparent logo variant the client supplied,
   so the PNG rests directly on the nav with nothing behind it. The wrapper is
   just the clickable area; no background, no padding, no border-radius. */
.brand {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--dur-base) var(--ease-luxe);
}
.brand:hover { opacity: 0.78; }
.brand img {
  height: 84px;
  width: auto;
  display: block;
}
@media (max-width: 720px) {
  .brand img { height: 68px; }
}

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-7);
  margin: 0;
  padding: 0;
}
/* Text nav links only. The CTA is excluded so its own padding, font and colour
   are not overridden by these (more specific) base styles. */
.site-nav a:not(.nav-cta) {
  position: relative;
  display: inline-block;
  font-size: var(--type-body-sm);
  letter-spacing: 0.04em;
  padding: 4px 0;
  color: var(--color-paper);
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-luxe);
}

/* Primary CTA at the end of the nav. Visually a small ghost button so it
   reads as distinct from the text nav items. */
.site-nav__cta-item { margin-left: var(--space-3); }
/* Primary CTA: bracket corners. Two gold right-angle marks sit at the
   top-right and bottom-left only; nothing else is accented. Generous padding
   keeps the label well clear of the marks. On hover the two brackets grow and
   draw themselves into an almost-complete frame around the label. Transparent
   and sharp-cornered, in keeping with the editorial type. */
.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7.5px 15px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-paper);
  background: transparent;
  border: 0;
  transition: color var(--dur-base) var(--ease-luxe);
}
.nav-cta::before,
.nav-cta::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--color-accent);
  transition: width 0.5s var(--ease-luxe), height 0.5s var(--ease-luxe);
  pointer-events: none;
}
.nav-cta::before { top: 0; right: 0; border-left: 0; border-bottom: 0; }   /* top-right mark */
.nav-cta::after { bottom: 0; left: 0; border-right: 0; border-top: 0; }     /* bottom-left mark */
.nav-cta:hover, .nav-cta:focus-visible { color: var(--color-accent); }
.nav-cta:hover::before, .nav-cta:focus-visible::before,
.nav-cta:hover::after, .nav-cta:focus-visible::after {
  width: calc(100% - 5px);
  height: calc(100% - 5px);
}
.nav-cta .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-luxe);
}
.nav-cta:hover .arrow { transform: translateX(4px); }

/* Hide the nav CTA on narrow viewports to keep the bar uncluttered.
   The CTA is still reachable elsewhere on the page on mobile. */
@media (max-width: 880px) {
  .site-nav__cta-item { display: none; }
}

/* Bespoke link treatment: an amber hairline sweeps in from the left and a
   subtle uppercase tracking-shift suggests the link is "engaged". Used in the
   header, but also available anywhere with the .link-sweep utility. The
   .nav-cta is a button, not a text link, so we exclude it. */
.site-nav a:not(.nav-cta)::after,
.link-sweep::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  height: 1px;
  width: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-luxe);
}
.site-nav a:not(.nav-cta):hover::after,
.site-nav a:not(.nav-cta):focus-visible::after,
.link-sweep:hover::after,
.link-sweep:focus-visible::after { transform: scaleX(1); }

.link-sweep {
  position: relative;
  display: inline-block;
  padding: 2px 0;
}

@media (max-width: 720px) {
  .site-nav ul { gap: var(--space-4); }
  .site-nav a { font-size: var(--type-micro); letter-spacing: 0.08em; text-transform: uppercase; }
}
@media (max-width: 420px) {
  .site-header { padding-left: var(--space-4); padding-right: var(--space-4); }
  .site-nav ul { gap: 14px; }
  .site-nav a { letter-spacing: 0.04em; }
  .brand img { height: 60px; }
}

/* ---- Mobile nav: hamburger toggle + full-screen overlay menu ---- */
.nav-toggle { display: none; }
@media (max-width: 880px) {
  /* Hamburger button, sits above the overlay so it also closes it. */
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    z-index: 60;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--color-paper);
    transition: transform 0.35s var(--ease-luxe), opacity 0.2s var(--ease-luxe);
  }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Keep the logo above the overlay so it stays visible while the menu is open. */
  .brand { position: relative; z-index: 60; }

  /* The primary nav becomes a full-screen overlay menu. Solid, opaque fill so
     nothing shows through. */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease-luxe), visibility 0.35s var(--ease-luxe);
  }
  body.nav-open .site-nav { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  /* When the menu is open, drop the header's backdrop-filter. A backdrop-filter
     ancestor turns a fixed child into a header-relative box, which collapsed
     the overlay to the bar height once the page was scrolled. Killing it (with
     no transition, so there is no intermediate blur frame) keeps the overlay
     full-screen at any scroll position. */
  body.nav-open .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: center;
    gap: clamp(22px, 4vh, 40px);
  }
  /* Big, tappable links (override the small uppercase mobile link styles). */
  .site-nav a:not(.nav-cta) {
    font-size: clamp(1.5rem, 6vw, 2rem);
    letter-spacing: var(--tracking-tight);
    text-transform: none;
    padding: 6px 0;
  }
  /* Show the CTA inside the menu (it is hidden in the slim bar above). */
  .site-nav__cta-item { display: list-item; margin-left: 0; margin-top: clamp(8px, 2vh, 20px); }
  .site-nav .nav-cta { padding: 14px 30px; font-size: var(--type-body-sm); }
}


/* 6. FOOTER ---------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-ink-line);
  padding: var(--space-9) var(--gutter) var(--space-5);
  margin-top: var(--space-10);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1.6fr 1fr 1fr;
  max-width: var(--container-max);
  margin: 0 auto;
}
.site-footer__brand .brand img { height: 124px; }
@media (max-width: 720px) {
  .site-footer__brand .brand img { height: 92px; }
}
.site-footer__brand p {
  margin-top: var(--space-5);
  max-width: 32ch;
  color: var(--color-paper-mute);
  font-size: var(--type-body-sm);
}
.site-footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-micro);
  color: var(--color-paper-mute);
  margin: 0 0 var(--space-5);
  font-weight: 500;
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li + li { margin-top: var(--space-3); }
.site-footer__col a { font-size: var(--type-body-sm); }

.site-footer__bottom {
  border-top: 1px solid var(--color-ink-line);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--type-micro);
  color: var(--color-paper-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-footer__locations { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.site-footer__locations span { color: var(--color-paper-mute); }

@media (max-width: 880px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}


/* 7. BUTTONS --------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-paper);
  border: 1px solid var(--color-paper);
  transition: background-color var(--dur-base) var(--ease-luxe),
              color var(--dur-base) var(--ease-luxe),
              border-color var(--dur-base) var(--ease-luxe),
              padding var(--dur-base) var(--ease-luxe);
}
.btn:hover, .btn:focus-visible {
  background: var(--color-paper);
  color: var(--color-ink);
}
.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-luxe);
}
.btn:hover .arrow { transform: translateX(6px); }

.btn--accent { color: var(--color-accent); border-color: var(--color-accent); }
.btn--accent:hover, .btn--accent:focus-visible {
  background: var(--color-accent);
  color: var(--color-ink);
  border-color: var(--color-accent);
}


/* 8. MOTION PRIMITIVES ----------------------------------------- */

/* Hero/page-load entrance: pure CSS, runs once on paint */
.rise {
  opacity: 0;
  transform: translateY(0.7em);
  animation: rise var(--dur-hero) var(--ease-luxe) forwards;
}
.rise--d1 { animation-delay: 120ms; }
.rise--d2 { animation-delay: 280ms; }
.rise--d3 { animation-delay: 440ms; }
.rise--d4 { animation-delay: 600ms; }
.rise--d5 { animation-delay: 760ms; }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* IntersectionObserver-driven reveal: JS adds .is-in when in view */
.io-reveal {
  opacity: 0;
  transform: translateY(0.7em);
  transition: opacity var(--dur-slow) var(--ease-luxe),
              transform var(--dur-slow) var(--ease-luxe);
  will-change: opacity, transform;
}
.io-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.io-reveal--d1 { transition-delay: 80ms;  }
.io-reveal--d2 { transition-delay: 200ms; }
.io-reveal--d3 { transition-delay: 320ms; }


/* 8b. MASKED LINE REVEAL --------------------------------------- */
/* Headings with [data-lines] get split (in JS) into .ln > .ln__i. Each line
   slides up from behind a clip mask, staggered. The .is-in class (added by the
   reveal observer) triggers it. Until JS runs, the heading shows normally. */
.lines { display: block; }
.lines .ln { display: block; overflow: hidden; padding-bottom: 0.04em; }
.lines .ln__i {
  display: block;
  transform: translateY(115%);
  transition: transform 1s var(--ease-luxe);
  transition-delay: calc(var(--ln, 0) * 90ms);
  will-change: transform;
}
.lines.is-in .ln__i { transform: translateY(0); }

/* Media reveal: a clip "wipe" plus a slow scale settle, applied to the INNER
   image, never to the observed element. A clip-path that collapses an element
   to zero area also zeroes its IntersectionObserver area, which deadlocks the
   reveal: the element can never be seen, so .is-in is never added, so the clip
   never opens. The observed .reveal-media element keeps full geometry and
   reveals through opacity via its paired .io-reveal class. */
.reveal-media { overflow: hidden; }
.reveal-media img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.05);
  transition: clip-path 1.15s var(--ease-luxe), transform 1.5s var(--ease-luxe);
  will-change: clip-path, transform;
}
.reveal-media.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* Stagger helper for grids: children rise with incremental delay once the
   parent gains .is-in. Uses --i set inline per child. */
.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-luxe), transform var(--dur-slow) var(--ease-luxe);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.stagger.is-in > * { opacity: 1; transform: translateY(0); }


/* 8c. SCROLL-DRIVEN ENHANCEMENT (native, progressive) ----------
   Where the browser supports scroll-driven timelines, we add parallax and
   scrubbed motion that no JS could match for smoothness. Everything here is
   additive: unsupported browsers simply render the static layout, and reduced
   motion opts out entirely. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* Media drifts slower than the page for depth. Applied to an inner element
       so the container can keep overflow:hidden. */
    .parallax {
      animation: parallaxDrift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes parallaxDrift {
      from { transform: translateY(-6%); }
      to   { transform: translateY(6%); }
    }

    /* Hero media: gentle zoom-out as the hero scrolls away. */
    .hero__videos, .page-hero__video {
      animation: heroFloat linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes heroFloat {
      from { transform: scale(1); filter: none; }
      to   { transform: scale(1.12); filter: brightness(0.7); }
    }

    /* Big section headings get a subtle reveal scrub even on re-entry. */
    .scrub-up {
      animation: scrubUp linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes scrubUp {
      from { opacity: 0; transform: translateY(48px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}


/* 9. HOME HERO ------------------------------------------------- */
.hero {
  position: relative;
  width: 100vw;
  /* Use 100svh on supporting browsers so mobile address-bar collapse doesn't
     create a jumpy resize. Fall back to dvh, then plain vh. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-ink);
}

.hero__videos {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-luxe);
  background: var(--color-ink);
  pointer-events: none;
}
.hero__video.is-active { opacity: 1; }

/* Scrim: top + bottom + faint centre vignette so overlay text stays
   legible across every video frame. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(14,14,12,0.55) 0%,
      rgba(14,14,12,0) 18%,
      rgba(14,14,12,0) 62%,
      rgba(14,14,12,0.55) 100%),
    radial-gradient(ellipse 70% 50% at center,
      rgba(14,14,12,0.28) 0%,
      rgba(14,14,12,0) 70%);
}

.hero__zones {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.hero__zone {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 var(--space-4);
  text-align: center;
  color: var(--color-paper);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* The entire column is the hit-target. */
}
.hero__zone-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.5vw + 1rem, 2.75rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  opacity: 0.92;
  transition: opacity var(--dur-base) var(--ease-luxe),
              letter-spacing var(--dur-base) var(--ease-luxe);
  text-shadow: 0 2px 18px rgba(14,14,12,0.55);
}
.hero__zone-label::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-accent);
  margin: 18px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-luxe) 60ms;
}
.hero__zone:hover .hero__zone-label,
.hero__zone:focus-visible .hero__zone-label {
  opacity: 1;
  letter-spacing: 0.005em;
}
.hero__zone:hover .hero__zone-label::after,
.hero__zone:focus-visible .hero__zone-label::after {
  transform: scaleX(1);
}

/* Partial vertical dividers: a slender band centred on the labels rather
   than full-height lines. Gives the hero a framing element without the
   visual heaviness of edge-to-edge rules. */
.hero__divider {
  position: absolute;
  top: 30%;
  bottom: 30%;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(245,241,234,0) 0%,
    rgba(245,241,234,0.22) 18%,
    rgba(245,241,234,0.22) 82%,
    rgba(245,241,234,0) 100%);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-luxe);
}
.hero__divider--1 { left: 25%; }
.hero__divider--2 { left: 50%; }
.hero__divider--3 { left: 75%; }

/* (Home hero overlay styles live in section 9d, below the home below-fold.) */

/* ---- Hero mobile layout ----
   Four stacked bands centred vertically on the screen, framed by short
   horizontal hairlines so the structure mirrors the desktop's partial
   vertical dividers. The video shows above and below. */
@media (max-width: 720px) {
  .hero__zones {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    top: 22vh; top: 22dvh;
    bottom: auto;
    height: 56vh; height: 56dvh;
  }
  .hero__zone {
    justify-content: center;
    padding: 0 var(--space-5);
    position: relative;
  }
  .hero__zone + .hero__zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 38vw;
    height: 1px;
    background: rgba(245, 241, 234, 0.18);
  }
  .hero__zone-label {
    opacity: 0.95;
    font-size: clamp(1.5rem, 4vw + 1rem, 2rem);
  }
  .hero__zone-label::after {
    transform: scaleX(1);
    margin-top: 10px;
  }
  .hero__divider { display: none; }
}

/* Hero scroll cue (mirrors the page-hero one). The hero is now followed by
   real content on home, so we offer the same visual invitation to scroll. */
.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-paper-mute);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  pointer-events: none;
}
.hero__scroll-cue .line {
  width: 1px;
  height: 36px;
  background: var(--color-paper);
  opacity: 0.55;
  transform-origin: top;
  animation: scrollPulse 2.6s var(--ease-soft) infinite;
}
@media (max-width: 720px) {
  .hero__scroll-cue { bottom: var(--space-4); }
  .hero__scroll-cue .line { height: 24px; }
}

/* (Home no longer hides the nav brand mark: the small mark in the nav
   is the persistent Home link, and the centred overlay logo lives below it.) */

/* Reduced-motion: kill the crossfade transitions and don't autoplay. The
   poster image becomes the hero. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { transition: none; }
}


/* 9b. HOME BELOW-FOLD ------------------------------------------ */
/* Sections beneath the home hero. Structurally distinct from the
   page-hero + case-list pattern used on Our Work, so the home is
   not a clone of an interior page. */

/* Asymmetric brand statement: eyebrow + headline left, supporting
   paragraph offset to the right column. */
.home-statement {
  padding: clamp(96px, 14vh, 200px) var(--gutter) clamp(96px, 14vh, 200px) clamp(40px, 8vw, 170px);
  border-top: 1px solid var(--color-ink-line);
}
.home-statement__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: start;
}
.home-statement__lhs { display: flex; flex-direction: column; gap: var(--space-5); }
.home-statement__title {
  max-width: 18ch;
  margin: 0;
}
.home-statement__body {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.5rem);
  line-height: 1.45;
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper-mute);
  max-width: 36ch;
  padding-top: clamp(0px, 4vw, 80px);
}
.home-statement__body strong {
  font-weight: 500;
  color: var(--color-paper);
}
@media (max-width: 880px) {
  .home-statement__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .home-statement__body { max-width: none; padding-top: 0; }
}

/* Selected Work feature spread: one large card + two stacked smaller
   cards on the right. Each card overlays meta on a poster image with a
   slow zoom on hover. Different from Our Work's vertical case-list. */
.home-featured {
  padding: clamp(64px, 8vh, 128px) 0 clamp(96px, 12vh, 192px);
}
.home-featured__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.home-featured__head h2 { max-width: 14ch; }

.home-featured__grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-5);
}
.home-featured__card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-ink-soft);
  color: var(--color-paper);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-luxe);
}
.home-featured__card--large {
  grid-row: 1 / span 2;
  min-height: 480px;
}
.home-featured__card--small { min-height: 232px; }
.home-featured__card:hover { transform: translateY(-4px); }

.home-featured__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-hero) var(--ease-luxe),
              filter var(--dur-base) var(--ease-luxe);
}
.home-featured__card:hover img {
  transform: scale(1.045);
}

.home-featured__card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(14,14,12,0.78) 0%,
    rgba(14,14,12,0.18) 55%,
    rgba(14,14,12,0) 100%);
  pointer-events: none;
}
.home-featured__card-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(20px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.home-featured__card-meta .eyebrow { color: var(--color-paper); opacity: 0.85; }
.home-featured__card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1vw + 1rem, 2rem);
  line-height: 1.18;
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
  margin: 0;
}
.home-featured__card--large .home-featured__card-title {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.5rem);
}

/* Amber arrow that appears on hover, bottom-right of each card */
.home-featured__card-cue {
  position: absolute;
  top: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  width: 32px;
  height: 32px;
  border: 1px solid rgba(245, 241, 234, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-paper);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity var(--dur-base) var(--ease-luxe),
              transform var(--dur-base) var(--ease-luxe),
              background-color var(--dur-base) var(--ease-luxe),
              border-color var(--dur-base) var(--ease-luxe),
              color var(--dur-base) var(--ease-luxe);
}
.home-featured__card:hover .home-featured__card-cue {
  opacity: 1;
  transform: translate(0, 0);
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
}

.home-featured__foot {
  margin-top: var(--space-7);
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 880px) {
  .home-featured__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .home-featured__card--large { grid-row: auto; min-height: 360px; }
  .home-featured__card--small { min-height: 280px; }
  .home-featured__foot { justify-content: flex-start; }
}


/* 9d. HOME HERO OVERLAY (cinematic headline) ------------------- */
.hero__overlay {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(96px, 16vh, 200px);
  pointer-events: none;
}
/* Legibility without dimming the footage: a feathered vignette confined to the
   lower band where the text sits (full-bleed, the overlay box is container
   width), plus a tight dark halo on the glyphs themselves. The upper half of
   the frame is left completely untouched. */
.hero__overlay::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100vw;
  height: 72%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(8,8,6,0.72) 0%,
    rgba(8,8,6,0.5) 18%,
    rgba(8,8,6,0.26) 40%,
    rgba(8,8,6,0.08) 64%,
    rgba(8,8,6,0) 100%);
}
.hero__overlay-eyebrow {
  color: var(--color-paper);
  opacity: 0.7;
  margin-bottom: var(--space-5);
  text-shadow: 0 1px 14px rgba(8,8,6,0.7);
}
.hero__overlay h1 {
  font-size: clamp(2.75rem, 6vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 16ch;
  text-shadow:
    0 1px 3px rgba(8,8,6,0.62),
    0 2px 24px rgba(8,8,6,0.5),
    0 0 72px rgba(8,8,6,0.4);
}
.hero__overlay-subline {
  margin-top: var(--space-6);
  max-width: 46ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 0.8vw + 0.9rem, 1.5rem);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper);
  opacity: 0.92;
  text-shadow: 0 1px 18px rgba(14,14,12,0.55);
}
@media (max-width: 720px) {
  .hero__overlay { justify-content: center; padding-bottom: 0; }
}


/* 9e. STATS BAND (count-up) ------------------------------------ */
.stats {
  padding: clamp(80px, 13vh, 170px) 0;
  border-top: 1px solid var(--color-ink-line);
  background: var(--color-ink-soft);
  overflow: hidden;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6) clamp(24px, 3vw, 64px);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.stat-fig { display: flex; flex-direction: column; gap: var(--space-3); }
.stat-fig__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 5vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-paper);
  font-variant-numeric: tabular-nums;
}
.stat-fig__value .unit { color: var(--color-accent); }
.stat-fig__caption {
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  letter-spacing: 0.02em;
  color: var(--color-paper-mute);
  max-width: 22ch;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-ink-line);
}
@media (max-width: 880px) { .stats__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); } }
@media (max-width: 480px) { .stats__grid { grid-template-columns: 1fr; } }


/* 9f. WORK TILE MEDIA UPGRADE ---------------------------------- */
/* Each selected-work tile carries a poster behind a dark scrim. On hover the
   image lifts and zooms, the name slides, and an amber rule draws. */
/* Bento grid: a large feature tile plus varied wide/small tiles. */
.work-strip__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(170px, 15vw, 250px);
  grid-auto-flow: dense;
}
.work-tile--lg   { grid-column: span 2; grid-row: span 2; }
.work-tile--wide { grid-column: span 2; grid-row: span 1; }
.work-tile--sm   { grid-column: span 1; grid-row: span 1; }
.work-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  padding: clamp(20px, 2vw, 36px);
  border: 1px solid var(--color-ink-line);
  justify-content: flex-end;
  color: var(--color-paper);
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-luxe);
}
.work-tile:hover { transform: translateY(-4px); }
.work-tile__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--color-ink-soft);
}
.work-tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-luxe), opacity var(--dur-base) var(--ease-luxe);
}
.work-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(14,14,12,0.9) 0%, rgba(14,14,12,0.35) 50%, rgba(14,14,12,0.15) 100%);
  transition: background var(--dur-base) var(--ease-luxe);
}
.work-tile:hover { background: transparent; }
.work-tile:hover .work-tile__media img { transform: scale(1.09); opacity: 0.72; }
.work-tile__name { position: relative; }
.work-tile__name::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  margin-top: var(--space-3);
  transition: width var(--dur-base) var(--ease-luxe);
}
.work-tile:hover .work-tile__name::after { width: 48px; }
.work-tile__outcome { position: relative; }

/* Distinctive bento entrance: each tile wipes up from a clip mask in a
   staggered cascade (instead of a plain fade-in). The grid carries .stagger and
   is the observed element; it is never clipped, so there is no observer
   deadlock. Only clip-path is set here, never transform, so the hover lift and
   the generic stagger rise both stay intact. */
.work-strip__grid.stagger > .work-tile {
  clip-path: inset(100% 0 0 0);
  transition:
    clip-path 0.95s var(--ease-luxe),
    opacity 0.7s var(--ease-luxe),
    transform 0.8s var(--ease-luxe);
  transition-delay: calc(var(--i, 0) * 95ms);
}
.work-strip__grid.stagger.is-in > .work-tile {
  clip-path: inset(0 0 0 0);
}

@media (max-width: 880px) {
  .work-strip__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(180px, 30vw, 240px); }
  .work-tile--lg, .work-tile--wide { grid-column: span 2; grid-row: span 1; }
  .work-tile--sm { grid-column: span 1; }
}
@media (max-width: 520px) {
  .work-strip__grid { grid-template-columns: 1fr; }
  .work-tile--lg, .work-tile--wide, .work-tile--sm { grid-column: span 1; grid-row: span 1; }
}


/* 9k. DISCIPLINES FLOW (Home) ----------------------------------
   A pinned scrollytelling sequence. A sticky index rail on the left tracks
   the active discipline; on the right, large numbered panels advance, the
   incoming one rising from below as the outgoing lifts away. JS (module 10)
   lerp-drives it. Mobile / reduced-motion: a clean numbered list. */
.disc { position: relative; background: var(--color-ink); }
.disc__pin {
  position: sticky;
  top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(40px, 6vw, 130px);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  isolation: isolate;
}
.disc__rail-head .eyebrow { color: var(--color-paper-mute); }
.disc__rail-head h2 { margin-top: var(--space-3); max-width: 12ch; }
.disc__list { list-style: none; margin: clamp(28px, 4vh, 56px) 0 0; padding: 0; }
.disc__list li {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-3) 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.375rem);
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper-dim);
  transition: color var(--dur-base) var(--ease-luxe);
}
.disc__list li .n {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  color: var(--color-paper-dim);
  transition: color var(--dur-base) var(--ease-luxe);
  min-width: 2ch;
}
.disc__list li.is-active { color: var(--color-paper); }
.disc__list li.is-active .n { color: var(--color-accent); }

.disc__stage { position: relative; height: clamp(360px, 52vh, 560px); }
.disc__panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
  /* Only the active panel is shown (JS toggles opacity/transform discretely);
     these transitions turn each hand-off into a slow, gentle cross-dissolve
     instead of two panels scrubbing over each other. Longer, softer timing so
     the change reads as a fade, not a jump. */
  transition: opacity 0.85s var(--ease-luxe), transform 1.1s var(--ease-luxe);
}
.disc__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(4rem, 9vw, 9rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--color-accent);
  opacity: 0.25;
  margin-bottom: var(--space-5);
}
.disc__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3vw + 0.75rem, 3.75rem);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  color: var(--color-paper);
  margin: 0;
  max-width: 16ch;
}
.disc__desc {
  margin-top: var(--space-5);
  font-size: var(--type-body-lg);
  line-height: 1.5;
  color: var(--color-paper-mute);
  max-width: 44ch;
}
.disc__progress {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: clamp(28px, 5vh, 56px);
  height: 1px; background: rgba(245,241,234,0.14);
  max-width: var(--container-max);
  margin: 0 auto;
}
.disc__progress::after {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: var(--disc-progress, 0%); background: var(--color-accent);
  transition: width 120ms linear;
}

/* Mobile / reduced-motion fallback: a plain numbered list. */
.disc__fallback { display: none; }
@media (max-width: 880px) {
  .disc { height: auto !important; }
  .disc__pin { display: none; }
  .disc__fallback { display: block; padding: clamp(64px, 9vh, 120px) 0; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 881px) {
  .disc { height: auto !important; }
  .disc__pin { display: none; }
  .disc__fallback { display: block; padding: clamp(72px, 10vh, 140px) 0; }
}


/* 9g. CLIENT MARQUEE ------------------------------------------- */
/* A slow, continuous logo marquee. Two identical tracks scroll left; the
   second seamlessly follows the first. Pauses on hover. The band background
   is pure black to match the supplied logo backgrounds, so each logo's own
   black backplate blends in and no boxes are visible. */
.marquee {
  position: relative;
  overflow: hidden;
  background: transparent; /* sits on the section bg (#0E0E0E), one continuous tone */
  padding: clamp(36px, 6vh, 72px) 0;
}
/* Edge fade via overlay gradients, not mask-image. iOS Safari drops the
   off-screen logos when a mask sits over an animated transform, which made the
   strip look broken on phones (logos vanishing). Overlays leave it alone. */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: clamp(36px, 9%, 120px);
  z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, #0E0E0E, rgba(14,14,14,0)); }
.marquee::after { right: 0; background: linear-gradient(to left, #0E0E0E, rgba(14,14,14,0)); }
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  /* No flex gap: spacing is per-item margin so the two halves are exactly
     equal width and translateX(-50%) loops with no jump or stutter. */
  animation: marquee 18s linear infinite;
  will-change: transform;
}
@media (max-width: 880px) {
  .marquee__track { animation-duration: 12s; }
}
/* No hover-pause: the marquee runs continuously so it never appears to stop
   and start as the cursor passes over it. */
.marquee__item {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: clamp(48px, 6vw, 104px);
}
.marquee__item img {
  height: clamp(34px, 3.4vw, 52px);
  width: auto;
  display: block;
  opacity: 0.78;
  transition: opacity var(--dur-base) var(--ease-luxe);
}
.marquee__item:hover img { opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; gap: clamp(32px, 4vw, 64px); }
}


/* 9j. PULL QUOTE (Our Work) ------------------------------------ */
.quote {
  padding: clamp(96px, 16vh, 200px) 0;
  border-top: 1px solid var(--color-ink-line);
  background: var(--color-ink-soft);
}
.quote__inner { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.quote__mark {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.5;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-5);
}
.quote__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw + 0.5rem, 3.25rem);
  line-height: 1.18;
  letter-spacing: var(--tracking-display);
  color: var(--color-paper);
  margin: 0;
}
.quote__attr {
  margin-top: var(--space-7);
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-paper-mute);
}


/* 9i. CASE REEL (Our Work) -------------------------------------
   Six frames of selected work, advanced by scroll through a pinned, quantised
   detent sequence. Move, lock, hold. The image fills the right half of the
   screen, top to bottom. On the lock a full-height gold line sweeps fast from
   left to right across the WHOLE frame, covering everything and uncovering the
   composition as it passes. The client name is revealed large, holds for a
   beat, then shrinks fast; the name and its paragraph sit vertically centred
   on the left, with the paragraph rising up from behind a mask. Only transform
   and opacity move. The live mechanism is scoped to .reel--live; without it
   (no JS, small screens, reduced motion) the frames fall back to a clean
   stacked layout. */

.reel { position: relative; background: var(--color-ink); }

/* ---- Base (no JS / mobile / reduced motion): stacked, scrolling ---- */
.reel__pin { position: static; }
.reel__stage { position: static; display: block; }
.reel__frame {
  position: relative;
  display: block;
  padding: clamp(44px, 7vh, 88px) var(--gutter);
  background: var(--color-ink);
}
.reel__media {
  position: relative;
  width: 100%;
  height: 52vh; min-height: 320px;
  overflow: hidden;
  border-radius: 2px;
}
.reel__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) brightness(0.8) contrast(1.04);
}
.reel__grade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,9,0.24) 0%, rgba(8,8,7,0.62) 100%);
}
.reel__sweep { display: none; }

.reel__caption { margin-top: clamp(24px, 4vh, 48px); }
.reel__client {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 7.5vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
  color: var(--color-paper);
}
.reel__lower-mask { margin-top: clamp(20px, 3vh, 34px); }
.reel__sector {
  display: block;
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: clamp(12px, 1.6vh, 18px);
}
.reel__copy {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  line-height: 1.55;
  color: var(--color-paper-mute);
}
/* Stat row: quiet spec-sheet evidence beneath the paragraph. Two short labels,
   small and flat, each marked with a thin accent rule. Left-aligned with the
   copy. Wraps to a second line if a label runs long. */
.reel__stats {
  list-style: none;
  margin: clamp(20px, 2.8vh, 34px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vh, 16px) clamp(20px, 2.4vw, 40px);
}
.reel__stat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-paper-mute);
}
.reel__stat::before {
  content: "";
  flex: none;
  width: 16px;
  height: 2px;
  background: var(--color-accent);
}
.reel__rail { display: none; }

/* ================= Live mechanism (JS, desktop, motion) ================= */
.reel--live .reel__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}
.reel--live .reel__stage { position: absolute; inset: 0; }
.reel--live .reel__frame {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  background: var(--color-ink);
  visibility: hidden;
  z-index: 1;
}
.reel--live .reel__frame.is-active { visibility: visible; z-index: 2; }

/* Image: right half, full height, soft left edge into the type side. */
.reel--live .reel__media {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 50vw;
  height: auto;
  border-radius: 0;
  z-index: 1;
}
.reel--live .reel__media img { filter: grayscale(0.34) brightness(0.74) contrast(1.06); }
.reel--live .reel__grade {
  background:
    linear-gradient(90deg, var(--color-ink) 0%, rgba(14,14,12,0) 26%),
    linear-gradient(270deg, rgba(8,8,7,0.66) 0%, rgba(8,8,7,0) 22%),
    linear-gradient(180deg, rgba(10,10,9,0.16) 0%, rgba(8,8,7,0.5) 100%),
    radial-gradient(120% 90% at 64% 28%, rgba(212,162,76,0.1), rgba(10,10,9,0) 60%);
}

/* Type: left side, name and paragraph as one block, vertically centred. */
.reel--live .reel__caption {
  position: absolute;
  left: var(--gutter);
  top: clamp(88px, 11vh, 120px);
  bottom: clamp(40px, 6vh, 84px);
  width: clamp(300px, 47vw, 700px);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 4;
}
/* Large on arrival, holds, then a fast shrink. */
.reel--live .reel__client {
  font-size: clamp(2.75rem, 5.5vw, 5rem);
  transform-origin: 0% 0%;
  transform: scale(1.77);
}
.reel--live .reel__frame.is-active .reel__client {
  transform: scale(1);
  transition: transform 470ms cubic-bezier(0.2, 0.9, 0.22, 1);
  transition-delay: 780ms;   /* linger through the sweep, then shrink */
}

/* The paragraph rises up from behind a mask as the name settles. */
.reel--live .reel__lower-mask { overflow: hidden; margin-top: clamp(20px, 3vh, 36px); }
.reel--live .reel__lower {
  transform: translateY(115%);
  opacity: 0;
}
.reel--live .reel__frame.is-active .reel__lower {
  transform: translateY(0);
  opacity: 1;
  transition: transform 620ms var(--ease-luxe), opacity 400ms linear;
  transition-delay: 900ms;
}
.reel--live .reel__copy { max-width: 56ch; }

/* The full-height gold blade sits ABOVE everything: it covers the whole frame
   and uncovers the entire composition as it sweeps fast from left to right,
   then rests off-screen. */
.reel--live .reel__sweep {
  display: block;
  position: absolute; inset: 0; z-index: 5;
  background: var(--color-ink);
  transform: translateX(0);
}
.reel--live .reel__sweep::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--color-accent);
  box-shadow: 0 0 30px 4px rgba(212,162,76,0.6);
}
.reel--live .reel__frame.is-active .reel__sweep {
  transform: translateX(101%);
  transition: transform 560ms cubic-bezier(0.16, 0.86, 0.2, 1);
}

/* The roster rail, down the right edge over the image, active client in gold. */
.reel--live .reel__rail {
  display: flex;
  position: absolute; z-index: 6;
  right: var(--gutter);
  top: 50%;
  height: clamp(232px, 46vh, 392px);
  transform: translateY(-50%);
  align-items: stretch;
  gap: clamp(14px, 1.4vw, 22px);
  pointer-events: none;
}
.reel--live .reel__rail-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: right;
}
.reel--live .reel__rail-item {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-paper-dim);
  white-space: nowrap;
  text-shadow: 0 1px 14px rgba(0,0,0,0.7);
  transition: color 240ms var(--ease-luxe);
}
.reel--live .reel__rail-item.is-active { color: var(--color-accent); }
.reel--live .reel__rail-track {
  position: relative;
  width: 2px;
  background: rgba(245, 241, 234, 0.22);
  border-radius: 2px;
  overflow: hidden;
}
.reel--live .reel__rail-fill {
  position: absolute; left: 0; top: 0; right: 0; height: 100%;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: 50% 0%;
  transition: transform 320ms cubic-bezier(0.16, 0.9, 0.2, 1);
}

/* Stacked fallback tuning. */
@media (max-width: 880px) {
  .reel__media { height: 46vh; min-height: 300px; }
  .reel__client { font-size: clamp(2.25rem, 11vw, 4rem); }
  .reel__copy { max-width: none; }
}

/* 9h. LEADERSHIP CARDS (interactive) --------------------------- */
.leadership__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
/* Leadership is a deliberate pair: two equal, substantial cards, not a grid
   with a card missing. A little more air between them than the default. */
.leadership__grid--duo { gap: clamp(28px, 3.5vw, 64px); }
.leadership__note {
  margin-top: clamp(30px, 4.5vh, 56px);
  text-align: center;
  color: var(--color-paper-mute);
  font-size: var(--type-body-sm);
  letter-spacing: var(--tracking-body);
}
.leader {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(260px, 24vw, 340px);
  padding: clamp(28px, 2.4vw, 44px);
  border: 1px solid var(--color-ink-line);
  background: var(--color-ink-soft);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-luxe), border-color var(--dur-base) var(--ease-luxe);
}
.leader:hover { transform: translateY(-6px); border-color: rgba(245,241,234,0.3); }
/* Monogram watermark sits large and faint behind the content. */
.leader__monogram {
  position: absolute;
  top: clamp(-10px, -0.5vw, 0px);
  right: clamp(8px, 1vw, 20px);
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(6rem, 11vw, 11rem);
  line-height: 1;
  color: var(--color-paper);
  opacity: 0.05;
  transition: opacity var(--dur-base) var(--ease-luxe), color var(--dur-base) var(--ease-luxe);
  pointer-events: none;
}
.leader:hover .leader__monogram { opacity: 0.1; color: var(--color-accent); }
.leader__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper);
  margin: 0;
}
.leader__role {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-accent);
}
/* Bios are always visible (the cards size to their content). The hover lift
   and monogram accent stay as the interactive flourish. */
.leader__bio {
  margin: var(--space-4) 0 0;
  color: var(--color-paper-mute);
  font-size: var(--type-body-sm);
  line-height: 1.55;
  max-width: 46ch;
}
@media (max-width: 760px) { .leadership__grid { grid-template-columns: 1fr; } }


/* Placeholder leaders read quieter until real names are supplied. */
.leader--tba { background: transparent; }
.leader--tba .leader__name { color: var(--color-paper-mute); }
.leader--tba .leader__monogram { opacity: 0.07; }


/* Magnetic targets ease back smoothly when released. */
[data-magnetic] { transition: transform var(--dur-base) var(--ease-luxe); }


/* 10. INTERIOR PAGE HERO --------------------------------------- */
.page-hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-ink);
}
.page-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  background: var(--color-ink);
}
/* Loop-seam cross-dissolve: two stacked clips, JS toggles .is-active and the
   opacity transition does the fade. Scoped to --xfade so single-video heroes on
   other pages keep their default full opacity. */
.page-hero--xfade .page-hero__video {
  opacity: 0;
  /* Slow, even dissolve. ease-in-out (not the site's ease-out) so the blend
     does not rush at the start. Duration must match CF in main.js. */
  transition: opacity 2.6s ease-in-out;
}
.page-hero--xfade .page-hero__video.is-active { opacity: 1; }
.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Two layers. The first is a left-anchored wash that sits behind the
     left-aligned, vertically centred copy and feathers out to nothing well
     before the right of the frame, so the footage stays bright where the eye
     goes. The second is the original top and bottom edge gradient. The video
     itself is never globally dimmed. */
  background:
    linear-gradient(to right,
      rgba(10,10,9,0.62) 0%,
      rgba(10,10,9,0.42) 30%,
      rgba(10,10,9,0.14) 55%,
      rgba(10,10,9,0) 75%),
    linear-gradient(to bottom,
      rgba(14,14,12,0.55) 0%,
      rgba(14,14,12,0.1) 22%,
      rgba(14,14,12,0.0) 50%,
      rgba(14,14,12,0.45) 88%,
      rgba(14,14,12,0.7) 100%);
}
.page-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-hero__content .eyebrow {
  color: var(--color-paper-mute);
  text-shadow: 0 1px 12px rgba(8,8,6,0.7);
}
.page-hero__content h1 {
  margin-top: var(--space-5);
  max-width: 14ch;
  text-shadow:
    0 1px 3px rgba(8,8,6,0.64),
    0 2px 24px rgba(8,8,6,0.52),
    0 0 72px rgba(8,8,6,0.42);
}
.page-hero__lede {
  margin-top: var(--space-6);
  max-width: 48ch;
  font-size: var(--type-body-lg);
  color: var(--color-paper);
  text-shadow:
    0 1px 2px rgba(8,8,6,0.62),
    0 2px 18px rgba(8,8,6,0.5);
}

/* Scroll cue lives in the bottom-right corner, clear of the left-aligned
   hero headline and subline so it never collides with copy on any page. */
.page-hero__scroll-cue {
  position: absolute;
  bottom: var(--space-6);
  right: var(--gutter);
  left: auto;
  transform: none;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-paper-mute);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}
/* About hero: centre the scroll cue along the bottom instead of bottom-right. */
.page-hero--xfade .page-hero__scroll-cue {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.page-hero__scroll-cue .line {
  width: 1px;
  height: 36px;
  background: var(--color-paper);
  opacity: 0.55;
  transform-origin: top;
  animation: scrollPulse 2.6s var(--ease-soft) infinite;
}
@keyframes scrollPulse {
  0%   { transform: scaleY(0.2); opacity: 0.2; }
  35%  { transform: scaleY(1);   opacity: 0.7; }
  100% { transform: scaleY(0.2); opacity: 0.0; transform-origin: bottom; }
}

/* On small screens, drop the cue entirely. It is decorative, and on a narrow
   viewport the centred hero copy can run close to the corners. */
@media (max-width: 600px) {
  .page-hero__scroll-cue { display: none; }
}


/* 11. CASE STUDIES (typography-led) ---------------------------- */
.intro {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-10) 0 var(--space-9);
}
.intro .lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h2);
  line-height: 1.4;
  color: var(--color-paper);
  max-width: none;
}

.case-list { padding-bottom: var(--space-10); }

.case {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding: var(--space-9) 0;
  border-top: 1px solid var(--color-ink-line);
  max-width: 820px;
  margin: 0 auto;
}
.case:first-child { border-top: 0; padding-top: var(--space-7); }

.case__meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}
.case__meta .dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 50%;
}

.case__title {
  margin-top: var(--space-3);
  max-width: 22ch;
}
.case__lede {
  margin-top: var(--space-5);
  font-size: var(--type-body-lg);
  color: var(--color-paper-mute);
  max-width: 60ch;
}
.case__outcome {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-ink-line);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-4);
  align-items: baseline;
}
.case__outcome dt {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-paper-mute);
  margin: 0;
}
.case__outcome dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-h3);
  line-height: 1.35;
  color: var(--color-paper);
}

@media (max-width: 600px) {
  .case__outcome { grid-template-columns: 1fr; gap: var(--space-2); }
  .case__outcome dd { font-size: var(--type-body-lg); }
}


/* 12. SIGNATURE (sticky/pinned moment) ------------------------- */
.signature {
  padding: var(--space-11) 0;
  border-top: 1px solid var(--color-ink-line);
  border-bottom: 1px solid var(--color-ink-line);
  background: var(--color-ink-soft);
}
.signature__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: start;
}
.signature__sticky {
  position: sticky;
  top: var(--space-8);
  padding-bottom: var(--space-7);
}
.signature__sticky .eyebrow { color: var(--color-accent); }
.signature__title {
  margin-top: var(--space-5);
  max-width: 14ch;
}
.signature__story {
  display: grid;
  gap: var(--space-8);
}
.signature__para {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1vw + 0.875rem, 1.75rem);
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper);
  max-width: 32ch;
}
.signature__para .accent {
  color: var(--color-accent);
  font-style: italic;
}

@media (max-width: 880px) {
  .signature__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .signature__sticky { position: static; padding-bottom: 0; }
  .signature__para { font-size: var(--type-h3); }
}


/* 13. SCROLL-SNAP RAIL ----------------------------------------- */
.rail-section { padding: var(--space-11) 0 var(--space-10); }
.rail-section__head {
  max-width: var(--container-max);
  margin: 0 auto var(--space-8);
  padding: 0 var(--gutter);
}
.rail-section__head .eyebrow { margin-bottom: var(--space-3); }
.rail-section__head h2 { max-width: 16ch; }

/* Break out of container for full-bleed scroll. The first card's left
   padding is set to match the container gutter so titles line up. */
.rail {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  padding: var(--space-3) var(--gutter) var(--space-6);
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(245,241,234,0.25) transparent;
  scrollbar-width: thin;
}
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-track { background: rgba(245,241,234,0.04); }
.rail::-webkit-scrollbar-thumb { background: rgba(245,241,234,0.2); }

.rail-card {
  flex: 0 0 380px;
  scroll-snap-align: start;
  padding: var(--space-6);
  border: 1px solid var(--color-ink-line);
  background: var(--color-ink-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--dur-base) var(--ease-luxe),
              transform var(--dur-base) var(--ease-luxe);
  min-height: 260px;
}
.rail-card:hover {
  border-color: rgba(245,241,234,0.32);
  transform: translateY(-3px);
}
.rail-card__title {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h3);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
}
.rail-card__meta {
  margin-top: auto;
  color: var(--color-paper-mute);
  font-size: var(--type-body-sm);
}

@media (max-width: 720px) {
  .rail-card { flex-basis: 78vw; }
}


/* 14. CLOSING CTA ---------------------------------------------- */
.closing {
  padding: clamp(80px, 12vh, 144px) 0;
  border-top: 1px solid var(--color-ink-line);
}
.closing__inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.closing__title {
  margin: var(--space-5) 0 var(--space-7);
  line-height: 0.96;
}


/* 14a. SECTION HEAD (shared) ----------------------------------- */
/* A reusable eyebrow + heading lead-in for content sections. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.section-head--center { align-items: center; text-align: center; }
.section-head h2 { max-width: 18ch; }


/* 14c. WORK STRIP (Home selected work, 6 tiles) ----------------
   The grid + tile + media styles live in section 9f. Here we keep only the
   text styles for the tile content, which do not conflict. */
.work-strip { padding: clamp(72px, 10vh, 140px) 0; border-top: 1px solid var(--color-ink-line); }
.work-tile__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}
.work-tile__outcome {
  color: var(--color-paper-mute);
  font-size: var(--type-body);
  line-height: 1.5;
  margin: 0;
}
.work-tile__view {
  margin-top: auto;
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.work-tile:hover .work-tile__view .arrow { transform: translateX(4px); }
.work-tile__view .arrow { transition: transform var(--dur-base) var(--ease-luxe); display: inline-block; }
.work-strip__foot { margin-top: var(--space-7); }
@media (max-width: 880px) { .work-strip__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work-strip__grid { grid-template-columns: 1fr; } }


/* 14d. CLIENT WALL (Home) --------------------------------------
   Border-based grid (not a background-gap grid) so trailing empty
   cells stay invisible rather than showing a filled block. */
.clientwall { padding: clamp(72px, 10vh, 140px) 0; border-top: 1px solid var(--color-ink-line); background: #0E0E0E; }
.clientwall__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-ink-line);
  border-left: 1px solid var(--color-ink-line);
}
.clientwall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(28px, 4vw, 48px) var(--space-5);
  min-height: 132px;
  border-right: 1px solid var(--color-ink-line);
  border-bottom: 1px solid var(--color-ink-line);
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-paper-mute);
  transition: color var(--dur-base) var(--ease-luxe);
}
.clientwall__item:hover { color: var(--color-paper); }
@media (max-width: 880px) { .clientwall__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .clientwall__grid { grid-template-columns: 1fr; } }


/* 14e. DISCIPLINES (Home what-we-do; Services engagement) ------ */
.disciplines { padding: clamp(72px, 10vh, 140px) 0; border-top: 1px solid var(--color-ink-line); }
.discipline {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: clamp(24px, 4vw, 80px);
  align-items: baseline;
  padding: clamp(28px, 3.5vh, 48px) 0;
  border-top: 1px solid var(--color-ink-line);
}
.discipline:first-of-type { border-top: 0; }
.discipline__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.2vw + 1rem, 2rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper);
  margin: 0;
}
.discipline__name .num {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.discipline__body {
  font-size: var(--type-body-lg);
  line-height: 1.55;
  color: var(--color-paper-mute);
  max-width: 56ch;
  margin: 0;
}
.disciplines__foot { margin-top: var(--space-7); }
@media (max-width: 720px) {
  .discipline { grid-template-columns: 1fr; gap: var(--space-4); }
}


/* 14f. FULL CASE STUDY (Our Work) ------------------------------ */
.casestudy {
  padding: clamp(72px, 11vh, 150px) 0;
  border-top: 1px solid var(--color-ink-line);
}
.casestudy__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
.casestudy__sector {
  display: block;
  margin-bottom: var(--space-5);
  color: var(--color-accent);
}
.casestudy__headline { max-width: 18ch; margin: 0; }
.casestudy__outcome {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-ink-line);
}
.casestudy__outcome dt {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-paper-mute);
  margin-bottom: var(--space-3);
}
.casestudy__outcome dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper);
}
.casestudy__body {
  font-size: var(--type-body-lg);
  line-height: 1.65;
  color: var(--color-paper-mute);
  margin: 0;
}
.casestudy__scope {
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}
.casestudy__scope-label {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-paper-mute);
  margin-bottom: var(--space-2);
}
.casestudy__scope li {
  font-size: var(--type-body);
  color: var(--color-paper);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-ink-line);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.casestudy__scope li::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 1px;
  background: var(--color-accent);
  transform: translateY(-0.35em);
}
@media (max-width: 880px) {
  .casestudy__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .casestudy__headline { max-width: 22ch; }
}


/* 14g. PROSE SPLIT (Origin, How we work) ----------------------- */
/* Asymmetric: heading left, body paragraphs right. */
.prose-split { padding: clamp(80px, 12vh, 160px) 0; border-top: 1px solid var(--color-ink-line); }
.prose-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.prose-split__head { display: flex; flex-direction: column; gap: var(--space-3); }
.prose-split__head h2 { max-width: 16ch; }
.prose-split__body { display: grid; gap: var(--space-5); }
.prose-split__body p {
  font-size: var(--type-body-lg);
  line-height: 1.65;
  color: var(--color-paper-mute);
  max-width: 60ch;
}
.prose-split__body p strong { color: var(--color-paper); font-weight: 500; }
@media (max-width: 880px) {
  .prose-split__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}


/* 14h. LEADERSHIP: the interactive card styles live in section 9h. The
   section padding wrapper is the only piece kept here. */
.leadership { padding: clamp(72px, 10vh, 140px) 0; border-top: 1px solid var(--color-ink-line); }


/* 14i. SIMPLE STATEMENT (Where we work) ------------------------ */
.statement-block { padding: clamp(72px, 10vh, 140px) 0; border-top: 1px solid var(--color-ink-line); }
.statement-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.statement-block__head { display: flex; flex-direction: column; gap: var(--space-3); }
.statement-block__head h2 { max-width: 16ch; }
.statement-block__body {
  font-size: var(--type-body-lg);
  line-height: 1.65;
  color: var(--color-paper-mute);
  max-width: 56ch;
}
@media (max-width: 880px) {
  .statement-block__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}


/* 14j. NEXT STEPS (Contact) ------------------------------------ */
.next-steps { padding: clamp(72px, 10vh, 140px) 0; border-top: 1px solid var(--color-ink-line); }
.next-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
}
.next-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-ink-line);
}
.next-step__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 2vw + 1rem, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
}
.next-step__body {
  color: var(--color-paper-mute);
  font-size: var(--type-body);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 720px) {
  .next-steps__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}


/* 14k. STUDIO DETAILS (Contact) -------------------------------- */
.studio-details { padding: clamp(72px, 10vh, 140px) 0; border-top: 1px solid var(--color-ink-line); }
.studio-details__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-7);
}
.studio-detail { border-top: 1px solid var(--color-ink-line); padding-top: var(--space-5); }
.studio-detail__label {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.studio-detail__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h3);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper);
  margin: 0;
}
.studio-detail__value a:hover { color: var(--color-accent); }
.studio-detail__sub {
  margin-top: var(--space-2);
  color: var(--color-paper-mute);
  font-size: var(--type-body-sm);
}


/* 14b. CAPABILITY FLOW (Services) ------------------------------
   A pinned scrollytelling section: the outer element is tall (5 x 100vh),
   and as the user scrolls down through it, an inner sticky pin stays
   anchored to the top of the viewport while the inner track translates
   horizontally so each capability slides into view, one at a time. A
   progress bar + counter at the bottom marks position in the sequence.
   Mobile: the horizontal trick is disabled in favour of a normal vertical
   stack, so phones still get the content without scroll wrangling. */
.capability-flow {
  position: relative;
  /* Height is set inline per page so it scales with cap count (count x 100vh) */
}
.capability-flow__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-ink);
  isolation: isolate;
}
.capability-flow__track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.cap {
  flex: 0 0 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 28%) 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
  /* Top padding clears the fixed nav; the larger bottom padding keeps the
     bullet list clear of the progress bar at the foot of the slide. */
  padding: clamp(116px, 15vh, 188px) clamp(40px, 6vw, 120px) clamp(118px, 15vh, 176px);
}
.cap__number {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(5rem, 14vw, 14rem);
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: var(--color-accent);
  align-self: start;
  margin-top: clamp(0px, 2vw, 24px);
}
.cap__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 64ch;
}
.cap__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.875rem, 3.5vw + 0.5rem, 3.75rem);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  color: var(--color-paper);
  margin: 0;
  max-width: 20ch;
}
.cap__lede {
  font-size: var(--type-body-lg);
  line-height: 1.55;
  color: var(--color-paper-mute);
  max-width: 56ch;
  margin: 0;
}
.cap__list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2) var(--space-5);
}
.cap__list li {
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  color: var(--color-paper);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-ink-line);
}
.cap__list li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 1px;
  background: var(--color-accent);
  margin-right: var(--space-3);
  vertical-align: middle;
}

/* A dark band at the foot of the slide so the progress bar always sits on a
   clean surface and the bullet list never reads as cut by the gold line. */
.capability-flow__pin::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(96px, 13vh, 150px);
  background: linear-gradient(to top, var(--color-ink) 22%, rgba(14, 14, 12, 0) 100%);
  z-index: 1;
  pointer-events: none;
}
.capability-flow__progress {
  position: absolute;
  left: clamp(40px, 6vw, 120px);
  right: clamp(40px, 6vw, 120px);
  bottom: clamp(40px, 5vh, 64px);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  z-index: 2;
  pointer-events: none;
}
.capability-flow__bar {
  flex: 1;
  height: 1px;
  background: rgba(245, 241, 234, 0.15);
  position: relative;
}
.capability-flow__bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  background: var(--color-accent);
  transition: width 180ms linear;
}
.capability-flow__counter {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-paper-mute);
  min-width: 80px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Top-of-flow header strip. Sits inside the pin, anchored at the top. */
.capability-flow__head {
  position: absolute;
  top: clamp(100px, 13vh, 140px);
  left: clamp(40px, 6vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.capability-flow__head .eyebrow { color: var(--color-paper-mute); }

/* Short desktop viewports: compress the slide so the bullet list still clears
   the progress bar without overlap. */
@media (min-width: 881px) and (max-height: 860px) {
  .cap { padding-top: clamp(92px, 13vh, 150px); padding-bottom: clamp(104px, 14vh, 150px); gap: clamp(32px, 4vw, 80px); }
  .cap__number { font-size: clamp(3.5rem, 9vw, 8rem); }
  .cap__title { font-size: clamp(1.6rem, 2.6vw + 0.4rem, 2.75rem); }
  .cap__lede { font-size: var(--type-body); }
  .cap__body { gap: var(--space-4); }
  .cap__list { margin-top: var(--space-3); gap: var(--space-2) var(--space-5); }
  .cap__list li { padding: var(--space-2) 0; }
}

@media (max-width: 880px) {
  /* Fallback: vertical stack, no pin, no horizontal translate. Each
     capability becomes a standalone block. */
  .capability-flow {
    height: auto !important;
  }
  .capability-flow__pin {
    position: static;
    height: auto;
    overflow: visible;
  }
  .capability-flow__track {
    width: 100% !important;
    flex-direction: column;
    transform: none !important;
    height: auto;
  }
  .cap {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    padding: var(--space-9) var(--gutter);
    grid-template-columns: 1fr;
    gap: var(--space-5);
    border-top: 1px solid var(--color-ink-line);
  }
  .cap:first-child { border-top: 0; }
  .cap__number { font-size: 4.5rem; margin: 0; }
  .capability-flow__progress { display: none; }
  .capability-flow__head { position: static; padding: var(--space-8) var(--gutter) 0; }
}


/* 14n. MEDIA SPLIT (text + parallax image) --------------------- */
.media-split { padding: clamp(80px, 13vh, 170px) 0; border-top: 1px solid var(--color-ink-line); }
.media-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.media-split--rev .media-split__media { order: 2; }
.media-split__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-ink-soft);
}
.media-split__media .parallax-wrap { position: absolute; inset: -9% 0; }
.media-split__media img { width: 100%; height: 100%; object-fit: cover; }
.media-split__sticker {
  position: absolute;
  top: clamp(16px, 2vw, 28px);
  right: clamp(16px, 2vw, 28px);
  z-index: 2;
  transform: rotate(-6deg);
  background: var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px;
}
.media-split__eyebrow { color: var(--color-paper-mute); display: block; margin-bottom: var(--space-4); }
.media-split__title { max-width: 16ch; margin: 0 0 var(--space-5); }
.media-split__body p { color: var(--color-paper-mute); font-size: var(--type-body-lg); line-height: 1.65; max-width: 52ch; margin: 0 0 var(--space-4); }
.media-split__body p:last-child { margin-bottom: 0; }
@media (max-width: 820px) {
  .media-split__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .media-split--rev .media-split__media { order: 0; }
  .media-split__media { aspect-ratio: 16 / 10; }
}


/* 14o. TEXT MARQUEE (quirky scrolling statement) --------------- */
.text-marquee {
  overflow: hidden;
  padding: clamp(28px, 5vh, 60px) 0;
  border-top: 1px solid var(--color-ink-line);
  border-bottom: 1px solid var(--color-ink-line);
  background: var(--color-ink-soft);
}
.text-marquee__track { display: flex; width: max-content; animation: marquee 36s linear infinite; will-change: transform; }
/* No hover-pause: keep it moving continuously. */
.text-marquee__item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 6vw, 5.5rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-paper);
  white-space: nowrap;
  margin-right: 0.5em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.text-marquee__item .star { color: var(--color-accent); font-size: 0.7em; }
@media (prefers-reduced-motion: reduce) {
  .text-marquee__track { animation: none; }
}


/* 14p. PLACES (Austin / Sydney image cards) -------------------- */
.places { padding: clamp(80px, 12vh, 160px) 0; border-top: 1px solid var(--color-ink-line); }
.places__head { max-width: var(--container-max); margin: 0 auto clamp(40px, 6vh, 80px); padding: 0 var(--gutter); }
.places__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
  max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter);
}
.place { position: relative; overflow: hidden; aspect-ratio: 5 / 4; isolation: isolate; }
.place img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: clip-path 1.15s var(--ease-luxe), transform var(--dur-hero) var(--ease-luxe); }
.place:hover img { transform: scale(1.06); }
.place::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,14,12,0.85) 0%, rgba(14,14,12,0.1) 55%, rgba(14,14,12,0) 100%); }
.place__label { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(22px, 2.6vw, 40px); }
.place__city { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 2.4vw + 0.5rem, 3rem); line-height: 1; letter-spacing: var(--tracking-display); color: var(--color-paper); margin: 0; }
.place__meta { margin-top: var(--space-3); font-family: var(--font-body); font-size: var(--type-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase; color: var(--color-accent); }
/* Street address sitting above the big city name in the place cards. */
.place__address {
  margin: 0 0 clamp(10px, 1.4vh, 16px);
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.35vw + 0.66rem, 0.875rem);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--color-paper-soft);
}
@media (max-width: 720px) { .places__grid { grid-template-columns: 1fr; } }


/* 14k. BIG LINE (standalone manifesto statement) --------------- */
.bigline { padding: clamp(120px, 20vh, 240px) 0; border-top: 1px solid var(--color-ink-line); }
.bigline__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 1.0;
  letter-spacing: var(--tracking-display);
  color: var(--color-paper);
  text-align: center;
  max-width: 18ch;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.bigline__text .accent { color: var(--color-accent); }


/* 14l. TIMELINE (process) -------------------------------------- */
.timeline { padding: clamp(80px, 12vh, 160px) 0; border-top: 1px solid var(--color-ink-line); }
.timeline__head { max-width: 720px; margin: 0 auto clamp(48px, 7vh, 90px); text-align: center; padding: 0 var(--gutter); }
.timeline__steps {
  max-width: 880px; margin: 0 auto; padding: 0 var(--gutter);
}
.timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: clamp(64px, 8vw, 120px) 1fr;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(28px, 4vh, 52px) 0;
  border-top: 1px solid var(--color-ink-line);
}
.timeline__step:first-child { border-top: 0; }
.timeline__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 2.4vw + 1rem, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
}
.timeline__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.2vw + 1rem, 2rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper);
  margin: 0 0 var(--space-3);
}
.timeline__desc { color: var(--color-paper-mute); font-size: var(--type-body-lg); line-height: 1.55; max-width: 56ch; margin: 0; }
@media (max-width: 600px) {
  .timeline__step { grid-template-columns: 1fr; gap: var(--space-3); }
}


/* 14m-b. THE METHOD (pinned card deck with a 3D flip) ----------
   Desktop: the section pins; a rAF scroll handler (main.js) drives each
   phase card up from a stack at the foot of the screen, upright to read
   at centre, then on to a stack at the top, flipping through perspective.
   Only transform and opacity are touched. Mobile and reduced-motion: a
   plain stacked list, no pin, no 3D. */
.method { padding: 0; border-top: 1px solid var(--color-ink-line); }
/* Section heading pinned to the left, vertically centred, beside the deck. */
.method__intro {
  position: absolute;
  left: max(var(--gutter), calc(50vw - var(--container-max) / 2 + var(--gutter)));
  top: 50%;
  transform: translateY(-50%);
  width: clamp(220px, 26vw, 360px);
  z-index: 6;
  pointer-events: none;
}
.method__intro .eyebrow { color: var(--color-paper-mute); }
.method__heading {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.2vw + 0.4rem, 2.6rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: var(--color-paper);
}

.method__scroll { position: relative; }
.method__pin {
  position: sticky;
  top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 62% 50%;   /* head-on flip for the right-shifted deck */
  background: var(--color-ink);
}
/* Backdrop behind the deck: one image per card, crossfaded by JS on switch. */
.method__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.method__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.85s var(--ease-luxe);
  will-change: opacity;
}
.method__bg-img.is-shown { opacity: 1; }
.method__bg-scrim {
  position: absolute;
  inset: 0;
  /* Darken the photo so the deck reads in front and the backdrop stays
     atmospheric rather than busy. */
  background:
    linear-gradient(to bottom, rgba(14,14,12,0.42) 0%, rgba(14,14,12,0.55) 55%, rgba(14,14,12,0.74) 100%),
    radial-gradient(ellipse 80% 65% at 56% 45%, rgba(14,14,12,0.04), rgba(14,14,12,0.5));
}
.method__deck {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-style: preserve-3d;
}
.method__card {
  position: absolute;
  left: 62%;                                   /* shifted right, clear of the heading */
  top: 55%;                                    /* dropped so the top stack clears the nav */
  width: min(620px, 50vw);
  height: clamp(296px, 46vh, 448px);
  box-sizing: border-box;
  background: var(--color-ink-soft);
  border: 1px solid var(--color-ink-line);
  border-radius: 2px;
  padding: clamp(26px, 3.4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translate(-50%, -50%);   /* base; JS sets the full transform */
  transform-origin: center center;
  backface-visibility: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  will-change: transform, opacity;
  /* The card switch is a real, time-based animation: when JS moves a card to a
     new resting position (centre, top stack, bottom stack), it glides over this
     duration regardless of scroll speed, so you feel it swipe into place. */
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.30, 1),
              opacity 0.5s cubic-bezier(0.22, 1, 0.30, 1);
}
/* Suppress the transition for the initial placement and during resize. */
.method__deck--noanim .method__card { transition: none; }
/* Gold progress line on the active card's left edge. Faint full-height track
   is shown on the active card; a bright fill (::before) grows top to bottom
   as the user scrolls through the lock phase. JS toggles .is-active and sets
   --line (0..1). No transition on scaleY: line tracks scroll directly. */
.method__line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(212, 162, 76, 0.18);
  opacity: 0;
  transition: opacity 0.25s var(--ease-luxe);
}
.method__card.is-active .method__line { opacity: 1; }
.method__line::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleY(var(--line, 0));
  transform-origin: top center;
}
.method__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--color-accent);
  opacity: 0.32;
  margin-bottom: var(--space-3);
}
.method__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.6vw + 0.6rem, 2.4rem);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  color: var(--color-paper);
  margin: 0;
}
.method__body {
  margin: var(--space-4) 0 0;
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--color-paper-mute);
  max-width: none;          /* fill the full width of the card */
}

/* Mobile and reduced-motion: plain stacked list, no pin, no 3D. */
@media (max-width: 880px), (prefers-reduced-motion: reduce) {
  .method { padding: clamp(64px, 9vh, 120px) 0; }
  .method__bg { display: none; }
  .method__intro {
    position: static;
    transform: none;
    width: auto;
    max-width: 960px;
    margin: 0 auto clamp(28px, 5vh, 48px);
    padding: 0 var(--gutter);
    pointer-events: auto;
  }
  .method__pin {
    position: static;
    height: auto;
    overflow: visible;
    perspective: none;
    background: transparent;
  }
  .method__deck {
    position: static;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    transform-style: flat;
  }
  .method__card {
    position: static;
    left: auto; top: auto;
    width: auto;
    height: auto;
    margin: 0 0 var(--space-5);
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none;
  }
}


/* 14m. DELIVERABLES (grid of inclusions) ----------------------- */
.deliverables { padding: clamp(80px, 12vh, 160px) 0; border-top: 1px solid var(--color-ink-line); background: var(--color-ink-soft); }
.deliverables__head { max-width: var(--container-max); margin: 0 auto clamp(40px, 6vh, 80px); padding: 0 var(--gutter); }
.deliverables__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-ink-line);
  border: 1px solid var(--color-ink-line);
  max-width: var(--container-max);
  margin: 0 auto;
}
.deliverable {
  background: var(--color-ink-soft);
  padding: clamp(28px, 3vw, 48px);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.deliverable__check { color: var(--color-accent); font-size: var(--type-body-lg); line-height: 1; }
.deliverable__text { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.125rem, 0.6vw + 1rem, 1.5rem); line-height: 1.2; letter-spacing: var(--tracking-tight); color: var(--color-paper); margin: 0; }
@media (max-width: 880px) { .deliverables__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .deliverables__grid { grid-template-columns: 1fr; } }


/* 15. PRINCIPLES (About) --------------------------------------- */
.principles {
  padding: var(--space-10) 0;
  border-top: 1px solid var(--color-ink-line);
}
.principles__head {
  max-width: 720px;
  margin: 0 auto var(--space-9);
  text-align: center;
}
.principles__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-9) clamp(40px, 5vw, 96px);
  max-width: 1080px;
  margin: 0 auto;
}
.principle {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.principle__number {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-accent);
}
.principle__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h2);
  line-height: 1.18;
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper);
  margin: var(--space-2) 0 var(--space-3);
  max-width: 18ch;
}
.principle__body {
  color: var(--color-paper-mute);
  font-size: var(--type-body-lg);
  max-width: 38ch;
}

@media (max-width: 720px) {
  .principles__grid { grid-template-columns: 1fr; gap: var(--space-7); }
}


/* 16. STUDIO LOCATIONS ----------------------------------------- */
.locations {
  padding: var(--space-11) 0;
  border-top: 1px solid var(--color-ink-line);
  background: var(--color-ink-soft);
}
.locations__head {
  max-width: var(--container-max);
  margin: 0 auto var(--space-9);
  padding: 0 var(--gutter);
}
.locations__head h2 { max-width: 16ch; }
.locations__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.location {
  border-top: 1px solid rgba(245,241,234,0.18);
  padding-top: var(--space-5);
}
.location__city {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-md);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  color: var(--color-paper);
  margin-bottom: var(--space-5);
}
.location__meta {
  display: grid;
  gap: var(--space-2);
  font-size: var(--type-body-sm);
  color: var(--color-paper-mute);
}
.location__meta strong {
  display: block;
  font-weight: 500;
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-paper-dim);
  margin-bottom: var(--space-1);
}
.location__role {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-accent);
}

@media (max-width: 880px) {
  .locations__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .locations__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}


/* 17. CONTACT FORM --------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-10) var(--gutter);
}

.contact-form { display: flex; flex-direction: column; gap: var(--space-6); }

.contact-form__row { display: grid; gap: var(--space-2); }
.contact-form__row--split {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field label {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-paper-mute);
}
.field label .req { color: var(--color-accent); margin-left: 4px; }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  color: var(--color-paper);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(245, 241, 234, 0.22);
  padding: var(--space-3) 0 var(--space-3);
  outline: none;
  width: 100%;
  transition: border-color var(--dur-base) var(--ease-luxe);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
  font-size: var(--type-body);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-bottom-color: var(--color-accent);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-paper-dim); }

/* Select chevron */
.field--select { position: relative; }
.field--select::after {
  content: '';
  position: absolute;
  right: 4px; bottom: 22px;
  width: 8px; height: 8px;
  border-right: 1px solid var(--color-paper-mute);
  border-bottom: 1px solid var(--color-paper-mute);
  transform: rotate(45deg);
  pointer-events: none;
}
.field select {
  padding-right: 24px;
  cursor: pointer;
}
.field select option { background: var(--color-ink); color: var(--color-paper); }

.contact-form__submit {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.contact-form__hint {
  font-size: var(--type-body-sm);
  color: var(--color-paper-dim);
}

/* Submit transition: form fades out, thanks fades in. */
.contact-wrap { position: relative; }
.contact-form,
.thanks {
  transition: opacity var(--dur-base) var(--ease-luxe);
}
.contact-wrap.is-submitted .contact-form { opacity: 0; pointer-events: none; height: 0; overflow: hidden; }
.thanks {
  opacity: 0;
  pointer-events: none;
  padding: var(--space-7) 0;
}
.contact-wrap.is-submitted .thanks {
  opacity: 1;
  pointer-events: auto;
}
.thanks h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-md);
  line-height: 1.1;
  color: var(--color-paper);
  margin-bottom: var(--space-4);
}
.thanks p {
  color: var(--color-paper-mute);
  font-size: var(--type-body-lg);
  max-width: 40ch;
}

/* Side panel: quick addresses + direct contact */
.contact-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding-top: var(--space-2);
}
.contact-side__block .eyebrow { margin-bottom: var(--space-3); display: block; }
.contact-side__block p,
.contact-side__block a {
  color: var(--color-paper);
  font-size: var(--type-body-lg);
  display: block;
  margin: 0;
}
.contact-side__block a:hover { color: var(--color-accent); }
.contact-side__city {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h2);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper);
  margin-bottom: var(--space-2);
}
.contact-side__addr {
  color: var(--color-paper-mute);
  font-size: var(--type-body-sm);
  line-height: 1.5;
}

@media (max-width: 880px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .contact-form__row--split { grid-template-columns: 1fr; }
}


/* 18. STAGE-0 STYLEGUIDE BLOCKS -------------------------------- */
/* These are sample-page-only; final pages won't use them. */

.hero-sample {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--space-10) + var(--space-5));
  padding-bottom: var(--space-10);
}
.hero-sample__inner { max-width: 1100px; }
.hero-sample h1 { margin-top: var(--space-5); }
.hero-sample__lede { margin-top: var(--space-6); max-width: 52ch; }
.hero-sample__cta { margin-top: var(--space-7); display: inline-flex; gap: var(--space-4); flex-wrap: wrap; }

.styleguide-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 720px) {
  .styleguide-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}
.styleguide-grid > .eyebrow { padding-top: 0.4em; }

.type-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-ink-line);
}
.type-row:last-child { border-bottom: 0; }
.type-row__label {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-paper-dim);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
}
.swatch {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-ink-line);
}
.swatch__chip { aspect-ratio: 4 / 3; }
.swatch__meta {
  padding: var(--space-4);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--type-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.swatch__meta strong { font-weight: 500; }
.swatch__hex { color: var(--color-paper-dim); }

.spacing-rows { display: grid; gap: var(--space-3); }
.spacing-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-paper-mute);
}
.spacing-bar {
  height: 14px;
  background: var(--color-accent);
  opacity: 0.85;
}

.interaction-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.interaction-demo p { max-width: 60ch; }