/* S Compass — two themes on one token set. main.js sets html[data-theme]
   (saved choice, else the system setting); everything below reads tokens.

   dark  — charcoal and graphite-green surfaces, lime light
   ink     #0B0E0D  main ground (charcoal, not void)
   surface #111614  alternate surface (work band, panels)
   raised  #171E1A  elevated surface (cards)
   rule    #29302E  hairlines / bearing lines
   fog     #A3A7A5  secondary text
   bone    #F2F1EA  primary text (warm white)
   accent  #D7F352  the one accent: needle, nodes, CTA

   light — warm stone and pale sage surfaces, charcoal type. Lime stays a
   fill (CTAs, the mark); text and lines take a deep olive so they read. */

:root {
  color-scheme: dark;
  --ink: #090b0a;      /* near-black base */
  --surface: #101512;  /* secondary surface */
  --raised: #171f18;   /* forest-charcoal: cards, panels */
  --raised-2: #202820; /* raised further: hover, borders on cards */
  --rule: #252d27;
  --fog: #aeb7ab;
  --bone: #f0f0e8;
  --bone-hi: #fff;
  --accent: #d7f352;
  --accent-rgb: 215, 243, 82;
  --accent-hi: #e3f97f;
  --accent-fill: #d7f352;  /* CTA fills: always the true lime */
  --on-accent: #0a0c0a;    /* text on a lime fill */

  /* diagram linework (value panels, emblem, process orbits) */
  --line: #2c342e;
  --line-2: #313a33;
  --line-3: #45504a;
  --ring: rgba(255, 255, 255, .07);
  --icon-hi: #151c16;
  --icon-lo: #090b0a;
  --core-hi: #151b14;
  --core-lo: #070908;

  /* background system: lighting and texture layers, composed per section */
  --light-soft: rgba(var(--accent-rgb), .045);  /* localized lime light, never a blob */
  --light-faint: rgba(var(--accent-rgb), .022);
  --sheen: rgba(255, 255, 255, .018);           /* cool overhead sheen on surfaces */
  --grid-line: rgba(255, 255, 255, .035);
  --glow: rgba(var(--accent-rgb), .055);        /* the light behind the hero mark */
  --glow-edge: rgba(var(--accent-rgb), .018);
  --glow-blend: screen;
  --forest: rgba(28, 56, 36, .55);              /* forest light pooling on dark material */
  --deep: #070907;                              /* footer floor */
  --glass-edge: rgba(255, 255, 255, .08);       /* the floating nav's hairline and top highlight */
  --glass-hi: rgba(255, 255, 255, .06);
  --section-y: clamp(56px, 7vh, 88px);          /* vertical rhythm shared by every major section: two of these meet at each boundary */

  /* section grounds: one family of tones, lit differently per section.
     Radials are light falling on a surface; linears are the surface itself. */
  /* hero — the strongest light: a wide forest haze behind the mark,
     a low glow that carries down into the next section, and darker edges */
  --bg-hero:
    radial-gradient(62% 78% at 72% 44%, rgba(26, 54, 34, .42), transparent 72%),
    radial-gradient(80% 45% at 40% 108%, rgba(22, 44, 28, .55), transparent 70%),
    radial-gradient(45% 40% at 18% 30%, rgba(255, 255, 255, .016), transparent 70%),
    radial-gradient(130% 100% at 60% 40%, transparent 55%, rgba(0, 0, 0, .45)),
    linear-gradient(168deg, #0a0c0b 0%, #0b0f0c 55%, #0d1510 100%);
  --hero-fade: #0e1410; /* the hero settles into What you get's top tone */
  /* what you get — deep charcoal, a slight forest tint */
  --bg-value:
    radial-gradient(48% 55% at 12% 8%, rgba(30, 58, 38, .3), transparent 72%),
    radial-gradient(55% 60% at 88% 100%, rgba(22, 42, 28, .38), transparent 70%),
    linear-gradient(180deg, var(--hero-fade), #0b0e0c 45%);
  --spot: rgba(46, 92, 52, .3);          /* the cursor's light on the What you get surface */
  --spot-grid: rgba(var(--accent-rgb), .07);
  /* featured work — a graphite band, brightest through its middle, feathered at both edges */
  --bg-work: linear-gradient(180deg, #0f1411, #131a15 50%, #0f1411);
  --pool-voices: rgba(24, 48, 30, .32);         /* a low forest light behind the lead quote */
  --voices-base: linear-gradient(100deg, transparent 0 28%, rgba(17, 34, 22, .68) 60%, rgba(20, 40, 26, .82)); /* charcoal into deep forest, left stays ink */
  --voices-glow: rgba(42, 84, 50, .46);         /* forest light behind the lead video */
  --voices-glow-2: rgba(42, 84, 50, .26);       /* a weaker one behind the evidence */
  --terrain-ink: rgba(var(--accent-rgb), .085); /* the lower page's contour field (.terrain) */
  /* process — light gathers where the orbits are */
  --bg-proc-glow: radial-gradient(42% 62% at 70% 55%, rgba(24, 48, 30, .4), transparent 72%);
  --bg-proc:
    radial-gradient(60% 80% at 100% 100%, rgba(26, 50, 32, .5), transparent 70%),
    linear-gradient(165deg, #151c17, #101512 60%);
  /* final CTA — a focused light behind the emblem */
  --bg-contact:
    radial-gradient(22% 36% at 76% 52%, rgba(var(--accent-rgb), .05), transparent 70%),
    radial-gradient(45% 62% at 76% 52%, rgba(28, 58, 36, .55), transparent 72%);

  /* hero code field glyphs, as r, g, b */
  --glyph-bit: 138, 143, 139;
  --glyph-code: 215, 243, 82;
  --glyph-hot: 240, 240, 232;
  --glyph-k: 1;   /* overall glyph strength */

  --f-display: "Archivo", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #e5e3d9;      /* warm stone */
  --surface: #d7dcd2;  /* pale sage-grey */
  --raised: #eeede5;   /* a lighter warm neutral, never white */
  --raised-2: #f3f2ec;
  --rule: #c8cabf;
  --fog: #565a52;      /* muted graphite */
  --bone: #20241f;     /* charcoal type */
  --bone-hi: #0c0e0c;
  --accent: #475f06;   /* deep olive: lime's ink on a light ground (lime itself stays the fill) */
  --accent-rgb: 71, 95, 6;
  --accent-hi: #e3f97f;

  --line: #bcc0b4;
  --line-2: #b5baad;
  --line-3: #979d91;
  --ring: rgba(32, 36, 31, .12);
  --icon-hi: #f1f0ea;
  --icon-lo: #dcdfd5;
  --core-hi: #efeee7;
  --core-lo: #d6dbd0;

  --light-soft: rgba(196, 226, 80, .14);
  --light-faint: rgba(196, 226, 80, .08);
  --sheen: rgba(255, 255, 255, .4);
  --grid-line: rgba(32, 36, 31, .06);
  --glow: rgba(214, 236, 140, .3);      /* multiplied, so it tints the stone without washing the glyphs */
  --glow-edge: rgba(214, 236, 140, .1);
  --glow-blend: multiply;
  --forest: rgba(190, 204, 178, .6);     /* muted sage */
  --deep: #d6dad0;   /* the floor turns sage */
  --glass-edge: rgba(32, 36, 31, .12);
  --glass-hi: rgba(255, 255, 255, .55);

  /* hero — warm light on the mark inside a sage-green haze, sage carried down below */
  --bg-hero:
    radial-gradient(34% 44% at 73% 44%, rgba(250, 250, 240, .5), transparent 70%),
    radial-gradient(62% 78% at 74% 46%, rgba(205, 222, 170, .3), transparent 72%),
    radial-gradient(80% 45% at 40% 108%, rgba(200, 212, 188, .6), transparent 70%),
    linear-gradient(168deg, #ebe9e0 0%, #e5e3d9 55%, #d9ded1 100%);
  --hero-fade: #dfe0d6;
  --bg-value:
    radial-gradient(48% 55% at 12% 8%, rgba(246, 245, 236, .7), transparent 72%),
    radial-gradient(55% 60% at 88% 100%, rgba(198, 210, 186, .5), transparent 70%),
    linear-gradient(180deg, var(--hero-fade), var(--ink) 45%);
  --spot: rgba(222, 240, 150, .6);        /* white light vanishes on stone, so here it is a sunlit lime wash */
  --spot-grid: rgba(var(--accent-rgb), .2);
  --bg-work: linear-gradient(180deg, #dadfd4, #d3d9cd 50%, #dadfd4);
  --pool-voices: rgba(244, 243, 234, .75);
  --voices-base: linear-gradient(100deg, transparent 0 32%, rgba(200, 210, 192, .35) 62%, rgba(196, 208, 188, .5));
  --voices-glow: rgba(236, 240, 228, .7);
  --voices-glow-2: rgba(236, 240, 228, .4);
  --terrain-ink: rgba(60, 80, 50, .1);
  --bg-proc-glow: radial-gradient(42% 62% at 70% 55%, rgba(200, 214, 180, .5), transparent 72%);
  --bg-proc:
    radial-gradient(60% 80% at 100% 100%, rgba(196, 210, 180, .6), transparent 70%),
    linear-gradient(165deg, #ecebe3, #e0e2d8 60%);
  --bg-contact:
    radial-gradient(22% 36% at 76% 52%, rgba(214, 238, 120, .28), transparent 70%),
    radial-gradient(45% 62% at 76% 52%, var(--forest), transparent 72%);

  --glyph-bit: 70, 76, 70;
  --glyph-code: 71, 95, 6;
  --glyph-hot: 32, 36, 31;
  --glyph-k: .75;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; } /* in-page jumps are eased in main.js */
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--accent-fill); color: var(--on-accent); padding: 8px 14px; border-radius: 6px; }
.skip:focus { left: 8px; }

.mark {
  display: inline-block; width: 26px; height: 27px; background: currentColor;
  -webkit-mask: url(assets/logo.svg) center / contain no-repeat;
          mask: url(assets/logo.svg) center / contain no-repeat;
}

.eyebrow {
  font: 500 12px/1 var(--f-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 22px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent-fill); color: var(--on-accent);
  font: 600 15px/1 var(--f-display); font-stretch: 112%;
  padding: 16px 24px; border-radius: 999px;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--accent-hi); transform: translateY(-1px); }
.btn span { transition: transform .25s var(--ease); }
.btn:hover span { transform: translateX(3px); }
.btn--small { padding: 11px 18px; font-size: 13px; white-space: nowrap; }
.btn--big { font-size: clamp(17px, 2.2vw, 24px); padding: 22px 34px; }
.link { font-weight: 500; border-bottom: 1px solid var(--rule); padding-bottom: 3px; transition: border-color .2s; }
.link:hover { border-color: var(--accent); color: var(--accent); }
.link { transition: border-color .2s, color .2s; }
.link--arrow span { display: inline-block; transition: transform .3s var(--ease); }
.link--arrow:hover span { transform: translate(3px, 0); }
.hero__cta .link--arrow:hover span { transform: translateY(3px); }

/* ---------- nav ---------- */
/* Three states, all one element so every change can ease:
   top of page   — full width, transparent
   .is-scrolled  — lifts off into a floating bar of clear glass
   .is-collapsed — scrolling down folds it to a compact pill (brand + actions);
                   scrolling up, hover (.is-peek, set in main.js with a short leave delay so
                   the edge of a resizing pill cannot flicker) or keyboard focus opens it again */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  margin-inline: auto; max-width: 100vw;
  display: flex; align-items: center; gap: 32px;
  padding: 18px var(--gutter);
  border: 1px solid transparent; border-radius: 0;
  transition: top .4s var(--ease), max-width .32s var(--ease), padding .32s var(--ease), border-radius .32s var(--ease),
              gap .32s var(--ease), background-color .3s, border-color .3s, box-shadow .3s;
}
.nav.is-scrolled {
  top: 10px; max-width: min(calc(100vw - 2 * var(--gutter) + 24px), calc(100vw - 16px));
  padding: 10px 12px 10px 22px; border-radius: 20px;
  /* clear glass, not frosted: a light blur and a thin tint, edged by a hairline and a top highlight */
  background-color: color-mix(in srgb, var(--ink) 9%, transparent);
  backdrop-filter: blur(2.5px) saturate(140%); -webkit-backdrop-filter: blur(2.5px) saturate(140%);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 30px -18px rgba(0, 0, 0, .5);
}
.nav.is-collapsed:not(.is-peek):not(:has(:focus-visible)):not(.is-open) {
  max-width: min(470px, calc(100vw - 16px)); gap: 18px; padding: 7px 7px 7px 18px; border-radius: 999px;
}
.nav__links { transition: opacity .22s var(--ease) .06s, max-width .32s var(--ease); max-width: 640px; } /* links fade in once the bar has room */
.nav.is-collapsed:not(.is-peek):not(:has(:focus-visible)):not(.is-open) .nav__links { opacity: 0; max-width: 0; overflow: hidden; pointer-events: none; transition-delay: 0s; }
/* brand and the end group share the leftover width equally, so the links sit in the true centre */
.nav__brand { display: flex; align-items: center; gap: 5px; color: var(--bone); flex: 1 1 0; }
.nav__end { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; } /* tight: the mark reads as the S of "Compass" */
.nav__name { white-space: nowrap; font: 600 17px/1 var(--f-display); font-stretch: 118%; letter-spacing: .01em; }
.nav__links { display: flex; gap: 30px; font-size: 14px; color: var(--fog); }
.nav__links a { position: relative; padding: 6px 0; transition: color .2s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.nav__links a:hover { color: var(--bone); }
.nav__links a:hover::after, .nav__links a.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav__links a.is-current { color: var(--bone); }
.nav__theme { /* sun in dark mode, moon in light: the icon names the theme it switches to */
  all: unset; box-sizing: border-box; cursor: pointer; flex: none;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule);
  display: grid; place-items: center; color: var(--fog); transition: color .2s, border-color .2s;
}
.nav__theme:hover { color: var(--bone); border-color: var(--fog); }
.nav__theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav__theme svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.nav__theme .moon, [data-theme="light"] .nav__theme .sun { display: none; }
[data-theme="light"] .nav__theme .moon { display: block; }
.nav__menu { /* small screens only: two lines that cross into an X when open */
  all: unset; display: none; box-sizing: border-box; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule);
  place-content: center; gap: 5px; flex: none;
}
.nav__menu span { display: block; width: 16px; height: 1.5px; background: var(--bone); transition: transform .3s var(--ease); }
.nav.is-open .nav__menu span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav.is-open .nav__menu span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.nav__menu:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn:active, .proc__cta:active { transform: translateY(0) scale(.98); }
/* the closing CTA is the list's open fourth entry: a dashed, unclaimed row lined up with
   the projects above, waiting for the visitor's name. Hover claims it: the edge turns lime
   and a caret blinks where the name would be typed. */
.slot {
  --pad: clamp(18px, 2.4vw, 34px); --idx: 44px; --col-gap: clamp(16px, 2vw, 28px);
  position: relative; display: grid; align-items: center; column-gap: var(--col-gap);
  grid-template-columns: var(--idx) minmax(0, 1.15fr) minmax(0, 1fr) auto;
  margin-top: 14px; padding: 24px var(--pad);
  border: 1px dashed var(--line-3); border-radius: 20px;
  background: color-mix(in srgb, var(--raised) 22%, transparent);
  transition: border-color .4s var(--ease), background-color .4s;
}
.slot__idx { font: 400 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--fog); opacity: .7; }
.slot__name {
  font: 500 clamp(28px, 3vw, 42px)/1 var(--f-display); font-stretch: 112%; letter-spacing: -.02em;
  color: var(--fog); transition: color .3s, translate .4s var(--ease);
}
.slot__caret { /* where the visitor's project name goes */
  display: inline-block; width: 2px; height: .8em; margin-left: 6px; vertical-align: -.04em;
  background: var(--accent-fill); opacity: 0;
}
.slot__ask { font: 400 15px/1.35 var(--f-body); color: var(--bone); }
.slot__btn { justify-self: end; }
.slot:hover, .slot:focus-visible { border-color: rgba(var(--accent-rgb), .7); background-color: rgba(var(--accent-rgb), .035); }
.slot:hover .slot__name, .slot:focus-visible .slot__name { color: var(--bone); translate: 6px 0; }
.slot:hover .slot__caret, .slot:focus-visible .slot__caret { animation: slot-caret 1.05s steps(1) infinite; }
.slot:hover .slot__btn { background: var(--accent-hi); transform: translateY(-1px); }
.slot:hover .slot__btn span { transform: translateX(3px); }
.slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.slot.is-in .slot__caret { animation: slot-caret 1.05s steps(1) 3 .9s; } /* blinks three times as it arrives, then waits */
.slot.reveal { transition: opacity .9s var(--ease), transform .9s var(--ease), border-color .4s var(--ease), background-color .4s; } /* keep the page reveal and the hover together */
.slot.is-in { transition-delay: 0s !important; } /* no stagger lag on hover */
@keyframes slot-caret { 0% { opacity: 1; } 50% { opacity: 0; } }
@media (max-width: 1100px) { .slot { grid-template-columns: var(--idx) minmax(0, 1fr) auto; } .slot__ask { display: none; } }
@media (max-width: 700px) {
  .slot { --pad: 16px; border-radius: 16px; grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 20px var(--pad); }
  .slot__idx { display: none; }
  .slot__name { font-size: 28px; }
  .slot__ask { display: block; }
  .slot__btn { justify-self: stretch; justify-content: center; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .slot, .slot__name { transition: none; }
  .slot__name { translate: none !important; }
  .slot__caret { animation: none !important; }
  .slot:hover .slot__caret, .slot:focus-visible .slot__caret { opacity: 1; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: end;
  padding: 120px var(--gutter) clamp(88px, 15vh, 170px);
  overflow: hidden;
  background: var(--bg-hero); /* charcoal pooling into forest (dark) or stone into sage (light) */
}
.hero::after { /* vignette into the next section */
  content: ""; position: absolute; inset: auto 0 0; height: 30%;
  background: linear-gradient(to bottom, transparent, var(--hero-fade));
  z-index: 1; pointer-events: none;
}
.hero::before { /* localized light behind the 3D mark — lifts the code texture there */
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  right: 3vw; top: 50%; translate: 0 -45%; width: min(56vw, 820px); aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--glow), var(--glow-edge) 58%, transparent);
  mix-blend-mode: var(--glow-blend);
  scale: 1.18; /* wider than the mark, so the light diffuses past its edges */
  opacity: calc(1 - var(--dock, 0));
}
.hero__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__logo {
  position: absolute; z-index: 1; pointer-events: none;
  right: 3vw; top: 50%; translate: 0 -45%;
  width: min(56vw, 820px); aspect-ratio: 1;
}
/* flat stand-in for the 3D mark when WebGL is unavailable or its context is lost:
   a lime rim (back layer, slightly larger) under a dark metal face */
.is-flat canvas { visibility: hidden; }
.is-flat::before, .is-flat::after {
  content: ""; position: absolute; inset: var(--flat-inset, 15%);
  -webkit-mask: url(assets/logo.svg) center / contain no-repeat;
          mask: url(assets/logo.svg) center / contain no-repeat;
}
.is-flat::before { background: linear-gradient(160deg, var(--accent-hi), #6f8a1a 60%, var(--accent)); filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), .35)); }
.is-flat::after { scale: .96; background: radial-gradient(90% 80% at 35% 25%, #3a4148, #1a1e22 55%, #0d0f10); }
.emblem__mark.is-flat { --flat-inset: 8%; }
.hero__logo canvas { width: 100% !important; height: 100% !important; display: block; }
.hero__copy { position: relative; z-index: 2; max-width: 600px; }
.hero__title {
  font: 500 clamp(44px, 7vw, 100px)/.9 var(--f-display);
  font-stretch: 112%; letter-spacing: -.035em;
  margin: 0 0 28px;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > * { display: inline-block; }
.hero__lede { color: var(--fog); max-width: 440px; margin: 0 0 36px; font-size: 18px; }
.hero__cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.bearing {
  position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(48px, 8vh, 96px);
  display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 6px;
  font-family: var(--f-mono); text-align: right;
}
.bearing__label { grid-column: 1 / -1; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fog); }
.bearing__deg { font-size: 34px; line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; }
.bearing__dir { font-size: 14px; color: var(--accent); align-self: end; min-width: 2.4ch; text-align: left; }
.hero__hint {
  position: absolute; z-index: 2; left: 50%; bottom: 22px; translate: -50% 0; margin: 0;
  font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fog);
  opacity: .6; transition: opacity .8s;
}
.hero__hint.is-gone { opacity: 0; }
@media (pointer: coarse) { .hero__hint { display: none; } } /* there is no cursor to move on touch screens */

/* north coordinates: the brand's fix in the hero's upper left — a mono label, the true-north
   readout beside a small instrument, a ruled scale, then the line it all points to */
.north {
  position: absolute; z-index: 2; left: var(--gutter); top: clamp(104px, 10vh, 128px);
  width: 300px; color: var(--fog);
}
.north p { margin: 0; }
.north__label {
  display: flex; align-items: center; gap: 10px;
  font: 400 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}
.north__label::after { content: ""; flex: 1; height: 1px; background: var(--line-2); } /* hairline to the edge */
.north__fix { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.north__dial { flex: none; width: 58px; height: 58px; overflow: visible; }
.north__ring { fill: none; stroke: var(--line-3); stroke-width: 1; }
.north__ticks { fill: none; stroke: var(--line-3); stroke-width: 3; stroke-dasharray: .6 2.934; } /* 48 ruled ticks */
.north__cardinal { fill: none; stroke: var(--fog); stroke-width: 1; }
.north__needle { transform-origin: 32px 32px; }
.north__tip { fill: var(--accent-fill); }
.north__tail { fill: var(--line-3); }
.north__hub { fill: var(--bone); }
.north__lat {
  font: 500 28px/1 var(--f-mono); letter-spacing: -.02em; color: var(--bone); white-space: nowrap;
}
.north__lat span { margin-left: .3em; font-size: .5em; letter-spacing: .1em; color: var(--accent); vertical-align: .55em; }
.north__sub {
  margin-top: 9px !important;
  font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.north__scale { /* the measuring rule: fine ticks, a longer one every fifth */
  height: 9px; margin: 18px 0 16px; border-top: 1px solid var(--line-2);
  background:
    repeating-linear-gradient(90deg, var(--line-3) 0 1px, transparent 1px 60px) top left / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 12px) top left / 100% 5px no-repeat;
}
.north__line {
  font: 500 24px/1.08 var(--f-display); font-stretch: 112%; letter-spacing: -.02em; color: var(--bone);
}
.north__note { margin-top: 10px !important; max-width: 30ch; font-size: 14px; line-height: 1.5; }
.js .north { opacity: 0; transform: translateY(24px); }
.is-ready .north { animation: rise .9s .6s var(--ease) forwards; }
.is-ready .north__needle { animation: north-settle 2.2s .9s var(--ease) both; } /* one damped swing, then still */
@keyframes north-settle {
  0% { rotate: -14deg; } 30% { rotate: 7deg; } 52% { rotate: -3.5deg; } 72% { rotate: 1.5deg; } 88% { rotate: -.5deg; } 100% { rotate: 0deg; }
}
/* only where the hero has the room, never over the headline (whose eyebrow sits ~770px above the
   viewport bottom at full size): the full fix on tall screens, just the readout on mid-height ones */
@media (max-height: 1179px) { .north__scale, .north__line, .north__note { display: none; } }
@media (max-width: 1100px), (max-height: 1019px) { .north { display: none; } }
@media (prefers-reduced-motion: reduce) { .is-ready .north__needle { animation: none; } }

/* intro reveal */
.js .hero__title .line > *, .js .hero__lede, .js .hero__cta, .js .hero .eyebrow, .js .bearing {
  opacity: 0; transform: translateY(24px);
}
.is-ready .hero__title .line > * { animation: rise 1s var(--ease) forwards; }
.is-ready .hero__title .line:nth-child(2) > * { animation-delay: .08s; }
.is-ready .hero .eyebrow { animation: rise .8s var(--ease) forwards; }
.is-ready .hero__lede { animation: rise .9s .25s var(--ease) forwards; }
.is-ready .hero__cta { animation: rise .9s .35s var(--ease) forwards; }
.is-ready .bearing { animation: rise .9s .5s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
.section { padding: var(--section-y) var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.section__head { margin-bottom: clamp(36px, 5vh, 56px); }
.section__title {
  font: 500 clamp(34px, 4.6vw, 64px)/1.02 var(--f-display);
  font-stretch: 110%; letter-spacing: -.03em; margin: 0; max-width: 18ch;
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- background system ----------
   Sections are width-capped, so each paints a full-bleed layer behind itself
   (.bg::before) from its own --bg stack. Only Work is a band; everything else
   sits on the ink canvas, so the alternation stays rare and deliberate. */
.bg { position: relative; isolation: isolate; }
.bg::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 calc(50% - 50vw);
  background: var(--bg, none);
}
.bg--band::before { /* an alternate surface whose edges feather into its neighbours, so tones flow, not step */
  -webkit-mask: linear-gradient(transparent, #000 88px, #000 calc(100% - 88px), transparent);
          mask: linear-gradient(transparent, #000 88px, #000 calc(100% - 88px), transparent);
}

/* ---------- value: what S Compass provides ---------- */
.value { --bg: var(--bg-value); }
.value::before { /* the hero ends on a fine separator that fades out toward the page edges */
  border-top: 1px solid; border-image: linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent) 1;
}
.value__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.value__swap { margin: 0; font: 400 13px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fog); display: flex; gap: 12px; align-items: center; }
.value__swap s { text-decoration-color: rgba(var(--accent-rgb), .7); text-decoration-thickness: 1px; opacity: .7; }
.value__swap b { font-weight: 500; color: var(--accent); }
/* the four benefits and their diagrams live in value.css */

/* ---------- work: the index on the bench ----------
   A compact index of the work (name · category · stack) laid on a drafting bench:
   faint contour lines and a ruled top edge are the shared ground. Opening a row
   sets the story beside a fixed-height plate of the product's real screens, each
   in its own colours, so an open row never grows past the plate. One open at a time. */
.work {
  --bg: radial-gradient(70% 45% at 20% 0%, var(--sheen), transparent 70%), var(--bg-work);
}
.bench {
  --pad: clamp(18px, 2.4vw, 34px);
  --idx: 44px;                              /* the index-number column */
  --col-gap: clamp(16px, 2vw, 28px);
  --plate-h: clamp(264px, 21vw, 290px);     /* the visual area: fixed, never content-sized */
  position: relative; isolation: isolate; overflow: hidden;
  --r: 20px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: linear-gradient(180deg, color-mix(in srgb, var(--raised) 60%, transparent), color-mix(in srgb, var(--raised) 25%, transparent));
  transition: border-color .8s var(--ease);
}
/* while a project is open the border keeps the faintest lime tint; the bright part is only the sweep */
.bench:has(.project.is-open) { border-color: color-mix(in srgb, var(--rule) 82%, var(--accent-fill)); }
.bench__edge { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bench__edge path {
  fill: none; stroke: var(--accent-fill); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 0 100000; opacity: 0;
  filter: drop-shadow(0 0 4px rgba(215, 243, 82, .55));
}
.bench::before { /* the ruled top edge of the bench */
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 6px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 12px);
  opacity: .8;
}
.bench__topo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; fill: none; stroke: rgba(var(--accent-rgb), .06); stroke-width: 1; }
@media (min-width: 701px) { /* contours a touch quieter behind the story column, full strength around the product */
  .bench__topo { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .5) 38%, #000 58%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .5) 38%, #000 58%); }
}
.bench__topo path { vector-effect: non-scaling-stroke; }
/* living contours: each ring drifts a few units and breathes a little on a long, eased,
   alternating cycle, so the ground feels alive without ever moving enough to notice.
   Transforms and opacity only (no path morphing); running only while the bench is on
   screen (work.js toggles .is-visible); off for reduced motion. */
.bench__topo { pointer-events: none; }
.bench__topo path {
  transform-box: view-box;
  animation: topo-drift-a 18s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  animation-play-state: paused;
}
.bench__topo path:nth-child(n+9) { animation-name: topo-drift-b; animation-duration: 15s; } /* the second contour cluster drifts its own way */
.bench__topo path:nth-child(3n+2) { animation-delay: -5s; }
.bench__topo path:nth-child(3n) { animation-delay: -10s; }
.bench.is-visible .bench__topo path { animation-play-state: running; }
@keyframes topo-drift-a { from { translate: 0 0; opacity: 1; } to { translate: -9px 6px; opacity: .72; } }
@keyframes topo-drift-b { from { translate: 0 0; opacity: .8; } to { translate: 8px -7px; opacity: 1; } }
.bench__list { list-style: none; margin: 0; padding: 0; }

.project { position: relative; }
.project + .project { border-top: 1px solid var(--rule); }
.project::before { /* the active row's lime edge */
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; border-radius: 2px;
  background: var(--accent-fill); transform: scaleY(0); transition: transform .5s var(--ease);
}
.project.is-open::before { transform: scaleY(1); }
.project__h { margin: 0; font: inherit; }
.project__row {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: var(--idx) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) 28px;
  align-items: center; column-gap: var(--col-gap);
  padding: 26px var(--pad);
  transition: background-color .35s;
}
.project.is-open .project__row { background-color: color-mix(in srgb, var(--raised-2) 22%, transparent); } /* the open row keeps a faint tint, under the existing .35s transition */
.project__row:hover { background-color: color-mix(in srgb, var(--raised-2) 45%, transparent); }
.project__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 14px; }
.project__idx { font: 400 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--fog); opacity: .7; }
.project__name {
  font: 500 clamp(28px, 3vw, 42px)/1 var(--f-display); font-stretch: 112%; letter-spacing: -.02em; color: var(--bone);
  transition: color .3s, translate .4s var(--ease);
}
.project__kind { font: 400 15px/1.3 var(--f-body); color: var(--bone); }
.project__stack { font: 400 12.5px/1.4 var(--f-mono); color: var(--fog); }
.project__arrow { justify-self: end; font-size: 20px; line-height: 1; color: var(--fog); transition: color .3s, rotate .45s var(--ease); }
.project__row:is(:hover, :focus-visible) .project__name { color: var(--accent); translate: 6px 0; }
.project__row:is(:hover, :focus-visible) .project__arrow { color: var(--accent); }
.project.is-open .project__name, .project.is-open .project__arrow { color: var(--accent); }
.project.is-open .project__arrow { rotate: 90deg; } /* points down: this one is open */
.project__arrow { transition: color .3s, rotate .45s var(--ease), translate .3s var(--ease); } /* same as above, plus the nudge */
.project:not(.is-open) .project__row:is(:hover, :focus-visible) .project__arrow { translate: 3px 0; }

/* the drawer: a moderate opening, no taller than the plate */
.project__more {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .5s var(--ease), visibility 0s linear .5s;
}
.project.is-open .project__more { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.project__inner { min-height: 0; overflow: hidden; }
.project__body {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.38fr); gap: clamp(24px, 3vw, 48px); align-items: center;
  padding: 0 var(--pad) var(--pad) calc(var(--pad) + var(--idx) + var(--col-gap)); /* the story lines up under the name */
}
/* the plate arrives as one piece; the story beside it arrives in order (below) */
.project__body > .plate { opacity: 0; translate: 0 10px; transition: opacity .25s, translate .45s var(--ease); }
.project.is-open .project__body > .plate { opacity: 1; translate: 0 0; transition: opacity .45s .12s, translate .55s var(--ease) .1s; }

.project__copy { display: grid; gap: 12px; justify-items: start; align-content: start; }
.project__lede { margin: 0; max-width: 54ch; font-size: 15px; line-height: 1.55; color: var(--fog); }
.project__lede--sub { font-size: 14px; }
.project__spec { position: relative; margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 12px; width: 100%; }
.project__spec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); } /* the divider */
.project__spec div { display: grid; gap: 6px; }
.project__spec dt { font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fog); opacity: .75; }
.project__spec dd { margin: 0; font: 400 12.5px/1.3 var(--f-mono); color: var(--bone); }
.project__links { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.project__film { all: unset; cursor: pointer; }
.project__film:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* the description's line reveal: work.js splits each description into its real, measured
   lines (re-measured when the width changes, so wrapping stays natural). Each line is a
   mask; its text slides up into it, one line after another. Only the description text
   moves; metadata, links and the panel stay put. Screen readers get the whole paragraph
   from a hidden copy; the line spans are aria-hidden. */
.lede__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lede__line { display: block; padding-bottom: .12em; margin-bottom: -.12em; clip-path: inset(0 -100vw 0 -100vw); } /* masks top and bottom only; the padding is room for descenders, cancelled by the margin */
.lede__in { display: block; white-space: nowrap; } /* a measured line never re-wraps */
.project__copy > .project__lede { justify-self: stretch; } /* the paragraph takes its column's width, never its lines' width, so it re-measures as the screen narrows */
.project__lede.is-masked .lede__in { translate: 0 110%; transition: none; }
.project__lede.is-playing .lede__in { translate: 0 0; transition: translate .62s cubic-bezier(.22, .8, .24, 1) calc(var(--l, 0) * 75ms); }

/* the details that follow the description: they start as its last line starts
   (--lines is set by work.js). The divider draws left to right like a ruler line, each
   label and value slides up out of its own mask, then the links rise in. Closing hides
   them at once, so a quick switch never strands anything. */
.project { --after: calc(.24s + var(--lines, 4) * 75ms); }
.project__spec::before { transform-origin: left; scale: 0 1; transition: scale 0s .15s; }
.project__spec :is(dt, dd) { display: block; padding-bottom: .15em; margin-bottom: -.15em; clip-path: inset(0 -100vw 0 -100vw); }
.project__spec :is(dt, dd) > span { display: inline-block; translate: 0 115%; transition: translate 0s .15s; }
.project__links > * { opacity: 0; translate: 0 10px; transition: opacity .15s, translate 0s .15s; }
.project.is-open .project__spec::before { scale: 1 1; transition: scale .7s cubic-bezier(.65, 0, .35, 1) var(--after); }
.project.is-open .project__spec :is(dt, dd) > span { translate: 0 0; transition: translate .55s cubic-bezier(.22, .8, .24, 1) calc(var(--after) + var(--s, 0s)); }
.project.is-open .project__spec > div:nth-child(1) dt > span { --s: .12s; }
.project.is-open .project__spec > div:nth-child(1) dd > span { --s: .18s; }
.project.is-open .project__spec > div:nth-child(2) dt > span { --s: .24s; }
.project.is-open .project__spec > div:nth-child(2) dd > span { --s: .3s; }
.project.is-open .project__links > * { opacity: 1; translate: 0 0; transition: opacity .45s var(--ease) calc(var(--after) + var(--s, 0s)), translate .55s var(--ease) calc(var(--after) + var(--s, 0s)); }
.project.is-open .project__links > :nth-child(1) { --s: .4s; }
.project.is-open .project__links > :nth-child(2) { --s: .47s; }
.project.is-open .project__links > :nth-child(3) { --s: .54s; }

/* hover touches: a spec group lights its own stretch of the divider; links get a lime
   underline that sweeps across, and their arrow points where it goes (↗ leaves, → stays) */
.project__spec > div { position: relative; }
.project__spec > div::before {
  content: ""; position: absolute; left: 0; top: -12px; height: 1px; width: 100%;
  background: var(--accent); transform-origin: left; scale: 0 1; transition: scale .45s var(--ease);
}
.project__spec > div:hover::before { scale: 1 1; }
.project__spec dt { transition: color .3s, opacity .3s; }
.project__spec > div:hover dt { color: var(--accent); opacity: 1; }
.project__links .link {
  border-bottom-color: transparent;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0% 1px no-repeat,
              linear-gradient(var(--rule), var(--rule)) 0 100% / 100% 1px no-repeat;
  transition: color .25s, background-size .5s var(--ease);
}
.project__links .link:is(:hover, :focus-visible) { background-size: 100% 1px, 100% 1px; }
.project__links a[target="_blank"]:hover span { transform: translate(3px, -3px); }
.project__links .link:not([target="_blank"]):hover span { transform: translate(5px, 0); }

/* the plate: a fixed-height piece of the bench in the product's own light */
.plate {
  position: relative; height: var(--plate-h); border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 34px 60px -46px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.plate--kiks { background: radial-gradient(70% 90% at 78% 85%, var(--kiks-glow, rgba(46, 160, 100, .17)), transparent 70%), #121614; transition: background-color .8s; }
.plate--kiks:has([data-theme-shot="halloween"]) { --kiks-glow: rgba(240, 125, 30, .2); background-color: #151019; }
.plate--medlex { background: radial-gradient(60% 70% at 50% 64%, rgba(32, 167, 150, .34), transparent 72%), linear-gradient(180deg, #0d1c1b, #0a1514); }
.plate--grabgo {
  background:
    linear-gradient(118deg, transparent 58%, rgba(198, 243, 107, .1) 58% 69%, transparent 69%), /* Grab&Go's lime slash */
    radial-gradient(70% 80% at 60% 70%, rgba(63, 154, 53, .25), transparent 70%),
    #10261a;
}

/* notes: real features, pinned once the plate opens */
.notes { position: absolute; inset: 0; z-index: 4; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.note { position: absolute; left: var(--x); top: var(--y); }
.note::before { /* the pin */
  content: ""; position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%;
  background: #d7f352; box-shadow: 0 0 0 3px rgba(215, 243, 82, .22);
  scale: 0; transition: scale .35s cubic-bezier(.3, 1.6, .5, 1);
}
.note span {
  position: absolute; left: 11px; top: 0; translate: -4px -50%; white-space: nowrap;
  padding: 4px 8px; border: 1px solid rgba(215, 243, 82, .28); border-radius: 6px;
  background: rgba(9, 11, 10, .86); color: #f0f0e8; font: 400 10px/1 var(--f-mono); letter-spacing: .03em;
  opacity: 0; transition: opacity .3s, translate .4s var(--ease);
}
.note--l span { left: auto; right: 11px; translate: 4px -50%; }
.project.is-open .note::before { scale: 1; transition-delay: calc(.45s + var(--i, 0) * .08s); }
.project.is-open .note span { opacity: 1; translate: 0 -50%; transition-delay: calc(.52s + var(--i, 0) * .08s); }
.note:nth-child(2) { --i: 1; }
.note:nth-child(3) { --i: 2; }

/* Kiks: the scrollable site and the app, side by side, and the theme key that reskins both.
   Halloween is revealed by a circle of light from the switch. Nothing here leans or moves
   with the pointer: the site shows a real person. */
.kiks {
  --ph: .66; /* the phone's share of the plate height; the site gives way only by the phone's width less a small overlap */
  position: absolute; inset: 14px 14px 14px 16px;
}
.kiks .shot--browser { z-index: 1; right: calc((var(--plate-h) - 28px) * var(--ph) * 480 / 1040 - 36px); }
.project--kiks, .project--medlex, .project--grabgo { --plate-h: clamp(420px, 34vw, 500px); } /* the two plates people explore get more room */
.shot { position: relative; border-radius: 10px; overflow: hidden; }
.shot--browser {
  position: absolute; left: 0; top: 0; right: 92px; bottom: 46px;
  display: flex; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .1); background: #15111d; box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .75);
}
.shot__bar { flex: none; display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.shot__bar span { margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); font: 400 10.5px/1 var(--f-mono); color: rgba(240, 240, 232, .7); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot__view { position: relative; flex: 1; min-height: 0; }
.shot__scroll {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(240, 240, 232, .38) transparent;
  background: #15111d;
}
.shot__scroll::-webkit-scrollbar { width: 6px; }
.shot__scroll::-webkit-scrollbar-thumb { background: rgba(240, 240, 232, .38); border-radius: 6px; }
.shot__scroll img { display: block; width: 100%; height: auto; }
.shot__scroll:focus-visible { outline: 2px solid #d7f352; outline-offset: -2px; }
.shot__hint {
  position: absolute; z-index: 3; left: 10px; bottom: 10px; pointer-events: none;
  padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(9, 11, 10, .55); backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px);
  font: 400 10px/1 var(--f-mono); letter-spacing: .04em; color: #f0f0e8;
  transition: opacity .4s, translate .4s var(--ease);
}
.shot__hint b { font-weight: 400; color: #d7f352; }
.kiks.is-scrolled .shot__hint { opacity: 0; translate: 0 6px; } /* it leaves once the visitor has scrolled */
.kiks__phone {
  position: absolute; right: 0; bottom: 0; height: calc(100% * var(--ph)); aspect-ratio: 480 / 1040; /* whole phone, inside the plate */
  box-sizing: content-box; /* the bezel sits outside the screen, so the screenshot fits exactly and nothing is trimmed */
  z-index: 3; /* its own layer, always above the site and its Halloween reveal */
  border-radius: 22px; border: 4px solid #0b0b0d; overflow: hidden; background: #0b0b0d;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), -18px 26px 44px -22px rgba(0, 0, 0, .75);
}
.kiks__phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.kiks .t-halloween { z-index: 1; clip-path: circle(0% at 0% 100%); transition: clip-path .9s cubic-bezier(.6, 0, .2, 1); }
.kiks__phone .t-halloween { transition-delay: .15s; }
.kiks[data-theme-shot="halloween"] .t-halloween { clip-path: circle(150% at 0% 100%); }
.kiks__key { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 12px; }
.kiks__switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: #0b0d0c;
}
.kiks__switch::before { /* the sliding thumb */
  content: ""; position: absolute; inset: 3px auto 3px 3px; width: calc(50% - 3px); border-radius: 999px;
  background: #2ea064; transition: translate .5s var(--ease), background-color .5s;
}
.kiks[data-theme-shot="halloween"] .kiks__switch::before { translate: 100% 0; background: #f07d1e; }
.kiks__switch button {
  all: unset; position: relative; z-index: 1; cursor: pointer; padding: 7px 14px; text-align: center;
  font: 500 11.5px/1 var(--f-body); color: rgba(240, 240, 232, .65); transition: color .3s;
}
.kiks__switch button[aria-checked="true"] { color: #fff; }
.kiks__switch button:focus-visible { outline: 2px solid #f0f0e8; outline-offset: 2px; border-radius: 999px; }
.kiks__cap { font: 400 10px/1.2 var(--f-mono); letter-spacing: .04em; color: rgba(240, 240, 232, .6); }
@media (max-width: 1200px) { .kiks__cap { display: none; } } /* the phone covers it; the copy already says it */

.kiks__cap::before { content: ""; display: inline-block; width: 14px; height: 1px; margin-right: 8px; vertical-align: middle; background: rgba(215, 243, 82, .6); }

/* MedLex: three real screens, fanned like instruments; the fan opens with the row */
.medlex { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; perspective: 1400px; }
/* each screen sits in one of three slots; data-pos moves it, and the move is the transition */
.medlex__p {
  position: absolute; height: 80%; aspect-ratio: var(--ar);
  filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .5));
  transition: translate .7s var(--ease), scale .7s var(--ease), transform .7s var(--ease), height .7s var(--ease), filter .4s;
}
.medlex__p img { display: block; width: 100%; height: 100%; }
.medlex__p[data-pos="c"] { z-index: 2; height: 92%; }
.medlex__p[data-pos="l"] { z-index: 1; translate: -66% 4%; transform: rotateY(22deg); scale: .9; cursor: pointer; }
.medlex__p[data-pos="r"] { z-index: 1; translate: 66% 4%; transform: rotateY(-22deg); scale: .9; cursor: pointer; }
.medlex__p:is([data-pos="l"], [data-pos="r"]):hover { filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .5)) brightness(1.08); }
.project--medlex:not(.is-open) .medlex__p:is([data-pos="l"], [data-pos="r"]) { translate: 0 6%; scale: .8; }
/* notes belong to a screen and show only while it's in front */
.medlex__p .note { z-index: 3; }
.medlex__p:not([data-pos="c"]) .note::before { scale: 0 !important; transition-delay: 0s !important; }
.medlex__p:not([data-pos="c"]) .note span { opacity: 0 !important; transition-delay: 0s !important; }
.medlex__p[data-pos="c"] .note:nth-of-type(2) { --i: 1; }
.medlex__p[data-pos="c"] .note:nth-of-type(3) { --i: 2; }
.medlex__switch {
  position: absolute; z-index: 5; left: 14px; top: 14px; display: inline-grid; grid-template-columns: repeat(3, 1fr); padding: 3px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: #0b0d0c;
}
.medlex__switch::before { /* the sliding thumb, in MedLex teal */
  content: ""; position: absolute; inset: 3px auto 3px 3px; width: calc((100% - 6px) / 3); border-radius: 999px;
  background: #20a796; transition: translate .5s var(--ease);
}
.plate--medlex:has(.medlex[data-front="home"]) .medlex__switch::before { translate: 100% 0; }
.plate--medlex:has(.medlex[data-front="term"]) .medlex__switch::before { translate: 200% 0; }
.medlex__switch button {
  all: unset; position: relative; z-index: 1; cursor: pointer; padding: 7px 14px; text-align: center;
  font: 500 12px/1 var(--f-body); color: rgba(240, 240, 232, .65); transition: color .3s;
}
.medlex__switch button[aria-checked="true"] { color: #fff; }
.medlex__switch button:focus-visible { outline: 2px solid #f0f0e8; outline-offset: 2px; border-radius: 999px; }

/* Grab&Go: the marketing site in a browser window, both apps in front of it. The two
   phones sit wholly inside the plate (bezel outside the screen, so nothing is trimmed);
   the site gives way only by the phones' width less a small overlap. */
.gg {
  --ph: .6; /* the phones' share of the plate height */
  --pw: calc((var(--plate-h) - 28px) * var(--ph) * 420 / 865); /* one phone's screen width */
  position: absolute; inset: 14px 14px 14px 16px;
}
.gg .shot--browser { z-index: 1; bottom: 0; right: calc(var(--pw) * 1.72 - 34px); }
.gg.is-scrolled .shot__hint { opacity: 0; translate: 0 6px; }
.phone { position: absolute; border-radius: 20px; border: 4px solid #0b0b0d; overflow: hidden; background: #0b0b0d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), -16px 24px 40px -20px rgba(0, 0, 0, .75); }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gg .phone { box-sizing: content-box; height: calc(100% * var(--ph)); aspect-ratio: 420 / 865; transition: translate .7s var(--ease) .1s, opacity .5s .1s; }
.gg__counter { z-index: 3; right: 0; bottom: 22px; }
.gg__student { z-index: 4; right: calc(var(--pw) * .72); bottom: 0; }
.project--grabgo:not(.is-open) .gg .phone { translate: 0 24px; opacity: 0; }

/* the launch film, full size */
.film { padding: 0; border: 0; background: none; max-width: none; max-height: none; overflow: visible; }
.film::backdrop { background: rgba(5, 7, 6, .84); backdrop-filter: blur(2.5px); }
.film video { display: block; width: min(92vw, 1100px); aspect-ratio: 16 / 9; border-radius: 14px; background: #10261a; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); }
.film[open] { animation: box-in .45s var(--ease); }
.film__close {
  position: absolute; top: -54px; right: 0; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff;
}
.film__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.film__close:hover, .film__close:focus-visible { background: var(--accent-fill); color: #090b0a; border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .project::before, .project__row, .project__name, .project__arrow, .project__more, .project__body,
  .note::before, .note span, .kiks .t-halloween, .kiks__switch::before, .shot__hint,
  .medlex__p, .gg .phone, .plate--kiks, .project__body > .plate, .lede__in,
  .project__spec::before, .project__spec :is(dt, dd) > span, .project__links > * { transition: none !important; }
  .project__body > .plate, .lede__in, .project__spec :is(dt, dd) > span, .project__links > * { translate: none !important; }
  .bench__topo path { animation: none; }
  .project__row .project__arrow { translate: none !important; }
  .project__links > * { opacity: 1 !important; }
  .project__spec::before { scale: 1 1 !important; }
  .project--medlex:not(.is-open) .medlex__p[data-pos="l"] { translate: -66% 4%; scale: .9; }
  .project--medlex:not(.is-open) .medlex__p[data-pos="r"] { translate: 66% 4%; scale: .9; }
  .medlex__switch::before { transition: none; }
  .project--grabgo:not(.is-open) .gg .phone { translate: none; opacity: 1; }
}

/* tablet: the row drops its index number; the story and plate stay side by side */
@media (max-width: 1100px) {
  .bench { --idx: 0px; }
  .project__row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) 24px; }
  .project__idx { display: none; }
  .project__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); padding-left: var(--pad); }
  .bench { --plate-h: 280px; }
  .project--kiks, .project--medlex, .project--grabgo { --plate-h: 400px; }
}

/* phones: a name row, then category and stack beneath; inside the open project,
   the story first and a compact plate after it */
@media (max-width: 700px) {
  .bench { --pad: 16px; --plate-h: 236px; --r: 16px; }
  .project--kiks, .project--medlex, .project--grabgo { --plate-h: 380px; }
  .project__row { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 6px; padding: 18px var(--pad) 16px; }
  .project__name { grid-column: 1; font-size: 28px; }
  .project__arrow { grid-column: 2; grid-row: 1; }
  .project__kind { grid-column: 1; font-size: 14px; }
  .project__stack { grid-column: 1; font-size: 11.5px; }
  .project__body { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0 var(--pad) 20px; }
  .project__lede { font-size: 14.5px; }
  .kiks { inset: 10px 10px 10px 10px; }
  .kiks { --ph: .46; }
  .kiks .shot--browser { right: calc((var(--plate-h) - 20px) * var(--ph) * 480 / 1040 - 22px); bottom: 42px; }
  .kiks__phone { border-width: 3px; border-radius: 14px; }
  .kiks__cap { display: none; }
  .notes { display: none; } /* too small to pin; the copy names the same features */
  .medlex__p[data-pos="l"] { translate: -52% 6%; }
  .medlex__p[data-pos="r"] { translate: 52% 6%; }
  .medlex__p .note { display: none; }
  .medlex__p[data-pos="c"] { height: 80%; translate: 0 6%; }
  .medlex__switch { left: 50%; translate: -50% 0; top: 10px; }
  .gg { --ph: .44; inset: 10px; --pw: calc((var(--plate-h) - 20px) * var(--ph) * 420 / 865); }
  .gg .phone { border-width: 3px; border-radius: 14px; }
  .shot__bar i { display: none; } /* room for the address on a small screen */
  .shot__bar span { margin-left: 0; }
  .shot__chip { font-size: 0; gap: 0; } /* just the live dot */
  .gg__counter { bottom: 14px; }
}

/* Kiks live mode (data-live="on" on the browser frame): the real site in an iframe,
   laid out at a desktop width and scaled to fit the frame (work.js sets --live-s). */
.shot__live { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.shot__live iframe {
  position: absolute; left: 0; top: 0; border: 0;
  width: 1280px; height: calc(100% / var(--live-s, 1));
  transform: scale(var(--live-s, 1)); transform-origin: 0 0;
}
.shot__chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font: 400 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #d7f352; flex: none; }
.shot__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #d7f352; }
.shot--browser.is-live .shot__hint { display: none; }

/* ---------- terrain: one contour map under the lower page ----------
   From Clients to the footer the page sits on a single, seamless contour field
   (assets/terrain.svg tiles in both directions), so the sections read as one map.
   It fades in above Clients and out into the footer, stays quieter under the text
   column, and only lights up inside a moving window: the arrival scan, then the cursor. */
.terrain {
  position: absolute; left: 0; right: 0; top: var(--t-top, 0); height: var(--t-h, 0);
  z-index: 0; pointer-events: none;
  /* fades in above Clients; toward the end it eases down to ~60% where the footer starts, then out to nothing */
  -webkit-mask: linear-gradient(transparent, #000 260px, #000 calc(100% - 580px), rgba(0, 0, 0, .62) calc(100% - 380px), transparent);
          mask: linear-gradient(transparent, #000 260px, #000 calc(100% - 580px), rgba(0, 0, 0, .62) calc(100% - 380px), transparent);
}
.terrain::before, .terrain__lit {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: url(assets/terrain.svg) 50% 0 / var(--t-tile, 1800px) repeat, linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .45) 28%, #000 58%);
  -webkit-mask-composite: source-in;
          mask: url(assets/terrain.svg) 50% 0 / var(--t-tile, 1800px) repeat, linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .45) 28%, #000 58%);
          mask-composite: intersect;
}
.terrain::before { background: var(--terrain-ink); }
.terrain__lit {
  --lx: -400px; --ly: 50%; --lw: 340px; --lh: 340px;
  background: rgba(var(--accent-rgb), .55);
  -webkit-mask: url(assets/terrain.svg) 50% 0 / var(--t-tile, 1800px) repeat, radial-gradient(var(--lw) var(--lh) at var(--lx) var(--ly), #000 35%, transparent);
          mask: url(assets/terrain.svg) 50% 0 / var(--t-tile, 1800px) repeat, radial-gradient(var(--lw) var(--lh) at var(--lx) var(--ly), #000 35%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect; /* after the shorthands, which reset it */
  opacity: 0; transition: opacity .6s var(--ease);
}
.terrain__lit.is-on { opacity: 1; }
/* the sections it runs under drop their isolation, so their light paints beneath the map, not over it */
.voices, .proc, .contact { isolation: auto; }
@media (max-width: 700px) {
  .terrain { --t-tile: 1200px; }
  .terrain::before { -webkit-mask: url(assets/terrain.svg) 50% 0 / var(--t-tile) repeat; mask: url(assets/terrain.svg) 50% 0 / var(--t-tile) repeat; }
}

/* ---------- voices: client testimonials ----------
   An editorial showcase in three parts: the words (headline, Karim's own caption as the
   quote, attribution, CTA), his video story as the lead in a framed vertical player, and
   two smaller pieces of evidence offset beside it: his "thank you" story and the Halloween
   update it thanks us for. Every slot keeps its media's aspect ratio. Hover brings one
   piece forward and dims the rest. */
.voices { --bg: radial-gradient(42% 58% at 58% 56%, var(--pool-voices), transparent 72%), var(--voices-base); }
/* the section's ground: the base above feathers into the ink above and below; forest light
   pools behind the video (strong) and the evidence (weak), breathing on a long, slow cycle
   while the section is on screen; the Work bench's contours sit around the media and fade
   out before the words. Opacity only, nothing moves. */
.voices::before, .voices::after {
  -webkit-mask: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent);
          mask: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent);
}
.voices::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0 calc(50% - 50vw);
  background:
    radial-gradient(38% 58% at 57% 54%, var(--voices-glow), transparent 72%),
    radial-gradient(28% 50% at 84% 56%, var(--voices-glow-2), transparent 74%);
  animation: voices-breathe 18s ease-in-out infinite alternate; animation-play-state: paused;
}
.voices.is-visible::after { animation-play-state: running; }
@keyframes voices-breathe { from { opacity: .72; } to { opacity: 1; } }
.voices__grid {
  --vh: clamp(500px, 40vw, 640px); /* the lead video's height; the evidence is sized from it */
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px clamp(28px, 3vw, 52px); align-items: center;
}
.voices__grid::before { /* a ruled meridian behind the media, the same tick rule as the Work bench */
  content: ""; position: absolute; z-index: -1; left: 38%; right: 0; top: 50%; height: 6px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 12px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  opacity: .8; pointer-events: none;
}
.voices__intro { display: grid; gap: 22px; justify-items: start; max-width: 46ch; }
.voices__intro .eyebrow { margin: 0; }
.voices__intro .section__title { margin: 0; text-wrap: balance; }
.voices__intro .section__title br { display: none; } /* the column is narrower than the break assumes */
.voices__lede { margin: 0; font: 400 clamp(17px, 1.4vw, 19px)/1.55 var(--f-body); color: var(--fog); max-width: 40ch; }
.voices__quote { margin: 6px 0 4px; padding-left: 20px; border-left: 2px solid var(--accent); /* the ink lime: olive on the light theme */ display: grid; gap: 12px; }
.voices__quote blockquote { margin: 0; }
.voices__quote p { margin: 0; font: 500 clamp(24px, 2.2vw, 32px)/1.15 var(--f-display); font-stretch: 108%; letter-spacing: -.015em; color: var(--bone); }
.voices__quote p::before { content: "\201C"; color: var(--accent); margin-right: .06em; }
.voices__quote p::after { content: "\201D"; color: var(--accent); margin-left: .04em; }
.voices__quote figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font: 400 13px/1.3 var(--f-body); color: var(--fog); }
.voices__quote figcaption b { font: 500 15px/1.2 var(--f-display); color: var(--bone); }
.voices__evidence { display: grid; grid-template-columns: auto auto; gap: 18px; align-items: start; }
.voices__evidence .voice--update { margin-top: calc(var(--vh) * .24); } /* offset low against the story beside it */
.voices__evidence .voice__cap { width: 0; min-width: 100%; } /* captions wrap to their picture, never widen it */
.voice { position: relative; margin: 0; display: grid; gap: 14px; transition: opacity .4s var(--ease); }
@media (hover: hover) { /* the lead only steps back a little; the evidence steps back more */
  .voices__grid:has(.voice:hover) .voice:not(:hover) { opacity: .6; }
  .voices__grid:has(.voice:hover) .voice--video:not(:hover) { opacity: .82; }
}

.voice__media {
  position: relative; overflow: hidden; border-radius: 22px; /* a phone screen, not a card */
  height: var(--vh, 560px); aspect-ratio: var(--ar, 9 / 16);
  border: 1px solid var(--rule); background: var(--raised);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7);
  transition: border-color .35s, translate .5s var(--ease);
}
.voice--photo .voice__media { height: calc(var(--vh) * .7); border-radius: 18px; }
.voice--update .voice__media { height: calc(var(--vh) * .56); border-radius: 16px; }
/* the lead video: a double hairline frame and a deeper shadow; it settles in once on arrival,
   and its frame turns lime while it plays */
.voice--video .voice__media {
  border-radius: 24px; border-color: var(--line-3);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--ink) 70%, transparent), 0 0 0 8px var(--rule), 0 50px 90px -40px rgba(0, 0, 0, .85);
  transition: border-color .35s, translate .5s var(--ease), scale 1.1s var(--ease), box-shadow .5s var(--ease);
}
.js .voice--video:not(.is-in) .voice__media { scale: .96; }
.voice--video.is-live .voice__media { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 0 0 7px color-mix(in srgb, var(--ink) 70%, transparent), 0 0 0 8px rgba(var(--accent-rgb), .3), 0 50px 90px -40px rgba(0, 0, 0, .85); }
.voice__tag { display: inline-flex; align-items: center; gap: 8px; font: 400 10.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.voice__tag::before { content: ""; width: 14px; height: 1px; background: currentColor; }
.voice:hover .voice__media, .voice:focus-within .voice__media { border-color: rgba(var(--accent-rgb), .35); translate: 0 -4px; }
.voice__vid, .voice__img, .voice__ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: scale .9s var(--ease);
}
.voice:hover :is(.voice__img, .voice__ph), .voice:not(.is-playing):hover .voice__vid { scale: 1.03; }
.voice__ph { /* the empty slot: a survey grid under a soft light, labelled in mono */
  display: grid; place-items: center;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(var(--accent-rgb), .07), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--surface);
}
.voice__ph span { font: 400 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fog); }

