/* ==========================================================================
   MAYA OVERTON — parallax / omnidirectional 3D build
   Type and palette carried over from the earlier single-file study:
   Playfair Display headings, Inter body, Space Mono furniture, signal red.
   ========================================================================== */

:root{
  --paper:#F2EEE6;
  --paper-2:#E7E1D6;
  --ink:#141110;
  --muted:#6b625a;
  --line:rgba(20,17,16,.14);
  --line-2:rgba(20,17,16,.28);
  --dark:#141110;

  /* Earth pigments and their neon counterparts. Each has a grounded value
     for surfaces and a pushed one for highlights, so the neon always has a
     parent in the photography rather than arriving from nowhere. */
  --terracotta:#A85433;   --terracotta-hi:#D9622F;   /* the clay of the walls */
  --indigo:#2E2A8C;       --indigo-hi:#4B44CC;       /* the cool counterweight */
  --buffalo:#8A6335;      --buffalo-hi:#B5803C;      /* hide, ochre, leather */
  --spirulina:#0B6E52;    --spirulina-hi:#1F9E74;    /* deep blue-green algae */
  --biglobossa:#B92E33;   --biglobossa-hi:#D93B3B;   /* the locust-bean flower */

  --flare:var(--biglobossa-hi);
  --signal:var(--flare);  /* alias so older rules still resolve */

  /* each section sets its own accent; components read this, never a fixed hue */
  --accent:var(--biglobossa-hi);

  /* These are matte pigments, not lit tubes. Nothing blooms anywhere; the
     tokens stay so the components have something to resolve against. */
  --halo:0 0 0 rgba(0,0,0,0);
  --halo-soft:0 0 0 rgba(0,0,0,0);

  --pad:clamp(20px,3.2vw,52px);

  --sans:'Inter',Arial,Helvetica,sans-serif;
  --display:'Space Grotesk','Inter',Arial,Helvetica,sans-serif;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* live values written by script.js */
  --vel:0;
  --mx:0;
  --my:0;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--paper);
  /* Elements gliding in on +Z are magnified by the perspective and would
     otherwise widen the document. Clip once at the root: putting `clip` on the
     individual scenes instead breaks rendering of the perspective + sticky
     sections. `clip` never creates a scroll container, so sticky is unaffected. */
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ==========================================================================
   AMBIENT OVERLAYS
   ========================================================================== */

.grain{
  position:fixed;inset:0;pointer-events:none;z-index:60;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
}

.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:6;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(28,24,16,.15) 100%),
    linear-gradient(to bottom, rgba(242,238,230,.5) 0%, transparent 18%, transparent 86%, rgba(242,238,230,.5) 100%);
}

/* ==========================================================================
   DEPTH FIELD — the parallax image planes behind the whole document
   ========================================================================== */

.depth{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  perspective:1400px;
  perspective-origin:50% 50%;
  overflow:hidden;
}

.depth-planes{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}

.plane{
  position:absolute;
  background-image:var(--img);
  background-size:var(--bs,cover);
  background-position:var(--bp,50% 50%);
  background-repeat:no-repeat;
  opacity:0;
  will-change:transform,opacity;
}

/* full-bleed: reserved for source art that can survive the upscale */
.plane.full{
  inset:-14%;
  filter:saturate(1.28) contrast(1.07);
  --feather:radial-gradient(130% 120% at 50% 48%, #000 62%, rgba(0,0,0,.72) 86%, transparent 100%);
  -webkit-mask-image:var(--feather);
  mask-image:var(--feather);
}

/* floating panel: a single frame lifted out of a contact sheet, kept small
   enough to stay sharp and sitting at its own depth in the field. The mask
   dissolves its edges so it reads as imagery surfacing through the paper
   rather than a rectangle parked behind the text. */
.plane.panel{
  left:var(--x);top:var(--y);
  width:var(--w);aspect-ratio:var(--ar,4/3);
  /* the new photography carries the colour, so push it rather than mute it */
  filter:saturate(1.2) contrast(1.06);
  --feather:radial-gradient(ellipse 74% 74% at 50% 50%, #000 30%, rgba(0,0,0,.62) 66%, transparent 100%);
  -webkit-mask-image:var(--feather);
  mask-image:var(--feather);
}

/* paper wash — light enough to keep the terracotta reading as colour */
.depth-wash{
  position:absolute;inset:0;
  background:
    radial-gradient(130% 100% at 50% 40%, rgba(242,238,230,.02) 0%, rgba(242,238,230,.28) 58%, rgba(242,238,230,.6) 100%),
    linear-gradient(196deg, rgba(242,238,230,.08), rgba(231,225,214,.34));
}

/* ==========================================================================
   ENGINEERED TEXTURES — the CSS surfaces from the earlier study, now
   layered over the photography rather than standing in for it.
   z-index:-1 keeps them inside each scene's stacking context: behind the
   section's own content, in front of the depth field.
   ========================================================================== */

.tex{position:absolute;inset:0;z-index:-1;pointer-events:none}

/* faint 100mm survey grid */
.tex-concrete{
  background-image:
    linear-gradient(rgba(17,17,17,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.045) 1px, transparent 1px);
  background-size:100px 100px;
  background-attachment:fixed;
}

/* working-paper graph rule */
.tex-graph{
  background-image:
    linear-gradient(rgba(17,17,17,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.05) 1px, transparent 1px);
  background-size:22px 22px;
  background-attachment:fixed;
}
.tex-graph.on-dark{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}

/* raking light across a stucco wall, with the signal rule */
.tex-stucco{
  background-image:
    linear-gradient(to bottom, transparent 78%, rgba(225,31,53,.42) 78%, transparent 78.25%),
    linear-gradient(105deg, rgba(17,17,17,.015) 0%, rgba(17,17,17,.06) 50%, transparent 50.4%);
  background-size:100% 100vh, 100% 100%;
}

/* layered archival files */
.tex-files{
  background-image:
    linear-gradient(175deg, rgba(255,255,255,.42) 30%, transparent 30.3%),
    linear-gradient(172deg, rgba(17,17,17,.045) 45%, transparent 45.3%),
    linear-gradient(178deg, rgba(17,17,17,.03) 60%, transparent 60.3%);
}

/* ==========================================================================
   LOADER
   ========================================================================== */

.loader{
  position:fixed;inset:0;z-index:200;
  background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .7s ease,visibility .7s;
}
.loader-mark{
  font-family:var(--serif);
  font-size:clamp(30px,5vw,58px);font-weight:400;line-height:1.02;
  letter-spacing:-.02em;text-align:center;
}
.loader-bar{display:block;width:min(260px,54vw);height:2px;background:var(--line)}
.loader-bar span{display:block;height:100%;width:0;background:var(--flare);transition:width .3s ease}
.loader-note{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.22em;color:var(--muted)}
body:not(.is-loading) .loader{opacity:0;visibility:hidden}

/* ==========================================================================
   CHROME — progress, header, meter
   ========================================================================== */

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:45;background:transparent;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--flare);transform-origin:0 50%}

