/* ═══════════════════════════════════════
   sizrok. site styles
═══════════════════════════════════════ */
/* sz:crit:base:start — everything to sz:crit:base:end is inlined as critical CSS (see inc/perf.php) */
:root {
  --black:      #0D0D0B;
  --ink:        #2A2820;
  --ink-soft:   #3A372C;
  --white:      #FAFAF6;
  --orange:     #FF5F00;
  --paper:      #FBF8F0;
  --cream:      #F2EFE4;
  --warm:       #E4E0D4;
  --warm-2:     #D7D2C2;
  --mid:        #8C8878;
  --rule:       rgba(13,13,11,0.10);
  --rule-2:     rgba(13,13,11,0.18);
  --rule-d:     rgba(255,255,255,0.10);
  --rule-d-2:   rgba(255,255,255,0.20);
  --font:       'Outfit', sans-serif;
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-curtain: cubic-bezier(0.7, 0, 0.3, 1);
  --ease-morph: cubic-bezier(0.65, 0, 0.35, 1);
  --t-morph:    0.45s;

  --pad-x:      max(20px, min(4.5vw, 56px));
  --pad-section: clamp(72px, 10vw, 128px);

  --alert-h:    40px;
  --nav-h:      72px;

  /* Spacing scale (4px base) used across components */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-28:   112px;

  /* Type leading scale */
  --lh-display: 0.95;   /* hero display */
  --lh-headline:1.05;   /* section titles */
  --lh-snug:    1.2;    /* compact heads, labels */
  --lh-eyebrow: 1.45;   /* small labels/eyebrows */
  --lh-body:    1.55;   /* short body */
  --lh-relaxed: 1.6;    /* medium body */
  --lh-loose:   1.75;   /* essay long form */

  --container-max: 1480px;
  --measure:       640px;  /* readable measure for body copy */
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size: 16px; scroll-behavior: smooth; }

/* Desktop density: present the whole design ~20% smaller — as if viewed at 80%
   browser zoom. The site is entirely px-based, so `zoom` is the reliable lever
   (it reflows like real zoom). Scoped to desktop so the separate mobile layout,
   which is treated independently, is left at full size. Tune the value (0.8–0.9)
   to taste; 0.8 == "20% zoomed out". */
@media (min-width: 1025px) {
  html { zoom: 0.8; }
}
body {
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "ss01";
}

/* ═══════════════════════════════════════
   PAGE TRANSITION — warm dark curtain wipes upward to reveal each page,
   with a brand-orange pulse in the centre. ::before is the panel,
   ::after is the dot. Auto-plays on every page load (entrance) and
   reverses on internal nav clicks (exit, see script.js).
═══════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--black);
  pointer-events: none;
  transform: translateY(0);
  animation: curtainReveal 0.95s var(--ease-curtain) 0.05s forwards;
  will-change: transform;
}
body.is-leaving::before {
  animation: curtainCover 0.78s var(--ease-curtain) forwards;
}
/* Visitor arrived via a non-nav internal link (footer, in-content, CTA).
   Skip the curtain entirely so deep-navigation feels instant. The nav
   bar still gets the full wipe — see script.js. */
body.no-transition::before { display: none; }
@keyframes curtainReveal {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}
@keyframes curtainCover {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* Page-entry headline reveal — every page's h1 announces itself just
   after the curtain lifts. Title rises and settles, the orange accent
   words get a quick brightness pulse so they catch the eye. Reduced
   motion users get an instant render. */
.hero__headline,
.page-head__title,
.mf-hero__title {
  animation: h1-stand-out 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both;
  will-change: transform, opacity;
}
.hero__headline .o,
.page-head__title .o,
.mf-hero__title .o {
  animation: h1-accent-flash 0.9s ease-out 1.1s both;
}
/* Pair with the no-transition curtain skip — when we suppress the
   entrance curtain, the h1 reveal would otherwise still play and feel
   detached from the (now instant) page load. Skip both together. */
body.no-transition .hero__headline,
body.no-transition .page-head__title,
body.no-transition .mf-hero__title,
body.no-transition .hero__headline .o,
body.no-transition .page-head__title .o,
body.no-transition .mf-hero__title .o {
  animation: none;
}
@keyframes h1-stand-out {
  0%   { opacity: 0; transform: translateY(32px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes h1-accent-flash {
  0%   { filter: brightness(1); text-shadow: 0 0 0 transparent; }
  35%  { filter: brightness(1.25); text-shadow: 0 0 24px rgba(255, 95, 0, 0.55); }
  100% { filter: brightness(1); text-shadow: 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  .hero__headline,
  .page-head__title,
  .mf-hero__title,
  .hero__headline .o,
  .page-head__title .o,
  .mf-hero__title .o { animation: none; }
}

/* Shared CTA arrow swing — used by .nav__cta, .btn, .alert__cta on hover.
   At rest the arrow reads as ↗ (up-right); on hover it swings down to →
   with a subtle back-ease overshoot ("goes over and lands straight").
   Source glyphs differ (.nav__cta uses ↗, others use →), so default and
   hover rotations are normalised per selector. */
@media (prefers-reduced-motion: reduce) {
  .nav__cta .arrow,
  .btn .arrow,
  .alert__cta .arrow { transition: none !important; transform: none !important; }
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }
em { font-style: normal; }
/* Heading defaults: every heading has a component class in markup; this base rule
   only ensures predictable inherited typography if a class is missing or removed. */
h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: var(--lh-headline);
  color: var(--black);
}
/* Selection — translucent so text reads through and the orange feels like a highlighter
   stroke rather than a hard paint block. text-shadow:none avoids stray AA halos in some browsers. */
::selection {
  background: rgba(255, 95, 0, 0.9);
  color: var(--black);
  text-shadow: none;
}
::-moz-selection {
  background: rgba(255, 95, 0, 0.9);
  color: var(--black);
  text-shadow: none;
}
/* Hero headline uses an even softer wash — the rectangles stack tightly at line-height 0.95
   on the bold display type, so we lower opacity further to keep the highlight unified. */
.hero__headline ::selection {
  background: rgba(255, 95, 0, 0.88);
}
.hero__headline ::-moz-selection {
  background: rgba(255, 95, 0, 0.88);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.container--narrow {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ═══════════════════════════════════════
   ALERT BANNER (top of page)
═══════════════════════════════════════ */
.alert {
  background: var(--cream);
  color: var(--ink);
  min-height: var(--alert-h);
  padding: 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 110;
  border-bottom: 1px solid var(--rule);
}
.alert__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 400;
}
.alert__msg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.alert__msg .pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: var(--orange);
  color: var(--black);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  line-height: 1.2;
}
.alert__icon {
  width: 18px; height: 18px;
  display: inline-grid;
  place-items: center;
  background: var(--orange);
  color: var(--black);
  border-radius: 4px;
  flex-shrink: 0;
}
.alert__icon svg { width: 11px; height: 11px; }
.alert__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 13px;
  color: var(--black);
  font-weight: 500;
  background: rgba(13,13,11,0.06);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.alert__cta .arrow {
  display: inline-block;
  transform-origin: 50% 50%;
  transform: rotate(-45deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.alert__cta:hover { background: var(--orange); color: var(--black); }
.alert__cta:hover .arrow { transform: rotate(0deg); }
@media (max-width: 720px) {
  .alert__inner { font-size: 12px; gap: 8px; }
  .alert__msg .meta { display: none; }
}

/* ═══════════════════════════════════════
   NAV — floating pill (riseatseven-style)
═══════════════════════════════════════ */
.nav {
  position: sticky;
  top: var(--alert-h);
  left: 0; right: 0;
  z-index: 100;
  padding: 14px var(--pad-x);
  background: transparent;
  color: var(--black);
  pointer-events: none;
  transition: padding var(--t-morph) var(--ease-morph);
  /* Lets `width: max-content` tween smoothly in supporting browsers (no-op elsewhere) */
  interpolate-size: allow-keywords;
}
.nav > * { pointer-events: auto; }

/* The pill is the visible component */
.nav__inner {
  /* fit-content + max-width = pill hugs its content but never exceeds the viewport */
  width: fit-content;
  max-width: calc(100vw - 48px);
  margin: 0 auto;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 0 10px 0 22px;
  /* Whiter than the cream body (--paper #FBF8F0) so the pill clearly lifts off the page */
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(13,13,11,0.08);
  border-radius: 999px;
  box-shadow:
    0 10px 32px rgba(13,13,11,0.08),
    0 2px 6px rgba(13,13,11,0.04);
  transition:
    width var(--t-morph) var(--ease-morph),
    max-width var(--t-morph) var(--ease-morph),
    height var(--t-morph) var(--ease-morph),
    padding var(--t-morph) var(--ease-morph),
    gap var(--t-morph) var(--ease-morph),
    background var(--t-morph) var(--ease-morph),
    border-color var(--t-morph) var(--ease-morph),
    box-shadow var(--t-morph) var(--ease-morph);
}
.nav__menu, .nav__burger {
  transition: opacity 0.25s var(--ease);
}

/* Scroll-shrink: pill condenses into a centered chip-bar on desktop.
   All items stay visible — wordmark drops, links become tap-chips, CTA goes icon-only.
   Intentionally NO hover-expand: the compact state is a stable, finished form. */
@media (min-width: 1080px) {
  .nav__brand, .nav__cta, .nav__link, .nav__menu {
    transition:
      font-size var(--t-morph) var(--ease-morph),
      padding var(--t-morph) var(--ease-morph),
      width var(--t-morph) var(--ease-morph),
      height var(--t-morph) var(--ease-morph),
      gap var(--t-morph) var(--ease-morph),
      background 0.2s var(--ease),
      color 0.2s var(--ease),
      border-color var(--t-morph) var(--ease-morph),
      border-radius var(--t-morph) var(--ease-morph);
  }
  .nav.is-scrolled { padding: 10px var(--pad-x); }
  .nav.is-scrolled .nav__inner {
    width: max-content;
    max-width: calc(100vw - 48px);
    height: 46px;
    padding: 0 6px 0 12px;
    gap: 10px;
  }
  /* Brand → icon-only (font-size:0 hides wordmark; SVG mark unaffected) */
  .nav.is-scrolled .nav__brand {
    font-size: 0;
    gap: 0;
  }
  /* Menu stays visible — links become compact chips */
  .nav.is-scrolled .nav__menu {
    gap: 6px;
    justify-content: center;
  }
  .nav.is-scrolled .nav__link {
    font-size: 13px;
    padding: 7px 12px;
    border-radius: 999px;
  }
  /* Drop the underline indicator in compact mode — chips use background instead */
  .nav.is-scrolled .nav__link::after { display: none; }
  .nav.is-scrolled .nav__link:hover { background: rgba(13,13,11,0.06); }
  .nav.is-scrolled .nav__link[aria-current="page"] { background: rgba(13,13,11,0.07); }
  /* CTA → icon-only round button (sized to chip height for visual balance) */
  .nav.is-scrolled .nav__cta {
    font-size: 0;
    padding: 0;
    width: 32px; height: 32px;
    gap: 0;
    justify-content: center;
  }
  .nav.is-scrolled .nav__cta .arrow { font-size: 13px; }
  .nav.is-scrolled .nav__burger { display: none; }
  /* Dropdown anchor follows the shorter pill */
  .nav.is-scrolled .nav__dropdown { top: calc(46px + 22px); }
}

/* Dark-hero variant (home page top) — translucent light pill over the dark hero.
   The frosted glass needs to defend itself against the colourful bubble scene
   behind it: heavier blur smooths the bubbles into a soft gradient, and the
   slightly higher opacity gives text proper contrast. */
body.has-dark-hero:not(.nav-live) .nav .nav__inner {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.22);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  box-shadow:
    0 10px 36px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
body.has-dark-hero:not(.nav-live) .nav .nav__brand { color: var(--white); }
body.has-dark-hero:not(.nav-live) .nav .nav__brand .mark { color: var(--white); }
body.has-dark-hero:not(.nav-live) .nav .nav__link { color: rgba(250,250,246,0.85); }
body.has-dark-hero:not(.nav-live) .nav .nav__link:hover { color: var(--white); }
body.has-dark-hero:not(.nav-live) .nav .nav__cta {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
body.has-dark-hero:not(.nav-live) .nav .nav__cta:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--black);
}
body.has-dark-hero:not(.nav-live) .nav .nav__burger span,
body.has-dark-hero:not(.nav-live) .nav .nav__burger span::before,
body.has-dark-hero:not(.nav-live) .nav .nav__burger span::after { background: var(--white); }

/* ── section-aware tone ────────────────────────────────────────────────
   The nav pill's tone used to track scroll DISTANCE, not the section behind
   it. The dark-hero pill is a 16%-translucent glass with white text: lovely
   over the dark hero, but as the sticky bar carries on over a light section
   the glass goes near-white and the white text disappears. That is the bug.

   Tone is now a single fact — is the section under the bar dark? — that JS
   reads on scroll and writes as .nav--on-dark. These rules give the bar the
   dark-glass look whenever it is; without the class it stays the opaque light
   pill, which reads on any colour. So the glass matches whatever it is over,
   on every page, rather than only near the top of a flagged one.

   Applies in both states: the full pill AND the compact chip take the dark
   tone when they sit over a dark band, so scrolling into a black block never
   leaves a light chip stranded with faint text on it. */
.nav.nav--on-dark:not(.is-scrolled) .nav__inner {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    0 10px 36px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.nav.nav--on-dark:not(.is-scrolled) .nav__brand,
.nav.nav--on-dark:not(.is-scrolled) .nav__brand .mark { color: var(--white); }
.nav.nav--on-dark:not(.is-scrolled) .nav__link { color: rgba(250,250,246,0.85); }
.nav.nav--on-dark:not(.is-scrolled) .nav__link:hover { color: var(--white); }
.nav.nav--on-dark:not(.is-scrolled) .nav__cta {
  background: var(--white); color: var(--black); border-color: var(--white);
}
.nav.nav--on-dark:not(.is-scrolled) .nav__cta:hover {
  background: var(--orange); border-color: var(--orange); color: var(--black);
}
.nav.nav--on-dark:not(.is-scrolled) .nav__burger span,
.nav.nav--on-dark:not(.is-scrolled) .nav__burger span::before,
.nav.nav--on-dark:not(.is-scrolled) .nav__burger span::after { background: var(--white); }

/* Compact chip over a dark band: an opaque dark chip with white content, so
   the condensed bar reads on black exactly as the full pill does. Without
   this the chip kept the light fill and its dark text vanished on black. */
.nav.nav--on-dark.is-scrolled .nav__inner {
  background: rgba(24,23,20,0.72);
  border-color: rgba(255,255,255,0.14);
  box-shadow:
    0 10px 32px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.nav.nav--on-dark.is-scrolled .nav__brand,
.nav.nav--on-dark.is-scrolled .nav__brand .mark { color: var(--white); }
.nav.nav--on-dark.is-scrolled .nav__link { color: rgba(250,250,246,0.85); }
.nav.nav--on-dark.is-scrolled .nav__link:hover {
  background: rgba(255,255,255,0.12); color: var(--white);
}
.nav.nav--on-dark.is-scrolled .nav__link[aria-current="page"] {
  background: rgba(255,255,255,0.14); color: var(--white);
}
.nav.nav--on-dark.is-scrolled .nav__cta {
  background: var(--white); color: var(--black); border-color: var(--white);
}
.nav.nav--on-dark.is-scrolled .nav__cta:hover {
  background: var(--orange); border-color: var(--orange); color: var(--black);
}

/* Scrolled past hero: pill matches the bright white pill used on light pages */
body.has-dark-hero:not(.nav-live) .nav.is-scrolled .nav__inner {
  background: rgba(255,255,255,0.88);
  border-color: rgba(13,13,11,0.08);
  box-shadow:
    0 10px 32px rgba(13,13,11,0.08),
    0 2px 6px rgba(13,13,11,0.04);
}
body.has-dark-hero:not(.nav-live) .nav.is-scrolled { color: var(--black); }
body.has-dark-hero:not(.nav-live) .nav.is-scrolled .nav__brand,
body.has-dark-hero:not(.nav-live) .nav.is-scrolled .nav__brand .mark { color: var(--black); }
body.has-dark-hero:not(.nav-live) .nav.is-scrolled .nav__link { color: var(--ink); }
body.has-dark-hero:not(.nav-live) .nav.is-scrolled .nav__cta {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
body.has-dark-hero:not(.nav-live) .nav.is-scrolled .nav__cta:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--black);
}
body.has-dark-hero:not(.nav-live) .nav.is-scrolled .nav__burger span,
body.has-dark-hero:not(.nav-live) .nav.is-scrolled .nav__burger span::before,
body.has-dark-hero:not(.nav-live) .nav.is-scrolled .nav__burger span::after { background: var(--black); }
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--black);
  transition: color 0.3s var(--ease);
}
.nav__brand .dot { color: var(--orange); }
.nav__brand .mark { width: 24px; height: 24px; color: var(--black); transition: color 0.3s var(--ease); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
}
.nav__link {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
  transition: color 0.25s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__link .plus {
  display: inline-block;
  font-weight: 300;
  opacity: 0.6;
  transition: transform 0.3s var(--ease);
}
.nav__link[aria-expanded="true"] .plus { transform: rotate(45deg); }
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--orange);
  transition: width 0.3s var(--ease);
}
.nav__link:hover { color: var(--black); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }

/* default CTA — flat 2px corners per brand rule */
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  background: var(--black);
  padding: 8px 14px 8px 16px;
  border: 1px solid var(--black);
  border-radius: 999px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nav__cta:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }
.nav__cta .arrow {
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav__cta:hover .arrow { transform: rotate(45deg); }

/* SERVICES DROPDOWN */
.nav__dropdown {
  position: absolute;
  top: calc(var(--nav-h) + 22px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(880px, calc(100vw - 48px));
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(13,13,11,0.10);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  z-index: 105;
}
.nav__dropdown[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dd-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.nav__dd-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
}
.nav__dd-eye {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--mid);
  margin-bottom: 8px;
}
.nav__dd-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--black);
  transition: color 0.25s var(--ease);
}
.nav__dd-list a:hover { color: var(--orange); }
.nav__dd-list a .arrow { color: var(--mid); transition: transform 0.25s var(--ease), color 0.25s var(--ease); }
.nav__dd-list a:hover .arrow { color: var(--orange); transform: translate(2px, -2px); }
.nav__dd-promo {
  background: var(--black);
  border: none;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.nav__dd-promo .mark-bg {
  position: absolute;
  right: -18px; bottom: -18px;
  width: 140px; height: 140px;
  color: var(--white);
  opacity: 0.08;
}

/* Promo artwork — wide photo, bleeds full-panel. Two scrims keep
   white text + white CTA readable regardless of brightness in the
   underlying photo:
   - Horizontal: heavy black on the title side, fading to a softer
     wash on the right (still tinted dark for tonal cohesion).
   - Vertical bottom-up: extra darken behind the CTA so a bright
     spot in the photo at that position can't bleach the button. */
.nav__dd-promo .promo-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 16px;
}
.nav__dd-promo .promo-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  animation: promo-art-breathe 14s ease-in-out infinite;
  transform-origin: 60% 50%;
  /* Slight desaturation + brightness pull-down so a bright photo
     blends with the dark dropdown panel instead of shouting against it. */
  filter: saturate(0.85) brightness(0.82);
}
.nav__dd-promo .promo-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* bottom-up darken behind the CTA */
    linear-gradient(0deg,
      rgba(13, 13, 11, 0.55) 0%,
      rgba(13, 13, 11, 0.10) 40%,
      rgba(13, 13, 11, 0)    70%),
    /* left-to-right title scrim, stronger and wider than before */
    linear-gradient(90deg,
      rgba(13, 13, 11, 0.94) 0%,
      rgba(13, 13, 11, 0.82) 30%,
      rgba(13, 13, 11, 0.50) 58%,
      rgba(13, 13, 11, 0.20) 85%,
      rgba(13, 13, 11, 0.10) 100%);
  pointer-events: none;
}
.nav__dd-promo .title,
.nav__dd-promo .cta { position: relative; z-index: 2; }

