/* ============================================================
   PROTRON — Next-Level
   Lane: liquid chrome on space black.
   Chrome carries the imagery, ivory carries the words,
   Signal Blue is the only chromatic event and never decoration.
   ============================================================ */

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  /* Brand surface */
  --black: #080C14;
  --navy: #111827;
  --blue: #3B82F6;
  --blue-hi: #6BA5FF;
  --ivory: #EEE8D9;

  /* Ink ramp — every value verified against --black
     ink 15:1 · ink-2 6.5:1 · ink-3 3.6:1 (large/decorative only) */
  --ink: var(--ivory);
  --ink-2: rgba(238, 232, 217, .62);
  --ink-3: rgba(238, 232, 217, .42);

  --line: rgba(238, 232, 217, .10);
  --line-2: rgba(238, 232, 217, .16);
  --glass: rgba(17, 24, 39, .40);
  --glass-hi: rgba(255, 255, 255, .07);

  /* Type */
  --display: "Technor", ui-sans-serif, system-ui, sans-serif;
  --body: "Supreme", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --t-h1: clamp(2.55rem, 7.4vw, 5.5rem);
  --t-h2: clamp(1.95rem, 4.6vw, 3.4rem);
  --t-h3: clamp(1.2rem, 1.1rem + .55vw, 1.55rem);
  --t-body: clamp(1rem, .965rem + .16vw, 1.075rem);
  --t-meta: .78rem;

  /* Rhythm */
  --wrap: 1240px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(6rem, 13vh, 11rem);

  /* Motion */
  --e-out: cubic-bezier(.23, 1, .32, 1);
  --e-io: cubic-bezier(.77, 0, .175, 1);
  --e-drawer: cubic-bezier(.32, .72, 0, 1);

  /* Duration scale — press < ui < enter < slow. Interactive UI stays
     under 300ms; entrances and reveals earn the longer values. */
  --d-press: 140ms;
  --d-ui: 220ms;
  --d-enter: 520ms;
  --d-slow: 820ms;

  /* Depth */
  --z-ambient: 0;
  --z-base: 1;
  --z-sticky: 20;
  --z-head: 30;
  --z-grain: 60;
  --z-cursor: 90;
  --z-intro: 100;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body {
  background: var(--black);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--blue-hi);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--blue); color: var(--black); }

.skip {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--ivory); color: var(--black);
  font-weight: 700; border-radius: 6px;
  transform: translateY(-160%);
  transition: transform 200ms var(--e-out);
}
.skip:focus-visible { transform: none; }

/* ── Type primitives ──────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}

h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.025em; }

p { text-wrap: pretty; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec {
  position: relative;
  z-index: var(--z-base);
  padding-block: var(--sec-y);
}

.sec-head { margin-bottom: clamp(3rem, 6vw, 5rem); }

.sec-head h2 { max-width: 16ch; }

.sec-head p {
  margin-top: 1.4rem;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem);
  line-height: 1.6;
}

/* The accent mark — the only place a filled blue square appears */
.sq {
  display: inline-block;
  width: .34em; height: .34em;
  margin-left: .22em;
  background: var(--blue);
  vertical-align: baseline;
  translate: 0 -.02em;
}

/* ── Ambient layer ────────────────────────────────────────── */
.ambient {
  position: fixed;
  inset: 0;
  z-index: var(--z-ambient);
  pointer-events: none;
  /* Driven per-frame from the scroll loop — no transition, or it fights it.
     Low default so the atmosphere never overpowers text before JS runs. */
  opacity: var(--ambient-opacity, .15);
}

/* Always-present CSS fallback: if WebGL never boots, the page
   still has atmosphere instead of a flat black rectangle. */
.ambient-css {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(46% 40% at 62% 34%, rgba(107, 165, 255, .08), transparent 68%),
    radial-gradient(40% 46% at 30% 62%, rgba(238, 232, 217, .035), transparent 70%),
    radial-gradient(70% 60% at 50% 50%, rgba(74, 85, 104, .08), transparent 75%);
  filter: blur(30px);
  animation: drift 34s var(--e-io) infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-2%, 1%, 0) scale(1); }
  to   { transform: translate3d(3%, -2%, 0) scale(1.1); }
}

#ambient-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1400ms var(--e-out);
}

#ambient-canvas.is-live { opacity: 1; }

/* Vignette so the blob recedes behind foreground panels */
.ambient-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 85% at 50% 45%, rgba(8, 12, 20, .4) 18%, rgba(8, 12, 20, .84) 70%, var(--black) 100%),
    linear-gradient(to bottom, rgba(8, 12, 20, .62) 0%, transparent 24%, transparent 72%, rgba(8, 12, 20, .86) 100%);
}

/* ── Grain ────────────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 6s steps(5) infinite;
  will-change: transform;
}

@keyframes grain-shift {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-4%, 3%, 0); }
  40%  { transform: translate3d(3%, -5%, 0); }
  60%  { transform: translate3d(-5%, -2%, 0); }
  80%  { transform: translate3d(4%, 4%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ── Cursor ───────────────────────────────────────────────── */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 200ms linear;
}

.cursor.is-ready { opacity: 1; }

.cursor-dot,
.cursor-ring {
  position: absolute;
  top: 0; left: 0;
  border-radius: 999px;
  translate: -50% -50%;
}

.cursor-dot {
  width: 6px; height: 6px;
  background: var(--ivory);
  transition: opacity 160ms var(--e-out), scale 160ms var(--e-out);
}

.cursor-ring {
  display: grid;
  place-items: center;
  min-width: 34px; height: 34px;
  padding-inline: 0;
  border: 1px solid rgba(238, 232, 217, .5);
  scale: .82;
  opacity: 0;
  transition: scale 260ms var(--e-out), opacity 200ms var(--e-out),
              min-width 260ms var(--e-out), padding-inline 260ms var(--e-out);
}

.cursor-label {
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ivory);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 140ms var(--e-out);
}