.site-header{
  position:fixed;top:0;left:0;right:0;height:74px;z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--pad);
  border-bottom:1px solid var(--line);
  background:rgba(244,244,240,.86);
  backdrop-filter:blur(12px) saturate(1.15);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  font-family:var(--mono);
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.site-header.is-hidden{transform:translateY(-101%)}
.brand{font-weight:700;letter-spacing:.14em}
.nav{display:flex;gap:30px}
.nav a,.brief-link{position:relative}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--flare);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav a:hover{color:var(--flare)}
.nav a:hover::after{transform:scaleX(1)}
.brief-link{justify-self:end;color:var(--flare);font-weight:700}
.brief-link span{display:inline-block;margin-left:7px;transition:transform .25s}
.brief-link:hover span{transform:translate(3px,-3px)}
.menu-btn{display:none;border:0;background:none;font:inherit;color:inherit;cursor:pointer}

.meter{
  position:fixed;right:0;top:50%;z-index:35;
  transform:translateY(-50%);
  width:116px;padding:12px 11px 13px;
  background:var(--ink);color:var(--paper);
  border:1px solid #2c2c2c;border-right:0;
  font-family:var(--mono);
}
.meter-label{font-size:8px;text-transform:uppercase;letter-spacing:.14em;opacity:.5}
.meter{--accent:var(--terracotta-hi)}
.meter-value{font-size:40px;letter-spacing:-.04em;margin:9px 0 2px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent);transition:color .55s ease;line-height:1}
.meter-stage{font-size:8px;line-height:1.3;text-transform:uppercase;letter-spacing:.1em;min-height:21px;opacity:.7}
.meter-track{height:2px;background:#3a3a38;margin-top:13px;overflow:hidden}
.meter-track span{display:block;height:100%;width:58%;background:var(--accent);transition:width .5s cubic-bezier(.2,.8,.2,1),background .55s ease}

/* ==========================================================================
   SCENE / STAGE — every section is its own 3D camera
   ========================================================================== */

main{position:relative;z-index:1}

.scene{
  position:relative;
  perspective:1500px;
  perspective-origin:calc(50% + var(--mx) * 12%) calc(50% + var(--my) * 12%);
  transform-style:flat;
}

/* per-section accent: components below read var(--accent), so the neon
   rotates through the page instead of one hue carrying everything */
#hero    {--accent:var(--indigo-hi)}
#window  {--accent:var(--biglobossa-hi)}
#practice{--accent:var(--indigo-hi)}
#method  {--accent:var(--spirulina-hi)}
#index   {--accent:var(--terracotta-hi)}
#signals {--accent:var(--biglobossa-hi)}
#work    {--accent:var(--buffalo-hi)}
#move    {--accent:var(--spirulina-hi)}
#company {--accent:var(--indigo-hi)}
#brief   {--accent:var(--biglobossa-hi)}

/* the dark scenes lift the accent a little so it holds against the ground,
   but it stays flat — no bloom, no halo */
#method,#move{--accent:#3FBE8F}

.stage{transform-style:preserve-3d}

/* .glide carries no promotion of its own — script.js applies a 3D transform
   only while an element is actually travelling, then clears it so the layer
   is released. Promoting all of them permanently exhausts the compositor. */

section:not(.hero){padding:clamp(90px,13vh,150px) var(--pad)}

h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance}
p,li,figcaption{text-wrap:pretty}

