/* Mutuals - Editorial Studio
   Palette: warm canvas, midnight blue, pure black */
:root {
  --bg: #FBFAF7;
  --bg-alt: #F2F0EA;
  --ink: #0A0A0A;
  --midnight: #0B1437;
  --midnight-soft: #1A2456;
  --rule: #E5E2D8;
  --muted: #6B6960;
  --accent: var(--midnight);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
ul, ol { list-style: none; }

/* ---- Fonts ---- */
@font-face {
  font-family: 'PierSans';
  src: url('fonts/PierSans-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PierSans';
  src: url('fonts/PierSansMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PierSans Bold';
  src: url('fonts/PierSans-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PierSans Light Italic';
  src: url('fonts/PierSansLightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PierSans Bold Italic';
  src: url('fonts/PierSans-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PierSans Black';
  src: url('fonts/PierSansBlack.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Type ---- */
.display {
  font-family: 'PierSans Bold Italic', 'Newsreader', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.display-roman {
  font-family: 'PierSans Bold', 'Newsreader', Georgia, serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-variation-settings: 'opsz' 60;
}
.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ---- Layout ---- */
.shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 768px) {
  .shell { padding: 0 24px; }
}
.rule { border-top: 1px solid var(--rule); }

/* ---- Nav ----
   Fixed + transparent so it floats above the hero video. On non-hero pages the
   page content needs to clear the nav, so .page-hero gets a top padding tuned
   to leave room for it. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Above the chromeless video overlay so the transparent nav remains visible
     and the user can navigate away while the hero video plays */
  z-index: 250;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
/* Once the user scrolls past the hero, the nav fills with cream + a soft blur so
   it reads cleanly over the body content. No bottom rule - the cream-on-cream
   transition is intentional. */
.nav.is-scrolled {
  background: var(--bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0;
  transition: background 0.3s ease;
}
/* Match nav to --bg-alt sections (e.g. fc-section) */
.nav.is-scrolled.nav--alt {
  background: var(--bg-alt);
}

/* Nav turns midnight blue when footer is in view */
.nav.is-scrolled.nav--midnight {
  background: var(--midnight);
  border-bottom-color: transparent;
  transition: background 0.3s ease;
}
.nav.is-scrolled.nav--midnight .nav-logo,
.nav.is-scrolled.nav--midnight .nav-logo sup,
.nav.is-scrolled.nav--midnight .nav-logo-text,
.nav.is-scrolled.nav--midnight .nav-links a:not(.nav-cta) {
  color: #fff;
}
.nav.is-scrolled.nav--midnight .nav-links a.active::after {
  background: #fff;
}
.nav.is-scrolled.nav--midnight .nav-more {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.nav.is-scrolled.nav--midnight .nav-more:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
}
.nav.is-scrolled.nav--midnight .nav-cta {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.nav.is-scrolled.nav--midnight .nav-cta:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
}

/* When scrolled into a dark full-bleed section (e.g. Selected Work), keep the nav
   transparent and flip text to white — same rules as the hero lander. */
.nav.over-dark {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  color: #fff;
}

.nav.over-dark .nav-logo,
.nav.over-dark .nav-logo sup,
.nav.over-dark .nav-logo-text,
.nav.over-dark .nav-links a:not(.nav-cta) {
  color: #fff;
}
.nav.over-dark .nav-logo sup {
  color: rgba(255,255,255,0.6);
}
.nav.over-dark .nav-links a.active::after {
  background: #fff;
}
.nav.over-dark .nav-more {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}
.nav.over-dark .nav-more:hover,
.nav.over-dark .nav-more[aria-expanded="true"] {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: #fff;
}

/* While the hero video overlay is playing (body.modal-open) AND the nav is still
   transparent (i.e., user is at the top of the page over the playing video), invert
   the nav text to white so it stays legible against the dark video frames. The CTA
   pill keeps its own midnight bg + cream text. Once the user scrolls into the
   .is-scrolled cream nav state, this rule no longer matches and the dark text
   returns naturally. */
.nav-logo, .nav-logo sup, .nav-links a {
  transition: color .25s ease;
}
body.modal-open .nav:not(.is-scrolled) .nav-logo,
body.modal-open .nav:not(.is-scrolled) .nav-links a:not(.nav-cta) {
  color: #fff;
}
body.modal-open .nav:not(.is-scrolled) .nav-logo sup {
  color: rgba(255, 255, 255, 0.6);
}
body.modal-open .nav:not(.is-scrolled) .nav-links a.active::after {
  background: #fff;
}
body.modal-open .nav:not(.is-scrolled) .nav-more {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
body.modal-open .nav:not(.is-scrolled) .nav-more:hover,
body.modal-open .nav:not(.is-scrolled) .nav-more[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: #fff;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Match the home hero shell's 48px gutters; trimmed vertical padding for a slimmer nav */
  padding: 10px 48px;
  max-width: none;
  margin: 0;
}
@media (max-width: 768px) {
  .nav-inner { padding: 10px 24px; }
}
/* New combined logo: lightning-bolt-in-circle SVG mark + "mutuals." wordmark.
   The SVG uses currentColor for both strokes and the connector-node fills, and the
   wordmark inherits color too - so the entire logo follows the nav's existing
   color states (default ink, white during modal-open over the playing video, etc.). */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--ink);
  text-decoration: none;
}
.nav-logo-mark {
  display: none;
}
.nav-logo-text {
  font-family: 'PierSans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  line-height: 1;
}
@media (max-width: 768px) {
  .nav-logo-mark { display: none; }
  .nav-logo-text { font-size: 18px; }
}
.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav-links a {
  font-size: 14px;
  letter-spacing: -0.01em;
  position: relative;
  transition: opacity .2s;
}
.nav-links a:hover { opacity: 0.55; }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--ink);
}
.nav-cta {
  background: var(--midnight);
  color: var(--bg) !important;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s;
}
.nav-cta:hover { transform: translateY(-1px); opacity: 1 !important; }
.nav-cta::after { content: none !important; }
.nav-cta .arrow { width: 12px; height: 12px; }
@media (max-width: 768px) {
  .nav-inner { padding: 5px 24px; }
  .nav-links > a:not(.nav-cta) { display: none; }
  .nav-links { gap: 18px; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: -0.01em;
  transition: transform .2s, background .2s, color .2s, border-color .2s;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--midnight); color: var(--bg); }
.btn-primary:hover { background: var(--ink); }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.btn .arrow { width: 14px; height: 14px; transition: transform .2s; }
.btn:hover .arrow { transform: translate(2px, -2px); }

/* ---- Section primitives ---- */
.section { padding: 80px 0; }
.section-tight { padding: 56px 0; }
@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .section-tight { padding: 40px 0; }
}
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  margin-bottom: 48px;
  align-items: end;
}
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
}
/* A label-only eyebrow on the left of section-head (replaces the old "§ 0X" + label combo) */
.section-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-title { font-size: clamp(40px, 5vw, 72px); }

/* ---- Page hero ----
   Top padding includes nav-clearance (the nav is now position:fixed, transparent). */
.page-hero {
  padding: 140px 0 160px;
}
@media (max-width: 768px) {
  .page-hero { padding: 110px 0 72px; }
}

/* Hero block (home only): wraps the page-hero + marquee so the video can act as a
   single unified background that spans both, with the nav floating over it.
   On other pages there is no .hero-block - the .page-hero just inherits its own
   top padding to clear the fixed nav. */
.hero-block {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-block .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* B&W sits on top; colour underneath. Fade transition on reveal. */
.hero-block .hero-bg-bw  { z-index: 1; transition: opacity 0.1s ease; }
.hero-block .hero-bg-color { z-index: 0; }
.hero-block.video-revealed .hero-bg-bw { opacity: 0; }
.hero-block .hero-bg-overlay {
  position: absolute;
  inset: 0;
  /* Modern browsers blend cream with transparency; older browsers get the rgba fallback */
  background: rgba(251, 250, 247, 0.62);
  background: color-mix(in oklab, var(--bg) 62%, transparent);
  z-index: 1;
  pointer-events: none;
}
/* All real content inside the block (hero, marquee) sits above the overlay */
.hero-block > .page-hero,
.hero-block > .marquee {
  position: relative;
  z-index: 2;
  background: transparent;
}
/* Hero variant marker - used by the cursor JS and CSS to scope hover/cursor states.
   Home hero is now a true full-viewport landing: meta sits tight under the fixed nav
   at the top, the stats row is pinned to the bottom of the viewport via margin-top:auto
   on a flex column. */
.page-hero--video {
  /* No own background; the .hero-block handles video + overlay */
  border-bottom: 0;
  min-height: 100vh;
  padding: 80px 0 40px;
  display: flex;
  flex-direction: column;
}
.page-hero--video > .shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Full-bleed width but match the rest of the site body's 48px gutters so the
     home hero content lines up with the inner-page .shell padding everywhere else. */
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 48px;
}
@media (max-width: 768px) {
  .page-hero--video > .shell { padding: 0 24px; }
}
/* Stats row: no auto margin - the actions' margin-bottom:auto already absorbed the
   free space below the cluster, so the stats fall to the bottom of the hero naturally. */
.page-hero--video .page-hero-meta { margin-top: 0; }
@media (max-width: 768px) {
  .page-hero--video { padding: 128px 0 32px; }
}

/* Home hero typography: scale the H1 up so it fills ~80% of the viewport width
   on wide monitors, matching the editorial reference. The inner-page heroes still
   use the smaller .page-hero h1 cap. */
.page-hero.page-hero--video h1 {
  font-size: clamp(33px, 5.1vw, 113px);
  /* margin-top: auto on the H1 + margin-bottom: auto on the actions sandwiches the
     headline cluster (h1 + lead + buttons) between two equal flex spacers, so it
     sits vertically centered in the hero. The meta-stats below has its own
     margin-top removed so it falls to the floor naturally. */
  margin-top: auto;
  margin-bottom: 20px;
  line-height: 0.92;
}
.page-hero--video .hero-lead {
  font-size: clamp(18px, 1.2vw, 24px);
  max-width: 640px;
  margin-bottom: 8px;
  font-family: 'PierSans', sans-serif;
  font-weight: 400;
}
.page-hero--video .hero-actions {
  margin-top: 40px;
  margin-bottom: auto;   /* pairs with the H1's margin-top: auto to center the cluster */
}
@media (max-width: 900px) {
  .page-hero--video h1 { margin-bottom: 6px; }
}
.hero-bg-trigger {
  position: absolute;
  bottom: 32px;
  right: 48px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--midnight);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: transform .2s, background .2s;
  box-shadow: 0 4px 18px rgba(11, 20, 55, 0.18);
}
.hero-bg-trigger:hover  { transform: translateY(-1px); background: var(--ink); }
.hero-bg-trigger:focus-visible { outline: 2px solid var(--midnight); outline-offset: 3px; }
.hero-bg-trigger .trigger-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--midnight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-bg-trigger .trigger-icon svg { width: 8px; height: 8px; fill: currentColor; }
@media (max-width: 768px) {
  /* Translucent "Play Video" pill — matches the View services button
     dimensions (padding / font-size / icon scale) so they sit at the same
     physical size, but with a glassy translucent fill so the video reads
     through it. */
  .hero-bg-trigger {
    position: static;
    align-self: center;
    margin-top: 0;
    padding: 14px 22px;
    gap: 10px;
    border-radius: 999px;
    background: rgba(11, 20, 55, 0.45);
    color: var(--bg);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: -0.01em;
    text-transform: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(11, 20, 55, 0.18);
  }
  .hero-bg-trigger .trigger-icon {
    width: 14px; height: 14px;
    background: var(--bg);
    color: var(--midnight);
  }
  .hero-bg-trigger .trigger-icon svg { width: 6px; height: 6px; }
  .hero-bg-trigger:hover { background: rgba(11, 20, 55, 0.65); transform: translateY(-1px); }

  /* Stop the Book-a-strategy-call button's bottom edge from colliding with
     the meta-row's top divider, and pull "Based in" closer to that divider. */
  .page-hero--video .page-hero-meta {
    margin-top: 24px;
    padding-top: 12px;
  }
}

/* ---- Hero custom cursor (desktop hover-capable devices only) ----
   Follows the mouse anywhere inside the hero. The system cursor is hidden
   while it's active; on interactive children (CTAs) we suppress the custom
   cursor and restore the system pointer so buttons feel like buttons. */
.hero-cursor {
  display: none;          /* default: off (touch / coarse-pointer devices) */
  position: fixed;
  top: 0; left: 0;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #fff;
  color: var(--midnight);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  z-index: 60;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  box-shadow: 0 8px 24px rgba(11, 20, 55, 0.18);
  /* CSS-var driven position + scale so JS only writes --x / --y on mousemove */
  --x: 0px;
  --y: 0px;
  --scale: 0.6;
  opacity: 0;
  transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0) scale(var(--scale));
  transition: opacity .18s ease-out, transform .12s ease-out;
}
.hero-cursor-label {
  text-align: center;
  line-height: 1.15;
}
/* Composition-style label sitting outside (below) the circle, like the
   BASIC/DEPT 2010-∞ tag in the reference. Absolutely positioned so it
   doesn't push the circle off the cursor centroid. */
.hero-cursor-meta {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 12px;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--midnight);
  text-shadow: 0 1px 6px rgba(251, 250, 247, 0.6);   /* tiny glow so it stays legible across video frames */
}
.hero-cursor.is-active     { opacity: 1; --scale: 1; }
.hero-cursor.is-suppressed { opacity: 0; --scale: 0.6; }

