/* =============================================================
   INTERAKTIVE — production overrides
   Loaded by index.html AFTER site/styles.css. Everything here
   intentionally wins over the base sheet.

   Still an override layer rather than a rewrite of styles.css,
   so any single block can be removed without touching the base.
   ============================================================= */

/* ============ applies at every width ============ */

/* ---------- 1. Headline ------------------------------------------------
   Was: weight 800, -0.065em, lh .9, second half in outline stroke, and
   only 4px between the two sentences. Weight and tracking are backed off
   so Bricolage's letterforms survive; the stroke is gone; both sentences
   are full-strength ink on one line. */

.hero h1 {
  font-weight: 640;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: nowrap;
  white-space: nowrap;
}
/* Both sentences on one line, both at full ink. The only thing kept from
   the previous pass is a real gap: the original had 4px between "better."
   and "Sell" at a 52px size, which read as one run-on sentence. */
.hero h1 span {
  display: inline;
  color: var(--ink);
}
.hero h1 span:last-child {
  margin-left: .3em;
  color: var(--ink);
  -webkit-text-stroke: 0;
}

/* ---------- 2. The positioning line ------------------------------------
   Was 12.5px mono uppercase — smaller than body copy, read as a
   disclaimer. It is the one sentence that says what you sell. */

.hero .hero-intro {
  margin-top: clamp(12px, 1.4vw, 20px);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.85;
  text-transform: none;
  white-space: normal;
}

/* ---------- 3. Ground the product --------------------------------------
   The shoe was floating with no contact shadow, which makes a render read
   as a masked cutout. Grounding is what says "built in 3D". */

/* A shadow must never be derived from --ink: in the nocturne skin --ink
   flips to cream, which turned this contact shadow into a glow. Shadows
   get their own token, dark in both skins. */
:root { --hero-shadow: 120 105 85; }             /* warm grey — never a black blot */
html[data-skin="nocturne"] { --hero-shadow: 0 0 0; }  /* black on navy */

.hero-product-stage::after {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 6%;
  width: 58%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgb(var(--hero-shadow) / .10) 0%,
    rgb(var(--hero-shadow) / .04) 50%,
    transparent 76%);
  filter: blur(18px);
  transform: translateX(-50%);
  pointer-events: none;
  content: "";
}
.hero-product-image {
  filter:
    drop-shadow(0 18px 16px rgb(var(--hero-shadow) / .08))
    drop-shadow(0 6px 6px rgb(var(--hero-shadow) / .04));
}
.hero-product-stage { z-index: 4; }

/* Product media must sit still at rest and on hover. Service-switch
   scale/resolve on .hero-media-visual is unchanged. */
.hero-scene:not(.is-roulette):not(.is-switching):not(.is-revealing) .hero-media-visual {
  animation: none;
}
@media (min-width: 861px) {
  .hero-product-stage {
    transform: translate(-50%, -50%);
  }
}

/* ---------- 4. Calm the field ------------------------------------------
   The orbit ring was reading as a diagram of nothing. Quieter and tighter,
   so the product carries the frame instead of the decoration. */

.hero-orbit,
.hero-orbit::before,
.hero-orbit::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  border: 0 !important;
}

/* ---------- 5. Demote the orphan controls ------------------------------
   "Show input" and the sound toggle are unexplained and were competing
   with the six-mode switcher. Present, but no longer shouting. */

.hero-utility { opacity: .5; transition: opacity 220ms cubic-bezier(.16,1,.3,1); }
.hero-utility:hover,
.hero-utility:focus-within { opacity: 1; }
.hero-meta { opacity: .78; }

/* ---------- 6. Service label legibility (all widths) -------------------
   Labels were 9.9px — the primary interaction on the page, set below the
   size most people will actually read. */

.hero-mode {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-size: var(--type-meta);
  letter-spacing: .07em;
}
.hero-mode:hover,
.hero-mode:focus-visible { color: var(--ink); }
.hero-mode[aria-checked="true"] {
  color: var(--ink);
  font-weight: 600 !important;
}
.hero-mode[aria-checked="true"] span {
  display: inline-block;
  transform: none !important;
  color: var(--ink);
  font-size: inherit !important;
  font-weight: 600 !important;
  letter-spacing: inherit;
}

.hero-scene[data-mode="imagery"] .hero-product-image {
  transform: none !important;
}

/* ============ desktop only ============
   Below 861px the hero relayouts completely: .hero-services becomes a
   relative two-column grid and the product stacks. None of the framing
   changes below may leak into that. */

@media (min-width: 861px) {
  .hero h1 {
    max-width: none;
    margin-inline: auto;
    /* Sized to hold one line. Backing the weight and tracking off makes the
       sentence wider than the original 800/-0.065em setting, so the size
       comes down to compensate. Height-aware for short viewports. */
    font-size: var(--hero-title-size);
  }
  .hero .hero-intro { max-width: 46ch; margin-inline: auto; }

  /* rails pulled off the edges so the composition stops feeling hollow */
  .hero-services { inset: 0 calc(clamp(10px, 5vw, 92px) - 12px); }
  .hero-mode { width: 150px; }
  .hero-mode svg { width: 38px; height: 38px; stroke-width: 1.25; }

  @media (prefers-reduced-motion: no-preference) {
    .hero-meta,
    .hero-utility {
      animation: hero-ui-in 480ms both cubic-bezier(.16, 1, .3, 1);
    }
    .hero .hero-services { animation: none; }
    .hero-mode--left {
      animation: hero-cat-left 520ms both cubic-bezier(.16, 1, .3, 1);
    }
    .hero-mode--right {
      animation: hero-cat-right 520ms both cubic-bezier(.16, 1, .3, 1);
    }
    .hero-mode--ugc,
    .hero-mode--configurator { animation-delay: 45ms; }
    .hero-mode--imagery,
    .hero-mode--ar { animation-delay: 80ms; }
    .hero-connectors {
      animation: hero-rail-in 400ms 40ms both ease;
    }
  }

  .hero-orbit,
  .hero-orbit::before,
  .hero-orbit::after { display: none !important; }
  .hero-haze { width: min(62vw, 800px); }
  .hero.has-sky-fallback .hero-haze { width: min(34vw, 420px); }
  .hero .hero-actions { margin-top: clamp(6px, 1vw, 18px); }
}

/* ============ mobile ============
   Keep the original responsive sizing; only the weight, tracking and
   tonal treatment above carry over. */

@media (max-width: 860px) {
  /* one line cannot fit on a phone: allow the wrap back */
  .hero h1 { font-size: var(--hero-title-size); white-space: normal; text-wrap: balance; }
  .hero h1 span { display: block; }
  .hero h1 span:last-child { margin-left: 0; }
  .hero .hero-intro { max-width: 40ch; margin-inline: auto; }

  /* header is sticky, so this padding is extra — keep it tight */
  .hero {
    min-height: 0;
    padding-top: 6px;
    padding-bottom: 20px;
  }
  .hero-showcase-wrap { margin-top: 8px; }
  .hero-scene { padding-top: 44px; }

  .hero-group {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    padding: 10px 4px 2px;
    font-size: .5rem;
    letter-spacing: .14em;
    text-align: center;
  }
  .hero-group--left { grid-column: 1; }
  .hero-group--right { grid-column: 2; }

  .hero-mode {
    min-height: 48px;
    padding: 8px 6px;
    font-size: .58rem;
    letter-spacing: .06em;
  }
  .hero-mode svg { width: 26px; height: 26px; }

  .hero-readout {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    grid-column: 1 / -1;
    margin: 10px 0 0;
    padding: 0 8px;
    transform: none;
    text-align: center;
  }
  .hero-readout-desc {
    white-space: normal;
    min-height: calc(1.4em * 2);
  }
}


/* =============================================================
   RIBBONS — clients over industries, directly under the hero
   Clients run right-to-left, industries left-to-right, so the two
   bands counter-scroll. Industries sit a step down in size and
   weight so the hierarchy is unambiguous.
   ============================================================= */

.ribbon-stack {
  position: relative;
  z-index: 2;
  margin-top: 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface);
}

.ribbon {
  overflow: hidden;
  position: relative;
}
.ribbon + .ribbon { border-top: 1px solid var(--line); }

/* fade the ends so items enter and leave rather than being cut off */
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 130px);
  pointer-events: none;
  content: "";
}
.ribbon::before { left: 0;  background: linear-gradient(90deg, var(--surface), transparent); }
.ribbon::after  { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }

.ribbon-track {
  display: flex;
  width: max-content;
  animation: ribbon-run 115s linear infinite;
  animation-delay: 0s;
}
/* industries travel the other way */
.ribbon-track--reverse { animation-direction: reverse; animation-duration: 140s; }

.ribbon:hover .ribbon-track,
.ribbon:focus-within .ribbon-track { animation-play-state: paused; }

.ribbon-group { display: flex; flex: none; align-items: center; }
.ribbon-group span,
.ribbon-group .ribbon-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--display);
  letter-spacing: -0.025em;
}
/* separator dot between items */
.ribbon-group span::after,
.ribbon-group .ribbon-item::after {
  width: 6px;
  height: 6px;
  margin-inline: clamp(18px, 2.4vw, 40px);
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
  content: "";
}

/* ---- clients: the louder band ---- */
.ribbon--clients .ribbon-group span,
.ribbon--clients .ribbon-group .ribbon-item {
  padding-block: clamp(16px, 1.7vw, 26px);
  color: var(--ink);
  font-size: clamp(1.35rem, 2.35vw, 2.15rem);
  font-weight: 600;
}

/* ---- industries: a clear step down ---- */
.ribbon--industries .ribbon-group span {
  padding-block: clamp(11px, 1.2vw, 18px);
  color: var(--muted);
  font-size: clamp(.92rem, 1.45vw, 1.32rem);
  font-weight: 500;
}
.ribbon--industries .ribbon-group span::after {
  width: 4px;
  height: 4px;
  opacity: .4;
}

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

@media (prefers-reduced-motion: reduce) {
  .ribbon-track { animation: none; }
  .ribbon { overflow-x: auto; }
  .ribbon-group[aria-hidden="true"] { display: none; }
}


/* =============================================================
   NAV GLASS
   The muddy band above and below the nav was two things fighting:

   1. .scroll-fade-edge — a fixed paper-coloured gradient pinned at
      y72–y126 that washes cream over whatever scrolls under it.
      app.js computes --scroll-fade for exactly this and no rule
      ever read it, so it ran at full strength permanently.
   2. .site-header.is-scrolled sets background:transparent and
      backdrop-filter:none, so only the pill frosts anything. The
      strip above the pill has nothing behind it at all, which is
      why the product shows through unfiltered up there.

   Fix: delete the wash, and let the masthead itself be real glass
   across the full width. Content then passes cleanly behind it
   instead of through a cream haze.
   ============================================================= */

.scroll-fade-edge { display: none; }

.site-header {
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---- one frosting layer, consistent everywhere ----
   The masthead behaves identically from the first pixel to the last: the
   band is always present, the pill always carries its outline, and the
   tint adapts to whatever is passing underneath. No hero special case.

   Frost the small gap above the pill; the pill owns its own glass.
   Nothing extends below the navigation onto the page content. */
.site-header::before {
  position: absolute;
  z-index: 0;
  inset: -8px 0 auto;
  height: 16px;
  opacity: 1;
  background: color-mix(in srgb, var(--paper) 46%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.28);
  backdrop-filter: blur(26px) saturate(1.28);
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
  content: "";
}

/* Keep the glass inside the rounded navigation surface.

   This has to out-specify `.site-header.is-scrolled .header-inner` in
   styles.css, which app.js switches on at 18px of scroll and which would
   otherwise reinstate the fill and the shadow. */
.site-header .header-inner,
.site-header.is-scrolled .header-inner {
  border-color: color-mix(in srgb, var(--ink) 13%, transparent);
  background: color-mix(in srgb, var(--paper) 46%, transparent) !important;
  box-shadow: none;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
}
.site-header .header-inner::before { opacity: 0; }
.site-header .header-inner::after { opacity: .55; }

/* Nav-bottom -> title-top, matched to title-bottom -> lede-top (9px).
   This used to clear a masthead that overlapped the hero. .site-header is
   position:sticky, so it already takes 72px of flow and the hero starts
   below it — the 104-150px here was being counted a second time, which is
   where the 124px gap came from. */
@media (min-width: 861px) {
  .hero { padding-top: 9px; }
}

/* =============================================================
   CLIENT LOGOS
   One mid-gray (Black+Decker optical tone). Optical scales so
   short marks (Hoffmann, Kaminos, Mercer) sit with EMR-TEK;
   Cubitts is nudged down so tall condensed type does not tower.
   ============================================================= */

.ribbon--clients .ribbon-group .ribbon-item {
  height: auto;
  min-height: clamp(48px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(14px, 1.6vw, 22px);
  line-height: 1;
}

.ribbon-logo {
  --logo-scale: 1;
  display: block;
  height: calc(clamp(22px, 2.4vw, 32px) * var(--logo-scale));
  width: auto;
  /* Wide wordmarks (EMR-TEK) must keep height — do not crush. */
  max-width: none;
  object-fit: contain;
  opacity: 1;
  /* Mid-gray ≈ Black+Decker (~#858580), not near-black solids. */
  filter: grayscale(1) brightness(0) invert(0.52);
}
html[data-skin="nocturne"] .ribbon-logo {
  filter: grayscale(1) brightness(0) invert(0.58);
}

.ribbon-logo--dewalt { --logo-scale: 1; }
.ribbon-logo--black-decker { --logo-scale: 1.02; }
.ribbon-logo--emr { --logo-scale: 0.88; }
.ribbon-logo--cubitts { --logo-scale: 0.92; }
.ribbon-logo--kaminos { --logo-scale: 1.3; }
/* Script sits short inside its frame — scale the whole mark up. */
.ribbon-logo--hoffmann { --logo-scale: 1.58; }
.ribbon-logo--mercer { --logo-scale: 1.28; }
.ribbon-logo--hreysti { --logo-scale: 0.945; }

/* =============================================================
   PIPELINE STANDARD
   The credibility section and the pipeline were saying the same
   thing twice — "Human-reviewed" there was almost word-for-word
   step 04 here. Merged: the pipeline keeps its four steps, and
   absorbs only the three points it genuinely lacked — where the
   product reference comes from, that the same pipeline serves
   consumer and industrial, and what you actually receive.
   ============================================================= */

.pipeline-standard {
  margin-top: clamp(44px, 5vw, 84px);
  padding-top: clamp(26px, 3vw, 44px);
  border-top: 1px solid color-mix(in srgb, var(--dark-ink) 20%, transparent);
}

.pipeline-standard-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(20px, 2.4vw, 34px);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dark-ink) 66%, transparent);
}
.pipeline-standard-count { color: color-mix(in srgb, var(--dark-ink) 46%, transparent); }