.eyebrow{
  position:relative;
  display:flex;flex-wrap:wrap;align-items:baseline;
  font-family:var(--mono);
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  padding-bottom:12px;padding-left:18px;
  margin-bottom:clamp(40px,6vh,64px);
}
.eyebrow::before{
  content:"";position:absolute;left:0;top:.34em;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent),var(--halo-soft);
}
.eyebrow::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:76px;
  background:var(--accent);box-shadow:var(--halo-soft);
}
/* the beat: what this section does in the argument */
.eyebrow i{
  font-style:normal;color:var(--muted);
  letter-spacing:.1em;
}
.eyebrow i::before{content:"/";margin:0 .9em;opacity:.45}
.eyebrow.light{color:#8d8d86;border-color:rgba(255,255,255,.14)}

.tile{
  background-image:var(--img);
  background-size:var(--bs,cover);
  background-position:var(--bp,50% 50%);
  background-repeat:no-repeat;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  min-height:100svh;
  padding:calc(74px + 4vh) var(--pad) 34px;
  display:flex;flex-direction:column;
}
.hero .stage{position:relative;display:flex;flex-direction:column;flex:1}
.hero-kicker{
  font-family:var(--mono);
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;margin:0;color:var(--muted);
}

.hero-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(30px,4.8vw,88px);
  line-height:.98;letter-spacing:-.035em;
  margin:0;
  max-width:50vw;
  text-wrap:balance;
  transform-style:preserve-3d;
}
/* no italic, no accent fill, no rule — the headline carries on weight alone */
.hero-title em{font-style:normal;color:inherit}

/* The headline is one line of text that types and backspaces itself, the way
   a prompt edits a command: only the tail after the changed word is rewritten,
   so a word swap reads as an edit rather than a replacement. */
.q-stack{position:relative;display:block}
.q-line{display:block}

/* block caret: solid while the line is being typed, blinking when it rests */
.q-line::after{
  content:"";display:inline-block;vertical-align:baseline;
  width:.26em;height:.6em;margin-left:.1em;
  background:currentColor;
  transform:translateY(.02em);
}
.q-line.is-idle::after{animation:caret 1.1s steps(1,end) infinite}
@keyframes caret{0%,55%{opacity:1}56%,100%{opacity:0}}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.hero-mid{
  position:absolute;inset:0;
  display:flex;align-items:center;
  pointer-events:none;
}
.hero-mid > *{pointer-events:auto}
.hero-foot{margin-top:auto;padding-bottom:34px}
.hero-bottom{
  display:grid;grid-template-columns:1.5fr .8fr;gap:34px 40px;align-items:end;
  margin-top:26px;
}
.hero-copy{
  font-size:clamp(17px,1.5vw,23px);line-height:1.45;max-width:50vw;margin:0;color:rgba(20,17,16,.82);
}
.hero-meta{
  display:flex;justify-content:space-between;gap:20px;
  font-family:var(--mono);
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  border-top:1px solid var(--line-2);padding-top:10px;
}

.window{border-top:1px solid var(--ink);position:relative;padding-top:11px;margin:0}
.window-line{
  display:grid;grid-template-columns:repeat(5,1fr);
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;
}
.window-zone{padding-right:8px;color:var(--muted)}
.window-zone.active{color:var(--accent);font-weight:700}
.window-indicator{
  position:absolute;left:var(--pos);top:-6px;transform:translateX(-50%);
  width:13px;height:13px;border:2px solid var(--ink);background:var(--accent);border-radius:50%;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.window-indicator span{
  position:absolute;inset:-9px;border:1px solid var(--accent);border-radius:50%;opacity:.5;
  animation:ping 3.2s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes ping{0%{transform:scale(.5);opacity:.5}70%,100%{transform:scale(1.5);opacity:0}}

.scroll-cue{
  position:absolute;left:var(--pad);bottom:14px;
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);
}
.scroll-cue span{display:block;width:34px;height:1px;background:var(--line-2);overflow:hidden;position:relative}
.scroll-cue span::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  animation:sweep 2.4s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ==========================================================================
   01 / THE THESIS
   ========================================================================== */

.statement{border-top:1px solid var(--line)}
.statement-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px)}
.statement h2,
.section-heading-row h2,
.index-section h2,
.company h2,
.brief h2{
  font-size:clamp(36px,4.9vw,74px);line-height:1.06;letter-spacing:-.016em;margin:0;
}
.statement-copy{font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:var(--muted)}
.statement-copy p{margin:0 0 1.3em}
.statement-copy p:last-child{margin-bottom:0}

.era-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,34px);
  margin-top:clamp(64px,9vh,104px);
  transform-style:preserve-3d;
}
.era{margin:0;transform-style:preserve-3d}
.era-img{
  display:block;aspect-ratio:3/4;
  background-size:cover;
  filter:saturate(1.15) contrast(1.05);
  box-shadow:0 30px 60px -30px rgba(60,26,10,.6);
}
.era figcaption{
  display:block;margin-top:12px;padding-top:9px;border-top:1px solid var(--line-2);
  font-size:13px;line-height:1.5;color:var(--muted);
}
.era figcaption b{
  display:block;font-family:var(--mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink);margin-bottom:5px;
}