.voice__cap { display: grid; gap: 8px; padding-inline: 4px; }
.voice__who { display: grid; gap: 4px; min-width: 0; }
.voice__name { font: 500 17px/1.2 var(--f-display); font-stretch: 106%; color: var(--bone); }
.voice__role { font: 400 13px/1.3 var(--f-body); color: var(--fog); }

/* the play control: a lime disc that answers the cursor */
.voice__play {
  position: absolute; left: 50%; top: 50%; z-index: 3; translate: -50% -50%;
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--accent-fill); color: var(--on-accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .35), 0 14px 34px -14px rgba(0, 0, 0, .6);
  transition: scale .4s var(--ease), box-shadow .5s var(--ease), opacity .3s;
}
.voice__play svg { width: 26px; height: 26px; fill: currentColor; translate: 2px 0; }
.voice__play .i-pause { display: none; }
.voice:hover .voice__play, .voice__play:focus-visible { scale: 1.08; box-shadow: 0 0 0 12px rgba(var(--accent-rgb), .12), 0 14px 34px -14px rgba(0, 0, 0, .6); }
.voice__play:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }
.voice.is-playing .voice__play { opacity: 0; scale: .9; }
.voice.is-playing:hover .voice__play, .voice.is-playing .voice__play:focus-visible { opacity: 1; }
.voice.is-playing .voice__play svg { translate: 0 0; }
.voice.is-playing .i-play { display: none; }
.voice.is-playing .i-pause { display: block; }