@keyframes promo-art-breathe {
  0%, 100% { transform: scale(1)    translateX(0); }
  50%      { transform: scale(1.03) translateX(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__dd-promo .promo-art img { animation: none; }
}
.nav__dd-promo .title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--white);
  position: relative; z-index: 2;
  text-shadow: none;
  max-width: 220px;
}
.nav__dd-promo .cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--white);
  color: var(--black);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  align-self: flex-start;
  position: relative; z-index: 2;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav__dd-promo .cta:hover { background: var(--orange); color: var(--black); }
.nav__dd-promo .cta .arrow { transition: transform 0.25s var(--ease); }
.nav__dd-promo .cta:hover .arrow { transform: translate(2px, -2px); }

/* In dark-hero state, dropdown still uses paper (the panel itself is light) */
@media (max-width: 767px) {
  .nav__dropdown { display: none; }
}

.nav__burger {
  display: none;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
}
.nav__burger span,
.nav__burger span::before,
.nav__burger span::after {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--black);
  position: relative;
}
.nav__burger span::before { content: ''; position: absolute; left: 0; top: -7px; }
.nav__burger span::after  { content: ''; position: absolute; left: 0; top: 7px; }

@media (max-width: 767px) {
  .nav__menu { display: none; }
  .nav__burger { display: inline-flex; }
}

/* mobile menu sheet */
.menu-sheet {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 99;
  padding: calc(var(--alert-h) + var(--nav-h) + 24px) var(--pad-x) 32px;
  transform: translateY(-100%);
  transition: transform 0.45s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.menu-sheet[data-open="true"] { transform: translateY(0); }
/* Menu sheet is the mobile-only nav. Hide it outright on desktop so a
   transform/transition glitch on initial load can never flash it
   visible inside the page area. */
@media (min-width: 768px) {
  .menu-sheet { display: none; }
}
.menu-sheet a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--black);
}
.menu-sheet a .arrow { color: var(--mid); transition: transform 0.25s var(--ease), color 0.25s var(--ease); }
.menu-sheet a:hover .arrow { transform: translateX(4px); color: var(--orange); }
.menu-sheet__foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
.menu-sheet__foot a { font-size: 14px; padding: 0; border: none; font-weight: 400; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--black);
  background: var(--black);
  color: var(--white);
  /* Brand rule: max 2px corner radius, sharp surfaces. */
  border-radius: 999px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn .arrow {
  display: inline-block;
  transform-origin: 50% 50%;
  transform: rotate(-45deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }
.btn:hover .arrow { transform: rotate(0deg); }
.btn--ghost {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn--ghost:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--orange {
  background: var(--orange);
  color: var(--black);
  border-color: var(--orange);
}
/* White on hover — visible on the dark .cta-strip where this button lives */
.btn--orange:hover { background: var(--white); color: var(--black); border-color: var(--white); }
/* Light-background contexts (contact form, etc.) — the global white hover is
   invisible on cream/paper. Invert to black instead. */
.contact-form .btn--orange:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.btn--lg { padding: 17px 28px; font-size: 15px; }

/* ═══════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════ */
.section {
  padding: var(--pad-section) 0;
}
.section--paper { background: var(--paper); }
.section--cream { background: var(--cream); }
.section--black { background: var(--black); color: var(--white); }
.section--bordered { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.section-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 16px;
  letter-spacing: -0.005em;
}
.section--black .section-eyebrow { color: rgba(250,250,246,0.65); }

.section-title {
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--black);
  max-width: 880px;
}
.section--black .section-title { color: var(--white); }
.section-title b, .section-title .b { font-weight: 700; }
.section-title .o { color: var(--orange); font-weight: 600; }
.section-title .soft { color: var(--mid); }
.section--black .section-title .soft { color: rgba(250,250,246,0.4); }

.section-aside {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 420px;
  padding-bottom: 4px;
}
.section--black .section-aside { color: rgba(250,250,246,0.7); }

@media (max-width: 767px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; }
}
/* sz:crit:base:end */

/* ═══════════════════════════════════════
   HERO (home) — full-bleed dark, centered, riseatseven-style
═══════════════════════════════════════ */
/* sz:crit:hero:start — homepage above-the-fold, inlined on the front page only */
.hero {
  position: relative;
  /* Lock the hero to one viewport so headline + sub + CTAs always read above
     the fold. min-height fallback keeps the section sane on very short
     viewports. */
  height: calc(100vh - var(--alert-h));
  min-height: 560px;
  margin-top: calc(0px - var(--nav-h) - 28px);
  padding: calc(var(--nav-h) + 32px) var(--pad-x) 32px;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  display: grid;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.hero__bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,95,0,0.12) 0, transparent 45%),
    radial-gradient(circle at 75% 80%, rgba(255,255,255,0.04) 0, transparent 50%);
}
.hero__bg-mark {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: min(1200px, 110vw);
  height: min(1200px, 110vw);
  color: var(--white);
  opacity: 0.025;
  filter: blur(2px);
}
.hero__bg-mark svg { width: 100%; height: 100%; }
.hero__bg video,
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px) brightness(0.5);
  transform: scale(1.05);
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,11,0.0) 0%, rgba(13,13,11,0.5) 100%);
  pointer-events: none;
}

/* ═══════════════════════════════════════
   HERO CODE BACKGROUND — blue-sky blurred Python field behind the bubbles.
   z-index sits between .hero__bg (decorative) and .hero__three (canvas)
   so the bubble scene renders on top of the sky.
═══════════════════════════════════════ */
.hero__code-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero__code-stack {
  position: absolute;
  inset: -5%;
  filter: blur(7px);
  -webkit-filter: blur(7px);
  /* Brand-dark sky: deep warm ink up top fading down through burnt umber
     and burnt sienna to a smoky terracotta near the "horizon". Reads as
     a dusk/autumn evening — sits in the same warm-dark register as the
     rest of the brand. */
  background: linear-gradient(180deg,
    #0A0604 0%,
    #170D08 18%,
    #25160E 38%,
    #361E13 60%,
    #472618 82%,
    #562E1C 100%);
}
.hero__code-cloud {
  position: absolute;
  /* Smoky warm clouds — soft cream/peach light catching dust in the
     dusk air. Lower opacity than the bright-sky version so they read as
     atmosphere, not pasted-on shapes. */
  background: radial-gradient(
    ellipse at center,
    rgba(255, 220, 180, 0.32) 0%,
    rgba(255, 200, 160, 0.20) 30%,
    rgba(255, 180, 130, 0.08) 55%,
    transparent 78%
  );
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, rgba(0,0,0,0.7) 55%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 30%, rgba(0,0,0,0.7) 55%, transparent 80%);
}
.hero__code-cloud--1 { top: 6%; left: 4%; width: 48%; height: 28%; }
.hero__code-cloud--2 { bottom: 12%; right: 6%; width: 42%; height: 24%; }

.hero__code-block {
  position: absolute;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 80vw;
  font-family: var(--font);
  font-feature-settings: "tnum";
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.01em;
}
.hero__code-line { display: flex; align-items: baseline; }
.hero__code-line__num {
  flex: 0 0 32px;
  min-width: 32px;
  font-size: 11px;
  font-weight: 300;
  text-align: right;
  padding-right: 14px;
  color: rgba(220, 180, 140, 0.22);
  user-select: none;
  font-feature-settings: "tnum";
}
.hero__code-line__content {
  flex: 1;
  white-space: pre;
  /* Warm peach glow on the dark dusk sky — gives the code that lit-from-
     within feeling without going pure white. */
  text-shadow: 0 0 5px rgba(255, 220, 180, 0.35);
}
/* Tokens for a dark warm sky — light cream body, brand orange keyword. */
.hero__tok-keyword { color: rgba(255, 140, 70,  0.92); }
.hero__tok-string  { color: rgba(255, 215, 165, 0.72); }
.hero__tok-comment { color: rgba(220, 195, 165, 0.42); }
.hero__tok-default { color: rgba(250, 235, 215, 0.78); }

@media (max-width: 1024px) {
  .hero__code-bg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__code-stack { filter: blur(4px); -webkit-filter: blur(4px); }
}

/* 3D bubble layer sits between the static decorative bg and the hero copy.
   pointer-events:auto so the canvas itself can capture clicks for the
   explosion gesture, while the dark hero text remains on top via z-index. */
.hero__three {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: auto;
  /* Promote the canvas to its own compositor layer so heavy GPU work
     (scroll-driven physics + impulses) doesn't trigger page-wide repaint
     when scrolling. Especially helps the scroll-up jitter. */
  will-change: transform;
  transform: translateZ(0);
  contain: layout style paint;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  gap: 18px;
}
.hero__creds {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(250,250,246,0.6);
  letter-spacing: 0.005em;
}
.hero__creds .sep {
  width: 28px;
  height: 1px;
  background: rgba(250,250,246,0.3);
}
.hero__pillline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(250,250,246,0.55);
  flex-wrap: wrap;
  justify-content: center;
}
.hero__pillline .pill {
  padding: 5px 11px;
  border: 1px solid rgba(250,250,246,0.18);
  border-radius: 999px;
  color: rgba(250,250,246,0.85);
  font-weight: 500;
}
.hero__pillline .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(250,250,246,0.4);
}

.hero__headline {
  /* Sized by min(width, height) so the headline always fits in the viewport,
     not just on wide screens. Caps mean it never gets too small or too big. */
  font-size: clamp(40px, min(7vw, 12vh), 124px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--white);
  max-width: 1280px;
  margin: 0 auto;
}
.hero__headline .line {
  display: block;
}
.hero__headline b { font-weight: 700; }
.hero__headline .o { color: var(--orange); font-weight: 700; }

/* inline image bubble inside the headline */
.hero__bubble {
  display: inline-grid;
  place-items: center;
  width: clamp(56px, 8vw, 112px);
  height: clamp(56px, 8vw, 112px);
  /* Bubble keeps its rounded character (user explicit: "don't change bubbles"). */
  border-radius: 22px;
  background: var(--orange);
  color: var(--black);
  vertical-align: -0.18em;
  margin: 0 0.06em 0 0.04em;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease);
  box-shadow: 0 8px 30px rgba(255,95,0,0.25);
}
.hero__bubble:hover { transform: rotate(-3deg) scale(1.04); }
.hero__bubble svg {
  width: 60%;
  height: 60%;
}
.hero__bubble--play .triangle {
  border-left-color: var(--black);
  margin-left: 6px;
}
.hero__bubble--mark { background: var(--paper); color: var(--ink); }
.hero__bubble--video {
  background: var(--black);
  /* Pulsing orange halo signals "this is the watchable thing" without
     covering the play icon. box-shadow extends past the bubble's
     overflow:hidden, so the ring rides outside the rounded square. */
  animation: bubblePulse 2.4s ease-out infinite;
}
.hero__bubble--video::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,95,0,0.4) 0, transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.1) 0, transparent 60%);
}
.hero__bubble--video .triangle {
  position: relative;
  z-index: 1;
  border-left-color: var(--white);
  margin-left: 4px;
}
@keyframes bubblePulse {
  0%   { box-shadow: 0 8px 30px rgba(255,95,0,0.25), 0 0 0 0   rgba(255, 95, 0, 0.55); }
  60%  { box-shadow: 0 8px 30px rgba(255,95,0,0.25), 0 0 0 18px rgba(255, 95, 0, 0); }
  100% { box-shadow: 0 8px 30px rgba(255,95,0,0.25), 0 0 0 0   rgba(255, 95, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bubble--video { animation: none; }
}

.hero__sub {
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(250,250,246,0.7);
  max-width: 620px;
  margin: 0 auto;
}
.hero__sub b { color: var(--white); font-weight: 500; }

/* Recently-shipped proof chip — concrete business outcomes rotate through
   at the top of the hero. Live pulse dot signals freshness; thin orange
   bar separator keeps the row visually clean. Reads as proof, not boast. */
.hero__proof {
  /* Floats in the middle of the dead space between the nav and the H1 —
     not pinned to either. position:absolute takes it out of hero__inner's
     centered stack so the headline/sub/CTAs keep their own vertical balance. */
  position: absolute;
  top: calc(var(--nav-h) + clamp(56px, 9vh, 130px));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 6px 14px 6px 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: max-content;
  line-height: 1;
  color: rgba(250, 250, 246, 0.9);
  z-index: 2;
}
.hero__proof-pulse {
  width: 6px;
  height: 6px;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 8px rgba(255, 95, 0, 0.55);
}
.hero__proof-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1.5px solid rgba(255, 95, 0, 0.55);
  border-radius: 50%;
  animation: proofPulse 1.8s ease-out infinite;
}
.hero__proof-label {
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 11px;
  color: rgba(250, 250, 246, 0.55);
  line-height: 1;
}
.hero__proof-sep {
  width: 1px;
  height: 11px;
  background: rgba(255, 95, 0, 0.55);
  flex-shrink: 0;
}
.hero__proof-text {
  color: rgba(250, 250, 246, 0.92);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: inline-block;
}
.hero__proof-text.is-out {
  opacity: 0;
  transform: translateY(4px);
}
@keyframes proofPulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  80%  { opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (max-width: 600px) {
  .hero__proof { font-size: 11.5px; padding: 5px 12px 5px 10px; gap: 8px; }
  .hero__proof-label, .hero__proof-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__proof-pulse::after { animation: none; }
  .hero__proof-text { transition: none; }
}

/* Hero CTAs sit just below the sub copy. Stack on small screens, side by side
   above. The ghost variant inverts to a light outline so it reads on the
   dark hero without competing with the orange primary. */
.hero__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
/* Featured-on badge, sits under the hero CTAs. */
.hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  position: relative;
  z-index: 2;
}
/* The badge is a hidden easter-egg: invisible until the spider tile in the
   headline is hovered, then it fades in. Its space is reserved so nothing shifts.
   pointer-events stay off so hovering the empty slot never reveals it — only the
   spider does. :has() drives the reveal (supported across evergreen browsers). */
.hero__badge {
  display: inline-flex;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.hero__badge img, .hero__badge-svg { display: block; height: auto; max-width: 100%; }
/* Click the spider tile to toggle the badge open; it stays put (a real, clickable
   backlink) until the spider is clicked again or you click away. No hover, so it
   never slides away when the pointer moves off — JS adds/removes .is-shown. */
.hero__badge.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.hero__bubble--mark { cursor: pointer; }
.hero__cta-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(250,250,246,0.35);
}
.hero__cta-ghost:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.hero__corners {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--space-8);
  padding-top: var(--space-4);
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}
.hero__corner {
  font-size: 13px;
  font-weight: 400;
  color: rgba(250,250,246,0.65);
  line-height: 1.5;
  max-width: 280px;
}
.hero__corner b { color: var(--white); font-weight: 500; display: block; margin-bottom: 2px; }
.hero__corner.right { text-align: right; justify-self: end; }
.hero__corner.left { justify-self: start; }
.hero__scroll {
  align-self: end;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(250,250,246,0.5);
  letter-spacing: 0.06em;
}
.hero__scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent);
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(1); transform-origin: top; }
  50% { transform: scaleY(0.4); transform-origin: top; }
}