@media (hover: hover) and (pointer: fine) {
  .hero-cursor { display: flex; }
  /* Hide the system cursor inside the hero — both homepage and work page */
  .page-hero--video.cursor-active,
  .work-hero-block.cursor-active { cursor: none; }
  /* …but restore the pointer over interactive children so buttons feel right */
  .page-hero--video.cursor-active a,
  .page-hero--video.cursor-active button,
  .work-hero-block.cursor-active a,
  .work-hero-block.cursor-active button { cursor: pointer; }
  /* The visible pill is replaced by the cursor on hover-capable devices */
  .hero-bg-trigger { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cursor { transition: opacity .15s; }
}

/* Hide the cursor while the video modal is open so it doesn't sit behind the backdrop */
body.modal-open .hero-cursor { display: none !important; }

/* ---- Modal "Add Color" cursor ----
   Appears inside the video modal during the B&W phase (body.modal-bw).
   Same circle pattern as .hero-cursor, z-index above the modal. */
.modal-color-cursor {
  display: none;
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  --x: -200px; --y: -200px; --scale: 0;
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 1.5px solid rgba(251,250,247,0.9);
  background: rgba(11,20,55,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0) scale(var(--scale));
  transition: opacity .18s ease-out, transform .12s ease-out;
}
.modal-color-cursor-label { line-height: 1.15; }
.modal-color-cursor.is-active { opacity: 1; --scale: 1; }

@media (hover: hover) and (pointer: fine) {
  body.modal-bw .modal-color-cursor { display: flex; }
  body.modal-bw #hero-video-modal { cursor: none; }
}

/* ---- Selected Work custom cursor (work.html) ----
   Same pattern as .hero-cursor — fixed circle tracking --x / --y, z-index above the dark section. */
.sw-cursor {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #fff;
  color: var(--midnight);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 60;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 8px 24px rgba(11, 20, 55, 0.22);
  --x: 0px; --y: 0px; --scale: 0.6;
  opacity: 0;
  transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0) scale(var(--scale));
  transition: opacity .18s ease-out, transform .12s ease-out;
}
.sw-cursor.is-active     { opacity: 1; --scale: 1; }
.sw-cursor.is-suppressed { opacity: 0; --scale: 0.6; }
.sw-cursor-label { text-align: center; line-height: 1.15; }

@media (hover: hover) and (pointer: fine) {
  .sw-cursor { display: flex; }
  .sw-fullscreen.sw-cursor-active,
  .sw-fullscreen.sw-cursor-active .sw-sticky { cursor: none; }
  /* Restore pointer over list items and filter pills */
  .sw-fullscreen.sw-cursor-active .sw-list-item,
  .sw-fullscreen.sw-cursor-active .filter-pill,
  .sw-fullscreen.sw-cursor-active .sw-detail-panel,
  .sw-fullscreen.sw-cursor-active .sw-detail-close { cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
  .sw-cursor { transition: opacity .15s; }
}

/* Lift the stats row above the playing video so the meta strip stays visible at
   the bottom of the hero. The video-modal is z-index:100 inside .hero-block, and
   .page-hero already creates its own stacking context (z-index:2) - so we have
   to lift the whole hero above the modal, then visually hide the H1/lead/actions
   so only the meta row reads on top of the video. Colors invert to white for
   legibility against the dark frames. */
body.modal-open .hero-block > .page-hero--video {
  z-index: 105;
  /* Let clicks fall through to the modal underneath so click-to-dismiss
     still works. The meta row has no interactive children. */
  pointer-events: none;
}
body.modal-open .page-hero--video h1,
body.modal-open .page-hero--video .hero-lead,
body.modal-open .page-hero--video .hero-actions {
  visibility: hidden;
}
body.modal-open .page-hero--video .page-hero-meta {
  border-top-color: rgba(255, 255, 255, 0.25);
}
body.modal-open .page-hero--video .page-hero-meta .lbl,
body.modal-open .page-hero--video .page-hero-meta .val,
body.modal-open .page-hero--video .page-hero-meta .val.mono {
  color: #fff;
}
body.modal-open .page-hero--video .page-hero-meta .lbl {
  color: rgba(255, 255, 255, 0.7);
}

/* Chromeless video overlay - sits inside .hero-block so it scrolls with the hero
   instead of following the viewport. The hero block's min-height: 100vh means this
   overlay is always exactly viewport-tall when the user is at the top of the page,
   matching the default hero's framing. As the user scrolls past, the overlay
   scrolls out of view; the underlying <video> element keeps playing audio. */
.video-modal {
  position: absolute;
  inset: 0;
  background: #000;            /* fills any letterbox if the video aspect != hero block */
  z-index: 100;                /* below nav (250), above hero content (≤60) */
  padding: 0;
  cursor: pointer;
  animation: video-modal-fade .25s ease-out;
}
.video-modal[hidden] { display: none; }
@keyframes video-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.video-modal-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  background: #000;
  outline: none;
  display: block;
  pointer-events: none;
}
.video-modal-bw  { z-index: 1; transition: opacity 0.1s ease; }
.video-modal-color { z-index: 0; }
@media (prefers-reduced-motion: reduce) {
  .video-modal { animation: none; }
  .hero-bg-video { display: none; }   /* respect motion-sensitive users; overlay stays */
}
.page-hero h1 {
  font-size: clamp(56px, 9vw, 140px);
  margin-top: 24px;
  margin-bottom: 32px;
}
.page-hero .hero-meta-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 16px;
}
.page-hero .hero-lead {
  font-size: 20px;
  line-height: 1.45;
  max-width: 720px;
  color: var(--muted);
  margin-top: 40px;
}
.services-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.services-hero-grid .hero-lead--balanced {
  margin: 0;
  max-width: 460px;
}
@media (max-width: 880px) {
  .services-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
}
.page-hero .hero-lead--balanced {
  max-width: 640px;
  text-wrap: balance;
  line-height: 1.5;
}