.cursor.is-hover .cursor-ring { scale: 1; opacity: 1; }
.cursor.is-hover .cursor-dot { scale: .5; opacity: .6; }

.cursor.is-label .cursor-ring {
  min-width: 76px;
  padding-inline: 1rem;
  border-radius: 999px;
  background: rgba(238, 232, 217, .1);
}
.cursor.is-label .cursor-label { opacity: 1; }
.cursor.is-label .cursor-dot { opacity: 0; }

.cursor.is-down .cursor-ring { scale: .88; }

/* ── Scroll progress ──────────────────────────────────────── */
.scrollbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: var(--z-head);
  pointer-events: none;
}

.scrollbar span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--blue);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
}

/* ── Intro ────────────────────────────────────────────────── */
.intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: grid;
  place-content: center;
  gap: 1.6rem;
  background: var(--black);
  pointer-events: none;
}

.intro-mark {
  width: clamp(150px, 22vw, 220px);
  height: auto;
  opacity: 0;
}

.intro-rule {
  display: block;
  width: clamp(150px, 22vw, 220px);
  height: 1px;
  background: var(--line-2);
  overflow: hidden;
}

.intro-rule i {
  display: block;
  height: 100%; width: 100%;
  background: var(--blue);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.intro.is-done { display: none; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 160ms var(--e-out), background-color 220ms ease,
              border-color 220ms ease, color 220ms ease;
}

.btn > span, .btn > i { position: relative; z-index: 1; }

.btn .arr {
  font-style: normal;
  transition: transform 320ms var(--e-out);
}

.btn:active { transform: scale(.97); }

/* Magnetic elements are driven per-frame from JS, so a transform
   transition would lag every pointer sample. Press feedback for
   these lives in the same inline transform. */
@media (hover: hover) and (pointer: fine) {
  [data-magnetic] {
    transition-property: background-color, border-color, color;
  }
  [data-magnetic]:active { transform: none; }
}

/* Space-black ink on Signal Blue clears 5.3:1 — ivory on blue does not */
.btn-primary {
  background: var(--blue);
  color: var(--black);
}

.btn-primary:hover { background: var(--blue-hi); }
.btn-primary:hover .arr { transform: translateX(4px); }

/* The liquid-glass moment: specular highlight tracks the cursor */
[data-spec]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120px circle at var(--sx, 50%) var(--sy, 50%),
              rgba(255, 255, 255, .55), transparent 62%);
  opacity: 0;
  transition: opacity 300ms var(--e-out);
}

[data-spec]:hover::after { opacity: 1; }

.btn-ghost {
  border-color: var(--line-2);
  color: var(--ink);
  background: rgba(238, 232, 217, .015);
}

.btn-ghost:hover {
  border-color: rgba(238, 232, 217, .38);
  background: rgba(238, 232, 217, .06);
}

.btn-ghost:hover .arr { transform: translateY(3px); }

/* ── Header ───────────────────────────────────────────────────
   Floating pill chrome that sits *inside* the hero frame rather
   than a bar bolted to the viewport edge.                       */
.head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-head);
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 1.4vw, 1.2rem);
  padding: clamp(1.15rem, 1.9vw, 1.7rem) clamp(1.5rem, 2.9vw, 2.6rem);
  transition: transform 500ms var(--e-out);
}

.head.is-hidden { transform: translateY(-118%); }

.brand img {
  width: clamp(104px, 12vw, 138px);
  height: auto;
}

/* One glass recipe, two shells */
.head-nav,
.head-end {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .3rem;
  border: 1px solid var(--glass-hi);
  border-radius: 999px;
  /* .78, not .55. The pill floats over the ivory principles section as
     well as the dark ones, and at .55 the backdrop lightens it to a
     mid grey where the nav labels measure 2.6:1. At .78 they hold
     4.8:1 against either backdrop. */
  background: rgba(8, 12, 20, .78);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07),
              0 20px 44px -28px rgba(0, 0, 0, .9);
}

.head-end { margin-left: auto; gap: .35rem; padding-right: .3rem; }

.head-nav a {
  padding: .55rem 1.05rem;
  border-radius: 999px;
  font-size: .85rem;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color 200ms ease, background-color 200ms ease;
}

.head-nav a:hover { color: var(--ink); background: rgba(238, 232, 217, .08); }
.head-nav a[aria-current="true"] { color: var(--ink); background: rgba(238, 232, 217, .11); }

.head-live {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .75rem 0 .85rem;
  color: var(--ink-2);
  font-size: .78rem;
  white-space: nowrap;
}

.head-icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(238, 232, 217, .07);
  color: var(--ink-2);
  transition: background-color 220ms ease, color 220ms ease, transform 160ms var(--e-out);
}

.head-icon svg { width: 17px; height: 17px; }
.head-icon:hover { background: rgba(238, 232, 217, .14); color: var(--ink); }
.head-icon:active { transform: scale(.94); }

.status-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(59, 130, 246, .6);
  animation: pulse 2.6s var(--e-out) infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.head-cta { padding: .78rem 1.3rem; font-size: .88rem; }

/* ── Dock ─────────────────────────────────────────────────────
   The header pill carries the nav on desktop, so the dock is the
   narrow-screen fallback only — two nav bars at once is clutter. */
.dock {
  position: fixed;
  bottom: 1.4rem;
  left: 50%;
  translate: -50% 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .38rem;
  border: 1px solid var(--glass-hi);
  border-radius: 999px;
  /* Same reasoning as the header pill: it floats over light sections */
  background: rgba(8, 12, 20, .78);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .9),
              inset 0 1px 0 rgba(255, 255, 255, .07);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms var(--e-out), transform 500ms var(--e-out);
}

.dock.is-in { opacity: 1; transform: none; }

.dock a {
  padding: .55rem .95rem;
  border-radius: 999px;
  font-size: .84rem;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color 200ms ease, background-color 200ms ease;
}

.dock a:hover { color: var(--ink); background: rgba(238, 232, 217, .07); }

.dock a[aria-current="true"] { color: var(--ink); background: rgba(238, 232, 217, .1); }