.pipeline-standard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(22px, 3vw, 52px);
}

.standard-point strong {
  display: block;
  margin-bottom: 8px;
  color: var(--dark-ink);
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.standard-point strong em {
  font-style: normal;
  color: var(--lime);
}
.standard-point span {
  display: block;
  max-width: 34ch;
  color: color-mix(in srgb, var(--dark-ink) 70%, transparent);
  font-size: clamp(.88rem, 1.1vw, .96rem);
  line-height: 1.55;
}

/* =============================================================
   LIQUID CTA + STAR FIELD
   ============================================================= */

/* The jelly draws the whole pill, so the button's own fill and border
   step aside and the canvas overflows the box — otherwise the wobbling
   silhouette would be clipped back to a hard rectangle. */
.button[data-liquid-button].has-liquid {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  /* .has-liquid is added by JS after load; without this the button would
     visibly fade navy -> transparent for 220ms as the jelly takes over */
  transition: none;
}
.button[data-liquid-button].has-liquid:hover,
.button[data-liquid-button].has-liquid:focus-visible {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;               /* the jelly does the moving */
}
.button[data-liquid-button] { overflow: visible; isolation: isolate; }
.button[data-liquid-button] .liquid-surface {
  position: absolute;
  inset: -26px;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.liquid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.button[data-liquid-button] .button-copy {
  position: relative;
  z-index: 2;
  color: var(--action-ink);
}

/* Page-wide star field. It sits in the same midground as the meteors, above
   section fills but below the section containers that carry copy and media. */
[data-hero-particles] { opacity: 0 !important; }
.site-stars {
  position: fixed;
  inset: 0;
  z-index: 1 !important;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
}

/* Kill scrollbar chrome — Chromium gutters read as designed edge hairlines. */
html {
  overflow-x: clip;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
body {
  overflow-x: clip;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: transparent !important;
  border: 0 !important;
  width: 0 !important;
}

/* Cloud-line rain — falls from the client band, never over the hero.
   Midground only: behind copy, cards, media, footer canvas and text. */
:root {
  --cloud-rain-on: 1;
  --cloud-rain-intensity: 2;
  --cloud-rain-frequency: 2.20;
  --cloud-rain-speed: 1.30;
  --cloud-rain-color-paper: #264b54;
  --cloud-rain-color-night: #c0ced4;
  --cloud-rain-color: var(--cloud-rain-color-paper);
  --cloud-rain-opacity: 0.75;
  --cloud-rain-shape: drop;
  --cloud-rain-trail: 0.42;
  --cloud-rain-length: 20px;
  --cloud-rain-thick: 0.95px;
  --cloud-rain-glow: 0.55;
  --cloud-rain-spread: 1vw;
  --cloud-rain-angle: 1deg;
  --cloud-rain-start: -54px;
}
html[data-skin="nocturne"] {
  --cloud-rain-color: var(--cloud-rain-color-night);
}
.cloud-rain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.cloud-rain-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
html[data-cloud-rain="off"] .cloud-rain { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cloud-rain { display: none; }
}

.site-header { z-index: 100; }



/* =============================================================
   SECTION RHYTHM
   Every light section painted the same cream with the same
   padding, so the page read as one continuous slab with no
   sense of where anything began or ended.

   Three devices, all quiet:
     1. alternating surface tone
     2. a hairline rule where two light sections meet
     3. a mono index in the margin, so each block announces itself
   The dark sections stay as punctuation between them.
   ============================================================= */

:root { --surface-alt: #F2F4F7; }
html[data-skin="nocturne"] { --surface-alt: #0a0f1a; }

main > section { position: relative; }

/* 1. Alternating tone, assigned explicitly.
      nth-of-type(even) does not work here: the hero and the ribbon band
      still occupy positions even when :not() excludes them from matching,
      so the parity lands on the wrong sections. Naming them is honest and
      predictable.

      Running order:
        work        paper
        outcomes    DARK
        packs       alt
        process     DARK
        partnership paper
        clients     alt
        faq         DARK (continuous into footer)                        */
#packs { background: var(--surface-alt); }
#packs.packs-outcomes { background: var(--paper); }

/* 2. A hairline only where the tone does NOT change — everywhere else the
      tone shift is already the separation. */
.ribbon-stack + section::after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--line);
  content: "";
}

/* 3. margin index. Counts only the real content sections, so the
      hero and the ribbons do not consume numbers. */
main { counter-reset: sec; }
main > section:not(.hero):not(.ribbon-stack) { counter-increment: sec; }

@media (min-width: 1180px) {
  main > section:not(.hero):not(.ribbon-stack) > .container { position: relative; }
  main > section:not(.hero):not(.ribbon-stack) > .container::before {
    position: absolute;
    top: 2px;
    left: -46px;
    content: counter(sec, decimal-leading-zero);
    color: color-mix(in srgb, var(--ink) 30%, transparent);
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .14em;
    font-variant-numeric: tabular-nums;
  }
  .section--dark > .container::before,
  .outcome-tour .container::before {
    color: color-mix(in srgb, var(--dark-ink) 34%, transparent) !important;
  }
}

/* =============================================================
   ROULETTE
   The spin's job is to teach that there are six services — not to
   pick a winner. So the product stays visible while it travels,
   and the ring node currently holding the ball is unmistakable.
   ============================================================= */

/* First paint: do NOT show a static shoe on top of the stage.
   Keep the product veiled while idle; the roulette spin/land path
   (below) is what brings it into view. */
.hero-scene.is-idle .hero-product-stage,
.hero-scene.is-idle .hero-still-stack,
.hero-scene.is-idle .hero-product-image,
.hero-scene.is-idle .hero-product-ghost {
  opacity: 0 !important;
  filter: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}
.hero-scene.is-spinning .hero-product-stage,
.hero-scene.is-landed .hero-product-stage,
.hero-scene.is-ready:not(.is-idle) .hero-product-stage,
.hero-scene.is-spinning .hero-still-stack,
.hero-scene.is-landed .hero-still-stack,
.hero-scene.is-ready:not(.is-idle) .hero-still-stack,
.hero-scene.is-spinning .hero-product-image,
.hero-scene.is-landed .hero-product-image,
.hero-scene.is-ready:not(.is-idle) .hero-product-image,
.hero-scene.is-spinning .hero-product-ghost,
.hero-scene.is-landed .hero-product-ghost,
.hero-scene.is-ready:not(.is-idle) .hero-product-ghost {
  visibility: visible !important;
}

/* The original spin dropped the product to 28% with a heavy blur, which
   hid the six outputs entirely. Removing the dimming altogether was an
   over-correction the other way. This uncovers it progressively instead:
   --spin runs 0 -> 1 as the wheel decelerates, so you read a silhouette
   while it is travelling and the full product only once it lands. */
.hero-scene.is-spinning .hero-product-stage {
  opacity: calc(0.34 + 0.5 * var(--spin, 0));
  filter:
    blur(calc((1 - var(--spin, 0)) * 7px))
    saturate(calc(0.32 + 0.68 * var(--spin, 0)))
    contrast(calc(0.72 + 0.28 * var(--spin, 0)));
  pointer-events: none;
  transition: opacity 120ms linear, filter 120ms linear;
}
/* the settle: last of the blur lifts over a beat rather than snapping */
.hero-scene.is-landed .hero-product-stage {
  opacity: 1;
  filter: none;
  transition: opacity 520ms var(--ease-out), filter 520ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene.is-idle .hero-product-stage,
  .hero-scene.is-idle .hero-still-stack,
  .hero-scene.is-idle .hero-product-image,
  .hero-scene.is-idle .hero-product-ghost {
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
  }
}
.hero-scene.is-spinning .hero-media-visual { transition: opacity 90ms linear; }

/* Idle wait: mute checked chrome until a spin starts.
   During spin, the active orb stays blue so the wheel reads as a roulette. */
.hero-scene.is-idle .hero-mode[aria-checked="true"] {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-weight: 400 !important;
}
.hero-scene.is-spinning .hero-mode[aria-checked="true"] svg {
  transition-duration: 90ms;
  animation: none !important;
}
.hero-scene.is-landed .hero-meta {
  animation: hero-meta-pop 520ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes hero-meta-pop {
  0% { transform: translateY(4px); opacity: .3; }
  100% { transform: none; opacity: .78; }
}

/* spin again — fixed, stable circular icon button with zero jump / drift */
.hero-respin {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  cursor: pointer;
  opacity: 1 !important;
  transform: none !important;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}
.hero-scene:not(.is-spinning) .hero-respin { opacity: 1 !important; transform: none !important; }
.hero-respin:hover:not(:disabled),
.hero-respin:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  border-color: color-mix(in srgb, var(--ink) 35%, transparent);
  color: var(--ink);
  transform: none !important;
}
.hero-respin span {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  transform: none !important;
}

@media (max-width: 860px) {
  .hero-respin { position: static !important; margin-top: 0 !important; transform: none !important; }
}

/* =============================================================
   BUTTON BOX MODEL
   The base .button rule in styles.css declares colour and border
   but no display, padding or min-height. Two later rules patch
   .hero-actions .button and .footer-cta-button individually,
   which is why those two look right and every other button on
   the site collapses to a 27px sliver with the label touching
   both edges.

   A component must declare its complete box model in one place.
   ============================================================= */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* breathing room around them, which was equally absent */
.pack .button { width: 100%; margin-top: 22px; }
.partnership-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Readout lives with the CTA (outside the media), so it cannot sit on the shoe. */
.hero-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.hero-actions .hero-readout {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(46ch, 92%);
  margin: 0;
  transform: none;
  text-align: center;
  z-index: 2;
}
.hero-actions .hero-readout.is-in {
  opacity: 1;
  transform: none;
}
.hero-scene.is-ready:not(.is-idle):not(.is-spinning) ~ .hero-actions .hero-readout.is-in,
.hero-showcase .hero-scene.is-ready:not(.is-idle):not(.is-spinning) ~ .hero-actions .hero-readout.is-in,
.hero-actions .hero-readout.is-in {
  opacity: 1;
}
.hero-scene.is-idle ~ .hero-actions .hero-readout,
.hero-scene.is-spinning ~ .hero-actions .hero-readout {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}
.footer-cta { display: grid; gap: 14px; justify-items: end; }
@media (max-width: 900px) { .footer-cta { justify-items: start; } }

/* =============================================================
   LIQUID ON THE OTHER PRIMARY CTAS
   Each jelly reads its base colour from --liquid-base, so a button
   sitting on a dark surface can pick a different one. Without this
   the footer CTA would render a navy jelly on a navy footer.
   ============================================================= */

.footer-cta-button { --liquid-base: var(--accent); }
.footer-cta-button.has-liquid .button-copy,
[data-liquid-button].has-liquid .button-copy { position: relative; z-index: 2; }

/* =============================================================
   NAV TINT FOLLOWS WHAT IS UNDER IT
   A fixed cream frost sitting over a navy section averages the two
   into grey — that is the bleached strip. Glass does not do that;
   it takes the colour of what is behind it. So the band swaps its
   tint, and the nav text swaps with it, whenever a dark section
   passes underneath. Applies in both skins.
   ============================================================= */

html.is-over-dark .site-header::before {
  background: color-mix(in srgb, var(--dark) 54%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.18) brightness(0.92);
  backdrop-filter: blur(26px) saturate(1.18) brightness(0.92);
}

html.is-over-dark .site-header .brand,
html.is-over-dark .site-header .site-nav a:not(.nav-contact) {
  color: var(--dark-ink);
}
html.is-over-dark .site-header .menu-button {
  color: var(--dark-ink);
  border-color: color-mix(in srgb, var(--dark-ink) 26%, transparent);
}
html.is-over-dark .site-header .header-inner,
html.is-over-dark .site-header.is-scrolled .header-inner {
  border-color: color-mix(in srgb, var(--dark-ink) 17%, transparent);
}
html.is-over-dark .site-header .header-inner::after {
  opacity: .3;
}

.site-header .brand,
.site-header .site-nav a,
.site-header .brand-mark,
.site-header::before {
  transition: color 240ms var(--ease-out), background 240ms var(--ease-out),
              border-color 240ms var(--ease-out), opacity 260ms ease;
}

/* the rails are the main interaction and nothing announced it */
.hero-hint {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 2%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--ui-radius);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  pointer-events: none;
}
.hero-scene.show-hint .hero-hint { opacity: 1; transform: translate(-50%, 0); }
.hero-scene .hero-hint.is-out { opacity: 0; transform: translate(-50%, -6px); }
.hero-hint span { color: var(--accent); font-size: .7rem; line-height: 1; }
@media (max-width: 860px) { .hero-hint { bottom: auto; top: 2%; } }

/* =============================================================
   NAV: NO ACTIVE PILL
   styles.css gives the current link a filled rounded rect via
   `.site-nav a[aria-current="location"]`, and the same fill on
   hover — that is the grey box. A nav item is not a button; it
   should just take you there. Colour carries the state instead.
   ============================================================= */

.site-header .site-nav a:not(.nav-contact):hover,
.site-header .site-nav a:not(.nav-contact):focus-visible,
.site-header .site-nav a[aria-current="location"] {
  background: none;
  text-decoration: none;
}
.site-header .site-nav a:not(.nav-contact):hover,
.site-header .site-nav a:not(.nav-contact):focus-visible { color: var(--ink); }
.site-header .site-nav a[aria-current="location"] { color: var(--accent); }
html.is-over-dark .site-header .site-nav a:not(.nav-contact):hover,
html.is-over-dark .site-header .site-nav a:not(.nav-contact):focus-visible { color: var(--dark-ink); }
html.is-over-dark .site-header .site-nav a[aria-current="location"] { color: var(--accent); }
.site-header .site-nav a:active { transform: none; }

/* =============================================================
   PROCESS: ONE SCREEN
   The pipeline plus the standard ran to roughly two viewports.
   Nothing is removed — it is compressed: the display heading was
   sized for a section that owned the page, the step visuals were
   the single biggest block of height, and the standard row sat on
   a large margin. All three come down together so the whole
   argument lands in one view.
   ============================================================= */

@media (min-width: 1024px) {
  #process { padding-block: clamp(44px, 4.6vw, 72px); }

  #process .pipeline-heading h2 {
    max-width: 18ch;
    font-size: clamp(1.9rem, 2.9vw, 3.1rem);
    line-height: 1.02;
  }
  #process .pipeline-heading p { padding-top: 4px; font-size: clamp(.94rem, 1.05vw, 1.02rem); }

  #process .workflow-pipeline { margin-top: clamp(28px, 3.2vw, 48px); }
  #process .workflow-grid { margin-top: 0; }
  #process .workflow-step { padding-top: 22px; }
  #process .workflow-step--offset { padding-top: 36px; }
  #process .workflow-step h3 { font-size: clamp(1.12rem, 1.45vw, 1.45rem); line-height: 1.08; }
  #process .workflow-step > p { font-size: .86rem; line-height: 1.45; }
  #process .workflow-step-number { top: -16px; font-size: clamp(2.8rem, 4vw, 4.2rem); }

  #process .workflow-visual { min-height: 0; height: clamp(112px, 12vh, 150px); margin-top: 16px; }
  #process .workflow-visual--signal { gap: 5px; padding: 10px; }
  #process .workflow-visual--intake,
  #process .workflow-visual--direction,
  #process .workflow-visual--pipeline,
  #process .workflow-visual--judge,
  #process .workflow-visual--iterate { gap: 6px; padding: 10px; }

  #process .pipeline-standard { margin-top: clamp(26px, 2.8vw, 44px); padding-top: clamp(18px, 2vw, 28px); }
  #process .pipeline-standard-label { margin-bottom: clamp(12px, 1.4vw, 20px); }
  #process .pipeline-standard-grid { gap: clamp(18px, 2.4vw, 40px); }
  #process .standard-point strong { margin-bottom: 5px; font-size: clamp(.96rem, 1.12vw, 1.06rem); }
  #process .standard-point span { font-size: .82rem; line-height: 1.45; }
}

/* =============================================================
   HERO: GROUPS + READOUT
   The left chip repeated the service label the rails already
   showed. It is replaced by Spin again, and the centre now
   carries the name plus a line saying what the service is for —
   which is the thing that was actually missing.
   ============================================================= */

/* the old duplicate chip */
.hero-meta { display: none !important; }

/* Spin again takes its place, top-left */
.hero-respin {
  position: absolute;
  z-index: 6;
  left: clamp(10px, 5vw, 92px);
  top: 4%;
}
@media (max-width: 860px) { .hero-respin { position: static; margin-top: 10px; } }

/* rail group labels */
.hero-group {
  position: absolute;
  z-index: 6;
  top: 3%;
  margin: 0;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.hero-group--left { left: 0; }
.hero-group--right { right: 0; text-align: right; }

/* the readout sits under the product, centred */
.hero-readout {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 1%;
  width: min(46ch, 78%);
  text-align: center;
  transform: translate(-50%, 8px);
  opacity: 0;
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
  pointer-events: none;
}
.hero-readout.is-in { opacity: 1; }
.hero-readout-name {
  margin: 0 0 5px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero-readout-desc {
  margin: 0;
  color: var(--muted);
  font-size: clamp(.86rem, 1.02vw, .98rem);
  line-height: 1.45;
}

/* =============================================================
   HERO MODE ORBS
   Service icons read as glass spheres (highlight TL, mid body,
   darker rim) — not flat circles. Active uses signal blue depth;
   idle stays cool glass so icons stay legible.
   ============================================================= */

.hero-mode svg {
  --orb-highlight: radial-gradient(circle at 30% 26%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.42) 18%,
    transparent 46%);
  --orb-body: radial-gradient(circle at 50% 58%,
    #f3f5f9 0%,
    #dce1e9 48%,
    #b4bcc8 78%,
    #8791a0 100%);
  --orb-rim: inset 0 -2px 5px color-mix(in srgb, var(--ink) 18%, transparent),
             inset 0 2px 3px rgba(255, 255, 255, 0.65),
             inset -1px -1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
  --orb-cast: 0 3px 8px color-mix(in srgb, var(--ink) 12%, transparent),
              0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: var(--orb-highlight), var(--orb-body);
  box-shadow: var(--orb-rim), var(--orb-cast);
  /* Same navy on every idle ring — not near-black. */
  color: #1a2f55;
  filter: saturate(0.96);
}

.hero-mode:hover svg,
.hero-mode:focus-visible svg {
  --orb-body: radial-gradient(circle at 50% 56%,
    #f7f9fc 0%,
    color-mix(in srgb, var(--accent) 16%, #e2e6ee) 42%,
    color-mix(in srgb, var(--accent) 24%, #a8b0be) 100%);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  color: #1a2f55;
  box-shadow:
    var(--orb-rim),
    0 5px 14px color-mix(in srgb, var(--ink) 14%, transparent),
    0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-1px) scale(1.06);
  filter: none;
}

.hero-mode[aria-checked="true"] svg {
  /* Match "See the work" liquid hover mid (--cta-hover / #3357d7), not the darker accent mix. */
  --orb-highlight: radial-gradient(circle at 28% 24%,
    rgba(255, 255, 255, 0.55) 0%,
    transparent 40%);
  --orb-body: radial-gradient(circle at 48% 52%,
    color-mix(in srgb, var(--cta-hover, #3357d7) 22%, #fff) 0%,
    var(--cta-hover, #3357d7) 46%,
    color-mix(in srgb, var(--cta-hover, #3357d7) 88%, #1a3a9a) 100%);
  --orb-rim: inset 0 -2px 5px color-mix(in srgb, #1a3a9a 16%, transparent),
             inset 0 1px 2px rgba(255, 255, 255, 0.45),
             inset -1px -2px 3px color-mix(in srgb, #1a3a9a 10%, transparent);
  border-color: color-mix(in srgb, var(--cta-hover, #3357d7) 48%, transparent);
  background: var(--orb-highlight), var(--orb-body);
  color: var(--action-ink);
  box-shadow:
    var(--orb-rim),
    0 4px 12px color-mix(in srgb, var(--cta-hover, #3357d7) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cta-hover, #3357d7) 36%, transparent);
  transform: scale(1.12);
  filter: none;
}

.hero-mode[aria-checked="true"] span {
  display: inline-block;
  transform: none;
  color: var(--ink);
  font-size: inherit;
  font-weight: 600;
}

.hero-connectors {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Base stroke kept cool-grey; JS multiplies opacity ~0.16–0.22 so rails stay whisper-light. */
  color: #7a8490;
  --hero-rail-active: #8a96a4;
  pointer-events: none;
}
.hero-connectors__path {
  transition: stroke-width 180ms ease;
}
.hero-connectors__path.is-active {
  filter: none;
}
.hero-scene.is-roulette .hero-connectors { opacity: .28; }
html[data-skin="nocturne"] .hero-connectors {
  color: #d5deea;
  --hero-rail-active: #f4f7fb;
}

@media (min-width: 861px) {
  /* Dots stay; the wave hairline is replaced by the SVG elbow overlay. */
  .hero .hero-mode::after {
    display: none !important;
  }
  .hero .hero-mode::before {
    width: 7px;
    height: 7px;
    opacity: 0.42; /* faint but visible tip discs */
    background: color-mix(in srgb, var(--muted) 70%, transparent);
  }
  .hero .hero-mode[aria-checked="true"]::before {
    opacity: 0.55;
    background: color-mix(in srgb, var(--cta-hover, #3357d7) 55%, transparent);
    box-shadow: none;
  }
  /* Center rails (UGC / Configurators): a touch quieter than outer tips. */
  .hero .hero-mode--ugc::before,
  .hero .hero-mode--configurator::before {
    opacity: 0.34;
  }
  .hero .hero-mode--ugc[aria-checked="true"]::before,
  .hero .hero-mode--configurator[aria-checked="true"]::before {
    opacity: 0.42;
  }
}

@media (max-width: 860px) {
  .hero-connectors { display: none; }
}

.hero-mode svg,
.hero-mode span {
  transition: transform 260ms var(--ease-out), color 200ms ease,
              border-color 200ms ease, box-shadow 260ms var(--ease-out),
              filter 200ms ease;
}

/* Idle wait only: mute checked orb until the wheel starts.
   Mid-spin keeps the blue checked styles so each detent reads as lit. */
.hero-scene.is-idle .hero-mode[aria-checked="true"] svg,
.hero-scene.is-revealing.is-idle .hero-mode[aria-checked="true"] svg {
  --orb-highlight: radial-gradient(circle at 30% 26%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.42) 18%,
    transparent 46%);
  --orb-body: radial-gradient(circle at 50% 58%,
    #f3f5f9 0%,
    #dce1e9 48%,
    #b4bcc8 78%,
    #8791a0 100%);
  --orb-rim: inset 0 -2px 5px color-mix(in srgb, var(--ink) 18%, transparent),
             inset 0 2px 3px rgba(255, 255, 255, 0.65),
             inset -1px -1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
  --orb-cast: 0 3px 8px color-mix(in srgb, var(--ink) 12%, transparent),
              0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent) !important;
  background: var(--orb-highlight), var(--orb-body) !important;
  color: color-mix(in srgb, var(--ink) 78%, transparent) !important;
  box-shadow: var(--orb-rim), var(--orb-cast) !important;
  transform: none !important;
  filter: saturate(0.96);
  animation: none !important;
  transition-duration: 90ms;
}

/* Kill land-bounce while the wheel is still travelling; keep blue fill. */
.hero-scene.is-spinning .hero-mode[aria-checked="true"] svg,
.hero-scene.is-revealing.is-spinning .hero-mode[aria-checked="true"] svg,
.hero-scene.is-roulette .hero-mode[aria-checked="true"] svg {
  animation: none !important;
  transition-duration: 90ms;
}

.hero-scene.is-idle .hero-mode[aria-checked="true"] span {
  color: inherit;
  font-weight: 400 !important;
  transform: none !important;
}

.hero-scene.is-idle .hero-mode[aria-checked="true"]::before {
  opacity: 0 !important;
}

.hero-scene.is-roulette .hero-mode:not([aria-checked="true"]) svg {
  filter: saturate(0.7) brightness(0.97);
  opacity: 0.9;
}

.hero-mode.is-landing svg { animation: hero-land 620ms cubic-bezier(.2, 1.4, .35, 1) both; }
@keyframes hero-land {
  0%   { transform: scale(1.26); box-shadow: inset 0 -3px 7px color-mix(in srgb, var(--ink) 28%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 40%, transparent); }
  55%  { transform: scale(0.97); }
  100% { transform: scale(1.14); box-shadow: inset 0 -3px 7px color-mix(in srgb, var(--ink) 32%, transparent), inset 0 2px 4px rgba(255, 255, 255, 0.4), 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); }
}

html[data-skin="nocturne"] .hero-mode svg {
  --orb-highlight: radial-gradient(circle at 30% 26%,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.12) 22%,
    transparent 48%);
  --orb-body: radial-gradient(circle at 50% 58%,
    #6a7a90 0%,
    #4e5d72 48%,
    #3a4860 100%);
  border-color: color-mix(in srgb, #d7dee8 28%, transparent);
  color: #d7dee8;
  box-shadow:
    inset 0 -2px 5px rgba(0, 0, 0, 0.28),
    inset 0 2px 3px rgba(255, 255, 255, 0.14),
    0 3px 8px rgba(0, 0, 0, 0.22);
  filter: none;
}

html[data-skin="nocturne"] .hero-mode:hover svg,
html[data-skin="nocturne"] .hero-mode:focus-visible svg {
  --orb-body: radial-gradient(circle at 50% 56%,
    #7a8aa0 0%,
    #5a6b82 48%,
    #44546c 100%);
  border-color: color-mix(in srgb, #f1f5f9 36%, transparent);
  color: #f1f5f9;
  box-shadow:
    inset 0 -2px 5px rgba(0, 0, 0, 0.24),
    inset 0 2px 3px rgba(255, 255, 255, 0.18),
    0 0 0 5px color-mix(in srgb, #f8fafc 16%, transparent);
}

html[data-skin="nocturne"] .hero-mode[aria-checked="true"] svg {
  --orb-highlight: radial-gradient(circle at 28% 24%,
    rgba(255, 255, 255, 0.42) 0%,
    transparent 42%);
  --orb-body: radial-gradient(circle at 48% 55%,
    color-mix(in srgb, var(--cta-hover, #4087f7) 40%, #1a2740) 0%,
    var(--cta-hover, #4087f7) 50%,
    color-mix(in srgb, var(--cta-hover, #4087f7) 78%, #0b1734) 100%);
  border-color: color-mix(in srgb, var(--cta-hover, #4087f7) 50%, #f8fafc);
  color: #f8fafc;
  box-shadow:
    inset 0 -2px 5px rgba(12, 18, 32, 0.35),
    inset 0 2px 4px rgba(255, 255, 255, 0.18),
    0 0 0 1px color-mix(in srgb, var(--cta-hover, #4087f7) 45%, transparent);
}

html[data-skin="nocturne"] .hero-scene.is-idle .hero-mode[aria-checked="true"] svg {
  --orb-highlight: radial-gradient(circle at 30% 26%,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.12) 22%,
    transparent 48%);
  --orb-body: radial-gradient(circle at 50% 58%,
    #6a7a90 0%,
    #4e5d72 48%,
    #3a4860 100%);
  border-color: color-mix(in srgb, #d7dee8 28%, transparent);
  color: #d7dee8;
  box-shadow:
    inset 0 -2px 5px rgba(0, 0, 0, 0.28),
    inset 0 2px 3px rgba(255, 255, 255, 0.14),
    0 3px 8px rgba(0, 0, 0, 0.22);
  transform: none;
}

html[data-skin="nocturne"] .hero-mode[aria-checked="true"] span {
  color: #f8fafc;
}

html[data-skin="nocturne"] .hero-mode[aria-checked="true"]::before {
  background: #f8fafc;
  box-shadow: 0 0 0 4px color-mix(in srgb, #f8fafc 28%, transparent);
}

html[data-skin="nocturne"] .hero-mode svg,
html[data-skin="nocturne"] .hero-mode span {
  transition-duration: 420ms, 380ms, 380ms, 420ms, 380ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero-mode:hover svg,
  .hero-mode:focus-visible svg,
  .hero-mode[aria-checked="true"] svg,
  .hero-mode[aria-checked="true"] span,
  .hero-scene.is-roulette .hero-mode[aria-checked="true"] svg,
  .hero-scene.is-spinning .hero-mode[aria-checked="true"] svg {
    transform: none;
  }
  .hero-mode.is-landing svg { animation: none; }
}

@media (max-width: 860px) {
  .hero-mode[aria-checked="true"] {
    background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--accent) !important;
    color: var(--ink) !important;
  }
  .hero-mode[aria-checked="true"] svg { transform: scale(1.08); }
  .hero-mode[aria-checked="true"] span { transform: scale(1.06); }
  .hero-scene.is-idle .hero-mode[aria-checked="true"] {
    background: transparent !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--ink) 62%, transparent) !important;
    font-weight: 400 !important;
  }
  .hero-scene.is-idle .hero-mode[aria-checked="true"] svg {
    transform: none;
  }
}

/* =============================================================
   WORK: FULL WIDTH, FROSTED EDGES
   The mosaic was boxed inside the text container. It reads far
   better running to the section's own limits with the two side
   edges dissolved, so the grid feels like it continues rather
   than stopping at a hard crop.
   ============================================================= */

#work .work-stage-wrap {
  position: relative;
  width: 100%;
  margin-inline: 0;
  overflow: hidden;
  border-radius: var(--radius-lg, 24px);
}
#work .work-mosaic { width: 100%; }

#work .work-stage-wrap::before,
#work .work-stage-wrap::after {
  position: absolute;
  z-index: 3;
  top: -1px;
  bottom: -1px;
  width: clamp(38px, 7vw, 132px);
  pointer-events: none;
  content: "";
}
#work .work-stage-wrap::before {
  left: -1px;
  background: linear-gradient(90deg, var(--paper) 8%, color-mix(in srgb, var(--paper) 55%, transparent) 55%, transparent 100%);
}
#work .work-stage-wrap::after {
  right: -1px;
  background: linear-gradient(270deg, var(--paper) 8%, color-mix(in srgb, var(--paper) 55%, transparent) 55%, transparent 100%);
}

/* =============================================================
   ANCHOR LANDING
   Jumping to #packs put the section's top edge under the fixed
   masthead, so the cards themselves were below the fold. Anchors
   now land showing content, not the section's ceiling.
   ============================================================= */

html { scroll-padding-top: 0; }
main > section[id] { scroll-margin-top: calc(var(--header) + 18px); }
/* these two open with a tall heading block before anything useful */
#packs, #work { scroll-margin-top: calc(var(--header) + 4px); }

/* the header CTA is small and sits on glass — it needs a tighter jelly
   inset than the big page CTAs, or the wobble overlaps the nav links */
.nav-contact[data-liquid-button] { position: relative; isolation: isolate; overflow: visible; }
.nav-contact[data-liquid-button] .liquid-surface { inset: -14px; }
.nav-contact[data-liquid-button].has-liquid {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transition: none;
}
.nav-contact[data-liquid-button] > * { position: relative; z-index: 2; }
html.is-over-dark .nav-contact[data-liquid-button] { --liquid-base: var(--accent); }

/* =============================================================
   HERO TIGHTENING — one-line lede, higher composition,
   icon-only respin, delayed readout
   ============================================================= */

@media (min-width: 861px) {
  /* the lede was capped at 46ch and wrapped mid-sentence; the copy is
     now short enough to hold one line, so let it */
  .hero .hero-intro { max-width: min(102ch, 100%); }

  /* -44px put the product under the lede. The bottom gap is closed by
     moving the CTA down instead, not by pulling the media up. */
  .hero-showcase-wrap { margin-top: 3px; }
  /* measured: nav-bottom -> h1-top is 3px, h1-bottom -> lede-top is 3px.
     Title and lede travel together so the chair has air under the copy. */
  .hero .hero-intro { margin-top: 0; }
}


/* Readout lives in .hero-actions above the CTA — never over the shoe media. */
.hero-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}
.hero-actions .hero-readout,
.hero .hero-actions .hero-readout {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(90ch, 96%) !important;
  margin: 0 0 2px !important;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}
.hero-scene .hero-readout { display: none !important; }

/* ---- readout: the explanation only, on one line ---- */
/* the name is already carried by the rail label, in bold, at 115% */
.hero-readout-name { display: none; }
.hero-readout {
  width: min(90ch, 96%);
  bottom: clamp(10px, 1.8vh, 22px);
}
.hero-readout-desc {
  font-size: clamp(.88rem, 1.04vw, 1rem);
  line-height: 1.3;
}
@media (min-width: 861px) { .hero-readout-desc { white-space: nowrap; } }

/* it appears only after the wheel lands — idle and spin stay empty */
.hero-actions .hero-readout {
  opacity: 0;
  transform: none;
  transition: opacity 380ms var(--ease-out, ease);
}
.hero-actions .hero-readout.is-in {
  opacity: 1;
  transform: none;
}
.hero-scene.is-idle .hero-meta,
.hero-scene.is-spinning .hero-meta {
  opacity: 0;
}

/* ---- the primary CTA reads as primary ---- */
.hero-actions .button {
  min-height: 58px;
  padding: 17px 34px;
  font-size: 1.02rem;
  letter-spacing: -0.005em;
}
.hero .hero-actions .button[data-liquid-button] {
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--ink) 10%, transparent);
}
.hero .hero-actions .button[data-liquid-button]:hover,
.hero .hero-actions .button[data-liquid-button]:focus-visible {
  box-shadow: 0 8px 18px -8px rgba(61, 132, 255, 0.16);
}

/* ---- Spin again becomes an icon ----
   As a labelled pill it was absolutely positioned inside .hero-utility
   (which is itself absolute), so it landed under the "3D & Interactive"
   rail label instead of beside Show input. Static + circular fixes both
   the collision and the width. */
.hero-respin {
  position: static;
  width: 44px;
  min-width: 44px;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 999px;
  font-size: 0;
  letter-spacing: 0;
}
.hero-respin span { font-size: 1.05rem; line-height: 1; }
@media (max-width: 860px) { .hero-respin { position: static; margin-top: 0; } }



/* ---- nav CTA: the jelly was hiding its own label ----
   .liquid-surface only got position/z-index from a .button-scoped rule,
   so on .nav-contact it stayed static and the absolutely-positioned
   canvas painted above the (unwrapped) text node. */
.nav-contact[data-liquid-button] .liquid-surface {
  position: absolute;
  inset: -14px;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.nav-contact[data-liquid-button] .button-copy {
  position: relative;
  z-index: 2;
  color: inherit;
}

/* =============================================================
   HERO TOP-RIGHT CORNER
   Three things were competing for one 90px band: the utility
   cluster, the "3D & Interactive" rail label and the first icon
   row. Removing the sound toggle frees the width; raising the
   cluster and dropping the labels 56px below it gives each a
   lane of its own.
   ============================================================= */

@media (min-width: 861px) {
  /* Measured at 1728x900: the bottom-left corner is NOT free — the
     PRODUCT IMAGERY label runs to y745 and the scene floor is y787, so a
     44px cluster there overlaps the label by 2px. The top-left corner is
     genuinely empty: the lede starts at x444 and the CONTENT label at
     y320, leaving a clean 90x70 pocket. */
  /* Inboard of the right rail, overlaid on the media. Anchored off the
     same numbers the rails use — rail inset, the column's 1.5% offset,
     its 150px width — plus a 26px gap, so it tracks the column at every
     width rather than at one measured value. */
  .hero-utility {
    top: 48px;
    left: auto;
    bottom: auto;
    right: calc(clamp(10px, 5vw, 92px) - 12px + 1.5% + 150px + 26px);
    gap: 7px;
    z-index: 12;                 /* above the rails (7) and the media */
  }
  /* 25% down from 34px */
  .hero-respin { width: 26px; min-width: 26px; min-height: 26px; }
  .hero-respin span { font-size: .78rem; }
  .hero-input-toggle { min-height: 26px; padding: 4px 9px; font-size: .46rem; }
}

/* the group labels sit exactly over their icon column. .hero-mode is
   160px wide and pinned to left:0 / right:0 of .hero-services, so the
   label matching that box and centring inside it lines up by
   construction rather than by eye. Desktop only — below 861px the rails
   stack and there is no column to sit above. */
@media (min-width: 861px) {
  /* the mode buttons are 150px wide and inset 1.5% from the rail edges,
     not 0 — matching those two numbers is what puts the label dead centre
     over its column */
  .hero-group {
    top: 13%;
    width: 150px;
    text-align: center;
  }
  .hero-group--left  { left: 1.5%; right: auto; }
  .hero-group--right { right: 1.5%; left: auto; text-align: center; }
}

/* AR: the device card was 330x446 — big enough to read as the subject
   rather than as the frame the product is being viewed through */
@media (min-width: 861px) {
  .hero-viewfinder { width: min(21vw, 262px); }
  .hero-scene[data-mode="ar"] .hero-video-frame video { width: 22%; height: 62%; }
}

/* the cluster was permanently at 50% opacity, so hovering it only
   restored what should have been there in the first place — which is
   why the hover read as "not working" */
.hero-utility { opacity: 1; }
.hero-respin,
.hero-input-toggle {
  opacity: 1;
  color: var(--muted);
  transition: color 160ms ease, border-color 160ms ease,
              background-color 160ms ease;
}
.hero-respin:hover,
.hero-respin:focus-visible,
.hero-input-toggle:hover,
.hero-input-toggle:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 34%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

/* =============================================================
   HERO INPUT CAROUSEL
   Photo inset inside the restored grid / reticle.
   No source pill. Arrows sit on the grid, not on the photo.
   ============================================================= */
.hero-source-overlay::before {
  display: none !important;
  content: none !important;
  background: none !important;
}
.hero-scene.is-source-visible .hero-utility {
  z-index: 14;
  opacity: 1;
}
.hero-input-viewport {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 54%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-input-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.hero-input-photo.is-active { opacity: 1; }
.hero-input-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  transform: translateY(-50%);
  cursor: pointer;
}
.hero-input-arrow--prev { left: 7%; }
.hero-input-arrow--next { right: 7%; }
.hero-input-arrow svg {
  width: 20px;
  height: 20px;
  display: block;
  overflow: visible;
}
.hero-input-arrow:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}
html:not([data-skin="nocturne"]) .hero-input-arrow { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .hero-input-photo { transition: none; }
}

/* =============================================================
   HERO FOOTER SPACING
   ~100px of dead space sat under the CTA. The readout and the
   button both move down into it rather than leaving the hero
   bottom-heavy with nothing.
   ============================================================= */

@media (min-width: 861px) {
  /* Readout sits in .hero-actions above the CTA — keep CTA in normal flow. */
  .hero.has-sky .hero-actions,
  .hero.has-sky-fallback .hero-actions {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 8px;
  }
  .hero-actions .hero-readout {
    margin-bottom: 2px;
  }
}

/* =============================================================
   SHOW INPUT / SPINNING — disabled + focus states
   Pressing Show input is a "get out of the way" gesture: the rails,
   labels and readout recede so the source frame is the only thing
   competing for attention. Spin is unavailable while either the
   source is up or the wheel is already turning, and says so by
   greying rather than by vanishing.
   ============================================================= */

.hero-scene .hero-services,
.hero-scene .hero-group,
.hero-scene .hero-readout,
.hero-scene .hero-respin {
  transition: opacity 260ms var(--ease-out);
}

.hero-scene.is-source-visible .hero-services,
.hero-scene.is-source-visible .hero-group,
.hero-scene.is-source-visible .hero-readout.is-in {
  opacity: .25;
  pointer-events: none;
}

/* greyed, not hidden — a control that disappears reads as a bug */
.hero-scene.is-spinning .hero-respin,
.hero-scene.is-source-visible .hero-respin {
  opacity: .3;
  pointer-events: none;
  cursor: default;
}
.hero-scene.is-spinning .hero-respin:hover,
.hero-scene.is-source-visible .hero-respin:hover {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
  transform: none;
}


/* =============================================================
   MASTHEAD GLASS AFTER HERO ONLY
   While the sky sits under the nav, keep the masthead fully clear
   so the cloud sea reads through. Frost arrives only once the
   hero has scrolled past (html.is-past-hero from hero-extras.js).
   ============================================================= */

.site-header,
.site-header.is-scrolled {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The glass band is on from the first pixel. Over the hero sky it carries
   a lighter tint so the clouds read through it as frosted glass; once the
   page content passes underneath it firms up to the paper tint. */
.site-header::before {
  opacity: 1;
  transition: opacity 240ms var(--ease-out), background 240ms var(--ease-out);
}
.site-header,
.site-header.is-scrolled {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html:not(.is-past-hero) .site-header::before {
  background: color-mix(in srgb, var(--paper) 30%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
}


/* =============================================================
   AI-SLOP PASS 1
   Removing the 4px accent stripe on the left of note blocks — a
   template tell that carries no information the heading doesn't.
   ============================================================= */

.work-note { border-left: 0; padding-left: 0; }
.pack-policy { border-left: 0; padding-left: 0; }

/* =============================================================
   WORK: THREE CONTAINED ROWS
   The five-column masonry left every column a different height,
   so the grid ended in a ragged edge and read as spilling rather
   than as a composed block.

   Three flex rows instead. Each tile gets flex-grow equal to its
   aspect ratio with a zero basis, so width is proportional to
   aspect and height = width / aspect resolves to the SAME value
   for every tile in a row. Each row is therefore internally
   uniform and every tile keeps its true proportions, with no
   fixed height to fight.

   The three rows are balanced by summed aspect ratio (5.28 /
   5.25 / 5.03) so they land within 8px of each other in height.
   ============================================================= */

#work .work-row {
  display: flex;
  flex-direction: row;
  gap: clamp(10px, 1.3vw, 18px);
  align-items: stretch;
}
#work .work-row .work-tile {
  flex: var(--ar) 1 0;
  aspect-ratio: var(--ar);
  min-width: 0;
}

/* When the godly bento grid is active, rows are display:contents and
   tiles stretch by track size — drop aspect-ratio so height tracks win. */
@supports (grid-template-rows: minmax(0, 1fr)) {
  #work .work-mosaic { align-items: stretch; }
}
#work .work-row .work-tile--tall           { --ar: 0.714; }
#work .work-row .work-tile--square         { --ar: 1; }
#work .work-row .work-tile--wide           { --ar: 1.684; }
#work .work-row .work-tile--hero-tall      { --ar: 0.789; }
#work .work-row .work-tile--banner         { --ar: 2.133; }
#work .work-row .work-tile--centerpiece    { --ar: 0.847; }
#work .work-row .work-tile--banner-caption { --ar: 1.778; }
#work .work-row .work-tile--portrait       { --ar: 0.75; }

/* the mosaic stacks the rows */
#work .work-mosaic {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.3vw, 18px);
  /* the old grid rule set align-items:start, which in a flex column is
     the CROSS axis — it was shrink-wrapping each row to its content
     width instead of letting the rows span the stage */
  align-items: stretch;
}

/* hovering must not push a tile out of its row */
#work .work-row .work-tile:hover { transform: translateY(-4px); }

@media (max-width: 860px) {
  #work .work-row { flex-wrap: wrap; }
  #work .work-row .work-tile { flex: var(--ar) 1 34%; }
}


/* =============================================================
   STRUCTURE + DEPTH PASS
   Hero rules are not restated here. This layer is spacing, chrome,
   quieter industries, pack hierarchy, readable FAQ type, and the
   pointer-tilt that makes later sections feel like objects, not
   flat cards.
   ============================================================= */

:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --section-space: clamp(64px, 7.5vw, 104px);
}

#grain { z-index: 5; opacity: .32; }
html[data-skin="nocturne"] #grain {
  opacity: .07;
  mix-blend-mode: soft-light;
}
#vignette { z-index: 5; opacity: .72; }
html[data-skin="kage"] #vignette { opacity: .45; }
html[data-skin="kage"] .hero #vignette,
html[data-skin="kage"].has-hero #vignette { opacity: .35; }
.site-stars { z-index: 1 !important; }

.button[data-liquid-button].has-liquid:focus-visible,
.nav-contact[data-liquid-button].has-liquid:focus-visible {
  outline: 3px solid var(--lime) !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--ink) !important;
}

.site-header .brand {
  font-family: var(--body), "DM Sans", system-ui, sans-serif;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-header .brand > span:not(.brand-mark),
.footer-brand > span:not(.brand-mark) {
  font-family: var(--body), "DM Sans", system-ui, sans-serif;
}
/* Masked mark: fill colour shows through the logo silhouette.
   Never use paper/cream as the fill on a light header — it vanishes. */
.site-header .brand-mark {
  overflow: visible;
  border-radius: 0 !important;
  background: #0a0a0a !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-mask: url("assets/brand/logo.png") center / contain no-repeat;
  mask: url("assets/brand/logo.png") center / contain no-repeat;
}
html[data-skin="nocturne"] .site-header .brand-mark,
html.is-over-dark .site-header .brand-mark,
.site-header.is-scrolled html[data-skin="nocturne"] .brand-mark {
  background: #F2F4F7 !important;
  background-image: none !important;
}
html[data-skin="nocturne"] .site-header.is-scrolled .brand-mark,
html.is-over-dark .site-header.is-scrolled .brand-mark {
  background: #F2F4F7 !important;
}

.eyebrow::before {
  box-shadow: none;
  width: 5px;
  height: 5px;
  opacity: .7;
}

.ribbon-stack + section::after { display: none; }
.packs-head,
.section-heading {
  border-top: 0;
  padding-top: 0;
  margin-bottom: clamp(20px, 3vw, 36px);
}
@media (min-width: 1180px) {
  main > section:not(.hero):not(.ribbon-stack) > .container::before { content: none; }
}

.ribbon-stack {
  background: var(--surface);
}
.ribbon--clients {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}
.ribbon--industries {
  opacity: 1;
  background: color-mix(in srgb, var(--surface) 38%, transparent);
}
.ribbon--industries .ribbon-group span {
  padding-block: clamp(8px, .8vw, 12px);
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  font-size: var(--type-meta);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ribbon--industries .ribbon-group span::after {
  width: 3px;
  height: 3px;
  background: currentColor;
  opacity: .22;
}

.work-head-title h2,
.packs-head h2,
.outcome-head h2,
.pipeline-heading h2,
#process .pipeline-heading h2 {
  font-size: var(--section-display-size);
  line-height: 1.06;
  letter-spacing: -.03em;
}
#partnership .partnership-copy h2 {
  max-width: 12ch;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.04;
}
.client-proof-head h2,
.client-review-showcase .client-proof-head h2 {
  font-size: clamp(1.85rem, 3vw, 2.8rem);
  line-height: 1.08;
}

.faq-index ol { margin-top: 0; }
.faq-lab-main h2,
.faq-lab-main h2[data-faq-question-current] {
  max-width: 22ch;
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -.028em;
}
@media (max-width: 560px) {
  .faq-lab-main h2 { max-width: 20ch; font-size: clamp(1.5rem, 7vw, 2.1rem); }
  .work-head-title h2 { font-size: 40px; }
}

@media (pointer: fine) {
  .spotlight-surface {
    transform: perspective(980px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    transition: transform 420ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms ease;
  }
  .spotlight-surface:hover { will-change: transform; }
  .pack.spotlight-surface:hover {
    transform: perspective(980px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-5px);
  }
  #work .work-mosaic {
    perspective: 1600px;
  }
  #work .work-row {
    transform-style: preserve-3d;
  }
  #work .work-row .work-tile.spotlight-surface:hover {
    z-index: 2;
    transform: perspective(980px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
  }
  .faq-visual-card.spotlight-surface,
  .partnership-month--front.spotlight-surface,
  .client-review-visual.spotlight-surface {
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  }
  .client-review-visual.spotlight-surface:hover {
    box-shadow: 0 28px 56px color-mix(in srgb, var(--ink) 16%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spotlight-surface,
  .pack.spotlight-surface:hover,
  #work .work-row .work-tile.spotlight-surface:hover,
  .partnership-month--back,
  .partnership-month--middle {
    transform: none;
    will-change: auto;
  }
}

.faq-visual-stage { perspective: 1200px; }
.partnership-visual { perspective: 1600px; }

@media (min-width: 861px) {
  .partnership-month--back {
    transform: translateX(16px) rotateY(-7deg);
    transform-origin: 85% 40%;
  }
  .partnership-month--middle {
    transform: translateX(6px) rotateY(-3.5deg);
    transform-origin: 85% 40%;
  }
}

.work-tile .placeholder-label {
  opacity: .78;
  background: color-mix(in srgb, var(--dark) 48%, transparent);
}
.work-tile:hover .placeholder-label {
  background: color-mix(in srgb, var(--dark) 62%, transparent);
  border-color: color-mix(in srgb, var(--dark-ink) 28%, transparent);
  color: var(--dark-ink);
}

.workflow-step,
.pack,
.faq-visual-card,
.client-review-showcase {
  background-clip: padding-box;
}

html[data-skin="nocturne"] .ribbon-stack {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
html[data-skin="nocturne"] .ribbon--industries {
  opacity: 1;
  background: color-mix(in srgb, var(--surface) 28%, transparent);
}
html[data-skin="nocturne"] .ribbon--industries .ribbon-group span {
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

/* =============================================================
   PROCESS WEIGHTING + PACK POLICY
   Direction (approval) and Judge stay slightly heavier. Packs
   stay four equal cards; the policy note uses the full pack row.
   ============================================================= */

body.nav-open { overflow: hidden; }

/* Mobile hamburger overlay.
   The masthead pill (.header-inner) uses backdrop-filter + isolation, which
   makes `position: fixed` resolve against that 56px bar instead of the
   viewport. The old inset:0 + justify-content:center sheet therefore became
   a short frosted card holding only the middle links (Process / Work / FAQ)
   while Compare / Packs / Cases / Discuss spilled onto the hero. Later glass
   rules (radius, translucent fill, z-index: 4) let the headline and shoe
   read through. Opening the menu must: (1) kill that containing block,
   (2) paint an opaque sheet above hero / clouds / stars, (3) list each
   label once with real loaded weights — 650 is past the DM Sans 600 cut
   and synthesizes a second offset copy (Processs / Workk / FAQO). */
@media (max-width: 860px) {
  body.nav-open::before {
    position: fixed;
    z-index: 360;
    inset: 0;
    background: var(--paper);
    content: "";
    pointer-events: none;
  }

  body.nav-open .site-header {
    z-index: 500;
    overflow: visible;
  }

  body.nav-open .design-lab-root,
  body.nav-open .theme-toggle {
    visibility: hidden;
    pointer-events: none;
  }

  body.nav-open .site-header .header-inner {
    overflow: visible;
    isolation: auto;
    transform: none;
    filter: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .site-header .brand,
  .site-header .menu-button {
    position: relative;
    z-index: 420;
  }

  .site-header .site-nav.is-open {
    position: fixed;
    inset: 0;
    z-index: 410;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2px;
    width: auto;
    height: auto;
    max-height: none;
    margin: 0;
    padding: calc(var(--header) + 28px) 20px max(28px, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: var(--paper);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header .site-nav.is-open a,
  .site-header .site-nav.is-open a span,
  .site-header .site-nav.is-open a .button-copy {
    position: relative;
    display: flex;
    min-height: 48px;
    align-items: center;
    letter-spacing: 0.01em;
    text-transform: none;
    text-shadow: none;
    -webkit-text-stroke: 0;
    -webkit-text-fill-color: currentColor;
    transform: none;
  }

  .site-header .site-nav.is-open a,
  html.is-over-dark .site-header .site-nav.is-open a:not(.nav-contact) {
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    background: none;
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .site-header .site-nav.is-open a::before,
  .site-header .site-nav.is-open a::after,
  .site-header .site-nav.is-open .alt {
    display: none !important;
    content: none !important;
  }

  .site-header .site-nav.is-open a:not(.nav-contact):hover,
  .site-header .site-nav.is-open a:not(.nav-contact):focus-visible,
  .site-header .site-nav.is-open a[aria-current="location"] {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    text-decoration: none;
    transform: none;
  }

  .site-header .site-nav.is-open a[aria-current="location"] { color: var(--accent); }

  .site-header .site-nav.is-open .nav-contact {
    margin-top: 12px;
    justify-content: center;
    border-radius: 999px;
    background: var(--action);
    color: var(--action-ink);
    transform: none;
    box-shadow: none;
  }
  .site-header .site-nav.is-open .nav-contact:hover,
  .site-header .site-nav.is-open .nav-contact:focus-visible {
    background: var(--cta-hover, #3357d7);
    border-color: var(--cta-hover, #3357d7);
    color: var(--action-ink);
    box-shadow: none;
    filter: none;
    transform: none;
  }
}

.workflow-step--weighted {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
  background: color-mix(in srgb, var(--paper) 6%, transparent);
}
#process .workflow-step--weighted .workflow-step-kicker,
#process .workflow-step--gate .workflow-step-kicker {
  color: var(--accent);
  font-weight: 600;
}
#process .workflow-step--weighted h3,
#process .workflow-step--gate h3 {
  letter-spacing: -.03em;
}
#process .workflow-gate {
  color: color-mix(in srgb, var(--dark-ink) 70%, transparent);
}
html[data-skin="nocturne"] #process .workflow-gate {
  border-top-color: color-mix(in srgb, var(--accent) 48%, transparent);
  border-bottom-color: color-mix(in srgb, var(--dark-ink) 16%, transparent);
}

.pack-policy {
  max-width: none;
  width: 100%;
  margin-top: 22px;
  padding: 16px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
}

@media (min-width: 1024px) {
  .pack-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
  }
  .pack-policy {
    text-wrap: pretty;
  }
}

html[data-skin="nocturne"] .site-header.is-scrolled::before {
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}

/* =============================================================
   PERFORMANCE
   Scroll-linked blur, live backdrop-filter on cards, and leftover
   will-change were the main sources of the page feeling stuck.
   Atmosphere stays; the compositor does less work per frame.
   ============================================================= */

.hero-copy {
  filter: none;
  will-change: opacity, transform;
}

.pack,
.hero-meta,
.hero-input-toggle,
.hero-play,
.hero-configurator-controls {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (pointer: coarse) {
  .global-shader-field { opacity: .72; }
}

@media (max-width: 860px) {
  .hero {
    min-height: 0;
    padding-top: 6px;
    padding-bottom: 18px;
  }
  .hero-showcase-wrap { margin-top: 6px; }
  .hero-scene { padding-top: 42px; }
  .hero-scene { overflow: hidden; }
  .hero-utility {
    display: flex !important;
    top: 6px;
    right: 8px;
    left: auto;
    z-index: 14;
  }
  .hero-input-toggle {
    display: inline-flex !important;
    min-height: 28px;
    padding: 4px 10px;
    font-size: .5rem;
  }
  .hero-source-overlay {
    left: 50%;
    right: auto;
    top: 36%;
    width: min(78vw, 320px);
    max-width: calc(100vw - 24px);
    aspect-ratio: 1.3;
    transform: translate(-50%, -50%) scale(.92);
  }
  .hero-scene.is-source-visible .hero-source-overlay {
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .hero-input-viewport { width: 50%; }
  .hero-source-overlay::after { width: 52%; }
  .hero-input-arrow--prev { left: 4%; }
  .hero-input-arrow--next { right: 4%; }

  .hero-group {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    padding: 10px 4px 0;
    font-size: .5rem;
    letter-spacing: .14em;
    text-align: center;
  }
  .hero-group--left { grid-column: 1; }
  .hero-group--right { grid-column: 2; }

  .hero-mode {
    min-height: 48px;
    padding: 8px 6px;
    font-size: .58rem;
  }
  .hero-mode svg { width: 26px; height: 26px; }

  .hero-readout,
  .hero-readout.is-in,
  .hero-scene.is-ready .hero-readout.is-in {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    grid-column: 1 / -1;
    margin: 10px 0 0;
    padding: 0 10px;
    transform: none;
    text-align: center;
  }
  .hero-readout-desc {
    white-space: normal;
    min-height: calc(1.4em * 2);
  }
}

/* =============================================================
   NOCTURNE SECTION RHYTHM
   Light theme already alternates cream / alt / navy. In nocturne
   --paper, --surface and --dark were the same navy, so the page
   read as one slab. Keep the night palette; only step the ground
   a little so each block has a place.
   ============================================================= */

html[data-skin="nocturne"] {
  --paper: #020617;
  --surface: #030712;
  --surface-alt: #0a0f1a;
  --dark: #010409;
  --dark-2: #0f172a;
  --proof-bg: #030712;
  --proof-surface: #0f172a;
  --line: rgba(148, 163, 184, 0.11);
  --dark-line: rgba(59, 130, 246, 0.13);
}

html[data-skin="nocturne"] body { background: var(--paper); }

html[data-skin="nocturne"] .hero,
html[data-skin="nocturne"] #work {
  background: var(--paper);
}
html[data-skin="nocturne"] .ribbon-stack {
  background: #030712;
  border-top-color: color-mix(in srgb, var(--accent) 10%, transparent);
}
html[data-skin="nocturne"] .ribbon--industries {
  background: color-mix(in srgb, var(--surface) 40%, transparent);
}

html[data-skin="nocturne"] .pack {
  background: color-mix(in srgb, var(--dark-2) 55%, var(--surface-alt));
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
html[data-skin="nocturne"] .client-review-showcase {
  background: color-mix(in srgb, var(--proof-surface) 82%, var(--proof-bg));
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
html[data-skin="nocturne"] .workflow-step {
  background: color-mix(in srgb, var(--paper) 18%, transparent);
}
html[data-skin="nocturne"] .faq-index,
html[data-skin="nocturne"] .faq-lab-main {
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}

/* =============================================================
   SECTION BLEND — nocturne only
   Cream against navy in light reads as a muddy smear. Night
   grounds are close enough that a short ease actually helps.
   ============================================================= */

html[data-skin="nocturne"] main > section,
html[data-skin="nocturne"] .site-footer {
  --blend-size: clamp(104px, 13vw, 176px);
  --blend-from: var(--paper);
  --section-bg: var(--paper);
}

html[data-skin="nocturne"] .hero,
html[data-skin="nocturne"] #work {
  --section-bg: var(--paper);
}

html[data-skin="nocturne"] #packs {
  --blend-from: var(--paper);
  --section-bg: var(--surface-alt);
}

html[data-skin="nocturne"] #process {
  --blend-from: var(--surface-alt);
  --section-bg: var(--dark);
}

html[data-skin="nocturne"] #partnership {
  --blend-from: var(--dark);
  --section-bg: var(--paper);
}

/* FAQ + footer are one continuous dark band — never blend back to paper. */
html[data-skin="nocturne"] #faq {
  --blend-from: var(--dark);
  --section-bg: var(--dark);
}

html[data-skin="nocturne"] .site-footer {
  --blend-from: var(--dark);
  --section-bg: var(--dark);
}

html[data-skin="nocturne"] #packs,
html[data-skin="nocturne"] #process,
html[data-skin="nocturne"] #partnership,
html[data-skin="nocturne"] #faq,
html[data-skin="nocturne"] .site-footer {
  background:
    linear-gradient(
      to bottom,
      var(--blend-from) 0,
      color-mix(in srgb, var(--blend-from) 82%, var(--section-bg)) 28px,
      color-mix(in srgb, var(--blend-from) 48%, var(--section-bg)) 72px,
      color-mix(in srgb, var(--blend-from) 16%, var(--section-bg)) calc(var(--blend-size) - 36px),
      var(--section-bg) var(--blend-size),
      var(--section-bg) 100%
    );
}

html[data-skin="nocturne"] #packs::before,
html[data-skin="nocturne"] #process::before,
html[data-skin="nocturne"] #partnership::before,
html[data-skin="nocturne"] #faq::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 72px;
  z-index: 0;
  pointer-events: none;
  background: var(--blend-from);
  opacity: .38;
  filter: blur(36px);
}

html[data-skin="nocturne"] #packs.section,
html[data-skin="nocturne"] #process.section,
html[data-skin="nocturne"] #partnership.section,
html[data-skin="nocturne"] #faq.section {
  padding-top: calc(var(--section-space, 88px) + clamp(8px, 1.4vw, 20px));
}

html[data-skin="nocturne"] #work,
html[data-skin="nocturne"] #packs,
html[data-skin="nocturne"] #partnership,
html[data-skin="nocturne"] #faq {
  box-shadow: none;
}

/* ---- Packs: one grid + catalogue ---- */
#packs .packs-head h2 {
  max-width: none;
  margin: 0;
}
.packs-title-line {
  display: block;
  max-width: 18ch;
}
#packs .packs-head > p {
  max-width: 52ch;
  margin-top: 16px;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.45;
}
#packs .pack-grid {
  margin-top: clamp(28px, 3vw, 48px);
}
#packs .pack-price small {
  display: block;
  margin-top: 6px;
}
/* Catalogue strip removed from homepage packs — folded into Interactive card */
#packs .catalogue-program { display: none !important; }



/* Pipeline — calm neutral ground only (no decorative colour wash) */
#process.process-desk,
#process {
  background: #F7F8FA !important;
}
html[data-skin="nocturne"] #process.process-desk,
html[data-skin="nocturne"] #process {
  background: var(--paper, #0a0f1a) !important;
}
#process.process-desk::before,
#process::before {
  content: none !important;
  background: none !important;
}
/* ---- Studio panel: Testimonials | FAQ | Proof (editorial) ---- */
#faq.studio-panel-band,
html[data-skin="nocturne"] #faq.studio-panel-band {
  position: relative;
  background: #F7F8FA;
  color: var(--ink, #0b1734);
  padding: clamp(56px, 7vw, 96px) 0;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
html[data-skin="nocturne"] #faq.studio-panel-band {
  background: var(--paper, #0a0f1a);
}
html[data-skin="nocturne"] #faq.studio-panel-band::before { display: none; }

.studio-panel-alias {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

/* Match Packs width — wide, intentional, not edge-to-edge */
#faq .studio-panel-container,
.studio-panel-container {
  width: min(1600px, calc(100% - clamp(32px, 7vw, 112px)));
  max-width: none;
  margin-inline: auto;
  padding: 0;
}

.studio-panel-frame {
  --studio-h: clamp(560px, 70vh, 700px);
  position: relative;
  display: grid;
  height: var(--studio-h);
  min-height: var(--studio-h);
  max-height: var(--studio-h);
  padding: clamp(28px, 3vw, 44px) clamp(28px, 3.2vw, 48px) clamp(22px, 2.4vw, 32px);
  /* Soft edge — avoid a crisp 1px stroke that reads as a cut-off hairline */
  border: 0;
  border-radius: 28px;
  /* Editorial navy with clearer gradient depth (still restrained) */
  background:
    radial-gradient(ellipse 95% 65% at 14% -14%, color-mix(in srgb, #6f8fac 42%, transparent), transparent 56%),
    radial-gradient(ellipse 75% 55% at 90% -4%, color-mix(in srgb, #9ED0FF 26%, transparent), transparent 50%),
    radial-gradient(ellipse 60% 48% at 50% 112%, color-mix(in srgb, #4A6588 58%, transparent), transparent 60%),
    linear-gradient(158deg,
      #2a3a5c 0%,
      #1c2c4a 22%,
      #142038 48%,
      #0c162a 74%,
      #020617 100%);
  box-shadow:
    0 40px 80px color-mix(in srgb, #020617 22%, transparent),
    0 12px 28px color-mix(in srgb, #0b1734 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 6%, transparent);
  color: #F7F8FA;
  overflow: hidden;
}

.studio-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(168px, 0.24fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.studio-panel-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* Absolute views keep the navy panel height fixed across mode switches */
.studio-panel-view {
  display: none;
  position: absolute;
  inset: 0;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
  align-content: start;
  overflow: hidden;
}
.studio-panel-view.is-active {
  display: grid;
  animation: studio-panel-in 380ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes studio-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-panel-view.is-active { animation: none; }
}

.studio-panel-head {
  display: grid;
  gap: 10px;
  max-width: min(36ch, 100%);
}
.studio-panel-kicker {
  margin: 0;
  color: color-mix(in srgb, #9dbbdc 78%, #F7F8FA);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.studio-panel-head h2 {
  margin: 0;
  color: #F7F8FA;
  font-family: var(--display);
  font-size: clamp(1.85rem, 3.2vw, 2.85rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.035em;
}

/* Testimonials */
.studio-panel-proof {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 18px;
  min-height: 0;
  height: 100%;
}
.client-review-stage {
  position: relative;
  min-height: 0;
  height: 100%;
}
.client-review {
  position: absolute;
  inset: 0;
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  align-content: center;
  justify-items: start;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.client-review.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.client-review-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}
.client-review-avatar {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #9dbbdc 36%, transparent);
  background: color-mix(in srgb, #1a2744 88%, #3468ac);
  object-fit: cover;
}
.client-review-identity strong {
  display: block;
  color: #F7F8FA;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.client-review-identity span {
  display: block;
  margin-top: 2px;
  color: color-mix(in srgb, #F7F8FA 55%, transparent);
  font-size: .8rem;
  line-height: 1.35;
}
.client-review blockquote {
  margin: 0;
  max-width: min(22ch, 100%);
  color: #F7F8FA;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.1;
}

.studio-panel-nav {
  display: grid;
  grid-template-columns: 40px auto minmax(0, 1fr) 40px;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}
.studio-panel-nav[hidden] { display: none !important; }
.studio-panel-nav-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, #F7F8FA 16%, transparent);
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, #F7F8FA 70%, transparent);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.studio-panel-nav-btn:hover,
.studio-panel-nav-btn:focus-visible {
  color: #F7F8FA;
  border-color: color-mix(in srgb, #9dbbdc 45%, transparent);
  background: color-mix(in srgb, #3468ac 14%, transparent);
  outline: none;
}
.studio-panel-nav-status {
  margin: 0;
  color: color-mix(in srgb, #F7F8FA 55%, transparent);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
}
.studio-panel-progress {
  display: block;
  height: 1px;
  background: color-mix(in srgb, #F7F8FA 14%, transparent);
  overflow: hidden;
}
.studio-panel-progress i {
  display: block;
  width: 34%;
  height: 100%;
  background: color-mix(in srgb, #3468ac 80%, #fff);
  box-shadow: 0 0 8px color-mix(in srgb, #3468ac 40%, transparent);
  transition: width 280ms ease;
}

/* FAQ — list + answer, no extra CTA rail */
#faq .faq-split {
  display: grid;
  grid-template-columns: minmax(180px, .38fr) minmax(0, 1fr);
  gap: clamp(22px, 3.2vw, 44px);
  align-items: start;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
#faq .faq-index {
  display: grid;
  gap: 0;
  min-height: 0;
  overflow: auto;
  border-top: 1px solid color-mix(in srgb, #F7F8FA 12%, transparent);
  scrollbar-width: none;
}
#faq .faq-index::-webkit-scrollbar { display: none; }
#faq .faq-index button {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, #F7F8FA 10%, transparent);
  background: transparent;
  color: color-mix(in srgb, #F7F8FA 48%, transparent);
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease;
}
#faq .faq-index button span {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .12em;
  color: inherit;
}
#faq .faq-index button strong {
  font-size: .9rem;
  font-weight: 600;
  color: inherit;
}
#faq .faq-index button:hover,
#faq .faq-index button:focus-visible {
  color: color-mix(in srgb, #F7F8FA 88%, transparent);
  outline: none;
}
#faq .faq-index button[aria-selected="true"] {
  color: #F7F8FA;
}
#faq .faq-index button[aria-selected="true"] strong {
  box-shadow: inset 0 -1px 0 #3468ac;
}
#faq .faq-answer-pane {
  min-width: 0;
  padding-top: 4px;
}
#faq .faq-count {
  margin: 0 0 12px;
  color: color-mix(in srgb, #9dbbdc 70%, #F7F8FA);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#faq .faq-answer-pane h3 {
  margin: 0;
  max-width: 22ch;
  color: #F7F8FA;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.03em;
}
#faq .faq-answer-current {
  margin: 16px 0 0;
  max-width: 42ch;
  color: color-mix(in srgb, #F7F8FA 72%, transparent);
  font-size: 1rem;
  line-height: 1.58;
}
#faq.is-changing .faq-answer-pane h3,
#faq.is-changing .faq-answer-current {
  animation: faq-in 380ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes faq-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Proof — continuous editorial numbers, not cards */
.studio-proof-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
  min-height: 0;
  height: 100%;
}
.studio-proof-visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  background: linear-gradient(145deg, #2a3a58, #152033);
  min-height: 0;
}
.studio-proof-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}
.studio-proof-visual span {
  position: absolute;
  left: 12px;
  bottom: 10px;
  color: color-mix(in srgb, #F7F8FA 62%, transparent);
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.studio-proof-metrics {
  display: grid;
  gap: 0;
  align-content: start;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
}
.studio-proof-metrics::-webkit-scrollbar { display: none; }
.studio-proof-metric {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: baseline;
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid color-mix(in srgb, #F7F8FA 12%, transparent);
}
.studio-proof-metric:first-child { border-top: 1px solid color-mix(in srgb, #F7F8FA 12%, transparent); }
.studio-proof-value {
  margin: 0;
  color: #F7F8FA;
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .92;
}
.studio-proof-label {
  margin: 0;
  color: #F7F8FA;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -.02em;
}
.studio-proof-note {
  margin: 6px 0 0;
  max-width: 36ch;
  color: color-mix(in srgb, #F7F8FA 55%, transparent);
  font-size: .9rem;
  line-height: 1.45;
}

/* Side modes — vertical only on desktop; fixed footprint (no grow) */
.studio-panel-side {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 4px 0 0 clamp(8px, 1vw, 16px);
  border-left: 1px solid color-mix(in srgb, #F7F8FA 12%, transparent);
  min-height: 0;
}
.studio-panel-modes {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}
.studio-panel-mode {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, #F7F8FA 12%, transparent);
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, #F7F8FA 55%, transparent);
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transform: none;
  box-shadow: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.studio-panel-mode-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #F7F8FA 30%, transparent);
  background: transparent;
}
.studio-panel-mode:hover,
.studio-panel-mode:focus-visible {
  color: #F7F8FA;
  border-color: color-mix(in srgb, #F7F8FA 28%, transparent);
  background: color-mix(in srgb, #F7F8FA 6%, transparent);
}
.studio-panel-mode[aria-selected="true"] {
  color: #F7F8FA;
  border-color: color-mix(in srgb, #3468ac 50%, transparent);
  background: color-mix(in srgb, #3468ac 22%, transparent);
  font-weight: 500;
}
.studio-panel-mode[aria-selected="true"] .studio-panel-mode-dot {
  border-color: #3468ac;
  background: #3468ac;
}

.studio-panel-jump,
.studio-panel-jump-link { display: none !important; }

@media (max-width: 860px) {
  #faq.studio-panel-band { padding: clamp(40px, 8vw, 64px) 0; }
  .studio-panel-container {
    width: min(100%, calc(100% - 24px));
  }
  .studio-panel-frame {
    /* Keep a locked height on small screens so mode switches never grow the card */
    --studio-h: clamp(560px, 78svh, 720px);
    height: var(--studio-h);
    min-height: var(--studio-h);
    max-height: var(--studio-h);
    padding: clamp(20px, 4.5vw, 26px) clamp(16px, 4vw, 22px) clamp(16px, 4vw, 22px);
    border-radius: 22px;
  }
  .studio-panel-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    height: 100%;
    min-height: 0;
  }
  .studio-panel-main {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .studio-panel-view {
    position: absolute;
    inset: 0;
    height: auto;
    overflow: auto;
    scrollbar-width: none;
  }
  .studio-panel-view::-webkit-scrollbar { display: none; }
  .studio-panel-view:not(.is-active) { display: none; }
  .studio-panel-side {
    order: -1;
    padding: 0 0 14px;
    border-left: 0;
    border-bottom: 1px solid color-mix(in srgb, #F7F8FA 12%, transparent);
  }
  .studio-panel-modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 4px;
    border: 1px solid color-mix(in srgb, #F7F8FA 14%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, #0b1734 18%, transparent);
  }
  .studio-panel-mode {
    justify-content: center;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0 6px;
    border-radius: 10px;
    border-color: transparent;
    font-size: .76rem;
  }
  .studio-panel-mode-dot { display: none; }
  #faq .faq-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  /* Compact horizontal question chips — avoids 8-row list crushing the answer */
  #faq .studio-panel-view[data-panel-view="faq"] .faq-index,
  #faq .faq-index {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-top: 0 !important;
    padding: 0 0 10px !important;
    -webkit-overflow-scrolling: touch;
    max-height: none !important;
  }
  #faq .faq-index button {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 0 !important;
    width: auto !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid color-mix(in srgb, #F7F8FA 14%, transparent) !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
  #faq .faq-index button strong { display: none !important; }
  #faq .faq-index button span {
    font-size: .62rem;
    letter-spacing: .1em;
  }
  #faq .faq-index button[aria-selected="true"] {
    border-color: color-mix(in srgb, #3468ac 55%, transparent);
    background: color-mix(in srgb, #3468ac 22%, transparent);
    color: #F7F8FA;
  }
  #faq .faq-index button[aria-selected="true"] strong { box-shadow: none; }
  #faq .faq-answer-pane {
    min-height: 0;
    overflow: auto;
    padding-top: 0;
  }
  #faq .faq-answer-pane h3 {
    font-size: clamp(1.15rem, 5vw, 1.45rem);
    max-width: 100%;
  }
  #faq .faq-answer-current {
    margin-top: 12px;
    font-size: .92rem;
    max-width: 100%;
  }
  .studio-proof-layout {
    grid-template-columns: 1fr;
    gap: 14px;
    height: 100%;
    min-height: 0;
    overflow: auto;
  }
  .studio-proof-visual {
    aspect-ratio: 16 / 10;
    max-height: 160px;
  }
  .studio-panel-head { max-width: 100%; }
  .studio-panel-head h2 {
    font-size: clamp(1.45rem, 6.5vw, 1.85rem);
  }
  .client-review blockquote {
    max-width: 100%;
    font-size: clamp(1.35rem, 5.5vw, 1.75rem);
  }
  .studio-panel-nav {
    grid-template-columns: 40px auto minmax(0, 1fr) 40px;
  }
}

/* ---- Footer + skyline: paper and water sit under rain; copy + buildings above. ---- */
.site-footer,
html[data-skin="nocturne"] .site-footer {
  --footer-night: #020617;
  position: relative;
  z-index: auto;
  isolation: auto;
  background: transparent !important;
  color: var(--dark-ink, #f4f0e7);
  padding: 0;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--footer-night);
}
.site-footer::before,
.site-footer::after,
.footer-stage,
.footer-stage-canvas {
  border-top: 0 !important;
  outline: 0 !important;
}
.site-footer > .footer-stars {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.footer-main {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(240px, .95fr) minmax(0, 1.55fr);
  gap: clamp(32px, 5vw, 72px);
  padding: 48px 32px;
  border-top: 0;
  background: transparent;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  /* Sans, matching the masthead wordmark — it was the only place the brand
     was set in the display serif. */
  font-family: var(--body);
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  line-height: 1;
}
.footer-brand .brand-mark {
  width: 36px;
  height: 36px;
  background: #F2F4F7 !important;
  background-image: none !important;
  -webkit-mask: url("assets/brand/logo.png") center / contain no-repeat;
  mask: url("assets/brand/logo.png") center / contain no-repeat;
}
.footer-about {
  margin: 24px 0 0;
  max-width: 34ch;
  color: color-mix(in srgb, var(--dark-ink, #f4f0e7) 68%, transparent);
  font-size: var(--type-body);
  line-height: 1.85;
}
.footer-copy {
  margin: 24px 0 0;
  color: color-mix(in srgb, var(--dark-ink, #f4f0e7) 42%, transparent);
  font-family: var(--mono);
  font-size: var(--type-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(180px, .95fr);
  gap: 24px;
  padding: 0;
  border: 0;
  align-items: start;
}
.site-footer .footer-col h3 {
  margin: 0 0 16px;
  color: color-mix(in srgb, var(--dark-ink, #f4f0e7) 48%, transparent);
  font-family: var(--mono);
  font-size: var(--type-meta);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-footer .footer-col ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer .footer-col a {
  color: color-mix(in srgb, var(--dark-ink, #f4f0e7) 82%, transparent);
  font-size: var(--type-meta);
  text-decoration: none;
}
.site-footer .footer-col a:hover { color: #fff; }
.footer-col--end {
  justify-self: end;
  text-align: left;
  width: min(100%, 240px);
}
.footer-cta-stack {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-top: 28px;
}
.footer-cta-stack .footer-email {
  color: color-mix(in srgb, var(--dark-ink, #f4f0e7) 62%, transparent);
  font-size: .86rem;
  text-decoration: none;
}
.footer-cta-stack .footer-email:hover { color: #fff; }
.footer-stage {
  position: relative;
  z-index: 5;
  height: clamp(280px, 42vw, 460px);
  min-height: clamp(280px, 42vw, 460px);
  max-height: clamp(280px, 42vw, 460px);
  margin-top: -72px;
  overflow: hidden;
  contain: size layout;
  pointer-events: auto;
  touch-action: pan-y;
  /* Same night as the footer copy above — skyline continues the band */
  background: transparent;
}
.footer-stage.is-dragging { cursor: grabbing; }
.footer-stage::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(180deg, var(--footer-night, #020617) 0%, rgba(2, 6, 23, 0) 100%);
}
.footer-meteors { display: none !important; }
.footer-stage-canvas {
  position: absolute !important;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: 100%;
  background: transparent;
  pointer-events: none;
}
.footer-stage.is-static {
  background:
    linear-gradient(180deg, transparent 48%, rgba(90, 120, 160, .05) 78%, transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(142, 171, 216, .07) 14%,
      transparent 22%,
      rgba(142, 171, 216, .08) 40%,
      transparent 50%,
      rgba(100, 140, 190, .06) 62%,
      transparent 72%,
      rgba(142, 171, 216, .08) 86%,
      transparent 100%);
}
@media (max-width: 720px) {
  /* Mobile skyline: own band — ~45% of the viewport so buildings read, not a thin strip. */
  .footer-stage {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    margin-top: -24px;
  }
  .footer-stage::before {
    height: 64px;
  }
}
@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col--end {
    grid-column: 1 / -1;
    justify-self: start;
    width: auto;
  }
  .footer-brand { font-size: clamp(1.4rem, 6vw, 1.85rem); }
}
@media (max-width: 560px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; }
}

/* ---- Difference: merged into #compare story; slider lives in compare-taste.css ---- */

/* ---- Pack quantity controls ---- */
.pack-controls {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.pack-slider {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 0.88rem;
}
.pack-slider span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pack-slider strong {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: -0.03em;
  text-transform: none;
}
.pack-slider input[type="range"] {
  width: 100%;
  accent-color: var(--action, var(--ink));
  cursor: pointer;
}
.pack-addon-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.pack--scoped .pack-summary { margin-bottom: 8px; }

#partnership { display: none !important; }

/* ---- Case studies ---- */
#cases.cases {
  padding-block: clamp(56px, 6vw, 92px);
}

.cases-shell {
  display: grid;
  gap: clamp(28px, 3.2vw, 44px);
}

.cases-head {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.55fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
}

.cases-head-main h2 {
  max-width: 14ch;
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: clamp(2.7rem, 5vw, 4.4rem);
  font-weight: var(--heading-weight, 400);
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.cases-head-main h2 em {
  font-style: italic;
  font-weight: inherit;
}

.cases-head-main > p {
  max-width: 46ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.5;
}

.cases-led {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  max-width: 34ch;
  justify-self: end;
}

.cases-led-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--accent, #5367ee);
}

.cases-led-mark svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.4;
}

.cases-led p {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-size: 0.9rem;
  line-height: 1.45;
}

.cases-led strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.case-study-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.case-study {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: clamp(18px, 1.8vw, 24px);
  background: color-mix(in srgb, var(--surface-alt, var(--surface)) 55%, var(--paper));
  box-shadow: 0 20px 48px color-mix(in srgb, var(--ink) 6%, transparent);
}

.case-study--industrial {
  background: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 88%, #000);
}

.case-study-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--surface-alt, var(--surface)) 72%, var(--paper));
}

.case-study--industrial .case-study-media {
  background: color-mix(in srgb, var(--ink) 88%, #000);
}

.case-study-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms cubic-bezier(.16, 1, .3, 1);
}

.case-study--consumer .case-study-media img { object-position: 50% 54%; }
.case-study--industrial .case-study-media img { object-position: 48% 54%; }
.case-study:hover .case-study-media img { transform: scale(1.03); }

.case-study-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper, #F7F8FA) 88%, transparent);
  color: var(--ink);
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.case-study--industrial .case-study-chip {
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  color: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
}

.case-study-body {
  display: grid;
  align-content: start;
  gap: 0;
  padding: clamp(18px, 2vw, 24px);
}

.case-study-title {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.case-study--industrial .case-study-title {
  color: var(--paper);
}

.case-study-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.case-study--industrial .case-study-meta {
  border-top-color: color-mix(in srgb, var(--paper) 14%, transparent);
}

.case-study-meta > div {
  display: grid;
  grid-template-columns: minmax(72px, 0.34fr) minmax(0, 1fr);
  gap: 12px 16px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.case-study--industrial .case-study-meta > div {
  border-bottom-color: color-mix(in srgb, var(--paper) 12%, transparent);
}

.case-study-meta dt {
  color: var(--muted);
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.case-study--industrial .case-study-meta dt {
  color: color-mix(in srgb, var(--paper) 58%, transparent);
}

.case-study-meta dd {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  font-size: clamp(0.78rem, 0.92vw, 0.86rem);
  line-height: 1.35;
}

.case-study--industrial .case-study-meta dd {
  color: color-mix(in srgb, var(--paper) 86%, transparent);
}

.case-study-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 70%, transparent);
}

.case-study--industrial .case-study-link {
  color: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}

.case-study-link:hover {
  color: var(--action, var(--accent));
}

.cases-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 28px);
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: clamp(14px, 1.4vw, 18px);
  background: color-mix(in srgb, var(--surface-alt, #F2F4F7) 88%, transparent);
}

.cases-bar li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 0 clamp(16px, 2vw, 24px);
  border-right: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.cases-bar li:first-child { padding-left: 0; }
.cases-bar li:last-child {
  padding-right: 0;
  border-right: 0;
}

.cases-bar-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--accent, #5367ee);
}

.cases-bar-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.4;
}

.cases-bar strong {
  display: block;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cases-bar p {
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-size: 0.84rem;
  line-height: 1.4;
}

html[data-skin="nocturne"] .case-study--consumer {
  background: color-mix(in srgb, var(--surface) 92%, var(--paper));
}

html[data-skin="nocturne"] .cases-bar {
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, var(--paper));
}

@media (max-width: 980px) {
  .cases-head,
  .case-study-grid {
    grid-template-columns: 1fr;
  }

  .cases-led {
    justify-self: start;
  }

  .cases-bar {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cases-bar li {
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    padding-bottom: 18px;
  }

  .cases-bar li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

@media (max-width: 720px) {
  .case-study-meta > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* =============================================================
   HERO SKY — two stills + pointer parallax (media sits on top)
   ============================================================= */

.hero {
  --hero-sky-fallback: #F7F8FA;
}
html[data-skin="nocturne"] .hero {
  --hero-sky-fallback: #0f1420;
}

/* Hero pulls under the sticky masthead so the sky reads through a
   transparent menu bar. Content padding restores the header offset. */
.hero.has-sky,
.hero.has-sky-fallback {
  margin-top: calc(var(--header, 72px) * -1);
  min-height: 100svh;
  padding-top: var(--header, 72px);
  padding-bottom: clamp(28px, 4vh, 48px);
  background:
    radial-gradient(ellipse 26% 20% at 50% 34%, rgba(255, 220, 175, 0.28) 0%, transparent 68%),
    linear-gradient(180deg, #cbd8eb 0%, #e6eaf1 42%, #f0f3f7 72%, #f5f7fa 100%);
}

html[data-skin="nocturne"] .hero.has-sky,
html[data-skin="nocturne"] .hero.has-sky-fallback {
  background:
    radial-gradient(ellipse 26% 20% at 50% 48%, rgba(160, 190, 255, 0.28) 0%, transparent 72%),
    linear-gradient(180deg, #060912 0%, #0c1220 40%, #141c2c 100%);
}

@media (max-width: 860px) {
  .hero.has-sky,
  .hero.has-sky-fallback {
    padding-top: calc(var(--header, 72px) + clamp(8px, 1.6vh, 18px));
  }
}

.hero.has-sky::before,
.hero.has-sky::after,
.hero.has-sky-fallback::before,
.hero.has-sky-fallback::after {
  opacity: 0 !important;
}

.hero-sky {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.hero-sky-layer {
  position: absolute;
  inset: -8% -12% -4%;
  width: 124%;
  height: 116%;
  /* Bleed past both edges so plate crops never leave a vertical seam */
  margin: 0;
  object-fit: cover;
  object-position: center 72%;
  opacity: 0.86;
  transform: translate3d(0, 0, 0) scale(1.12);
  transform-origin: center bottom;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}
.hero-sky-layer--far { opacity: 0.48; }

.hero-sky-layer--night { display: none; }
html[data-skin="nocturne"] .hero-sky-layer--day { display: none; }
html[data-skin="nocturne"] .hero-sky-layer--night { display: block; }
html[data-skin="nocturne"] .hero-sky-layer--far { opacity: 0.67; }
html[data-skin="nocturne"] .hero-sky { background: #0a1220; }

.hero-sky-layer--far {
  z-index: 0;
  /* Keep the god-rays in the sky; don't dump peach onto the CTA clouds. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 38%,
    rgba(255, 255, 255, 0.7) 56%,
    rgba(255, 255, 255, 0.22) 78%,
    rgba(255, 255, 255, 0.06) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 38%,
    rgba(255, 255, 255, 0.7) 56%,
    rgba(255, 255, 255, 0.22) 78%,
    rgba(255, 255, 255, 0.06) 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

html[data-skin="nocturne"] .hero-sky-layer--far {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Crest is baked into the near plate. A steep CSS mask stair-steps
   against the sky and can punch a checker through the far plate.
   Keep only a soft top fade so the bitmap never hard-cuts the zenith. */
.hero-sky-near-mask {
  position: absolute;
  left: -5%;
  right: -5%;
  top: 18%;
  bottom: -1px;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 12%,
    rgba(255, 255, 255, 0.88) 24%,
    #fff 36%,
    #fff 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 12%,
    rgba(255, 255, 255, 0.88) 24%,
    #fff 36%,
    #fff 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.hero-sky-layer--near {
  z-index: 2;
  inset: -6% -8% -2%;
  width: 116%;
  height: 112%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.88;
  filter: blur(0.35px);
}

/* Extra ~25% presence on the washed lower-mid deck only (day).
   Same plate, radial-masked to the CTA band: one copy lifts alpha,
   one multiply copy restores a little shadow so it does not bleach. */
.hero-sky-layer--near-boost,
.hero-sky-layer--near-weight {
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  filter: none;
  -webkit-mask-image: radial-gradient(
    ellipse 88% 72% at 50% 88%,
    #fff 0%,
    rgba(255, 255, 255, 0.92) 38%,
    rgba(255, 255, 255, 0.42) 72%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 88% 72% at 50% 88%,
    #fff 0%,
    rgba(255, 255, 255, 0.92) 38%,
    rgba(255, 255, 255, 0.42) 72%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero-sky-layer--near-boost {
  opacity: 0.32;
}
.hero-sky-layer--near-weight {
  opacity: 0.16;
  mix-blend-mode: multiply;
}

html[data-skin="nocturne"] .hero-sky-near-mask {
  -webkit-mask-image: none;
  mask-image: none;
}

html[data-skin="nocturne"] .hero-sky-near-mask::after {
  content: none;
}

html[data-skin="nocturne"] .hero-sky-layer--near-boost,
html[data-skin="nocturne"] .hero-sky-layer--near-weight {
  display: none;
}

html[data-skin="nocturne"] .hero-sky-layer--near {
  opacity: 0.67;
  filter: blur(0.55px);
}

.hero.has-sky .hero-sky { opacity: 1; }
.hero.has-sky-fallback .hero-sky-layer,
.hero.has-sky-fallback .hero-sky-near-mask { display: none; }

.hero.has-sky .container,
.hero.has-sky .hero-grid,
.hero.has-sky-fallback .container,
.hero.has-sky-fallback .hero-grid {
  position: relative;
  z-index: 2;
}

/* Soft peach halo so the cream shoe separates from the cloud deck. */
.hero.has-sky .hero-haze {
  top: 34%;
  width: min(42vw, 520px);
  aspect-ratio: 1.25;
  background:
    radial-gradient(ellipse at 50% 48%,
      rgba(247, 248, 250, 0.55) 0%,
      rgba(210, 220, 240, 0.18) 36%,
      transparent 72%);
  filter: blur(34px);
  opacity: 0.42;
  mix-blend-mode: normal;
}

.hero.has-sky-fallback .hero-haze {
  top: 48%;
  width: min(34vw, 420px);
  aspect-ratio: 1.15;
  background:
    radial-gradient(ellipse at 50% 46%,
      rgba(255, 236, 190, 0.7) 0%,
      rgba(255, 200, 120, 0.28) 28%,
      rgba(255, 180, 90, 0.1) 48%,
      transparent 72%);
  filter: blur(32px) saturate(1.08);
  opacity: 0.72;
  mix-blend-mode: screen;
}

html[data-skin="nocturne"] .hero.has-sky .hero-haze {
  top: 44%;
  width: min(42vw, 520px);
  aspect-ratio: 1.05;
  background:
    radial-gradient(ellipse 80% 70% at 50% 58%,
      rgba(210, 225, 255, 0.55) 0%,
      rgba(160, 190, 255, 0.28) 28%,
      rgba(100, 140, 210, 0.12) 52%,
      transparent 74%),
    radial-gradient(ellipse 110% 80% at 50% 72%,
      rgba(180, 205, 255, 0.32) 0%,
      rgba(120, 160, 230, 0.12) 40%,
      transparent 70%);
  filter: blur(34px) saturate(1.08);
  mix-blend-mode: screen;
  opacity: 0.78;
}

html[data-skin="nocturne"] .hero.has-sky-fallback .hero-haze {
  background:
    radial-gradient(ellipse at 50% 46%,
      rgba(200, 220, 255, 0.55) 0%,
      rgba(140, 170, 255, 0.22) 32%,
      rgba(100, 130, 210, 0.08) 52%,
      transparent 74%);
  filter: blur(34px) saturate(1.05);
  opacity: 0.78;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  .hero-sky-layer {
    will-change: auto;
    transform: none;
  }
}

@media (max-width: 860px) {
  .hero.has-sky-fallback .hero-haze {
    top: 42%;
    width: min(58vw, 360px);
    filter: blur(26px);
  }
}

@keyframes hero-cat-left {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-cat-right {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-rail-in {
  from { opacity: 0; }
  to { opacity: 1; }
}







/* Beat legacy styles.css client-review carousel rules inside the studio panel */
#faq .client-review-stage,
#faq .client-review-stage[data-client-reviews] {
  position: relative !important;
  display: block !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#faq .client-review {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(22px, 3vw, 36px) !important;
  align-content: center !important;
  justify-items: start !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
}
#faq .client-review.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}
#faq .client-review blockquote {
  max-width: min(22ch, 100%) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #F7F8FA !important;
  font-family: var(--display) !important;
  font-size: clamp(1.7rem, 3vw, 2.55rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.035em !important;
  line-height: 1.1 !important;
}
#faq .client-review footer,
#faq .client-review-identity {
  margin: 0 !important;
  color: inherit !important;
}

/* Edge seam kill — no designed vertical hairlines at the viewport rim */
html, body, .hero, .hero-sky, .hero-sky-layer, .hero-sky-near-mask {
  border: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
}
.hero-sky {
  left: -4vw !important;
  right: -4vw !important;
  width: auto !important;
}
.hero-sky-layer {
  left: -8% !important;
  right: -8% !important;
  width: 116% !important;
  max-width: none !important;
}

.site-footer .footer-main {
  padding: 48px 32px;
}

.site-footer .footer-bottom,
.footer-bottom {
  font-size: var(--type-meta);
}

/* One-screen mobile hero: keep the client ribbon below the fold, and
   reserve two lede lines so See the work does not jump between services. */
@media (max-width: 860px) {
  html .hero.has-sky,
  html .hero.has-sky-fallback {
    min-height: 100svh;
    height: 100svh;
    padding-bottom: 16px;
    box-sizing: border-box;
  }
  html .hero.has-sky .hero-grid,
  html .hero.has-sky-fallback .hero-grid {
    display: block;
    min-height: 0;
  }
  html .hero.has-sky .hero-showcase-wrap,
  html .hero.has-sky-fallback .hero-showcase-wrap {
    margin-top: 2px;
  }
  html .hero.has-sky .hero-scene {
    padding-top: 8px;
  }
  html .hero.has-sky {
    --hero-stage-h: min(52svh, 420px);
  }
  html .hero.has-sky .hero-product-stage {
    width: min(92%, 420px);
    height: var(--hero-stage-h);
    max-height: var(--hero-stage-h);
    margin-inline: auto;
  }
  html .hero.has-sky .hero-actions,
  html .hero.has-sky-fallback .hero-actions {
    margin-top: 6px;
  }
  html .hero .hero-readout-desc {
    min-height: calc(1.4em * 2);
  }
}