/* Slash separator inside hero H1s - lets a heading split into two italic
   noun phrases joined by a thin roman "/", e.g. "pillars. / Solutions." */
.title-slash {
  font-style: normal;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0;
  margin: 0 0.08em;
  font-feature-settings: 'lnum' 1;
}

/* Hero title row - pairs the main H1 with a smaller, muted "/ Tag" aside on
   the trailing edge. Aligns to the baseline of the H1's last line so the two
   read as a single composition. Wraps below on narrow viewports. */
.hero-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 56px);
  flex-wrap: wrap;
}
.hero-title-row > h1 { margin: 0; flex: 0 1 auto; }
.title-aside {
  margin-left: auto;
  /* Fixed-width slot so the "/" starts at the same x-coordinate on every page,
     regardless of whether the trailing word is "Solutions", "Curations", or "Story".
     Sized to fit the widest word ("Solutions") at the largest type ramp. */
  width: clamp(220px, 22vw, 360px);
  text-align: left;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1;
  color: var(--muted);
  letter-spacing: -0.01em;
  padding-bottom: 0.18em;   /* nudges the cap-line off the H1's descender */
  white-space: nowrap;
}
.title-aside em { font-style: italic; }
.title-aside .ta-slash {
  font-style: normal;
  font-weight: 300;
  margin-right: 0.05em;
  opacity: 0.7;
}
@media (max-width: 720px) {
  .hero-title-row { gap: 12px; }
  .title-aside { font-size: clamp(24px, 7vw, 36px); padding-bottom: 0; width: auto; }
}
.page-hero .hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.page-hero-meta {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.page-hero-meta div { display: flex; flex-direction: column; gap: 4px; }
.page-hero-meta .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-hero-meta .val { font-size: 14px; }
/* When a value is also tagged .mono (e.g. the city list under "Booking Q3 2026"),
   render it in the same JetBrains Mono caps treatment as the eyebrow line, instead
   of the default 14px Inter Tight. */
.page-hero-meta .val.mono {
  font-size: 11px;
  color: var(--muted);
}

/* Typewriter slot: stacked inline-grid where the visible content and the invisible
   ghost share a single grid cell. The ghost ("production." + a copy of the caret)
   reserves the maximum possible width, so the slot never grows or shrinks as the
   typewriter cycles. Both children are in normal flow inside the cell, which keeps
   the visible text on the same baseline as the surrounding "We curate" copy. */
.typewriter-slot {
  display: inline-grid;
  grid-template-areas: "stack";
  vertical-align: baseline;
  font-size: 1.1em; /* 10% larger than the surrounding h1 */
}
.typewriter-slot .typewriter-content,
.typewriter-slot .typewriter-ghost {
  grid-area: stack;
  white-space: nowrap;
}
.typewriter-slot .typewriter-ghost { visibility: hidden; }

/* Typewriter caret */
.caret {
  display: inline-block;
  width: 0.06em;
  height: 0.85em;
  background: var(--midnight);
  margin-left: 0.04em;
  vertical-align: baseline;
  transform: translateY(0.05em);
  animation: caret 0.9s step-end infinite;
}
@keyframes caret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ---- Marquee ----
   Used as a transition band between the white CTA close section and the midnight
   footer below. The top rule separates it from the cream content; the bottom rule
   is dropped so it can butt cleanly against the dark footer. */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  padding: 22px 0;
  display: flex;
  gap: 64px;
  white-space: nowrap;
}
/* When a marquee directly precedes the footer (home page), pull the footer up to
   the marquee's bottom edge so the cream-to-midnight transition has no gap. */
.marquee + .footer { margin-top: 0; }
.contact-sidebar + .footer { margin-top: 0; }
.bundle-section + .footer { margin-top: 0; }
.marquee-track {
  display: flex;
  gap: 64px;
  flex-shrink: 0;
  animation: scroll 40s linear infinite;
  padding-right: 64px;
}
.marquee-track span {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 64px;
}
.marquee-track span::after {
  content: '✱';
  font-style: normal;
  font-size: 18px;
  color: var(--muted);
}
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---- Nav: More dropdown (hamburger sits to the right of "Start a project") ---- */
.nav-more-wrap {
  position: relative;
  display: inline-flex;
}
@media (max-width: 880px) {
  .nav-links > a:not(.nav-cta) { display: none; }   /* collapse inline links into hamburger */
}
.nav-more {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.nav-more:hover {
  background: var(--midnight);
  color: var(--bg);
  border-color: var(--midnight);
  transform: translateY(-1px);
}
.nav-more[aria-expanded="true"] {
  background: var(--midnight);
  color: var(--bg);
  border-color: var(--midnight);
}
.nav-more-icon { width: 16px; height: 16px; display: block; }
.nav-more-panel {
  position: absolute;
  top: calc(100% + 12px); right: 0;
  min-width: 260px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 18px 50px rgba(11, 20, 55, 0.14);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 100;
}
.nav-more-panel[hidden] { display: none; }
.nav-more-eyebrow {
  color: var(--muted);
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 6px;
}
.nav-more-panel a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: background .15s, color .15s;
}
.nav-more-panel a:hover {
  background: var(--bg-alt);
  color: var(--midnight);
}
.nav-more-panel .nav-more-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
@media (max-width: 768px) {
  .nav-more-panel { right: -8px; min-width: 220px; }
}

/* ---- Util ---- */
.glow-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--midnight);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.pulse-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: #16a34a;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 #16a34a;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* image placeholder */
.placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 14px,
      color-mix(in oklab, var(--midnight) 8%, transparent) 14px,
      color-mix(in oklab, var(--midnight) 8%, transparent) 15px
    ),
    var(--bg-alt);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px;
}
.placeholder.dark {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 14px,
      rgba(255,255,255,0.06) 14px,
      rgba(255,255,255,0.06) 15px
    ),
    var(--midnight);
  color: var(--bg);
}
.placeholder .ph-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 2px;
}
.placeholder.dark .ph-label {
  background: var(--midnight);
  color: var(--bg);
  border: 1px solid rgba(255,255,255,0.2);
}