.dock-cta {
  background: var(--blue) !important;
  color: var(--black) !important;
  font-weight: 600;
}

.dock-cta:hover { background: var(--blue-hi) !important; }

@media (min-width: 881px) { .dock { display: none; } }
@media (max-width: 880px) { .head-nav { display: none; } }

/* ── Hero ─────────────────────────────────────────────────────
   One framed viewport: a rounded panel inset from the page edge,
   the chrome form hanging from its top edge, the headline crossing
   the form, and the four corners carrying real information.      */
.hero {
  position: relative;
  z-index: var(--z-base);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.hero-stage {
  position: relative;
  flex: 1;
  /* Grid, not flex: the chip rail drops out of absolute positioning on
     narrow screens and needs to stack under the headline, not sit
     beside it. */
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(1.6rem, 4vh, 2.6rem);
  margin: clamp(.45rem, .9vw, .85rem);
  /* The bottom band is reserved for the corner furniture, so the
     centred column is centred in what's left rather than in the whole
     frame. That is what keeps the headline clear of the cards on a
     short laptop window instead of only on a tall desktop one. */
  padding: clamp(7rem, 15vh, 9.5rem) 0 clamp(7rem, 25vh, 15rem);
  border: 1px solid var(--line);
  border-radius: clamp(16px, 1.9vw, 26px);
  overflow: hidden;
  isolation: isolate;
  /* The black backdrop is required, not cosmetic: .hero is a stacking
     context, so the art's screen blend needs a real surface here or the
     render's black background stays opaque and shows as a box. */
  background:
    radial-gradient(118% 74% at 50% -6%, rgba(59, 130, 246, .11), transparent 58%),
    radial-gradient(86% 52% at 50% 40%, rgba(126, 146, 178, .085), transparent 72%),
    var(--black);
}

/* Left margin rule — art direction borrowed from a plate caption */
.hero-rule {
  position: absolute;
  top: clamp(4.5rem, 11vh, 7rem);
  bottom: clamp(1.4rem, 3vw, 2.6rem);
  left: clamp(2.6rem, 4.6vw, 4.6rem);
  z-index: 2;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 14%, var(--line) 82%, transparent);
  pointer-events: none;
}