.threshold-chart{margin-top:clamp(56px,8vh,90px)}
.threshold-labels{
  display:grid;grid-template-columns:1fr 1.3fr 1fr 1fr;
  font-family:var(--mono);
  font-size:9px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin-bottom:9px;
}
.threshold-bar{height:14px;background:#dedbd2;position:relative;overflow:hidden}
.sweet-spot{
  position:absolute;left:27%;top:0;bottom:0;width:32%;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.is-in .sweet-spot{transform:scaleX(1)}
.marker{position:absolute;left:52%;top:-8px;height:30px;width:1px;background:var(--ink)}

/* ==========================================================================
   02 / CAPABILITIES — pinned horizontal rail
   ========================================================================== */

.practice{
  border-top:1px solid var(--line);
  padding:0 !important;
  height:420vh;
}
.rail-viewport{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  padding:94px 0 40px;
}
.rail-head{padding:0 var(--pad);max-width:1400px}
.rail-head .eyebrow{margin-bottom:22px}
.rail-head h2{font-size:clamp(34px,4.4vw,66px);line-height:1.06;letter-spacing:-.016em;margin:0 0 16px}
.rail-head p{font-size:clamp(15px,1.15vw,18px);line-height:1.6;max-width:560px;margin:0;color:var(--muted)}
.rail-hint{
  display:flex;align-items:center;gap:12px;margin-top:24px;
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
}
.rail-hint-bar{display:block;width:90px;height:2px;background:var(--line)}
.rail-hint-bar i{display:block;height:100%;width:0;background:var(--accent)}

.rail-track{
  display:flex;gap:clamp(16px,2vw,30px);
  padding:clamp(28px,4.5vh,52px) var(--pad) 0;
  width:max-content;
  transform-style:preserve-3d;
  will-change:transform;
}
.practice-card{
  position:relative;
  flex:0 0 clamp(280px,32vw,430px);
  min-height:clamp(320px,44vh,450px);
  padding:20px 22px 22px;
  border:1px solid var(--line-2);
  background:rgba(244,244,240,.68);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;flex-direction:column;
  transform-style:preserve-3d;
  overflow:hidden;
}
.card-img{
  position:absolute;inset:0;z-index:-1;
  opacity:.85;filter:saturate(1.15) contrast(1.05);
  transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1);
}
.practice-card:hover .card-img{opacity:1;transform:scale(1.06)}
.practice-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(242,238,230,.92) 4%,rgba(242,238,230,.5) 44%,rgba(242,238,230,.04) 100%);
}
.practice-card .number{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink);
  align-self:flex-start;padding:4px 9px;border-radius:20px;
  background:var(--accent);color:#fff;
}
.practice-card h3{font-size:clamp(26px,3vw,40px);letter-spacing:-.015em;margin:auto 0 14px;line-height:1.06}
.practice-card p{font-size:15px;line-height:1.55;margin:0 0 24px;max-width:330px;color:var(--muted)}
.card-signal{
  margin-top:auto;padding-top:10px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
}
.practice-card.rail-end{background:var(--dark);border-color:var(--dark);color:var(--paper)}
.practice-card.rail-end::after{display:none}
.practice-card.rail-end .number{background:var(--indigo-hi);color:#fff}
.practice-card.rail-end h3{color:var(--paper)}
.practice-card.rail-end p{color:rgba(255,255,255,.72)}
.practice-card.rail-end .card-signal{color:var(--spirulina-hi);border-color:rgba(255,255,255,.3)}

/* ==========================================================================
   03 / METHODOLOGY — dark
   ========================================================================== */

.method{
  position:relative;
  background:var(--dark);color:#f2efe7;
  overflow:hidden;
  isolation:isolate;
}
.method .section-bg{
  position:absolute;inset:-12%;z-index:0;
  opacity:.38;
  filter:saturate(1.15) contrast(1.05);
}
.method::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 22% 30%, rgba(18,18,17,.30) 0%, rgba(18,18,17,.86) 62%, rgba(18,18,17,.97) 100%);
}
.method .tex{z-index:1}
.method-inner{position:relative;z-index:2}
.method-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px)}
.method h2{font-size:clamp(44px,6.6vw,104px);line-height:1.0;letter-spacing:-.022em;margin:0}
.method h2 span{display:block}
.method h2 span:last-child em{font-style:italic;color:var(--accent);text-shadow:var(--halo)}
.method-intro{align-self:end;font-size:clamp(15px,1.15vw,18px);line-height:1.6;max-width:520px;color:#b6b3aa}
.method-steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(60px,9vh,96px);border-top:1px solid #3d3d3a;
  transform-style:preserve-3d;
}
.method-steps article{
  padding:18px 24px 40px 0;border-right:1px solid #3d3d3a;min-height:240px;
  transform-style:preserve-3d;
}
.method-steps article:not(:first-child){padding-left:24px}
.method-steps article:last-child{border-right:0}
.method-steps b{font-family:var(--mono);font-size:9px;color:var(--accent);letter-spacing:.14em;text-shadow:var(--halo-soft)}
.method-steps h3{font-size:clamp(21px,2.2vw,28px);margin:48px 0 12px;letter-spacing:-.01em}
.method-steps p{color:#b6b3aa;line-height:1.6;font-size:15px;margin:0}

/* engagement formats strip */
.formats{
  position:relative;z-index:2;
  margin-top:clamp(48px,7vh,80px);padding-top:16px;
  border-top:1px solid #3d3d3a;
  display:flex;flex-wrap:wrap;gap:10px 34px;align-items:baseline;
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:#8d8d86;
}
.formats b{color:#f2efe7;font-weight:400}

/* ==========================================================================
   04 / THE MAYA INDEX — z-tunnel
   ========================================================================== */

.index-section{
  border-top:1px solid var(--line);
  padding:0 !important;
  height:400vh;
}
.tunnel-viewport{
  position:sticky;top:0;height:100svh;
  overflow:hidden;
  display:grid;align-content:center;
  padding:94px var(--pad) 148px;
  perspective:1050px;
  perspective-origin:74% 50%;   /* vanishing point sits in the right-hand half */
}
.tunnel-copy{max-width:min(480px,42vw);position:relative;z-index:3}
.tunnel-copy .eyebrow{margin-bottom:22px}
.tunnel-copy h2{font-size:clamp(32px,3.7vw,56px)}
.tunnel-copy p{font-size:clamp(15px,1.1vw,17px);line-height:1.6;margin:18px 0 0;color:var(--muted)}

.tunnel{
  position:absolute;top:0;bottom:0;right:0;left:44%;
  transform-style:preserve-3d;
  pointer-events:none;
}
.tunnel-item{
  position:absolute;left:50%;top:50%;margin:0;
  width:min(430px,40vw);
  display:grid;grid-template-columns:96px 1fr;align-items:baseline;gap:0 20px;
  padding:19px 20px 18px;
  border:1px solid var(--line-2);
  background:rgba(246,245,240,.92);
  overflow:hidden;
  box-shadow:0 40px 70px -45px rgba(34,26,12,.7);
  opacity:0;
}
.tunnel-item span{
  font-family:var(--serif);
  font-size:clamp(32px,3.3vw,48px);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;
}
.tunnel-item b{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.11em;font-weight:700}
.tunnel-item i{grid-column:2;font-style:normal;font-size:14px;line-height:1.5;color:var(--muted);margin-top:7px}
.tunnel-item::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c,var(--accent));
}
.tunnel-item span{color:var(--c,var(--ink))}
.tunnel-item.is-maya{
  background:var(--c);border-color:var(--c);color:#fff;
  box-shadow:0 24px 60px -30px color-mix(in srgb, var(--c) 80%, transparent);
}
.tunnel-item.is-maya::before{background:#fff;opacity:.5}
.tunnel-item.is-maya span{color:#fff}
.tunnel-item.is-maya i{color:rgba(255,255,255,.88)}

/* the receding tunnel the cards fly down */
.tunnel-grid{
  position:absolute;top:0;bottom:0;right:0;left:38%;
  z-index:0;pointer-events:none;
  overflow:hidden;
  --feather:radial-gradient(ellipse 62% 62% at 50% 50%, #000 18%, rgba(0,0,0,.45) 55%, transparent 100%);
  -webkit-mask-image:var(--feather);
  mask-image:var(--feather);
}
.tunnel-grid g{
  fill:none;
  stroke:var(--accent);
  stroke-width:1;
  opacity:.3;
  transform-origin:50% 50%;
  transition:stroke .5s ease;
}

/* the live reading, taken as you travel the tunnel */
.readout{
  margin-top:clamp(28px,4vh,44px);
  padding-top:18px;border-top:1px solid var(--ink);
  display:grid;grid-template-columns:auto 1fr;align-items:end;gap:0 20px;
}
.readout-label{
  grid-column:1/-1;
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--muted);margin-bottom:6px;
}
.readout-value{
  font-family:var(--display);font-weight:700;
  font-size:clamp(56px,6.6vw,104px);line-height:.82;letter-spacing:-.045em;
  color:var(--accent);font-variant-numeric:tabular-nums;
  transition:color .5s ease;
}
.readout-band{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink);padding-bottom:.1em;
}

/* the calibrated strip the reading is taken against */
.scale{position:absolute;left:var(--pad);right:var(--pad);bottom:40px;z-index:4}
.scale-track{position:relative;height:52px;border-bottom:1px solid var(--ink)}
.scale-ticks{
  position:absolute;left:0;right:0;bottom:0;height:100%;
  background-image:
    linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 0 1px,transparent 1px);
  background-size:10% 46%,2% 22%;
  background-position:0 100%,0 100%;
  background-repeat:repeat-x,repeat-x;
}
.scale-bands{position:absolute;inset:0}
.scale-bands span{
  position:absolute;top:0;bottom:0;
  left:calc(var(--from) * 1%);
  width:calc((var(--to) - var(--from)) * 1%);
  border-left:1px solid var(--line-2);
  padding:0 0 0 8px;
  display:flex;align-items:flex-start;
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);
}
.scale-bands span::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--c);opacity:.85;
}
/* the band the reading currently sits in lifts out of the row */
.scale-bands span.is-live{color:var(--ink)}
.scale-bands span.is-live::before{height:9px;opacity:1}
.scale-marker{
  position:absolute;top:-10px;bottom:-1px;left:var(--pos,50%);
  width:2px;background:var(--accent);transform:translateX(-50%);
  transition:background .5s ease;
}
.scale-marker i{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;
  background:var(--accent);border:2px solid var(--paper);
  transition:background .5s ease;
}
.scale-legend{
  display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--muted);
}