/* ---- Pillars grid (home) ---- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.pillar-card {
  background: var(--bg);
  color: var(--ink);
  padding: 48px 32px 36px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background .35s, color .35s;
  position: relative;
  overflow: hidden;
}
.pillar-card:hover { background: var(--midnight); color: var(--bg); }
.pillar-card .p-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--muted); margin-bottom: 24px; transition: color .35s; }
.pillar-card:hover .p-eyebrow { color: rgba(255,255,255,0.5); }
.p-eyebrow-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.p-eyebrow-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 2px 8px;
  border-radius: 2px;
  opacity: 0.7;
}
.pillar-card h3 { font-size: 56px; margin-bottom: 24px; }
.pillar-card .p-blurb { font-size: 15px; line-height: 1.55; opacity: 0.85; max-width: 320px; }
.pillar-card .p-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 24px; margin-top: 32px;
}
.pillar-card .p-tags li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition: border-color .35s;
}
.pillar-card:hover .p-tags li { border-color: rgba(255,255,255,0.3); }
.pillar-card .p-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }

/* ---- Mutual Engine ---- */
.engine-section { background: var(--bg-alt); }
.engine-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start;
}
@media (max-width: 1000px) { .engine-grid { grid-template-columns: 1fr; gap: 48px; } }
.engine-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
@media (max-width: 600px) {
  .engine-list { grid-template-columns: 1fr; }
  .engine-tile { min-height: auto; padding: 22px 20px; }
  .engine-detail { padding: 22px 20px; }
  .engine-detail-cols { grid-template-columns: 1fr; gap: 28px; }
}
.engine-tile {
  background: var(--bg); color: var(--ink);
  padding: 28px 24px; min-height: 200px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: left; transition: background .25s, color .25s;
  cursor: pointer; border: none;
}
.engine-tile.active { background: var(--midnight); color: var(--bg); }
.engine-tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.engine-tile-eyebrow { color: var(--muted); font-size: 11px; transition: color .25s; }
.engine-tile.active .engine-tile-eyebrow { color: rgba(255,255,255,0.55); }
.engine-tile-icon { width: 18px; height: 18px; position: relative; flex-shrink: 0; transition: transform .25s; }
.engine-tile.active .engine-tile-icon { transform: rotate(45deg); }
.engine-tile-icon span:nth-child(1) {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: currentColor;
}
.engine-tile-icon span:nth-child(2) {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: currentColor;
}
.engine-tile-name { font-size: 28px; line-height: 1.1; margin-bottom: 10px; }
.engine-tile-meta {
  color: var(--muted); font-size: 11px;
  text-transform: none; letter-spacing: 0.04em;
  transition: color .25s;
}
.engine-tile.active .engine-tile-meta { color: rgba(255,255,255,0.7); }
.engine-tile-meta b { color: var(--ink); font-weight: 400; transition: color .25s; }
.engine-tile.active .engine-tile-meta b { color: var(--bg); }
.engine-detail {
  margin-top: 1px; background: var(--bg);
  border: 1px solid var(--rule); border-top: none;
  padding: 28px; display: none;
}
.engine-detail.open { display: block; }
.engine-detail-eyebrow { color: var(--muted); margin-bottom: 14px; font-size: 11px; }
.engine-detail-summary { font-size: 19px; line-height: 1.4; margin-bottom: 22px; max-width: 540px; }
.engine-detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.engine-detail-cols .lbl { color: var(--muted); font-size: 11px; margin-bottom: 10px; }
.engine-detail-cols ul { display: flex; flex-direction: column; gap: 6px; }
.engine-detail-cols ul li { font-size: 13px; color: var(--ink); display: flex; gap: 10px; }
.engine-detail-cols ul li::before { content: '-'; color: var(--muted); }
.engine-results { display: flex; flex-direction: column; gap: 10px; }
.engine-results-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; border-bottom: 1px solid var(--rule); padding-bottom: 8px;
}
.engine-results-row .v { font-size: 24px; }
.engine-results-row .l { color: var(--muted); font-size: 11px; text-transform: none; }
.engine-foot { color: var(--muted); margin-top: 16px; text-transform: none; letter-spacing: 0.04em; }
.stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-tile { padding: 28px 20px; min-height: auto; }
  .stat-tile .stat { font-size: 52px; margin-bottom: 8px; }
  .stats-callout { padding: 22px 20px; }
  .stats-callout p { font-size: 19px; }
}
.stat-tile { background: var(--bg); padding: 40px 28px; min-height: 200px; }
.stat-tile .stat { font-size: 64px; margin-bottom: 12px; }
.stat-tile .stat-lbl { font-size: 13px; color: var(--muted); max-width: 200px; line-height: 1.45; }
.stats-callout { margin-top: 24px; padding: 28px; background: var(--midnight); color: var(--bg); }
.stats-callout .eyebrow { color: rgba(255,255,255,0.5); margin-bottom: 14px; }
.stats-callout p { font-size: 22px; line-height: 1.25; }

/* ---- Portfolio grid ---- */
.portfolio-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px; gap: 16px;
}
@media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
.portfolio-tile { transition: transform .4s; cursor: pointer; }
.portfolio-tile:hover { transform: translateY(-3px); }
.portfolio-tile .placeholder { height: 100%; width: 100%; }
.portfolio-caption {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
}
.portfolio-caption .ptype { margin-bottom: 4px; }
.portfolio-caption .ptitle {
  font-family: 'Newsreader', serif; font-style: italic;
  font-size: 22px; letter-spacing: -0.02em;
}
.portfolio-foot {
  margin-top: 48px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 16px;
}
/* CTA tile that drops into the leftover space at the end of the home portfolio
   mosaic. Spans the bottom-right cells so it reads as a natural finishing pair
   to the last featured tile. */
.portfolio-archive-cta {
  grid-column: span 2;
  grid-row: span 2;
  align-self: center; justify-self: center;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  transition: background .2s, color .2s, transform .2s;
}
.portfolio-archive-cta:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); }
.portfolio-archive-cta:hover .arrow { transform: translate(2px, -2px); }
.portfolio-archive-cta .arrow { width: 14px; height: 14px; transition: transform .2s; }
@media (max-width: 900px) {
  .portfolio-archive-cta { grid-column: span 2; grid-row: span 1; }
}
.portfolio-foot p {
  color: var(--muted); text-transform: none;
  letter-spacing: 0.04em; max-width: 360px;
}

/* ---- Paper texture shared by pillars + fc-section ---- */
.pillars-section,
.fc-section {
  background-color: var(--bg-alt);
  position: relative;
}
.pillars-section::before,
.fc-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.pillars-section > *,
.fc-section > * { position: relative; z-index: 1; }

/* ---- Full Circle ---- */
.fc-section { padding-top: clamp(80px, 10vh, 140px); padding-bottom: clamp(80px, 10vh, 140px); }
.fc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .fc-grid { grid-template-columns: 1fr; gap: 48px; } }
.fc-svg-wrap { position: relative; aspect-ratio: 1 / 1; max-width: 480px; margin: 0 auto; width: 100%; }
.fc-svg-wrap svg { width: 100%; height: 100%; overflow: visible; }
.fc-copy p.lead { font-size: 32px; line-height: 1.25; margin-bottom: 32px; }
.fc-copy ul { display: flex; flex-direction: column; gap: 16px; }
.fc-copy ul li {
  display: flex; gap: 16px; padding-top: 16px; border-top: 1px solid var(--rule);
}
.fc-copy ul li .num { color: var(--muted); }
.fc-copy ul li .txt { font-size: 16px; }
.fc-copy .btn { margin-top: 40px; }
.fc-outer {
  transform-origin: 200px 200px; transform-box: view-box;
  animation: fc-rotate 60s linear infinite;
}
@keyframes fc-rotate { to { transform: rotate(360deg); } }
.fc-flow {
  transform-origin: 200px 200px; transform-box: view-box;
  animation: fc-rotate-rev 9s linear infinite;
}
@keyframes fc-rotate-rev { to { transform: rotate(-360deg); } }
.fc-core {
  transform-origin: 200px 200px; transform-box: view-box;
  animation: fc-breathe 4.2s ease-in-out infinite;
}
@keyframes fc-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
.fc-pulse {
  transform-origin: 200px 200px; transform-box: view-box;
  opacity: 0; animation: fc-pulse 4.2s ease-out infinite;
}
.fc-pulse-b { animation-delay: 2.1s; }
@keyframes fc-pulse {
  0%   { transform: scale(1);    opacity: 0.5; }
  80%  { opacity: 0; }
  100% { transform: scale(1.95); opacity: 0; }
}
/* Orbit: slow-moderate sweep of the four nodes around the brand-presence core */
.fc-orbit {
  transform-origin: 200px 200px;
  transform-box: view-box;
  animation: fc-orbit 48s linear infinite;
}
@keyframes fc-orbit { to { transform: rotate(360deg); } }

/* Outer node group: counter-rotates so labels stay upright as the cluster orbits.
   Two animations on the same element would conflict on `transform`, so the inward
   pulse lives on a nested .fc-node-pulse group below. */
.fc-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: fc-orbit-counter 48s linear infinite;
}
@keyframes fc-orbit-counter { to { transform: rotate(-360deg); } }

/* Inner wrapper inside each node: scales (slow inward breath toward brand presence) */
.fc-node-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: fc-node-pulse 7.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.875s);
}
@keyframes fc-node-pulse {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(0.92); }   /* contracts inward toward the brand presence */
  60%      { transform: scale(1.04); }
}

/* Halo around each node, slowed to match the inward breath */
.fc-node-halo {
  transform-box: fill-box; transform-origin: center;
  animation: fc-halo 7.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.875s);
}
@keyframes fc-halo {
  0%   { transform: scale(1);    opacity: 0.5; }
  45%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1);    opacity: 0; }
}

/* Spokes - faint lines from each node toward the brand-presence core, with a pulse
   of light traveling inward (node → core) to convey energy flowing IN. */
.fc-spoke {
  stroke: #0B1437;
  stroke-width: 1;
  opacity: 0.18;
}
.fc-spoke-pulse {
  stroke: #0B1437;
  stroke-width: 1.5;
  stroke-linecap: round;
  /* dash pattern: a 4px lit segment, then a 40px gap, drawn along a 44-unit spoke.
     Animating dashoffset toward -44 marches the lit segment from node end → core end. */
  stroke-dasharray: 4 40;
  animation: fc-spoke-march 7.5s linear infinite;
  animation-delay: calc(var(--i) * 1.875s);
}
@keyframes fc-spoke-march {
  0%   { stroke-dashoffset: 0;   opacity: 0; }
  10%  { opacity: 0.85; }
  60%  { stroke-dashoffset: -44; opacity: 0.85; }
  70%  { opacity: 0; }
  100% { stroke-dashoffset: -44; opacity: 0; }
}