/* Hover/click hint — waving hand icon, dashed connector, all-caps label.
   Stripped-back tooling-style cue (cf. oryzo.ai). Auto-dismisses on the
   first hero click (see hero-3d.js). */
.hero__poke {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  color: rgba(250,250,246,0.55);
  opacity: 0;
  animation: pokeFadeIn 0.8s ease 1.4s forwards;
  transition: opacity 0.5s ease;
}
.hero__poke.is-dismissed { opacity: 0; }
.hero__poke-icon {
  width: 24px;
  height: 24px;
  color: rgba(250,250,246,0.7);
  transform-origin: 50% 85%;
  animation: pokeWave 2.6s ease-in-out infinite;
}
.hero__poke-line {
  width: 130px;
  height: 1px;
  background-image: linear-gradient(90deg, currentColor 50%, transparent 50%);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  opacity: 0.55;
}
.hero__poke-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(250,250,246,0.6);
}
@keyframes pokeFadeIn { to { opacity: 1; } }
@keyframes pokeWave {
  0%, 60%, 100% { transform: rotate(0deg); }
  68%           { transform: rotate(-14deg); }
  76%           { transform: rotate(12deg); }
  84%           { transform: rotate(-8deg); }
  92%           { transform: rotate(6deg); }
}
@media (max-width: 600px) {
  .hero__poke-line { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__poke-icon { animation: none; }
}

@media (max-width: 767px) {
  .hero { height: calc(100vh - var(--alert-h)); padding-top: calc(var(--nav-h) + 24px); }
  .hero__corners { grid-template-columns: 1fr auto; gap: 12px; padding-top: 16px; }
  .hero__corner.right { text-align: right; justify-self: end; }
  .hero__scroll { display: none; }
}

/* Drop the supporting corner copy on short viewports so the headline, sub,
   and CTAs always read above the fold. */
@media (max-height: 760px) {
  .hero__corner { display: none; }
  .hero__corners { padding-top: 0; }
}
@media (max-height: 640px) {
  .hero__pillline { display: none; }
}

/* sz:crit:hero:end */

/* ═══════════════════════════════════════
   SHOWREEL: full-bleed video well
═══════════════════════════════════════ */
.showreel {
  background: var(--black);
  color: var(--white);
  padding: var(--space-20) 0 var(--space-24);
  position: relative;
}
.showreel__head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 32px;
}
.showreel__eye {
  font-size: 13px;
  font-weight: 500;
  color: rgba(250,250,246,0.55);
  margin-bottom: 12px;
}
.showreel__title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--white);
  max-width: 720px;
}
.showreel__title .o { color: var(--orange); font-weight: 700; }
.showreel__aside {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(250,250,246,0.65);
  max-width: 360px;
  padding-bottom: 4px;
}
.showreel__well {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
}
.showreel__well video,
.showreel__well img,
.showreel__well iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.showreel__well-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,95,0,0.12) 0, transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.04) 0, transparent 60%);
}
.showreel__well-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 56px 56px;
}
.showreel__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(13,13,11,0.4);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.showreel__play:hover { background: var(--orange); border-color: var(--orange); transform: translate(-50%, -50%) scale(1.06); }
.showreel__play:hover .triangle { border-left-color: var(--black); }
/* Playing state — fade the play button + decorative overlays out and let the
   native video controls take over. JS toggles .is-playing on the well. */
.showreel__well-bg,
.showreel__well-grid { transition: opacity 0.3s var(--ease); }
.showreel__well.is-playing .showreel__play,
.showreel__well.is-playing .showreel__well-bg,
.showreel__well.is-playing .showreel__well-grid {
  opacity: 0;
  pointer-events: none;
}
.triangle {
  width: 0; height: 0;
  border-left: 16px solid var(--white);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 4px;
  transition: border-left-color 0.3s var(--ease);
}

@media (max-width: 767px) {
  .showreel__head { grid-template-columns: 1fr; gap: 16px; }
  .showreel__play { width: 72px; height: 72px; }
}

/* ═══════════════════════════════════════
   TICKER
═══════════════════════════════════════ */
.ticker {
  background: var(--black);
  color: var(--white);
  height: 48px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid var(--black);
}
.ticker__track {
  display: flex;
  white-space: nowrap;
  animation: tickerScroll 40s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(250,250,246,0.85);
}
.ticker__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 768px) { .ticker__track { animation-duration: 60s; } }