/* proof line: a live dot and the platforms, linking to the shipped site */
.voices__proof {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 12px;
  border: 1px solid var(--rule); border-radius: 999px; color: var(--fog); text-decoration: none;
  font: 400 13px/1.2 var(--f-body); transition: border-color .3s, color .3s, background-color .3s;
}
.voices__proof b { font-weight: 500; color: var(--bone); }
.voices__live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); animation: live 2.4s ease-out infinite; }
@keyframes live { 70%, 100% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); } }
.voices__proof-go { transition: translate .3s var(--ease); }
.voices__proof:hover, .voices__proof:focus-visible { border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .06); color: var(--bone); }
.voices__proof:hover .voices__proof-go { translate: 2px -2px; }

/* story chrome on the video: the progress bar and time only exist while it plays */
.voice__bar { position: absolute; z-index: 2; inset: 12px 12px auto; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); overflow: hidden; opacity: 0; transition: opacity .3s; }
.voice__bar i { position: absolute; inset: 0; background: #fff; transform-origin: left; scale: var(--p, 0) 1; }
.voice__time { position: absolute; z-index: 2; left: 14px; top: 24px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s; }
.voice.is-live :is(.voice__bar, .voice__time) { opacity: 1; }
.voice__bar::after { /* the chapter cut: the bar splits in two at 0:23, like a story's segments */
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--cut) * 100%); width: 3px; translate: -50% 0;
  background: rgba(9, 11, 10, .75);
}
/* chapter chips under the lead video: the second jumps to where he walks through the site */
.voice__chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chapter {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px;
  border: 1px solid var(--rule); font: 400 12.5px/1 var(--f-body); color: var(--fog);
  transition: border-color .3s, color .3s, background-color .3s;
}
.chapter__t {
  font: 500 10.5px/1 var(--f-mono); letter-spacing: .04em; color: var(--bone);
  padding: 4px 6px; border-radius: 999px; background: color-mix(in srgb, var(--raised-2) 80%, transparent);
  transition: background-color .3s, color .3s;
}
.chapter:hover, .chapter:focus-visible { border-color: rgba(var(--accent-rgb), .45); color: var(--bone); }
.chapter:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chapter[aria-current="true"] { border-color: rgba(var(--accent-rgb), .6); color: var(--bone); background: rgba(var(--accent-rgb), .06); }
.chapter[aria-current="true"] .chapter__t { background: var(--accent-fill); color: var(--on-accent); }
@media (prefers-reduced-motion: reduce) { .chapter, .chapter__t { transition: none; } }
.voice__vid { cursor: pointer; }

