/* Graymat site shell — shared by all subpages (index.html keeps its own inline copy) */
:root{
  --bg:#0B0B0C;
  --panel:#111113;
  --line:#1F1F22;
  --text:#ECECE6;
  --muted:#8E8E86;
  --accent:#C8F04B;
  --accent-dim:rgba(200,240,75,.14);
  --red:#FF8A7A;
  --amber:#FFC457;
  --serif:'Instrument Serif','Instrument Serif Fallback',serif;
  --sans:'Space Grotesk','Space Grotesk Fallback',sans-serif;
  --maxw:1360px;

  /* Type scale. The small end had drifted to six near-identical values
     (10 / 11 / 11.5 / 12 / 12.5 / 13.5px) — differences nobody can see but
     every future edit has to guess at. Three steps below body, plus the
     22px step that was missing between body (16) and section title (32+). */
  --fs-micro:11px;   /* chips, status pills, eyebrows */
  --fs-sm:13px;      /* nav, buttons, footer, captions */
  --fs-md:16px;      /* body */
  --fs-lg:22px;      /* lead-in / pull text */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#0B0B0C}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2A2A2E;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

.wrap{max-width:var(--maxw);margin:0 auto;width:100%}

.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:200;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}
  30%{transform:translate(4%,6%)}50%{transform:translate(-6%,3%)}
  70%{transform:translate(6%,-4%)}90%{transform:translate(-3%,7%)}
}

nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  backdrop-filter:blur(14px);
  background:linear-gradient(rgba(11,11,12,.82),rgba(11,11,12,.55));
  border-bottom:1px solid rgba(255,255,255,.04);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,4vw,40px);
}
.wordmark{font-family:var(--serif);font-weight:400;letter-spacing:.14em;font-size:19px;text-decoration:none;color:var(--text)}
.wordmark em{color:var(--accent);font-style:normal;animation:pdot 2.8s ease-in-out infinite}
@keyframes pdot{0%,100%{opacity:1}50%{opacity:.45}}
.pm{width:23px;height:23px;display:inline-block;vertical-align:-6px;margin-right:9px;animation:printIn .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes printIn{from{opacity:0;transform:scale(.8) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}
footer .pm{width:16px;height:16px;vertical-align:-3px;margin-right:7px}
/* 12 links now (Team joined, Pay carries a chip). A fixed 32px gap tipped the
   header into a second row before 1300px, so the gap flexes instead: roomy on a
   wide screen, tight enough that nothing wraps on a laptop. */
.nav-links{display:flex;gap:clamp(17px,1.85vw,32px);align-items:center}
.nav-links a{
  color:var(--muted);text-decoration:none;font-size:var(--fs-sm);
  letter-spacing:.12em;text-transform:uppercase;transition:color .25s;
}
.nav-links a:hover{color:var(--accent)}
.nav-links a.on{color:var(--accent)}
/* "Pay" in the nav pointed at a product that does not exist yet. The page itself
   now says so loudly, but the nav is where the expectation is set, so it carries
   the smaller half of the same fact. */
.nav-soon{display:inline-block;margin-left:6px;padding:2px 5px;border:1px solid var(--line);border-radius:4px;font-size:8.5px;font-weight:700;letter-spacing:.12em;color:var(--muted);vertical-align:2px}
/* The nav is already at its limit between 900px (where the links hide) and
   ~1100px; a 38px chip tipped it into a second row. The marker is a courtesy,
   the layout is not — so it steps aside in that band. The page it points at
   states the same fact at every width. */
@media(max-width:1300px){.nav-soon{display:none}}
/* Below 1300px the 12 labels need ~120px back or the header goes to two rows.
   Letter-spacing gives it up without anyone noticing: .12em -> .06em on a 13px
   uppercase label is about 1.5px a character, and the row stays one row. */
@media(max-width:980px){.nav-links a{letter-spacing:.06em}}
@media(max-width:860px){.nav-links a:not(.btn){font-size:12px;letter-spacing:.04em}}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#0B0B0C;
  font-family:var(--sans);font-weight:600;font-size:var(--fs-sm);letter-spacing:.04em;
  padding:13px 26px;border-radius:100px;text-decoration:none;border:none;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 40px rgba(200,240,75,.28)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid #2C2C30}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
/* Between the 900px cut-off and a roomy desktop, the nav runs past the right
   edge — and because body{overflow-x:hidden}, it does not produce a scrollbar,
   it silently CLIPS "Get Graymat" off the screen. The primary CTA disappearing
   on a 1024px laptop is invisible in every test that only checks phone and
   full-width desktop. Tighten the gap across that band rather than dropping a
   destination from the nav. */
@media(max-width:1200px){.nav-links{gap:20px}}
/* Was 900px. With 12 links the row cannot survive below ~1000px even at the
   tightest gap and letter-spacing, and a two-row header is worse than the
   collapse this site already chose. Raised so the broken band does not exist. */
/* Five items, not eleven — they fit far narrower than the old nav did. */
@media(max-width:620px){.nav-links a:not(.btn){display:none}}

section{padding:clamp(90px,12vh,150px) clamp(20px,4vw,40px);position:relative}
.sec-head{margin-bottom:clamp(40px,6vh,72px)}
.sec-num{
  font-family:var(--serif);font-style:italic;color:var(--accent);
  font-size:clamp(15px,1.6vw,19px);display:block;margin-bottom:14px;
}
.sec-title{font-size:clamp(32px,4.6vw,60px);letter-spacing:-.03em;line-height:1.04;font-weight:600;max-width:900px}
.sec-title .accent{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}
.sec-sub{margin-top:20px;max-width:640px;color:var(--muted);font-size:16px;line-height:1.65;font-weight:300}
.sec-sub b{color:var(--text);font-weight:500}

/* ── REVEALS ARE AN ENHANCEMENT, NOT A GATE ──────────────────────────────
   .rv used to be opacity:0 by default, so the entire page was invisible until
   a script ran. One JS error, one blocked script, one crawler that does not
   execute JS — and a 200 response renders a blank screen. Content is now
   visible by default; the hiding only happens when JS has confirmed it is
   there to un-hide it, by stamping .js on <html> before first paint.

   Duration is 200ms and the per-child stagger is gone. The old 80–480ms
   ladder meant a fast scroll arrived at a section that was still assembling
   itself — a visibly empty screen, which is the animation deciding whether
   content exists rather than decorating content that already does. */
.rv{transition:opacity .2s ease, transform .2s ease}
html.js .rv{opacity:0}
html.js .rv.in{opacity:1;transform:none}
.rv.d1,.rv.d2,.rv.d3,.rv.d4,.rv.d5,.rv.d6{transition-delay:0s}

/* A viewer who has asked for less motion gets the content, with no movement. */
/* No reveal at all under this setting: every word and figure is immediately
   visible, with nothing to wait for and nothing to animate. */
@media(prefers-reduced-motion:reduce){
  html.js .rv{opacity:1 !important;transform:none !important;transition:none !important}
}

/* THE HERO NEVER HIDES. Below the fold a reveal is a nice touch; on the hero it
   is the whole visible page. `opacity:0` until a script runs means one JS error —
   or one crawler that does not execute JS — renders a blank screen that still
   answers 200: a page that looks fine to the server and empty to the reader.
   It also delays LCP for nothing, since nobody has to scroll to reach the top.
   Every sub-page puts .rv on its own <h1>; index.html does not, so the homepage
   was never affected and needs no change. */
.page-hero .rv{opacity:1;transform:none;transition:none}

/* page hero */
/* 200px was sized for a page that began with the fixed nav alone. Every page
   now opens under the manifesto band or the compact strip, so that much again
   is dead space before the first word. */
.page-hero{padding:clamp(56px,8vh,96px) clamp(20px,4vw,40px) clamp(60px,9vh,110px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-micro);letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:9px 18px;margin-bottom:34px;
  background:rgba(17,17,19,.6);backdrop-filter:blur(8px);
}
/* The ring used to be an animated box-shadow, which forces a repaint on every
   frame of an infinite loop — the one genuinely expensive thing on the page.
   Same look from a pseudo-element on transform+opacity, which the compositor
   handles without touching paint. */
.eyebrow .dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
.eyebrow .dot::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:rgba(200,240,75,.5);animation:ring 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes ring{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(3.3);opacity:0}}
.page-hero h1{font-size:clamp(42px,7vw,96px);line-height:.99;letter-spacing:-.035em;font-weight:600;max-width:1000px}
.page-hero h1 .dim{color:var(--muted)}
.page-hero h1 .accent{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-.02em}
.page-sub{margin-top:30px;max-width:640px;font-size:clamp(15px,1.6vw,18px);line-height:1.65;color:var(--muted);font-weight:300}
.page-sub b{color:var(--text);font-weight:500}

/* verdict chips (terminal-cut) */
.chipx{display:inline-flex;align-items:center;gap:8px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:var(--fs-micro);font-weight:700;letter-spacing:.22em;padding:8px 14px;border-radius:6px;border:1px dashed}
.chipx .ci{font-size:12px;line-height:1}
.chipx.k{color:var(--red);border-color:rgba(255,107,94,.55);background:rgba(255,107,94,.06)}
.chipx.s{color:var(--accent);border-color:rgba(200,240,75,.55);background:rgba(200,240,75,.06)}
.chipx.r{color:var(--amber);border-color:rgba(255,196,87,.5);background:rgba(255,196,87,.05)}
.chipx.h{color:var(--muted);border-color:#2C2C30;background:rgba(255,255,255,.02)}

/* status chips */
.st{display:inline-block;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;padding:5px 10px;border-radius:5px;border:1px dashed;white-space:nowrap}
.st.live{color:var(--accent);border-color:rgba(200,240,75,.55);background:rgba(200,240,75,.07)}
.st.shadow{color:var(--amber);border-color:rgba(255,196,87,.5);background:rgba(255,196,87,.05)}
.st.built{color:var(--muted);border-color:#2C2C30;background:rgba(255,255,255,.02)}
/* The longest chip ("QUEUE BUILT · SEND HUMAN-GATED") is nowrap, so on a phone
   it pushed the page 4px wide even at the old 10px — and further once the type
   scale was consolidated to 11px. Let long chips wrap below 560px: a two-line
   pill is better than a horizontally-scrolling page. */
@media(max-width:560px){.st{white-space:normal;letter-spacing:.1em}}

footer{border-top:1px solid var(--line);padding:40px clamp(20px,4vw,40px)}
.foot-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  color:var(--muted);font-size:var(--fs-sm);letter-spacing:.08em;
}
footer .wordmark{font-size:16px}
.foot-inner a{color:var(--muted);text-decoration:none;transition:color .25s}
.foot-inner a:hover{color:var(--accent)}

/* ── THE PRODUCT FRAME ───────────────────────────────────────────────────
   One frame for every product shot on the site (.frame on tour/adpilot,
   .shot elsewhere) — previously three competing treatments, all of which
   read as "a screenshot in a box" rather than an object.
   What makes it read premium is physics, not decoration:
     · it sits IN light      — an accent halo bleeding off the top edge
     · it has WEIGHT         — a tight contact shadow plus a far ambient one
     · it is LIT FROM ABOVE  — 1px inner highlight on top, darker below
     · it is an OBJECT       — inset bezel with a true nested radius, so the
                               screen sits inside the device instead of being
                               flush with the page. */
.frame,.shot{
  position:relative;
  padding:10px;
  border-radius:20px;
  background:linear-gradient(180deg,#17171A 0%,#0F0F11 100%);
  border:1px solid rgba(255,255,255,.075);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),      /* lit from above */
    0 2px 5px rgba(0,0,0,.45),                /* contact */
    0 26px 50px -14px rgba(0,0,0,.7),         /* mid */
    0 70px 130px -50px rgba(0,0,0,.9),        /* ambient depth */
    0 0 90px -30px rgba(200,240,75,.16);      /* the room's accent light */
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s;
}
.shot{margin:clamp(32px,5vh,60px) 0 0}
.frame:hover,.shot:hover{
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 2px 5px rgba(0,0,0,.45),
    0 34px 64px -14px rgba(0,0,0,.72),
    0 90px 150px -50px rgba(0,0,0,.92),
    0 0 120px -28px rgba(200,240,75,.24);
}

/* chrome bar — a quiet title strip, not macOS traffic lights */
.frame-bar,.shot .bar{
  display:flex;align-items:center;gap:11px;
  padding:7px 10px 12px;
  background:none;border:0;
}
.frame-dot,.shot .bar i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 10px rgba(200,240,75,.55)}
.shot .bar i:nth-child(2),.shot .bar i:nth-child(3){background:#2A2A2E;box-shadow:none}
.frame-mod{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10.5px;font-weight:700;letter-spacing:.2em;color:var(--text);text-transform:uppercase}
.frame-bar,.shot .bar{min-width:0}
.frame-url,.shot .bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;
  margin-left:auto;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:10.5px;color:#6A6A62;letter-spacing:.06em;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.05);
  border-radius:100px;padding:4px 12px;
}

/* the screen itself — inset, nested radius, its own edge */
.frame img,.shot img{
  display:block;width:100%;height:auto;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px -8px rgba(0,0,0,.6);
}

.shot figcaption{padding:18px 8px 4px;color:var(--muted);font-size:var(--fs-sm);line-height:1.62;font-weight:300}
.shot figcaption b{color:var(--text);font-weight:500}

/* Very tall captures: crop and let the bottom dissolve into the page rather
   than ending on a hard horizontal line — the shot reads as a view into
   something that continues, instead of a thumbnail that ran out. */
.frame.tall,.shot.tall{overflow:hidden}
.frame.tall img,.shot.tall img{max-height:min(58vh,540px);object-fit:cover;object-position:top center}
.frame.tall::after,.shot.tall::after{
  content:'';position:absolute;left:10px;right:10px;bottom:10px;height:120px;
  border-radius:0 0 11px 11px;pointer-events:none;
  background:linear-gradient(transparent,rgba(15,15,17,.92));
}

/* ── The gap ─────────────────────────────────────────────────────────────
   The one place motion should carry the argument instead of decorating it:
   the two CACs start together and pull apart, because that gap IS the
   product. Driven entirely by the .rv/.in observer already on the page. */
.gapfx{margin-top:clamp(26px,4vh,44px);border-top:1px solid var(--line);padding-top:26px}
.gapfx .track{position:relative;height:64px}
.gapfx .lane{position:absolute;left:0;right:0;height:2px;top:31px;background:var(--line)}
.gapfx .pip{position:absolute;top:22px;display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:var(--fs-sm);letter-spacing:.04em;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .15s}
.gapfx .pip i{width:9px;height:9px;border-radius:50%;display:block}
.gapfx .reported{left:0;color:var(--muted)}
.gapfx .reported i{background:#55554F}
.gapfx .delivered{left:0;color:var(--accent)}
.gapfx .delivered i{background:var(--accent)}
.gapfx .band{position:absolute;top:29px;left:0;height:6px;border-radius:3px;
  background:linear-gradient(90deg,rgba(255,138,122,0),rgba(255,138,122,.55));
  width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1) .15s}
.gapfx .legend{margin-top:10px;color:var(--muted);font-size:var(--fs-sm);font-weight:300;opacity:0;transition:opacity .5s .9s}
.gapfx .legend b{color:var(--red);font-weight:500}
/* resting state = the lie: both numbers sitting on top of each other */
.gapfx.rv.in .delivered{transform:translateX(clamp(140px,38vw,520px))}
.gapfx.rv.in .band{width:clamp(140px,38vw,520px)}
.gapfx.rv.in .legend{opacity:1}

/* ── THE ROUTE ───────────────────────────────────────────────────────────
   Karachi → Dubai → Dhaka → Riyadh → Nairobi. The line draws itself and the
   pins land in sequence, so the expansion reads as a journey rather than a
   list of countries. Each stop carries its own status, because "the brand
   sells here" and "Graymat runs the operation here" are different claims and
   the site should never blur them. */
.route{position:relative;margin-top:clamp(30px,4.5vh,52px)}
.route-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.route-track::before{
  content:'';position:absolute;left:7px;right:7px;top:13px;height:2px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 55%,rgba(200,240,75,.18) 100%);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.5s cubic-bezier(.2,.7,.2,1) .15s;
}
.route.in .route-track::before{transform:scaleX(1)}
.stop{position:relative;padding-top:38px}
.stop .pin{
  position:absolute;top:6px;left:0;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--accent);background:var(--bg);
  opacity:0;transform:scale(.4);transition:opacity .45s,transform .45s;
}
.stop.next .pin{border-color:#4A4A44}
.route.in .stop .pin{opacity:1;transform:scale(1)}
.route.in .stop:nth-child(1) .pin{transition-delay:.30s}
.route.in .stop:nth-child(2) .pin{transition-delay:.55s}
.route.in .stop:nth-child(3) .pin{transition-delay:.80s}
.route.in .stop:nth-child(4) .pin{transition-delay:1.05s}
.route.in .stop:nth-child(5) .pin{transition-delay:1.30s}
.stop b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em}
.stop em{display:block;font-style:normal;color:var(--muted);font-size:var(--fs-sm);margin-top:3px;font-weight:300}
.stop .st{margin-top:10px}
@media(max-width:820px){
  .route-track{grid-template-columns:1fr;gap:24px}
  .route-track::before{left:7px;right:auto;top:8px;bottom:8px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--accent) 0%,var(--accent) 55%,rgba(200,240,75,.18) 100%);
    transform:scaleY(0);transform-origin:top;}
  .route.in .route-track::before{transform:scaleY(1)}
  .stop{padding-top:0;padding-left:32px}
  .stop .pin{top:1px}
}