/* ═══════════════════════════════════════
   SECTORS BAR (replaces "client logos")
═══════════════════════════════════════ */
.sectors {
  background: var(--paper);
  padding: var(--space-14) 0;
  border-bottom: 1px solid var(--rule);
}
.sectors__row {
  display: flex;
  align-items: center;
  gap: 48px;
}
.sectors__label {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 220px;
  line-height: 1.45;
}
.sectors__label .h { color: var(--black); font-weight: 500; display: block; }
.sectors__marquee {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.sectors__track {
  display: flex;
  animation: tickerScroll 50s linear infinite;
}
.sectors__marquee:hover .sectors__track { animation-play-state: paused; }
/* Slow the marquee on narrow screens so it doesn't scroll proportionally
   faster past the smaller viewport (mirrors the .ticker__track mobile rule). */
@media (max-width: 768px) { .sectors__track { animation-duration: 70s; } }
.sectors__item {
  flex-shrink: 0;
  padding: 0 28px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.sectors__item .slash { color: var(--mid); font-weight: 300; }
.sectors__item .meta { font-size: 12px; color: var(--mid); font-weight: 400; }
@media (max-width: 720px) {
  .sectors__row { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ═══════════════════════════════════════
   SERVICES OVERVIEW — sticky-stacking cards (homepage block)
   Black centred cards with an icon plate at top, large title, centred
   body. Each card pins as you scroll, the next slides up over it.
   Subtle per-card tilt gives the pile-of-cards feel.
═══════════════════════════════════════ */
.svc-overview {
  display: flex;
  flex-direction: column;
  gap: 32px;
  border: none;
  background: transparent;
}
.svc-tile {
  position: sticky;
  top: calc(var(--alert-h) + var(--nav-h) + 40px);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  justify-items: center;
  text-align: center;
  gap: 20px;
  padding: 64px 56px 48px;
  min-height: 70vh;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  background: #25221B;
  color: var(--white);
  border-radius: 22px;
  text-decoration: none;
  box-shadow:
    0 30px 60px -20px rgba(13, 13, 11, 0.20),
    0 12px 24px -12px rgba(13, 13, 11, 0.14);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.4s var(--ease);
  will-change: transform;
}
/* Stagger each card so the previous tops peek through, plus a stronger
   alternating tilt + tiny x-offset that survives even when pinned —
   gives a real pile-of-cards feel. Each card sits ~36px lower than the
   one above so the underneath top edges are clearly visible as a stack
   when more than one is pinned. */
.svc-tile:nth-child(1) { z-index: 1; top: calc(var(--alert-h) + var(--nav-h) + 40px);  transform: translateX(-14px) rotate(-2.4deg); background: #2A2720; }
.svc-tile:nth-child(2) { z-index: 2; top: calc(var(--alert-h) + var(--nav-h) + 76px);  transform: translateX(8px)   rotate(1.6deg);  background: #25221B; }
.svc-tile:nth-child(3) { z-index: 3; top: calc(var(--alert-h) + var(--nav-h) + 112px); transform: translateX(-6px)  rotate(-1.2deg); background: #221F18; }
.svc-tile:nth-child(4) { z-index: 4; top: calc(var(--alert-h) + var(--nav-h) + 148px); transform: translateX(10px)  rotate(2deg);    background: #1E1B15; }
.svc-tile:nth-child(5) { z-index: 5; top: calc(var(--alert-h) + var(--nav-h) + 184px); transform: translateX(-8px)  rotate(-1.6deg); background: #1A1812; }

.svc-tile:hover {
  transform: translateX(0) rotate(0deg) translateY(-4px) !important;
  box-shadow:
    0 50px 90px -25px rgba(13, 13, 11, 0.45),
    0 20px 40px -15px rgba(13, 13, 11, 0.28);
}

/* SERVICES HUB — pinned side-stack reveal. The section is taller than the
   viewport; an inner pinned panel stays put while the user scrolls through
   it, and JS uses that scroll progress to slide each card in from the
   right. Each new card lands slightly offset to the right of the previous,
   building up a deck-like stack — different from a horizontal scroll
   carousel, the user is moving the cards by scrolling the page itself. */
.svc-stack {
  position: relative;
  /* 100vh of pin + extra scroll length for the reveal animation.
     The taller the section, the more scroll each card's slide-in is
     spread over, so the reveal reads slower/more deliberate. Tuned with
     the ENTER_END threshold in script.js (0.88) so the pin releases
     shortly after the last card lands — no long dead-scroll buffer.
     ~440vh over 6 cards ≈ 57vh of scroll per card, so each arrives
     deliberately rather than flicking past. */
  height: 440vh;
  background: var(--paper);
}
.svc-stack__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-stack__rail {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-stack__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(280px, 36vw, 460px);
  height: clamp(360px, 60vh, 520px);
  /* Cards start centred, off-screen right; JS writes --x and --r to
     translate + tilt them into their stacked positions as scroll
     progresses. */
  transform:
    translate(calc(-50% + var(--x, 110vw)), -50%)
    rotate(var(--r, 0deg));
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 36px 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  box-shadow:
    0 30px 60px -28px rgba(13, 13, 11, 0.32),
    0 12px 24px -16px rgba(13, 13, 11, 0.18);
  will-change: transform;
  transition: background 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease);
}
.svc-stack__card:hover {
  background: var(--paper);
  border-color: rgba(255, 95, 0, 0.30);
}
.svc-stack__num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--mid);
  font-family: var(--font);
  font-feature-settings: "tnum";
}
.svc-stack__title {
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--black);
  margin: 0;
  transition: color 0.25s var(--ease, ease);
}
.svc-stack__card:hover .svc-stack__title { color: var(--orange); }
.svc-stack__desc {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}
.svc-stack__link {
  margin-top: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  transition: color 0.25s var(--ease, ease);
}
.svc-stack__link .arrow {
  display: inline-block;
  transform: rotate(-45deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.svc-stack__card:hover .svc-stack__link { color: var(--orange); }
.svc-stack__card:hover .svc-stack__link .arrow { transform: rotate(0deg) translateX(3px); }

/* Per-card palettes — each stack card picks up the colour of its
   matching 3D bubble so the deck visually rhymes with the network
   above. All five colours come from the brand system: orange / ink /
   amber / paper / warm. Hovers shift the title into brand orange when
   the bg is a neutral, into white when the bg is already orange. */
.svc-stack__card[data-index="0"] {
  background: var(--orange);
  border-color: rgba(13, 13, 11, 0.12);
}
.svc-stack__card[data-index="0"] .svc-stack__title { color: var(--paper); }
.svc-stack__card[data-index="0"] .svc-stack__num { color: rgba(251, 248, 240, 0.62); }
.svc-stack__card[data-index="0"] .svc-stack__desc { color: rgba(251, 248, 240, 0.86); }
.svc-stack__card[data-index="0"] .svc-stack__link { color: var(--paper); }
.svc-stack__card[data-index="0"]:hover { background: #E84500; }
.svc-stack__card[data-index="0"]:hover .svc-stack__title { color: var(--paper); }
.svc-stack__card[data-index="0"]:hover .svc-stack__link { color: var(--paper); }

.svc-stack__card[data-index="1"] {
  background: var(--ink);
  border-color: rgba(255, 95, 0, 0.20);
}
.svc-stack__card[data-index="1"] .svc-stack__title { color: var(--white); }
.svc-stack__card[data-index="1"] .svc-stack__num { color: rgba(255, 95, 0, 0.85); }
.svc-stack__card[data-index="1"] .svc-stack__desc { color: rgba(250, 250, 246, 0.78); }
.svc-stack__card[data-index="1"] .svc-stack__link { color: var(--orange); }
.svc-stack__card[data-index="1"]:hover { background: #221F18; }
.svc-stack__card[data-index="1"]:hover .svc-stack__title { color: var(--orange); }

.svc-stack__card[data-index="2"] {
  background: #FFB000;
  border-color: rgba(13, 13, 11, 0.12);
}
.svc-stack__card[data-index="2"] .svc-stack__title { color: var(--ink); }
.svc-stack__card[data-index="2"] .svc-stack__num { color: rgba(13, 13, 11, 0.55); }
.svc-stack__card[data-index="2"] .svc-stack__desc { color: var(--ink-soft); }
.svc-stack__card[data-index="2"] .svc-stack__link { color: var(--ink); }
.svc-stack__card[data-index="2"]:hover { background: #FFC133; }
.svc-stack__card[data-index="2"]:hover .svc-stack__title { color: var(--ink); }
.svc-stack__card[data-index="2"]:hover .svc-stack__link { color: var(--ink); }

.svc-stack__card[data-index="3"] {
  background: var(--paper);
}
.svc-stack__card[data-index="3"]:hover { background: var(--cream); }

.svc-stack__card[data-index="4"] {
  background: var(--warm);
}
.svc-stack__card[data-index="4"] .svc-stack__title { color: var(--orange); }
.svc-stack__card[data-index="4"]:hover { background: var(--warm-2); }
.svc-stack__card[data-index="4"]:hover .svc-stack__title { color: var(--orange); }

/* Reduced motion: collapse the pinned reveal into a static vertical stack
   so users who don't want scroll-driven animation get a clean, readable
   list. */
@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  .svc-stack {
    height: auto;
    padding: clamp(40px, 8vw, 80px) 0;
  }
  .svc-stack__pin {
    position: static;
    height: auto;
    display: block;
  }
  .svc-stack__rail {
    flex-direction: column;
    height: auto;
    padding: 0 var(--pad-x);
    gap: 16px;
  }
  .svc-stack__card {
    position: relative;
    top: auto; left: auto;
    transform: none !important;
    width: 100%;
    height: auto;
    min-height: 280px;
    margin: 0 auto;
    max-width: 560px;
  }
}

.svc-tile__icon {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--black);
  border-radius: 22px;
  margin-bottom: 12px;
  box-shadow: 0 12px 30px -8px rgba(255, 95, 0, 0.55);
}
.svc-tile__icon svg {
  width: 44px;
  height: 44px;
  display: block;
}
.svc-tile__num {
  font-size: 12px;
  font-weight: 500;
  color: rgba(250, 250, 246, 0.45);
  font-feature-settings: "tnum";
  letter-spacing: 0.04em;
}
.svc-tile__title {
  font-size: clamp(44px, 5.4vw, 80px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--white);
  margin: 0;
}
.svc-tile__desc {
  font-size: clamp(16px, 1.15vw, 19px);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(250, 250, 246, 0.72);
  max-width: 50ch;
  margin: 0;
}
.svc-tile__link {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(250, 250, 246, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid rgba(250, 250, 246, 0.18);
  border-radius: 999px;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.svc-tile__link .arrow {
  display: inline-block;
  transform: rotate(-45deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.svc-tile:hover .svc-tile__link {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--black);
}
.svc-tile:hover .svc-tile__link .arrow { transform: rotate(0deg); }

@media (max-width: 767px) {
  .svc-tile {
    padding: 48px 32px 36px;
    min-height: 78vh;
    border-radius: 22px;
  }
  .svc-tile__icon { width: 80px; height: 80px; border-radius: 18px; }
  .svc-tile__icon svg { width: 38px; height: 38px; }
}

/* Below mobile, drop sticky and the tilts — sticky stacks need vertical
   headroom that small viewports don't have. */
@media (max-width: 600px) {
  .svc-overview { gap: 16px; }
  .svc-tile {
    position: relative;
    top: auto !important;
    transform: none !important;
    min-height: 0;
    padding: 36px 24px;
    border-radius: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-tile { position: relative; top: auto !important; transform: none !important; }
}

/* ═══════════════════════════════════════
   WORK GRID — horizontal scrolling row
   Cards are fixed-width tiles in a horizontally scrolling row. Native
   overflow scroll handles browsing on touch and desktop (trackpad and
   scrollbar). The cards are links straight to the case studies.
═══════════════════════════════════════ */
.work-grid__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 12px 6px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: rgba(13, 13, 11, 0.04);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.work-grid__hint svg {
  flex-shrink: 0;
  color: var(--orange);
}
.work-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 18px;
  scroll-behavior: smooth;
  /* Slight inner padding so the first/last cards don't touch the edges
     when scrolled to either end. */
  scroll-padding: 0 24px;
  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 13, 11, 0.22) transparent;
}
.work-grid::-webkit-scrollbar { height: 4px; }
.work-grid::-webkit-scrollbar-track { background: transparent; }
.work-grid::-webkit-scrollbar-thumb {
  background: rgba(13, 13, 11, 0.20);
  border-radius: 999px;
}
.work-grid::-webkit-scrollbar-thumb:hover { background: rgba(13, 13, 11, 0.32); }

.work-card {
  flex: 0 0 auto;
  width: clamp(300px, 34vw, 440px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease);
}
.work-card:hover { transform: translateY(-3px); border-color: var(--rule-2); }
/* span-X classes are no-ops in carousel mode but harmless if left in HTML */
.work-card.span-7, .work-card.span-5, .work-card.span-6,
.work-card.span-4, .work-card.span-8, .work-card.span-12 { grid-column: auto; }

.work-card__img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.work-card__img--ink   { background: var(--ink);   color: var(--cream); }
.work-card__img--cream { background: var(--cream); color: var(--ink); }
.work-card__img--warm  { background: var(--warm);  color: var(--ink); }
.work-card__img--orange{ background: var(--orange); color: var(--black); }

/* clean horizontal-line-led card composition */
.work-card__img-frame {
  position: absolute;
  inset: 24px;
  border: 1px solid currentColor;
  opacity: 0.18;
}
.work-card__img-h1 {
  position: absolute;
  left: 24px; right: 24px;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.18;
}
.work-card__img--ink .work-card__img-frame,
.work-card__img--ink .work-card__img-h1,
.work-card__img--orange .work-card__img-frame,
.work-card__img--orange .work-card__img-h1 { opacity: 0.28; }

.work-card__img-mark {
  position: absolute;
  bottom: 28px; left: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.work-card__img-mark .code {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: currentColor;
  opacity: 0.7;
}
.work-card__img-mark .name {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 0.98;
  color: currentColor;
  max-width: 70%;
}
.work-card__img-tag {
  position: absolute;
  top: 24px; left: 24px;
  font-size: 11px;
  font-weight: 500;
  color: currentColor;
  opacity: 0.7;
}
.work-card__img-year {
  position: absolute;
  top: 24px; right: 24px;
  font-size: 11px;
  font-weight: 500;
  color: currentColor;
  opacity: 0.7;
  font-feature-settings: "tnum";
}

.work-card__body {
  padding: 22px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.work-card__head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--mid);
  font-weight: 500;
}
.work-card__title {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--black);
}
.work-card__title .soft { color: var(--mid); font-weight: 400; }
.work-card__desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
}
.work-card__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--mid);
}
.work-card__link {
  color: var(--black);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.work-card__link .arrow { transition: transform 0.25s var(--ease); }
.work-card:hover .work-card__link .arrow { transform: translateX(3px); }

@media (max-width: 600px) {
  .work-card { width: 86vw; }
  .work-grid__hint { font-size: 10px; }
}

/* ═══════════════════════════════════════
   PHILOSOPHY (alternating text/image)
═══════════════════════════════════════ */
.phil {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.phil--reverse .phil__media { order: 2; }
.phil__media {
  display: block;
  aspect-ratio: 5/6;
  background:
    radial-gradient(ellipse at 50% 32%, #FFFFFF 0%, #F4F1E8 55%, #E4DFCE 100%);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}
.phil__media-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(13,13,11,0.05) 1px, transparent 0);
  background-size: 22px 22px;
  opacity: 0.55;
}
/* Static drop shadow under the book — no longer animated. */
.phil__media::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 36%;
  height: 6%;
  background: radial-gradient(ellipse at center,
    rgba(13,13,11,0.42) 0%,
    rgba(13,13,11,0.14) 55%,
    transparent 100%);
  filter: blur(10px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}
.phil__media-mark {
  position: absolute;
  inset: 8% 14% 8% 14%;
  color: var(--ink);
  filter: drop-shadow(0 30px 36px rgba(13,13,11,0.32));
  /* Static book — perspective tilt baked in as a fixed transform.
     Previously this floated up/down and the panel background washed
     to brand orange on hover; both removed per design call. */
  transform: rotateY(-7deg) rotateZ(-1.2deg);
  z-index: 2;
}
.phil__media-pattern { z-index: 1; }
.phil__media-tag { z-index: 3; }
.phil__media-mark svg { width: 100%; height: 100%; display: block; }
.phil__media-tag {
  position: absolute;
  top: 24px; left: 24px;
  padding: 6px 14px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.phil__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.phil__eye {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.phil__title {
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--black);
}
.phil__title b { font-weight: 700; }
.phil__title .o { color: var(--orange); font-weight: 700; }
.phil__title .soft { color: var(--mid); }
.phil__copy {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}
.phil__copy p + p { margin-top: 16px; }
.phil__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  border-bottom: 1px solid var(--black);
  padding-bottom: 2px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.phil__link:hover { color: var(--orange); border-color: var(--orange); }
.phil__link .arrow { transition: transform 0.25s var(--ease); }
.phil__link:hover .arrow { transform: translateX(3px); }

@media (max-width: 767px) {
  .phil { grid-template-columns: 1fr; gap: 24px; }
  .phil--reverse .phil__media { order: 0; }
  .phil__media { max-width: 320px; }
}

/* ═══════════════════════════════════════
   VALUE PROP — three-pillar (riseatseven "Legacy")
═══════════════════════════════════════ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pillar {
  padding: 48px 32px 40px 0;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pillar:last-child { border-right: none; padding-right: 0; }
.pillar:not(:first-child) { padding-left: 32px; }
.pillar__num {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--orange);
  letter-spacing: 0.04em;
}
.pillar__title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.05;
  color: var(--black);
  /* Reserve 2 lines so columns with shorter titles still align their body
     copy with longer-title columns alongside them */
  min-height: 2.1em;
}
.pillar__title b { font-weight: 700; }
.pillar__title .o { color: var(--orange); font-weight: 700; }
.pillar__copy {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pillar__num-big {
  font-size: clamp(60px, 7vw, 96px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--black);
  font-feature-settings: "tnum";
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  flex-wrap: wrap;
}
.pillar__num-big .unit {
  color: var(--orange);
  font-size: 0.36em;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: none; border-bottom: 1px solid var(--rule); padding: 32px 0; }
  .pillar:not(:first-child) { padding-left: 0; }
  .pillar:last-child { border-bottom: none; }
}

/* ═══════════════════════════════════════
   BLOG CARDS
═══════════════════════════════════════ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* Two-up layout when there are only two posts — centred so it reads as intentional. */
.blog-grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
/* Branded graphic cover (inline SVG fills the 16/10 image area). */
.post-card__cover .post-card__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.post-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease);
}
.post-card:hover { transform: translateY(-3px); border-color: var(--rule-2); }
.post-card__img {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--cream);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.post-card__img--ink { background: var(--ink); color: var(--cream); }
.post-card__img--warm { background: var(--warm); color: var(--ink); }
.post-card__img-mark {
  position: absolute;
  bottom: 24px; left: 24px;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1;
  color: currentColor;
  max-width: 75%;
  opacity: 0.92;
}
.post-card__img-tag {
  position: absolute;
  top: 20px; left: 20px;
  font-size: 11px;
  font-weight: 500;
  color: currentColor;
  opacity: 0.7;
}
.post-card__img-frame {
  position: absolute;
  inset: 24px;
  border: 1px solid currentColor;
  opacity: 0.16;
}
.post-card__body {
  padding: 22px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.post-card__meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--mid);
  font-weight: 500;
}
.post-card__meta .cat { color: var(--orange); }
.post-card__title {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--black);
}
.post-card__excerpt {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
}
.post-card__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--mid);
}
.post-card__foot .read {
  color: var(--black);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.post-card:hover .post-card__foot .read { color: var(--orange); }
.post-card__foot .arrow { transition: transform 0.25s var(--ease); }
.post-card:hover .post-card__foot .arrow { transform: translateX(3px); }

@media (max-width: 767px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-grid--two { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   POST TILES  (list pages — blog, insights)
   Three-column grid of media-led tiles. Big rounded image, a small
   read-time line, then a bold title. No card chrome, no excerpt — the
   image carries the visual weight, the title carries the meaning.
═══════════════════════════════════════ */
.post-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
.post-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.post-tile__media {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--cream);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 22px;
  transition: transform 0.5s var(--ease);
}
.post-tile:hover .post-tile__media { transform: translateY(-4px); }
.post-tile__media--ink { background: var(--ink); color: var(--cream); }
.post-tile__media--cream { background: var(--cream); color: var(--ink); }
.post-tile__media--warm { background: var(--warm); color: var(--ink); }
.post-tile__media-frame {
  position: absolute;
  inset: 22px;
  border: 1px solid currentColor;
  opacity: 0.16;
  border-radius: 6px;
}
.post-tile__media-tag {
  position: absolute;
  top: 20px; left: 24px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: currentColor;
  opacity: 0.75;
  text-transform: uppercase;
  z-index: 1;
}
.post-tile__media-mark {
  position: absolute;
  bottom: 24px; left: 24px;
  right: 24px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.05;
  color: currentColor;
  opacity: 0.92;
}
.post-tile__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--mid);
  font-weight: 400;
  margin-bottom: 12px;
}
.post-tile__meta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
.post-tile__title {
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--black);
  margin: 0;
  transition: color 0.25s var(--ease);
}
.post-tile:hover .post-tile__title { color: var(--orange); }

.post-tile--soon .post-tile__media { opacity: 0.78; }
.post-tile--soon:hover .post-tile__media { transform: none; }
.post-tile--soon:hover .post-tile__title { color: var(--black); }

@media (max-width: 767px) {
  .post-tiles { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 600px) {
  .post-tiles { grid-template-columns: 1fr; gap: 36px; }
  .post-tile__title { font-size: 22px; }
}

/* Empty state for blog / insights — shown when no posts have been published.
   Same dashed-card pattern as `.roles-empty` on the careers page. */
.posts-empty {
  margin: 32px auto 0;
  padding: 64px 32px;
  border: 1px dashed var(--rule-2);
  border-radius: 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  max-width: 720px;
}
.posts-empty__dash {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--orange);
  margin-bottom: 20px;
  vertical-align: middle;
}
.posts-empty__title {
  font-size: 22px;
  font-weight: 500;
  color: var(--black);
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.posts-empty__sub {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--mid);
  max-width: 460px;
  margin: 0 auto 28px;
}
.posts-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.posts-empty__cta:hover { background: var(--orange); color: var(--black); border-color: var(--orange); }
.posts-empty__cta .arrow {
  display: inline-block;
  transform-origin: 50% 50%;
  transform: rotate(-45deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.posts-empty__cta:hover .arrow { transform: rotate(0deg); }

/* ═══════════════════════════════════════
   CTA STRIP
═══════════════════════════════════════ */
.cta-strip {
  background: var(--black);
  color: var(--white);
  padding: var(--pad-section) 0;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.025) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%);
}
.cta-strip .container { position: relative; z-index: 1; }
.cta-strip__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule-d);
}
.cta-strip__title {
  font-size: clamp(34px, 4.4vw, 68px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--white);
}
.cta-strip__title b { font-weight: 700; }
.cta-strip__title .o { color: var(--orange); font-weight: 700; }
/* Soft phrase drops onto its own line so the title reads as two clean
   beats — "One real conversation." then "Sixty minutes." — instead of
   awkwardly wrapping a single word to line 2. */
.cta-strip__title .soft { color: rgba(250,250,246,0.32); display: block; }
.cta-strip__side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 440px;
  padding-bottom: 6px;
}
.cta-strip__sub {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(250,250,246,0.78);
}
.cta-strip__meta {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.cta-strip__meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.cta-strip__meta-item .label { color: rgba(250,250,246,0.42); font-size: 12px; font-weight: 500; }
.cta-strip__meta-item .val { color: var(--white); font-weight: 500; font-size: 14px; }
.cta-strip__meta-item a { color: var(--white); transition: color 0.25s var(--ease); }
.cta-strip__meta-item a:hover { color: var(--orange); }

@media (max-width: 767px) {
  .cta-strip__row { grid-template-columns: 1fr; gap: 24px; }
  /* 3 items in a 2-col grid left the 3rd stranded on its own row; stack to a
     single column on mobile (the vals are full phrases, so 3-col is too tight). */
  .cta-strip__meta { grid-template-columns: 1fr; gap: 16px; }
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer {
  background: var(--black);
  color: var(--white);
  padding: var(--space-16) 0 var(--space-8);
  border-top: 1px solid var(--rule-d);
}
.footer__newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-bottom: 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--rule-d);
}
.footer__newsletter-copy h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--white);
  margin-bottom: 8px;
}
.footer__newsletter-copy p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(250,250,246,0.55);
  max-width: 420px;
}
.footer__newsletter-form {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 4px 4px 4px 20px;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.footer__newsletter-form:focus-within {
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.08);
}
.footer__newsletter-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px 10px 0;
}
.footer__newsletter-form input::placeholder { color: rgba(250,250,246,0.42); }
.footer__newsletter-form button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orange);
  color: var(--black);
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.footer__newsletter-form button .arrow { transition: transform 0.25s var(--ease); display: inline-block; }
.footer__newsletter-form button:hover { background: var(--white); }
.footer__newsletter-form button:hover .arrow { transform: translateX(2px); }
/* Submitted state — JS toggles data-state="success" on the form */
.footer__newsletter-form[data-state="success"] {
  border-color: rgba(255,95,0,0.5);
  background: rgba(255,95,0,0.08);
}
.footer__newsletter-form[data-state="success"] input { color: rgba(250,250,246,0.65); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin-bottom: 56px;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 360px;
}
.footer__brand .mark { width: 36px; height: 36px; color: var(--white); }
.footer__brand .word {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.footer__brand .word .dot { color: var(--orange); }
.footer__brand .desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(250,250,246,0.55);
}
.footer__col h4 {
  font-size: 12px;
  font-weight: 500;
  color: rgba(250,250,246,0.4);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__col a {
  font-size: 14px;
  font-weight: 400;
  color: rgba(250,250,246,0.78);
  transition: color 0.25s var(--ease);
}
.footer__col a:hover { color: var(--orange); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--rule-d);
  font-size: 12px;
  color: rgba(250,250,246,0.4);
  flex-wrap: wrap;
  gap: 16px;
}
/* Utility-link cluster (404, eventually privacy/terms). Sits inline so it
   reads as a quiet aside, not another nav row. */