/* Slow, gentle inward pulse rings - appear at the orbit ring and contract into the core */
.fc-inpulse {
  transform-origin: 200px 200px;
  transform-box: view-box;
  opacity: 0;
  animation: fc-inpulse 7.5s ease-in-out infinite;
}
.fc-inpulse-b { animation-delay: 3.75s; }
@keyframes fc-inpulse {
  0%   { transform: scale(1.95); opacity: 0; }
  20%  { opacity: 0.45; }
  100% { transform: scale(1);    opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-outer, .fc-flow, .fc-core, .fc-pulse, .fc-orbit,
  .fc-node, .fc-node-pulse, .fc-node-halo, .fc-spoke-pulse, .fc-inpulse,
  .marquee-track, .pulse-dot, .caret { animation: none !important; }
  .fc-pulse, .fc-inpulse { display: none; }
}

/* ---- CTA close ---- */
.cta-close { border-top: 1px solid var(--rule); }
.cta-eyebrow { color: var(--muted); margin-bottom: 24px; display: flex; gap: 16px; }
.cta-eyebrow .lbl { align-self: center; }
.cta-headline {
  font-size: clamp(48px, 7.2vw, 104px);
  line-height: 1.02; margin-bottom: 64px;
  white-space: nowrap; letter-spacing: -0.01em;
}
.cta-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
@media (max-width: 768px) {
  .cta-headline { white-space: normal; }
  .cta-cols { grid-template-columns: 1fr; }
}
.cta-cols p { font-size: 20px; line-height: 1.45; max-width: 540px; color: var(--muted); }
.cta-cols .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 768px) { .cta-cols .actions { justify-content: flex-start; } }

/* ---- Footer ---- */
.footer {
  background: var(--midnight); color: var(--bg);
  padding: 200px 0 40px; margin-top: 0;
}
.footer .shell { max-width: 1440px; }
.footer-mark {
  font-family: 'PierSans', sans-serif;
  font-weight: 700;
  font-size: 96px; font-style: normal;
  letter-spacing: 0.02em; line-height: 1.0;
  margin-bottom: 40px;
}
.footer-mark em { font-style: italic; letter-spacing: -0.04em; }
.footer-actions { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.footer-actions .btn-primary { background: var(--bg); color: var(--midnight); }
.footer-actions .btn-primary:hover { background: #fff; color: var(--midnight); }
.footer-actions .btn-email { border: 1px solid rgba(255,255,255,0.3); color: var(--bg); }
.footer-actions .btn-email:hover { border-color: var(--bg); }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; padding-top: 24px; padding-bottom: 48px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
  color: rgba(255,255,255,0.5); margin-bottom: 20px;
}
.footer ul { display: flex; flex-direction: column; gap: 12px; }
.footer ul a { font-size: 14px; opacity: 0.9; }
.footer ul a:hover { opacity: 0.6; }
.footer-studio-blurb { font-size: 14px; opacity: 0.85; max-width: 360px; line-height: 1.55; }
.footer-booking {
  margin-top: 24px; font-size: 12px; color: rgba(255,255,255,0.5);
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 28px; display: flex; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,0.5);
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em;
  flex-wrap: wrap; gap: 12px;
}
@media (max-width: 768px) {
  .footer-mark { font-size: 64px; }
  .footer { padding: 120px 0 32px; margin-top: 0; }
}

/* ---- Work page ---- */
.work-tools {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; margin-bottom: 40px;
}
.work-tools-note {
  color: var(--muted); text-transform: none;
  letter-spacing: 0.04em; max-width: 360px; text-align: right;
}
@media (max-width: 720px) {
  .work-tools-note { text-align: left; max-width: 100%; }
}
.filter-pill {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
  text-transform: uppercase; transition: all .2s;
}
.filter-pill.active { background: var(--midnight); color: var(--bg); border-color: var(--midnight); }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.work-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px; gap: 16px;
}
@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
.work-tile-caption,
.portfolio-caption {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.45);
}
@media (hover: hover) and (pointer: fine) {
  .pf-tile .work-tile-caption,
  .portfolio-tile .portfolio-caption {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .pf-tile::after,
  .portfolio-tile::after {
    opacity: 0;
    transition: opacity .25s ease;
  }
  .pf-tile:hover .work-tile-caption,
  .pf-tile:focus-visible .work-tile-caption,
  .portfolio-tile:hover .portfolio-caption,
  .portfolio-tile:focus-visible .portfolio-caption {
    opacity: 1;
    transform: translateY(0);
  }
  .pf-tile:hover::after,
  .pf-tile:focus-visible::after,
  .portfolio-tile:hover::after,
  .portfolio-tile:focus-visible::after {
    opacity: 1;
  }
}
.work-tile-caption .services,
.work-tile-caption .mono,
.portfolio-caption .mono,
.portfolio-caption .ptype,
.portfolio-caption .ptitle { color: #fff; }
.work-tile-caption .services { margin-bottom: 6px; }
/* Soft dark scrim at the bottom so white text always reads, even on bright covers */
.pf-tile::after,
.portfolio-tile::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}
.pf-tile .work-tile-caption,
.pf-tile .pf-caption,
.portfolio-tile .portfolio-caption { z-index: 2; }
.work-tile-caption .title {
  font-family: 'Newsreader', serif; font-style: italic;
  font-size: 24px; letter-spacing: -0.02em; margin-bottom: 6px;
}
.work-tile-caption .excerpt { font-size: 13px; opacity: 0.85; max-width: 360px; }
.work-index-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 0; border: 1px solid var(--rule);
}
.work-index-grid div {
  padding: 26px 22px; border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  font-family: 'Newsreader', serif; font-style: italic; font-size: 18px;
  display: flex; align-items: center; gap: 10px;
}
.work-index-grid div:nth-child(5n) { border-right: 0; }
.work-index-grid div:nth-child(n+31) { border-bottom: 0; }
.work-index-grid .num {
  color: var(--muted); font-style: normal; font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}

/* Full-height brands section on work.html */
.brands-full-section {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 0;
}
.brands-full-shell {
  display: flex; flex-direction: column; flex: 1; width: 100%;
}
.brands-full-head {
  padding: 32px 0 48px;
}
.brands-full-section .work-index-grid {
  flex: 1;
  min-height: 0;
}

/* ---- Services page ---- */
.service-block { border-bottom: 1px solid var(--rule); }
.service-head {
  display: grid; grid-template-columns: 1fr 2fr; gap: 64px; margin-bottom: 64px;
}
@media (max-width: 900px) { .service-head { grid-template-columns: 1fr; gap: 32px; } }
.service-head .tag { color: var(--muted); margin-bottom: 12px; }
.service-head h2 { font-size: clamp(56px, 8vw, 120px); }
.service-head .service-subtitle {
  margin-top: 12px;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.25;
  color: var(--muted);
  font-style: italic;
  font-family: 'PierSans Light Italic', 'PierSans', sans-serif;
  font-weight: 300;
  letter-spacing: -0.02em;
  max-width: 28ch;
}
.service-head p { font-size: 22px; line-height: 1.4; max-width: 620px; padding-top: 24px; }
.service-head .cta { margin-top: 32px; }
.service-cols {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
@media (max-width: 900px) { .service-cols { grid-template-columns: 1fr; } }
.service-col { background: var(--bg); padding: 32px 28px; }
.service-col.dark { background: var(--midnight); color: var(--bg); }
.service-col .lbl { color: var(--muted); margin-bottom: 20px; }
.service-col.dark .lbl { color: rgba(255,255,255,0.5); }
.service-deliverables { display: flex; flex-direction: column; gap: 12px; }
.service-deliverables li {
  font-size: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 10px;
}
.service-deliverables li::before {
  content: ''; width: 4px; height: 4px;
  background: var(--midnight); border-radius: 50%;
  display: inline-block;
}
.service-process { display: flex; flex-direction: column; gap: 16px; }
.service-process li { padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.service-process li:last-child { border-bottom: 0; }
.service-process .step-head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px;
}
.service-process .step-head .num { color: var(--muted); }
.service-process .step-head .title {
  font-size: 17px; font-family: 'PierSans Bold Italic', 'PierSans', sans-serif; font-weight: 700; font-style: italic; letter-spacing: -0.02em; color: #6A6D75;
}
.service-process .step-desc { font-size: 14px; color: var(--muted); line-height: 1.5; }
.service-tools { display: flex; flex-direction: column; gap: 12px; }
.service-tools .tool {
  font-size: 15px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.service-engagement { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.15); }
.service-engagement .lbl { color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.service-engagement .val { font-size: 36px; }

.bundle-section { background: var(--midnight); color: var(--bg); }
.bundle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
@media (max-width: 900px) { .bundle-grid { grid-template-columns: 1fr; } }
.bundle-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.15);
}
.bundle-stat { background: var(--midnight); padding: 28px 24px; min-height: 160px; }
.bundle-stat .n { font-size: 48px; margin-bottom: 8px; }
.bundle-stat .l { font-size: 13px; opacity: 0.7; line-height: 1.4; }
.bundle-included {
  display: flex; flex-direction: column;
}
.bundle-included li {
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; gap: 12px; font-size: 15px;
}
.bundle-included li::before {
  content: ''; width: 16px; height: 1px;
  background: var(--bg);
}
.bundle .btn-bundle {
  background: var(--bg); color: var(--midnight);
  margin-top: 32px; align-self: flex-start;
}