.voice__sound, .voice__zoom {
  position: absolute; z-index: 3; right: 12px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(9, 11, 10, .08); backdrop-filter: blur(2.5px); /* clear glass */
  opacity: 0; scale: .85; transition: opacity .3s, scale .4s var(--ease), background-color .3s, color .3s;
}
.voice__sound { top: 24px; }
.voice__zoom { top: 12px; }
.voice__sound svg, .voice__zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voice__sound svg path:first-child { fill: currentColor; stroke: none; }
.voice__sound .i-on, .voice__sound[aria-pressed="true"] .i-off { display: none; }
.voice__sound[aria-pressed="true"] .i-on { display: block; }
.voice.is-live .voice__sound, .voice:hover .voice__zoom, .voice__zoom:focus-visible, .voice__sound:focus-visible { opacity: 1; scale: 1; }
.voice__sound:hover, .voice__zoom:hover { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; }
.voice__sound:focus-visible, .voice__zoom:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

/* pins on the photo story: invisible at rest, they land one after another on hover or tap */
.voice__pins { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.pin { position: absolute; left: var(--x); top: var(--y); }
.pin__dot {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-fill); box-shadow: 0 0 0 4px rgba(215, 243, 82, .28), 0 4px 12px rgba(0, 0, 0, .5);
  scale: 0; transition: scale .45s cubic-bezier(.3, 1.6, .5, 1) var(--d);
}
.pin__tag {
  position: absolute; left: 12px; top: 0; white-space: nowrap;
  padding: 5px 8px; border-radius: 999px; background: rgba(9, 11, 10, .82); color: #f0f0e8;
  font: 500 10px/1 var(--f-mono); letter-spacing: .02em;
  opacity: 0; translate: -6px -50%; transition: opacity .3s calc(var(--d) + 120ms), translate .4s var(--ease) calc(var(--d) + 120ms);
}
.pin--l .pin__tag { left: auto; right: 12px; translate: 6px -50%; }
.voice--photo:is(:hover, :focus-within, .is-pinned) .pin__dot { scale: 1; }
.voice--photo:is(:hover, :focus-within, .is-pinned) .pin__tag { opacity: 1; translate: 0 -50%; }
.voice--photo .voice__media { cursor: zoom-in; }