.footer__util {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer__util a {
  color: rgba(250,250,246,0.4);
  font-size: 12px;
  font-weight: 400;
  transition: color 0.25s var(--ease);
}
.footer__util a:hover { color: var(--orange); }
.footer__util__sep {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(250,250,246,0.25);
}

@media (max-width: 1100px) {
  .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .footer__newsletter {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
}

/* ═══════════════════════════════════════
   PAGE HEADER (inner pages)
═══════════════════════════════════════ */
/* sz:crit:pagehead:start — interior-page above-the-fold, inlined off the front page */
.page-head {
  padding: var(--space-16) 0 var(--pad-section);
  background: var(--paper);
}
.page-head__title {
  font-size: clamp(44px, 5.6vw, 92px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--black);
  max-width: 1100px;
  margin-bottom: 32px;
}
/* Services-page masthead: title and the 3D node graph share the horizontal
   space, 50/50, so the graph reads as a partner to the headline rather than
   a banner above it. Stacks under the title on smaller viewports. */
.page-head__masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 32px;
}
.page-head__masthead .page-head__title {
  margin-bottom: 0;
  font-size: clamp(40px, 4.6vw, 76px);
}
.page-head__masthead .svc-map { margin: 0; }
@media (max-width: 767px) {
  .page-head__masthead {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .page-head__masthead .page-head__title { font-size: clamp(48px, 7vw, 116px); }
}
.page-head__title b { font-weight: 700; }
.page-head__title .o { color: var(--orange); font-weight: 700; }
.page-head__title .soft { color: var(--mid); }
/* Keep a soft phrase together so it always wraps as a single unit rather
   than stranding a single word on the line above it. */
.page-head__title .soft--nowrap { white-space: nowrap; }
.page-head__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: end;
  padding-top: 24px;
}
.page-head__intro {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 580px;
}
.page-head__intro p + p { margin-top: 24px; }
.page-head__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  font-size: 13px;
  padding-bottom: 4px;
}
.page-head__meta dt { color: var(--mid); font-weight: 400; }
.page-head__meta dd { color: var(--ink); font-weight: 500; }

@media (max-width: 767px) {
  .page-head__row { grid-template-columns: 1fr; gap: 24px; }
}

/* When a content section directly follows the page-head (list pages like
   insights, blog, services etc.), compress the page-head padding and the
   section top padding so the first card peeks above the fold instead of
   sitting behind a viewport of dead space. */
.page-head:has(+ .section) { padding: 32px 0 24px; }
.page-head:has(+ .section) .page-head__title { margin-bottom: 20px; }
.page-head + .section { padding-top: 32px; }
/* sz:crit:pagehead:end */

/* ═══════════════════════════════════════
   FILTER BAR
═══════════════════════════════════════ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
}
.filter-bar__label {
  font-size: 12px;
  color: var(--mid);
  margin-right: 8px;
}
.filter-bar button {
  padding: 8px 14px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  border-radius: 999px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.filter-bar button:hover {
  background: var(--orange);
  color: var(--black);
  border-color: var(--orange);
}
.filter-bar button[aria-pressed="true"] {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.filter-bar button[aria-pressed="true"]:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

/* ═══════════════════════════════════════
   SUB-SERVICE PAGE LAYOUT
═══════════════════════════════════════ */
.svc-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.svc-detail__media {
  position: sticky;
  top: calc(var(--alert-h) + var(--nav-h) + 24px);
  aspect-ratio: 5/6;
  background: var(--cream);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.svc-detail__media-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(13,13,11,0.10) 1px, transparent 0);
  background-size: 22px 22px;
}
.svc-detail__media-mark {
  position: absolute;
  inset: 26%;
  color: var(--ink);
}
.svc-detail__media-mark svg { width: 100%; height: 100%; }
.svc-detail__media-tag {
  position: absolute;
  top: 24px; left: 24px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
}
.svc-detail__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.svc-detail__intro h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--black);
  margin-bottom: 16px;
}
.svc-detail__intro h2 .o { color: var(--orange); font-weight: 700; }
.svc-detail__intro p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}
.svc-detail__intro p + p { margin-top: 16px; }

.svc-detail__block h3 {
  font-size: 13px;
  font-weight: 500;
  color: var(--mid);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.svc-detail__list { list-style: none; border-top: 1px solid var(--rule); }
.svc-detail__list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.45;
  font-weight: 400;
}
.svc-detail__list li .idx {
  font-size: 13px;
  font-weight: 500;
  color: var(--orange);
  font-feature-settings: "tnum";
  padding-top: 2px;
}
.svc-detail__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.svc-detail__meta-item {
  padding: 16px;
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.svc-detail__meta-item .label { font-size: 11px; color: var(--mid); font-weight: 500; }
.svc-detail__meta-item .val { font-size: 15px; color: var(--black); font-weight: 500; }

@media (max-width: 767px) {
  .svc-detail { grid-template-columns: 1fr; gap: 24px; }
  .svc-detail__media { position: static; max-width: 320px; }
}

/* ═══════════════════════════════════════
   FAQ
═══════════════════════════════════════ */
.faq { max-width: 920px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%;
  text-align: left;
  padding: 24px 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.25s var(--ease);
}
.faq__q:hover { color: var(--orange); }
.faq__q .icon { width: 18px; height: 18px; position: relative; flex-shrink: 0; }
.faq__q .icon::before, .faq__q .icon::after {
  content: ''; position: absolute; background: currentColor; transition: transform 0.3s var(--ease);
}
.faq__q .icon::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.faq__q .icon::after  { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
.faq__item[data-open="true"] .faq__q .icon::after { transform: translateX(-50%) rotate(90deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq__a-inner {
  padding: 0 0 24px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 720px;
}

/* ═══════════════════════════════════════
   CONTACT
═══════════════════════════════════════ */
/* Single-column form layout — eyebrow, heading and form stack inside
   a constrained measure so line lengths stay comfortable. */
.contact-block {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-block .section-eyebrow { margin-bottom: 8px; }

/* Thin section variant — used for the careers nudge strip so it doesn't
   inherit the full .section vertical rhythm meant for content blocks. */
.section--tight { padding: 32px 0; }

/* ═══════════════════════════════════════
   SITEMAP
   Index page with 5 columns of links. Column heads styled to match the
   sitewide eyebrow/label convention (small, uppercase, tracked) so they
   sit consistently with the rest of the typography rather than rendering
   at browser-default h2 sizes.
═══════════════════════════════════════ */
.sm__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px 32px;
}
.sm__col h2 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.sm__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sm__col a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  font-weight: 400;
  color: var(--black);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.sm__col a:hover { color: var(--orange); }
.sm__col a:hover .sm__url { color: var(--orange); }
.sm__url {
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--mid);
  transition: color 0.2s var(--ease);
}
.sm__foot {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 13px;
  color: var(--mid);
}
.sm__foot a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.sm__foot a:hover { color: var(--orange); text-decoration-color: var(--orange); }

/* Compressed trust signals beside the primary CTA — replaces a generic
   reply-time helper line with the three reassurances a hesitating visitor
   actually wants right next to the button: duration, cost, response window. */
.contact-trust {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.contact-trust b { color: var(--ink); font-weight: 600; }
.contact-trust__sep { color: var(--rule-2); }

/* Studio meta card — same surface as the original .contact-side but
   instructions removed; now a focused trust block (location, hours, approach). */
.contact-side--meta h3 { font-size: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mid); }
.contact-side--meta dl { padding-top: 0; border-top: 0; }

/* Careers nudge — demoted from a full conversion card to a single quiet
   strip so it cannot compete with the booking CTA above it. */
.contact-careers-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  font-weight: 300;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.contact-careers-strip b { color: var(--black); font-weight: 500; }
.contact-careers-strip .arrow { color: var(--mid); transition: transform 0.25s var(--ease), color 0.25s var(--ease); }
.contact-careers-strip:hover { border-color: var(--ink); color: var(--black); }
.contact-careers-strip:hover .arrow { color: var(--orange); transform: translate(3px, -3px); }

/* ═══════════════════════════════════════
   REVEAL
═══════════════════════════════════════ */
/* Reveal — soft rise + faint scale + blur, all on a single smooth out-expo curve.
   The blur masks the lift's start so motion feels organic rather than mechanical. */
[data-reveal] {
  /* Lighter initial state — even if the observer fires a frame late, the
     content is already readable. The earlier blur(6px) + opacity:0 read
     as "broken" when content was caught mid-fade on a fast scroll. */
  opacity: 0.4;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.09s; }
[data-reveal-delay="2"] { transition-delay: 0.18s; }
[data-reveal-delay="3"] { transition-delay: 0.27s; }
[data-reveal-delay="4"] { transition-delay: 0.36s; }

[data-counter] .value {
  display: inline-block;
  font-feature-settings: "tnum";
  /* Subtle scale pop while counting — JS toggles `.is-counting` for the duration */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-counter].is-counting .value { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .ticker__track, .sectors__track { animation: none !important; }
}

/* ═══════════════════════════════════════
   CAREERS — open roles + CV submission form
═══════════════════════════════════════ */
/* Empty state — shown when there are no open roles. Quiet, on-brand,
   doesn't try to fake a list with placeholders. */
.roles-empty {
  margin-top: 56px;
  padding: 56px 32px;
  border: 1px dashed var(--rule-2);
  border-radius: 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  max-width: 720px;
}
.roles-empty__dash {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--orange);
  margin-bottom: 20px;
  vertical-align: middle;
}
.roles-empty__title {
  font-size: 20px;
  font-weight: 500;
  color: var(--black);
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.roles-empty__sub {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--mid);
  max-width: 480px;
  margin: 0 auto;
}

/* Open-roles list (used when roles are live; markup in careers.html is
   commented out by default). Each row reads like an editorial line item. */
.roles {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.role {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  transition: background 0.25s var(--ease);
}
.role:hover { background: rgba(255, 255, 255, 0.5); }
.role__head { display: flex; flex-direction: column; gap: 6px; }
.role__title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--black);
}
.role__meta {
  font-size: 13px;
  color: var(--mid);
  letter-spacing: 0.02em;
}
.role__desc {
  grid-column: 1 / 2;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.55;
  margin-top: 4px;
}
.role__cta {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--black);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.role__cta:hover { background: var(--black); color: var(--white); }
.role__cta .arrow {
  display: inline-block;
  transform: rotate(-45deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.role__cta:hover .arrow { transform: rotate(0deg); }

@media (max-width: 600px) {
  .role { grid-template-columns: 1fr; gap: 12px; }
  .role__cta { grid-row: auto; grid-column: auto; align-self: flex-start; }
  .role__desc { grid-column: auto; }
}

.cv-form {
  margin-top: 48px;
  max-width: 880px;
}
.cv-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}
.cv-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cv-form__field--full { grid-column: 1 / -1; }
.cv-form__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
}
.cv-form__hint {
  font-weight: 300;
  color: var(--mid);
  margin-left: 6px;
}
.cv-form input,
.cv-form textarea {
  font: inherit;
  font-size: 15px;
  font-weight: 300;
  color: var(--black);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  padding: 14px 16px;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cv-form input::placeholder,
.cv-form textarea::placeholder { color: var(--mid); font-weight: 300; }
.cv-form input:focus,
.cv-form textarea:focus {
  border-color: var(--black);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(13,13,11,0.05);
}
/* Contact-form inputs are inline-styled (can't carry a :focus rule), so the
   focus state lives here — replaces the browser's default blue ring with the
   brand black focus. The 1px box-shadow ring reads as a black border without
   fighting the inline border declaration. */
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--black), 0 0 0 4px rgba(13,13,11,0.05);
}
.cv-form textarea { min-height: 120px; line-height: 1.55; }
/* GDPR consent — horizontal layout, exempt the checkbox from the generic
   input styling above. */
.cv-form__consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.cv-form__consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 2px 0 0;
  padding: 0;
  border-radius: 6px;
  accent-color: var(--orange);
  cursor: pointer;
}
.cv-form__consent span {
  font-size: 14px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.5;
}
.cv-form__consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.cv-form__consent a:hover { color: var(--orange); }
.cv-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.cv-form__meta {
  font-size: 13px;
  color: var(--mid);
  font-weight: 300;
}
/* Success state — JS toggles data-state="success" */
.cv-form[data-state="success"] {
  position: relative;
}
.cv-form[data-state="success"] .cv-form__grid,
.cv-form[data-state="success"] .cv-form__foot { display: none; }
.cv-form__success {
  display: none;
  padding: 40px 32px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 16px;
  text-align: center;
}
.cv-form[data-state="success"] .cv-form__success { display: block; }
.cv-form__success h3 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.018em;
  margin-bottom: 8px;
}
.cv-form__success p { font-size: 15px; color: var(--ink); font-weight: 300; }

/* CV upload — custom-styled file input. The native input is hidden but kept
   in the DOM so form submit picks up the file; the visible label acts as the
   hit area, doubling as a drop zone with the JS in script.js wiring dragover
   states. */
.cv-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 18px 20px;
  background: var(--paper);
  border: 1px dashed var(--rule-2);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.cv-upload:hover { border-color: var(--black); background: var(--white); }
.cv-upload.is-dragover {
  border-color: var(--orange);
  border-style: solid;
  background: rgba(255, 95, 0, 0.04);
}
.cv-upload.has-file {
  border-style: solid;
  border-color: var(--black);
  background: var(--white);
}
.cv-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.cv-upload__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.cv-upload__icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background 0.2s var(--ease);
}
.cv-upload.has-file .cv-upload__icon { background: var(--orange); color: var(--black); }
.cv-upload__text {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cv-upload.has-file .cv-upload__text { font-weight: 500; color: var(--black); }
.cv-upload__clear {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(13,13,11,0.06);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.cv-upload__clear:hover { background: var(--orange); color: var(--black); }
.cv-upload__hint {
  font-size: 12px;
  color: var(--mid);
  font-weight: 300;
  margin-top: 8px;
}
.cv-upload__hint code {
  font: inherit;
  background: rgba(13,13,11,0.05);
  padding: 1px 6px;
  border-radius: 4px;
}
.cv-upload__error {
  font-size: 13px;
  color: var(--orange);
  font-weight: 500;
  margin-top: 8px;
}

@media (max-width: 720px) {
  .cv-form__grid { grid-template-columns: 1fr; }
  .cv-form__foot { flex-direction: column; align-items: stretch; }
  .cv-form__foot .btn { justify-content: center; }
}

/* ═══════════════════════════════════════
   MANIFESTO PAGE — long-form essay layout
═══════════════════════════════════════ */
.mf-hero {
  background: var(--black);
  color: var(--white);
  /* Pull up under the sticky nav so the dark bg sits behind the translucent pill,
     then compensate with internal padding. Same trick as `.hero` on the home page. */
  margin-top: calc(0px - var(--nav-h) - 28px);
  padding: calc(var(--nav-h) + 28px + 96px) 0 96px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.mf-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%);
}
/* Decorative mark in the hero corner — gives the page a graphic anchor */
.mf-hero__mark {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 34vw, 480px);
  height: clamp(280px, 34vw, 480px);
  color: var(--white);
  opacity: 0.035;
  filter: blur(1px);
  pointer-events: none;
  z-index: 0;
}
.mf-hero__mark svg { width: 100%; height: 100%; }
.mf-hero .container { position: relative; z-index: 1; }
.mf-hero__eye {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--orange);
  margin-bottom: 32px;
}
.mf-hero__eye::before {
  content: ''; width: 32px; height: 1px; background: rgba(255,95,0,0.5);
}
.mf-hero__title {
  font-size: clamp(48px, 7.5vw, 120px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--white);
  margin-bottom: 36px;
  max-width: 1200px;
}
.mf-hero__title .o { color: var(--orange); font-weight: 600; }
.mf-hero__title .soft { color: rgba(250,250,246,0.4); font-weight: 300; }
.mf-hero__lead {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: rgba(250,250,246,0.78);
  max-width: 720px;
  font-weight: 300;
}
.mf-hero__lead strong { color: var(--white); font-weight: 500; }
.mf-hero__meta {
  display: flex; flex-wrap: wrap; gap: 32px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  color: rgba(250,250,246,0.55);
}
.mf-hero__meta dt {
  color: rgba(250,250,246,0.35);
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.mf-hero__meta dd { color: var(--white); font-weight: 400; }

/* Reading progress — thin orange bar pinned to top of viewport, fills as you scroll.
   Sits just under the alert/nav strip without competing visually. */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(13,13,11,0.06);
  z-index: 200;
  pointer-events: none;
}
.reading-progress__bar {
  width: 100%;
  height: 100%;
  background: var(--orange);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.08s linear;
  /* Soft glow on the leading edge */
  box-shadow: 0 0 8px rgba(255,95,0,0.55);
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress__bar { transition: none; }
}