/* ---- About page ---- */
.values-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
@media (max-width: 720px) { .values-grid { grid-template-columns: 1fr; } }
.value-tile { background: var(--bg); padding: 40px 32px; min-height: 280px; }
.value-tile .num { color: var(--muted); margin-bottom: 24px; }
.value-tile h3 { font-size: 36px; margin-bottom: 16px; }
.value-tile p { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 460px; }

.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.team-tile .placeholder { height: 320px; margin-bottom: 16px; }
.team-tile .portrait-initials {
  position: absolute; top: 16px; right: 16px;
  font-family: 'Newsreader', serif; font-style: italic;
  font-size: 56px; color: rgba(255,255,255,0.85);
}
.team-tile .meta {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 8px;
}
.team-tile .meta .name { font-family: 'Newsreader', serif; font-style: italic; font-size: 22px; }
.team-tile .note { font-size: 14px; line-height: 1.5; color: var(--muted); }

.story-list {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.story-list .story-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 48px;
  padding: 32px 0; border-top: 1px solid var(--rule); align-items: baseline;
}
.story-list .story-row:last-child { border-bottom: 1px solid var(--rule); }
.story-list .year { color: var(--muted); font-size: 13px; }
.story-list .title { font-size: 36px; margin-bottom: 8px; }
.story-list .desc { font-size: 16px; color: var(--muted); max-width: 720px; line-height: 1.55; }
@media (max-width: 600px) {
  .story-list .story-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- Contact page ---- */
.contact-form-shell { max-width: 920px; margin: 0 auto; }
.form-step { margin-bottom: 64px; }
.form-step-head {
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.form-step-head .step-num { color: var(--muted); }
.form-step-head h3 { font-size: 32px; }
.form-step-head .hint { color: var(--muted); margin-left: auto; }
.service-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
}
.service-opt {
  padding: 20px 20px 24px;
  border: 1px solid var(--rule); background: var(--bg);
  color: var(--ink); text-align: left;
  transition: all .2s; min-height: 120px;
  display: flex; flex-direction: column; gap: 8px;
}
.service-opt.active { background: var(--midnight); color: var(--bg); border-color: var(--midnight); }
.service-opt-head {
  display: flex; justify-content: space-between; align-items: center;
}
.service-opt .label-text {
  font-family: 'PierSans Bold Italic', 'PierSans', sans-serif; font-style: italic; font-size: 22px;
}
.service-opt .check { display: none; }
.service-opt .desc { font-size: 13px; opacity: 0.7; line-height: 1.4; }
.service-opt.active .desc { opacity: 0.85; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .field-grid { grid-template-columns: 1fr; } }
.field { display: block; margin-bottom: 12px; }
.field.span2 { grid-column: span 2; }
@media (max-width: 600px) { .field.span2 { grid-column: span 1; } }
.field .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: 8px; font-weight: 500;
}
.field input, .field textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--rule); background: var(--bg);
  font-size: 15px; font-family: inherit; color: var(--ink);
  border-radius: 0; outline: none;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus { border-color: var(--midnight); }
.field textarea { resize: vertical; min-height: 160px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent;
  color: var(--ink); font-size: 14px; transition: all .2s;
}
.chip.active { background: var(--midnight); color: var(--bg); border-color: var(--midnight); }
.chip-group + .chip-group { margin-top: 24px; }
.chip-group .lbl-mono { color: var(--muted); margin-bottom: 12px; display: block; }

.form-foot {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; padding-top: 32px; border-top: 1px solid var(--rule);
}
.form-foot .note {
  color: var(--muted); text-transform: none; letter-spacing: 0.04em;
}
.form-foot .note a { border-bottom: 1px solid currentColor; }

.contact-success { max-width: 640px; margin: 0 auto; text-align: center; padding: 64px 0; }
body.contact-sent .page-hero { display: none; }
body.contact-sent .contact-sidebar { display: none; }
body.contact-sent #form-host {
  min-height: calc(100vh - 88px);
  display: flex; align-items: center; justify-content: center;
}
body.contact-sent #form-host .shell { width: 100%; }
.contact-success .badge { color: var(--muted); margin-bottom: 24px; }
.contact-success h2 { font-size: clamp(48px, 6vw, 88px); margin-bottom: 24px; }
.contact-success p { font-size: 18px; line-height: 1.5; color: var(--muted); margin-bottom: 32px; }

.contact-sidebar { background: var(--bg-alt); border-top: 1px solid var(--rule); }
.contact-sidebar-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}
.contact-sidebar-grid .lbl { color: var(--muted); margin-bottom: 8px; }
.contact-sidebar-grid .val {
  font-family: 'PierSans Bold Italic', 'PierSans', sans-serif; font-style: italic; font-size: 22px;
}

/* ---- Capabilities (about page) ---- */
.caps-section {
  background: var(--midnight);
  color: var(--bg);
  padding: 140px 0 160px;
}
.caps-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 3fr;
  gap: 140px;
  align-items: start;
}
.caps-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 120px;
  row-gap: 120px;
}
.caps-title-col { position: sticky; top: 120px; }
.caps-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--bg);
}
.caps-col-head {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  margin-bottom: 18px;
}
.caps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.caps-list li {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(251, 250, 247, 0.72);
}
@media (max-width: 1100px) {
  .caps-grid { grid-template-columns: 1fr; gap: 56px; }
  .caps-title-col { grid-column: 1 / -1; position: static; }
}
@media (max-width: 700px) {
  .caps-section { padding: 96px 0 112px; }
  .caps-cols { grid-template-columns: 1fr; row-gap: 40px; }
}

/* ---- Studio Snapshot (about page) ---- */
/* Dark editorial stat block: midnight bg + cream tones, big sans numerals,
   sticky title column on wide viewports. Matches the reference but in the
   Mutuals palette - no pink. */
.snapshot-section {
  background: var(--midnight);
  color: var(--bg);
  padding: 140px 0 160px;
}
.snapshot-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 3fr;
  gap: 80px;
  align-items: start;
}
.snapshot-title-col { position: sticky; top: 120px; }
.snapshot-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--bg);
}
.snapshot-title strong { font-weight: 700; }
.snapshot-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 96px;
}
.snapshot-stat {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.snapshot-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  font-weight: 500;
}
.snapshot-num {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: clamp(72px, 9vw, 156px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--bg);
}
.snapshot-num-unit {
  font-size: 0.55em;
  letter-spacing: -0.02em;
  margin-left: 0.04em;
}
.snapshot-copy {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(251, 250, 247, 0.65);
  max-width: 360px;
  text-wrap: pretty;
}
@media (max-width: 1100px) {
  .snapshot-grid { grid-template-columns: 1fr; gap: 56px; }
  .snapshot-title-col { position: static; }
}
@media (max-width: 700px) {
  .snapshot-section { padding: 96px 0 112px; }
  .snapshot-stats { grid-template-columns: 1fr; row-gap: 64px; }
}

/* ============================================================
   Portfolio system — tiles, media, filters, modal
   Used by portfolio-data.js + portfolio.js across home + work.
   ============================================================ */

/* Filter pill counts */
.filter-pill { display: inline-flex; align-items: baseline; gap: 8px; }
.pf-pill-count {
  font-size: 10px; opacity: 0.55;
  letter-spacing: 0.06em;
}
.filter-pill.active .pf-pill-count { opacity: 0.75; }

/* Tile media wrappers (replace plain .placeholder when real assets exist) */
.pf-tile { position: relative; overflow: hidden; }
.pf-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: var(--midnight);
  overflow: hidden;
}
.pf-media img,
.pf-media video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.pf-tile:hover .pf-media img,
.pf-tile:hover .pf-media video { transform: scale(1.04); }