.hero-vlabel {
  position: absolute;
  left: clamp(2.6rem, 4.6vw, 4.6rem);
  bottom: clamp(9rem, 22vh, 13rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-left: .95rem;
  writing-mode: vertical-rl;
  color: var(--ink-2);
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-vlabel .sq { margin: 0; width: .45em; height: .45em; }

.hero-art {
  position: absolute;
  top: -13%; left: 50%;
  z-index: 0;
  width: clamp(390px, 64vw, 830px);
  aspect-ratio: 1;
  translate: -50% 0;

  /* The blend MUST live on this element, not on the img. .hero-art is
     already a stacking context (absolute + z-index), so a blend on the
     child would compose against its own empty backdrop and do nothing —
     the render's black background would paint as a solid box. Here it
     composes against .hero-stage's black and the box disappears. */
  mix-blend-mode: screen;

  /* Feathered edges so there is no square to see even where a browser
     declines the blend */
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 96%);
  mask-image: radial-gradient(closest-side, #000 60%, transparent 96%);
}

.hero-art img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: brightness(.94) contrast(1.06);
  opacity: 0;
  animation: art-in 1200ms var(--e-out) 100ms forwards;
}

@keyframes art-in {
  from { opacity: 0; transform: scale(1.05); filter: brightness(.94) contrast(1.06) blur(10px); }
  to   { opacity: 1; transform: none; filter: brightness(.94) contrast(1.06) blur(0); }
}

/* Holds the headline off the form's ivory lobe. Without it the bright
   region drops ivory type to roughly 2:1. Weighted toward the type band
   rather than flat, so the form keeps its shape above and below. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(58% 27% at 50% 51%,
      rgba(8, 12, 20, .92) 0%, rgba(8, 12, 20, .7) 44%, transparent 78%),
    linear-gradient(to bottom, rgba(8, 12, 20, .45) 0%, transparent 20%,
      transparent 62%, rgba(8, 12, 20, .82) 100%);
  pointer-events: none;
}

/* width:100% is load-bearing. As a centred grid item this box would
   otherwise size to max-content — which for an uppercase display
   headline is far wider than a phone, and the whole hero would hang
   off the right edge. */
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Caps at 900 is the whole voice of this hero: it reads as a plate
   title stamped across the form, not as a sentence sitting near it. */
.hero-h1 {
  /* The long line is "YOUR BUSINESS RUNS ON": ~11.8× the font size in
     Technor 900. The 1.5rem floor is what keeps it on one line inside
     a 320px viewport rather than breaking mid-phrase. */
  font-size: clamp(1.5rem, 7.3vw, 5.35rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.018em;
  text-transform: uppercase;
  /* Two tight shadows, not one wide one. A single 44px blur behind a
     solid block of caps paints a soft rectangle, and over the bright
     lobe of the chrome form that rectangle's edge is visible as a
     seam. These hug the glyphs; the scrim does the heavy lifting. */
  text-shadow: 0 1px 2px rgba(8, 12, 20, .55), 0 3px 14px rgba(8, 12, 20, .7);
}

/* line-height .94 puts descenders below the line box, and the overflow
   clip needed for the slide-up reveal would cut the 'y' in "your".
   Pad for the descender, then pull the same amount back off so the
   type rhythm is unchanged. */
.hero-h1 .line {
  display: block;
  overflow: hidden;
  padding-bottom: .22em;
  margin-bottom: -.22em;
}

.hero-h1 .line > span { display: inline-block; }

/* Visible by default. The entrance is a WAAPI animation with a
   backwards fill, so a page that never runs it still reads correctly
   — nothing here is gated on JS. */
.hero-h1 .sq-pop {
  display: inline-block;
  width: .18em; height: .18em;
  margin-left: .14em;
  background: var(--blue);
  translate: 0 -.06em;
}

.hero-lead {
  margin-top: clamp(1.25rem, 2.6vh, 1.8rem);
  max-width: 58ch;
  color: var(--ink-2);
  font-size: clamp(.95rem, .92rem + .26vw, 1.06rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.hero-cta {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: clamp(1.8rem, 3.6vh, 2.6rem);
}

/* ── Hero corner cards ────────────────────────────────────── */
.hero-card {
  position: absolute;
  z-index: 3;
  border: 1px solid var(--glass-hi);
  border-radius: 14px;
  background: rgba(8, 12, 20, .5);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07),
              0 24px 60px -36px rgba(0, 0, 0, .95);
  opacity: 0;
  animation: card-in 900ms var(--e-out) 1400ms forwards;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Bottom-left cluster: the scroll affordance sits on the margin rule,
   the caption card runs off it to the right. */
.hero-foot {
  position: absolute;
  left: clamp(1.4rem, 3vw, 2.6rem);
  bottom: clamp(1.4rem, 3vw, 2.4rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .85rem;
}

.hero-scroll {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--glass-hi);
  border-radius: 999px;
  background: rgba(8, 12, 20, .5);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  color: var(--ink-2);
  opacity: 0;
  animation: card-in 900ms var(--e-out) 1320ms forwards;
  transition: border-color 260ms ease, color 260ms ease, background-color 260ms ease;
}

.hero-scroll i {
  font-style: normal;
  animation: nudge 2.6s var(--e-io) infinite;
}

@keyframes nudge {
  0%, 62%, 100% { transform: none; }
  74%           { transform: translateY(3px); }
}

.hero-scroll:hover { color: var(--ink); border-color: rgba(238, 232, 217, .26); }
.hero-scroll:active { transform: scale(.94); }

.hero-card-note {
  position: static;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 32ch;
  padding: .85rem .95rem;
  color: var(--ink-2);
  font-size: .82rem;
  line-height: 1.45;
  transition: border-color 280ms ease, color 280ms ease;
}

.hero-card-note i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(238, 232, 217, .1);
  color: var(--ink);
  font-style: normal;
  transition: transform 340ms var(--e-out), background-color 260ms ease, color 260ms ease;
}

.hero-card-note:hover { border-color: rgba(238, 232, 217, .22); color: var(--ink); }
.hero-card-note:hover i { background: var(--blue); color: var(--black); transform: translate(2px, -2px); }

.hero-card-avail {
  right: clamp(1.4rem, 3vw, 2.6rem);
  bottom: clamp(1.4rem, 3vw, 2.4rem);
  width: min(246px, 30vw);
  padding: .85rem .95rem .95rem;
}

.avail-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 600;
}

/* The dial reads the one number this studio actually commits to.
   It draws a full sweep — no invented percentage. */
.dial {
  position: relative;
  display: grid;
  place-items: center;
  margin: .8rem auto .15rem;
  width: 100px; height: 100px;
}

.dial-svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.dial-svg circle { fill: none; stroke-linecap: round; }

.dial-ticks {
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-dasharray: 1.5 15.4;   /* 24 marks around the circumference */
}

.dial-track { stroke: rgba(238, 232, 217, .12); stroke-width: 4; }

/* Resting state is the complete ring, stated explicitly. The draw-in is
   an enhancement on top of it — if the animation never runs, the dial
   is still a finished dial rather than an empty one. */
.dial-fill {
  stroke: var(--blue);
  stroke-width: 4;
  stroke-dasharray: 295.3;      /* 2πr, r = 47 */
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 7px rgba(59, 130, 246, .45));
  animation: dial-draw 1500ms var(--e-io) 1500ms backwards;
}

@keyframes dial-draw {
  from { stroke-dashoffset: 295.3; }
  to   { stroke-dashoffset: 0; }
}

.dial-mid {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: .1rem;
  line-height: 1;
}

.dial-mid strong {
  font-family: var(--display);
  font-size: 1.62rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}

.dial-mid span {
  color: var(--ink-2);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.avail-note {
  margin-top: .55rem;
  color: var(--ink-2);
  font-size: .76rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}

.avail-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .95rem;
  padding: .6rem .9rem;
  border-radius: 999px;
  background: var(--blue);
  color: var(--black);
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 600;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 240ms ease, transform 160ms var(--e-out);
}

.avail-cta > i { position: relative; z-index: 1; font-style: normal; transition: transform 320ms var(--e-out); }
.avail-cta:hover { background: var(--blue-hi); }
.avail-cta:hover > i { transform: translateX(3px); }
.avail-cta:active { transform: scale(.97); }

/* ── Hero proof chips ─────────────────────────────────────────
   Absolute along the frame's bottom edge on wide screens; back in
   flow under the headline once the corners are gone.            */
.hero-rail {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 3vw, 2.4rem);
  translate: -50% 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  padding: 0;
  opacity: 0;
  animation: card-in 900ms var(--e-out) 1480ms forwards;
}

.hero-rail li {
  padding: .46rem .9rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(8, 12, 20, .48);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  color: var(--ink-2);
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 240ms ease, border-color 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .hero-rail li:hover { color: var(--ink); border-color: rgba(238, 232, 217, .3); }
}

/* The composition sheds furniture in the order it can least afford to
   keep it, and each step is a measured collision, not a guess:
   ─ below 1320 the chip row would run under the availability card;
   ─ below 1320 the margin label would run under the headline's first
     character, because the headline grows faster than the gutter;
   ─ below 1180 (or in a short window) the corner cards would sit in
     the headline's own band. */
@media (max-width: 1320px) {
  .hero-rail, .hero-vlabel { display: none; }
}

/* Short laptop windows (1440×789 is the commonest desktop viewport
   there is) have the width for the full composition but not the
   height. Rather than drop the corners there, the whole set gets
   tighter: the headline is capped against the viewport height, and
   the card sheds its caption so the dial and the button survive. */