/* TOC chip rail */
.mf-toc {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.mf-toc a {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 400;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.mf-toc a:hover {
  background: var(--black); color: var(--white); border-color: var(--black);
}
.mf-toc a .n {
  font-size: 11px;
  color: var(--mid);
  font-variant-numeric: tabular-nums;
}
.mf-toc a:hover .n { color: rgba(255,255,255,0.55); }

/* Section-level header used inside the manifesto sections */
.mf-section-head {
  margin-bottom: 56px;
  position: relative;
}
/* Giant faded section number as a magazine watermark — set via data-num */
.mf-section-head[data-num]::before {
  content: attr(data-num);
  position: absolute;
  top: -28px;
  right: -8px;
  font-size: clamp(120px, 14vw, 220px);
  font-weight: 600;
  line-height: 1;
  color: rgba(13,13,11,0.04);
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: 0;
}
.mf-section-head > * { position: relative; z-index: 1; }
section.section--cream .mf-section-head[data-num]::before {
  color: rgba(13,13,11,0.05);
}
.mf-section-head__num {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--orange);
  margin-bottom: 24px;
}
.mf-section-head__num::before {
  content: ''; width: 32px; height: 1px; background: rgba(255,95,0,0.4);
}
.mf-section-head__title {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--black);
  margin-bottom: 28px;
  max-width: 1080px;
}
.mf-section-head__title .o { color: var(--orange); font-weight: 600; }
.mf-section-head__title .soft { color: var(--mid); font-weight: 300; }
.mf-section-head__lead {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: var(--ink);
  font-weight: 300;
  max-width: 760px;
}
.mf-section-head__lead strong { font-weight: 500; color: var(--black); }

/* Two-column body that doesn't read newspaper-y — wide gap, generous typography */
.mf-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: 1080px;
}
.mf-body--single { grid-template-columns: 1fr; max-width: 720px; }
.mf-body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  font-weight: 300;
}
.mf-body p + p { margin-top: 22px; }
.mf-body strong { color: var(--black); font-weight: 500; }

/* Pull quote inside long-form */
.mf-pull {
  margin: 64px 0;
  padding: 48px 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}
.mf-pull blockquote {
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--black);
  max-width: 1080px;
  margin-bottom: 20px;
}
.mf-pull blockquote .o { color: var(--orange); font-weight: 500; }
.mf-pull blockquote .soft { color: var(--mid); font-weight: 300; }
.mf-pull cite {
  font-style: normal;
  font-size: 12px;
  color: var(--mid);
  letter-spacing: 0.04em;
}

/* Stats row — three cards in a strip */
.mf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 48px 0 0;
}
.mf-stat {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 32px;
}
.mf-stat__num {
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--black);
  margin-bottom: 16px;
}
.mf-stat__num .unit { color: var(--orange); font-weight: 400; }
.mf-stat__label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 300;
  margin-bottom: 12px;
}
.mf-stat__source {
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 0.06em;
}

/* Timeline cards */
.mf-tl {
  display: grid;
  gap: 16px;
  margin-top: 48px;
}
.mf-tl__item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  align-items: start;
}
.mf-tl__item.is-now {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.mf-tl__period {
  font-size: 13px;
  font-weight: 500;
  color: var(--orange);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.mf-tl__title {
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: inherit;
  margin-bottom: 14px;
}
.mf-tl__body {
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  color: inherit;
  opacity: 0.85;
}
.mf-tl__body strong { font-weight: 500; opacity: 1; }

/* Service-blocks for "what we build" — alternating tonal cards */
.mf-svcs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
}
.mf-svc {
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
}
.mf-svc.is-dark {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.mf-svc__num {
  font-size: 12px;
  color: var(--orange);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  font-weight: 500;
}
.mf-svc__title {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin-bottom: 14px;
}
.mf-svc__body {
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300;
  opacity: 0.85;
}

/* Closing CTA — dark, simple, finishing the long-read with an action */
.mf-closing {
  background: var(--black);
  color: var(--white);
  padding: var(--pad-section) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mf-closing::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.025) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
}
.mf-closing .container { position: relative; z-index: 1; }
.mf-closing__title {
  font-size: clamp(40px, 6.5vw, 96px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin-bottom: 32px;
}
.mf-closing__title .o { color: var(--orange); font-weight: 600; }
.mf-closing__title .soft { color: rgba(250,250,246,0.42); font-weight: 300; }
.mf-closing__body {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: rgba(250,250,246,0.75);
  font-weight: 300;
  max-width: 680px;
  margin: 0 auto 40px;
}
.mf-closing__body strong { color: var(--white); font-weight: 500; }
.mf-closing__ctas {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.mf-closing .btn--ghost {
  border-color: rgba(255,255,255,0.3); color: var(--white);
}
.mf-closing .btn--ghost:hover {
  background: var(--white); color: var(--black); border-color: var(--white);
}

@media (max-width: 767px) {
  .mf-hero { padding: 110px 0 72px; }
  .mf-body { grid-template-columns: 1fr; gap: var(--space-6); }
  .mf-stats { grid-template-columns: 1fr; }
  .mf-tl__item { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6); }
  .mf-svcs { grid-template-columns: 1fr; }
  .mf-pull { margin: var(--space-10) 0; padding: var(--space-8) 0; }
}

/* ============================================================
   BUILDER PAGE
   Form -> animated SVG silhouette of the system shape.
============================================================ */
.builder { display: grid; gap: 32px; }

.builder__form {
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 40px);
  display: grid;
  gap: 18px;
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.builder__form.is-out { opacity: 0; transform: translateY(-8px); pointer-events: none; }

.builder__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.builder__textarea {
  width: 100%;
  font: 400 17px/1.55 Outfit, sans-serif;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  padding: 18px 20px;
  resize: vertical;
  min-height: 140px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.builder__textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(15,15,15,0.06);
}
.builder__row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.builder__hint {
  font-size: 13px;
  color: var(--ink-soft);
}

.builder__canvas {
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 32px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.builder__canvas.is-in { opacity: 1; transform: none; }

.builder__canvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.builder__canvas-eye {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.builder__canvas-status {
  font-size: 12px;
  color: var(--ink-soft);
  font-family: var(--font);
  font-feature-settings: "tnum";
}
.builder__canvas-status::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  margin-right: 8px;
  vertical-align: middle;
  animation: builder-pulse 1.4s ease-in-out infinite;
}
@keyframes builder-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.builder__svg-wrap {
  background: var(--paper);
  border-radius: 12px;
  padding: 24px;
  overflow: hidden;
}
.builder__svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 480px;
}

/* SVG nodes */
.b-node {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.85) translateY(8px);
  transition: opacity 0.36s ease, transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.b-node.is-in { opacity: 1; transform: scale(1) translateY(0); }
.b-node__bg { fill: var(--white); }
.b-node__edge { stroke: var(--ink); stroke-width: 1.5; }
.b-node__port { fill: var(--orange); }
.b-node__icon { stroke: var(--ink); stroke-width: 1.6; fill: var(--ink); }
.b-node__icon path,
.b-node__icon rect,
.b-node__icon ellipse,
.b-node__icon circle { vector-effect: non-scaling-stroke; }
.b-node__icon path[fill="none"],
.b-node__icon rect[fill="none"],
.b-node__icon ellipse[fill="none"],
.b-node__icon circle[fill="none"] { fill: none; }

/* SVG edges */
.b-edge {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}
.b-edge.is-drawn { stroke-dashoffset: 0 !important; }

.builder__caption {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-2);
  display: grid;
  gap: 18px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.42s ease, transform 0.42s ease;
}
.builder__caption.is-in { opacity: 1; transform: none; }
.builder__caption p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 720px;
}
.builder__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Brain-drain rules grid */
.builder-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.builder-rule {
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  padding: 28px;
  display: grid;
  gap: 12px;
}
.builder-rule__num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--orange);
  font-family: var(--font);
  font-feature-settings: "tnum";
}
.builder-rule h3 {
  font-size: 19px;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.builder-rule p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 767px) {
  .builder-rules { grid-template-columns: 1fr; }
  .builder__svg { max-height: 360px; }
}
@media (max-width: 600px) {
  .builder__svg-wrap { padding: 12px; }
}

/* ============================================================
   NAV — Inline "New" pill for feature announcements.
============================================================ */
/* Featured nav link — Builder text reads as a normal nav item; only the
   floating "New" pill above it carries the orange feature accent. */
.nav .nav__link.nav__link--feat {
  position: relative;
  overflow: visible;
}

/* Mobile menu sheet feature link — keep type colour neutral; pill carries the cue */
.menu-sheet a.menu-sheet__feat { font-weight: 400; }

/* Floating "New" pill — sits ABOVE the Builder label on desktop nav,
   absolutely positioned so it never affects the link's hit-box width
   and the hover underline only spans the word "Builder". */
.nav__pill {
  display: inline-block;
  padding: 0 5px;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--orange);
  background: rgba(255, 95, 0, 0.10);
  border: 1px solid rgba(255, 95, 0, 0.6);
  border-radius: 999px;
  line-height: 11px;
  white-space: nowrap;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  pointer-events: none;
}

/* Desktop nav: tiny pill badge perches above-right of "AI Audit", tucked
   tight to the word so it reads as belonging to AI Audit rather than
   floating into the gap before "Insights". Absolutely positioned so the
   hover underline stays exactly the width of "AI Audit". */
.nav__link.nav__link--feat .nav__pill {
  position: absolute;
  top: -10px;
  right: -12px;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--orange);
  background: rgba(255, 95, 0, 0.10);
  border: 1px solid rgba(255, 95, 0, 0.5);
  border-radius: 999px;
  padding: 1px 5px;
  line-height: 11px;
}

/* Compact (scrolled) nav: hide the pill — the row is too tight for it */
.nav.is-scrolled .nav__link.nav__link--feat .nav__pill { display: none; }

/* Mobile menu sheet: pill stays inline (vertical menu has the room) */
.menu-sheet a .nav__pill {
  margin-left: 10px;
  font-size: 9px;
  padding: 1px 7px;
  line-height: 14px;
  vertical-align: 3px;
}

/* ============================================================
   HOMEPAGE — Builder feature strip
   Sits between sectors marquee and services overview.
   Dark band, orange accent, mini interactive preview.
============================================================ */
.builder-feat {
  background: var(--black);
  color: var(--white);
  padding: clamp(56px, 7vw, 96px) 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.builder-feat::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%);
}
.builder-feat__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
  position: relative;
}
.builder-feat__copy { display: grid; gap: 20px; align-content: start; }
.builder-feat__eye {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(250, 250, 246, 0.65);
}
.builder-feat__eye::before {
  content: 'New';
  display: inline-block;
  padding: 0 7px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--orange);
  background: rgba(255, 95, 0, 0.10);
  border: 1px solid rgba(255, 95, 0, 0.6);
  border-radius: 999px;
  line-height: 14px;
}
.builder-feat__title {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 300;
  color: var(--white);
  margin: 0;
}
.builder-feat__title b { font-weight: 600; }
.builder-feat__title .o { color: var(--orange); font-weight: 600; }
.builder-feat__title .soft { color: rgba(250,250,246,0.4); font-weight: 300; }
.builder-feat__lead {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(250,250,246,0.72);
  max-width: 540px;
  margin: 0;
  font-weight: 300;
}
.builder-feat__steps {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 4px 0 0;
  list-style: none;
  font-size: 14px;
  color: rgba(250,250,246,0.6);
}
.builder-feat__steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: baseline;
}
.builder-feat__steps li::before {
  content: counter(builder-step, decimal-leading-zero);
  counter-increment: builder-step;
  font-size: 12px;
  font-weight: 500;
  color: var(--orange);
  font-feature-settings: "tnum";
  letter-spacing: -0.005em;
}
.builder-feat__steps { counter-reset: builder-step; }
.builder-feat__cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.builder-feat__cta .btn--ghost {
  border-color: rgba(255,255,255,0.3);
  color: var(--white);
}
.builder-feat__cta .btn--ghost:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

/* mini preview of the builder graph on the right */
.builder-feat__preview {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.builder-feat__preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-family: var(--font);
  font-feature-settings: "tnum";
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(250,250,246,0.5);
}
.builder-feat__preview-head .dots {
  display: inline-flex;
  gap: 6px;
}
.builder-feat__preview-head .dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.builder-feat__preview-head .dots span:first-child { background: var(--orange); }
.builder-feat__preview svg {
  width: 100%;
  height: auto;
  display: block;
}
.builder-feat__preview .bf-node {
  fill: rgba(255,255,255,0.08);
  stroke: rgba(255,255,255,0.4);
  stroke-width: 1.2;
}
.builder-feat__preview .bf-node-icon {
  fill: var(--white);
  stroke: var(--white);
  stroke-width: 1.4;
}
/* Dim base wires — always visible, low contrast white */
.builder-feat__preview .bf-wire {
  fill: none;
  stroke: rgba(250, 250, 246, 0.18);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* Orange "flow" overlays — a short bright dash slides along the wire,
   sequenced so the signal travels: edge1 → edge2 (top output), then
   edge1 → edge3 (bottom output), repeating. Path is normalised to
   length 100 via pathLength="100" so the offset values are universal. */
.builder-feat__preview .bf-flow {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 30 200;
  stroke-dashoffset: -100;
  filter: drop-shadow(0 0 5px rgba(255, 95, 0, 0.55));
}
.builder-feat__preview .bf-flow.d1 { animation: bf-flow-e1 8s infinite; }
.builder-feat__preview .bf-flow.d2 { animation: bf-flow-e2 8s infinite; }
.builder-feat__preview .bf-flow.d3 { animation: bf-flow-e3 8s infinite; }

/* dasharray 30 200 → pattern repeats every 230 units. On a length-100
   path the dash is visible roughly when offset ∈ (30, -100). Idle is
   parked at -100 (just past path end → invisible) and the visible
   slide is from 30 to -100. Held idle uses steps(1, jump-end) so the
   browser never tries to interpolate dashoffset during invisible time
   — that was the source of the jitter. Slides use ease-in-out so the
   head doesn't feel mechanical. */

/* Edge 1 fires twice per 8s cycle */
@keyframes bf-flow-e1 {
  0%       { stroke-dashoffset: 30; animation-timing-function: ease-in-out; }
  18.75%   { stroke-dashoffset: -100; animation-timing-function: steps(1, jump-end); }
  50%      { stroke-dashoffset: 30; animation-timing-function: ease-in-out; }
  68.75%   { stroke-dashoffset: -100; animation-timing-function: steps(1, jump-end); }
  100%     { stroke-dashoffset: 30; }
}
/* Edge 2 (top branch) fires once, after edge 1's first fire */
@keyframes bf-flow-e2 {
  0%       { stroke-dashoffset: -100; animation-timing-function: steps(1, jump-end); }
  18.75%   { stroke-dashoffset: 30; animation-timing-function: ease-in-out; }
  37.5%    { stroke-dashoffset: -100; animation-timing-function: steps(1, jump-end); }
  100%     { stroke-dashoffset: -100; }
}
/* Edge 3 (bottom branch) fires once, after edge 1's second fire */
@keyframes bf-flow-e3 {
  0%       { stroke-dashoffset: -100; animation-timing-function: steps(1, jump-end); }
  68.75%   { stroke-dashoffset: 30; animation-timing-function: ease-in-out; }
  87.5%    { stroke-dashoffset: -100; animation-timing-function: steps(1, jump-end); }
  100%     { stroke-dashoffset: -100; }
}

/* Node borders pulse orange when a signal arrives, then fade back to
   the default dim border. Same 8s cycle as the flows so they stay in
   lockstep. */
.builder-feat__preview .bf-node-g.n1 .bf-node { animation: bf-node-n1 8s infinite; }
.builder-feat__preview .bf-node-g.n2 .bf-node { animation: bf-node-n2 8s infinite; }
.builder-feat__preview .bf-node-g.n3 .bf-node { animation: bf-node-n3 8s infinite; }
.builder-feat__preview .bf-node-g.n4 .bf-node { animation: bf-node-n4 8s infinite; }

/* Node 1 (source) lights at the start of each fire — signal departing */
@keyframes bf-node-n1 {
  0%        { stroke: var(--orange); }
  12%, 49%  { stroke: rgba(255, 255, 255, 0.4); }
  50%       { stroke: var(--orange); }
  62%, 100% { stroke: rgba(255, 255, 255, 0.4); }
}
/* Node 2 (AI) lights when edge 1 reaches it (twice per cycle) */
@keyframes bf-node-n2 {
  0%, 12%   { stroke: rgba(255, 255, 255, 0.4); }
  18.75%    { stroke: var(--orange); }
  31%, 62%  { stroke: rgba(255, 255, 255, 0.4); }
  68.75%    { stroke: var(--orange); }
  81%, 100% { stroke: rgba(255, 255, 255, 0.4); }
}
/* Node 3 (top output) lights when edge 2 reaches it */
@keyframes bf-node-n3 {
  0%, 31%   { stroke: rgba(255, 255, 255, 0.4); }
  37.5%     { stroke: var(--orange); }
  50%, 100% { stroke: rgba(255, 255, 255, 0.4); }
}
/* Node 4 (bottom output) lights when edge 3 reaches it */
@keyframes bf-node-n4 {
  0%, 81%   { stroke: rgba(255, 255, 255, 0.4); }
  87.5%     { stroke: var(--orange); }
  100%      { stroke: rgba(255, 255, 255, 0.4); }
}

@media (max-width: 767px) {
  .builder-feat__inner { grid-template-columns: 1fr; }
  .builder-feat__preview { order: -1; }
}

/* ============================================================
   SERVICES HUB — process timeline + builder bridge
   Unique to this page so it doesn't replicate the homepage.
============================================================ */

.section.section--ink {
  background: var(--black);
  color: var(--white);
}
.section.section--ink .section-eyebrow { color: rgba(250, 250, 246, 0.55); }
.section.section--ink .section-title { color: var(--white); }
.section.section--ink .section-title .soft { color: rgba(250, 250, 246, 0.42); }
.section.section--ink .section-aside { color: rgba(250, 250, 246, 0.65); }

/* Four-stage horizontal flow — bordered cards sitting on a single
   continuous orange wire, each anchored by a glowing node. Editorial
   diagram, not a bulleted list. */
.svc-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
.svc-flow__step {
  position: relative;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  transition: background 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease);
}
.svc-flow__step:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}
.svc-flow__num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(250, 250, 246, 0.5);
  font-family: var(--font);
  font-feature-settings: "tnum";
  margin: 0;
}
.svc-flow__title {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--white);
}
.svc-flow__copy {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(250, 250, 246, 0.62);
  margin: 0;
  max-width: 32ch;
}
@media (max-width: 767px) {
  .svc-flow { grid-template-columns: 1fr; gap: 16px; }
  .svc-flow__step { padding: 24px 24px 22px; }
}