/* ==========================================================================
   05 / TOOLBOX — the instruments, offered as working paper
   ========================================================================== */

.toolbox-band{border-top:1px solid var(--line)}
#toolbox{--accent:var(--buffalo-hi)}
.band-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:start}
.band-grid h2{font-size:clamp(36px,4.9vw,74px);line-height:1.06;letter-spacing:-.016em;margin:0}
.band-grid p{font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:var(--muted);margin:22px 0 0;max-width:560px}

.band-cta{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:clamp(28px,4vh,44px);padding-bottom:8px;
  border-bottom:2px solid var(--accent);color:var(--ink);
  font-family:var(--mono);font-size:clamp(13px,1.2vw,17px);letter-spacing:.02em;
}
.band-cta span{transition:transform .25s}
.band-cta:hover span{transform:translate(5px,-5px)}

.band-list{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--ink);
}
.band-list li{
  display:grid;grid-template-columns:44px 1fr;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:15px;transition:padding .3s cubic-bezier(.2,.8,.2,1),background .3s;
}
.band-list li:hover{background:var(--accent);color:#fff;padding-left:12px;padding-right:12px}
.band-list b{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--accent);font-weight:400}
.band-list li:hover b{color:rgba(255,255,255,.8)}

/* ==========================================================================
   05 / INSIGHTS
   ========================================================================== */

