:root {
      /* Cool light-grey editorial field — not sterile white, not beige. */
      color-scheme: light;
      --paper: #F2EFE9;
      --surface: #ececee;
      --ink: #101014;
      --muted: #3d3d47;
      --accent: #3468ac;
      --accent-2: #244b7a;
      /* Button ink is the page's own paper. design-lab.js derives it that way
         at runtime and writes it inline, so index.html has always painted
         #F2EFE9 here while this file claimed #e6e6e6 — which left every page
         that does not load the lab (the catalogues) a shade out of step. */
      --accent-ink: #F2EFE9;
      --action: #101014;
      --action-hover: #213e79;
      /* Matches site/liquid.js light-skin hover mid (#133cb8) — selected hero orbs use this. */
      --cta-hover: #3357d7; /* perceived See-the-work liquid hover fill */
      --action-ink: #F2EFE9;
      --lime: var(--accent);
      --hero-accent: var(--accent);
      --dark: #020617;
      --dark-2: #0b1734;
      --dark-ink: #F7F8FA;
      --proof-bg: #e0e0e2;
      --proof-surface: #ececee;
      --proof-ink: #101014;
      --line: rgba(2, 6, 23, 0.10);
      --dark-line: rgba(247, 248, 250, 0.14);
      --shadow: 0 28px 70px rgba(11, 23, 52, 0.13);
      --grid-size: 52px;
      --corner: 20px;
      --depth-x: 20px;
      --depth-y: 24px;
      --heading-track: -0.045em;
      --type-micro: 11px;
      --type-caption: 12px;
      --type-meta: 13px;
      --type-callout: 15px;
      --type-body: 17px;
      --type-lede: 20px;
      --type-card: 22px;
      --type-sub: 28px;
      --type-quote: 34px;
      --type-studio: 40px;
      --type-h2: clamp(40px, 3.8vw, 56px);
      --type-h1: clamp(48px, 4.4vw, 64px);
      --hero-title-size: var(--type-h1);
      --section-display-size: var(--type-h2);
      --section-display-size-contained: clamp(34px, 3.2vw, 48px);
      --body-leading: 1.85;
      --section-space: clamp(72px, 7.5vw, 108px);
      --hero-title-weight: 400;
      --heading-weight: 400;
      --ui-radius: 999px;
      --motion-distance: 16;
      --motion-tilt: 2.2;
      --motion-duration: 360ms;
      --motion-ease: cubic-bezier(.16, 1, .3, 1);
      --ease-out: cubic-bezier(.16, 1, .3, 1);
      --ease-io: cubic-bezier(.65, 0, .35, 1);
      /* Canela Deck is the intended display face. It is not licensed in this
         repo, so Instrument Serif (Google Fonts) is the legal webfont fallback.
         Locally installed Canela Deck will be used when present. */
      --display: "Canela Deck", "Instrument Serif", Georgia, serif;
      --body: "DM Sans", sans-serif;
      --mono: "IBM Plex Mono", monospace;
      --max: 1340px;
      --gutter: clamp(24px, 3.6vw, 56px);
      --header: 72px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    @media (prefers-reduced-motion: no-preference) {
      html { scroll-behavior: smooth; }
    }
    html { scroll-padding-top: calc(var(--header) + 18px); overflow-x: clip; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--body);
      font-size: var(--type-body);
      line-height: var(--body-leading);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* ============================================================= Subtle Film Grain */
    #grain {
      position: fixed;
      inset: 0;
      z-index: 99;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
      opacity: 0.6;
      mix-blend-mode: overlay;
    }

    #vignette {
      position: fixed;
      inset: 0;
      z-index: 98;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(4, 9, 20, 0.25) 100%);
    }

    html[data-skin="kage"] #vignette {
      background: radial-gradient(120% 90% at 50% 40%, transparent 70%, rgba(120, 105, 85, 0.04) 100%);
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .hero-eyebrow .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent);
      animation: dot-pulse 2.4s ease-in-out infinite alternate;
    }

    @keyframes dot-pulse {
      0% { transform: scale(0.85); opacity: 0.7; }
      100% { transform: scale(1.2); opacity: 1; }
    }

    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { color: inherit; font: inherit; }
    button, select, a { touch-action: manipulation; }
    button, summary { cursor: pointer; }
    h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
    ul { padding: 0; list-style: none; }
    h1, h2, h3 { font-family: var(--display); font-weight: var(--heading-weight, 400); letter-spacing: var(--heading-track); text-wrap: balance; }
    :focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; box-shadow: 0 0 0 6px var(--ink); }
    main:focus { box-shadow: none; }
    main:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; box-shadow: 0 0 0 6px var(--ink); }
    ::selection { background: var(--lime); color: var(--ink); }

    .skip-link {
      position: fixed;
      z-index: 200;
      top: 10px;
      left: 10px;
      padding: 10px 14px;
      background: var(--lime);
      color: var(--ink);
      font-weight: 700;
      transform: translateY(-160%);
    }
    .skip-link:focus { transform: none; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .container { width: min(100%, calc(var(--max) + 2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter); }
    .section { padding-block: var(--section-space); }
    .section--compact { padding-block: clamp(50px, 6vw, 84px); }
    .section--dark { background: var(--dark); color: var(--dark-ink); }
    .section--dark .muted { color: color-mix(in srgb, var(--dark-ink) 68%, transparent); }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-family: var(--mono);
      font-size: var(--type-micro);
      font-weight: 500;
      letter-spacing: 0.18em;
      line-height: 1.4;
      text-transform: uppercase;
    }
    .eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); content: ""; flex: none; }
    .section--dark .eyebrow { color: color-mix(in srgb, var(--dark-ink) 65%, transparent); }
    .packs-head,
    .section-heading {
      display: block;
      padding-top: 24px;
      margin-bottom: clamp(24px, 4vw, 48px);
      border-top: 1px solid var(--line);
    }
    .section--dark .packs-head,
    .section--dark .section-heading { border-color: var(--dark-line); }
    .packs-head h2,
    .section-heading h2 {
      max-width: 32ch;
      margin-top: 16px;
      font-size: var(--section-display-size);
      line-height: 1.04;
      letter-spacing: -0.04em;
    }
    .packs-head p,
    .section-heading p {
      max-width: 58ch;
      margin-top: 16px;
      color: var(--muted);
      font-size: var(--type-body);
      line-height: 1.85;
    }
    .muted { color: var(--muted); }

    .site-header {
      position: sticky;
      z-index: 100;
      top: 0;
      height: var(--header);
      border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
      background: color-mix(in srgb, var(--paper) 86%, transparent);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: border-color 240ms ease, background-color 240ms ease;
    }
    .header-inner { display: flex; height: 100%; align-items: center; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body), "DM Sans", system-ui, sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
    .brand-mark {
      position: relative;
      display: inline-block;
      width: 26px;
      height: 26px;
      background: url("assets/brand/logo.png") center / contain no-repeat !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      flex-shrink: 0;
    }
    .brand-mark::before,
    .brand-mark::after { display: none !important; content: none !important; }
    .site-nav { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 24px); margin-left: auto; }
    
    /* Dual-Layer Nav Links */
    .site-nav .nav-link {
      position: relative;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      display: block;
      height: 20px;
      line-height: 20px;
      overflow: hidden;
      transition: color 240ms ease;
    }
    .site-nav .nav-link span {
      display: block;
      height: 20px;
      line-height: 20px;
      transition: transform 0.5s var(--ease-out), color 0.3s;
    }
    .site-nav .nav-link .alt {
      position: absolute;
      inset: 0;
      transform: translate3d(0, 100%, 0);
      color: var(--accent);
      letter-spacing: 0.2em;
      font-weight: 700;
    }
    .site-nav .nav-link:hover span { transform: translate3d(0, -100%, 0); }
    .site-nav .nav-link:hover .alt { transform: none; }
    .site-nav .nav-contact {
      margin-left: 12px;
      padding: 9px 20px;
      border-radius: 999px;
      background: var(--ink);
      color: var(--paper);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      transition: transform 200ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
    }
    .site-nav .nav-contact:hover,
    .site-nav .nav-contact:focus-visible {
      transform: translateY(-2px);
      background: var(--cta-hover, #3357d7);
      border-color: var(--cta-hover, #3357d7);
      box-shadow: none;
      filter: none;
      color: var(--action-ink);
    }
    .shader-surface { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: radial-gradient(circle at 18% 35%, color-mix(in srgb, var(--hero-accent) 28%, transparent), transparent 38%), radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--paper) 16%, transparent), transparent 42%); pointer-events: none; }
    .button[data-shader-button] .shader-surface { z-index: 1; opacity: .18; transform: scale(1.08); transition: opacity 260ms ease, transform 600ms cubic-bezier(.16,1,.3,1); }
    .button[data-shader-button]:hover .shader-surface,
    .button[data-shader-button]:focus-visible .shader-surface { opacity: .38; transform: scale(1.18); }
    .button[data-shader-button]:active .shader-surface { opacity: .56; transform: scale(1.28); }
    .button[data-liquid-button],
    .button {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid var(--action);
      background: var(--action);
      color: var(--action-ink);
      transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color 220ms ease, box-shadow 220ms ease;
    }
    .button:hover,
    .button:focus-visible {
      transform: translateY(-2px);
      background: var(--action-hover);
      box-shadow: 0 12px 32px -4px color-mix(in srgb, var(--accent) 35%, transparent);
    }
    .button .button-copy { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; }
    .button[data-liquid-button] {
      border: 0;
      background: var(--action);
      box-shadow: 0 10px 24px -4px color-mix(in srgb, var(--ink) 20%, transparent);
      transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease;
    }
    .button[data-liquid-button].has-liquid {
      background: transparent !important;
      border: 0 !important;
      border-color: transparent !important;
      box-shadow: none !important;
      outline: none !important;
    }
    .button[data-liquid-button]:hover,
    .button[data-liquid-button]:focus-visible {
      box-shadow: 0 14px 34px -4px rgba(61, 132, 255, 0.48);
    }
    .button[data-liquid-button] .button-copy {
      color: #faf7f2;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    }
    html[data-skin="nocturne"] .button[data-liquid-button] {
      box-shadow: 0 10px 28px -4px rgba(71, 138, 255, 0.35);
    }
    html[data-skin="nocturne"] .button[data-liquid-button]:hover,
    html[data-skin="nocturne"] .button[data-liquid-button]:focus-visible {
      box-shadow: 0 14px 36px -4px rgba(148, 199, 255, 0.6);
    }
    html[data-skin="nocturne"] .button[data-liquid-button] .button-copy {
      color: #061026;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.25);
    }
    html.is-train-scrolling {
      scroll-behavior: auto !important;
    }
    body.is-train-transition {
      pointer-events: none;
    }
    body.is-train-transition main {
      transition: filter 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
      filter: contrast(1.05) saturate(1.05);
    }
    .scroll-fade-edge {
      position: fixed;
      z-index: 95;
      top: var(--header);
      left: 0;
      right: 0;
      height: 54px;
      pointer-events: none;
      background: linear-gradient(to bottom, var(--paper) 0%, color-mix(in srgb, var(--paper) 68%, transparent) 40%, color-mix(in srgb, var(--paper) 15%, transparent) 78%, transparent 100%);
    }
    .hero-grid,
    .credibility-layout,
    .client-proof-layout,
    #work > .container,
    .outcome-shell,
    #studio > .container,
    #packs > .container,
    #process > .container,
    #partnership > .container,
    #faq > .container,
    #faq .studio-panel-container,
    .site-footer > .container { position: relative; z-index: 3; }
    @media (prefers-reduced-motion: reduce) {
      .button[data-shader-button] .shader-surface,
      .button[data-shader-button]::before,
      .button[data-liquid-button] .liquid-surface,
      .section-shader { animation: none; transition: none; }
    }

    .hero { position: relative; min-height: auto; isolation: isolate; overflow: hidden; padding-top: clamp(8px, 1.2vw, 16px); padding-bottom: clamp(24px, 3vw, 42px); }
    .hero::after { position: absolute; z-index: -1; left: 50%; top: 61%; width: min(82vw, 1080px); aspect-ratio: 1.7; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--lime) 16%, transparent), transparent 68%); filter: blur(18px); transform: translate(-50%, -50%); content: ""; pointer-events: none; }
    .hero-grid { position: relative; min-height: calc(100svh - var(--header) - clamp(8px, 1.2vw, 16px) - clamp(24px, 3vw, 42px)); display: grid; grid-template-rows: auto minmax(500px, 1fr); }
    .hero-copy { position: relative; z-index: 6; text-align: center; }
    .hero-kicker { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; font-family: var(--mono); font-size: var(--type-micro); letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
    .hero-kicker i { width: 6px; height: 6px; background: var(--lime); }
    .hero h1 { max-width: 24ch; margin-inline: auto; font-size: var(--hero-title-size); font-weight: var(--hero-title-weight); letter-spacing: -.065em; line-height: .88; text-wrap: balance; }
    .hero h1 span { display: inline; color: var(--ink); }
    .hero h1 span:last-child { margin-left: .08em; color: transparent; -webkit-text-stroke: 1.65px var(--ink); }
    .hero-intro { max-width: 70ch; margin: 16px auto 0; font-size: var(--type-body); line-height: 1.85; }
    .hero .hero-actions { position: absolute; z-index: 8; left: 50%; bottom: 0; display: flex; justify-content: center; transform: translateX(-50%); }
    .hero-showcase-wrap { min-width: 0; min-height: clamp(500px, min(46vw, calc(100svh - var(--header) - 255px)), 640px); margin-top: 4px; perspective: 1600px; }
    .hero-showcase { position: relative; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d; }
    .hero-scene { --hero-x-main: 0px; --hero-y-main: 0px; --hero-rx: 0deg; --hero-ry: 0deg; position: absolute; inset: 0; }
    .hero-haze { position: absolute; z-index: 0; left: 50%; top: 48%; width: min(76vw, 960px); aspect-ratio: 1.9; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--surface) 78%, transparent) 0 20%, color-mix(in srgb, var(--lime) 16%, transparent) 42%, transparent 72%); filter: blur(9px); transform: translate(-50%, -50%); pointer-events: none; }
    .hero-orbit { display: none !important; }
    .hero-orbit::before, .hero-orbit::after { position: absolute; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 50%; content: ""; }
    .hero-orbit::before { inset: 10%; }
    .hero-orbit::after { inset: 24%; border-color: color-mix(in srgb, var(--lime) 62%, transparent); }
    .hero-product-stage { appearance: none; position: absolute; z-index: 3; left: 50%; top: 49%; width: min(65vw, 860px); aspect-ratio: 1.5; padding: 0; opacity: 1; border: 0; background: transparent; color: inherit; cursor: pointer; filter: none; transform: translate(-50%, -50%); transform-style: preserve-3d; transition: opacity 540ms ease, filter 540ms ease; }
    .hero-product-stage:disabled { cursor: wait; }
    .hero-product-stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
    .hero-product-image, .hero-product-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
    .hero-product-image { z-index: 2; filter: drop-shadow(0 18px 16px rgba(120,105,85,.10)) drop-shadow(0 6px 6px rgba(120,105,85,.05)); transform: rotate(-2deg) scale(1); transition: filter var(--motion-duration) ease, transform var(--motion-duration) var(--motion-ease); }
    .hero-product-ghost { z-index: 1; opacity: 0; filter: grayscale(1) blur(1px); transform: translate3d(0, 0, -30px) scale(.9); transition: opacity var(--motion-duration) ease, transform var(--motion-duration) var(--motion-ease); }
    .hero-product-ghost--two { transform: translate3d(0, 0, -60px) scale(.82); }
    .hero-play { position: absolute; z-index: 4; left: 50%; top: 50%; width: 62px; aspect-ratio: 1; display: grid; place-items: center; opacity: 0; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--surface) 74%, transparent); box-shadow: 0 12px 34px rgba(17,19,15,.12); backdrop-filter: blur(12px); transform: translate(-50%, -50%) scale(.86); transition: opacity 180ms ease, transform var(--motion-duration) var(--motion-ease); pointer-events: none; }
    .hero-play::after { width: 0; height: 0; margin-left: 4px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid var(--ink); content: ""; }
    .hero-swatch-rail { position: absolute; z-index: 4; right: 18%; top: 31%; display: grid; gap: 9px; opacity: 0; transform: translateX(16px); transition: opacity 180ms ease, transform var(--motion-duration) var(--motion-ease); pointer-events: none; }
    .hero-swatch-rail span { width: 26px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 50%; background: var(--swatch); box-shadow: 0 7px 16px rgba(17,19,15,.1); }
    .hero-viewfinder { position: absolute; z-index: 4; left: 50%; top: 49%; width: min(33vw, 390px); aspect-ratio: .74; opacity: 0; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: clamp(20px, 3vw, 38px); box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--surface) 56%, transparent), 0 18px 42px rgba(17,19,15,.08); transform: translate(-50%, -50%) scale(.92); transition: opacity 180ms ease, transform var(--motion-duration) var(--motion-ease); pointer-events: none; }
    .hero-viewfinder::before { position: absolute; left: 50%; top: 12px; width: 22%; height: 5px; border-radius: 99px; background: var(--ink); opacity: .34; transform: translateX(-50%); content: ""; }
    .hero-viewfinder::after { position: absolute; left: 50%; bottom: 12px; width: 34px; aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 50%; background: color-mix(in srgb, var(--surface) 72%, transparent); content: ""; transform: translateX(-50%); }
    .hero-scene[data-mode="film"] .hero-product-image { transform: rotate(-4deg) scale(.98); }
    .hero-scene[data-mode="film"] .hero-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .hero-scene[data-mode="imagery"] .hero-product-image { transform: none; }
    .hero-scene[data-mode="3d"] .hero-product-image { transform: rotate(-2deg) scale(.94) translateY(6px); }
    .hero-scene[data-mode="3d"] .hero-product-ghost { opacity: .16; transform: translate3d(-8%, -16%, -34px) scale(.88); }
    .hero-scene[data-mode="3d"] .hero-product-ghost--two { opacity: .09; transform: translate3d(10%, 17%, -68px) scale(.78); }
    .hero-scene[data-mode="configurator"] .hero-product-image { transform: rotate(2deg) scale(1.02); }
    .hero-scene[data-mode="configurator"] .hero-swatch-rail { opacity: 1; transform: none; }
    .hero-scene[data-mode="ar"] .hero-product-image { transform: rotate(-2deg) scale(.83); }
    .hero-scene[data-mode="ar"] .hero-viewfinder { opacity: .88; transform: translate(-50%, -50%) scale(1); }
    .hero-product-stage:hover:not(:disabled) .hero-product-image, .hero-product-stage:focus-visible .hero-product-image { filter: drop-shadow(0 22px 18px rgba(120,105,85,.12)) drop-shadow(0 8px 8px rgba(120,105,85,.06)) brightness(1.025); }
    .hero-meta, .hero-utility, .hero-source-overlay { position: absolute; z-index: 6; }
    .hero-meta { left: 22%; top: 5%; display: inline-flex; min-height: 40px; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: var(--ui-radius); background: color-mix(in srgb, var(--surface) 68%, transparent); box-shadow: 0 10px 36px rgba(17,19,15,.06); backdrop-filter: blur(14px); font-family: var(--mono); font-size: .59rem; letter-spacing: .1em; text-transform: uppercase; }
    .hero-meta::before { width: 7px; height: 7px; background: var(--lime); content: ""; }
    .hero-utility { right: 22%; top: 5%; display: flex; gap: 8px; }
    .hero-input-toggle { min-height: 44px; padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: var(--ui-radius); background: color-mix(in srgb, var(--surface) 68%, transparent); box-shadow: 0 10px 36px rgba(17,19,15,.06); backdrop-filter: blur(14px); font-family: var(--mono); font-size: .59rem; letter-spacing: .1em; text-transform: uppercase; }
    .hero-input-toggle[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
    .hero-sound-toggle { position: relative; width: 44px; height: 44px; display: grid; flex: 0 0 44px; place-items: center; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: var(--ui-radius); background: color-mix(in srgb, var(--surface) 68%, transparent); box-shadow: 0 10px 36px rgba(17,19,15,.06); color: var(--ink); backdrop-filter: blur(14px); }
    .hero-sound-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
    .hero-sound-toggle .hero-sound-wave { transition: opacity 160ms ease; }
    .hero-sound-toggle::after { position: absolute; width: 20px; height: 1.5px; opacity: 0; background: currentColor; transform: rotate(-45deg); transition: opacity 160ms ease; content: ""; }
    .hero-sound-toggle[aria-pressed="false"] .hero-sound-wave { opacity: 0; }
    .hero-sound-toggle[aria-pressed="false"]::after { opacity: 1; }
    .hero-source-overlay { left: 50%; top: 49%; width: min(38vw, 460px); aspect-ratio: 1.3; overflow: visible; opacity: 0; visibility: hidden; border: 1px solid color-mix(in srgb, var(--ink) 32%, transparent); background-image: linear-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px); background-size: 28px 28px; clip-path: polygon(0 10%, 10% 10%, 10% 0, 90% 0, 90% 10%, 100% 10%, 100% 90%, 90% 90%, 90% 100%, 10% 100%, 10% 90%, 0 90%); transform: translate(-50%, -50%) scale(.92); transition: opacity var(--motion-duration) ease, transform var(--motion-duration) var(--motion-ease); pointer-events: none; }
    .hero-source-overlay::before { display: none; content: none; }
    .hero-source-overlay::after { position: absolute; z-index: 1; width: 56%; aspect-ratio: 1; left: 50%; top: 50%; border: 1px solid currentColor; border-radius: 50%; box-shadow: 0 0 0 18px color-mix(in srgb, var(--ink) 5%, transparent), 0 0 0 19px color-mix(in srgb, var(--ink) 22%, transparent); transform: translate(-50%, -50%); pointer-events: none; content: ""; }
    .hero-scene.is-source-visible .hero-source-overlay { opacity: .92; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
    .hero-scene.is-source-visible .hero-product-stage, .hero-scene.is-source-visible .hero-play, .hero-scene.is-source-visible .hero-swatch-rail, .hero-scene.is-source-visible .hero-viewfinder { opacity: .16; }
    .hero-scene.is-roulette .hero-product-stage { opacity: .28; filter: blur(6px) grayscale(.24); transition-duration: 160ms, 160ms, 180ms; pointer-events: none; }
    .hero-scene.is-roulette .hero-play, .hero-scene.is-roulette .hero-swatch-rail, .hero-scene.is-roulette .hero-viewfinder, .hero-scene.is-roulette .hero-source-overlay { opacity: 0 !important; }
    .hero-roulette-loader { position: absolute; z-index: 8; left: 50%; top: 50%; width: 78px; aspect-ratio: 1; display: grid; place-items: center; opacity: 0; color: var(--ink); transform: translate(-50%, -50%) scale(.84); transition: opacity 220ms ease, transform 420ms cubic-bezier(.16,1,.3,1); pointer-events: none; }
    .hero-roulette-loader::before { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -90deg, var(--hero-accent) 0 calc(var(--roulette-progress, .16) * 1turn), color-mix(in srgb, var(--ink) 10%, transparent) 0 1turn); -webkit-mask: radial-gradient(circle, transparent 0 64%, #000 65% 70%, transparent 71%); mask: radial-gradient(circle, transparent 0 64%, #000 65% 70%, transparent 71%); content: ""; animation: hero-loader-spin 1.2s linear infinite; }
    .hero-roulette-loader::after { position: absolute; width: 11px; aspect-ratio: 1; border-radius: 50%; background: var(--hero-accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--hero-accent) 12%, transparent), 0 0 24px color-mix(in srgb, var(--hero-accent) 36%, transparent); content: ""; }
    .hero-roulette-loader-mark { position: relative; z-index: 1; width: 38px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--surface) 35%, transparent); color: var(--muted); font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; backdrop-filter: blur(8px); }
    .hero-roulette-loader-label { position: absolute; top: calc(100% + 11px); color: var(--muted); font-family: var(--mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
    .hero-scene.is-roulette .hero-roulette-loader { opacity: .88; transform: translate(-50%, -50%) scale(1); }
    @keyframes hero-loader-spin { to { transform: rotate(360deg); } }
    .hero-interaction-hint { position: absolute; z-index: 8; left: 50%; top: 5%; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--mono); font-size: .59rem; letter-spacing: .09em; text-transform: uppercase; transform: translateX(-50%); pointer-events: none; white-space: nowrap; }
    .hero-interaction-hint::before { width: 8px; height: 8px; border: 1px solid var(--ink); border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 34%, transparent); content: ""; }
    .hero-connectors { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; color: #5c636c; --hero-rail-active: #7a93aa; pointer-events: none; }
    html[data-skin="nocturne"] .hero-connectors { color: #d5deea; --hero-rail-active: #f4f7fb; }
    @media (min-width: 861px) {
      .hero-mode::after { display: none !important; }
    }
    @media (max-width: 860px) {
      .hero-connectors { display: none; }
    }
    .hero-services { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
    .hero-mode { position: absolute; width: 160px; min-height: 72px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 8px; border: 0; background: transparent; color: var(--muted); font-family: var(--mono); font-size: var(--type-meta); letter-spacing: .095em; line-height: 1.25; text-transform: uppercase; transition: color 180ms ease, transform 180ms ease; pointer-events: auto; }
    .hero-mode svg { width: 34px; height: 34px; padding: 7px; overflow: visible; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.35; transition: color 200ms ease, border-color 200ms ease, box-shadow 260ms var(--motion-ease), transform 260ms var(--motion-ease), filter 200ms ease; }
    .hero-mode span { transition: color 180ms ease, font-weight 180ms ease; }
    .hero-mode::before { position: absolute; top: 50%; width: 6px; height: 6px; opacity: 0; background: var(--lime); transform: translateY(-50%) rotate(45deg); transition: opacity 180ms ease; content: ""; }
    .hero-mode::after { position: absolute; top: 50%; width: clamp(54px, 9vw, 138px); height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 30%, transparent), transparent); content: ""; pointer-events: none; }
    .hero-mode:hover, .hero-mode:focus-visible, .hero-mode[aria-checked="true"] { color: var(--ink); }
    .hero-mode:hover svg { transform: translateY(-1px) scale(1.05); }
    .hero-mode[aria-checked="true"] { font-weight: 600; }
    .hero-mode[aria-checked="true"] svg { transform: scale(1.1); }
    .hero-mode[aria-checked="true"]::before { opacity: 1; }
    .hero-scene.is-roulette .hero-mode[aria-checked="true"] { transform: scale(1.055); }
    .hero-scene.is-roulette .hero-mode, .hero-scene.is-roulette .hero-mode svg { transition-duration: 60ms; }
    .hero-scene.is-roulette .hero-mode { opacity: .42; }
    .hero-scene.is-roulette .hero-mode[aria-checked="true"] { background: transparent; box-shadow: none; color: var(--muted); }
    .hero-scene.is-roulette .hero-mode[aria-checked="true"] svg { /* orb fill kept; mute via color only */ color: var(--muted); }
    .hero-scene.is-revealing .hero-mode[aria-checked="true"] svg { animation: hero-roulette-land 680ms ease-out; }
    .hero-mode--left::before { right: -5px; }
    .hero-mode--left::after { left: calc(100% + 10px); }
    .hero-mode--right::before { left: -5px; }
    .hero-mode--right::after { right: calc(100% + 10px); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 30%, transparent)); }
    .hero-mode--video { left: 0; top: 24%; }
    .hero-mode--imagery { left: 0; top: 66%; }
    .hero-mode--3d { right: 0; top: 23%; }
    .hero-mode--configurator { right: 0; top: 48%; }
    .hero-mode--ar { right: 0; top: 71%; }
    .credibility { border-block: 1px solid var(--line); background: var(--surface); }
    .credibility-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
    .credibility-item { min-height: 126px; padding: 24px; border-right: 1px solid var(--line); }
    .credibility-item:last-child { border-right: 0; }
    .credibility-item strong { display: block; font-family: var(--display); font-size: 1.15rem; line-height: 1.2; }
    .credibility-item span { display: block; margin-top: 8px; color: var(--muted); font-size: 0.88rem; }

    .work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 46px; }
    .work-card { grid-column: span 4; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--corner); background: var(--surface); }
    .work-card[hidden] { display: none; }
    .work-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dark); }
    .work-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.22,.61,.36,1); }
    .work-card:hover img, .work-card:focus-within img { transform: scale(1.025); }
    .placeholder-label { position: absolute; left: 12px; top: 12px; padding: 7px 9px; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; }
    .work-card-copy { padding: 22px; }
    .work-card-copy h3 { font-size: 1.45rem; line-height: 1.05; }
    .work-card-copy p { margin-top: 10px; color: var(--muted); font-size: 0.92rem; }
    .work-card-copy ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
    .work-card-copy li { padding: 6px 8px; border: 1px solid var(--line); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; }
    .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
    .filter-button { min-height: 44px; padding: 9px 15px; border: 1px solid var(--line); background: transparent; font-size: 0.82rem; font-weight: 700; }
    .filter-button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
    .work-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 24px; padding: 18px; border-left: 4px solid var(--lime); background: var(--surface); color: var(--muted); font-size: 0.88rem; }

    .outcome-tour {
      position: relative;
      height: 420svh;
      background: var(--dark);
      color: var(--paper);
    }
    .outcome-sticky {
      position: sticky;
      top: var(--header);
      height: calc(100svh - var(--header));
      min-height: 0;
      overflow: hidden;
    }
    .outcome-shell {
      position: relative;
      z-index: 1;
      height: 100%;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: clamp(8px, 1.2vh, 14px);
      padding-block: clamp(10px, 1.6vh, 18px) clamp(10px, 1.6vh, 16px);
    }
    .outcome-head {
      display: grid;
      justify-items: center;
      gap: 0;
      text-align: center;
      margin: 0;
      padding: 0;
      border: 0;
    }
    .outcome-head h2 {
      max-width: none;
      margin: 0;
      font-size: clamp(1.85rem, 3.8vw, 3.15rem);
      line-height: 1.05;
      letter-spacing: -0.045em;
      white-space: nowrap;
    }
    .outcome-head > p { display: none; }
    .outcome-experience {
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: clamp(10px, 1.4vh, 16px);
      align-items: stretch;
    }
    .outcome-progress {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 28px;
      border: 0;
    }
    .outcome-jump {
      min-height: 44px;
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
      padding: 8px 2px;
      border: 0;
      background: transparent;
      color: rgba(244,240,231,.4);
      text-align: left;
      transition: color 180ms ease;
    }
    .outcome-jump span {
      font-family: var(--mono);
      font-size: .72rem;
      letter-spacing: .14em;
    }
    .outcome-jump strong {
      font-size: 1.05rem;
      font-weight: 650;
      letter-spacing: -.02em;
    }
    .outcome-jump[aria-current="step"] {
      background: transparent;
      color: var(--paper);
    }
    .outcome-jump[aria-current="step"] strong {
      box-shadow: inset 0 -2px 0 var(--lime);
    }
    .outcome-deck {
      position: relative;
      min-height: 0;
      width: 100%;
      max-width: min(1120px, 100%);
      margin-inline: auto;
      perspective: 1600px;
      perspective-origin: 50% 45%;
      overflow: hidden;
    }
    .outcome-card {
      --tilt-x: 0deg;
      --tilt-y: 0deg;
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(100%, 1080px);
      height: min(66vh, 560px);
      min-height: 360px;
      display: grid;
      grid-template-columns: 1fr;
      align-items: stretch;
      overflow: hidden;
      border: 1px solid rgba(244,240,231,.18);
      background:
        linear-gradient(155deg, rgba(255,255,255,.08) 0%, transparent 46%),
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 55%),
        rgba(10, 16, 28, 0.52);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(0,0,0,.28),
        0 20px 48px rgba(0,0,0,.36),
        0 4px 16px rgba(0,0,0,.22);
      transform-origin: center center;
      transform-style: preserve-3d;
      will-change: transform, opacity;
      border-radius: calc(var(--corner) + 8px);
      opacity: 0;
      color: rgba(244,240,231,.92);
      padding: clamp(28px, 4.2vh, 52px) clamp(28px, 4vw, 56px);
    }
    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
      .outcome-card {
        -webkit-backdrop-filter: blur(12px) saturate(1.12);
        backdrop-filter: blur(12px) saturate(1.12);
      }
    }
    .outcome-card[data-active="true"] {
      cursor: grab;
    }
    .outcome-card::after {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: -11px;
      height: 11px;
      border-radius: 0 0 16px 16px;
      background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.12));
      content: "";
      z-index: -1;
      pointer-events: none;
    }
    .outcome-card::before { display: none; content: none; }
    .outcome-card img,
    .outcome-card-visual,
    .outcome-diagram { display: none !important; }
    .outcome-card-body {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-rows: auto auto auto 1fr;
      gap: clamp(10px, 1.4vh, 16px);
      align-content: start;
      align-self: stretch;
      width: 100%;
      max-width: min(52ch, 100%);
      margin: 0;
      padding: 0;
      pointer-events: none;
      opacity: 1;
      visibility: visible;
      transform: none;
    }
    .outcome-card-label {
      width: fit-content;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      color: var(--accent, #3d84ff);
      font-family: var(--mono);
      font-size: clamp(.78rem, 1.05vw, .92rem);
      font-weight: 500;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .outcome-card-body h3 {
      max-width: 16ch;
      margin: 0;
      font-size: clamp(2.15rem, 4.2vw, 3.45rem);
      line-height: 1.02;
      letter-spacing: -.04em;
      text-wrap: balance;
    }
    .outcome-card-body p {
      display: block;
      max-width: 38ch;
      margin: 0;
      color: rgba(244,240,231,.64);
      font-size: clamp(1rem, 1.25vw, 1.15rem);
      line-height: 1.45;
    }
    .outcome-card-body ul {
      display: grid;
      gap: 10px;
      margin: clamp(8px, 1.6vh, 18px) 0 0;
      padding: 0;
      list-style: none;
      align-self: end;
    }
    .outcome-card-body li {
      position: relative;
      margin: 0;
      padding: 0 0 0 1.15em;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: rgba(244,240,231,.78);
      font-size: clamp(.95rem, 1.1vw, 1.05rem);
      line-height: 1.4;
    }
    .outcome-card-body li::before {
      position: absolute;
      left: 0;
      top: 0.55em;
      width: 6px;
      height: 1px;
      background: var(--accent, #3d84ff);
      content: "";
    }

    @media (max-width: 900px) {
      .outcome-head h2 { white-space: normal; text-wrap: balance; max-width: 16ch; }
      .outcome-card {
        padding: clamp(22px, 4vw, 28px);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .outcome-card { --tilt-x: 0deg !important; --tilt-y: 0deg !important; }
    }
    @media (pointer: coarse) {
      .outcome-card {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background:
          linear-gradient(155deg, rgba(255,255,255,.07) 0%, transparent 46%),
          rgba(12, 18, 30, 0.88);
      }
    }

    .studio-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: clamp(30px, 6vw, 88px); margin-top: 52px; }
    .studio-image-stack { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 12px; min-height: 620px; }
    .studio-image-stack figure { position: relative; overflow: visible; border: 0; border-top: 1px solid var(--dark-line); background: transparent; }
    .studio-image-stack figure:first-child { grid-row: span 2; }
    .studio-image-stack img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px 26px 112px 26px; }
    .studio-image-stack figure:nth-child(2) img { border-radius: 112px 26px 26px 26px; }
    .studio-image-stack figure:nth-child(3) img { border-radius: 26px 26px 26px 112px; }
    .studio-image-stack figcaption { position: absolute; left: 12px; bottom: 12px; padding: 7px 10px; border-radius: 999px; background: var(--dark); color: var(--paper); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; }
    .studio-copy h2 { max-width: 12ch; font-size: clamp(2.8rem, 5.6vw, 5.8rem); line-height: 0.91; }
    .studio-copy > p { margin-top: 22px; max-width: 46ch; color: rgba(244,240,231,.7); font-size: 1.04rem; }
    .studio-services { display: grid; margin-top: 34px; border-top: 1px solid var(--dark-line); }
    .studio-service { padding-block: 17px; border-bottom: 1px solid var(--dark-line); }
    .studio-service strong { display: block; font-family: var(--display); font-size: 1.08rem; }
    .studio-service span { display: block; margin-top: 4px; color: rgba(244,240,231,.6); font-size: 0.84rem; }
    .studio-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

    .pack-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
    .pack { display: flex; min-width: 0; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--corner); background: var(--surface); }
    .pack--primary { border: 2px solid var(--ink); box-shadow: calc(var(--depth-x) * .4) calc(var(--depth-y) * .4) 0 var(--lime); }
    .pack-label { font-family: var(--mono); font-size: var(--type-meta); letter-spacing: 0.13em; text-transform: uppercase; }
    .pack h3 { min-height: 2.2em; margin-top: 18px; font-size: 1.55rem; line-height: 1.04; }
    .pack-summary { min-height: 5.1em; margin-top: 12px; color: var(--muted); font-size: 0.88rem; }
    .pack-price { margin-top: 24px; font-family: var(--display); font-size: 1.8rem; font-weight: 800; letter-spacing: -0.04em; }
    .pack-price small { display: block; margin-top: 4px; color: var(--muted); font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; }
    .pack .button { width: 100%; margin-top: 20px; }
    .pack-details { display: grid; gap: 15px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
    .pack-details dt { color: var(--muted); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; }
    .pack-details dd { margin: 5px 0 0; font-size: 0.79rem; line-height: 1.5; }
    .pack-policy { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--line); background: var(--paper); color: var(--muted); font-size: 0.86rem; }

    .workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 46px; border: 1px solid var(--dark-line); }
    .workflow-step { min-height: 270px; padding: 26px; border-right: 1px solid var(--dark-line); }
    .workflow-step:last-child { border-right: 0; }
    .workflow-step span { color: var(--lime); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; }
    .workflow-step h3 { margin-top: 48px; font-size: 1.8rem; }
    .workflow-step p { margin-top: 12px; color: rgba(244,240,231,.68); font-size: 0.9rem; }

    .partnership { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: clamp(30px, 6vw, 84px); align-items: center; padding: clamp(34px, 5vw, 64px) 0; border-block: 1px solid var(--line); background: transparent; }
    .partnership h2 { max-width: 12ch; margin-top: 18px; font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: 0.95; }
    .partnership p { margin-top: 18px; max-width: 55ch; color: var(--muted); }
    .partnership-actions { display: flex; flex-wrap: wrap; margin-top: 24px; }
    .partnership-facts { display: grid; border-top: 1px solid var(--line); }
    .partnership-facts li { padding-block: 16px; border-bottom: 1px solid var(--line); }
    .partnership-facts strong { display: block; }
    .partnership-facts span { color: var(--muted); font-size: 0.86rem; }

    .faq-layout { display: grid; grid-template-columns: minmax(250px, 0.42fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 100px); }
    .faq-intro h2 { max-width: 9ch; margin-top: 18px; font-size: clamp(2.8rem, 5vw, 5rem); line-height: 0.94; }
    .faq-list { border-top: 1px solid var(--line); }
    .faq-list details { border-bottom: 1px solid var(--line); }
    .faq-list summary { position: relative; min-height: 72px; display: flex; align-items: center; padding: 18px 46px 18px 0; font-family: var(--display); font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 700; list-style: none; }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary::after { position: absolute; right: 0; font-family: var(--mono); font-size: 1.15rem; content: "+"; }
    .faq-list details[open] summary::after { content: "−"; }
    .faq-answer { max-width: 72ch; padding: 0 44px 24px 0; color: var(--muted); }

    body, .site-header, .credibility, .work-card, .pack, .partnership, .site-footer, .section--dark, .outcome-tour { transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease; }

    .site-footer { padding-block: 60px 26px; background: var(--paper); }
    .footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3, 0.55fr); gap: 36px; padding-bottom: 42px; border-bottom: 1px solid var(--line); }
    .footer-intro h2 { max-width: 15ch; margin-top: 20px; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; }
    .footer-intro p { margin-top: 16px; max-width: 46ch; color: var(--muted); font-size: var(--type-body); line-height: 1.85; }
    .footer-col h3 { font-family: var(--mono); font-size: var(--type-meta); letter-spacing: 0.13em; text-transform: uppercase; }
    .footer-col ul { display: grid; gap: 8px; margin-top: 16px; font-size: var(--type-meta); }
    .footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
    .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; color: var(--muted); font-family: var(--mono); font-size: var(--type-meta); letter-spacing: 0.1em; text-transform: uppercase; }

    @media (max-width: 1120px) {
      .hero h1 { font-size: var(--hero-title-size); }
      .hero-mode { width: 138px; }
      .hero-meta { left: 18%; }
      .hero-utility { right: 18%; }
      .pack-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid { grid-template-columns: 1.2fr repeat(3, 0.6fr); }
    }

    @media (min-width: 861px) and (max-height: 860px) {
      .hero { padding-block: 24px 28px; }
      .hero-grid { min-height: calc(100svh - var(--header) - 52px); }
      .hero-kicker { margin-bottom: 10px; }
      .hero h1 { font-size: var(--hero-title-size); }
      .hero-intro { margin-top: 10px; }
      .hero-showcase-wrap { min-height: clamp(430px, calc(100svh - var(--header) - 190px), 520px); }
      .outcome-shell { padding-block: 10px 8px; gap: 8px; }
      .outcome-head h2 { font-size: clamp(1.4rem, 3.6vh, 2rem); }
      .outcome-card { height: min(64vh, 520px); min-height: 320px; padding: 24px 28px; }
      .outcome-card-body h3 { font-size: clamp(1.7rem, 4vh, 2.5rem); }
      .outcome-card-body ul { margin-top: 10px; gap: 8px; }
    }

    @media (max-width: 860px) {
      .site-nav { display: none; position: absolute; top: var(--header); left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 14px var(--gutter) 22px; border-bottom: 1px solid var(--line); background: var(--paper); }
      .site-nav.is-open { display: flex; }
      .site-nav a { width: 100%; }
      .site-nav .nav-contact { margin: 8px 0 0; justify-content: center; }
      .menu-button { display: inline-flex; }
      .hero { min-height: auto; padding-top: 44px; }
      .hero-grid { min-height: 0; display: block; }
      .hero-copy { max-width: 760px; margin-inline: auto; }
      .hero h1 { font-size: var(--hero-title-size); white-space: normal; }
      .hero h1 span { display: block; }
      .hero h1 span:last-child { margin: 0; }
      .hero-intro { max-width: 46ch; }
      .hero-showcase-wrap { width: 100%; max-width: 760px; min-height: 0; margin: 24px auto 0; }
      .hero-showcase { min-height: 0; }
      .hero-scene { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; padding-top: 84px; }
      .hero-interaction-hint { top: 50px; }
      .hero-haze { top: 28%; width: 100%; }
      .hero-orbit { top: 29%; width: min(92vw, 620px); }
      .hero-product-stage { position: relative; left: auto; top: auto; grid-column: 1 / -1; width: min(100%, 650px); margin-inline: auto; transform: none; }
      .hero-meta { left: 0; top: 0; }
      .hero-utility { right: 0; top: 0; }
      .hero-play { top: 28%; }
      .hero-swatch-rail { right: 10%; top: 16%; }
      .hero-viewfinder { top: 29%; width: min(48vw, 340px); }
      .hero-source-overlay { top: 36%; left: 50%; width: min(66vw, 360px); transform: translate(-50%, -50%) scale(.92); }
      .hero-services { position: relative; inset: auto; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -4px; pointer-events: auto; }
      .hero-mode { position: relative; inset: auto; width: auto; min-height: 72px; display: flex; justify-content: center; gap: 10px; padding: 12px 8px; border-top: 1px solid var(--line); }
      .hero-mode[aria-checked="true"] { background: color-mix(in srgb, var(--lime) 18%, transparent); box-shadow: inset 4px 0 0 var(--lime); }
      .hero-mode:nth-child(odd) { border-right: 1px solid var(--line); }
      .hero-mode:last-child { grid-column: 1 / -1; border-right: 0; }
      .hero-mode::before { left: 10px; right: auto; }
      .hero-mode::after { display: none; }
      .hero-mode svg { flex: 0 0 auto; width: 30px; height: 30px; }
      .hero .hero-actions { position: relative; left: auto; bottom: auto; grid-column: 1 / -1; margin-top: 24px; transform: none; }
      .section-heading h2, .packs-head h2 { max-width: none; }
      .credibility-grid { grid-template-columns: 1fr 1fr; }
      .credibility-item:nth-child(2) { border-right: 0; }
      .credibility-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .work-card { grid-column: span 6; }
      .outcome-tour { height: auto; padding-block: 72px; }
      .outcome-sticky { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; }
      .outcome-shell { height: auto; display: block; padding-block: 0; }
      .outcome-head { display: grid; justify-items: start; text-align: left; gap: 12px; }
      .outcome-experience { display: block; }
      .outcome-progress { display: none; }
      .outcome-deck { min-height: 0; display: grid; gap: 16px; margin-top: 28px; max-width: none; }
      .outcome-card {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr;
        padding: 18px;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
      }
      .outcome-card-visual {
        order: -1;
        min-height: 180px;
        height: 180px;
      }
      .outcome-card img { display: none; }
      .outcome-card::after {
        left: 8px;
        right: 8px;
        bottom: -8px;
        height: 8px;
      }
      .outcome-card-body {
        position: relative;
        padding: 8px 4px 4px;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-width: none;
      }
      .outcome-card-body h3 { font-size: clamp(1.7rem, 7vw, 2.4rem); max-width: none; }
      .outcome-card-body p { display: block; max-width: 42ch; }
      .studio-copy { order: -1; }
      .studio-image-stack { min-height: 520px; }
      .workflow-grid { grid-template-columns: 1fr; }
      .workflow-step { min-height: 0; border-right: 0; border-bottom: 1px solid var(--dark-line); }
      .workflow-step:last-child { border-bottom: 0; }
      .workflow-step h3 { margin-top: 25px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-intro { grid-column: 1 / -1; }
    }

    @media (max-width: 560px) {
      :root { --gutter: 20px; }
      .section { padding-block: 72px; }
      .hero { padding-block: 32px 52px; }
      .hero-kicker { gap: 8px; margin-bottom: 16px; font-size: var(--type-micro); letter-spacing: .08em; }
      .hero h1 { font-size: var(--hero-title-size); }
      .hero h1 span:last-child { -webkit-text-stroke-width: 1.4px; }
      .hero-intro { max-width: 34ch; margin-top: 16px; font-size: var(--type-body); line-height: 1.85; }
      .hero-showcase-wrap { margin-top: 10px; }
      .hero-scene { padding-top: 76px; }
      .hero-interaction-hint { top: 46px; font-size: .62rem; letter-spacing: .07em; }
      .hero-meta { left: 0; top: 0; }
      .hero-utility { right: 0; top: 0; }
      .hero-product-stage { width: 100%; aspect-ratio: 1.48; }
      .hero-orbit { top: 27%; width: 100%; }
      .hero-play { top: 27%; width: 54px; }
      .hero-swatch-rail { right: 4%; top: 14%; gap: 7px; }
      .hero-swatch-rail span { width: 22px; }
      .hero-viewfinder { top: 27%; width: 56vw; }
      .hero-source-overlay { width: min(78vw, 320px); top: 34%; }
      .hero-roulette-loader { top: 36%; }
      .hero-mode { min-height: 60px; font-size: var(--type-meta); letter-spacing: .05em; }
      .hero .hero-actions { margin-top: 18px; }
      .credibility-grid { grid-template-columns: 1fr; }
      .credibility-item { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
      .credibility-item:last-child { border-bottom: 0; }
      .work-grid { grid-template-columns: 1fr; }
      .work-card { grid-column: auto; }
      .outcome-card { min-height: 0; }
      .studio-image-stack { grid-template-columns: 1fr 1fr; min-height: 500px; }
      .studio-image-stack figure:first-child { grid-column: 1 / -1; grid-row: auto; }
      .pack-grid { grid-template-columns: 1fr; }
      .pack h3, .pack-summary { min-height: 0; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-col:last-child { grid-column: 1 / -1; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
      .hero-showcase { transform: none !important; }
    }

    @media (prefers-reduced-motion: no-preference) {
      .hero-copy > * { animation: hero-copy-in 700ms backwards var(--motion-ease); }
      .hero-copy > :nth-child(2) { animation-delay: 70ms; }
      .hero-copy > :nth-child(3) { animation-delay: 130ms; }
      .hero-meta, .hero-utility, .hero-services { animation: hero-ui-in 650ms 310ms backwards var(--motion-ease); }
      .hero-interaction-hint { animation: hero-hint-in 650ms 360ms backwards var(--motion-ease); }
      .hero-scene.is-roulette .hero-interaction-hint::before { animation: hero-hint-pulse 720ms ease-out infinite; }
    }

    @keyframes hero-copy-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
    @keyframes hero-ui-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    @keyframes hero-hint-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes hero-hint-pulse { 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
    @keyframes hero-roulette-land { 55% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--lime) 14%, transparent); transform: scale(1.16); } }

    @media (prefers-reduced-motion: reduce) and (min-width: 861px) {
      .outcome-tour { height: auto; padding-block: 90px; }
      .outcome-sticky { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; }
      .outcome-shell { height: auto; }
      .outcome-experience { display: block; }
      .outcome-progress { display: none; }
      .outcome-deck { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; max-width: none; }
      .outcome-card {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
      .outcome-card img,
      .outcome-card-visual { display: none !important; }
      .outcome-card-body {
        position: relative;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-width: none;
      }
      .outcome-card-body ul { display: grid; }
    }

    /* Hero media system, proof bands and dark counterpart */
    html[data-skin="nocturne"] {
      color-scheme: dark;
      --paper: #020617;
      --surface: #030712;
      --ink: #f8fafc;
      --muted: #94a3b8;
      --accent: #3b82f6;
      --accent-2: #60a5fa;
      --accent-ink: #020617;
      --action: #3b82f6;
      --action-hover: #60a5fa;
      /* Matches site/liquid.js nocturne hover mid (#4087f7). */
      --cta-hover: #4087f7;
      /* As above: the lab derives this and index has always painted #020617.
         It is also the readable one — 5.9:1 on --action against 3.1:1. */
      --action-ink: #020617;
      --lime: var(--accent);
      --hero-accent: var(--accent);
      --dark: #010409;
      --dark-2: #0f172a;
      --dark-ink: #f1f5f9;
      --proof-bg: #030712;
      --proof-surface: #0f172a;
      --proof-ink: #f8fafc;
      --line: rgba(148, 163, 184, 0.11);
      --dark-line: rgba(59, 130, 246, 0.13);
      --shadow: 0 34px 90px rgba(0, 0, 0, 0.62);
    }
    html[data-skin="nocturne"] .section--dark { background: var(--dark); color: var(--dark-ink); }
    html[data-skin="nocturne"] .outcome-tour { color: var(--dark-ink); }
    html[data-skin="nocturne"] .section--dark .eyebrow,
    html[data-skin="nocturne"] .section--dark .muted { color: color-mix(in srgb, var(--dark-ink) 68%, transparent); }
    .hero { padding-block: clamp(22px, 2.8vw, 42px) clamp(38px, 4vw, 62px); }
    .hero-grid { grid-template-rows: auto minmax(470px, 1fr); }
    .hero h1 { line-height: .9; }
    .hero-intro { max-width: none; margin-top: 12px; color: var(--muted); font-family: var(--mono); font-size: clamp(.68rem, .88vw, .78rem); font-weight: 500; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; white-space: nowrap; }
    .hero-showcase-wrap { min-height: clamp(470px, min(44vw, calc(100svh - var(--header) - 205px)), 610px); margin-top: -10px; }
    .hero-haze { top: 45%; }
    .hero-orbit { top: 47%; }
    .hero-product-stage { top: 46%; width: min(64vw, 840px); cursor: default; pointer-events: none; transition: opacity 560ms ease, filter 560ms ease; }
    .hero-media-visual { position: absolute; inset: -2% -3% -1%; opacity: 1; transform: scale(1); transition: opacity 560ms ease, filter 560ms ease, transform 720ms cubic-bezier(.16,1,.3,1); -webkit-mask-image: none; mask-image: none; }
    .hero-media-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 480ms ease; }
    .hero-still-stack { opacity: 1; }
    .hero-video-frame, .hero-model-frame { display: grid; place-items: center; }
    .hero-video-frame video { width: 94%; height: 88%; object-fit: cover; opacity: .94; filter: saturate(.84) contrast(.98); }
    .hero-video-frame::before { position: absolute; z-index: 2; left: 17%; top: 17%; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); background: color-mix(in srgb, var(--surface) 74%, transparent); color: var(--ink); font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(10px); content: none; }
    .hero-scene[data-mode="ugc"] .hero-video-frame video { width: 40%; height: 92%; border-radius: 28px; object-position: center; }
    .hero-scene[data-mode="ugc"] .hero-video-frame::before { content: none; }
    .hero-scene[data-mode="ar"] .hero-video-frame video { width: 38%; height: 92%; border: 2px solid color-mix(in srgb, var(--ink) 38%, transparent); border-radius: 34px; object-position: center; }
    .hero-scene[data-mode="ar"] .hero-video-frame::before { content: none; }
    .hero-video-frame::after { position: absolute; inset: 19% 24%; border: 1px solid transparent; pointer-events: none; content: ""; }
    .hero-scene[data-mode="ar"] .hero-video-frame::after { border-color: color-mix(in srgb, var(--lime) 76%, transparent); clip-path: polygon(0 0, 16% 0, 16% 2px, 2px 2px, 2px 16%, 0 16%, 0 0, 100% 0, 100% 16%, calc(100% - 2px) 16%, calc(100% - 2px) 2px, 84% 2px, 84% 0, 100% 0, 100% 100%, 84% 100%, 84% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 84%, 100% 84%, 100% 100%, 0 100%, 0 84%, 2px 84%, 2px calc(100% - 2px), 16% calc(100% - 2px), 16% 100%, 0 100%); }
    .hero-model-frame model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; pointer-events: auto; }
    .hero-model-frame::after { position: absolute; left: 50%; bottom: 14%; padding: 6px 8px; opacity: .72; background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--muted); font-family: var(--mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; transform: translateX(-50%); backdrop-filter: blur(10px); content: "Drag to rotate · Pan to inspect"; white-space: nowrap; pointer-events: none; }