/* YouTube / Vimeo embed wrappers */
.pf-media--embed {
  background: var(--midnight);
  container-type: size;
}
.pf-media--embed iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 0; display: block;
  /* Cover the tile while keeping a 16:9 iframe aspect — pushes the player's
     letterbox bars outside the overflow-clipped tile when tile ≠ 16:9. */
  width: max(100%, calc(100cqh * 16 / 9));
  height: max(100%, calc(100cqw * 9 / 16));
  aspect-ratio: 16 / 9;
}
.pf-gallery-item[data-aspect="tall"] .pf-media--embed iframe,
.pf-gallery-item[data-aspect="portrait"] .pf-media--embed iframe,
.pf-tile[data-aspect="tall"] .pf-media--embed iframe,
.pf-tile[data-aspect="portrait"] .pf-media--embed iframe {
  /* For known portrait content (Shorts), keep 9:16 so vertical video fills. */
  width: max(100%, calc(100cqh * 9 / 16));
  height: max(100%, calc(100cqw * 16 / 9));
  aspect-ratio: 9 / 16;
}
.pf-media--embed.is-interactive { cursor: pointer; }
.pf-media--embed.is-interactive:focus-visible {
  outline: 2px solid currentColor; outline-offset: -2px;
}
.pf-play-badge--embed {
  top: auto; right: auto;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 22px;
  font-size: 12px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.pf-media--embed.is-interactive:hover .pf-play-badge--embed {
  background: rgba(0,0,0,0.9);
}

/* Play badge for video tiles — hidden by default, revealed on hover, centered */
.pf-play-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  padding: 12px 22px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  opacity: 0;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  z-index: 3;
  font-size: 11px; letter-spacing: 0.18em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pf-tile:hover .pf-play-badge {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---- Portfolio play-cursor (follows the mouse over video/embed tiles) ----
   Mirrors the .hero-cursor pattern: a fixed-position circle that tracks the
   mouse via --x / --y CSS vars. Only shown on hover-capable devices; touch
   devices keep using the static centered .pf-play-badge instead. */
.pf-cursor {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  color: var(--midnight);
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 60;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(11, 20, 55, 0.18);
  --x: 0px; --y: 0px; --scale: 0.6;
  opacity: 0;
  transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0) scale(var(--scale));
  transition: opacity .18s ease-out, transform .12s ease-out;
}
.pf-cursor.is-active { opacity: 1; --scale: 1; }

@media (hover: hover) and (pointer: fine) {
  .pf-cursor { display: flex; }
  .pf-tile.cursor-active { cursor: none; }
  /* The static badge is replaced by the follow-cursor on hover-capable devices */
  .pf-tile.has-play-cursor:hover .pf-play-badge { opacity: 0; }
}

body.pf-modal-open .pf-cursor { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pf-cursor { transition: opacity .15s; }
}

/* Mosaic fade-in/out on filter change */
.portfolio-grid,
.work-grid { transition: opacity .24s ease; }
.portfolio-grid.is-fading,
.work-grid.is-fading { opacity: 0; }

/* Empty state */
.pf-empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--rule);
  padding: 80px 24px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.pf-empty-mark {
  font-size: 28px; color: var(--muted);
  letter-spacing: 0.12em;
}
.pf-empty-title {
  font-family: 'Newsreader', serif; font-style: italic;
  font-size: 28px; letter-spacing: -0.02em;
}
.pf-empty-copy { color: var(--muted); font-size: 14px; max-width: 380px; }

/* ---- Project detail modal ---- */
body.pf-modal-open { overflow: hidden; }

.pf-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: stretch; justify-content: flex-end;
}
.pf-modal[hidden] { display: none; }
.pf-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 18, 28, 0);
  transition: background .24s ease;
  cursor: pointer;
}
.pf-modal.is-open .pf-modal-backdrop { background: rgba(15, 18, 28, 0.55); }

.pf-modal-panel {
  position: relative;
  width: min(1180px, 92vw);
  height: 100%;
  background: var(--bg);
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(40px);
  opacity: 0;
  transition: transform .32s cubic-bezier(.2,.7,.2,1), opacity .24s ease;
  outline: none;
  padding: 32px clamp(24px, 4vw, 56px) 80px;
}
.pf-modal.is-open .pf-modal-panel { transform: translateX(0); opacity: 1; }

.pf-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0;
  margin: -32px clamp(-24px, -4vw, -56px) 24px;
  padding: 18px clamp(24px, 4vw, 56px);
  /* Soft top-anchored scrim so the header reads at the top edge but doesn't
     visually slice content scrolling beneath it. */
  background: linear-gradient(to bottom,
    rgba(251, 250, 247, 0.92) 0%,
    rgba(251, 250, 247, 0.72) 60%,
    rgba(251, 250, 247, 0) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 4;
}
.pf-modal-meta { display: flex; gap: 16px; align-items: baseline; }
.pf-modal-cat,
.pf-modal-year { color: var(--muted); font-size: 11px; letter-spacing: 0.1em; }
.pf-modal-cat::before { content: '§ '; opacity: 0.55; }

.pf-modal-close {
  appearance: none;
  width: 36px; height: 36px;
  border: 1px solid var(--rule);
  background: transparent;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.pf-modal-close:hover { background: var(--midnight); color: var(--bg); border-color: var(--midnight); }
.pf-modal-close svg { width: 14px; height: 14px; }

.pf-modal-title-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.pf-modal-title-row h1 {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02; letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.pf-modal-client { color: var(--muted); }
.pf-modal-client .lbl { opacity: 0.55; }
.pf-modal-client .val { color: var(--ink); margin-left: 4px; }

/* Hero artwork in modal */
.pf-modal-hero {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 36px;
  background: var(--midnight);
  aspect-ratio: 16 / 9;
  /* Keep the hero from outgrowing the viewport - leaves room for header + title row. */
  max-height: calc(100vh - 160px);
  margin-left: auto;
  margin-right: auto;
}
/* Vertical / portrait shorts (9:16) - cap the width so the box hits max-height
   first, keeping the full video frame visible without crop. */
.pf-modal-hero[data-aspect="tall"],
.pf-modal-hero[data-aspect="portrait"] {
  aspect-ratio: 9 / 16;
  max-width: calc((100vh - 160px) * 9 / 16);
}
.pf-modal-hero[data-aspect="square"] {
  aspect-ratio: 1 / 1;
  max-width: calc(100vh - 160px);
}
.pf-modal-hero .placeholder { height: 100%; }

/* Meta strip */
.pf-modal-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
}
.pf-modal-meta-grid > div {
  padding: 18px 24px;
  display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid var(--rule);
}
.pf-modal-meta-grid > div:first-child { padding-left: 0; }
.pf-modal-meta-grid > div:last-child { padding-right: 0; border-right: 0; }
.pf-modal-meta-grid .lbl { font-size: 10px; letter-spacing: 0.12em; color: var(--muted); }
.pf-modal-meta-grid .val { font-size: 15px; }

.pf-modal-summary {
  font-size: 19px; line-height: 1.55;
  max-width: 760px;
  margin: 0 0 56px;
  color: var(--ink);
  text-wrap: pretty;
}

/* Gallery mosaic inside modal */
.pf-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 12px;
  margin-bottom: 56px;
  align-items: start;
}
.pf-gallery-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--midnight);
  aspect-ratio: 1 / 1;
}
.pf-gallery-item[data-aspect="wide"],
.pf-gallery-item[data-aspect="landscape"] { aspect-ratio: 16 / 9; }
.pf-gallery-item[data-aspect="tall"],
.pf-gallery-item[data-aspect="portrait"] { aspect-ratio: 9 / 16; }
.pf-gallery-item[data-aspect="square"] { aspect-ratio: 1 / 1; }
.pf-gallery-item .placeholder,
.pf-gallery-item .pf-media { position: absolute; inset: 0; height: 100%; width: 100%; }
.pf-gallery-item figcaption {
  position: absolute; bottom: 10px; left: 12px; right: 12px;
  font-size: 10px; color: rgba(251, 250, 247, 0.78);
  letter-spacing: 0.1em;
}
@media (max-width: 900px) {
  .pf-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .pf-modal-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-modal-meta-grid > div:nth-child(2n) { border-right: 0; }
}
@media (max-width: 600px) {
  .pf-gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
}

/* Related work in modal */
.pf-modal-related .section-label {
  color: var(--muted); font-size: 10px; letter-spacing: 0.14em;
  margin-bottom: 16px;
  padding-top: 32px; border-top: 1px solid var(--rule);
}
.pf-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pf-related-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--midnight);
  color: var(--bg);
  text-decoration: none;
}
.pf-related-tile .placeholder,
.pf-related-tile .pf-media { position: absolute; inset: 0; height: 100%; width: 100%; }
.pf-related-meta {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 2;
}
.pf-related-meta .mono { font-size: 10px; opacity: 0.7; letter-spacing: 0.1em; }
.pf-related-title {
  font-family: 'Newsreader', serif; font-style: italic;
  font-size: 18px; letter-spacing: -0.01em;
}
@media (max-width: 700px) {
  .pf-related-grid { grid-template-columns: 1fr; }
}

/* Reduced-motion: kill the slide animations */
@media (prefers-reduced-motion: reduce) {
  .pf-modal-panel { transition: opacity .12s ease; transform: none; }
  .portfolio-grid, .work-grid { transition: none; }
  .pf-tile:hover .pf-media img,
  .pf-tile:hover .pf-media video { transform: none; }
}

/* ============================================================
   Selected Work — Fullscreen scroll section (home page)
   Lumina-style: all 4 projects visible, active one highlighted
   ============================================================ */

.sw-fullscreen {
  position: relative;
  /* height set by JS: (N+1) * 100vh */
}