@media (min-width: 1181px) and (max-height: 880px) {
  .hero-stage { padding-block: clamp(6rem, 13vh, 7.5rem) clamp(6rem, 22vh, 12rem); }

  .hero-h1 { font-size: min(clamp(1.5rem, 7.3vw, 5.35rem), 10.6vh); }
  .hero-lead { margin-top: 1rem; font-size: .96rem; }

  .dial { width: 78px; height: 78px; margin: .6rem auto .1rem; }
  .dial-mid strong { font-size: 1.24rem; }
  .dial-mid span { font-size: .58rem; }
  .avail-note { display: none; }
  .avail-cta { margin-top: .75rem; }
}

@media (max-width: 1180px), (max-height: 700px) {
  .hero-card, .hero-foot, .hero-rule, .hero-vlabel { display: none; }

  .hero-stage { padding-block: clamp(6.5rem, 15vh, 8rem) clamp(3rem, 8vh, 4.5rem); }
  .hero-cta { display: flex; }

  /* With the corner furniture gone, the form stops hanging from a top
     edge and instead centres on the whole stacked column. Anchoring it
     to the stage centre (not the top) lets the smoke reach from behind
     the headline down past the chips, so the lower half of the hero is
     part of the composition instead of a dead black band. */
  /* Dimming the wrapper, not the image: the image's entrance animation
     owns its own filter and would overwrite anything set here. */
  .hero-art { top: 50%; translate: -50% -50%; width: min(150vw, 620px); opacity: .8; }

  /* The bright lobe now sits behind the headline-and-lead band, so the
     dark core is raised to 40% and widened to blanket that whole zone —
     measured worst-case body contrast over the brightest smoke patch has
     to clear 4.5:1. The top and bottom fades keep the caps and the chips
     legible while the smoke still reads at the margins. */
  .hero-scrim {
    background:
      radial-gradient(96% 52% at 50% 40%,
        rgba(8, 12, 20, .96) 0%, rgba(8, 12, 20, .9) 34%,
        rgba(8, 12, 20, .5) 66%, transparent 88%),
      linear-gradient(to bottom, rgba(8, 12, 20, .6) 0%, rgba(8, 12, 20, .34) 30%,
        transparent 54%, rgba(8, 12, 20, .8) 100%);
  }

  /* Back in flow, under the headline, where the grid stacks them */
  .hero-rail {
    position: static;
    display: flex;
    translate: none;
    opacity: 1;
    animation: none;
  }
}

/* The header pill can't hold its full contents on a phone: brand plus
   status plus two icons plus the button measured 480px against a
   390px viewport, which pushed the whole page sideways. Brand and
   button are the two that earn the space. */
@media (max-width: 620px) {
  .head { padding-inline: 1.05rem; }
  .head-live, .head-icon { display: none; }
  .head-end { background: none; border-color: transparent; box-shadow: none; padding: 0; }
  .head-cta { padding: .72rem 1.1rem; font-size: .85rem; }

  /* A phone's viewport height swings ~90px between an iPhone 15 (844)
     and a Pro Max (932). Forcing the hero to a full 100svh on the tall
     one strands the centred column in the middle with a dead black band
     above and below. Capping the reserved height keeps the composition
     balanced on both: near-full on common phones, and on the tallest a
     sliver of the next section shows rather than a void. */
  .hero { min-height: min(100svh, 52rem); }

  .hero-stage {
    padding-block: clamp(4.75rem, 11vh, 6.25rem) clamp(3.25rem, 7.5vh, 4.5rem);
    gap: clamp(1.35rem, 3.4vh, 2.1rem);
  }

  /* Bigger, so the smoke is a full-bleed atmosphere that reaches toward
     both edges — the centred column then floats in it rather than
     sitting over a blob with black margins. */
  .hero-art { width: min(172vw, 720px); }

  /* Stacked and full-width: two side-by-side buttons at 430px shrink the
     column and enlarge the void; stacking also gives fuller tap targets. */
  .hero-cta { flex-direction: column; align-items: center; width: 100%; }
  .hero-cta .btn { width: 100%; max-width: 20rem; justify-content: center; }

  /* One claim per row on every phone. Left to wrap, the three chips fall
     into a 1-then-2 arrangement around 430px that reads as unbalanced;
     a single column keeps them a clean, deliberate list. */
  .hero-rail { flex-direction: column; align-items: center; gap: .5rem; }
}

@media (max-width: 520px) {
  .hero-inner { padding-inline: .9rem; }
  .hero-rail { max-width: 100%; }
  .hero-rail li { font-size: .63rem; letter-spacing: .08em; }
}