/* full-size view of the photo story */
.voice__box { padding: 0; border: 0; background: none; max-width: none; max-height: none; overflow: visible; }
.voice__box::backdrop { background: rgba(5, 7, 6, .82); backdrop-filter: blur(2.5px); }
.voice__box img { display: block; height: min(88vh, 1300px); width: auto; max-width: 92vw; object-fit: contain; border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); }
.voice__box[open] { animation: box-in .45s var(--ease); }
@keyframes box-in { from { opacity: 0; scale: .94; } }
.voice__close {
  position: absolute; top: 0; right: -54px; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff;
  transition: background-color .3s, color .3s;
}
.voice__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.voice__close:hover, .voice__close:focus-visible { background: var(--accent-fill); color: #090b0a; border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .voices__live, .voice__box[open] { animation: none; } .pin__dot, .pin__tag { transition: none; } }
@media (prefers-reduced-motion: reduce) { .voices::after { animation: none; } }
@media (prefers-reduced-motion: reduce) { .js .voice--video:not(.is-in) .voice__media { scale: 1; } .voice__media { transition: border-color .35s, box-shadow .35s; } }

/* testimonials, tablet (after the base rules so they win): the words span the top;
   the video and its evidence share the row below */
@media (max-width: 1100px) {
  .voices__grid { --vh: clamp(480px, 70vw, 620px); grid-template-columns: auto auto; justify-content: center; }
  .voices__intro { grid-column: 1 / -1; max-width: 60ch; margin-bottom: 18px; }
  .voices__grid::before { left: 0; top: 66%; }
}
/* testimonials, phones: one column; the video leads at full width, the evidence a pair beneath */
@media (max-width: 700px) {
  .voices__grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .voices::after { background: radial-gradient(70% 30% at 50% 52%, var(--voices-glow), transparent 72%), radial-gradient(60% 18% at 50% 84%, var(--voices-glow-2), transparent 72%); }
  .voices__grid::before { display: none; }
  .voice--video, .voices__evidence { justify-self: center; width: min(100%, 440px); }
  .voice--video .voice__media { height: auto; width: 100%; }
  .voices__evidence { grid-template-columns: 1fr 1fr; gap: 12px; } /* equal aspect, so they stand the same height */
  .voice--photo .voice__media, .voice--update .voice__media { height: auto; width: 100%; }
  .voices__evidence .voice--update { margin-top: 0; }
}

/* ---------- contact: closing call + orbital emblem ---------- */
.contact { --bg: var(--bg-contact); }
.contact {
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(24px, 4vw, 64px);
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}
.contact__title {
  font: 500 clamp(40px, 5.6vw, 84px)/1 var(--f-display); font-stretch: 100%;
  letter-spacing: -.035em; margin: 0 0 clamp(28px, 4vh, 44px);
}
.contact__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.contact__actions .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.contact__actions .btn:hover svg, .contact__actions .btn:focus-visible svg { transform: translate(3px, -3px); }
.contact__mail { position: relative; padding-left: 28px; color: var(--fog); font-size: 15px; transition: color .2s; }
.contact__mail::before { content: ""; position: absolute; left: 0; top: -12px; bottom: -12px; width: 1px; background: var(--rule); }
.contact__mail:hover { color: var(--accent); }

.emblem { position: relative; }
.emblem svg { width: 100%; height: auto; display: block; overflow: visible; transition: transform 1.2s var(--ease); }
.emblem__front { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.emblem__mark {
  position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%;
  width: 50%; aspect-ratio: 1; pointer-events: none;
}
.emblem__mark canvas { width: 100% !important; height: 100% !important; display: block; }

.emblem__axis { stroke: rgba(var(--accent-rgb), .11); stroke-width: 1; vector-effect: non-scaling-stroke; }
.emblem__ring { fill: none; stroke: var(--ring); stroke-width: 1; vector-effect: non-scaling-stroke; }
.emblem__ring--lit { stroke: rgba(var(--accent-rgb), .22); }
.emblem__ring--front { stroke: rgba(var(--accent-rgb), .36); }
.emblem__node, .emblem__dot { fill: var(--accent); opacity: .75; filter: drop-shadow(0 0 2px rgba(var(--accent-rgb), .45)); }
.emblem__node--dim { opacity: .45; }
#emCore stop:first-child { stop-color: var(--core-hi); }
#emCore stop:last-child { stop-color: var(--core-lo); }
.emblem__core { fill: url(#emCore); stroke: rgba(var(--accent-rgb), .22); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .5s; }
.contact:has(.btn:hover) .emblem__core { stroke: rgba(var(--accent-rgb), .6); }

/* ---------- footer ---------- */
.footer { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); color: var(--fog); }
.footer { --bg: linear-gradient(to bottom, transparent, var(--deep) 70%); }
.footer__top {
  display: grid; grid-template-columns: 1fr 2fr; gap: 40px;
  padding: clamp(40px, 6vh, 64px) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.footer__brand { display: inline-flex; align-items: center; gap: 18px; color: var(--bone); align-self: start; }
.footer__mark { width: 40px; height: 42px; overflow: visible; }
.footer__mark-fill { fill: currentColor; }
.footer__mark-line { fill: none; stroke: var(--bone); stroke-width: 1; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .35)); vector-effect: non-scaling-stroke; opacity: 0; }
/* the mark draws itself from its centre (main.js): on arrival and on each hover */
.footer__name { padding-left: 18px; border-left: 1px solid var(--rule); font: 500 19px/1.9 var(--f-display); font-stretch: 100%; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer__head { margin: 0 0 6px; font: 500 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.footer__col a { position: relative; color: var(--bone); font-size: 15px; opacity: .8; transition: opacity .25s; }
.footer__col a::after { /* a hairline that draws under the label on hover */
  content: ""; position: absolute; left: 0; right: 18px; bottom: -3px; height: 1px; background: currentColor; opacity: .35;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.footer__col a:hover::after, .footer__col a:focus-visible::after { transform: scaleX(1); }
.footer__col a span { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--fog); transition: transform .3s var(--ease), color .2s; }
.footer__col a:hover, .footer__col a:focus-visible { opacity: 1; }
.footer__col a:hover span, .footer__col a:focus-visible span { color: var(--accent); transform: translate(2px, -2px); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px 0 32px; font-size: 14px; }
.footer__mono { font: 400 11px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bone); opacity: .7; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; }
  .emblem { max-width: 520px; width: 100%; justify-self: center; }
  .footer__top { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .nav__menu { display: grid; }
  .nav.is-open { background: var(--ink); border-color: var(--rule); }
  .nav.is-open .nav__links {
    max-width: none; border-radius: 0 0 16px 16px;
    display: flex; flex-direction: column; gap: 0; margin: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 4px var(--gutter) 20px; background: var(--ink); border-bottom: 1px solid var(--rule);
  }
  .nav.is-open .nav__links a { padding: 16px 0; border-bottom: 1px solid var(--rule); font: 500 22px/1.1 var(--f-display); font-stretch: 108%; color: var(--bone); }
  .nav.is-open .nav__links a::after { display: none; }
  .nav.is-open .nav__links a.is-current { color: var(--accent); }
  /* keep the headline and lede readable over the code field and the mark */
  .hero::after { height: 62%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--hero-fade) 82%, transparent) 42%, var(--hero-fade)); }
  .hero { align-items: end; }
  .hero__logo, .hero::before { width: 92vw; right: 4vw; top: 30%; }
  .hero__logo { opacity: .9; }
  .bearing { display: none; }
}
@media (max-width: 560px) {
  .voice__play { width: 64px; height: 64px; }
  .pin__tag { display: none; } /* too narrow for labels: the dots stay, the full view tells the rest */
  .voice__zoom { opacity: 1; scale: 1; width: 32px; height: 32px; }
  .voice__close { top: auto; bottom: -56px; right: 50%; translate: 50% 0; }
  /* phones put the headline over the mark; a dark mark on stone shows through a fade far more than on charcoal */
  [data-theme="light"] .hero::after { height: 74%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--hero-fade) 86%, transparent) 26%, var(--hero-fade) 60%); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__col { gap: 0; }
  .footer__col a { padding: 10px 0; } /* comfortable touch targets */
  .footer__col a::after { bottom: 7px; }
  .contact__mail { padding-left: 0; }
  .contact__mail::before { display: none; }
  .hero__hint { display: none; }
  .nav { gap: 8px; }
  .nav__end { gap: 6px; }
  .nav__brand { gap: 4px; }
  .nav__name { font-size: 15px; }
  .nav .btn--small { padding: 10px; font-size: 12px; }
  .nav__theme, .nav__menu { width: 34px; height: 34px; }
  /* phones: the floating bar and the pill share one tight shape, so brand + three controls fit */
  .nav.is-scrolled, .nav.is-collapsed:not(.is-peek):not(:has(:focus-visible)):not(.is-open) {
    max-width: calc(100vw - 12px); padding: 5px 5px 5px 12px; gap: 6px;
  }
}
@media (max-width: 360px) {
  .nav__name { display: none; } /* the mark alone carries the brand on the narrowest phones */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}