.hero-scene[data-mode="ar"] .hero-still-stack { opacity: .28; filter: blur(.8px); }
.hero-scene[data-mode="video"] .hero-still-stack,
.hero-scene[data-mode="ugc"] .hero-still-stack { opacity: 0; }
.hero-scene[data-mode="3d"].is-model-ready .hero-still-stack,
.hero-scene[data-mode="configurator"].is-model-ready .hero-still-stack { opacity: 0; }
    .hero-scene[data-mode="video"] .hero-video-frame,
    .hero-scene[data-mode="ugc"] .hero-video-frame,
    .hero-scene[data-mode="3d"] .hero-video-frame,
    .hero-scene[data-mode="ar"] .hero-video-frame { opacity: 1; }
    .hero-scene[data-mode="3d"].is-model-ready .hero-model-frame,
    .hero-scene[data-mode="configurator"].is-model-ready .hero-model-frame { opacity: 1 !important; }
    .hero-scene:not(.is-preparing):not(.is-roulette) .hero-model-frame.is-active { opacity: 1 !important; }
    .hero-scene.is-preparing .hero-still-stack,
    .hero-scene.is-roulette .hero-still-stack { opacity: 1 !important; }
    .hero-scene.is-preparing .hero-video-frame,
    .hero-scene.is-preparing .hero-model-frame,
    .hero-scene.is-roulette .hero-video-frame,
    .hero-scene.is-roulette .hero-model-frame { opacity: 0 !important; pointer-events: none; }
    .hero-scene.is-preparing .hero-product-stage,
    .hero-scene.is-roulette .hero-product-stage,
    .hero-scene.is-resolving .hero-product-stage { opacity: .3; filter: blur(5px) grayscale(.2); }
    .hero-scene.is-preparing .hero-media-visual,
    .hero-scene.is-roulette .hero-media-visual,
    .hero-scene.is-resolving .hero-media-visual { transform: scale(.5); }
    .hero-scene.is-switching .hero-product-stage { opacity: .42; filter: blur(3px); }
    .hero-scene.is-switching .hero-media-visual { transform: scale(.94); }
    .hero-scene.is-revealing .hero-media-visual { animation: hero-media-resolve 760ms cubic-bezier(.16,1,.3,1); }
    .hero-scene.is-media-locked model-viewer,
    .hero-scene.is-media-locked .hero-play,
    .hero-scene.is-media-locked .hero-configurator-controls { pointer-events: none !important; }
    .hero-play { top: 46%; display: grid; pointer-events: none; }
    .hero-scene[data-mode="video"] .hero-play,
    .hero-scene[data-mode="ugc"] .hero-play,
    .hero-scene[data-mode="3d"] .hero-play { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
    .hero-play[aria-pressed="true"]::after { width: 12px; height: 15px; margin: 0; border: 0; background: linear-gradient(90deg, var(--ink) 0 34%, transparent 34% 66%, var(--ink) 66% 100%); }
    .hero-configurator-controls { position: absolute; z-index: 7; left: 50%; bottom: 5%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; opacity: 0; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); background: color-mix(in srgb, var(--surface) 76%, transparent); transform: translate(-50%, 8px); transition: opacity 240ms ease, transform 320ms ease; backdrop-filter: blur(14px); pointer-events: none; }
    .hero-configurator-controls span { color: var(--muted); font-family: var(--mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; }
    .hero-variant { width: 30px; height: 30px; padding: 0; border: 3px solid var(--surface); border-radius: 50%; background: var(--variant); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); }
    .hero-variant[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
    .hero-scene[data-mode="configurator"].is-model-ready:not(.is-roulette) .hero-configurator-controls { opacity: 1 !important; transform: translate(-50%, 0); pointer-events: auto; }
    .hero-scene:not(.is-preparing):not(.is-roulette) .hero-configurator-controls.is-active { opacity: 1 !important; transform: translate(-50%, 0); pointer-events: auto; }
    .hero-meta { left: 0; top: 1%; }
    .hero-utility { right: 0; top: 1%; }
    .hero-services { inset: 0; }
    .hero-mode--video { left: 0; top: 20%; }
    .hero-mode--ugc { left: 0; top: 46%; }
    .hero-mode--imagery { left: 0; top: 72%; }
    .hero-mode--3d { right: 0; top: 20%; }
    .hero-mode--configurator { right: 0; top: 46%; }
    .hero-mode--ar { right: 0; top: 72%; }

    .industry-marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); }
    .industry-track { width: max-content; display: flex; animation: industry-run 34s linear infinite; }
    .industry-group { display: flex; align-items: center; flex: none; }
    .industry-group span { display: inline-flex; align-items: center; gap: 36px; padding: 25px 22px; font-family: var(--display); font-size: clamp(1.45rem, 2.8vw, 2.75rem); font-weight: 600; letter-spacing: -.04em; white-space: nowrap; }
    .industry-group span:nth-child(odd) { color: transparent; -webkit-text-stroke: 1px var(--ink); }
    .industry-group span::after { width: 8px; height: 8px; background: var(--lime); transform: rotate(45deg); content: ""; }
    .industry-marquee:hover .industry-track,
    .industry-marquee:focus-within .industry-track { animation-play-state: paused; }
    .client-proof { padding-block: clamp(62px, 7vw, 96px); background: var(--proof-bg); color: var(--proof-ink); }
    .client-proof-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding-bottom: 26px; border-bottom: 1px solid color-mix(in srgb, var(--proof-ink) 22%, transparent); }
    .client-proof-head h2 { max-width: 14ch; font-size: clamp(2.3rem, 4.6vw, 4.8rem); line-height: .96; }
    .client-proof-head p { max-width: 42ch; color: color-mix(in srgb, var(--proof-ink) 66%, transparent); }
    .client-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 34px; border-block: 1px solid color-mix(in srgb, var(--proof-ink) 20%, transparent); }
    .client-review { min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; padding: 28px; border-right: 1px solid color-mix(in srgb, var(--proof-ink) 20%, transparent); }
    .client-review:last-child { border-right: 0; }
    .client-review blockquote { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
    .client-review footer { display: grid; gap: 3px; color: color-mix(in srgb, var(--proof-ink) 68%, transparent); font-size: .82rem; }
    .client-review strong { color: var(--proof-ink); font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
    html[data-skin="nocturne"] .client-proof { background: var(--proof-bg); color: var(--proof-ink); }
    html[data-skin="nocturne"] .client-proof-head,
    html[data-skin="nocturne"] .client-review-grid,
    html[data-skin="nocturne"] .client-review { border-color: color-mix(in srgb, var(--proof-ink) 22%, transparent); }
    html[data-skin="nocturne"] .client-proof-head p,
    html[data-skin="nocturne"] .client-review footer { color: color-mix(in srgb, var(--proof-ink) 68%, transparent); }
    html[data-skin="nocturne"] .client-review strong { color: var(--proof-ink); }
    @keyframes hero-media-resolve { 0% { opacity: .3; filter: blur(5px) grayscale(.2); transform: scale(.52); } 72% { opacity: 1; filter: none; transform: scale(1.025); } 100% { opacity: 1; filter: none; transform: scale(1); } }
    @keyframes industry-run { to { transform: translateX(-50%); } }

    @media (max-width: 860px) {
      .hero { padding-top: 30px; }
      .hero-grid { grid-template-rows: auto auto; }
      .hero-showcase-wrap { margin-top: 2px; }
      .hero-scene { padding-top: 68px; }
      .hero-meta, .hero-utility { top: 0; }
      .hero-product-stage { top: auto; width: min(100%, 650px); }
      .hero-media-visual { inset: -3% -5% 0; }
      .hero-play { top: 29%; }
      .hero-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero-mode { inset: auto; }
      .hero-mode:last-child { grid-column: auto; }
      .hero-video-frame::before { left: 12%; top: 15%; }
      .hero-scene[data-mode="ugc"] .hero-video-frame::before,
      .hero-scene[data-mode="ar"] .hero-video-frame::before { left: 21%; }
      .hero-configurator-controls { bottom: 2%; }
      .hero-roulette-loader { top: 37%; }
      .client-proof-head { display: grid; }
      .client-review-grid { grid-template-columns: 1fr; }
      .client-review { min-height: 210px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--paper) 20%, transparent); }
      .client-review:last-child { border-bottom: 0; }
    }

    @media (min-width: 861px) and (max-height: 820px) {
      .hero { padding-block: 14px 20px; }
      .hero-grid { min-height: calc(100svh - var(--header) - 34px); grid-template-rows: auto minmax(0, 1fr); }
      .hero h1 { font-size: clamp(3.25rem, 8.1vh, 4.75rem); }
      .hero-intro { margin-top: 7px; }
      .hero-showcase-wrap { min-height: 0; margin-top: -10px; }
      .hero-showcase { min-height: 0; }
      .hero-product-stage { width: min(55vw, 700px); }
      .hero-haze { width: min(68vw, 850px); }
      .hero-orbit { width: min(50vw, 640px); }
      .hero-meta, .hero-utility { top: 2%; }
      .hero-mode { min-height: 62px; }
      .hero-mode svg { width: 30px; height: 30px; }
      .hero .hero-actions { bottom: 2px; }
    }

    @media (min-width: 861px) and (max-height: 700px) {
      .hero h1 { font-size: clamp(3rem, 7.8vh, 4rem); }
      .hero-product-stage { width: min(50vw, 620px); }
      .hero-mode { min-height: 56px; }
      .hero-mode svg { width: 27px; height: 27px; }
      .hero-configurator-controls { bottom: 8%; }
    }

    @media (max-width: 560px) {
      .hero { padding-top: 24px; }
      .hero-intro { margin-top: 10px; font-size: .62rem; letter-spacing: .08em; }
      .hero-scene { padding-top: 64px; }
      .hero-meta { max-width: 43%; padding-inline: 9px; font-size: .53rem; }
      .hero-utility { gap: 6px; }
      .hero-input-toggle { padding-inline: 9px; font-size: .53rem; }
      .hero-sound-toggle { width: 42px; height: 42px; flex-basis: 42px; }
      .hero-product-stage { aspect-ratio: 1.34; }
      .hero-scene[data-mode="ugc"] .hero-video-frame video,
      .hero-scene[data-mode="ar"] .hero-video-frame video { width: 50%; }
      .hero-video-frame::before { display: none; }
      .hero-configurator-controls { gap: 6px; padding: 6px 8px; }
      .hero-configurator-controls span { display: none; }
      .hero-variant { width: 27px; height: 27px; }
      .industry-group span { gap: 24px; padding: 20px 16px; }
      .client-review { padding: 24px 0; }
    }

    /* Hero composition pass: keep the media clear of the copy and give the service rails a looser rhythm. */
    @media (min-width: 861px) {
      .hero-product-stage { top: 50%; width: min(58vw, 730px); }
      .hero::after { background: radial-gradient(ellipse, color-mix(in srgb, var(--lime) 8%, transparent), transparent 68%); }
      .hero-haze { width: min(68vw, 820px); background: radial-gradient(ellipse, color-mix(in srgb, var(--surface) 84%, transparent) 0 22%, color-mix(in srgb, var(--lime) 8%, transparent) 44%, transparent 72%); }
      .hero-orbit { width: min(53vw, 700px); opacity: .56; }
      .hero-orbit::after { border-color: color-mix(in srgb, var(--lime) 38%, transparent); }
      .hero-mode { width: 220px; min-height: 88px; gap: 8px; font-size: var(--type-meta); letter-spacing: .105em; transform: translateY(var(--rail-shift, 0)); }
      .hero-mode svg { width: 46px; height: 46px; padding: 5px; stroke-width: 1.25; }
      .hero-mode[aria-checked="true"] { transform: translateY(var(--rail-shift, 0)) scale(1.06); }
      .hero-mode::before { width: 7px; height: 7px; opacity: .14; border-radius: 50%; background: color-mix(in srgb, var(--muted) 55%, transparent); transform: translateY(-50%); }
      .hero-mode[aria-checked="true"]::before { opacity: .2; background: color-mix(in srgb, var(--cta-hover, #133cb8) 36%, transparent); box-shadow: none; }
      .hero-mode--ugc::before,
      .hero-mode--configurator::before { opacity: .1; }
      .hero-mode--ugc[aria-checked="true"]::before,
      .hero-mode--configurator[aria-checked="true"]::before { opacity: .14; }
      .hero-mode::after { display: none !important; }
      .hero-mode--video { left: 0; top: 17%; --rail-shift: -10px; }
      .hero-mode--ugc { left: 1%; top: 45%; --rail-shift: 7px; }
      .hero-mode--imagery { left: 0; top: 73%; --rail-shift: -4px; }
      .hero-mode--3d { right: 0; top: 20%; --rail-shift: 9px; }
      .hero-mode--configurator { right: 1%; top: 48%; --rail-shift: -8px; }
      .hero-mode--ar { right: 0; top: 75%; --rail-shift: 5px; }
      .hero-video-frame::before { top: 2%; }
      .hero-scene[data-mode="ugc"] .hero-video-frame::before { left: 30%; }
      .hero-scene[data-mode="ar"] .hero-video-frame::before { left: 31%; }
    }

    @media (min-width: 861px) and (max-height: 820px) {
      .hero-product-stage { top: 47%; width: min(55vw, 690px); }
    }

    @media (min-width: 861px) and (max-height: 700px) {
      .hero-product-stage { top: 46%; width: min(50vw, 600px); }
    }

    @media (max-width: 860px) {
      .hero::after { background: radial-gradient(ellipse, color-mix(in srgb, var(--lime) 7%, transparent), transparent 68%); }
      .hero-haze { background: radial-gradient(ellipse, color-mix(in srgb, var(--surface) 86%, transparent) 0 22%, color-mix(in srgb, var(--lime) 7%, transparent) 45%, transparent 74%); }
      .hero-orbit { opacity: .5; }
      .hero-mode svg { width: 38px; height: 38px; padding: 4px; }
    }

    /* Editorial system: fewer boxes, clearer sequence, more room for the work. */
    .credibility { padding-block: clamp(58px, 7vw, 104px); }
    .credibility-layout { display: grid; grid-template-columns: minmax(230px, .56fr) minmax(0, 1.44fr); gap: clamp(42px, 8vw, 132px); align-items: start; }
    .credibility-intro h2 { max-width: 8ch; margin-top: 18px; font-size: clamp(2.8rem, 5vw, 5.4rem); line-height: .9; }
    .credibility-intro > p:not(.eyebrow) { max-width: 31ch; margin-top: 22px; color: var(--muted); }
    .credibility-note { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
    .credibility-note::before { width: 7px; height: 7px; border: 1px solid var(--ink); border-radius: 50%; background: var(--lime); content: ""; }
    .credibility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
    .credibility-item { position: relative; min-height: 222px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 24px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; transition: background-color 180ms ease; }
    .credibility-item:hover { background: color-mix(in srgb, var(--surface) 66%, var(--paper)); }
    .credibility-item-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
    .credibility-index, .credibility-status { color: var(--muted); font-family: var(--mono); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; }
    .credibility-index { color: var(--lime); }
    .credibility-item strong { display: block; margin-top: 54px; font-family: var(--display); font-size: clamp(1.4rem, 2vw, 2rem); letter-spacing: -.04em; line-height: 1; }
    .credibility-item > div:last-child { max-width: 31ch; }
    .credibility-item > div:last-child > span { display: block; margin-top: 10px; color: var(--muted); font-size: .88rem; }
    .credibility-item::after { position: absolute; right: 24px; bottom: 20px; left: 24px; height: 1px; background: linear-gradient(90deg, var(--line) 0 82%, var(--lime) 82% 100%); content: ""; }

    @keyframes hero-media-resolve { 0% { opacity: .42; filter: blur(3px) grayscale(.12); transform: translateY(7px) scale(.95); } 100% { opacity: 1; filter: none; transform: translateY(0) scale(1); } }
    @keyframes hero-roulette-land { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 0%, transparent); transform: translateY(0) scale(1); } 52% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--lime) 11%, transparent); transform: translateY(-1px) scale(1.04); } }
    .hero-scene:not(.is-roulette):not(.is-switching):not(.is-revealing) .hero-media-visual { animation: none; }

    @media (min-width: 861px) {
      .hero-scene[data-mode="ar"] .hero-video-frame::before { top: 24%; left: 36%; }
    }

    @media (max-width: 860px) {
      .credibility-layout { grid-template-columns: 1fr; gap: 34px; }
      .credibility-intro h2 { max-width: 11ch; }
      .credibility-intro > p:not(.eyebrow) { max-width: 52ch; }
      .credibility-grid { grid-template-columns: 1fr; border-left: 0; }
      .credibility-item { min-height: 190px; border-right: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-scene:not(.is-roulette):not(.is-switching):not(.is-revealing) .hero-media-visual { animation: none; }
    }

    .work-card { overflow: visible; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
    .work-card-media { border-radius: 28px 28px 96px 28px; }
    .work-card-copy { padding: 20px 0 0; }
    .work-card-copy li { border-radius: 999px; }

    .outcome-card {
      border: 1px solid rgba(244,240,231,.18);
      border-radius: 24px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 20px 48px rgba(0,0,0,.36);
    }
    .outcome-card::before { display: none; }
    .outcome-card .outcome-card-label {
      border-radius: 0;
      box-shadow: none;
      background: transparent;
      color: var(--accent, #3d84ff);
    }
    .outcome-card-body li { border-radius: 0; }

    .pack-grid { gap: 0; border-block: 1px solid var(--line); }
    .pack { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; padding: 28px clamp(18px, 2vw, 30px); }
    .pack:first-child { border-left: 1px solid var(--line); }
    .pack--primary { border: 0; border-top: 4px solid var(--lime); border-right: 1px solid var(--line); box-shadow: none; background: color-mix(in srgb, var(--surface) 62%, transparent); }
    .pack--primary:first-child { border-left: 1px solid var(--line); }
    .pack-policy { border: 0; border-left: 4px solid var(--lime); background: transparent; }

    .workflow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 0; border-top: 1px solid var(--dark-line); }
    .workflow-step { min-height: 0; padding: 28px 26px 12px 0; border: 0; border-right: 1px solid var(--dark-line); }
    .workflow-step + .workflow-step { padding-left: 26px; }
    .workflow-step:last-child { border-right: 0; }
    .workflow-step span { display: flex; align-items: center; gap: 10px; }
    .workflow-step span::before { width: 24px; height: 1px; background: var(--lime); content: ""; }
    .workflow-step h3 { margin-top: 58px; max-width: 9ch; }
    .workflow-step p { max-width: 27ch; }

    @media (max-width: 860px) {
      .workflow-grid { grid-template-columns: 1fr; }
      .workflow-step, .workflow-step + .workflow-step { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--dark-line); }
      .workflow-step:last-child { border-bottom: 0; }
      .workflow-step h3 { margin-top: 28px; max-width: 14ch; }
      .workflow-step p { max-width: 48ch; }
      .pack { border-right: 0; border-bottom: 1px solid var(--line); }
      .pack:first-child, .pack--primary:first-child { border-left: 0; }
      .pack:last-child { border-bottom: 0; }
    }

    @media (max-width: 560px) {
      .outcome-card { border-radius: 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .industry-track { width: auto; overflow-x: auto; animation: none; }
      .industry-group[aria-hidden="true"] { display: none; }
      .hero-scene.is-roulette .hero-media-visual,
      .hero-scene.is-switching .hero-media-visual { transform: none; }
    }

    /* Page-wide motion and an editorial, image-led work system. */
    .hero {
      min-height: 100svh;
      padding-top: calc(var(--header) + clamp(34px, 4.2vw, 64px));
      background:
        linear-gradient(180deg, var(--dark) 0%, color-mix(in srgb, var(--dark) 68%, var(--paper)) 7%, color-mix(in srgb, var(--dark) 12%, var(--paper)) 14%, var(--paper) 22%, var(--paper) 100%),
        var(--paper);
    }
    .site-header {
      position: fixed;
      right: 0;
      left: 0;
      width: 100%;
      border-bottom: 0;
      background: transparent;
      color: var(--paper);
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .site-header .brand-mark { background: #0a0a0a; }
    .site-header .menu-button { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 28%, transparent); }
    .site-header .site-nav a:not(.nav-contact):hover { color: var(--lime); }
    .site-header.is-scrolled {
      background: color-mix(in srgb, var(--paper) 90%, transparent);
      color: var(--ink);
      box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent);
      -webkit-backdrop-filter: blur(18px) saturate(1.08);
      backdrop-filter: blur(18px) saturate(1.08);
    }
    .site-header.is-scrolled .brand-mark { background: #0a0a0a; }
    .site-header.is-scrolled .menu-button { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
    html[data-skin="nocturne"] .hero {
      min-height: 100svh;
      background:
        radial-gradient(ellipse 72% 52% at 50% 84%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
        radial-gradient(ellipse 110% 72% at 50% 108%, color-mix(in srgb, #1d4ed8 12%, transparent), transparent 48%),
        var(--paper);
    }
    html[data-skin="nocturne"] .site-header { background: transparent; color: var(--ink); }
    html[data-skin="nocturne"] .site-header .brand-mark { background: #f4f0e7; }
    html[data-skin="nocturne"] .site-header .menu-button { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
    html[data-skin="nocturne"] .site-header.is-scrolled { background: color-mix(in srgb, var(--paper) 90%, transparent); color: var(--ink); }
    .button--lime,
    .site-nav .nav-contact,
    .skip-link { color: var(--accent-ink, var(--ink)); }
    .placeholder-label,
    .hero-meta,
    .hero-input-toggle,
    .hero-sound-toggle,
    .hero-interaction-hint,
    .hero-configurator-controls {
      border-radius: 999px;
      box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 10%, transparent);
      -webkit-backdrop-filter: blur(16px) saturate(1.08);
      backdrop-filter: blur(16px) saturate(1.08);
    }
    .hero-source-overlay {
      background-color: color-mix(in srgb, var(--surface) 34%, transparent);
      -webkit-backdrop-filter: blur(12px) saturate(1.06);
      backdrop-filter: blur(12px) saturate(1.06);
    }
    .filter-bar { gap: 22px; margin-top: 34px; border-bottom: 1px solid var(--line); }
    .filter-button {
      min-height: 46px;
      padding: 8px 0 13px;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: var(--muted);
      font-weight: 600;
      transition: color 180ms ease, border-color 180ms ease;
    }
    .filter-button:hover { color: var(--ink); }
    .filter-button[aria-pressed="true"] { border-color: var(--lime); background: transparent; color: var(--ink); }
    .work-grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: clamp(18px, 2.2vw, 34px);
      row-gap: clamp(34px, 5vw, 72px);
      align-items: start;
    }
    .work-card:nth-child(1) { grid-column: 1 / span 5; margin-top: 34px; }
    .work-card:nth-child(2) { grid-column: 6 / span 4; margin-top: 0; }
    .work-card:nth-child(3) { grid-column: 10 / span 3; margin-top: 104px; }
    .work-card-media { border-radius: 30px 30px 112px 30px; box-shadow: 0 24px 56px color-mix(in srgb, var(--ink) 12%, transparent); }
    .work-card:nth-child(2) .work-card-media { border-radius: 112px 30px 30px 30px; }
    .work-card:nth-child(3) .work-card-media { border-radius: 30px 112px 30px 30px; }
    .work-card-media img { transform: translate3d(0, var(--work-image-shift, 0px), 0); }
    .work-card:hover .work-card-media img,
    .work-card:focus-within .work-card-media img { transform: translate3d(0, var(--work-image-shift, 0px), 0) scale(1.045); }
    .placeholder-label { border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); background: color-mix(in srgb, var(--paper) 78%, transparent); }
    .work-note { padding-inline: 0; border-block: 1px solid var(--line); border-left: 0; background: transparent; }
    .studio-image-stack img {
      transform: translate3d(0, var(--parallax-y, 0px), 0);
      transition: transform 700ms var(--motion-ease), filter 360ms ease;
      will-change: transform;
    }
    .studio-image-stack figure:hover img { transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.018); filter: saturate(1.04); }

    @media (max-width: 1100px) and (min-width: 861px) {
      .work-card:nth-child(1),
      .work-card:nth-child(2),
      .work-card:nth-child(3) { grid-column: span 4; margin-top: 0; }
      .work-card:nth-child(1) { margin-top: 26px; }
      .work-card:nth-child(3) { margin-top: 72px; }
    }

    html.js .reveal-item {
      opacity: 0;
      transform: translate3d(0, 22px, 0);
      transition: opacity 620ms var(--motion-ease), transform 760ms var(--motion-ease);
      transition-delay: var(--reveal-delay, 0ms);
      will-change: opacity, transform;
    }
    html.js .reveal-item[data-reveal="soft"] { transform: translate3d(0, 10px, 0); }
    /* Section titles: quiet fade-in + soft rise (~12px). Whole-block only — no word split. */
    html.js .reveal-item[data-reveal="title"],
    html.js .title-reveal {
      opacity: 0;
      transform: translate3d(0, 18px, 0);
      transition:
        opacity 720ms var(--motion-ease),
        transform 820ms var(--motion-ease);
      transition-delay: var(--reveal-delay, 0ms);
      will-change: opacity, transform;
    }
    html.js .reveal-item.is-visible { opacity: 1; transform: none; }

    /* A single restrained scan pass gives revealed cards a sense of inspection without turning the page into a HUD. */
    html.js .scan-reveal { position: relative; }
    html.js .scan-reveal::after { position: absolute; z-index: 2; top: 18px; left: 0; width: 34%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hero-accent) 72%, var(--paper)), transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--hero-accent) 28%, transparent); content: ""; opacity: 0; pointer-events: none; transform: translate3d(-140%, 0, 0); }
    html.js .scan-reveal.is-visible::after { animation: card-scan 1050ms cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms) both; }
    @keyframes card-scan {
      0% { opacity: 0; transform: translate3d(-140%, 0, 0); }
      18% { opacity: .7; }
      76% { opacity: .38; }
      100% { opacity: 0; transform: translate3d(340%, 0, 0); }
    }
    @media (prefers-reduced-motion: no-preference) {
      html.js .scan-reveal:hover::after,
      html.js .scan-reveal:focus-within::after { animation: card-scan 1050ms cubic-bezier(.22,.61,.36,1) both; }
    }
    @media (prefers-reduced-motion: reduce) {
      html.js .scan-reveal::after { display: none; animation: none; }
    }
    @media (max-width: 860px) {
      .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 20px; }
      .work-card,
      .work-card:nth-child(1),
      .work-card:nth-child(2),
      .work-card:nth-child(3) { grid-column: span 1; margin-top: 0; }
      .work-card:nth-child(1) { grid-column: 1 / -1; }
      .work-card-media,
      .work-card:nth-child(2) .work-card-media,
      .work-card:nth-child(3) .work-card-media { aspect-ratio: 1.12 / 1; border-radius: 26px 26px 78px 26px; }
      .filter-bar { gap: 18px; }
    }
    @media (max-width: 560px) {
      .work-grid { grid-template-columns: 1fr; }
      .work-card,
      .work-card:nth-child(1),
      .work-card:nth-child(2),
      .work-card:nth-child(3) { grid-column: 1 / -1; }
      .work-card-media,
      .work-card:nth-child(2) .work-card-media,
      .work-card:nth-child(3) .work-card-media { aspect-ratio: 1.18 / 1; border-radius: 24px 24px 64px 24px; }
    }
    @media (max-width: 860px) {
      .hero { min-height: 100svh; padding-top: calc(var(--header) + 30px); }
    }
    @media (prefers-reduced-motion: reduce) {
      html.js .reveal-item,
      html.js .title-reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }
      .studio-image-stack img,
      .studio-image-stack figure:hover img { transform: none; transition: none; }
    }

    /* Keep the atmospheric effects to the moments that benefit from them. */
    .hero { background: var(--paper); }
    .hero::before { opacity: .055; }
    .site-header { color: var(--ink); }
    .site-header .brand-mark { background: #0a0a0a; overflow: visible; border-radius: 0; }
    .site-header .menu-button { color: var(--ink); }
    html[data-skin="nocturne"] .site-header { color: var(--ink); }
    html[data-skin="nocturne"] .hero { background: var(--paper); }
    .hero::before { z-index: 0; }
    .hero-grid { z-index: 2; }
    .hero-particles { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: .56; mix-blend-mode: multiply; pointer-events: none; transition: opacity 480ms ease; }
    html[data-skin="nocturne"] .hero-particles { opacity: .72; mix-blend-mode: screen; }
    .section--dark#studio { position: relative; isolation: isolate; overflow: clip; }
    .section--dark#studio::before,
    .section--dark#studio::after { position: absolute; inset: -18% -10%; content: ""; pointer-events: none; }
    .section--dark#studio::before {
      z-index: -2;
      background:
        radial-gradient(ellipse at 18% 32%, color-mix(in srgb, var(--lime) 25%, transparent), transparent 42%),
        radial-gradient(ellipse at 78% 62%, color-mix(in srgb, var(--surface) 66%, transparent), transparent 48%),
        radial-gradient(ellipse at 52% 110%, color-mix(in srgb, var(--lime) 13%, transparent), transparent 42%);
      filter: blur(34px) saturate(1.12);
      opacity: .64;
      transform: translate3d(-2%, 1%, 0) scale(1.06);
      animation: studio-shader-drift 18s ease-in-out infinite alternate;
    }
    .section--dark#studio::after {
      z-index: -1;
      inset: 4% -12% 6%;
      background: conic-gradient(from 205deg at 48% 50%, transparent 0 22%, color-mix(in srgb, var(--lime) 18%, transparent) 31%, transparent 42% 66%, color-mix(in srgb, var(--surface) 34%, transparent) 73%, transparent 84% 100%);
      filter: blur(24px);
      opacity: .34;
      mix-blend-mode: screen;
      mask-image: radial-gradient(ellipse at center, #000 0 42%, rgba(0,0,0,.7) 60%, transparent 86%);
      animation: studio-shader-turn 26s linear infinite;
    }
    .section--dark#studio > .container { position: relative; z-index: 1; }
    @keyframes studio-shader-drift { from { transform: translate3d(-2%, 1%, 0) scale(1.06); } to { transform: translate3d(2%, -2%, 0) scale(1.12); } }
    @keyframes studio-shader-turn { to { transform: rotate(360deg) scale(1.04); } }
    @media (prefers-reduced-motion: reduce) {
      .section--dark#studio::before,
      .section--dark#studio::after { animation: none; }
    }
    @media (min-width: 861px) {
      .hero .hero-actions { bottom: 24px; }
      .hero-meta { left: 11%; top: 4%; }
      .hero-utility { right: 11%; top: 4%; }
      .hero-mode { width: clamp(126px, 12vw, 176px); min-height: 86px; color: color-mix(in srgb, var(--hero-accent) 62%, var(--muted)); transform: rotate(var(--hero-tilt, 0deg)); }
      .hero-mode svg { width: 42px; height: 42px; padding: 5px; border: 1px solid color-mix(in srgb, var(--hero-accent) 42%, transparent); color: var(--hero-accent); }
      .hero-mode::after { display: none; }
      .hero-mode::before { width: 7px; height: 7px; background: var(--hero-accent); }
      .hero-mode:hover,
      .hero-mode:focus-visible,
      .hero-mode[aria-checked="true"] { color: var(--ink); transform: rotate(var(--hero-tilt, 0deg)); }
      .hero-mode:hover svg { transform: scale(1.03); }
      .hero-mode[aria-checked="true"] svg { border-color: var(--hero-accent); transform: scale(1.08); }
      .hero-mode--video { left: 14%; top: 18%; --hero-tilt: -5deg; }
      .hero-mode--ugc { left: 7%; top: 47%; --hero-tilt: -2deg; }
      .hero-mode--imagery { left: 17%; top: 75%; --hero-tilt: 5deg; }
      .hero-mode--3d { right: 14%; top: 18%; --hero-tilt: 5deg; }
      .hero-mode--configurator { right: 7%; top: 47%; --hero-tilt: 2deg; }
      .hero-mode--ar { right: 17%; top: 75%; --hero-tilt: -5deg; }
      .hero-scene.is-roulette .hero-mode[aria-checked="true"] { transform: rotate(var(--hero-tilt, 0deg)) scale(1.055); }
    }
    @media (max-width: 860px) {
      .hero-meta { left: 0; top: 0; }
      .hero-utility { right: 0; top: 0; }
      .hero-mode svg { width: 34px; height: 34px; color: var(--hero-accent); }
      .hero-mode::after { display: none; }
    }

    /* Final hero calibration: give the product more breathing room and let video dissolve into the scene. */
    /* Keep the desktop service rails consistent across browser heights. A short
       laptop viewport should not fall back to the older radial arrangement. */
    @media (min-width: 861px) {
      .hero-product-stage { width: min(52vw, 660px); }
      .hero-viewfinder { width: min(27vw, 330px); }
      .hero-mode {
        width: clamp(118px, 11vw, 150px);
        min-height: 76px;
        color: #171717;
        transform: none;
      }
      .hero-mode svg {
        width: 38px;
        height: 38px;
        color: #171717;
        border-color: color-mix(in srgb, #171717 38%, transparent);
      }
      .hero-mode::before { background: #171717; }
      .hero-mode::after { display: none !important; }
      .hero-mode:hover,
      .hero-mode:focus-visible,
      .hero-mode[aria-checked="true"] { color: #171717; transform: none; }
      .hero-mode:hover svg { transform: translateY(-1px) scale(1.04); }
      .hero-mode[aria-checked="true"] svg { transform: scale(1.08); }
      .hero-mode[aria-checked="true"]::before {
        background: color-mix(in srgb, var(--accent) 62%, #8a919b);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
      }
      .hero-scene.is-roulette .hero-mode[aria-checked="true"] { transform: scale(1.035); }
      .hero-mode--video,
      .hero-mode--ugc,
      .hero-mode--imagery { left: 1.5%; }
      .hero-mode--video { top: 18%; }
      .hero-mode--ugc { top: 48%; }
      .hero-mode--imagery { top: 78%; }
      .hero-mode--3d,
      .hero-mode--configurator,
      .hero-mode--ar { right: 1.5%; }
      .hero-mode--3d { top: 18%; }
      .hero-mode--configurator { top: 48%; }
      .hero-mode--ar { top: 78%; }
    }
    @media (min-width: 861px) {
      html[data-skin="nocturne"] .hero-mode,
      html[data-skin="nocturne"] .hero-mode:hover,
      html[data-skin="nocturne"] .hero-mode:focus-visible,
      html[data-skin="nocturne"] .hero-mode[aria-checked="true"] { color: var(--ink); }
      html[data-skin="nocturne"] .hero-mode svg { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 36%, transparent); }
      html[data-skin="nocturne"] .hero-mode::before { background: var(--ink); }
      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);
      }
      .hero-mode:focus-visible svg { outline-color: color-mix(in srgb, currentColor 72%, transparent); }
    }
    @media (max-width: 860px) {
      .hero-product-stage { width: min(96%, 620px); }
    }
    .hero-video-frame video {
      -webkit-mask-image: none;
      mask-image: none;
    }
    .hero-scene[data-mode="ugc"] .hero-video-frame video,
    .hero-scene[data-mode="ar"] .hero-video-frame video {
      border: 0;
      border-radius: 0;
      -webkit-mask-image: none;
      mask-image: none;
    }
    .hero-mode:focus-visible { outline: 0; }
    .hero-mode:focus { outline: 0; box-shadow: none; }
    .hero-mode:focus-visible svg { outline: 2px solid color-mix(in srgb, var(--hero-accent) 72%, transparent); outline-offset: 5px; }
    .theme-control { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
    .theme-control > span { margin-right: 4px; color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
    .theme-control button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; font-family: var(--mono); font-size: .61rem; letter-spacing: .06em; text-transform: uppercase; }
    .theme-control button:hover,
    .theme-control button:focus-visible { border-color: var(--ink); }
    .theme-control button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
    html[data-skin="nocturne"] .theme-control button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
    @media (max-width: 700px) {
      .theme-control { width: 100%; margin-left: 0; padding-top: 16px; border-top: 1px solid var(--line); }
    }

    /* Atmospheric pass: the page should breathe as it moves, not flip between static blocks. */
    .hero-copy {
      opacity: var(--hero-copy-opacity, 1);
      filter: blur(var(--hero-copy-blur, 0px));
      transform: translate3d(0, var(--hero-copy-y, 0px), 0);
      will-change: opacity, filter, transform;
    }
    .hero-scene.is-resolving .hero-product-stage { opacity: .22; filter: blur(6px) grayscale(.16); }
    .hero-scene.is-switching .hero-media-visual { opacity: .34; filter: blur(3px) saturate(.76); transform: scale(.92); }
    .hero-scene.is-resolving .hero-media-visual {
      opacity: .08;
      filter: blur(7px) grayscale(.16);
      transform: translateY(9px) scale(.54);
      transition-duration: 220ms, 420ms, 420ms;
    }
    .hero-scene.is-resolving .hero-roulette-loader { opacity: .22; transform: translate(-50%, -50%) scale(.94); }
    .hero-scene.is-resolving .hero-roulette-loader-label { opacity: 0; transition: opacity 180ms ease; }
    .hero-scene.is-revealing .hero-media-visual { animation: hero-media-resolve 920ms cubic-bezier(.16,1,.3,1) both; }
    @keyframes hero-media-resolve {
      0% { opacity: .08; filter: blur(7px) grayscale(.16); transform: translateY(9px) scale(.54); }
      62% { opacity: .92; filter: blur(1.6px) grayscale(.035); transform: translateY(-2px) scale(1.018); }
      100% { opacity: 1; filter: none; transform: translateY(0) scale(1); }
    }

    .credibility,
    .client-proof,
    #work,
    #packs,
    #process { position: relative; isolation: isolate; overflow: clip; }
    .credibility > .container,
    .client-proof > .container,
    #work > .container,
    #packs > .container,
    #process > .container { position: relative; z-index: 1; }
    .credibility .section-shader { opacity: .12; mix-blend-mode: multiply; }
    .client-proof .section-shader { opacity: .16; mix-blend-mode: screen; }
    #work .section-shader,
    #packs .section-shader { opacity: .1; }
    #process .section-shader { opacity: .2; mix-blend-mode: screen; }

    .client-proof-layout { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: clamp(42px, 8vw, 128px); align-items: center; }
    .client-proof-head { display: block; padding: 0; border: 0; }
    .client-proof-head h2 { max-width: 12ch; margin-top: 18px; }
    .client-proof-head > p { margin-top: 20px; }
    .client-review-stage { position: relative; min-height: 172px; margin-top: 38px; }
    .client-review { position: absolute; inset: 0; min-height: 0; display: flex; padding: 0; border: 0; opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 600ms ease, transform 760ms var(--motion-ease); pointer-events: none; }
    .client-review.is-active { opacity: 1; transform: none; pointer-events: auto; }
    html.js .client-review.reveal-item:not(.is-active) { opacity: 0; transform: translate3d(0, 18px, 0); }
    html.js .client-review.reveal-item.is-active { opacity: 1; transform: none; }
    .client-review blockquote { max-width: 22ch; font-size: clamp(1.35rem, 2.25vw, 2rem); }
    .client-review footer { margin-top: auto; }
    .client-review-controls { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
    .client-review-status { display: flex; min-width: 112px; align-items: center; gap: 9px; margin: 0; color: color-mix(in srgb, var(--paper) 64%, transparent); font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
    .client-review-status::before { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); content: ""; }
    .client-review-control { display: inline-grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, var(--paper) 26%, transparent); border-radius: 50%; background: transparent; color: var(--paper); font-size: .9rem; line-height: 1; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; }
    .client-review-control:hover,
    .client-review-control:focus-visible { background: var(--paper); color: var(--dark); }
    .client-review-control:active { transform: scale(.94); }
    .client-logo-rail { min-width: 0; display: grid; gap: 12px; }
    .client-logo-rail-label { color: color-mix(in srgb, var(--paper) 62%, transparent); font-family: var(--mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; }
    .client-logo-row { position: relative; overflow: hidden; border-block: 1px solid color-mix(in srgb, var(--paper) 19%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    .client-logo-track { display: flex; width: max-content; align-items: center; animation: client-logo-run 30s linear infinite; }
    .client-logo-track--reverse { animation-direction: reverse; animation-duration: 34s; }
    .client-logo-pill { display: inline-flex; min-height: 70px; align-items: center; padding: 0 26px; color: color-mix(in srgb, var(--paper) 88%, transparent); font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.85rem); font-weight: 600; letter-spacing: -.04em; white-space: nowrap; }
    .client-logo-pill::after { width: 7px; height: 7px; margin-left: 26px; border-radius: 50%; background: var(--lime); content: ""; }
    @keyframes client-logo-run { to { transform: translateX(-50%); } }

    .site-footer { padding-block: clamp(28px, 5vw, 64px); background: var(--paper); }
    .footer-shell { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 5vw, 70px); border-radius: 32px; background: var(--dark); color: var(--paper); box-shadow: 0 30px 90px color-mix(in srgb, var(--ink) 12%, transparent); }
    .footer-grid { position: relative; z-index: 1; grid-template-columns: minmax(190px, .78fr) minmax(220px, 1.25fr) repeat(3, minmax(100px, .48fr)); gap: clamp(22px, 4vw, 64px); padding-bottom: 52px; border-bottom: 1px solid var(--dark-line); }
    .footer-intro .brand { color: var(--paper); }
    .footer-intro .brand-mark { background: var(--paper); }
    .footer-intro .brand-mark::after { background: var(--lime); }
    .footer-intro h2 { max-width: 13ch; margin-top: clamp(70px, 10vw, 170px); color: var(--paper); font-size: clamp(2rem, 3.1vw, 3.35rem); }
    .footer-intro p { color: color-mix(in srgb, var(--paper) 62%, transparent); }
    .footer-simulation { position: relative; min-height: 270px; overflow: hidden; border-radius: 26px; background: color-mix(in srgb, var(--dark-2) 74%, transparent); }
    .footer-simulation .section-shader { opacity: .9; mix-blend-mode: screen; }
    .footer-simulation::before { position: absolute; z-index: 1; left: 22px; top: 20px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--paper) 72%, transparent); content: "Motion field"; font-family: var(--mono); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; }
    .footer-simulation::after { position: absolute; z-index: 1; right: 22px; bottom: 20px; width: 46px; height: 46px; border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); border-radius: 50%; box-shadow: 0 0 0 9px color-mix(in srgb, var(--paper) 6%, transparent); content: ""; }
    .footer-shell .footer-col h3 { color: color-mix(in srgb, var(--paper) 76%, transparent); }
    .footer-shell .footer-col ul { color: color-mix(in srgb, var(--paper) 66%, transparent); }
    .footer-shell .footer-col a:hover { color: var(--paper); }
    .footer-bottom { position: relative; z-index: 1; border: 0; color: color-mix(in srgb, var(--paper) 58%, transparent); }
    .footer-shell .theme-control > span { color: color-mix(in srgb, var(--paper) 58%, transparent); }
    .footer-shell .theme-control button { border-color: color-mix(in srgb, var(--paper) 24%, transparent); }
    .footer-shell .theme-control button:hover,
    .footer-shell .theme-control button:focus-visible { border-color: var(--paper); }

    .pack-grid { gap: clamp(14px, 1.8vw, 24px); border: 0; }
    .pack {
      position: relative;
      border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
      border-radius: 26px;
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      backdrop-filter: blur(16px);
      box-shadow: 0 18px 42px -8px color-mix(in srgb, var(--ink) 8%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.4);
      transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms ease;
    }
    .pack:hover {
      transform: translateY(-5px);
      border-color: color-mix(in srgb, var(--accent) 35%, transparent);
      box-shadow: 0 28px 60px -12px color-mix(in srgb, var(--ink) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
    }
    .pack:first-child,
    .pack--primary:first-child { border-left: 1px solid var(--line); }
    .pack--primary {
      border-color: var(--accent);
      border-top-width: 3px;
      box-shadow: 0 24px 60px -10px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    .pack--primary::before {
      position: absolute;
      top: 0;
      right: 24px;
      padding: 4px 10px;
      border-radius: 0 0 10px 10px;
      background: var(--accent);
      color: #ffffff;
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 700;
      content: "Popular";
    }
    .credibility-item { border-radius: 22px; }
    .button,
    .filter-button { border-radius: 999px; }

    @media (max-width: 1100px) {
      .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
      .footer-intro,
      .footer-simulation { grid-column: 1 / -1; }
      .footer-intro h2 { margin-top: 48px; }
    }
    @media (max-width: 860px) {
      .client-proof-layout { grid-template-columns: 1fr; gap: 44px; }
      .client-review-stage { min-height: 156px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-simulation { min-height: 230px; }
    }
    @media (max-width: 560px) {
      .footer-shell { padding: 24px 20px; border-radius: 24px; }
      .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 30px; }
      .footer-intro,
      .footer-simulation { grid-column: auto; }
      .footer-intro h2 { margin-top: 44px; }
      .footer-bottom { display: grid; }
      .client-logo-pill { min-height: 58px; padding-inline: 18px; font-size: 1.12rem; }
      .client-logo-pill::after { margin-left: 18px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .client-logo-track { animation: none; }
      .hero-roulette-loader::before { animation: none; }
      .hero-copy { filter: none; transform: none; transition: none; }
      .hero-scene.is-resolving .hero-media-visual,
      .hero-scene.is-revealing .hero-media-visual { animation: none; transition: none; }
    }

    /* Taste pass: a web frosted-glass approximation for navigation. The surface stays
       translucent over the hero, then becomes slightly denser once content moves behind it. */
    .site-header {
      height: calc(var(--header) + 16px);
      padding-top: 8px;
      pointer-events: none;
    }
    .header-inner {
      position: relative;
      isolation: isolate;
      width: calc(100% - 2 * var(--gutter));
      max-width: calc(var(--max) + 2 * var(--gutter));
      margin-inline: auto;
      height: 56px;
      padding-inline: 12px 10px;
      border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
      border-radius: 999px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--paper) 66%, transparent), color-mix(in srgb, var(--surface) 30%, transparent)),
        color-mix(in srgb, var(--paper) 38%, transparent);
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--paper) 40%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--ink) 8%, transparent),
        0 16px 40px color-mix(in srgb, var(--ink) 8%, transparent);
      -webkit-backdrop-filter: blur(22px) saturate(1.24);
      backdrop-filter: blur(22px) saturate(1.24);
      pointer-events: auto;
      transition: background 260ms var(--motion-ease), border-color 260ms var(--motion-ease), box-shadow 260ms var(--motion-ease);
    }
    .header-inner::before,
    .header-inner::after {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      content: "";
      pointer-events: none;
    }
    .header-inner::before {
      z-index: -1;
      background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--paper) 52%, transparent), transparent 35%),
        linear-gradient(90deg, color-mix(in srgb, var(--paper) 12%, transparent), transparent 44%, color-mix(in srgb, var(--paper) 10%, transparent));
    }
    .header-inner::after {
      inset: 1px;
      border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
    }
    .site-header.is-scrolled { background: transparent; box-shadow: none; backdrop-filter: none; }
    .site-header.is-scrolled .header-inner {
      border-color: color-mix(in srgb, var(--ink) 18%, transparent);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--paper) 68%, transparent), color-mix(in srgb, var(--surface) 38%, transparent)),
        color-mix(in srgb, var(--paper) 54%, transparent);
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--paper) 42%, transparent),
        0 14px 36px color-mix(in srgb, var(--ink) 12%, transparent);
      -webkit-backdrop-filter: blur(24px) saturate(1.16);
      backdrop-filter: blur(24px) saturate(1.16);
    }
    .site-header .brand,
    .site-header .site-nav,
    .site-header .menu-button { position: relative; z-index: 1; }
    .site-header .brand-mark { overflow: visible; border-radius: 0; }
    .site-header .site-nav a {
      border-radius: 999px;
      transition: background-color 220ms var(--motion-ease), color 220ms var(--motion-ease), transform 220ms var(--motion-ease);
    }
    .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: color-mix(in srgb, var(--paper) 30%, transparent);
      text-decoration: none;
    }
    .site-header .site-nav .nav-contact {
      box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 28%, transparent);
    }
    .site-header .menu-button { border-radius: 999px; transition: background-color 220ms var(--motion-ease), transform 220ms var(--motion-ease); }
    .site-header .menu-button:hover,
    .site-header .menu-button:focus-visible { background: color-mix(in srgb, var(--paper) 26%, transparent); }
    .site-header .site-nav a:active,
    .site-header .menu-button:active { transform: translateY(1px) scale(.985); }

    /* The same shape language carries into the content, but only where elevation or
       feedback communicates a real interaction. */
    .spotlight-surface {
      position: relative;
      isolation: isolate;
      transition: transform 320ms var(--motion-ease), background-color 260ms var(--motion-ease), box-shadow 320ms var(--motion-ease);
    }
    .spotlight-surface::before {
      position: absolute;
      z-index: 0;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(210px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), color-mix(in srgb, var(--paper) 22%, transparent), transparent 72%);
      content: "";
      opacity: 0;
      pointer-events: none;
      transition: opacity 260ms ease;
    }
    .spotlight-surface > * { position: relative; z-index: 1; }
    .spotlight-surface:hover::before,
    .spotlight-surface:focus-within::before { opacity: .72; }
    .credibility-item:hover,
    .pack:hover,
    .work-card:hover { transform: translateY(-5px); }
    .credibility-item:hover { box-shadow: 0 18px 38px color-mix(in srgb, var(--ink) 9%, transparent); }
    .pack:hover { box-shadow: 0 22px 46px color-mix(in srgb, var(--ink) 11%, transparent); }
    .work-card:hover .work-card-media { box-shadow: 0 30px 68px color-mix(in srgb, var(--ink) 16%, transparent); }
    .workflow-step,
    .studio-service { border-radius: 20px; transition: transform 320ms var(--motion-ease), background-color 260ms var(--motion-ease), box-shadow 320ms var(--motion-ease); }
    .workflow-step:hover { transform: translateY(-5px); background: color-mix(in srgb, var(--paper) 6%, transparent); box-shadow: 0 18px 38px color-mix(in srgb, var(--paper) 6%, transparent); }
    .studio-service:hover { transform: translateX(8px); background: color-mix(in srgb, var(--paper) 7%, transparent); }
    .studio-service {
      width: 100%;
      padding: 17px 16px;
      border: 0;
      border-bottom: 1px solid var(--dark-line);
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
    }
    .studio-service[aria-pressed="true"] {
      background: color-mix(in srgb, var(--paper) 8%, transparent);
      box-shadow: inset 3px 0 0 var(--lime);
    }
    .studio-service[aria-pressed="true"] strong { color: var(--lime); }