/* CTA strip below the four-stage timeline — routes low-commitment readers
   to the builder before the booking conversation. Replaces the standalone
   "Sketch the shape" bridge section. */
.svc-process__cta {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.svc-process__cta-lead {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  font-weight: 300;
  color: rgba(250, 250, 246, 0.72);
  max-width: 56ch;
}
@media (max-width: 720px) {
  .svc-process__cta { margin-top: 36px; padding-top: 28px; }
  .svc-process__cta-lead { font-size: 14px; }
}

/* Services page-head filter — "good fit if / not the right team if",
   sits in the right column of the page-head row. Pre-qualifies the
   reader without needing to scroll. */
/* Align the row top-down when a filter is present so the intro doesn't
   get pushed to the bottom edge of the taller filter panel. */
/* On the services page the filter card is much taller than the intro
   paragraph; align both to the bottom so the empty space sits above the
   intro (next to the rule line) rather than as a yawning gap below it. */
.page-head__row:has(.page-head__filter) { align-items: end; }
.page-head__filter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 24px 28px;
  background: rgba(13, 13, 11, 0.03);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
/* On-brand eyebrow: Outfit, sentence case, no monospace, no caps tracking */
.page-head__filter-h {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.page-head__filter-col--off .page-head__filter-h { color: rgba(13, 13, 11, 0.42); }
.page-head__filter ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-head__filter li {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  position: relative;
  padding-left: 16px;
}
.page-head__filter li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 1px;
  background: var(--orange);
}
.page-head__filter-col--off li::before { background: rgba(13, 13, 11, 0.3); }
.page-head__filter-col--off li {
  color: rgba(13, 13, 11, 0.42);
  text-decoration: line-through;
  text-decoration-color: rgba(13, 13, 11, 0.18);
  text-decoration-thickness: 1px;
}
@media (max-width: 720px) {
  .page-head__filter { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
}

/* SERVICES PAGE HEAD chips — small icon+label pills sitting between
   the breadcrumb and the H1. Functions as a "what's covered" hint
   and gives the otherwise text-only header visual structure. */
.svc-head-chips {
  list-style: none;
  margin: 18px 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svc-head-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 7px;
  background: rgba(13, 13, 11, 0.04);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: background 0.25s var(--ease, ease), border-color 0.25s var(--ease, ease);
}
.svc-head-chip:hover {
  background: rgba(255, 95, 0, 0.06);
  border-color: rgba(255, 95, 0, 0.4);
}
.svc-head-chip__ico {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--black);
  border-radius: 50%;
  flex-shrink: 0;
}
.svc-head-chip__ico svg { width: 14px; height: 14px; display: block; }

@media (max-width: 600px) {
  .svc-head-chips { gap: 6px; margin: 14px 0 22px; }
  .svc-head-chip { font-size: 12px; padding: 5px 11px 5px 5px; }
  .svc-head-chip__ico { width: 22px; height: 22px; }
  .svc-head-chip__ico svg { width: 12px; height: 12px; }
}

/* ── Services hero: the "service map" ──────────────────────────────
   A flat, static diagram in the house line-art style (same family as the
   svc-detail media on the individual service pages). Six real service
   links sit as tiles on a faint connective web. No canvas, no 3D, no
   CDN libraries — just markup and CSS. */
.svc-map {
  position: relative;
  margin: 22px 0 32px;
  padding: 26px;
  border: 1px solid var(--rule);
  border-radius: 22px;
  background:
    radial-gradient(circle, rgba(13,13,11,0.08) 0.9px, transparent 1.4px) 0 0 / 22px 22px,
    rgba(13,13,11,0.018);
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
/* The connective web behind the tiles: hairlines joining node points,
   drawn decoratively (preserveAspectRatio: none) so it flexes with the
   panel. non-scaling-stroke keeps the lines crisp at any width. */
.svc-map__web {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.svc-map__lines path {
  fill: none;
  stroke: rgba(13,13,11,0.13);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.svc-map__joints circle {
  fill: rgba(13,13,11,0.22);
}
.svc-map__joints circle.is-hub {
  fill: var(--orange);
}

/* The six service tiles. */
.svc-map__nodes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.svc-node {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.svc-node:hover {
  border-color: rgba(255,95,0,0.45);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -18px rgba(13,13,11,0.4);
}
.svc-node__ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--orange);
  color: var(--black);
  border-radius: 50%;
  flex-shrink: 0;
}
.svc-node__ico svg { width: 17px; height: 17px; display: block; }
.svc-node__label {
  display: inline-flex; flex-direction: column;
  line-height: 1.2;
}
.svc-node__meta {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(13,13,11,0.48);
  font-weight: 500;
}
.svc-node__name {
  font-size: 14px;
  font-weight: 600;
}

.svc-map__hint {
  display: block;
  margin-top: 18px;
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: rgba(13,13,11,0.45);
  font-weight: 500;
}

@media (max-width: 760px) {
  .svc-map {
    padding: 14px;
    margin: 16px 0 24px;
  }
  .svc-map__web { display: none; }
  .svc-map__nodes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .svc-node { padding: 10px 12px; gap: 9px; }
  .svc-node__name { font-size: 12.5px; }
  .svc-node__meta { font-size: 9px; }
  .svc-map__hint { text-align: left; margin-top: 12px; }
}
@media (max-width: 480px) {
  .svc-map__nodes { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FIXES — Phase 1
   Scope: @media (max-width: 768px) only. Desktop is locked.
   See: sizrok-mobile-system.md
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* — Alert strip: keep 'Book it' on one line, tighten spacing — */
  .alert {
    height: auto;
    min-height: var(--alert-h);
    padding: 6px 0;
  }
  .alert__inner {
    flex-wrap: nowrap;
    gap: 8px;
    font-size: 11.5px;
    padding: 0 14px;
  }
  .alert__msg {
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
  }
  .alert__msg .meta { display: none; }
  .alert__msg > span:not(.pill) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .alert__cta {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 5px 10px;
    font-size: 11.5px;
  }

  /* — Navbar: drop the floating-pill treatment on mobile entirely.
       A solid edge-to-edge bar reads cleaner on a narrow column,
       blocks content beneath it absolutely (no transparent gaps on
       either side of a centred pill), and is what users expect from
       a phone nav. — */
  .nav {
    padding: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .nav__inner {
    width: 100%;
    max-width: none;
    height: var(--nav-h);
    padding: 0 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.has-dark-hero:not(.nav-live) .nav {
    background: var(--black);
    border-bottom-color: rgba(255,255,255,0.08);
  }
  body.has-dark-hero:not(.nav-live) .nav .nav__inner {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.has-dark-hero:not(.nav-live) .nav.is-scrolled {
    background: var(--paper);
    border-bottom-color: var(--rule);
  }
  body.has-dark-hero:not(.nav-live) .nav.is-scrolled .nav__inner {
    background: transparent;
  }

  /* Burger → animates to X when menu open (data-open + aria-expanded).
     44x44 minimum tap target (the icon bars stay 22px; only the hit area grows). */
  .nav__burger { width: 44px; height: 44px; }
  .nav__burger[aria-expanded="true"] span {
    background: transparent !important;
  }
  .nav__burger[aria-expanded="true"] span::before {
    transform: translateY(7px) rotate(45deg);
  }
  .nav__burger[aria-expanded="true"] span::after {
    transform: translateY(-7px) rotate(-45deg);
  }
  .nav__burger span::before,
  .nav__burger span::after {
    transition: transform 0.3s var(--ease), background 0.2s var(--ease);
  }

  /* Menu sheet sits below the navbar so the X stays visible & tappable.
     Internal scroll keeps long lists contained — no chance of content
     bleeding past the navbar at top. */
  .menu-sheet {
    z-index: 90;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav { z-index: 130; }
  .alert { z-index: 140; }
  /* Unified weight for all menu links — AI Audit shouldn't read lighter */
  .menu-sheet a.menu-sheet__feat { font-weight: 500; }

  /* — Hero: drop the inline play bubble and the 'click the cubes' prompt — */
  .hero__bubble--video {
    display: none;
  }
  .hero__headline .line:nth-child(2) {
    display: block;
  }
  .hero__poke { display: none; }

  /* Tighten hero a touch on small screens */
  .hero__inner { padding: 0 16px; gap: 16px; }
  .hero__headline { font-size: clamp(36px, 11vw, 64px); }

  /* — Sectors marquee: deeper edge fade so words don't slice mid-letter — */
  .sectors__marquee {
    mask-image: linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%);
  }

  /* — Recent builds: vertical stack, no horizontal drag — */
  .work-grid__hint { display: none; }
  .work-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: visible;
    overflow-y: visible;
    cursor: auto;
    user-select: auto;
    padding-bottom: 0;
    scroll-padding: 0;
  }
  .work-grid::-webkit-scrollbar { display: none; }
  .work-card {
    width: 100%;
    flex: 0 0 auto;
  }

  /* — CTA strip: tighten the orange button so it isn't a billboard — */
  .cta-strip__side {
    align-items: flex-start;
    gap: 16px;
  }
  .cta-strip__side .btn {
    width: auto;
    align-self: flex-start;
    padding: 12px 18px;
    font-size: 14px;
  }

  /* — Footer: comfortable tap targets on the link grid — */
  .footer__col ul { gap: 4px; }
  .footer__col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
  }

  /* — Newsletter: stack input and button so the input has full width — */
  .footer__newsletter-form {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
  }
  .footer__newsletter-form input {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
  }
  .footer__newsletter-form:focus-within input {
    border-color: rgba(255,255,255,0.32);
    background: rgba(255,255,255,0.08);
  }
  .footer__newsletter-form button {
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(255,95,0,0.20);
  }

  /* — Audit blueprint preview: tighter padding on mobile (radius is set at base) — */
  .builder-feat__preview {
    padding: 16px;
  }
  .builder-feat__preview-head {
    font-size: 10.5px;
    margin-bottom: 12px;
  }

  /* — Mobile-only chip-radius nudges (graphic containers handled at base) — */
  .svc-node { border-radius: 12px; }
  .svc-flow__step { border-radius: 12px; }
  .page-head__filter { border-radius: 14px; }
  .svc-head-chip { border-radius: 12px; }

  /* — Alert: drop the inner second sentence (no class on most pages),
       remove line-clamp so the first sentence wraps freely — */
  .alert__msg > span:not(.pill) {
    display: inline;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: initial;
  }
  .alert__msg > span:not(.pill) > span { display: none; }
  .alert {
    padding: 8px 0;
  }
  .alert__inner {
    align-items: center;
  }

  /* — Service detail: drop the decorative SVG entirely on mobile.
       It's aria-hidden and purely ornamental; on a narrow column it
       was reading as an overlay on the headline / body copy. — */
  .svc-detail__media { display: none; }
  /* Example-case media on service detail pages was 21:9 (a thin slab
     that reads as an empty rectangle on a 375px viewport). Square it up. */
  .work-card.span-12 .work-card__img {
    aspect-ratio: 4 / 3 !important;
  }

  /* — Disable scroll-reveal opacity so content never gets stuck faded
       on fast scrolls. Counters still animate via their own observer. — */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* — Audit wizard + Culture TOC: single column instead of erratic
       wrap-flex. Audit choices live in audit.html's own <style> block;
       add mobile overrides there. Culture TOC is global. — */
  .mf-toc { flex-direction: column; gap: 6px; }
  .mf-toc a {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
  }

  /* — Pillar 1 ('No platform tax') reads as a phrase, so value+unit
       share the same weight, size and colour on mobile. Pillars 2-3
       ('100% yours', '6 to 8 weeks') keep their big-number/small-unit
       hierarchy because the number IS the meaningful part. — */
  .pillar:nth-child(1) .pillar__num-big {
    font-size: clamp(28px, 7vw, 36px);
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.22em;
  }
  .pillar:nth-child(1) .pillar__num-big .value,
  .pillar:nth-child(1) .pillar__num-big .unit {
    font-size: 1em;
    font-weight: 500;
    color: var(--black);
    line-height: 1.1;
    letter-spacing: -0.022em;
  }
  /* Pillars 2 & 3 keep their counter hierarchy — value large, unit small */
  .pillar:nth-child(n+2) .pillar__num-big {
    font-size: clamp(56px, 14vw, 80px);
    align-items: baseline;
  }
  .pillar:nth-child(n+2) .pillar__num-big .unit {
    font-size: 0.32em;
    color: var(--orange);
  }

  /* — Services overview: enforce single column at all mobile widths
       (existing 480px breakpoint left a 2-col layout for 480-760px) — */
  .svc-map__nodes { grid-template-columns: 1fr !important; }

  /* — Contact form: stack name + company on top of each other. The
       form uses inline styles so we override with !important — */
  .contact-form > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .contact-form input,
  .contact-form textarea {
    width: 100%;
    box-sizing: border-box;
  }
  .contact-form .btn {
    width: 100%;
    justify-content: center;
  }

  /* — Menu sheet: tighter type so the expanded list fits, sub-items
       indented + lighter so the Services hierarchy reads cleanly — */
  .menu-sheet { padding-top: calc(var(--alert-h) + var(--nav-h) + 12px); padding-bottom: 24px; }
  .menu-sheet a {
    font-size: 22px;
    padding: 14px 0;
  }
  .menu-sheet a.menu-sheet__sub {
    font-size: 16px;
    font-weight: 400;
    color: var(--ink-soft);
    padding: 10px 0 10px 20px;
  }
  .menu-sheet a.menu-sheet__sub .arrow { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   POST PAGE
   Reference template for blog posts and insights essays. WordPress theme
   blueprint — every typographic element a long-form piece needs.
═══════════════════════════════════════════════════════════════════════ */
.post {
  padding-top: 56px;
}
.post__head {
  max-width: 880px;
  margin: 0 auto 48px;
  padding: 0 var(--pad-x);
}
.post__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mid);
  margin-bottom: 28px;
}
.post__crumb a { color: var(--mid); transition: color 0.25s var(--ease); }
.post__crumb a:hover { color: var(--orange); }
.post__crumb .sep { color: var(--mid); opacity: 0.5; }

.post__category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(255, 95, 0, 0.08);
  color: var(--orange);
  border: 1px solid rgba(255, 95, 0, 0.32);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Subtle category eyebrow — small uppercase text above the post title.
   Same role as .post__category but without the pill chrome, so it reads
   as taxonomy rather than a button. */
.post__eye {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}
.post__eye::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--orange);
  display: inline-block;
}

.post__title {
  font-size: clamp(36px, 4.6vw, 68px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--black);
  margin-bottom: 20px;
}
.post__title b { font-weight: 700; }
.post__title .o { color: var(--orange); font-weight: 700; }

.post__deck {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 64ch;
  margin-bottom: 32px;
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--mid);
}
.post__meta .author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 500;
}
.post__meta .author-mark {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--black);
  flex-shrink: 0;
}
.post__meta .author-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.post__meta .cat {
  color: var(--orange);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.post__meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--mid);
  opacity: 0.6;
}