/* ── THE PROOF LOCK ──────────────────────────────────────────────────────
   Sitewide manifesto band under the nav. Not an announcement bar: no dismiss,
   no countdown, no notify-me.

   ⚠ THE NAV IS position:fixed AND 83px TALL, so it occupies no space in the
   flow. This band is the first element on every page, so without an explicit
   clearance it renders UNDERNEATH the nav — which is exactly what shipped:
   the tag, the sentence and the warehouse line were completely hidden and
   "₨1 CRORE" was cropped 26px from the top, leaving only the unit and the CTA
   readable. scrollWidth cannot see that; only geometry or eyes can.

   Every track is min()-guarded too, so a card can never push the page wider
   than the viewport (body{overflow-x:hidden} would CLIP rather than scroll). */
.lock{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0E0E10 0%,var(--bg) 100%);
  padding:calc(83px + clamp(22px,3.4vh,36px)) clamp(16px,4vw,40px) clamp(26px,3.8vh,42px);
  min-height:calc(83px + 168px);
  display:flex;align-items:center;
  overflow-x:hidden;
}
.lock-inner{width:100%;max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(16px,3vw,52px);align-items:center}
.lock-l{min-width:0}
.lock-r{min-width:0}
.lock-tag{display:inline-block;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);border:1px solid rgba(255,138,122,.45);border-radius:5px;padding:6px 10px;margin-bottom:12px}
.lock-num{display:block;font-size:clamp(34px,6.4vw,62px);font-weight:700;letter-spacing:-.035em;line-height:1.04;color:var(--accent);white-space:nowrap;padding-top:.04em}
.lock-unit{display:block;margin-top:7px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.lock-body{font-size:clamp(13.5px,1.35vw,15.5px);line-height:1.62;color:var(--muted);font-weight:300}
.lock-body b{color:var(--text);font-weight:500}
.lock-floor{margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--muted);font-weight:300}
.lock-cta{display:inline-block;margin-top:16px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-decoration:none;border:1px solid rgba(200,240,75,.4);border-radius:100px;padding:11px 19px;transition:background .25s,border-color .25s}
.lock-cta:hover{background:rgba(200,240,75,.1);border-color:var(--accent)}
@media(max-width:900px){
  .lock-inner{grid-template-columns:minmax(0,1fr);gap:16px}
  .lock{padding-top:calc(83px + 20px);min-height:0}
}
}