/* ── Ticker ───────────────────────────────────────────────── */
.ticker {
  position: relative;
  overflow: hidden;
  padding-block: 1.05rem;
  border-block: 1px solid var(--line);
  background: rgba(17, 24, 39, .3);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker.is-dragging { cursor: grabbing; }

.ticker-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.ticker-set {
  display: flex;
  align-items: center;
}

.ticker-set li {
  display: flex;
  align-items: center;
  padding-inline: clamp(1.1rem, 2.4vw, 2rem);
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color 240ms ease;
}

.ticker-set li::after {
  content: "";
  margin-left: clamp(1.1rem, 2.4vw, 2rem);
  width: 3px; height: 3px;
  background: var(--ink-3);
  rotate: 45deg;
}

.ticker:hover .ticker-set li { color: var(--ink); }

/* ── Bento / work tiles ───────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.4rem);
}

.tile {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  padding: clamp(.85rem, 1.4vw, 1.1rem);
  border: 1px solid var(--glass-hi);
  border-radius: 18px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  backdrop-filter: blur(24px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
              0 22px 60px -34px rgba(0, 0, 0, .95);
  transform-style: preserve-3d;
  transition: border-color 320ms ease, box-shadow 380ms var(--e-out);
}

.tile:hover {
  border-color: rgba(238, 232, 217, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
              0 40px 90px -40px rgba(0, 0, 0, 1);
}

.tile-lg { grid-column: span 4; }
.tile-md { grid-column: span 2; }
.tile-wide { grid-column: span 6; }

.tile-shot {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--navy);
  aspect-ratio: 16 / 10;
}

.tile-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: saturate(.42) contrast(1.02) brightness(.86);
  transform: scale(1.001);
  transition: transform 440ms var(--e-out), filter 420ms ease;
}

.tile-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 12, 20, .5), transparent 55%);
  opacity: 1;
  transition: opacity 420ms ease;
}

.tile-body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.15rem .55rem .5rem;
}

.tile-tag {
  display: inline-block;
  width: fit-content;
  padding: .24rem .6rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color 260ms ease, border-color 260ms ease;
}

.tile-name {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.tile-desc {
  max-width: 56ch;
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.55;
}

.tile-go {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .35rem;
  color: var(--ink-2);
  font-family: var(--display);
  font-size: .85rem;
  font-weight: 600;
  transition: color 240ms ease;
}

.tile-go i {
  font-style: normal;
  transition: transform 320ms var(--e-out);
}

.tile-lg .tile-name { font-size: clamp(1.5rem, 2.4vw, 2.05rem); }
.tile-lg .tile-desc { font-size: 1rem; }

@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-shot img {
    transform: scale(1.05);
    filter: saturate(1) contrast(1) brightness(1);
  }
  .tile:hover .tile-shot::after { opacity: .35; }
  .tile:hover .tile-go { color: var(--blue-hi); }
  .tile:hover .tile-go i { transform: translate(3px, -3px); }
  .tile:hover .tile-tag { color: var(--ink); border-color: rgba(238, 232, 217, .3); }
}

@media (min-width: 1000px) {
  .tile-wide {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  .tile-wide .tile-shot { aspect-ratio: 16 / 9; }
  .tile-wide .tile-body { padding-block: 0; padding-right: 1.5rem; }
  .tile-wide .tile-name { font-size: clamp(1.4rem, 2.1vw, 1.85rem); }
}

@media (max-width: 999px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile, .tile-lg, .tile-md, .tile-wide { grid-column: span 2; }
}

/* ── Services ─────────────────────────────────────────────── */
.svc-list { border-top: 1px solid var(--line); }

.svc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 148px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 2.9rem);
  border-bottom: 1px solid var(--line);
  transition: border-color 300ms ease;
}

/* Glass bleeds in behind the hovered row only */
.svc::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gut) * -.5);
  z-index: -1;
  border-radius: 14px;
  background: rgba(17, 24, 39, .5);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity 340ms var(--e-out);
}

.svc-fig {
  color: var(--ink-3);
  transition: color 380ms ease;
}

.svc-fig svg { width: 100%; height: auto; }

.svc-copy h3 { margin-bottom: .7rem; }

.svc-copy p {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.6;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.05rem;
}

.chips li {
  padding: .3rem .75rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: .78rem;
  letter-spacing: .01em;
  transition: color 260ms ease, border-color 260ms ease, transform 320ms var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
  .svc:hover::before { opacity: 1; }
  .svc:hover .svc-fig { color: var(--blue); }
  .svc:hover .chips li { color: var(--ink); border-color: rgba(238, 232, 217, .28); }
}

@media (max-width: 760px) {
  .svc { grid-template-columns: minmax(0, 1fr); gap: 1.35rem; }
  .svc-fig { width: 108px; }
}

/* ── Process (pinned scrub) ───────────────────────────────── */
.proc {
  position: relative;
  z-index: var(--z-base);
  height: 420vh;
}

.proc-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.proc-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.proc-intro h2 { max-width: 12ch; }

.proc-intro p {
  margin-top: 1.3rem;
  max-width: 40ch;
  color: var(--ink-2);
}

.proc-count {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  margin-top: 2.2rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.proc-count [data-proc-current] { color: var(--blue); font-size: 1.5rem; }
.proc-count-sep { color: var(--ink-3); }

.proc-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.4vh, 1.8rem);
}

.proc-step {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: start;
  opacity: .3;
  filter: blur(1.5px);
  transition: opacity 520ms var(--e-out), filter 520ms var(--e-out);
}

.proc-step.is-active { opacity: 1; filter: none; }

.proc-n {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: color 520ms var(--e-out), scale 620ms var(--e-out);
  transform-origin: 0 50%;
}

.proc-step.is-active .proc-n { color: var(--ivory); scale: 1.06; }

.proc-copy h3 { margin-bottom: .5rem; }

.proc-copy p {
  max-width: 52ch;
  color: var(--ink-2);
  font-size: clamp(.95rem, .92rem + .2vw, 1.05rem);
  line-height: 1.6;
}

.proc-rail {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}

.proc-rail-fill {
  display: block;
  height: 100%;
  background: var(--blue);
  transform-origin: 0 50%;
  transform: scaleX(var(--proc, 0));
}

@media (max-width: 900px) {
  .proc { height: auto; padding-block: var(--sec-y); }
  .proc-stage { position: static; height: auto; display: block; }
  .proc-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: start; }
  .proc-count { display: none; }
  .proc-steps { gap: 2.4rem; }
  .proc-step { opacity: 1; filter: none; }
  .proc-step .proc-n { color: var(--ink-2); }
  .proc-rail { order: 99; }
}

/* ── Principles (the page inverts) ────────────────────────── */
.invert {
  background: var(--ivory);
  color: var(--navy);
}

.invert h2 { color: var(--navy); }
.invert .sec-head p { color: rgba(17, 24, 39, .74); }
.invert .sq { background: var(--blue); }

.prin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}

.prin {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: 16px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .06),
              0 12px 30px -20px rgba(17, 24, 39, .3);
  transition: transform 420ms var(--e-out), box-shadow 420ms var(--e-out);
}

.prin h3 { margin-bottom: .7rem; color: var(--navy); }

.prin p {
  max-width: 46ch;
  color: rgba(17, 24, 39, .78);
  font-size: .97rem;
  line-height: 1.62;
}

@media (hover: hover) and (pointer: fine) {
  .prin:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .07),
                0 26px 50px -26px rgba(17, 24, 39, .42);
  }
}