/* Hero — large visual block, mirrors the post-card pattern from the homepage */
.post__hero {
  max-width: 1280px;
  margin: 0 auto 64px;
  padding: 0 var(--pad-x);
}
.post__hero-frame {
  position: relative;
  aspect-ratio: 21/10;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}
.post__hero-frame--cream { background: var(--cream); color: var(--ink); border-color: var(--rule); }
.post__hero-frame--orange { background: var(--orange); color: var(--black); }
.post__hero-frame--warm { background: var(--warm); color: var(--ink); }

.post__hero-inner-frame {
  position: absolute;
  inset: 32px;
  border: 1px solid currentColor;
  opacity: 0.16;
  border-radius: 8px;
}
.post__hero-rule {
  position: absolute;
  left: 32px; right: 32px;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.16;
}
.post__hero-tag {
  position: absolute;
  top: 32px; left: 32px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}
.post__hero-num {
  position: absolute;
  top: 32px; right: 32px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.65;
  font-feature-settings: "tnum";
}
.post__hero-mark {
  position: absolute;
  bottom: 36px; left: 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 70%;
}
.post__hero-mark .code {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.65;
}
.post__hero-mark .name {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1;
}

/* Body — the bread and butter of the post */
.post__body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-x) 64px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
}
.post__body p {
  margin: 0 0 28px;
}
.post__body > p:first-child,
.post__body p.lead {
  font-size: 22px;
  line-height: 1.55;
  color: var(--black);
  font-weight: 400;
}
.post__body strong { font-weight: 600; color: var(--black); }
.post__body em { font-style: italic; color: var(--ink); }

/* All inline links inside the post body share one chip language —
   internal anchors, external URLs, related-post pointers etc. all read
   the same. The dedicated rule further down handles the visual; this
   block just neutralises browser defaults so nothing competes with it. */
.post__body a:not(.post__share-icon) {
  color: var(--black);
  text-decoration: none;
}

.post__body h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--black);
  margin: 56px 0 20px;
}
.post__body h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--black);
  margin: 40px 0 14px;
}
.post__body h2 + p,
.post__body h3 + p { margin-top: 0; }

.post__body ul,
.post__body ol {
  margin: 0 0 28px;
  padding-left: 24px;
}
.post__body li {
  margin-bottom: 10px;
  padding-left: 6px;
}
.post__body ul li::marker { color: var(--orange); }
.post__body ol { list-style: decimal; }
.post__body ol li::marker { color: var(--mid); font-weight: 500; }

.post__body blockquote {
  margin: 40px 0;
  padding: 28px 32px;
  background: var(--cream);
  border-left: 3px solid var(--orange);
  font-size: 22px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  color: var(--black);
  letter-spacing: -0.014em;
}
.post__body blockquote p { margin-bottom: 0; }
.post__body blockquote cite {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.post__body .pullquote {
  margin: 56px -32px;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--black);
  text-align: left;
}
.post__body .pullquote .o { color: var(--orange); }

.post__body figure {
  margin: 40px -40px;
}
.post__body figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--rule);
}
.post__body figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--mid);
  text-align: center;
  font-weight: 400;
}

.post__body code {
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.post__body pre {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 10px;
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
}
.post__body pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}

.post__body hr {
  margin: 48px 0;
  border: none;
  border-top: 1px solid var(--rule);
}

/* Aside / callout */
.post__body .post__aside {
  margin: 40px 0;
  padding: 24px 28px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
}
.post__body .post__aside-eye {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}
.post__body .post__aside p { margin-bottom: 12px; font-size: 16px; }
.post__body .post__aside p:last-child { margin-bottom: 0; }

/* Inline stats block — for long-form essays that want to surface a few
   numbers without breaking the prose flow. Three-column grid, collapses
   on narrow screens. */
.post__body .post__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.post__body .post__stat .num {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--black);
  margin-bottom: 12px;
}
.post__body .post__stat .num span { font-size: 0.55em; color: var(--orange); margin-left: 2px; font-weight: 500; }
.post__body .post__stat .label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 8px;
}
.post__body .post__stat cite {
  font-size: 11px;
  font-style: normal;
  color: var(--mid);
  letter-spacing: 0.02em;
}
@media (max-width: 760px) {
  .post__body .post__stats { grid-template-columns: 1fr; gap: 28px; padding: 24px 0; }
}

/* Inline timeline block — h3 + body grouped by period, used for the
   manifesto's "where this goes" section. */
.post__body .post__period {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 32px 0 4px;
}

/* Footer — author bio, share, related, next/prev */
.post__foot {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  border-top: 1px solid var(--rule);
  padding-top: 40px;
  margin-bottom: 80px;
}
.post__bio {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
}
.post__bio-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 600;
}
.post__bio-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 4px;
}
.post__bio-role {
  font-size: 13px;
  color: var(--mid);
  margin-bottom: 8px;
}
.post__bio-text {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.post__share {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--mid);
  margin-bottom: 0;
}
.post__share-label { font-weight: 500; color: var(--ink); }
.post__share a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.post__share a:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* Related */
.post__related {
  max-width: 1280px;
  margin: 0 auto 80px;
  padding: 0 var(--pad-x);
}
.post__related-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 28px;
  padding-top: 56px;
  border-top: 1px solid var(--rule);
}
.post__related-eye {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
}
.post__related-title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--black);
}
.post__related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .post { padding-top: 32px; }
  .post__head { margin-bottom: 32px; }
  .post__title { font-size: clamp(32px, 9vw, 44px); }
  .post__deck { font-size: 17px; }
  .post__meta { gap: 12px 16px; font-size: 12px; }
  .post__hero { margin-bottom: 40px; }
  .post__hero-frame { aspect-ratio: 4/3; }
  .post__hero-inner-frame { inset: 18px; }
  .post__hero-tag, .post__hero-num { top: 18px; }
  .post__hero-tag { left: 18px; }
  .post__hero-num { right: 18px; }
  .post__hero-mark { bottom: 22px; left: 22px; max-width: 86%; }
  .post__hero-mark .name { font-size: clamp(24px, 6vw, 36px); }
  .post__body { font-size: 16px; padding-bottom: 40px; }
  .post__body > p:first-child,
  .post__body p.lead { font-size: 19px; }
  .post__body h2 { margin-top: 40px; font-size: 24px; }
  .post__body blockquote { padding: 22px 22px; font-size: 18px; margin: 28px 0; }
  .post__body .pullquote { margin: 36px 0; font-size: 22px; }
  .post__body figure { margin: 28px 0; }
  .post__related-grid { grid-template-columns: 1fr; }
  .post__related-head { padding-top: 36px; }
}

/* Coming-soon card variant — muted enough to read as "not ready" while
   still being an obvious tap target that points to the newsletter. */
.post-card--soon { opacity: 0.7; }
.post-card--soon:hover { opacity: 1; }
.post-card--soon .post-card__img-tag { color: var(--orange); opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════════════
   POST LAYOUT — 3-column: TOC | body | share rail
   Auto-built by JS so authoring stays paste-from-doc simple.
═══════════════════════════════════════════════════════════════════════ */
.post__layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px) 60px;
  gap: 56px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x) 64px;
  justify-content: center;
}

/* TOC rail */
.post__toc-rail { position: relative; }
.post__toc-sticky {
  position: sticky;
  top: calc(var(--alert-h) + var(--nav-h) + 40px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 22px;
  background: var(--cream);
  border: none;
  border-radius: 24px 4px 24px 4px;
}
.post__toc-eye {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}
.post__toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.post__toc a {
  font-size: 14px;
  font-weight: 400;
  color: var(--mid);
  line-height: 1.45;
  padding: 8px 0 8px 14px;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
  text-decoration: none;
}
.post__toc a:hover { color: var(--black); }
.post__toc a.is-active {
  color: var(--black);
  border-left-color: var(--orange);
  font-weight: 600;
}

.post__progress {
  height: 4px;
  background: rgba(13, 13, 11, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.post__progress-bar {
  height: 100%;
  width: 0;
  background: var(--orange);
  border-radius: 999px;
  transition: width 0.1s linear;
  transform-origin: left center;
}

.post__readtime {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mid);
  font-weight: 400;
}
.post__readtime svg { flex-shrink: 0; }

/* Share rail (right) — vertical circular icon column */
.post__share-rail { position: relative; }
.post__share-rail-sticky {
  position: sticky;
  top: calc(var(--alert-h) + var(--nav-h) + 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.post__share-rail-eye {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}
.post__share-icon {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(13, 13, 11, 0.05);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
  border: 1px solid transparent;
}
.post__share-icon:hover {
  background: var(--orange);
  color: var(--black);
  transform: translateY(-2px);
}
.post__share-icon svg { width: 16px; height: 16px; }
.post__share-icon.is-copied {
  background: var(--black);
  color: var(--orange);
}
.post__share-icon.is-copied::after {
  content: 'Copied to clipboard';
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
  animation: shareCopiedPop 1.5s var(--ease) forwards;
}
.post__share-icon.is-copied::before {
  content: '';
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--black);
  pointer-events: none;
  transform: translateY(-50%);
  animation: shareCopiedPop 1.5s var(--ease) forwards;
}
@keyframes shareCopiedPop {
  0%   { opacity: 0; transform: translateY(-50%) translateX(6px); }
  12%  { opacity: 1; transform: translateY(-50%) translateX(0); }
  82%  { opacity: 1; transform: translateY(-50%) translateX(0); }
  100% { opacity: 0; transform: translateY(-50%) translateX(0); }
}

/* Body inside the layout grid — undo the older centring (the grid handles it now) */
.post__layout .post__body {
  max-width: none;
  padding: 0;
}

/* Inline prose links — a normal underlined link at rest; the brand-orange
   "box" (chip) appears only on hover/focus. Same treatment everywhere body
   copy can contain a link: article body (.post__body), service detail intros
   and blocks, FAQ answers, page-head intro. The chip's padding is cancelled by
   an equal negative horizontal margin so the surrounding prose does NOT reflow
   when the box appears. Surrounding punctuation is kept OUTSIDE the <a> in the
   markup so the box never wraps a comma; box-decoration-break:clone keeps the
   fill clean if a link wraps. */
.post__body a:not(.post__share-icon),
.svc-detail__intro a,
.svc-detail__block a,
.svc-detail__body p a,
.faq__a-inner a,
.page-head__intro a,
.section-aside a {
  color: var(--ink);
  border-radius: 6px;
  text-decoration: underline;
  text-decoration-color: var(--black);
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
  text-underline-offset: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.post__body a:not(.post__share-icon):hover,
.post__body a:not(.post__share-icon):focus-visible,
.svc-detail__intro a:hover,
.svc-detail__intro a:focus-visible,
.svc-detail__block a:hover,
.svc-detail__block a:focus-visible,
.svc-detail__body p a:hover,
.svc-detail__body p a:focus-visible,
.faq__a-inner a:hover,
.faq__a-inner a:focus-visible,
.page-head__intro a:hover,
.page-head__intro a:focus-visible,
.section-aside a:hover,
.section-aside a:focus-visible {
  background: var(--orange);
  color: var(--black);
  text-decoration-color: var(--black);
  outline: none;
}

/* Anchor scroll-margin so when a user clicks a TOC link the heading lands
   below the navbar instead of behind it. */
.post__body h2[id],
.post__body h3[id] {
  scroll-margin-top: calc(var(--alert-h) + var(--nav-h) + 24px);
}

/* End-of-article meta — category, read time, sector and last-updated
   live here instead of crowding the article header.  Reads as a quiet
   colophon at the foot of the piece. */
.post__body .post__end-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 56px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--mid);
  letter-spacing: 0.01em;
}
.post__body .post__end-meta .cat {
  color: var(--orange);
  font-weight: 500;
}
.post__body .post__end-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--mid);
  opacity: 0.6;
}

@media (max-width: 767px) {
  .post__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .post__toc-rail { display: none; }
  .post__share-rail { display: none; }
  .post__layout .post__body { max-width: 720px; margin: 0 auto; }
}

/* ═══════════════════════════════════════
   EASTER EGGS
   Shared modal + toast styling plus the per-egg flourishes (CRT mode,
   confetti dots, spider scuttle). All DOM is injected at trigger time
   from script.js, so no page markup is required.
═══════════════════════════════════════ */
.ee-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 11, 0.6);
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.ee-modal.is-shown { opacity: 1; }
.ee-modal__sheet {
  background: var(--white);
  max-width: 420px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.4s var(--ease);
}
.ee-modal.is-shown .ee-modal__sheet { transform: translateY(0) scale(1); }
.ee-modal__media { background: var(--black); line-height: 0; }
.ee-modal__media img { width: 100%; display: block; }
.ee-modal__body { padding: 24px 28px 28px; text-align: center; }
.ee-modal__title {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--black);
  margin-bottom: 8px;
}
.ee-modal__sub {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.ee-modal__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
  border-radius: 999px;
  font: 500 14px var(--font);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.ee-modal__close:hover {
  background: var(--orange);
  color: var(--black);
  border-color: var(--orange);
}

/* Toast — small, centred bottom strip, auto-dismisses. */
.ee-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  z-index: 10000;
  padding: 14px 22px;
  background: var(--black);
  color: var(--white);
  font: 500 14px var(--font);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  max-width: calc(100vw - 48px);
  text-align: center;
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.ee-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }

/* CRT mode — applied to <html> for 10s after Konami. Scanline overlay,
   subtle contrast/saturation bump, gentle flicker. Pointer-events stay
   passable so the user can still click around. */
html.crt-mode body {
  filter: contrast(1.12) brightness(1.04) saturate(1.18);
  animation: ee-crt-flicker 0.18s infinite;
}
html.crt-mode body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.08) 3px
  );
  mix-blend-mode: multiply;
}
@keyframes ee-crt-flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.97; }
}

/* Triple-click confetti — small orange dots that rise + fade from a
   clicked .o or .dot. JS sets --tx/--ty per spawn. */
.ee-dot-confetti {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  pointer-events: none;
  z-index: 9999;
  animation: ee-dot-rise 1.4s var(--ease) forwards;
}
@keyframes ee-dot-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  12%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.5); }
}

/* Brand mark scuttle — fires on 3s hold of .nav__brand. */
.spider-scuttle {
  animation: ee-scuttle 1.2s var(--ease);
}
@keyframes ee-scuttle {
  0%   { transform: translateX(0) rotate(0); }
  18%  { transform: translateX(-6px) rotate(-14deg); }
  38%  { transform: translateX(6px) rotate(10deg); }
  58%  { transform: translateX(-4px) rotate(-6deg); }
  78%  { transform: translateX(3px) rotate(4deg); }
  100% { transform: translateX(0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ee-modal,
  .ee-modal__sheet,
  .ee-toast { transition: none; }
  .ee-dot-confetti,
  .spider-scuttle,
  html.crt-mode body { animation: none; }
}