.signals{border-top:1px solid var(--line);position:relative;overflow:clip}
.constellation{position:absolute;inset:0;z-index:0;pointer-events:none;transform-style:preserve-3d}
.constellation span{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--w);aspect-ratio:var(--ar,4/3);
  opacity:.44;filter:saturate(1.2) contrast(1.05);
  --feather:radial-gradient(ellipse 74% 74% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image:var(--feather);
  mask-image:var(--feather);
}
.signals > *:not(.constellation):not(.tex){position:relative;z-index:1}

.section-heading-row{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:end;
  margin-bottom:clamp(40px,6vh,64px);
}
.section-heading-row>p{font-size:clamp(15px,1.15vw,18px);line-height:1.6;max-width:520px;margin:0;color:var(--muted)}

.signal-list{border-top:1px solid var(--ink)}
.signal-item{
  display:grid;grid-template-columns:110px 1fr 150px 90px;align-items:center;
  padding:24px 0;border-bottom:1px solid var(--line);
  transition:padding .35s cubic-bezier(.2,.8,.2,1),background .35s,color .35s;
}
.signal-item:hover{background:var(--accent);color:#fff;padding-left:16px;padding-right:16px}
.signal-item span,
.signal-item em,
.signal-item small{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-style:normal;color:var(--muted)}
.signal-item:hover span,.signal-item:hover em,.signal-item:hover small{color:rgba(255,255,255,.78)}
.signal-item h3{font-size:clamp(20px,2.1vw,32px);letter-spacing:-.012em;margin:0;line-height:1.15}
.signal-item small{text-align:right}
.signal-item small.restricted{color:#fff;font-weight:700;background:var(--accent);padding:3px 7px}

/* shared section heading used by the toolbox and the research bank */
  .group-head{
    display:flex;align-items:baseline;gap:14px;
    margin:clamp(48px,7vh,80px) 0 18px;padding-bottom:10px;
    border-bottom:1px solid var(--ink);
    font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;
  }
  .group-head i{font-style:normal;color:var(--muted);font-size:9px}

/* ==========================================================================
   RESEARCH NOTE GATE
   ========================================================================== */

/* the rows are buttons now, so the browser defaults have to be undone */
button.signal-item{
  width:100%;border:0;border-bottom:1px solid var(--line);
  background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
}

.gate{
  position:fixed;inset:0;z-index:180;
  display:flex;align-items:center;justify-content:center;padding:var(--pad);
  background:rgba(20,17,16,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s;
}
.gate.is-open{opacity:1;visibility:visible}
body.gate-open{overflow:hidden}

.gate-panel{
  position:relative;width:min(460px,100%);max-height:88svh;overflow-y:auto;
  background:var(--paper);border:1px solid var(--ink);
  padding:34px 34px 30px;
  transform:translateY(14px) scale(.985);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.gate.is-open .gate-panel{transform:none}

.gate-close{
  position:absolute;top:12px;right:14px;
  border:0;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;
}
.gate-close:hover{color:var(--ink)}

.gate-code{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--accent);margin:0 0 10px}
.gate-title{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.12;margin:0 0 12px}
.gate-note{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 22px}

.gate form{display:grid;gap:14px}
/* display:grid outranks the [hidden] attribute's display:none */
.gate form[hidden]{display:none}
.gate label{
  display:grid;gap:6px;
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);
}
.gate label i{font-style:normal;opacity:.6}
.gate input[type=text],.gate input[type=email],.gate input[type=tel]{
  font:inherit;font-size:15px;color:var(--ink);
  border:0;border-bottom:1px solid var(--line-2);background:none;
  padding:7px 0;text-transform:none;letter-spacing:0;
}
.gate input:focus{outline:0;border-bottom-color:var(--accent)}
.gate input:user-invalid{border-bottom-color:var(--biglobossa-hi)}

.gate label.gate-check{
  grid-template-columns:auto 1fr;align-items:start;gap:10px;
  text-transform:none;letter-spacing:0;color:var(--muted);
  font-family:var(--sans);font-size:12.5px;line-height:1.5;
}
.gate label.gate-check input{margin-top:2px;accent-color:var(--accent);width:auto}

.gate-submit{
  margin-top:8px;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.14em;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:14px 18px;cursor:pointer;transition:background .3s,border-color .3s;
}
.gate-submit:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.gate-submit[disabled]{opacity:.55;cursor:progress}

.gate-status{font-size:13.5px;line-height:1.6;color:var(--ink);margin:16px 0 0}
.gate-download{
  display:none;margin-top:14px;text-align:center;padding:13px 18px;
  border:1px solid var(--accent);color:var(--accent);
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;
}
.gate-download.is-ready{display:block}
.gate-download:hover{background:var(--accent);color:#fff}

/* shown only when the relay failed, so a capture is never silently lost */
.gate-fallback{
  display:none;margin-top:12px;padding:11px 14px;
  border:1px solid var(--biglobossa-hi);color:var(--biglobossa-hi);
  font-family:var(--mono);font-size:9.5px;line-height:1.5;
  text-transform:uppercase;letter-spacing:.1em;text-align:center;
}
.gate-fallback.is-on{display:block}
.gate-fallback:hover{background:var(--biglobossa-hi);color:#fff}

/* the conversion step: shown once the note has been delivered */
.gate-cta{display:none;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)}
.gate-cta.is-on{display:block}
.gate-cta p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 12px}
.gate-cta a{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:4px;
}
.gate-cta a span{transition:transform .25s}
.gate-cta a:hover span{transform:translate(4px,-4px)}

/* ==========================================================================
   06 / SELECTED ENGAGEMENTS
   ========================================================================== */

.work{border-top:1px solid var(--line)}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,30px);transform-style:preserve-3d}
.case-card{
  position:relative;overflow:hidden;
  background:rgba(244,244,240,.74);
  border:1px solid var(--line-2);
  padding:clamp(22px,2.6vw,36px);
  min-height:clamp(430px,58vh,540px);
  display:flex;flex-direction:column;
  transform-style:preserve-3d;
}
.case-img{
  position:absolute;inset:0;z-index:-1;
  opacity:.62;filter:saturate(1.18) contrast(1.05);
  transition:transform 1s cubic-bezier(.2,.8,.2,1);
}
.case-card:hover .case-img{transform:scale(1.05)}
.case-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(242,238,230,.94) 18%,rgba(242,238,230,.5) 70%,rgba(242,238,230,.1) 100%);
}
.case-card.dark{background:#1c1c1a;color:#f2efe7;border-color:#333}
.case-card.dark::after{background:linear-gradient(to top,rgba(28,28,26,.95) 20%,rgba(28,28,26,.66) 70%,rgba(28,28,26,.3) 100%)}
.case-card.dark .case-img{opacity:.4;mix-blend-mode:luminosity}
.case-meta,.case-foot{
  display:flex;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);
}
.case-card.dark .case-meta{color:#8d8d86}
.case-card h3{font-size:clamp(28px,3.6vw,52px);line-height:1.06;letter-spacing:-.018em;max-width:660px;margin:auto 0 20px}
.case-card p{font-size:16px;line-height:1.6;max-width:600px;margin:0 0 30px;color:var(--muted)}
.case-card.dark p{color:#b6b3aa}
.case-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2)}
.case-card.dark .case-foot{color:var(--spirulina-hi);border-color:#3a3a37}

/* ==========================================================================
   07 / ACTIVATION
   ========================================================================== */

.move{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--dark);color:var(--paper);
  min-height:82svh;display:flex;flex-direction:column;justify-content:center;
}
.move .section-bg{
  position:absolute;inset:-12%;z-index:0;
  opacity:.3;mix-blend-mode:multiply;filter:saturate(1.1) contrast(1.05);
}
.move-inner{position:relative;z-index:2}
.move .eyebrow{color:#f2eee6;border-color:rgba(255,255,255,.24)}
.move h2{font-size:clamp(44px,7vw,112px);line-height:1.0;letter-spacing:-.022em;margin:0 0 26px}
.move h2 em{font-style:italic;color:var(--accent);text-shadow:var(--halo)}
.move-inner>p{font-size:clamp(17px,1.5vw,23px);max-width:780px;line-height:1.5;margin:0;color:rgba(255,255,255,.88)}
.move-services{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(46px,7vh,74px)}
.move-services span{
  border:1px solid rgba(255,255,255,.42);padding:10px 14px;border-radius:40px;
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s;
}
.move-services span:hover{
  background:var(--accent);color:var(--dark);border-color:var(--accent);
  box-shadow:var(--halo);
}

/* ==========================================================================
   08 / THE FIRM  ·  09 / CONTACT  ·  FOOTER
   ========================================================================== */

.company{border-top:1px solid var(--line)}
.company-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,70px)}
.company-grid>div{font-size:clamp(15px,1.15vw,18px);line-height:1.65;color:var(--muted);padding-top:8px}
.company-grid p{margin:0 0 1.3em}
.company-grid p:last-child{margin-bottom:0}