@media(prefers-reduced-motion:reduce){
  /* the route must still be readable with no motion */
  .route-track::before{transform:none!important}
  .stop .pin{opacity:1!important;transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  /* iteration-count:1 is required: a .001s INFINITE animation restarts ~1000x/s,
     turning the film-grain overlay into a strobe for reduced-motion users */
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  /* the gap must still be VISIBLE without motion — it's the argument, not an effect */
  .gapfx .delivered{transform:translateX(clamp(140px,38vw,520px))}
  .gapfx .band{width:clamp(140px,38vw,520px)}
  .gapfx .legend{opacity:1}
}


  /* ── COMPACT GATE STRIP ────────────────────────────────────────────────
     The full manifesto earns its 250px on the first page a visitor lands on.
     By their tenth page it is an obstacle, so subpages carry this instead:
     the same fact, the same live figures, ~52px. Values are rendered into the
     HTML at build time so the strip is never blank and never animates in. */
  .gstrip{position:relative;z-index:5;margin-top:83px;border-bottom:1px solid var(--line);background:#0E0E10;
    padding:0 clamp(16px,4vw,40px);overflow-x:hidden}
  .gstrip-in{display:flex;align-items:center;gap:clamp(10px,2vw,20px);flex-wrap:wrap;
    min-height:52px;padding:9px 0;max-width:1280px;margin:0 auto;
    font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:11px;
    font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  .gstrip-tag{color:var(--red);border:1px solid rgba(255,138,122,.42);border-radius:100px;padding:4px 10px;white-space:nowrap}
  .gstrip-n{color:var(--accent);white-space:nowrap}
  .gstrip-v{color:var(--muted);white-space:nowrap}
  .gstrip-sep{color:#2C2C30}
  .gstrip-cta{margin-left:auto;color:var(--accent);text-decoration:none;border:1px solid rgba(200,240,75,.4);
    border-radius:100px;padding:6px 13px;white-space:nowrap}
  .gstrip-cta:hover{background:rgba(200,240,75,.1)}
  @media(max-width:720px){
    .gstrip-in{gap:6px 12px;font-size:10px}
    .gstrip-sep{display:none}
    .gstrip-cta{margin-left:0;width:100%;text-align:center;margin-top:4px}
  }


/* ── ACCESSIBILITY ──────────────────────────────────────────────────────────
   A keyboard user could previously tab the whole site without ever seeing
   where they were: the reset removed the default outline and nothing replaced
   it. Focus is now visible on every interactive thing, in the accent colour so
   it reads as part of the design rather than a browser artefact. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* Every page begins with a fixed nav and a gate band in front of the content. */
.skip{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--accent);color:#0B0B0C;
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 16px;border-radius:0 0 10px 10px;text-decoration:none;
  transition:top .15s ease;
}
.skip:focus{top:0}
#main:focus{outline:none}

/* Reduced motion is a request, not a hint: no transitions, no animations, and
   nothing that moves on its own. The ticker and the day replay both honour it
   in their own scripts as well, because a CSS rule cannot stop a JS loop. */
@media(prefers-reduced-motion:reduce){
/* A fade is an animation too. Less disruptive than a translation is not the
   same as exempt, so under this setting NOTHING transitions or animates and
   every word is simply there. animation-iteration-count matters as much as
   duration: a 1ms INFINITE animation restarts a thousand times a second and
   turns the grain overlay into a strobe. */
*,*::before,*::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}
}


/* ── CONTRAST ─────────────────────────────────────────────────────────────
   .btn paints near-black on lime, but .nav-links a is more specific and was
   overriding it with muted grey — 2.51:1 on the most prominent CTA on the
   site. Stated explicitly so specificity cannot take it back. */
.nav-links a.btn{color:#0B0B0C}
.nav-links a.btn:hover{color:#0B0B0C}

/* The clay section's ink was 55% opacity on a warm mid-tone: 2.41:1. Solid
   ink on the same ground clears AA without touching the palette. */
.clay-kicker{color:#2B2320 !important}
.clay .deep-link a{color:#2B2320 !important;border-bottom-color:#2B2320 !important}