/* Work page — filter bar inside the dark SW section */
.work-sw-filters {
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  pointer-events: none; /* let clicks through to the section */
}
.work-sw-filters > div {
  pointer-events: all;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Dark-context pill overrides — white on dark bg */
.work-sw-fullscreen .filter-pill {
  border-color: rgba(251,250,247,0.22);
  color: rgba(251,250,247,0.55);
  background: transparent;
  padding: 5px 10px;
  font-size: 0.7em;
}
.work-sw-fullscreen .filter-pill:hover:not(.active) {
  border-color: rgba(251,250,247,0.5);
  color: rgba(251,250,247,0.9);
}
.work-sw-fullscreen .filter-pill.active {
  background: rgba(251,250,247,0.95);
  color: var(--midnight);
  border-color: rgba(251,250,247,0.95);
}
.work-sw-fullscreen .filter-pill.active .pf-pill-count {
  opacity: 0.65;
}

/* Sticky visual panel */
.sw-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--midnight);
}

/* ---- Background image layers ---- */
.sw-bg-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sw-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.sw-bg-layer.is-active {
  opacity: 1;
}

/* ---- Gradient overlay — heavier left vignette for legibility ---- */
.sw-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(4,8,24,0.82) 0%, rgba(4,8,24,0.5) 42%, transparent 70%),
    linear-gradient(to bottom, rgba(4,8,24,0.3) 0%, transparent 20%),
    linear-gradient(to top,    rgba(4,8,24,0.4) 0%, transparent 30%);
  z-index: 1;
  pointer-events: none;
}

/* ---- Corner label — absolute child of sw-sticky, top-left anchored ---- */
.sw-corner-label {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  pointer-events: none;
}

.sw-header-label {
  color: rgba(251,250,247,0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
}

/* ---- Lumina project list ---- */
.sw-list-wrap {
  position: absolute;
  left: 48px;
  bottom: 60px;
  top: auto;
  transform: none;
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;
  width: min(480px, 52vw);
}

.sw-list-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 2px 0;
  opacity: 0.22;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.sw-list-item.is-active {
  opacity: 1;
}

/* Number */
.sw-li-num {
  color: rgba(251,250,247,0.35);
  font-size: 10px;
  letter-spacing: 0.1em;
  line-height: 1;
  padding-top: 7px;
  min-width: 20px;
  flex-shrink: 0;
  transition: color 0.4s ease;
}

.sw-list-item.is-active .sw-li-num {
  color: rgba(251,250,247,0.55);
}

/* Body */
.sw-li-body {
  flex: 1;
  min-width: 0;
}

/* Project name — font-size driven by JS distance scaling */
.sw-li-name {
  font-size: 14px; /* fallback; JS overrides inline */
  color: rgba(251,250,247,0.55);
  line-height: 1.05;
  margin-bottom: 0;
  white-space: nowrap;
  /* No CSS transition — JS lerp drives font-size every scroll frame for smooth trailing */
}

/* Services — stacked below name, fades in when active */
.sw-li-services {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251,250,247,0.45);
  white-space: nowrap;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 6px;
  transition: opacity 0.35s ease, max-height 0.35s ease;
}

.sw-list-item.is-active .sw-li-services {
  opacity: 1;
  max-height: 40px;
}

/* ---- Right rail: dots + "All work" ---- */
.sw-right-rail {
  position: absolute;
  right: 48px;
  bottom: 60px;
  top: auto;
  transform: none;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.sw-dots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sw-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(251,250,247,0.22);
  transition: background 0.35s ease, transform 0.35s ease;
}

.sw-dot.is-active {
  background: var(--bg);
  transform: scale(1.6);
}

.sw-viewall {
  color: rgba(251,250,247,0.35);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-rl;
  transition: color 0.2s;
}

.sw-viewall:hover {
  color: var(--bg);
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .sw-corner-label { top: 20px; left: 50%; transform: translateX(-50%); }
  .sw-list-wrap    { left: 24px; bottom: 60px; top: auto; width: calc(100vw - 72px); }
  .sw-right-rail   { right: 20px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .sw-viewall      { display: none; }
  .sw-li-name      { /* font-size driven by JS */ }
}

/* ---- Click-in expand hint on list items ---- */
.sw-list-item {
  cursor: pointer;
}

.sw-li-expand-hint {
  display: block;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251,250,247,0);
  transition: color 0.35s ease;
  margin-top: 8px;
}

.sw-list-item.is-active .sw-li-expand-hint {
  color: rgba(251,250,247,0.32);
}

.sw-list-item.is-active:hover .sw-li-expand-hint,
.sw-list-item.is-expanded .sw-li-expand-hint {
  color: rgba(251,250,247,0.55);
}

/* ---- Project detail panel (full-screen overlay) ---- */
/* Left backdrop strip — dims the page behind the drawer */
.sw-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(4, 8, 24, 0.52);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease;
  cursor: pointer;
}

.sw-detail-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Right-side drawer panel */
.sw-detail-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 85vw;
  z-index: 200;
  background: var(--bg);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.sw-detail-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.sw-detail-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 48px 120px;
  position: relative;
}

.sw-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-right: 60px;
}

.sw-detail-close {
  position: sticky;
  top: 28px;
  float: right;
  margin-right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.sw-detail-close:hover {
  background: #444;
}

.sw-detail-eyebrow {
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.42;
  margin-bottom: 0;
}

.sw-detail-client-tag {
  color: var(--ink);
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.42;
}

.sw-detail-title {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 62px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.06;
  color: var(--ink);
  margin: 0 0 36px;
}

.sw-detail-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
  margin-bottom: 32px;
  overflow: hidden;
}
.sw-detail-embed--portrait {
  aspect-ratio: 9 / 16;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.sw-detail-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.sw-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(10,10,10,0.10);
  border-bottom: 1px solid rgba(10,10,10,0.10);
  margin-bottom: 40px;
}

.sw-detail-meta-col {
  padding: 20px 0;
  padding-right: 16px;
  border-right: 1px solid rgba(10,10,10,0.10);
}
.sw-detail-meta-col:not(:first-child) {
  padding-left: 20px;
}
.sw-detail-meta-col:last-child {
  border-right: none;
}

.sw-meta-label {
  font-size: 9px;
  font-family: var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.38);
  margin-bottom: 8px;
}

.sw-meta-val {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
}

.sw-detail-summary {
  color: var(--ink);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.8;
  opacity: 0.72;
  max-width: 680px;
  margin: 0;
}

/* Mobile */
@media (max-width: 700px) {
  .sw-detail-inner { padding: 64px 24px 80px; }
  .sw-detail-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .sw-detail-meta-col:nth-child(2) { border-right: none; }
  .sw-detail-meta-col:nth-child(3) { border-right: 1px solid rgba(10,10,10,0.10); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sw-bg-layer        { transition: opacity 0.15s ease; }
  .sw-list-item       { transition: opacity 0.15s ease; }
  .sw-li-services     { transition: none; }
  .sw-detail-panel    { transition: opacity 0.15s ease; }
}

/* ===== Post-SW fade-in ===== */
.section--fade-in {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.section--fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .section--fade-in { transition: opacity 0.15s ease; transform: none; }
}

/* ===== Work page — video hero ===== */
.work-hero-block {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
/* Work page modal — fixed fullscreen, outside .work-hero-block to avoid overflow:hidden clip */
#work-video-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
}
/* Dark overlay so white text pops over the bright video */
.work-hero-block .hero-bg-overlay {
  background: rgba(0, 0, 0, 0.40);
}

/* Full-viewport flex layout — mirrors the homepage hero pattern */
.page-hero--work {
  min-height: 100vh;
  padding: 80px 0 40px;
  display: flex;
  flex-direction: column;
}
.page-hero--work > .shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 48px;
  margin: 0;
}
@media (max-width: 768px) {
  .page-hero--work > .shell { padding: 0 24px; }
  .page-hero--work { padding: 128px 0 32px; }
}
/* Push headline cluster to vertical center via flex spacers */
.page-hero--work .hero-title-row {
  margin-top: auto;
}
.page-hero--work h1 {
  font-size: clamp(56px, 9vw, 140px);
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 0.92;
}
/* Lead text */
.page-hero--work .hero-lead {
  font-size: clamp(16px, 1.1vw, 20px);
  max-width: 600px;
  color: #fff !important;
  margin-bottom: 8px;
}
/* Actions — bottom of cluster, then meta pins to viewport bottom */
.page-hero--work .hero-actions { margin-bottom: 0; }
/* Stats row pins to bottom */
.page-hero--work .page-hero-meta {
  margin-top: auto;
  border-top-color: rgba(255,255,255,0.2);
}
/* Stats labels and values — white over dark video */
.page-hero--work .page-hero-meta .lbl { color: rgba(255,255,255,0.55); }
.page-hero--work .page-hero-meta .val { color: #fff; }
.page-hero--work .page-hero-meta .val.mono { color: rgba(255,255,255,0.7); }
/* h1 and aside — white */
.page-hero--work h1,
.page-hero--work .title-aside { color: #fff; }