.reach{margin-top:clamp(64px,10vh,110px);border-top:1px solid var(--ink);padding-top:22px}
.reach-label{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink);margin:0 0 16px;
}
.reach-lead{
  font-family:var(--serif);
  font-size:clamp(20px,2.1vw,32px);line-height:1.18;letter-spacing:-.012em;
  margin:0 0 28px;max-width:640px;
}
.reach-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  /* borders rather than a 1px gap over a background: an incomplete last row
     then simply ends, instead of leaving grey cells where items would be */
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.reach-list li{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:15px 14px;
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted);transition:background .25s,color .25s;
}
.reach-list li:hover{background:var(--accent);color:#fff}

.brief{background:linear-gradient(180deg,rgba(238,236,228,.72),rgba(226,223,213,.9));position:relative}
.brief h2{max-width:1000px}
.brief-sub{
  font-size:clamp(16px,1.3vw,20px);line-height:1.6;
  max-width:580px;margin:26px 0 0;color:var(--muted);
}
.brief-cta{
  display:inline-flex;align-items:center;gap:16px;
  margin-top:clamp(44px,7vh,68px);padding-bottom:9px;
  border-bottom:2px solid var(--accent);color:var(--accent);
  font-family:var(--mono);font-size:clamp(16px,1.7vw,26px);letter-spacing:-.01em;
}
.brief-cta span{transition:transform .25s}
.brief-cta:hover span{transform:translate(5px,-5px)}
.brief-foot{
  margin-top:clamp(64px,11vh,100px);padding-top:14px;border-top:1px solid var(--ink);
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.11em;
}

footer{
  position:relative;z-index:1;
  height:94px;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;
  border-top:1px solid var(--line);background:var(--paper);
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
}
footer span:nth-child(2){text-align:center}
footer a{text-align:right}
footer a:hover{color:var(--flare)}

/* ==========================================================================
   MEASUREMENT MODE — script clears transforms to read true geometry
   ========================================================================== */

body.is-measuring .glide,
body.is-measuring .rail-track,
body.is-measuring .tunnel-item,
body.is-measuring .constellation span,
body.is-measuring .stage{transform:none !important}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1000px){
  .meter{display:none}
  .statement-grid,.section-heading-row,.method-head,.company-grid,.band-grid{grid-template-columns:1fr;gap:32px}
  .method-steps{grid-template-columns:1fr 1fr}
  .method-steps article:nth-child(2){border-right:0}
  .method-steps article:nth-child(-n+2){border-bottom:1px solid #3d3d3a}
  .signal-item{grid-template-columns:80px 1fr 90px}
  .signal-item small{display:none}
  .work-grid{grid-template-columns:1fr}
  .hero-bottom{grid-template-columns:1fr;gap:30px}
  .constellation{display:none}
  .reach-list{grid-template-columns:repeat(3,1fr)}

  /* Below 1000px the copy takes the full width, so the tunnel has no empty
     right-hand half to fly through. Flatten it into a list here rather than
     letting the cards pass over the paragraph. */
  .index-section{height:auto;padding:clamp(78px,11vh,118px) var(--pad) !important}
  .tunnel-viewport{position:static;height:auto;padding:0;overflow:visible;perspective:none}
  .tunnel-copy{max-width:none}
  .tunnel-grid{display:none}
  .tunnel{position:static;left:auto;margin-top:44px;display:grid;gap:10px}
  .tunnel-item{
    position:static;width:auto;margin:0;opacity:1 !important;transform:none !important;
    grid-template-columns:96px 1fr;box-shadow:none;
  }
  /* the instrument keeps working, it just joins the flow */
  .scale{position:static;margin-top:46px}
}

@media (max-width:720px){
  .site-header{grid-template-columns:1fr auto;height:62px}
  .nav,.brief-link{display:none}
  .menu-btn{display:block}
  .site-header.menu-open{height:auto;align-items:start;padding-top:20px;padding-bottom:20px}
  .site-header.menu-open .nav{display:flex;grid-column:1/-1;flex-direction:column;gap:14px;margin-top:22px}
  .site-header.menu-open .brief-link{display:block;grid-column:1/-1;justify-self:start;margin-top:14px}

  .hero{padding-top:calc(62px + 4vh)}
  .hero-title,.hero-copy{max-width:none}
  .hero-meta{display:grid;grid-template-columns:1fr;gap:6px}
  .window-line{grid-template-columns:1fr 1fr 1fr;font-size:8px}
  .window-zone:nth-child(2),.window-zone:nth-child(4){display:none}

  .era-row{grid-template-columns:1fr;gap:32px}
  .era-img{aspect-ratio:4/3}
  .threshold-labels{grid-template-columns:1fr 1fr}
  .threshold-labels span:nth-child(3),.threshold-labels span:nth-child(4){display:none}

  /* background-attachment:fixed is a repaint tax on mobile */
  .tex-concrete,.tex-graph{background-attachment:scroll}

  /* rail becomes a native swipe strip, no pinning */
  .practice{height:auto;padding:clamp(78px,11vh,118px) 0 !important}
  .rail-viewport{position:static;height:auto;padding:0;overflow:visible}
  .rail-hint{display:none}
  .rail-track{
    width:auto;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:32px var(--pad) 8px;-webkit-overflow-scrolling:touch;
  }
  .practice-card{flex:0 0 78vw;scroll-snap-align:start}

  .method-steps{grid-template-columns:1fr}
  .method-steps article{border-right:0;border-bottom:1px solid #3d3d3a;padding:18px 0 30px !important;min-height:0}
  .method-steps article:last-child{border-bottom:0}
  .formats{flex-direction:column;gap:8px}

  /* tunnel flattens into a stacked list */
  .index-section{height:auto;padding:clamp(78px,11vh,118px) var(--pad) !important}
  .tunnel-viewport{position:static;height:auto;padding:0;overflow:visible;perspective:none}
  .tunnel{position:static;margin-top:44px;display:grid;gap:10px}
  .tunnel-item{
    position:static;width:auto;margin:0;opacity:1 !important;transform:none !important;
    grid-template-columns:74px 1fr;box-shadow:none;
  }

  .signal-item{grid-template-columns:66px 1fr}
  .signal-item em{display:none}
  .scale-bands span{font-size:0;padding:0}
  .scale-bands span::before{opacity:.8;height:4px}
  .reach-list{grid-template-columns:1fr 1fr}
  .case-card{min-height:400px}
  .brief-foot{flex-direction:column;gap:10px}
  footer{grid-template-columns:1fr auto}
  footer span:nth-child(2){display:none}
}

/* ==========================================================================
   REDUCED MOTION — everything lands, nothing flies
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .glide,.stage,.tunnel-item,.constellation span,.rail-track{transform:none !important;opacity:1 !important}
  .plane{opacity:.14 !important;transform:none !important}
  .sweet-spot{transform:scaleX(1) !important}
  .tex-concrete,.tex-graph{background-attachment:scroll}
  .practice{height:auto;padding:clamp(78px,11vh,118px) 0 !important}
  .rail-viewport{position:static;height:auto;padding:0;overflow:visible}
  .rail-track{width:auto;overflow-x:auto;padding:32px var(--pad) 8px}
  .index-section{height:auto;padding:clamp(78px,11vh,118px) var(--pad) !important}
  .tunnel-viewport{position:static;height:auto;padding:0;overflow:visible;perspective:none}
  .tunnel{position:static;margin-top:44px;display:grid;gap:10px;left:auto}
  .tunnel-item{position:static;width:auto;margin:0;grid-template-columns:110px 1fr;box-shadow:none}
  .tunnel-grid{display:none}
  .scale{position:static;margin-top:46px}
}