.studio-service-status {
      max-width: 42ch;
      margin-top: 14px;
      padding-inline: 16px;
      color: color-mix(in srgb, var(--paper) 62%, transparent);
      font-family: var(--mono);
      font-size: .61rem;
      letter-spacing: .08em;
      line-height: 1.6;
      text-transform: uppercase;
    }
    .studio-variants { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 18px 16px 0; color: color-mix(in srgb, var(--paper) 58%, transparent); font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
    .studio-variant { width: 24px; height: 24px; padding: 0; border: 1px solid color-mix(in srgb, var(--paper) 32%, transparent); border-radius: 50%; background: var(--variant); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dark) 24%, transparent); transition: transform 180ms ease, box-shadow 180ms ease; }
    .studio-variant:hover,
    .studio-variant:focus-visible { transform: scale(1.12); }
    .studio-variant[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--dark), 0 0 0 4px var(--lime); }
    .studio-image-stack figure[data-studio-visual] {
      opacity: .62;
      transition: opacity 360ms var(--motion-ease), transform 420ms var(--motion-ease), filter 360ms ease;
    }
    .studio-image-stack figure[data-studio-visual].is-service-focus {
      opacity: 1;
      filter: saturate(1.04);
      transform: translateY(-4px);
    }
    .studio-image-stack figure[data-studio-visual="master"] { min-height: 100%; }
    .studio-model-viewer { position: absolute; z-index: 1; inset: 4% 3% 5%; width: 94%; height: 91%; opacity: 0; border-radius: 26px 26px 112px 26px; background: transparent; --poster-color: transparent; pointer-events: none; transition: opacity 720ms var(--motion-ease); }
    .studio-image-stack figure[data-studio-visual="master"].is-model-ready .studio-model-viewer { opacity: 1; pointer-events: auto; }
    .studio-image-stack figure[data-studio-visual="master"].is-model-ready > img { opacity: .18; filter: blur(2px); }
    .studio-image-stack figure[data-studio-visual="master"].is-model-ready figcaption { z-index: 2; }
    .studio-model-viewer::part(default-progress-bar) { background: var(--lime); }
    .client-review[aria-hidden="true"] { visibility: hidden; }
    .site-nav .nav-contact,
    .skip-link,
    .pack .button { border-color: var(--action); background: var(--action); color: var(--action-ink); }
    .site-nav .nav-contact:hover,
    .site-nav .nav-contact:focus-visible {
      border-color: var(--cta-hover, #3357d7);
      background: var(--cta-hover, #3357d7);
      color: var(--action-ink);
      box-shadow: none;
      filter: none;
    }
    .pack .button:hover,
    .pack .button:focus-visible { border-color: var(--action-hover); background: var(--action-hover); color: var(--action-ink); }
    .hero-mode { color: var(--ink); }
    .hero-mode svg { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
    .hero-mode::before { background: var(--ink); }
    .hero-mode:hover svg,
    .hero-mode:focus-visible svg { border-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--ink); }
    .hero-mode[aria-checked="true"] { background: transparent; color: var(--ink); }
    .hero-mode[aria-checked="true"] svg { border-color: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--ink); }
    .hero-mode[aria-checked="true"]::before { background: color-mix(in srgb, var(--accent) 62%, #8a919b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
    .filter-button[aria-pressed="true"] { border-color: var(--action); color: var(--action); }
    .outcome-jump[aria-current="step"] {
      background: transparent;
      color: var(--dark-ink, var(--paper));
    }
    .outcome-jump[aria-current="step"] strong {
      box-shadow: inset 0 -2px 0 var(--accent, var(--lime));
    }
    .outcome-card .outcome-card-label {
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--accent, #3d84ff);
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .studio-service[aria-pressed="true"] { background: color-mix(in srgb, var(--action) 18%, transparent); box-shadow: inset 3px 0 0 var(--action); }
    .studio-service[aria-pressed="true"] strong { color: var(--action); }
    .studio-variant[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--dark), 0 0 0 4px var(--action); }
    .theme-control button[aria-pressed="true"] { border-color: var(--action); background: var(--action); color: var(--action-ink); }
    @media (min-width: 861px) and (max-height: 820px) {
      .hero-product-stage { top: 48%; width: min(50vw, 620px); }
    }
    .button:active,
    .filter-button:active,
    .hero-mode:active { transform: translateY(1px) scale(.985); }

    /* Shared semantic contrast: dark sections stay dark in both skins. */
    .outcome-tour,
    .section--dark { color: var(--dark-ink); }
    .section--dark .eyebrow,
    .section--dark .muted { color: color-mix(in srgb, var(--dark-ink) 68%, transparent); }
    .studio-image-stack figcaption { color: var(--dark-ink); }
    .client-review-status { color: color-mix(in srgb, var(--proof-ink) 64%, transparent); }
    .client-review-control { border-color: color-mix(in srgb, var(--proof-ink) 26%, transparent); color: var(--proof-ink); }
    .client-review-control:hover,
    .client-review-control:focus-visible { background: var(--proof-ink); color: var(--proof-bg); }
    .footer-shell { color: var(--dark-ink); }
    .footer-intro .brand,
    .footer-intro h2 { color: var(--dark-ink); }
    .footer-intro .brand-mark { background: var(--dark-ink); }
    .footer-intro p { color: color-mix(in srgb, var(--dark-ink) 62%, transparent); }
    .footer-simulation::before { border-color: color-mix(in srgb, var(--dark-ink) 22%, transparent); color: color-mix(in srgb, var(--dark-ink) 72%, transparent); }
    .footer-simulation::after { border-color: color-mix(in srgb, var(--dark-ink) 30%, transparent); box-shadow: 0 0 0 9px color-mix(in srgb, var(--dark-ink) 6%, transparent); }
    .footer-shell .footer-col h3 { color: color-mix(in srgb, var(--dark-ink) 76%, transparent); }
    .footer-shell .footer-col ul { color: color-mix(in srgb, var(--dark-ink) 66%, transparent); }
    .footer-shell .footer-col a:hover { color: var(--dark-ink); }
    .footer-bottom,
    .footer-shell .theme-control > span { color: color-mix(in srgb, var(--dark-ink) 58%, transparent); }
    .footer-shell .theme-control button { border-color: color-mix(in srgb, var(--dark-ink) 24%, transparent); }
    .footer-shell .theme-control button:hover,
    .footer-shell .theme-control button:focus-visible { border-color: var(--dark-ink); }
    .hero-particles { opacity: .64; mix-blend-mode: normal; }
    .global-shader-field { opacity: .24; mix-blend-mode: soft-light; }

    /* The standard is a connected sequence, not a four-cell dashboard. */
    .credibility-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; border: 0; padding: 12px 14px 18px; }
    .credibility-grid::before { position: absolute; z-index: 0; inset: 32px 13% 30px; border: 1px dashed color-mix(in srgb, var(--ink) 24%, transparent); border-radius: 42% 58% 52% 48% / 48% 42% 58% 52%; content: ""; pointer-events: none; }
    .credibility-grid::after { position: absolute; z-index: 0; top: 19%; bottom: 17%; left: 50%; width: 1px; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ink) 30%, transparent) 0 3px, transparent 3px 9px); content: ""; opacity: .6; pointer-events: none; }
    .credibility-item { z-index: 1; min-height: 238px; gap: 18px; padding: 20px 20px 22px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 24px 24px 54px 24px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 84%, transparent), color-mix(in srgb, var(--paper) 58%, transparent)); box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--paper) 62%, transparent); transition: transform 320ms var(--motion-ease), box-shadow 320ms var(--motion-ease), background-color 260ms ease; }
    .credibility-item:nth-of-type(2) { margin-top: 42px; }
    .credibility-item:nth-of-type(3) { margin-top: 8px; }
    .credibility-item:nth-of-type(4) { margin-top: 54px; }
    .credibility-item:hover { background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--paper) 72%, transparent)); box-shadow: 0 24px 54px color-mix(in srgb, var(--ink) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--paper) 70%, transparent); transform: translateY(-5px); }
    .credibility-item:nth-of-type(2):hover { transform: translateY(37px); }
    .credibility-item:nth-of-type(3):hover { transform: translateY(3px); }
    .credibility-item:nth-of-type(4):hover { transform: translateY(49px); }
    .credibility-item::before { position: absolute; z-index: 3; left: -10px; top: 50%; width: 18px; height: 18px; border: 1px solid var(--action); border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 5px color-mix(in srgb, var(--action) 15%, transparent); content: attr(data-node); transform: translateY(-50%); }
    .credibility-item::after { right: 20px; bottom: 18px; left: 20px; background: linear-gradient(90deg, color-mix(in srgb, var(--line) 72%, transparent) 0 72%, var(--action) 72% 100%); }
    .credibility-item-head { position: relative; z-index: 2; }
    .credibility-index { color: var(--action); }
    .credibility-item-content { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; align-items: end; max-width: none !important; min-height: 128px; }
    .credibility-item strong { margin-top: 0; font-size: clamp(1.2rem, 1.7vw, 1.65rem); line-height: 1.02; }
    .credibility-item-content > div:first-child > span { display: block; margin-top: 9px; color: var(--muted); font-size: .82rem; line-height: 1.42; }
    .standard-media { position: relative; min-width: 0; aspect-ratio: 1.08; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 18px 18px 38px 18px; background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 56%, transparent); }
    .standard-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(.98); transition: transform 600ms var(--motion-ease), filter 360ms ease; }
    .credibility-item:hover .standard-media img { filter: saturate(1) contrast(1.02); transform: scale(1.045); }
    .standard-media--product img { object-position: 58% 56%; }
    .standard-media--industrial img { object-position: 50% 50%; }
    .standard-media--cad img { object-position: 54% 45%; }
    .standard-media-tag { position: absolute; right: 7px; bottom: 7px; padding: 4px 6px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 82%, transparent); color: var(--ink); font-family: var(--mono); font-size: .48rem; letter-spacing: .07em; text-transform: uppercase; }
    .standard-media--files { display: grid; align-content: center; gap: 9px; padding: 12px; }
    .standard-file-line { display: flex; align-items: center; gap: 6px; }
    .standard-file-line i { width: 9px; height: 11px; border: 1px solid var(--action); border-radius: 2px; background: color-mix(in srgb, var(--action) 12%, transparent); }
    .standard-file-line b { display: block; width: 60%; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
    .standard-file-line:nth-child(2) b { width: 80%; }
    .standard-file-line:nth-child(3) b { width: 52%; }
    .standard-file-line:nth-child(4) b { width: 68%; }
    @media (max-width: 860px) {
      .credibility-grid { grid-template-columns: 1fr; gap: 18px; padding: 0 0 4px 12px; }
      .credibility-grid::before { inset: 24px 9% 24px 4%; border-radius: 50%; }
      .credibility-grid::after { top: 8%; bottom: 8%; left: 3px; }
      .credibility-item,
      .credibility-item:nth-of-type(2),
      .credibility-item:nth-of-type(3),
      .credibility-item:nth-of-type(4) { margin-top: 0; }
      .credibility-item:hover,
      .credibility-item:nth-of-type(2):hover,
      .credibility-item:nth-of-type(3):hover,
      .credibility-item:nth-of-type(4):hover { transform: translateY(-3px); }
      .credibility-item::before { left: -18px; }
    }
    @media (max-width: 560px) {
      .credibility-item { min-height: 212px; padding: 18px 16px 20px; border-radius: 20px 20px 42px 20px; }
      .credibility-item-content { grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; min-height: 116px; }
      .credibility-item-content > div:first-child > span { font-size: .78rem; }
      .standard-media { border-radius: 14px 14px 30px 14px; }
      .credibility-grid::before { inset: 18px 5% 18px 2%; }
    }

    /* Client proof: moving names above one focused, editorial review stage. */
    .client-proof-shell { position: relative; z-index: 1; }
    .client-proof-shell > .client-logo-rail { gap: 10px; margin-bottom: clamp(26px, 4vw, 48px); }
    .client-logo-rail-label { color: color-mix(in srgb, var(--proof-ink) 62%, transparent); }
    .client-logo-row { border-color: color-mix(in srgb, var(--proof-ink) 19%, transparent); }
    .client-logo-pill { color: color-mix(in srgb, var(--proof-ink) 88%, transparent); }
    .client-review-showcase { position: relative; display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 88px); min-height: 448px; padding: clamp(18px, 2vw, 26px); border: 1px solid color-mix(in srgb, var(--proof-ink) 18%, transparent); border-radius: 32px 32px 120px 32px; background: linear-gradient(135deg, color-mix(in srgb, var(--proof-surface) 92%, transparent), color-mix(in srgb, var(--proof-bg) 82%, transparent)); box-shadow: 0 26px 70px color-mix(in srgb, var(--proof-ink) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--proof-ink) 16%, transparent); overflow: hidden; }
    .client-review-showcase::before { position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at 12% 25%, color-mix(in srgb, var(--hero-accent) 19%, transparent), transparent 34%), linear-gradient(115deg, transparent 0 48%, color-mix(in srgb, var(--proof-ink) 4%, transparent) 49%, transparent 50%); content: ""; pointer-events: none; }
    .client-review-visual { position: relative; z-index: 1; min-height: 400px; overflow: hidden; border-radius: 24px 24px 88px 24px; background: color-mix(in srgb, var(--proof-surface) 80%, transparent); }
    .client-review-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--proof-bg) 76%, transparent) 100%); content: ""; pointer-events: none; }
    .client-review-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(1.04); opacity: .88; transform: scale(1.02); transition: transform 900ms var(--motion-ease), filter 500ms ease; }
    .client-review-showcase:hover .client-review-visual img { filter: saturate(.92) contrast(1.06); transform: scale(1.055); }
    .client-review-visual span { position: absolute; z-index: 2; left: 22px; bottom: 20px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--proof-ink) 22%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--proof-ink) 78%, transparent); font-family: var(--mono); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; }
    .client-review-showcase .client-proof-copy { position: relative; z-index: 1; align-self: center; padding: clamp(12px, 2vw, 26px) clamp(8px, 2vw, 22px) clamp(22px, 3vw, 40px) 0; }
    .client-review-showcase .client-proof-head { align-items: start; border-bottom: 0; padding-bottom: 0; }
    .client-review-showcase .client-proof-head h2 { max-width: 12ch; margin-top: 16px; font-size: clamp(2.25rem, 4.2vw, 4.6rem); line-height: .93; }
    .client-review-showcase .client-proof-head > p:last-child { max-width: 36ch; margin-top: 18px; color: color-mix(in srgb, var(--proof-ink) 66%, transparent); }
    .client-review-showcase .client-review-stage { min-height: 166px; margin-top: 34px; }
    .client-review-showcase .client-review blockquote { max-width: 22ch; font-size: clamp(1.5rem, 2.6vw, 2.45rem); line-height: 1.04; }
    .client-review-showcase .client-review footer { color: color-mix(in srgb, var(--proof-ink) 66%, transparent); }
    .client-review-showcase .client-review strong { color: var(--proof-ink); }
    .client-review-showcase .client-review-controls { margin-top: 16px; }
    .client-review-showcase .client-review-control { width: 36px; height: 36px; }
    .client-review-showcase .client-review-status { color: color-mix(in srgb, var(--proof-ink) 62%, transparent); }
    @media (max-width: 860px) {
      .client-review-showcase { grid-template-columns: 1fr; gap: 22px; min-height: 0; border-radius: 26px 26px 82px 26px; }
      .client-review-visual { min-height: 260px; max-height: 360px; border-radius: 20px 20px 66px 20px; }
      .client-review-showcase .client-proof-copy { padding: 10px 8px 24px; }
      .client-review-showcase .client-proof-head h2 { max-width: 14ch; }
    }
    @media (max-width: 560px) {
      .client-proof-shell > .client-logo-rail { margin-bottom: 22px; }
      .client-logo-pill { min-height: 54px; padding-inline: 18px; font-size: 1.05rem; }
      .client-logo-pill::after { width: 6px; height: 6px; margin-left: 18px; }
      .client-review-showcase { padding: 12px; }
      .client-review-visual { min-height: 224px; }
      .client-review-showcase .client-proof-head h2 { font-size: clamp(2.15rem, 11vw, 3.15rem); }
      .client-review-showcase .client-review-stage { min-height: 194px; margin-top: 28px; }
    }

    .work-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 20px;
      padding-top: clamp(24px, 3.5vw, 44px);
      margin-bottom: clamp(20px, 3vw, 36px);
      border-top: 0;
    }
    .work-head-title h2 {
      max-width: 28ch;
      margin-top: 12px;
      font-size: clamp(2.4rem, 4.8vw, 4.4rem);
      line-height: 1.04;
      letter-spacing: -0.04em;
    }
    .work-head-side {
      display: flex;
      align-items: flex-end;
      padding-bottom: 4px;
    }
    .work-head-side .filter-bar {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px;
      border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--surface) 90%, transparent);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
      margin-top: 0;
    }
    .work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(158px, 1fr); gap: 14px; margin-top: clamp(30px, 4vw, 48px); }
    .work-card,
    .work-card:nth-child(1),
    .work-card:nth-child(2),
    .work-card:nth-child(3),
    .work-card:nth-child(4),
    .work-card:nth-child(5),
    .work-card:nth-child(6) { position: relative; min-width: 0; min-height: 176px; grid-column: auto; grid-row: auto; margin-top: 0; overflow: hidden; border: 0; border-radius: 26px 26px 72px 26px; background: var(--dark); box-shadow: 0 20px 46px color-mix(in srgb, var(--ink) 10%, transparent); transition: transform 320ms var(--motion-ease), box-shadow 320ms var(--motion-ease); }
    .work-card:nth-child(1) { grid-column: 1; grid-row: span 2; min-height: 348px; }
    .work-card:nth-child(2) { grid-column: 2; grid-row: span 1; }
    .work-card:nth-child(3) { grid-column: 3 / span 2; grid-row: span 1; }
    .work-card:nth-child(4) { grid-column: 2; grid-row: span 1; }
    .work-card:nth-child(5) { grid-column: 3; grid-row: span 1; }
    .work-card:nth-child(6) { grid-column: 4; grid-row: span 1; }
    .work-card::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--dark) 10%, transparent) 0%, transparent 34%, color-mix(in srgb, var(--dark) 86%, transparent) 100%); content: ""; pointer-events: none; }
    .work-card-media,
    .work-card:nth-child(2) .work-card-media,
    .work-card:nth-child(3) .work-card-media { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: inherit; background: var(--dark); box-shadow: none; }
    .work-card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.04); transition: transform 700ms var(--motion-ease), filter 420ms ease; }
    .work-card:hover,
    .work-card:focus-within { transform: translateY(-5px); box-shadow: 0 28px 60px color-mix(in srgb, var(--ink) 16%, transparent); }
    .work-card:hover .work-card-media img,
    .work-card:focus-within .work-card-media img { filter: saturate(1) contrast(1.06); transform: scale(1.045); }
    .work-card-copy { position: absolute; z-index: 2; right: 16px; bottom: 16px; left: 16px; padding: 0; color: var(--dark-ink); }
    .work-card-copy h3 { max-width: 15ch; color: var(--dark-ink); font-size: clamp(1.15rem, 1.8vw, 1.7rem); line-height: 1; }
    .work-card-copy p { max-height: 0; margin: 0; overflow: hidden; color: color-mix(in srgb, var(--dark-ink) 74%, transparent); opacity: 0; font-size: .82rem; transition: max-height 340ms ease, opacity 260ms ease, margin 340ms ease; }
    .work-card:hover .work-card-copy p,
    .work-card:focus-within .work-card-copy p { max-height: 4em; margin-top: 8px; opacity: 1; }
    .work-card-copy ul { max-height: 0; margin: 0; overflow: hidden; opacity: 0; }
    .work-card .placeholder-label { top: 14px; right: auto; bottom: auto; left: 14px; z-index: 3; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--dark-ink) 26%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--dark) 72%, transparent); color: color-mix(in srgb, var(--dark-ink) 86%, transparent); backdrop-filter: blur(12px); }
    .work-card-arrow { position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid color-mix(in srgb, var(--dark-ink) 34%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--dark) 56%, transparent); color: var(--dark-ink); backdrop-filter: blur(12px); }
    .work-note { margin-top: 22px; padding: 16px 0 0; border-top: 1px solid var(--line); border-bottom: 0; border-left: 0; background: transparent; }
    @media (max-width: 1100px) {
      .work-head { grid-template-columns: 1fr; gap: 20px; }
      .work-head-side .filter-bar { justify-content: flex-start; }
    }
    @media (max-width: 860px) {
      .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(164px, 1fr); }
      .work-card:nth-child(1),
      .work-card:nth-child(2),
      .work-card:nth-child(3),
      .work-card:nth-child(4),
      .work-card:nth-child(5),
      .work-card:nth-child(6) { grid-column: auto; grid-row: auto; min-height: 210px; }
      .work-card:nth-child(1),
      .work-card:nth-child(3) { grid-column: span 2; }
    }
    @media (max-width: 560px) {
      .work-head-title h2 { font-size: clamp(2.55rem, 12vw, 4rem); }
      .work-head-side .filter-bar { gap: 16px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
      .work-grid { grid-template-columns: 1fr; gap: 12px; }
      .work-card:nth-child(1),
      .work-card:nth-child(2),
      .work-card:nth-child(3),
      .work-card:nth-child(4),
      .work-card:nth-child(5),
      .work-card:nth-child(6) { grid-column: auto; min-height: 235px; }
    }

    @media (max-width: 860px) {
      .site-header { height: calc(var(--header) + 12px); padding-top: 8px; }
      .header-inner { height: 56px; padding-inline: 12px 8px; }
      .site-header .site-nav {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        left: 0;
        padding: 10px;
        border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
        border-radius: 22px;
        background: color-mix(in srgb, var(--paper) 92%, transparent);
        box-shadow: 0 18px 42px color-mix(in srgb, var(--ink) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--paper) 36%, transparent);
        -webkit-backdrop-filter: blur(22px) saturate(1.2);
        backdrop-filter: blur(22px) saturate(1.2);
      }
      .site-nav a { border-radius: var(--ui-radius); }
    }
    @media (prefers-reduced-transparency: reduce) {
      .header-inner,
      .site-nav {
        background: color-mix(in srgb, var(--paper) 96%, transparent);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .site-header .site-nav a,
      .site-header .menu-button,
      .spotlight-surface,
      .workflow-step,
      .studio-service { transition: none; }
      .spotlight-surface::before { display: none; }
      .credibility-item:hover,
      .pack:hover,
      .work-card:hover,
      .workflow-step:hover,
      .studio-service:hover,
      .studio-image-stack figure[data-studio-visual].is-service-focus { transform: none; box-shadow: none; }
      .studio-image-stack figure[data-studio-visual] { opacity: 1; filter: none; transition: none; }
      .studio-model-viewer { transition: none; }
    }

    /* Portfolio cleanup: predictable flow, modest corners, no text laid over asset text. */
    .filter-button {
      min-height: 34px;
      padding: 0 16px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      font-family: var(--body);
      font-size: .8rem;
      font-weight: 500;
      letter-spacing: .01em;
      cursor: pointer;
      transition: all 180ms cubic-bezier(.16, 1, .3, 1);
    }
    .filter-button:hover,
    .filter-button:focus-visible {
      color: var(--ink);
      background: color-mix(in srgb, var(--ink) 6%, transparent);
    }
    .filter-button:active {
      transform: scale(.97);
    }
    .filter-button[aria-pressed="true"] {
      border: 0;
      background: var(--ink);
      color: var(--paper);
      font-weight: 600;
      box-shadow: 0 3px 12px color-mix(in srgb, var(--ink) 25%, transparent);
    }
    html[data-skin="nocturne"] .work-head-side .filter-bar {
      border-color: color-mix(in srgb, var(--dark-ink) 14%, transparent);
      background: color-mix(in srgb, var(--dark-2) 65%, transparent);
    }
    html[data-skin="nocturne"] .filter-button {
      color: color-mix(in srgb, var(--dark-ink) 65%, transparent);
    }
    html[data-skin="nocturne"] .filter-button:hover,
    html[data-skin="nocturne"] .filter-button:focus-visible {
      color: var(--dark-ink);
      background: color-mix(in srgb, var(--dark-ink) 10%, transparent);
    }
    html[data-skin="nocturne"] .filter-button[aria-pressed="true"] {
      background: var(--dark-ink);
      color: var(--dark);
      box-shadow: 0 3px 12px rgba(0, 0, 0, .4);
    }

    .work-grid,
    .work-grid.is-filtered { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: clamp(16px, 2vw, 24px); align-items: stretch; }
    .work-grid.is-filtered { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .work-grid .work-card,
    .work-grid .work-card:nth-child(1),
    .work-grid .work-card:nth-child(2),
    .work-grid .work-card:nth-child(3),
    .work-grid .work-card:nth-child(4),
    .work-grid .work-card:nth-child(5),
    .work-grid .work-card:nth-child(6) {
      display: flex;
      min-height: 0;
      grid-column: auto;
      grid-row: auto;
      margin: 0;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
      border-radius: 22px;
      background: var(--surface);
      box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 10%, transparent);
    }
    .work-card { flex-direction: column; }
    .work-card::after { display: none; }
    .work-grid .work-card:nth-child(n) .work-card-media {
      position: relative;
      inset: auto;
      height: auto;
      aspect-ratio: 1.42 / 1;
      border-radius: 0;
      background: var(--dark);
      box-shadow: none;
    }
    .work-card-media img { filter: saturate(.82) contrast(1.04); transition: filter 420ms ease, transform 650ms var(--motion-ease); }
    .work-card:hover .work-card-media img,
    .work-card:focus-within .work-card-media img { filter: saturate(1) contrast(1.06); transform: scale(1.035); }
    .work-card-copy {
      position: static;
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
      padding: 18px 18px 20px;
      color: var(--ink);
    }
    .work-card-copy h3 { max-width: 18ch; color: var(--ink); font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.02; }
    .work-card-copy p { max-height: none; margin-top: 9px; color: var(--muted); opacity: 1; font-size: .86rem; line-height: 1.45; }
    .work-card-copy ul { display: flex; max-height: none; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; opacity: 1; }
    .work-card-copy li { padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 999px; color: var(--muted); font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
    .work-card .placeholder-label { top: 12px; right: auto; bottom: auto; left: 12px; z-index: 3; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--dark-ink) 28%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--dark) 78%, transparent); color: color-mix(in srgb, var(--dark-ink) 88%, transparent); backdrop-filter: blur(12px); }
    .work-card-arrow { top: 12px; right: 12px; }
    .work-card:hover,
    .work-card:focus-within { transform: translateY(-4px); box-shadow: 0 24px 54px color-mix(in srgb, var(--ink) 15%, transparent); }

    #work { padding-top: clamp(74px, 7vw, 96px); }

    /* Inactive stack cards already fade via scroll opacity. */

    .client-review-showcase .client-review-control { width: 44px; height: 44px; }
    .hero-variant { min-width: 40px; min-height: 40px; }
    .studio-variant { width: 40px; height: 40px; }

    @media (max-width: 980px) {
      .work-grid,
      .work-grid.is-filtered { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px) {
      .work-head-side .filter-bar { gap: 8px; }
      .filter-button { min-height: 42px; height: 42px; max-height: 42px; padding-inline: 11px; font-size: .7rem; white-space: nowrap; }
      .work-grid,
      .work-grid.is-filtered { grid-template-columns: 1fr; gap: 14px; }
      .work-grid .work-card:nth-child(n) .work-card-media { aspect-ratio: 1.32 / 1; }
      .work-card-copy { padding: 16px 16px 18px; }
    }

    .work-stage-wrap {
      position: relative;
      margin-top: 0;
      padding-top: 0;
      padding-bottom: 28px;
    }
    .work-mosaic {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: clamp(10px, 1.3vw, 18px);
      align-items: start;
    }
    .work-col {
      display: flex;
      flex-direction: column;
      gap: clamp(10px, 1.3vw, 18px);
    }

    [hidden],
    .work-tile[hidden],
    .work-card[hidden] {
      display: none !important;
    }
    .work-tile {
      position: relative;
      display: block;
      overflow: hidden;
      border-radius: 20px;
      border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
      background: var(--dark);
      box-shadow: 0 14px 34px -6px color-mix(in srgb, var(--ink) 10%, transparent);
      transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out), border-color 380ms ease, opacity 280ms ease;
    }
    .work-tile:hover {
      transform: scale(1.025) translateY(-4px);
      z-index: 5;
      border-color: color-mix(in srgb, var(--accent) 40%, transparent);
      box-shadow: 0 24px 50px -8px color-mix(in srgb, var(--ink) 20%, transparent);
    }
    .work-tile-media {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--dark);
    }
    .work-tile-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: saturate(0.88) contrast(1.03);
      transition: transform 700ms var(--ease-out), filter 400ms ease;
    }
    .work-tile:hover .work-tile-media img {
      filter: saturate(1.02) contrast(1.06);
      transform: scale(1.045);
    }

    /* Varied aspect ratios matching reference */
    .work-tile--tall { aspect-ratio: 3 / 4.2; }
    .work-tile--square { aspect-ratio: 1 / 1; }
    .work-tile--wide { aspect-ratio: 16 / 9.5; }
    .work-tile--hero-tall { aspect-ratio: 3 / 3.8; }
    .work-tile--banner { aspect-ratio: 16 / 7.5; }
    .work-tile--centerpiece { aspect-ratio: 1 / 1.18; }
    .work-tile--banner-caption { aspect-ratio: 16 / 9; }
    .work-tile--portrait { aspect-ratio: 3 / 4; }

    /* Tile captions & overlay labels */
    .tile-caption {
      position: absolute;
      left: 14px;
      bottom: 14px;
      right: 14px;
      color: #ffffff;
      font-family: var(--display);
      font-size: clamp(0.95rem, 1.2vw, 1.25rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
      text-shadow: 0 2px 8px rgba(0,0,0,0.6);
      z-index: 2;
      pointer-events: none;
    }
    .tile-caption--bold {
      font-size: clamp(1.3rem, 1.8vw, 1.85rem);
      line-height: 0.95;
      font-weight: 800;
      letter-spacing: -0.04em;
    }
    .tile-caption--subtle {
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      opacity: 0.9;
    }
    .work-tile .placeholder-label {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 3;
      padding: 5px 8px;
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 999px;
      background: rgba(11,23,52,0.65);
      color: #ffffff;
      font-family: var(--mono);
      font-size: 0.52rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: background-color 200ms ease, border-color 200ms ease;
    }
    .work-tile:hover .placeholder-label {
      background: var(--accent);
      border-color: var(--accent);
      color: #ffffff;
    }

    @media (max-width: 1024px) {
      .work-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .work-col--4, .work-col--5 { display: none; }
      .work-col--2, .work-col--3 { transform: none; }
    }
    @media (max-width: 640px) {
      .work-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .work-col--3 { display: none; }
      .work-col--1, .work-col--2 { transform: none; }
      .work-stage-wrap { padding-block: 16px; }
    }

    /* Pipeline: client workflow with an explicit approval gate. */
    #process { position: relative; isolation: isolate; overflow: clip; }
    #process .pipeline-section { position: relative; z-index: 3; }
    .pipeline-heading {
      display: block;
      padding-top: 22px;
      margin-bottom: clamp(24px, 3.5vw, 40px);
      border-top: 1px solid var(--dark-line);
    }
    .pipeline-heading h2 {
      max-width: 32ch;
      margin-top: 12px;
      font-size: clamp(2.4rem, 4.8vw, 4.4rem);
      line-height: 1.04;
      letter-spacing: -0.04em;
    }
    #process .workflow-pipeline {
      position: relative;
      display: grid;
      gap: clamp(22px, 2.4vw, 34px);
      margin-top: clamp(36px, 4vw, 64px);
    }
    #process .workflow-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      margin-top: 0;
      border: 0;
    }
    #process .workflow-gate {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: baseline;
      column-gap: clamp(16px, 2.4vw, 28px);
      row-gap: 6px;
      margin: 0;
      padding: 14px 0 4px;
      border-top: 1px solid color-mix(in srgb, var(--hero-accent) 55%, transparent);
      border-bottom: 1px solid color-mix(in srgb, var(--dark-ink) 14%, transparent);
      color: color-mix(in srgb, var(--dark-ink) 72%, transparent);
      font-size: .84rem;
      line-height: 1.4;
    }
    #process .workflow-gate-label {
      color: var(--hero-accent);
      font-family: var(--mono);
      font-size: .58rem;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    #process .workflow-gate-copy { max-width: 54ch; }
    #process .workflow-route { display: none; }
    #process .workflow-step,
    #process .workflow-step:nth-child(n) { position: relative; z-index: 1; min-height: 0; padding: 0 22px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--dark-ink); transform: none; transition: transform 320ms var(--ease-out); }
    #process .workflow-step + .workflow-step { padding-left: 26px; }
    #process .workflow-step--offset { padding-top: 24px; }
    #process .workflow-step-top { position: relative; min-height: 54px; display: flex; align-items: flex-start; }
    #process .workflow-step-number { position: absolute; top: -22px; left: -4px; color: color-mix(in srgb, var(--dark-ink) 13%, transparent); font-family: var(--display); font-size: clamp(4.5rem, 7vw, 7.5rem); font-weight: 500; letter-spacing: -.08em; line-height: 1; transition: color 300ms ease; }
    #process .workflow-step-kicker { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 30px; color: color-mix(in srgb, var(--dark-ink) 72%, transparent); font-family: var(--mono); font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; transition: color 300ms ease; }
    #process .workflow-step-kicker::before { width: 6px; height: 6px; margin-right: 9px; border: 1px solid var(--hero-accent); border-radius: 50%; background: var(--dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-accent) 16%, transparent); content: ""; }
    #process .workflow-step h3 { max-width: 14ch; margin-top: 36px; color: var(--dark-ink); font-size: clamp(1.45rem, 2.1vw, 2rem); line-height: 1.05; transition: color 300ms ease; }
    #process .workflow-step p { max-width: 30ch; margin-top: 10px; color: color-mix(in srgb, var(--dark-ink) 66%, transparent); font-size: .88rem; line-height: 1.48; }
    #process .workflow-step::after { position: absolute; left: 0; bottom: -8px; width: 65%; height: 2px; background: var(--hero-accent); box-shadow: 0 0 10px var(--hero-accent); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease-out); }
    #process .workflow-step:hover { transform: translateY(-4px); }
    #process .workflow-step:hover::after { transform: scaleX(1); }
    #process .workflow-step:hover h3 { color: #ffffff; }
    #process .workflow-step:hover .workflow-step-kicker { color: var(--hero-accent); }
    #process .workflow-step:hover .workflow-step-number { color: color-mix(in srgb, var(--hero-accent) 26%, transparent); }
    #process .workflow-visual { position: relative; width: calc(100% - 12px); min-height: 154px; margin-top: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--dark-ink) 17%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--dark-2) 54%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dark-ink) 13%, transparent), 0 18px 38px color-mix(in srgb, #000 25%, transparent); }
    #process .workflow-visual::after { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, color-mix(in srgb, var(--dark-ink) 7%, transparent), transparent 42%); content: ""; pointer-events: none; }
    .workflow-visual--signal,
    .workflow-visual--intake,
    .workflow-visual--direction,
    .workflow-visual--pipeline,
    .workflow-visual--judge,
    .workflow-visual--iterate { display: grid; align-content: center; gap: 7px; padding: 14px; }
    .workflow-visual--intake { grid-template-columns: 1fr; gap: 8px; }
    .intake-chip,
    .direction-line,
    .judge-row,
    .iterate-row,
    .pipeline-status {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px;
      border: 1px solid color-mix(in srgb, var(--dark-ink) 14%, transparent);
      border-radius: 10px;
      background: color-mix(in srgb, var(--dark) 42%, transparent);
      color: color-mix(in srgb, var(--dark-ink) 78%, transparent);
      font-family: var(--mono);
      font-size: .58rem;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .intake-chip--soft { opacity: .72; }
    .direction-line small,
    .iterate-row small { color: color-mix(in srgb, var(--dark-ink) 52%, transparent); font-size: .56rem; letter-spacing: .04em; text-transform: none; }
    .direction-line--approve strong,
    .iterate-row--ready strong,
    .pipeline-status strong { color: var(--hero-accent); }
    .pipeline-bars {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      min-height: 28px;
      align-items: end;
    }
    .pipeline-bars i {
      display: block;
      height: 10px;
      border-radius: 3px;
      background: color-mix(in srgb, var(--hero-accent) 55%, transparent);
    }
    .pipeline-bars i:nth-child(2) { height: 18px; }
    .pipeline-bars i:nth-child(3) { height: 14px; }
    .pipeline-bars i:nth-child(4) { height: 22px; opacity: .7; }
    .workflow-visual--pipeline small {
      position: relative;
      z-index: 1;
      color: color-mix(in srgb, var(--dark-ink) 55%, transparent);
      font-family: var(--mono);
      font-size: .56rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .judge-row strong { color: color-mix(in srgb, var(--dark-ink) 88%, transparent); }
    .judge-row:last-child strong { color: var(--hero-accent); }
    .signal-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 35px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--dark-ink) 14%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--dark) 36%, transparent); color: color-mix(in srgb, var(--dark-ink) 86%, transparent); font-size: .61rem; }
    .signal-row strong { color: var(--hero-accent); font-family: var(--mono); font-size: .58rem; }
    .signal-row small { max-width: 17ch; color: color-mix(in srgb, var(--dark-ink) 66%, transparent); font-size: .56rem; text-align: right; }
    .signal-row b { color: var(--hero-accent); font-size: .85rem; }
    .signal-spark { grid-column: 1 / -1; display: block; height: 12px; margin-top: 3px; border-bottom: 1px solid var(--hero-accent); clip-path: polygon(0 82%, 8% 62%, 15% 72%, 25% 36%, 34% 54%, 43% 18%, 51% 60%, 61% 42%, 70% 70%, 80% 27%, 88% 48%, 100% 8%, 100% 100%, 0 100%); background: color-mix(in srgb, var(--hero-accent) 38%, transparent); opacity: .82; }
    .workflow-visual--method { display: flex; flex-direction: column; justify-content: space-between; padding: 13px; }
    .method-pills { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; }
    .method-pills span { padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--dark-ink) 16%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--dark-ink) 58%, transparent); font-family: var(--mono); font-size: .48rem; letter-spacing: .06em; }
    .method-pills .is-selected { border-color: var(--hero-accent); background: var(--hero-accent); color: var(--dark); }
    .workflow-visual--method img { width: 86%; height: 104px; align-self: center; object-fit: cover; border-radius: 12px; opacity: .84; filter: saturate(.72) contrast(1.05); }
    .workflow-visual--range { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding: 8px; }
    .range-tile { position: relative; min-width: 0; overflow: hidden; border-radius: 9px; background: var(--dark); }
    .range-tile--tall { grid-row: span 2; }
    .range-tile--wide { grid-column: 2; }
    .range-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .82; filter: saturate(.68) contrast(1.04); }
    .range-tile span { position: absolute; right: 6px; bottom: 5px; left: 6px; color: var(--dark-ink); font-family: var(--mono); font-size: .45rem; letter-spacing: .06em; text-transform: uppercase; }
    .workflow-visual--review { min-height: 154px; }
    .workflow-visual--review img { width: 100%; height: 100%; object-fit: cover; opacity: .7; filter: saturate(.58) contrast(1.08); }
    .review-badge { position: absolute; z-index: 2; right: 10px; bottom: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--hero-accent) 58%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--dark) 72%, transparent); color: color-mix(in srgb, var(--dark-ink) 88%, transparent); font-family: var(--mono); font-size: .48rem; letter-spacing: .05em; }
    .review-badge span { display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; background: var(--hero-accent); color: var(--dark); font-weight: 800; }
    .workflow-visual--review small { position: absolute; z-index: 2; right: 10px; bottom: 9px; left: 10px; color: color-mix(in srgb, var(--dark-ink) 64%, transparent); font-size: .58rem; }

    /* Monthly partnership: a content-calendar stack with the copy aligned to its left edge. */
    #process.section { padding-top: clamp(60px, 6vw, 90px); padding-bottom: clamp(44px, 4.5vw, 64px); }
    #partnership { overflow: clip; padding-block: clamp(48px, 5vw, 76px); }
    #partnership .partnership { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(34px, 7vw, 108px); align-items: center; padding-block: 0; padding-inline: var(--gutter); border: 0; }
    #partnership .partnership-copy { position: relative; z-index: 3; align-self: center; }
    #partnership .partnership-copy h2 { max-width: 10ch; margin-top: 20px; font-size: clamp(3rem, 5.3vw, 6.4rem); line-height: .91; }
    #partnership .partnership-copy > p:not(.eyebrow) { max-width: 40ch; margin-top: 22px; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.48; }
    #partnership .partnership-actions { margin-top: 30px; }
    .partnership-visual { position: relative; min-height: 650px; padding-bottom: 58px; }
    .partnership-month { position: absolute; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--surface) 83%, transparent); box-shadow: 0 24px 55px color-mix(in srgb, var(--ink) 11%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent); }
    .partnership-month--back { z-index: 1; top: 96px; right: -10%; width: 64%; height: 510px; padding: 24px; opacity: .46; transform: translateX(12px); }
    .partnership-month--middle { z-index: 2; top: 72px; right: -4%; width: 71%; height: 535px; padding: 24px; opacity: .7; }
    .partnership-month--back strong,
    .partnership-month--middle strong { display: block; color: var(--muted); font-family: var(--display); font-size: 1.5rem; }
    .partnership-month--back span,
    .partnership-month--middle span { display: block; margin-top: 11px; color: var(--muted); font-family: var(--mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; }
    .partnership-month--front { z-index: 3; top: 30px; right: 6%; width: 82%; min-height: 555px; }
    .partnership-month--front header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
    .partnership-month--front header strong { color: var(--ink); font-family: var(--display); font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.04em; }
    .partnership-month--front header span { color: var(--action); font-family: var(--mono); font-size: .54rem; letter-spacing: .06em; white-space: nowrap; }
    .partnership-month--front header i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--hero-accent); }
    .partnership-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px 24px 17px; border-bottom: 1px solid var(--line); }
    .partnership-track::after { position: absolute; right: 24px; bottom: 9px; left: 24px; height: 1px; background: color-mix(in srgb, var(--ink) 18%, transparent); content: ""; }
    .partnership-track span { position: relative; z-index: 1; color: var(--muted); font-family: var(--mono); font-size: .54rem; letter-spacing: .1em; text-align: center; }
    .partnership-track span::after { position: absolute; bottom: -19px; left: 50%; width: 6px; height: 6px; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 50%; background: var(--surface); content: ""; transform: translateX(-50%); }
    .partnership-weeks { display: grid; grid-template-columns: 72px repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, 78px); gap: 10px; padding: 22px 22px 24px; }
    .week-label { align-self: center; color: var(--muted); font-family: var(--mono); font-size: .54rem; letter-spacing: .08em; }
    .calendar-piece { position: relative; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 11px; background: var(--dark); box-shadow: 0 10px 22px color-mix(in srgb, var(--ink) 11%, transparent); }
    .calendar-piece img { width: 100%; height: 100%; object-fit: cover; opacity: .87; filter: saturate(.78) contrast(1.05); }
    .calendar-piece b { position: absolute; z-index: 1; right: 10px; bottom: 9px; left: 10px; color: var(--dark-ink); font-size: clamp(.8rem, 1.3vw, 1.2rem); line-height: .96; }
    .calendar-piece--square { grid-column: 2; grid-row: 1 / span 2; }
    .calendar-piece--portrait { grid-column: 3; grid-row: 1 / span 2; }
    .calendar-piece--landscape { grid-column: 4 / span 2; grid-row: 2; }
    .calendar-piece--product { grid-column: 2 / span 2; grid-row: 3 / span 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--surface); }
    .calendar-piece--product img { mix-blend-mode: multiply; opacity: .72; }
    .calendar-piece--product div { padding: 10px; color: var(--ink); }
    .calendar-piece--product strong { display: block; font-size: .78rem; }
    .calendar-piece--product small { display: block; margin-top: 4px; color: var(--muted); font-family: var(--mono); font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; }
    .partnership-metrics { position: absolute; right: 2%; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
    .partnership-metrics span { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-size: .83rem; }
    .metric-icon { position: relative; display: inline-block; width: 25px; height: 25px; border: 2px solid var(--hero-accent); border-radius: 6px; }
    .metric-icon--calendar::before { position: absolute; top: 6px; right: 3px; left: 3px; height: 2px; background: var(--hero-accent); box-shadow: 0 5px 0 color-mix(in srgb, var(--hero-accent) 72%, transparent); content: ""; }
    .metric-icon--calendar::after { position: absolute; top: -5px; left: 5px; width: 2px; height: 6px; background: var(--hero-accent); box-shadow: 10px 0 0 var(--hero-accent); content: ""; }
    .metric-icon--range { border: 0; border-radius: 0; background: linear-gradient(90deg, var(--hero-accent) 0 36%, transparent 36% 64%, var(--hero-accent) 64%), linear-gradient(90deg, var(--hero-accent) 0 36%, transparent 36% 64%, var(--hero-accent) 64%); background-position: top, bottom; background-size: 100% 36%; background-repeat: no-repeat; }
    .metric-icon--human { border-radius: 50% 50% 8px 8px; }
    .metric-icon--human::before { position: absolute; top: 4px; left: 50%; width: 7px; height: 7px; border: 2px solid var(--hero-accent); border-radius: 50%; content: ""; transform: translateX(-50%); }
    .metric-icon--human::after { position: absolute; right: 3px; bottom: 3px; left: 3px; height: 8px; border: 2px solid var(--hero-accent); border-bottom: 0; border-radius: 10px 10px 0 0; content: ""; }

    @media (max-width: 1100px) {
      .pipeline-heading { gap: 42px; }
      #process .workflow-step,
      #process .workflow-step + .workflow-step { padding-inline: 14px; }
      .partnership-visual { min-height: 610px; }
      .partnership-month--front { right: 2%; width: 87%; }
    }
    @media (max-width: 860px) {
      .pipeline-heading { grid-template-columns: 1fr; gap: 20px; }
      .pipeline-heading p { padding-top: 0; }
      #process .workflow-pipeline { gap: 28px; margin-top: 42px; }
      #process .workflow-grid { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
      #process .workflow-gate {
        grid-template-columns: 1fr;
        padding: 18px 0 8px;
      }
      #process .workflow-route { display: none; }
      #process .workflow-step,
      #process .workflow-step + .workflow-step,
      #process .workflow-step--offset { padding: 0 0 34px 34px; border-left: 1px solid color-mix(in srgb, var(--hero-accent) 60%, transparent); }
      #process .workflow-step::before { position: absolute; top: 13px; left: -5px; width: 8px; height: 8px; border: 2px solid var(--hero-accent); border-radius: 50%; background: var(--dark); content: ""; }
      #process .workflow-grid .workflow-step:last-child { padding-bottom: 0; border-left-color: transparent; }
      #process .workflow-step--gate {
        border-left-color: var(--hero-accent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hero-accent) 28%, transparent);
        border-radius: 0 12px 12px 0;
        padding-right: 14px;
      }
      #process .workflow-step-number { top: -15px; }
      #process .workflow-step h3 { margin-top: 34px; }
      #process .workflow-visual { width: 100%; max-width: 430px; }
      #partnership .partnership { grid-template-columns: 1fr; gap: 40px; align-items: start; }
      #partnership .partnership-copy { max-width: 560px; }
      #partnership .partnership-copy h2 { max-width: 12ch; }
      .partnership-visual { min-height: 610px; width: 100%; }
      .partnership-month--front { right: 0; width: 88%; }
      .partnership-metrics { right: 0; }
    }
    @media (max-width: 560px) {
      #process .pipeline-heading h2 { font-size: clamp(2.7rem, 13vw, 4.2rem); }
      #process .workflow-step h3 { max-width: 13ch; }
      #process .workflow-step p { max-width: 34ch; }
      #partnership .partnership { padding-block: 0; }
      #partnership .partnership-copy h2 { font-size: clamp(3rem, 14vw, 4.4rem); }
      .partnership-visual { min-height: 690px; margin-inline: -4px; }
      .partnership-month--back { display: none; }
      .partnership-month--middle { top: 38px; right: 5%; width: 88%; height: 570px; opacity: .48; }
      .partnership-month--front { top: 0; right: 0; width: 96%; min-height: 590px; }
      .partnership-month--front header { align-items: flex-start; flex-direction: column; gap: 6px; padding: 18px 16px 14px; }
      .partnership-track { padding-inline: 14px; }
      .partnership-track::after { right: 14px; left: 14px; }
      .partnership-track span { font-size: .45rem; }
      .partnership-weeks { grid-template-columns: 54px repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, 84px); gap: 7px; padding: 18px 14px; }
      .week-label { font-size: .47rem; }
      .calendar-piece b { right: 7px; bottom: 7px; left: 7px; font-size: .78rem; }
      .calendar-piece--product div { padding: 6px; }
      .calendar-piece--product strong { font-size: .66rem; }
      .partnership-metrics { position: absolute; right: 0; bottom: -2px; left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 8px; }
      .partnership-metrics span { gap: 8px; font-size: .72rem; }
      .metric-icon { width: 22px; height: 22px; }
      .partnership-metrics span:last-child { grid-column: 1 / -1; }
    }
    @media (prefers-reduced-motion: reduce) {
      #process .workflow-step:hover,
      #partnership .partnership-month,
      #partnership .calendar-piece,
      #process .workflow-visual img { transition: none; }
    }

    /* FAQ lab: one answer in focus, a navigable index, and a live reference check. */
    #faq.studio-panel-tour { overflow: visible; }
    #faq:not(.studio-panel-tour) { overflow: clip; }
    .faq-lab-layout { display: grid; grid-template-columns: minmax(170px, .48fr) minmax(300px, .82fr) minmax(360px, 1.2fr); gap: clamp(28px, 5vw, 78px); align-items: center; }
    .faq-index { align-self: center; }
    .faq-index ol { display: grid; gap: 3px; margin-top: 28px; padding: 0; list-style: none; }
    .faq-index li { min-width: 0; }
    .faq-index button { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; width: 100%; min-height: 44px; padding: 8px 10px 8px 0; border: 0; border-left: 4px solid transparent; background: transparent; color: color-mix(in srgb, var(--ink) 64%, transparent); font-size: .78rem; text-align: left; transition: border-color 200ms ease, color 200ms ease, padding-left 200ms ease; }
    .faq-index button span { font-family: var(--mono); font-size: .62rem; }
    .faq-index button strong { font-weight: 600; }
    .faq-index button:hover,
    .faq-index button:focus-visible { color: var(--ink); }
    .faq-index button[aria-selected="true"] { border-left-color: var(--hero-accent); color: var(--action); padding-left: 12px; }
    .faq-lab-main { align-self: center; }
    .faq-lab-main > .eyebrow { gap: 12px; }
    .faq-count { color: var(--muted); }
    .faq-lab-main h2 { max-width: 11ch; margin-top: 22px; font-size: clamp(2.8rem, 5vw, 5.8rem); line-height: .92; }
    .faq-answer-current { max-width: 38ch; margin-top: 24px; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.48; }
    .faq-controls { display: flex; align-items: center; gap: 24px; margin-top: 38px; color: var(--muted); font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; }
    .faq-control { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.3rem; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease; }
    .faq-control:hover,
    .faq-control:focus-visible { border-color: var(--action); background: var(--action); color: var(--action-ink); }
    .faq-control:active { transform: scale(.95); }
    .faq-lab-visual { position: relative; align-self: stretch; min-height: 500px; padding-top: 4px; }
    .faq-lab-visual-head { position: absolute; z-index: 4; top: 0; right: 4px; left: 4px; display: flex; justify-content: space-between; color: var(--muted); font-family: var(--mono); font-size: .55rem; letter-spacing: .13em; }
    .faq-visual-stage { position: relative; min-height: 458px; margin-top: 30px; }
    .faq-visual-card { position: absolute; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 24px; background: var(--surface); box-shadow: 0 24px 50px color-mix(in srgb, var(--ink) 12%, transparent); }
    .faq-visual-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) contrast(1.03); }
    .faq-visual-card--reference { top: 54px; left: 0; width: 62%; height: 340px; opacity: .76; }
    .faq-visual-card--checked { top: 0; right: 0; width: 64%; height: 388px; mix-blend-mode: normal; }
    .faq-visual-card--checked::after { position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--paper) 8%, transparent), transparent 50%, color-mix(in srgb, var(--hero-accent) 10%, transparent)); content: ""; pointer-events: none; }
    .faq-visual-divider { position: absolute; z-index: 3; top: 18px; right: 30%; bottom: 44px; width: 1px; background: var(--hero-accent); box-shadow: 0 0 22px color-mix(in srgb, var(--hero-accent) 68%, transparent); }
    .faq-visual-divider span { position: absolute; top: 50%; left: 50%; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--hero-accent); color: var(--action-ink); font-size: 1rem; transform: translate(-50%, -50%); }
    .faq-visual-scan { position: absolute; z-index: 4; top: 4%; right: 14%; bottom: 10%; width: 2px; background: linear-gradient(to bottom, transparent, var(--hero-accent), transparent); opacity: 0; pointer-events: none; }
    .faq-lab.is-changing .faq-visual-scan { animation: faq-scan 850ms var(--motion-ease) both; }
    @keyframes faq-scan { 0% { opacity: 0; transform: translateX(-80px); } 18% { opacity: .85; } 100% { opacity: 0; transform: translateX(42px); } }
    .faq-visual-note { position: absolute; right: 2%; bottom: 0; left: 14%; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
    .faq-visual-note-mark { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--hero-accent); border-radius: 50%; background: color-mix(in srgb, var(--hero-accent) 18%, transparent); color: var(--action); font-weight: 800; }
    .faq-visual-note strong { display: block; color: var(--ink); font-size: .82rem; }
    .faq-visual-note small { display: block; margin-top: 3px; color: var(--muted); font-family: var(--mono); font-size: .53rem; letter-spacing: .08em; text-transform: uppercase; }
    @media (max-width: 1100px) {
      .faq-lab-layout { grid-template-columns: minmax(150px, .42fr) minmax(260px, .8fr) minmax(300px, 1fr); gap: 30px; }
      .faq-lab-main h2 { font-size: clamp(2.7rem, 5vw, 4.7rem); }
      .faq-visual-card--reference { width: 66%; }
      .faq-visual-card--checked { width: 68%; }
    }
    @media (max-width: 860px) {
      .faq-lab-layout { grid-template-columns: minmax(180px, .7fr) minmax(280px, 1.3fr); gap: 40px; align-items: start; }
      .faq-lab-visual { grid-column: 1 / -1; min-height: 460px; max-width: 720px; width: 100%; margin-inline: auto; }
    }
    @media (max-width: 560px) {
      .faq-lab-layout { grid-template-columns: 1fr; gap: 46px; }
      .faq-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; margin-top: 18px; }
      .faq-index button { grid-template-columns: 25px minmax(0, 1fr); padding-right: 2px; font-size: .72rem; }
      .faq-index button[aria-selected="true"] { padding-left: 8px; }
      .faq-lab-main h2 { max-width: 12ch; font-size: clamp(2.8rem, 13vw, 4.2rem); }
      .faq-answer-current { margin-top: 18px; font-size: .98rem; }
      .faq-controls { margin-top: 28px; }
      .faq-lab-visual { min-height: 390px; }
      .faq-visual-stage { min-height: 350px; }
      .faq-visual-card--reference { top: 46px; width: 68%; height: 260px; }
      .faq-visual-card--checked { width: 70%; height: 300px; }
      .faq-visual-divider { right: 28%; bottom: 36px; }
      .faq-visual-note { right: 0; left: 8%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .faq-index button,
      .faq-control { transition: none; }
      .faq-lab.is-changing .faq-visual-scan { animation: none; opacity: 0; }
    }

    /* Footer closing frame: high-end luxury dark glass container, flush to bottom. */
    .site-footer {
      padding-top: clamp(20px, 2.5vw, 36px);
      padding-bottom: 0;
      margin-bottom: 0;
      background: var(--paper);
    }
    .site-footer > .container {
      max-width: 100%;
      padding-inline: clamp(12px, 2vw, 28px);
      padding-bottom: 0;
    }
    .footer-shell {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: clamp(16px, 2.2vw, 28px) clamp(18px, 2.8vw, 38px) 14px;
      border-radius: clamp(22px, 2.5vw, 32px) clamp(22px, 2.5vw, 32px) 0 0;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-bottom: 0;
      background: linear-gradient(170deg, #0c162c 0%, #060b17 100%);
      box-shadow: 0 -12px 40px rgba(5, 9, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      color: #f4f0e7;
      margin-bottom: 0;
    }
    .footer-shell::before {
      position: absolute;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(240px, 45vw, 520px);
      height: 160px;
      background: radial-gradient(ellipse at center, rgba(83, 103, 238, 0.18), transparent 70%);
      filter: blur(40px);
      content: "";
      pointer-events: none;
    }
    .footer-stars {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      border-radius: inherit;
    }
    .footer-topline {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1fr);
      align-items: center;
      gap: clamp(14px, 2vw, 28px);
      padding-bottom: clamp(12px, 1.5vw, 18px);
      border-bottom: 0;
    }
    .footer-intro .eyebrow { color: rgba(244, 240, 231, 0.6); letter-spacing: 0.16em; font-size: 0.62rem; margin: 0; }
    .footer-intro h2 { margin-top: 4px; margin-bottom: 0; color: #ffffff; font-size: clamp(1.35rem, 2vw, 1.95rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; }
    .footer-wordmark-wrap {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-top: 0;
      padding-block: 0;
    }
    .footer-wordmark-display {
      font-family: var(--display);
      font-weight: 800;
      font-size: clamp(1.75rem, 3.2vw, 3.2rem);
      line-height: 0.9;
      letter-spacing: -0.04em;
      text-transform: uppercase;
      background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.65) 60%, rgba(154, 184, 255, 0.28) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      user-select: none;
      filter: drop-shadow(0 2px 14px rgba(83, 103, 238, 0.15));
    }
    .footer-wordmark-kicker {
      color: rgba(244, 240, 231, 0.48);
      font-family: var(--mono);
      font-size: 0.52rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-top: 3px;
      margin-bottom: 0;
      white-space: nowrap;
    }
    .footer-cta {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
    }
    .footer-cta-button {
      min-height: 38px;
      padding: 8px 18px;
      border-radius: 999px;
      background: var(--action);
      color: var(--action-ink);
      font-weight: 700;
      font-size: 0.85rem;
      border: 1px solid var(--action);
      box-shadow: none;
      transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), background-color 200ms ease, box-shadow 200ms ease;
    }
    .footer-cta-button:hover,
    .footer-cta-button:focus-visible {
      transform: translateY(-2px);
      background: var(--cta-hover, #3357d7);
      border-color: var(--cta-hover, #3357d7);
      box-shadow: none;
      filter: none;
      color: var(--action-ink);
    }
    .footer-cta-button .button-copy { display: inline-flex; align-items: center; gap: 8px; }
    .footer-email { color: rgba(244, 240, 231, 0.62); font-size: 0.78rem; font-family: var(--mono); letter-spacing: 0.02em; transition: color 180ms ease; }
    .footer-email:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
    .footer-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 0;
      margin-top: 14px;
      padding-top: 6px;
      padding-bottom: 6px;
      border-top: 0;
      border-bottom: 0;
    }
    .footer-shell .footer-col {
      padding-inline: clamp(14px, 2vw, 24px);
      position: relative;
    }
    .footer-shell .footer-col:not(:last-child) {
      border-right: 1px solid rgba(255, 255, 255, 0.08);
    }
    .footer-shell .footer-col h3 {
      color: rgba(244, 240, 231, 0.48);
      font-family: var(--mono);
      font-size: 0.56rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 6px;
      text-align: center;
    }
    .footer-shell .footer-col ul {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 3px clamp(8px, 1.4vw, 16px);
      font-size: 0.78rem;
      color: rgba(244, 240, 231, 0.72);
    }
    .footer-shell .footer-col a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
    .footer-bottom {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 8px;
      padding-top: 6px;
      color: rgba(244, 240, 231, 0.42);
      font-family: var(--mono);
      font-size: 0.54rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* Shared night CTA blue, with surface depth but no external hover glow. */
    html[data-skin="nocturne"] .nav-contact,
    html[data-skin="nocturne"] .footer-cta-button,
    html[data-skin="nocturne"] [data-liquid-button] {
      background: linear-gradient(180deg, #3b73e9 0%, #2961db 45%, #2250b4 100%) !important;
      border: 1px solid rgba(255, 255, 255, 0.28) !important;
      box-shadow: inset 0 1px 0 rgb(204 230 255 / .18), inset 0 -1px 0 rgb(6 16 38 / .18) !important;
    }
    html[data-skin="nocturne"] .nav-contact .button-copy,
    html[data-skin="nocturne"] .footer-cta-button .button-copy,
    html[data-skin="nocturne"] [data-liquid-button] .button-copy {
      color: #061026 !important;
      font-weight: 700 !important;
      text-shadow: none !important;
    }
    html[data-skin="nocturne"] .nav-contact:hover,
    html[data-skin="nocturne"] .nav-contact:focus-visible,
    html[data-skin="nocturne"] .footer-cta-button:hover,
    html[data-skin="nocturne"] .footer-cta-button:focus-visible {
      background: var(--cta-hover, #4087f7) !important;
      border-color: var(--cta-hover, #4087f7) !important;
      color: #061026 !important;
      box-shadow: none !important;
      filter: none !important;
    }
    html[data-skin="nocturne"] [data-liquid-button]:hover,
    html[data-skin="nocturne"] [data-liquid-button]:focus-visible {
      background: linear-gradient(180deg, #589bf9 0%, #4087f7 45%, #356fcc 100%) !important;
      box-shadow: inset 0 1px 0 rgb(204 230 255 / .22), inset 0 -1px 0 rgb(6 16 38 / .18) !important;
    }
    @media (max-width: 860px) {
      .footer-topline {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 16px;
      }
      .footer-cta { align-items: center; }
      .footer-intro h2 { text-align: center; }
      .footer-grid { grid-template-columns: 1fr !important; gap: 12px; }
      .footer-shell .footer-col { padding-inline: 0; }
      .footer-shell .footer-col:not(:last-child) { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 8px; }
      .footer-shell .footer-col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* Hero services should read as a connected constellation, never as selected cards. */
    .hero-media-visual,
    .hero-still-stack,
    .hero-video-frame,
    .hero-model-frame { -webkit-mask-image: none; mask-image: none; }
    @media (min-width: 861px) {
      .hero .hero-mode::after,
      .hero .hero-mode--right::after { display: none !important; }
    }
    .hero-mode[aria-checked="true"] { background: transparent !important; box-shadow: none !important; color: var(--ink) !important; font-weight: 700; text-shadow: none; }
    .hero-mode[aria-checked="true"]::before { background: color-mix(in srgb, var(--accent) 62%, #8a919b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
    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);
    }
    .hero-scene.is-roulette .hero-mode[aria-checked="true"] { background: transparent !important; box-shadow: none !important; color: var(--muted) !important; text-shadow: none; }
    .hero-scene.is-roulette .hero-mode[aria-checked="true"]::before { box-shadow: none; }
    @media (max-width: 700px) {
      .footer-topline { align-items: flex-start; flex-direction: column; gap: 24px; }
      .footer-cta { align-items: flex-start; }
      .footer-wordmark-wrap { margin-top: 36px; }
      .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px 18px; }
      .footer-col:last-child { grid-column: 1 / -1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .footer-wordmark-wrap::after { opacity: .7; }
      .hero-media-visual,
      .hero-still-stack,
      .hero-video-frame,
      .hero-model-frame { transition: none; }
    }

    #process .workflow-route { display: none; }
    #process .workflow-step h3 { margin-top: 48px; }
    #process .workflow-step.workflow-step--offset { padding-top: 40px; }
    @media (max-width: 860px) {
    #process .workflow-step.workflow-step--offset { padding-top: 0; }
      #process .workflow-step h3 { margin-top: 34px; }
    }

    /* Stability pass: keep the hero CTA in document flow and make wheel scrolling
       belong to the page, not the interactive model. The previous Kage layers
       pinned the CTA to an absolute scene and made short laptop viewports clip it. */
    html { overscroll-behavior-x: none; }
    .site-stars {
      position: fixed;
      z-index: 1 !important;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      pointer-events: none;
    }
    .global-shader-field,
    [data-hero-particles] {
      position: fixed;
      z-index: 0;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      pointer-events: none;
    }
    /* Midground atmosphere can show in open section space while the section
       content containers rise above it. Removing the root stack here is what
       allows their existing z-index values to beat the fixed effects. */
    main { position: relative; z-index: auto; }
    .site-header { position: sticky; z-index: 100; }
    .hero-model-frame model-viewer { touch-action: pan-y; }
    .hero-model-frame::after { content: "Drag to rotate"; }

    @media (min-width: 861px) {
      .hero {
        min-height: calc(100svh - var(--header));
        padding-top: clamp(8px, 1.2vw, 18px);
        padding-bottom: clamp(18px, 2.8vw, 34px);
      }
      .hero-grid {
        min-height: calc(100svh - var(--header) - clamp(8px, 1.2vw, 18px) - clamp(18px, 2.8vw, 34px));
        grid-template-rows: auto minmax(0, 1fr);
      }
      .hero-showcase-wrap {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        margin-top: 0;
      }
      .hero-showcase {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
      }
      .hero .hero-actions {
        position: relative;
        left: auto;
        bottom: auto;
        flex: 0 0 auto;
        align-self: center;
        margin-top: 12px;
        transform: none;
      }
    }

    @media (min-width: 861px) and (max-height: 760px) {
      .hero {
        padding-top: 8px;
        padding-bottom: 14px;
      }
      .hero-grid { min-height: calc(100svh - var(--header) - 22px); }
      .hero h1 { font-size: var(--hero-title-size); }
      .hero-intro { margin-top: 8px; }
      .hero-product-stage { width: min(50vw, 620px); }
      .hero .hero-actions { margin-top: 8px; }
    }

    /* Final geometry pass: keep shared offsets in sync with the actual header and
       preserve the container gutter on the monthly partnership. */
    .site-header { height: var(--header); padding-top: 8px; }
    #partnership .partnership { min-width: 0; padding-inline: var(--gutter); }
    .hero-actions { display: flex; width: 100%; justify-content: center; }
    .hero-actions .button {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      padding: 13px 22px;
      white-space: nowrap;
    }

    @media (min-width: 861px) {
      .outcome-sticky { min-height: 0; }
    }

    @media (max-width: 860px) {
      .site-header { height: var(--header); padding-top: 8px; }
      .hero-showcase-wrap { display: block; height: auto; min-height: 0; }
      .hero-showcase { height: auto; min-height: 0; }
      .hero .hero-actions { position: relative; left: auto; bottom: auto; margin-top: 18px; transform: none; }
    }

    /* Editorial alignment pass: the hero owns its CTA, while the outcome deck
       sizes itself to the visible sticky viewport instead of clipping its copy. */
    .section-shader {
      position: absolute;
      z-index: 0;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      pointer-events: none;
    }
    .hero-showcase-wrap { display: flex; flex-direction: column; }
    .hero-showcase-wrap > .hero-showcase { flex: 1 1 auto; min-height: 0; }
    .hero-intro { max-width: none; white-space: nowrap; text-wrap: nowrap; }

    @media (min-width: 861px) {
      .hero {
        padding-top: calc(var(--header) + clamp(8px, 1.6vh, 18px));
        padding-bottom: clamp(16px, 2.4vh, 28px);
      }
      .hero-grid {
        min-height: calc(100svh - var(--header) - clamp(8px, 1.6vh, 18px) - clamp(16px, 2.4vh, 28px));
      }
      .hero-showcase-wrap { margin-top: clamp(8px, 1.6vh, 18px); }
      .hero-showcase-wrap > .hero-actions { margin-top: clamp(14px, 1.8vh, 22px); }

      .outcome-sticky { height: calc(100svh - var(--header)); min-height: 0; }
      .outcome-shell {
        padding-block: clamp(10px, 1.6vh, 18px) clamp(10px, 1.6vh, 16px);
        gap: clamp(8px, 1.2vh, 14px);
      }
      .outcome-head,
      .outcome-experience { width: min(100%, 1120px); margin-inline: auto; }
      .outcome-experience {
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-columns: none;
        gap: clamp(8px, 1.2vh, 14px);
      }
      .outcome-deck {
        position: relative;
        min-height: 0;
        height: 100%;
        max-width: min(1120px, 100%);
        margin-inline: auto;
        overflow: hidden;
      }
      .outcome-card {
        width: min(100%, 1080px);
        height: min(66vh, 560px);
        min-height: 0;
        max-height: 100%;
        padding: clamp(28px, 4.2vh, 52px) clamp(28px, 4vw, 56px);
      }
      .outcome-card-body {
        max-width: min(52ch, 100%);
      }
      .outcome-card-body h3 {
        max-width: 16ch;
        font-size: clamp(2.15rem, 4.2vw, 3.45rem);
        line-height: 1.02;
      }
    }

    @media (min-width: 861px) and (max-height: 760px) {
      .outcome-shell { padding-block: 8px 8px; gap: 8px; }
      .outcome-head h2 { font-size: clamp(1.35rem, 3.8vh, 1.85rem); }
      .outcome-card { height: min(62vh, 460px); padding: 22px 28px; }
      .outcome-card-body { gap: 8px; }
      .outcome-card-body h3 { font-size: clamp(1.7rem, 3.8vh, 2.35rem); }
      .outcome-card-body ul { margin-top: 8px; gap: 8px; }
    }

    @media (max-width: 860px) {
      .hero-showcase-wrap { display: block; }
      .hero-showcase-wrap > .hero-actions { margin-top: 18px; }
    }

    /* Final interaction pass: mobile navigation needs a real target, and the
       long-form sections should enter the viewport with a deliberate rhythm. */
    .menu-button {
      display: none;
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      padding: 0;
      border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
      border-radius: 999px;
      appearance: none;
      background: transparent;
      color: var(--ink);
    }
    .menu-button-icon {
      position: relative;
      display: block;
      width: 16px;
      height: 12px;
      border-top: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
    }
    .menu-button-icon::after {
      position: absolute;
      top: 4px;
      right: 0;
      left: 0;
      height: 1.5px;
      background: currentColor;
      content: "";
    }
    .menu-button[aria-expanded="true"] .menu-button-icon { border-color: transparent; }
    .menu-button[aria-expanded="true"] .menu-button-icon::before,
    .menu-button[aria-expanded="true"] .menu-button-icon::after {
      top: 4px;
      transform: rotate(45deg);
    }
    .menu-button[aria-expanded="true"] .menu-button-icon::after { transform: rotate(-45deg); }
    .menu-button[aria-expanded="true"] .menu-button-icon span { display: none; }

    :where(h1, h2, h3)[id] { scroll-margin-top: calc(var(--header) + 24px); }

    @media (min-width: 861px) {
      #packs.section { padding-block: clamp(64px, 6.5vw, 96px); }
      #process.section { padding-top: clamp(64px, 6.5vw, 96px); padding-bottom: clamp(40px, 4vw, 60px); }
      #partnership.section { padding-block: clamp(44px, 4.5vw, 68px); }
      #process .pipeline-heading h2 { max-width: 16ch; font-size: clamp(3rem, 5vw, 5.8rem); }
      #process .workflow-grid { margin-top: clamp(40px, 3.8vw, 56px); }
    }

    @media (max-width: 860px) {
      .menu-button { display: inline-flex; }
      .site-nav {
        top: calc(var(--header) + 10px);
        right: 0;
        left: 0;
        z-index: 4;
        gap: 4px;
        margin: 0;
        padding: 12px;
        border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
        border-radius: 24px;
        background: color-mix(in srgb, var(--paper) 94%, transparent);
        box-shadow: 0 18px 50px color-mix(in srgb, var(--ink) 15%, transparent);
        -webkit-backdrop-filter: blur(22px) saturate(1.1);
        backdrop-filter: blur(22px) saturate(1.1);
      }
      .site-nav a {
        display: flex;
        min-height: 44px;
        align-items: center;
        padding: 10px 12px;
        border-radius: 14px;
      }
      .site-nav a:not(.nav-contact):hover,
      .site-nav a:not(.nav-contact):focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); }
      .site-nav .nav-contact { margin: 4px 0 0; justify-content: center; border-radius: 999px; }
    }

    /* Final footer fit: compact, structured, flush to bottom. */
    @media (max-width: 700px) {
      .site-footer > .container { padding-inline: 12px; }
      .footer-shell { padding: 20px 16px 16px; border-radius: 24px 24px 0 0; }
      .footer-topline { gap: 14px; }
      .footer-wordmark-display { font-size: clamp(2.4rem, 13vw, 4.8rem); }
      .footer-grid { gap: 16px 12px; padding-block: 10px; }
    }


/* Shared navy for idle hero ring icons — not near-black. Active keeps action-ink. */
.hero-mode:not([aria-checked="true"]) svg { color: #1a2f55; }
.hero-mode:not([aria-checked="true"]):hover svg,
.hero-mode:not([aria-checked="true"]):focus-visible svg { color: #1a2f55; }

/* Once painted, the liquid surface owns the fill and edge. */
html[data-skin="nocturne"] [data-liquid-button].has-liquid,
html[data-skin="nocturne"] [data-liquid-button].has-liquid:hover,
html[data-skin="nocturne"] [data-liquid-button].has-liquid:focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Hover must not move these, which is not the same as having no transform:
   the image carries a resting scale (godly-pass.css owns the value). Clearing
   it here made the product shrink back under the pointer. Left to the one rule
   that sets it. */
#work .work-tile[data-work-kind="interactive"]:hover .work-tile-media img {
  filter: none;
}