/* ── Studio ───────────────────────────────────────────────── */
.studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.studio-copy h2 { max-width: 10ch; }

.prose {
  margin-top: 1.5rem;
  max-width: 58ch;
  color: var(--ink-2);
  line-height: 1.72;
}

.quote {
  margin-top: 2.6rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink);
}

.sheet {
  border: 1px solid var(--glass-hi);
  border-radius: 16px;
  /* Reads as a solid specification document, not another floating glass
     panel — a touch more opacity gives the studio section real hierarchy
     against the glass work tiles. */
  background: rgba(17, 24, 39, .72);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
              0 30px 70px -40px rgba(0, 0, 0, .95);
  overflow: hidden;
}

.sheet-cap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.35rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sheet dl { margin: 0; }

.sheet dl > div {
  display: grid;
  grid-template-columns: minmax(0, 104px) minmax(0, 1fr);
  gap: 1rem;
  padding: .85rem 1.35rem;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}

.sheet dl > div:last-child { border-bottom: 0; }

.sheet dt {
  color: var(--ink-2);
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-top: .2rem;
}

.sheet dd { margin: 0; color: var(--ink-2); line-height: 1.5; }

@media (max-width: 900px) {
  .studio { grid-template-columns: minmax(0, 1fr); }
  .sheet dl > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* ── Partners ─────────────────────────────────────────────── */
.partners {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

.partner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--glass-hi);
  border-radius: 18px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  backdrop-filter: blur(24px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
              0 22px 60px -34px rgba(0, 0, 0, .95);
  transform-style: preserve-3d;
  transition: border-color 320ms ease, box-shadow 380ms var(--e-out);
}

/* The open slot is an invitation, not a case — outlined, not filled */
.partner-open {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.partner-tag {
  display: inline-block;
  width: fit-content;
  padding: .24rem .6rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color 260ms ease, border-color 260ms ease;
}

.partner-name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink);
}

.partner-desc {
  max-width: 52ch;
  color: var(--ink-2);
  font-size: .97rem;
  line-height: 1.6;
}

.partner-go {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: .6rem;
  color: var(--ink-2);
  font-family: var(--display);
  font-size: .85rem;
  font-weight: 600;
  transition: color 240ms ease;
}

.partner-go i { font-style: normal; transition: transform 320ms var(--e-out); }

.partner-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  margin-top: auto;
  padding: .72rem 1.15rem;
  border-radius: 999px;
  background: var(--blue);
  color: var(--black);
  font-family: var(--display);
  font-size: .85rem;
  font-weight: 600;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 240ms ease, transform 160ms var(--e-out);
}

.partner-cta > i { position: relative; z-index: 1; font-style: normal; transition: transform 320ms var(--e-out); }
.partner-cta:hover { background: var(--blue-hi); }
.partner-cta:hover > i { transform: translateX(3px); }
.partner-cta:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  a.partner:hover {
    border-color: rgba(238, 232, 217, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
                0 40px 90px -40px rgba(0, 0, 0, 1);
  }
  a.partner:hover .partner-go { color: var(--blue-hi); }
  a.partner:hover .partner-go i { transform: translate(3px, -3px); }
  a.partner:hover .partner-tag { color: var(--ink); border-color: rgba(238, 232, 217, .3); }
}

@media (max-width: 760px) {
  .partners { grid-template-columns: minmax(0, 1fr); }
}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }

.qa { border-bottom: 1px solid var(--line); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(1.02rem, .98rem + .35vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.015em;
  transition: color 220ms ease;
}

.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--blue-hi); }

.qa-pm {
  position: relative;
  flex: 0 0 auto;
  width: 15px; height: 15px;
}

.qa-pm::before, .qa-pm::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform 320ms var(--e-out), opacity 220ms ease;
}

.qa-pm::after { rotate: 90deg; }
.qa[open] .qa-pm::after { rotate: 90deg; transform: scaleX(0); opacity: 0; }

.qa-wrap {
  overflow: hidden;
  padding-bottom: 1.5rem;
}

.qa-wrap p {
  max-width: 72ch;
  color: var(--ink-2);
  font-size: .99rem;
  line-height: 1.68;
}

/* ── Contact ──────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact-grid h2 { max-width: 12ch; }

.lead {
  margin-top: 1.5rem;
  max-width: 52ch;
  color: var(--ink-2);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.14rem);
  line-height: 1.62;
}

.ci {
  margin-top: 2.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.4rem;
  border-top: 1px solid var(--line);
  padding-top: 1.8rem;
}

.ci dt {
  color: var(--ink-2);
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.ci dd { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.5; }

.tlink {
  color: var(--ink);
  background-image: linear-gradient(var(--blue), var(--blue));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 320ms var(--e-out), color 240ms ease;
}

.tlink:hover { color: var(--blue-hi); background-size: 100% 1px; }

/* Form */
.form {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--glass-hi);
  border-radius: 18px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
              0 30px 70px -40px rgba(0, 0, 0, .95);
}

.hp { position: absolute; left: -9999px; opacity: 0; }

.field { margin-bottom: 1.25rem; }

.field label {
  display: block;
  margin-bottom: .5rem;
  color: var(--ink-2);
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(8, 12, 20, .5);
  color: var(--ink);
  font-size: .97rem;
  transition: border-color 240ms ease, background-color 240ms ease;
}

.field textarea { resize: vertical; min-height: 128px; line-height: 1.55; }

/* Placeholder ink clears 4.5:1 — the muted-gray default does not */
.field ::placeholder { color: var(--ink-2); opacity: 1; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-2); opacity: 1; }

.field select {
  appearance: none;
  cursor: pointer;
  /* Native arrow is stripped by appearance:none — draw one back so the
     control still reads as a dropdown. Ivory chevron, tuned to --ink. */
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23EEE8D9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.field select option { background: var(--navy); color: var(--ink); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue);
  /* background-color, not the background shorthand — the shorthand would
     wipe the select chevron's background-image on focus. */
  background-color: rgba(8, 12, 20, .8);
  outline: none;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 2px; }

.err {
  display: none;
  margin-top: .45rem;
  color: #FCA5A5;
  font-size: .82rem;
}

.field.is-invalid .err { display: block; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #F87171; }

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
}

.form-msg { font-size: .88rem; color: var(--ink-2); }
.form-msg.is-ok { color: #86EFAC; }
.form-msg.is-bad { color: #FCA5A5; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Footer ───────────────────────────────────────────────── */
.foot {
  position: relative;
  z-index: var(--z-base);
  padding-block: clamp(4rem, 9vh, 7rem) 2.5rem;
  border-top: 1px solid var(--line);
  overflow: hidden;
  /* Same reason as .hero-stage — backdrop for the art's screen blend */
  background: var(--black);
}

.dust {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: .5;
  pointer-events: none;
}

/* The page closes on the cool form, quiet and far right */
.foot-art {
  position: absolute;
  top: 50%; right: -8%;
  z-index: 0;
  width: clamp(360px, 46vw, 720px);
  aspect-ratio: 1;
  translate: 0 -50%;
  pointer-events: none;
  /* Blend on the wrapper, same stacking-context reason as .hero-art */
  mix-blend-mode: screen;
  opacity: .3;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 96%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 96%);
}

.foot-art img {
  width: 100%; height: 100%;
  object-fit: contain;
}

@media (max-width: 900px) {
  .foot-art { right: -30%; opacity: .38; }
}

.foot > .wrap { position: relative; z-index: 1; }

.foot-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
  border-bottom: 1px solid var(--line);
}

.foot-cta-eyebrow {
  color: var(--ink-2);
  font-family: var(--display);
  font-size: var(--t-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bigcta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--glass-hi);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08),
              0 30px 70px -40px rgba(0, 0, 0, .95);
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -.035em;
  overflow: hidden;
  isolation: isolate;
  transition: transform 200ms var(--e-out), border-color 320ms ease;
}

.bigcta > span, .bigcta > i { position: relative; z-index: 1; }

.bigcta i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(2.4rem, 4vw, 3.2rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--blue);
  color: var(--black);
  font-style: normal;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  transition: transform 380ms var(--e-out), background-color 260ms ease;
}

.bigcta:hover { border-color: rgba(238, 232, 217, .24); }
.bigcta:hover i { transform: translateX(5px); background: var(--blue-hi); }
.bigcta:active { transform: scale(.985); }

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vh, 4.5rem);
}

.foot-brand img { width: clamp(126px, 15vw, 164px); height: auto; }

.foot-brand p {
  margin-top: 1.2rem;
  max-width: 40ch;
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.6;
}

.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }

.foot-col h4 {
  margin-bottom: .5rem;
  color: var(--ink-2);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Underline draws in from the left */
.foot-col a {
  position: relative;
  color: var(--ink-2);
  font-size: .92rem;
  transition: color 220ms ease;
}

.foot-col a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 320ms var(--e-out);
}

.foot-col a:hover { color: var(--ink); }
.foot-col a:hover::after { transform: scaleX(1); }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: .82rem;
}

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Reveal (enhances an already-visible default) ─────────── */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity 820ms var(--e-out), transform 820ms var(--e-out),
              filter 820ms var(--e-out);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Failsafe: if JS or GSAP never runs, content must still render */
.no-js [data-reveal],
[data-reveal].force-in { opacity: 1; transform: none; filter: none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 860px) {
  .dock-wide { display: none; }
  /* Cap the reserved height: on the tallest phones (Pro-Max ~932) and
     tablet portrait, a flat 92svh strands the centred column between a
     dead band above and below. The cap keeps it near-full on common
     phones and content-balanced on taller viewports. */
  .hero { min-height: min(92svh, 52rem); }
  .hero-stage { padding-top: 6.5rem; }
  .dock { bottom: 1rem; }
  /* Room for the dock, which is the only nav at this width */
  body { padding-bottom: 4.5rem; }
}

@media (max-width: 560px) {
  /* The accent mark needs the last line to have room for it. Below
     this width it wraps to a line of its own and reads as a stray
     dot, so it sits out — the mark still appears in the logo, the
     section headings and the margin label. */
  .hero-h1 .sq-pop { display: none; }

  .head-cta span { display: none; }
  .head-cta { padding: .7rem .95rem; }
  .head-cta .arr { font-size: 1.05rem; }
}

/* Touch / coarse pointers never get the custom cursor */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
  .ticker { cursor: default; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    /* Delay matters as much as duration here: a staggered entrance with
       opacity:0 and a 1.4s delay leaves the hero's corner furniture
       invisible for a second and a half to someone who asked for less
       motion, which is the opposite of the point. */
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; filter: none; }

  .ambient-css { animation: none; }
  .grain { animation: none; }
  .dial-fill { animation: none; }
  .hero-scroll i { animation: none; }
  .cursor { display: none; }
  .dust { display: none; }

  .ticker-track { transform: none !important; }
  .ticker {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .proc { height: auto; padding-block: var(--sec-y); }
  .proc-stage { position: static; height: auto; display: block; }
  .proc-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: start; }
  .proc-step { opacity: 1; filter: none; }
  .proc-step .proc-n { color: var(--ink-2); }
  .proc-count { display: none; }

  .hero-h1 .sq-pop { opacity: 1; scale: 1; }
}

/* ── Reduced transparency ─────────────────────────────────────
   Users who ask for less transparency (and browsers without
   backdrop-filter) get solid surfaces instead of glass, with the
   contrast the glass recipe was tuned to preserve. */
@media (prefers-reduced-transparency: reduce) {
  .head-nav, .head-end, .dock,
  .hero-card, .hero-scroll, .hero-rail li,
  .ticker, .tile, .sheet, .form, .bigcta, a.partner {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--navy);
  }

  .svc::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--navy); }

  /* Ivory principles section: solid white cards instead of frosted */
  .invert .prin {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fff;
  }
}