/* ============================================================
   97 WORLD — DESIGN SECTOR · CORE (all pages)
   Tokens, background FX, nav, footer, buttons, forms, shared
   components. Page-specific layers: css/home.css, css/pages.css
   Font: Helvetica / Helvetica Neue (fallback Arial)
   ============================================================ */

:root{
  --bg:#050506;
  --ink:#f4f4f6;
  --mut:#8a8a93;
  --dim:#5f5f68;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --ug-y:#ffce00;
  --ug-r:#d90000;
  --ss-b:#0f47af;
  --ss-g:#078930;
  --wa:#25D366;
  --card:rgba(8,8,10,.72);
  /* poster system (Update 3): sharp corners, rule ink, hairlines, paper */
  --r:2px;
  --r-pill:44px;
  --rule:#f4f4f6;
  --hair:rgba(255,255,255,.10);
  --hair2:rgba(255,255,255,.22);
  --bp:rgba(255,255,255,.05);
  --stamp-r:-4deg;
  --font:"Inter Var","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:"Knockout Cruiser","Knockout Fallback","Arial Narrow","Inter Var",Arial,sans-serif;
  --font-knock-jr:"Knockout Jr","Knockout Fallback","Arial Narrow","Inter Var",Arial,sans-serif;
  --font-knock-x:"Knockout Sumo","Knockout Fallback","Inter Var",Arial,sans-serif;
  --font-mono:"JetBrains Mono Var",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-tap-highlight-color:transparent;
  background:radial-gradient(120% 130% at 50% -10%,#0d0d16 0%,#070709 55%,#040405 100%);
  background-attachment:fixed;
}
body{
  background:transparent;color:var(--ink);font-family:var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;line-height:1.55;letter-spacing:-.005em;
}
::selection{background:var(--ug-y);color:#000}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
img{max-width:100%}
input,textarea,select{caret-color:var(--ug-y)}
:root{accent-color:var(--ug-y)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.mt{margin-top:16px}
.full{width:100%;justify-content:center}
section[id],main[id]{scroll-margin-top:80px}

:focus-visible{outline:2px solid var(--ug-y);outline-offset:3px;border-radius:var(--r)}

/* ============ TYPE SYSTEM ============ */
/* Display: Knockout 52 Cruiserweight — condensed heavyweight, set in caps */
h1,h2{font-family:var(--font-display)}
h3,h4{font-family:var(--font)}
.mega,.sec,.page-hero h1,.cta-banner h2,.manifesto h3,.lost h1,
.exp-line .name,.gate-q,.bbody .lg,.bcity b{font-family:var(--font-display);text-transform:uppercase}
/* Brand stamps: Knockout 94 Ultmt Sumo — the wide ultra-heavy */
.foot-wm,.marquee-track span,.intro-word{font-family:var(--font-knock-x)}
/* Mid headings: Knockout 31 Junior Middlewt caps */
.case h3,.cat-head h3,.step h3,.nation h3,.mmenu-links a{
  font-family:var(--font-knock-jr);text-transform:uppercase;letter-spacing:.04em;
}
/* Technical labels: JetBrains Mono — spec-sheet texture */
.kicker,.chip,.crumb,.cat-tag,.badge,.pop,.tags span,.foot-col h5,
.cur-note,.clock,.type,.co,.from,.bk,
.hero2-stats .st span,.field label,.summary h4,.panel h4,.dep .lbl,
.qbar .qinfo small,.mmenu-nations .cap,.flag-cap{font-family:var(--font-mono);font-weight:500}
/* mono is naturally wide — pull tracking back in */
.kicker{letter-spacing:.18em}
.chip{letter-spacing:.1em}
.crumb{letter-spacing:.14em}
/* numbers that align */
.clock,.hero2-stats .st b,.svc .amt,.srow .v,.dep .drow b,.qbar .qinfo b,
.cat-side .price,.qlist li b,.qtot b{font-variant-numeric:tabular-nums}

/* ============ POSTER SYSTEM (Update 3) ============
   Two voices: POSTER (loud — rules, plates, tickets, tapes) and
   BLUEPRINT (quiet — dims, figs, stamps, title blocks, paper).
   Yellow is the single ink accent per composition. */

/* heavy poster rule — thick/thin pair */
.rule-x{height:3px;background:var(--rule);border:0;box-shadow:0 6px 0 -2.5px var(--hair2)}
.rule-x.y{background:var(--ug-y)}

/* ROUND N section plate */
.plate{
  display:flex;align-items:center;gap:14px;padding:9px 2px;margin-bottom:26px;
  border-block:1px solid var(--hair2);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mut);
}
.plate i{color:var(--ug-y);font-style:normal;flex:none}
.plate span:last-child{margin-left:auto;color:var(--dim)}
.plate span{transition:opacity .5s var(--ease),translate .5s var(--ease);transition-delay:calc(var(--i,0)*.08s)}
.plate.reveal:not(.in) span{opacity:0;translate:0 8px}
/* the plate frame paints immediately; only its text staggers in */
.plate.reveal{opacity:1;transform:none}

/* giant ghost round numeral (desktop) */
.plate-num{
  position:absolute;top:34px;right:0;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-weight:900;font-size:clamp(120px,22vw,300px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);
}
@media(max-width:820px){.plate-num{display:none}}

/* rubber stamp */
.stamp{
  display:inline-block;font-family:var(--font-knock-jr);text-transform:uppercase;
  letter-spacing:.1em;font-size:13px;line-height:1.1;color:var(--ug-y);
  border:2px solid currentColor;border-radius:3px;padding:.28em .6em .22em;
  rotate:var(--stamp-r);text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.stamp.lg{font-size:clamp(18px,3vw,26px);border-width:2.5px}
.stamp.wh{color:rgba(255,255,255,.75)}
@supports (mask-composite:exclude){
  .stamp{
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"),linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
}
/* stamp slam (IO-driven via .reveal) — slams in place, never slides */
.stamp.reveal{transition:opacity .25s ease,scale .5s var(--spring),rotate .5s var(--spring);transform:none}
.stamp.reveal:not(.in){opacity:0;scale:1.7;rotate:calc(var(--stamp-r) - 6deg);transform:none}

/* dimension / leader line */
.dim{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);
}
.dim::before,.dim::after{
  content:"";flex:1;height:7px;
  background:
    linear-gradient(var(--hair2),var(--hair2)) 0 50%/1px 7px no-repeat,
    linear-gradient(var(--hair2),var(--hair2)) 100% 50%/1px 7px no-repeat,
    linear-gradient(var(--hair2),var(--hair2)) 0 50%/100% 1px no-repeat;
}
.dim.reveal::before{transform-origin:100% 50%}
.dim.reveal::after{transform-origin:0 50%}
.dim.reveal::before,.dim.reveal::after{transition:transform .8s var(--ease)}
.dim.reveal:not(.in)::before,.dim.reveal:not(.in)::after{transform:scaleX(0)}
.dim.v{writing-mode:vertical-rl;position:absolute}
@media(max-width:820px){.dim{display:none}}

/* figure caption */
.fig{
  display:block;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  border-top:1px solid var(--hair);padding-top:8px;
}

/* ticket-stub CTA (rides on .btn.primary/.btn.wa) */
.ticket{
  border-radius:var(--r);font-family:var(--font-knock-jr);text-transform:uppercase;
  letter-spacing:.06em;font-size:15px;
  -webkit-mask:radial-gradient(circle 5px at 0 8px,transparent 4.5px,#000 5px) -5px 0/100% 16px repeat-y;
  mask:radial-gradient(circle 5px at 0 8px,transparent 4.5px,#000 5px) -5px 0/100% 16px repeat-y;
}

/* star-separated event tape */
.tape{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:6px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mut);
}
.tape>*+*::before{content:"✦";color:var(--ug-y);margin:0 1.1em}

/* blueprint title block */
.tblock{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair2)}
.tblock>div{background:#070709;padding:10px 14px}
.tblock small{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;margin-bottom:3px}
.tblock b{font-size:13px;font-weight:600}
@media(max-width:820px){.tblock{grid-template-columns:1fr 1fr}}

/* grid-paper texture */
.bp{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,var(--bp) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,var(--bp) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 110px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 110px);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 80%);
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 80%);
}

/* registration mark */
.reg{
  width:14px;height:14px;border:1px solid var(--hair2);border-radius:50%;
  position:absolute;display:block;pointer-events:none;
  background:
    linear-gradient(var(--hair2),var(--hair2)) 50% -4px/1px 22px no-repeat,
    linear-gradient(var(--hair2),var(--hair2)) -4px 50%/22px 1px no-repeat;
}

/* poster corner ticks */
.corners{position:relative}
.corners::before,.corners::after,.corners .ct::before,.corners .ct::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
}
.corners::before{top:-1px;left:-1px;border-top:2px solid var(--hair2);border-left:2px solid var(--hair2)}
.corners::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--hair2);border-right:2px solid var(--hair2)}
.corners .ct::before{top:-1px;right:-1px;border-top:2px solid var(--hair2);border-right:2px solid var(--hair2)}
.corners .ct::after{bottom:-1px;left:-1px;border-bottom:2px solid var(--hair2);border-left:2px solid var(--hair2)}

/* ============ BACKGROUND FX ============ */
#fxCanvas{
  position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;
  filter:blur(46px) saturate(1.35);opacity:.92;transform:translateZ(0);will-change:transform;
}
.fx-veil{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(90% 60% at 50% 8%,transparent 0%,rgba(4,4,6,.35) 70%,rgba(4,4,6,.7) 100%),
    linear-gradient(180deg,rgba(4,4,6,.25),transparent 22%,transparent 78%,rgba(4,4,6,.55));
}
/* static ink grain — the analog layer over everything (never animated:
   a moving grain costs a paint per frame; still grain is one composite) */
.grain{
  position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed;top:0;left:0;width:520px;height:520px;z-index:9996;border-radius:50%;
  pointer-events:none;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,206,0,.09),rgba(15,71,175,.06) 40%,transparent 70%);
  mix-blend-mode:screen;opacity:0;transition:opacity .5s ease;will-change:transform;
}
.cursor-dot{
  position:fixed;top:0;left:0;width:8px;height:8px;z-index:9998;border-radius:50%;
  pointer-events:none;transform:translate(-50%,-50%);background:#fff;mix-blend-mode:difference;
  opacity:0;transition:opacity .3s,width .18s,height .18s;will-change:transform;
}
.cursor-dot.hot{width:44px;height:44px;background:var(--ug-y)}
@media(hover:none),(pointer:coarse){.cursor-glow,.cursor-dot{display:none}}

.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9995;pointer-events:none}
.scroll-progress i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--ug-y),var(--ug-r) 35%,var(--ss-b) 70%,var(--ss-g));
  box-shadow:0 0 14px rgba(255,206,0,.5);transition:width .08s linear;
}

/* ============ INTRO (home only) ============ */
#intro{
  position:fixed;inset:0;z-index:9999;background:#020203;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:opacity .9s ease,visibility .9s;
}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}
#intro.instant{transition:none}
.no-intro #intro{display:none}
.intro-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;opacity:0;animation:gridIn 1s ease .1s forwards;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 72%);
  mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 72%);
}
@keyframes gridIn{to{opacity:.5}}
.intro-glow{
  position:absolute;width:64vmin;height:64vmin;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,206,0,.18),rgba(15,71,175,.12) 45%,transparent 70%);
  filter:blur(34px);opacity:0;animation:introGlow 1.5s ease .15s forwards;
}
@keyframes introGlow{to{opacity:1}}
#introCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.intro-logo{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.mark-wrap{position:relative;display:inline-block;line-height:0}
.mark-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.95) 50%,transparent 70%);
  -webkit-mask-image:url("../assets/mark-white.png");-webkit-mask-size:contain;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;
  mask-image:url("../assets/mark-white.png");mask-size:contain;
  mask-repeat:no-repeat;mask-position:center;
  transform:translateX(-60%);
}
.intro-mark{
  width:clamp(150px,26vmin,290px);height:auto;
  opacity:0;transform:scale(1.25) translateY(12px);filter:blur(18px);
  animation:markIn 1.5s var(--ease) .3s forwards;
}
/* particle-engine mode: the crisp mark stays hidden until the particles lock */
#intro.engine .intro-mark{animation:none;transform:none;filter:none;opacity:0;transition:opacity .55s ease}
#intro.engine.locked .intro-mark{opacity:1;filter:drop-shadow(0 0 34px rgba(255,255,255,.28))}
#intro.locked .mark-wrap::after{animation:markSheen .9s ease .1s}
@keyframes markSheen{0%{opacity:1;transform:translateX(-60%)}100%{opacity:0;transform:translateX(60%)}}
#intro.lockup .intro-logo{animation:logoBloom .8s var(--ease)}
@keyframes logoBloom{0%{transform:scale(1)}35%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes markIn{
  0%{opacity:0;filter:blur(18px);transform:scale(1.25) translateY(12px)}
  60%{opacity:1}
  100%{opacity:1;filter:blur(0);transform:none}
}
.intro-word{
  margin-top:20px;font-weight:800;letter-spacing:.4em;text-indent:.4em;
  font-size:clamp(22px,4.5vmin,38px);opacity:0;transform:translateY(14px);
  animation:introUp .8s ease .6s forwards;
}
/* ---- Signal Bridge: two city nodes, one live circuit ---- */
.intro-bridge{
  width:min(320px,78vw);height:74px;margin-top:16px;position:relative;
  opacity:0;transform:translateY(14px);animation:introUp .8s ease .85s forwards;
}
.intro-bridge svg{display:block;width:100%;height:46px;overflow:visible}
.barc{
  stroke:url(#bgrad);stroke-width:1.3;opacity:.55;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:bdraw .75s var(--ease) 1s forwards;
}
@keyframes bdraw{to{stroke-dashoffset:0}}
/* the signal: a bright comet travelling Kampala → Juba and back */
.bpulse{
  stroke:#fff;stroke-width:1.7;stroke-linecap:round;
  stroke-dasharray:.07 .93;stroke-dashoffset:1.07;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.8));
  animation:bpulse 2.1s cubic-bezier(.45,.05,.55,.95) 1.8s infinite alternate;
}
@keyframes bpulse{from{stroke-dashoffset:1.07}to{stroke-dashoffset:-1.07}}
.bflash{stroke:#fff;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.bdot{
  transform-box:fill-box;transform-origin:center;
  opacity:.4;transition:transform .35s var(--ease),opacity .3s;
}
.bdot.ug{fill:var(--ug-y)}
.bdot.ss{fill:var(--ss-b)}
.bcities{display:flex;justify-content:space-between;margin-top:6px}
.bcity{display:flex;flex-direction:column;gap:3px}
.bcity+.bcity{align-items:flex-end;text-align:right}
.bcity b{font-size:12.5px;font-weight:800;letter-spacing:.18em;color:var(--mut);transition:color .4s}
.bcity small{
  display:flex;gap:5px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums;
}
.bcity .lat::before{content:"· "}
/* ignition at logo-lock (engine emits .locked; the CSS-fallback intro
   ignites on a timer tuned to the markIn animation) */
#intro.locked .bdot{transform:scale(1.45);animation:bBreathe 2.4s ease-in-out .35s infinite alternate}
#intro.locked .bdot.ug{filter:drop-shadow(0 0 5px rgba(255,206,0,.9))}
#intro.locked .bdot.ss{filter:drop-shadow(0 0 5px rgba(90,150,235,.9))}
#intro.locked .barc{opacity:.85}
#intro.locked .bcity b{color:#fff}
@keyframes bBreathe{from{opacity:1}to{opacity:.55}}
#intro:not(.engine) .bdot{animation:bIgnite .4s ease 1.8s forwards}
#intro:not(.engine) .bcity b{animation:bName .4s ease 1.8s forwards}
@keyframes bIgnite{to{opacity:1;transform:scale(1.45)}}
@keyframes bName{to{color:#fff}}
/* bloom: one white flash rides the whole line with the logo bloom */
#intro.lockup .bflash{animation:bflashRun .55s var(--ease) forwards}
@keyframes bflashRun{
  0%{stroke-dashoffset:1;opacity:.95}
  70%{stroke-dashoffset:0;opacity:.6}
  100%{stroke-dashoffset:0;opacity:0}
}
#intro.done .intro-bridge *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .intro-bridge{animation:none;opacity:1;transform:none}
  .barc{animation:none;stroke-dashoffset:0}
  .bpulse{animation:none;visibility:hidden}
  .bdot{opacity:1}
}
@keyframes introUp{to{opacity:1;transform:none}}
.skip{
  position:absolute;bottom:22px;right:22px;font-size:11px;letter-spacing:.2em;
  color:var(--mut);text-transform:uppercase;border:1px solid var(--line);
  min-height:44px;padding:12px 18px;border-radius:40px;cursor:pointer;
  background:rgba(255,255,255,.02);transition:.25s;
}
.skip:hover{color:#fff;border-color:rgba(255,255,255,.4)}

/* ============ NAV ============ */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;gap:20px;
  padding:14px 22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(5,5,6,.55);border-bottom:1px solid transparent;transition:.3s;
  opacity:0;transform:translateY(-16px);
}
header.nav.reveal-nav{opacity:1;transform:none}
header.nav.scrolled{border-bottom:1px solid var(--line);background:rgba(5,5,6,.82)}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand .mono{
  width:42px;height:42px;display:grid;place-items:center;flex:none;
  transition:transform .3s var(--ease);
}
.brand .mono img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
.brand:hover .mono{transform:translateY(-1px) rotate(-3deg)}
.brand small{font-size:9px;letter-spacing:.32em;color:var(--mut);font-weight:600}
nav.links{display:flex;gap:4px;font-size:13.5px;color:var(--mut);margin:0 auto}
nav.links a{
  position:relative;padding:8px 13px;border-radius:30px;transition:.2s;
}
nav.links a:hover{color:#fff;background:rgba(255,255,255,.05)}
nav.links a.on{color:#fff}
nav.links a.on::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--ug-y),var(--ss-b));
}
.nav-cta{border-radius:var(--r);
  font-size:13px;font-weight:700;padding:10px 18px;border-radius:40px;
  background:#fff;color:#000;transition:.25s;flex:none;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(255,255,255,.14)}


/* burger */
.burger{
  display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);cursor:pointer;padding:0;flex:none;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:border-color .25s,background .25s;
}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;
  transition:transform .3s var(--ease),opacity .2s}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile menu */
.mmenu{position:fixed;inset:0;z-index:75;display:none}

/* ============ TYPE / SECTION SHELL ============ */
section.blk{position:relative;padding:110px 0}
section.blk.tight{padding-top:26px}
.kicker{
  font-size:12.5px;text-transform:uppercase;color:var(--ug-y);
  font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:12px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--ug-y);display:inline-block}
h2.sec{font-size:clamp(32px,6vw,62px);font-weight:900;letter-spacing:.005em;line-height:.95;text-wrap:balance}
h2.sec .mut{color:var(--mut)}
.sub{color:#b9b9c0;max-width:620px;margin-top:18px;font-size:16.5px}
.sub b{color:#fff}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sec-head .more{
  flex:none;font-size:13px;font-weight:700;color:var(--mut);border:1px solid var(--line);
  padding:10px 18px;border-radius:40px;transition:.25s;
}
.sec-head .more:hover{color:#fff;border-color:var(--line2);background:rgba(255,255,255,.04)}

/* reveal-on-scroll — stronger entrance (rise + blur + settle) */
.reveal{opacity:0;transform:translateY(54px);filter:blur(8px);
  transition:opacity .95s var(--ease),transform .95s var(--ease),filter .95s ease}
.reveal.in{opacity:1;transform:none;filter:blur(0)}

/* ============ BUTTONS / CHIPS ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;
  padding:15px 26px;border-radius:var(--r);cursor:pointer;transition:.25s;border:none;
  text-align:center;position:relative;overflow:hidden;isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .6s ease;
}
.btn:hover::before{transform:translateX(130%)}
.btn.primary{background:linear-gradient(120deg,#fff,#ececff);color:#000;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.4)}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid var(--hair2)}
.btn.ghost:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.04)}
.btn.wa{background:var(--wa);color:#062b13}
.btn.wa:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(37,211,102,.3)}

/* badges are mini-stamps now: inked border, transparent bed */
.badge{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;padding:3px 8px;
  border-radius:3px;font-weight:800;border:1.5px solid currentColor;background:transparent;
}
.badge.soon{color:var(--ug-y)}
.badge.live{color:var(--wa)}
.chip{
  display:inline-flex;align-items:center;gap:9px;font-size:11px;
  text-transform:uppercase;color:var(--mut);border:1px solid var(--line);
  padding:8px 14px;border-radius:3px;background:rgba(255,255,255,.02);font-weight:600;
}
.chip .clock{color:#fff;font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.chip .fdot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.chip .fdot.ug{background:linear-gradient(90deg,var(--ug-y),var(--ug-r))}
.chip .fdot.ss{background:linear-gradient(90deg,var(--ss-b),var(--ss-g))}
.flagline{display:flex;gap:5px}
.flagline i{width:26px;height:5px;border-radius:3px;display:block}

/* ============ MARQUEE ============ */
/* ring tape: a solid band framed by thick/thin rule pairs */
.marquee{
  position:relative;overflow:hidden;padding:24px 0;background:#040405;
  border-block:3px solid var(--rule);
  box-shadow:0 6px 0 -2.5px var(--hair2),0 -6px 0 -2.5px var(--hair2);
}
.marquee-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:marquee 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  font-size:clamp(22px,4vw,40px);font-weight:900;letter-spacing:.02em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.4);
  padding:0 26px;display:inline-flex;align-items:center;gap:26px;
}
.marquee-track span::after{content:"✦";-webkit-text-stroke:0;color:var(--ug-y);font-size:.5em}
.marquee-track .fill{color:#fff;-webkit-text-stroke:0}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============ WORK CARDS (shared) ============ */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:52px;perspective:1400px}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}
.work{
  position:relative;border:1px solid var(--hair2);border-radius:var(--r);overflow:hidden;
  background:var(--card);min-height:340px;display:flex;flex-direction:column;
  transform-style:preserve-3d;will-change:transform;
  transition:transform .2s ease,border-color .4s ease,box-shadow .4s ease;
}
.work::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.10),transparent 60%);
  opacity:0;transition:opacity .3s;
}
.work:hover{border-color:rgba(255,255,255,.28);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.work:hover::after{opacity:1}
.work .thumb{position:relative;flex:1;min-height:220px;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* contact-sheet frame with a mono corner tag */
.browser{
  position:absolute;inset:20px 20px auto 20px;height:calc(100% - 40px);
  border-radius:4px;border:1px solid var(--line);overflow:hidden;background:#0a0a0d;
  display:flex;flex-direction:column;
}
.bbar{height:26px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#131318;border-bottom:1px solid var(--line);flex:none}
.bbar i{width:6px;height:6px;background:#333;display:block}
.bbar .sheet{
  margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  color:var(--dim);text-transform:uppercase;
}
.bbody{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:14px}
.bbody .lg{font-size:clamp(28px,6vw,46px);font-weight:900;letter-spacing:.01em;-webkit-background-clip:text;background-clip:text;color:transparent}
.bbody .cap{color:var(--mut);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
/* card-thumb gradient treatments — scoped to card contexts only: the
   bare class names collide with site chrome (.brand IS the logo link,
   which must never carry a background) */
.thumb.watp,.shot.watp{background:radial-gradient(120% 120% at 20% 10%,#1b2b5a,transparent 60%),radial-gradient(120% 120% at 90% 90%,#3a1140,transparent 55%),#0a0a0d}
.thumb.may,.shot.may{background:radial-gradient(120% 120% at 15% 15%,#123a1c,transparent 60%),radial-gradient(120% 120% at 90% 85%,#5a4410,transparent 55%),#0a0a0d}
.thumb.brand,.shot.brand{background:radial-gradient(120% 120% at 18% 12%,#3a1140,transparent 60%),radial-gradient(120% 120% at 90% 88%,#5a1a4a,transparent 55%),#0a0a0d}
.thumb.campaign,.shot.campaign{background:radial-gradient(120% 120% at 18% 12%,#5a3410,transparent 60%),radial-gradient(120% 120% at 90% 88%,#5a1414,transparent 55%),#0a0a0d}
.work .meta{padding:20px 22px;border-top:1px solid var(--line)}
.work .meta h4{font-size:20px;font-weight:800;display:flex;align-items:center;gap:10px;justify-content:space-between}
.work .meta p{color:var(--mut);font-size:14px;margin-top:6px}
.tags{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.tags span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);padding:5px 11px;border-radius:3px}
.work .meta .fig{margin-top:12px}

/* ============ QUOTE CALCULATOR (home + pricing) ============ */
/* double-frame poster border + drawing paper — the TALE OF THE TAPE shell */
.price-shell{
  position:relative;margin-top:30px;border:1px solid var(--hair2);border-radius:var(--r);
  outline:1px solid var(--hair);outline-offset:5px;
  background:rgba(6,6,8,.8);
}
.price-shell>.bp{opacity:.5}
.price-shell .reg{z-index:1}
.price-shell .reg.tl{top:8px;left:8px}
.price-shell .reg.tr{top:8px;right:8px}
.price-shell .reg.bl{bottom:8px;left:8px}
.price-shell .reg.br{bottom:8px;right:8px}
.price-gate,.price-live{position:relative;z-index:2}

/* interactive gate: ask the country first, then reveal prices */
.price-gate{padding:40px 30px 44px;text-align:center}
.price-gate.done{display:none}
/* .gate-step is a .stamp now (typography comes from the poster system) */
.gate-q{font-size:clamp(26px,3.8vw,40px);font-weight:900;letter-spacing:.02em;margin:14px 0 8px}
.gate-sub{color:var(--mut);font-size:15px;max-width:460px;margin:0 auto 28px}
.gate-choices{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:640px;margin:0 auto}
.gate-choice{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
  padding:20px 22px;border:1px solid var(--hair2);border-radius:var(--r);background:rgba(255,255,255,.02);
  cursor:pointer;transition:.25s;color:#fff;position:relative;overflow:hidden;
}
.gate-choice::after{content:"→";position:absolute;top:18px;right:20px;color:var(--mut);transition:.25s}
.gate-choice:hover{border-color:var(--line2);background:rgba(255,255,255,.05);transform:translateY(-3px)}
.gate-choice:hover::after{color:var(--ug-y);transform:translateX(3px)}
.gate-choice:active{transform:translateY(-1px) scale(.99)}
.gate-choice .fg{display:inline-flex;gap:3px;margin-bottom:8px}
.gate-choice .fg i{width:9px;height:16px;display:block}
.gate-choice b{font-size:17px;font-weight:800}
.gate-choice .cur{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--mut)}
/* the money story, anchored before prices appear */
.gate-fig{max-width:460px;margin:26px auto 0;text-align:center}
.gate-step{margin-bottom:2px}

.price-live[hidden]{display:none}
.price-live{animation:liveIn .55s var(--ease)}
@keyframes liveIn{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.change-ctry{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--mut);
  background:transparent;border:1px solid var(--line);border-radius:3px;padding:9px 14px;cursor:pointer;transition:.2s;
}
.change-ctry:hover{color:#fff;border-color:var(--line2);background:rgba(255,255,255,.04)}
@media(max-width:640px){.gate-choices{grid-template-columns:1fr}.price-gate{padding:32px 18px 36px}}
.price-top{
  padding:26px 26px 20px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--line);
}
.cur-note{font-size:12.5px;color:var(--mut)}
.price-body{display:grid;grid-template-columns:1.5fr 1fr}
.svc-list{padding:8px 26px}
.svc{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:.2s;position:relative;border-radius:10px}
.svc::before{
  content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,206,0,.08),transparent 60%);opacity:0;transition:opacity .25s;
}
.svc:hover::before{opacity:1}
.svc:hover{transform:translateX(3px)}
.svc:last-child{border-bottom:none}
.check{
  width:22px;height:22px;border-radius:2px;border:2px solid #3a3a42;flex:none;
  display:grid;place-items:center;transition:.2s;color:transparent;font-size:14px;font-weight:900;
}
.svc.sel .check{background:var(--ug-y);border-color:var(--ug-y);color:#000;box-shadow:0 0 0 4px rgba(255,206,0,.18)}
.svc .info{flex:1}
.svc .info b{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.svc .info span{font-size:13px;color:var(--mut)}
.svc .amt{font-weight:800;font-size:15px;white-space:nowrap;text-align:right}
.svc .amt small{display:block;font-size:11px;color:var(--mut);font-weight:600}
/* TALE OF THE TAPE — spec-table summary */
.summary{padding:24px 26px;background:rgba(255,255,255,.02);border-left:1px solid var(--line)}
.summary h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.summary h4+.rule-x{margin-bottom:16px}
.srow{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 0;margin:0;font-size:14.5px;border-bottom:1px solid var(--hair);
}
.srow .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.srow.total{border-top:3px solid var(--rule);border-bottom:none;padding-top:16px;margin-top:6px;font-size:16px}
.srow.total .v{font-family:var(--font-display);font-size:34px;font-weight:900;letter-spacing:.01em;line-height:1}
/* the 50%-TO-START plate: stamp overlaps the frame */
.dep{
  position:relative;background:rgba(255,206,0,.06);border:2px solid rgba(255,206,0,.5);
  border-radius:var(--r);padding:20px 16px 14px;margin-top:26px;
}
.dep .drow{display:flex;justify-content:space-between;font-size:14px;margin:5px 0}
.dep .drow b{font-weight:800}
.dep .lbl{
  position:absolute;top:-12px;left:14px;display:inline-block;
  background:#0a0a0c;color:var(--ug-y);border:2px solid currentColor;border-radius:3px;
  font-family:var(--font-knock-jr);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:.24em .55em .18em;rotate:var(--stamp-r);
}
.dep small{display:block;color:var(--mut);font-size:11.5px;margin-top:8px;line-height:1.5}
@media(max-width:820px){
  .price-body{grid-template-columns:1fr}
  .summary{border-left:none;border-top:1px solid var(--line);padding:20px 18px}
  .price-top{flex-direction:column;align-items:stretch;gap:12px;padding:18px 18px 16px}
  .cur-note{text-align:center}
  .svc-list{padding:6px 18px}
}

/* ============ TRUST STRIP — THE UNDERCARD (home) ============ */
.trust-strip{
  position:relative;border-top:3px solid var(--rule);border-bottom:1px solid var(--hair2);
  box-shadow:inset 0 6px 0 -2.5px var(--hair2);
}
.trust-strip .row{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.trust-strip .t{
  position:relative;display:flex;align-items:center;gap:12px;padding:20px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);transition:.25s;
}
.trust-strip .t+.t::before{
  content:"✦";position:absolute;left:-7px;top:50%;translate:0 -50%;
  color:var(--ug-y);font-size:11px;
}
.undercard-tag{
  position:absolute;top:-8px;left:24px;z-index:1;padding:0 10px;background:var(--bg);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
}
.trust-strip .t b{color:#fff;font-weight:600}
.trust-strip .t .ic{
  width:8px;height:8px;border-radius:50%;flex:none;
}
.trust-strip a.t:hover{background:rgba(255,255,255,.03);color:#cfcfd5}
@media(max-width:820px){
  .trust-strip .row{grid-template-columns:1fr 1fr}
  .trust-strip .t{border-bottom:1px solid var(--hair);padding:14px 16px}
  .trust-strip .t:nth-child(n+3){border-bottom:none}
  .trust-strip .t:nth-child(2n+1)::before{content:none}
}

/* ============ FORMS ============ */
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:600}
.field input,.field textarea,.field select{
  background:#08080b;border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  color:#fff;font-size:15px;font-family:inherit;transition:.2s;width:100%;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--ug-y);box-shadow:0 0 0 3px rgba(255,206,0,.12);
}

/* ============ FAQ ============ */
.faq{margin-top:44px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:22px 4px;font-size:17px;font-weight:700;transition:.2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ug-y)}
.faq summary::after{
  content:"+";font-size:24px;font-weight:400;color:var(--mut);flex:none;
  transition:transform .3s var(--ease);line-height:1;
}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--ug-y)}
.faq .a{color:#b9b9c0;font-size:15px;max-width:680px;padding:0 4px 24px}

/* ============ PROCESS RAIL — FIGHT WEEK program table (shared) ============ */
.rail{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;counter-reset:step;
  border-block:1px solid var(--hair2);
}
.step{
  position:relative;border-right:1px solid var(--hair);padding:26px 22px 30px;
  background:transparent;transition:background .3s;
}
.step:last-child{border-right:none}
.step:hover{background:rgba(255,255,255,.025)}
/* the real schedule word from data.js (Day 0 / Day 0–1 / …) as the program headline */
.step .day{
  display:block;font-family:var(--font-knock-jr);font-size:22px;font-weight:800;
  letter-spacing:.06em;color:var(--ug-y);margin-bottom:26px;text-transform:uppercase;
}
.step h3{font-size:18px;font-weight:800;margin-bottom:8px}
.step p{color:var(--mut);font-size:14px}
@media(max-width:1020px){
  .rail{grid-template-columns:repeat(2,1fr)}
  .step{border-bottom:1px solid var(--hair)}
  .step:nth-child(n+3){border-bottom:none}
  .step:nth-child(2n){border-right:none}
}
@media(max-width:640px){
  .rail{grid-template-columns:1fr}
  .step{border-right:none;border-bottom:1px solid var(--hair)}
  .step:last-child{border-bottom:none}
}

/* ============ PRINCIPLES (shared) ============ */
.principles{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px;text-align:left;
  counter-reset:art;
}
.principles .p{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:rgba(0,0,0,.25)}
.principles .p::before{
  counter-increment:art;content:"ART. 0" counter(art);
  display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;
  color:var(--dim);margin-bottom:10px;
}
.principles .p b{display:block;font-size:14.5px;margin-bottom:6px;color:var(--ug-y)}
.principles .p span{font-size:13px;color:var(--mut)}
@media(max-width:1020px){.principles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.principles{grid-template-columns:1fr}}

/* ============ CTA BANNER — MAIN EVENT (shared) ============ */
.cta-banner{
  position:relative;padding:110px 0;text-align:center;overflow:hidden;
  border-block:3px solid var(--rule);
  box-shadow:0 6px 0 -2.5px var(--hair2),0 -6px 0 -2.5px var(--hair2);
}
.cta-banner .wm{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(70vmin,520px);opacity:.05;pointer-events:none;
}
.cta-banner .tape{position:relative;margin-bottom:26px}
.cta-banner h2{
  position:relative;font-size:clamp(46px,9.5vw,112px);font-weight:900;letter-spacing:.01em;line-height:.9;
}
.cta-banner h2 em{font-style:normal;color:var(--ug-y)}
.cta-banner p{position:relative;color:var(--mut);margin:22px auto 34px;max-width:460px}
.cta-banner .row{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-banner .btn.ticket{padding:20px 34px;font-size:17px}

/* ============ FOOTER ============ */
footer{position:relative;border-top:1px solid var(--line);padding:64px 0 40px;margin-top:30px;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;position:relative}
.foot-brand p{color:var(--mut);font-size:14px;margin-top:14px;max-width:300px}
.foot-col h5{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
  margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--rule);
}
.foot-col a{display:block;color:#c5c5cc;font-size:14.5px;margin:9px 0;transition:.2s}
.foot-col a:hover{color:#fff;transform:translateX(3px)}
/* footer title block — the drawing-sheet signature */
.foot-bottom{margin-top:52px;position:relative}
.foot-bottom .tblock b{color:#c5c5cc}
.foot-bottom .stamp{font-size:11px;margin-top:4px}
.foot-wm{
  display:block;margin-top:56px;font-size:clamp(50px,11.5vw,160px);font-weight:900;letter-spacing:.02em;
  line-height:.8;text-align:center;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.09);
  user-select:none;pointer-events:none;white-space:nowrap;
}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ============ FLOATING WA + QUOTE BAR ============ */
.float-wa{
  position:fixed;bottom:22px;right:22px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(145deg,#25D366,#128C4B);display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(37,211,102,.4);transition:.3s;animation:pulse 2.4s infinite;
}
.float-wa:hover{transform:scale(1.08)}
.float-wa svg{width:30px;height:30px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* mobile quote bar as a ticket stub (left-edge perforation) */
.qbar{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:72;display:none;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 12px 11px 20px;border-radius:var(--r);
  background:rgba(12,12,15,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hair2);box-shadow:0 18px 50px rgba(0,0,0,.6);
  -webkit-mask:radial-gradient(circle 5px at 0 8px,transparent 4.5px,#000 5px) -5px 0/100% 16px repeat-y;
  mask:radial-gradient(circle 5px at 0 8px,transparent 4.5px,#000 5px) -5px 0/100% 16px repeat-y;
  transform:translateY(150%);transition:transform .45s var(--ease);
}
.qbar .qinfo small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.qbar .qinfo b{font-family:var(--font-display);font-size:19px;font-weight:900;letter-spacing:.01em}
.qbar .btn{padding:12px 20px;font-size:14px;flex:none}

/* ============ MOBILE ============ */
@media(max-width:820px){
  header.nav{padding:12px 14px;gap:10px}
  nav.links{display:none}
  .nav-cta{display:none}
  .burger{display:flex;margin-left:auto}

  .mmenu{
    display:flex;flex-direction:column;justify-content:space-between;
    padding:104px 24px calc(30px + env(safe-area-inset-bottom));
    background:rgba(4,4,6,.74);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
  }
  .mmenu.open{opacity:1;visibility:visible}
  .mmenu-links{display:flex;flex-direction:column}
  .mmenu-links a{
    display:flex;align-items:baseline;gap:16px;padding:15px 2px;
    font-size:clamp(32px,9vw,44px);font-weight:900;
    border-bottom:1px solid var(--line);
    opacity:0;transform:translateY(26px);
    transition:opacity .5s var(--ease),transform .5s var(--ease);
  }
  .mmenu.open .mmenu-links a{opacity:1;transform:none;transition-delay:calc(.1s + var(--i)*.06s)}
  .mmenu-links a small{font-size:12px;color:var(--ug-y);font-weight:700;letter-spacing:.22em}
  .mmenu-links a.on{color:var(--ug-y)}
  .mmenu-foot{
    display:flex;flex-direction:column;gap:12px;
    opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;
  }
  .mmenu.open .mmenu-foot{opacity:1;transform:none;transition-delay:.38s}
  .mmenu-nations{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:6px}
  .mmenu-nations .cap{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--mut)}
  body.menu-open{overflow:hidden}

  .wrap{padding:0 18px}
  section.blk{padding:76px 0}
  .qbar{display:flex}
  .qbar.on{transform:none}
  .float-wa{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:52px;height:52px}
  body.qbar-on .float-wa{bottom:calc(92px + env(safe-area-inset-bottom))}
  .grain{opacity:.03}
  .skip{bottom:calc(20px + env(safe-area-inset-bottom));right:18px}
  .field input,.field textarea,.field select{font-size:16px}
  .foot-wm{white-space:normal}
}
@media(max-width:355px){
  .brand-txt{display:none}
  .nav-cta{font-size:11px;padding:8px 11px}
}

/* touch feedback */
@media(hover:none){
  .ticket:active{scale:.97}
  .svc:active{background:rgba(255,255,255,.05)}
  .gate-choice:active{border-color:var(--ug-y)}
  .btn,.nav-cta,.burger,.float-wa,.work,.svc{transition-duration:.18s}
  .btn:active,.nav-cta:active,.burger:active{transform:scale(.96)}
  .work:active{transform:scale(.985)}
  .svc:active{transform:scale(.99);background:rgba(255,255,255,.03);border-radius:12px}
  .float-wa:active{transform:scale(.92)}
  .exp-line:active{padding-left:10px}
  .exp-line:active .arrow{opacity:1;color:var(--ug-y)}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
  .reveal{opacity:1;transform:none;filter:none}
  #fxCanvas{filter:blur(46px) saturate(1.2)}
  .cursor-glow,.cursor-dot{display:none} /* grain is static now — safe to keep */
  .marquee-track{animation:none}
  .mmenu,.mmenu-links a,.mmenu-foot,.qbar{transition-duration:.001ms !important}
}

/* ============================================================
   ⬆ PHASE 2 — modern layer (2026 CSS, all progressive)
   ============================================================ */

/* spring easing token + balanced text everywhere */
:root{--spring:linear(0, 0.3 12%, 1.05 38%, 0.96 60%, 1)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* registered properties: smooth glare + rotating glow */
@property --mx{syntax:"<percentage>";initial-value:50%;inherits:false}
@property --my{syntax:"<percentage>";initial-value:50%;inherits:false}
.work{transition:--mx .18s ease,--my .18s ease,transform .2s ease,border-color .4s ease,box-shadow .4s ease}

/* nav tint via color-mix on supporting browsers */
@supports (background: color-mix(in oklab, red, blue)){
  header.nav.scrolled{background:color-mix(in oklab, var(--bg) 82%, transparent)}
}

/* calculator rows are real buttons now */
button.svc{width:100%;background:none;font-size:inherit;font-family:inherit;color:inherit;border:0;border-bottom:1px solid var(--line)}
button.svc:last-child{border-bottom:0}
.svc .info{display:block}
.svc .info span{display:block}

/* one-tap bundles */
.bundles{display:flex;gap:10px;flex-wrap:wrap;padding:18px 26px 0}
.bundle-chip{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;
  border:1px solid var(--line);border-radius:3px;padding:10px 16px;background:rgba(255,255,255,.02);
  transition:.22s var(--spring);text-align:left;
}
.bundle-chip b{font-size:13.5px;font-weight:800}
.bundle-chip small{font-family:var(--font-mono);font-size:10.5px;color:var(--mut);letter-spacing:.04em}
.bundle-chip:hover{border-color:var(--line2);transform:translateY(-2px)}
.bundle-chip.on{border-width:2px;border-color:var(--ug-y);background:rgba(255,206,0,.08)}
.bundle-chip.on b{color:var(--ug-y)}
@media(max-width:820px){.bundles{padding:16px 18px 0}}

/* reactive summary: glows once anything is selected */
@supports selector(:has(*)){
  .price-shell:has(.svc[aria-pressed="true"]) .summary{
    background:rgba(255,206,0,.03);
    box-shadow:inset 3px 0 0 rgba(255,206,0,.4);
  }
}
.rate-note{font-family:var(--font-mono);font-size:10.5px;color:var(--dim);margin-top:12px;line-height:1.5}

/* process rail: who tag + scroll-drawn spine */
.step-meta{display:flex;gap:8px;margin-top:18px}
.step-meta span{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:3px;border:1px solid var(--line);color:var(--mut);
}
.step-meta .who{color:var(--ug-y);border-color:rgba(255,206,0,.35)}
.rail{position:relative}
.rail::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:2px;z-index:1;
  background:var(--ug-y);
  transform-origin:0 50%;transform:scaleX(0);
}
@supports (animation-timeline: view()){
  .rail::before{animation:railDraw linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
  @keyframes railDraw{to{transform:scaleX(1)}}
}
@supports not (animation-timeline: view()){
  .rail::before{transition:transform 1.2s var(--ease)}
  .rail.in::before,.rail:has(.step.in)::before{transform:scaleX(1)}
}

/* manifesto is the drawing sheet now — frame/paper live in home.css */

/* scroll-driven versions of the JS effects (JS skips these when supported) */
@supports (animation-timeline: scroll()){
  .scroll-progress i{
    width:100%;transform-origin:0 50%;transform:scaleX(0);transition:none;
    animation:spGrow linear both;animation-timeline:scroll(root);
  }
  @keyframes spGrow{to{transform:scaleX(1)}}
  .foot-wm{animation:wmSlide linear both;animation-timeline:view();animation-range:entry 0% cover 70%}
  @keyframes wmSlide{from{transform:translateX(5%)}to{transform:translateX(-5%)}}
}

/* capacity line */
.cap-line{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ug-y);display:inline-flex;align-items:center;gap:9px;margin-top:18px;
}
.cap-line::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ug-y);box-shadow:0 0 10px var(--ug-y)}
.cap-line[hidden]{display:none}

/* ============ UPDATE 3 — MOTION + 2026 LAYER ============ */
/* cross-document view transitions: the chrome holds, the sheet swaps */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vtOut .16s ease both}
  ::view-transition-new(root){animation:vtIn .24s ease both}
  header.nav{view-transition-name:sitenav}
  .float-wa{view-transition-name:floatwa}
}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}

/* FAQ as numbered questions + native open animation */
.faq{counter-reset:q}
.faq summary::before{
  counter-increment:q;content:"Q.0" counter(q);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  color:var(--ug-y);flex:none;translate:0 2px;
}
:root{interpolate-size:allow-keywords}
@supports selector(::details-content){
  .faq details::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .35s var(--ease),content-visibility .35s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto}
}

/* the contract completes: form states via :has() (start page) */
.field:has(:user-invalid) label{color:#ff7a6e}
.field:has(:user-invalid) input,.field:has(:user-invalid) textarea,.field:has(:user-invalid) select{border-color:rgba(255,90,70,.55)}
.field:has(:focus-visible) label{color:var(--ug-y)}

/* menu scroll containment */
.mmenu{overscroll-behavior:contain}

/* tape/summary count pop on change */
.tick{animation:countPop .22s var(--ease)}
@keyframes countPop{50%{scale:1.3}}

/* ghost numerals drift with scroll (progressive) */
@supports (animation-timeline: view()){
  .plate-num,.ghost-num{animation:plateDrift linear both;animation-timeline:view();animation-range:entry 0% cover 100%}
  @keyframes plateDrift{from{translate:0 44px}to{translate:0 -44px}}
}

/* ============ UPDATE 3 WAVE 3 — STRENGTHENING LAYER ============ */
/* skip link: hidden until focused, then a yellow ticket top-left */
.skip-link{
  position:fixed;top:calc(10px + env(safe-area-inset-top));left:10px;z-index:200;
  background:var(--ug-y);color:#000;font-family:var(--font-knock-jr);
  text-transform:uppercase;letter-spacing:.06em;font-size:14px;
  padding:12px 18px;border-radius:var(--r);
  transform:translateY(-64px);transition:transform .25s var(--ease);
}
.skip-link:focus-visible{transform:none;outline-offset:2px}

/* returning-visitor quote ribbon */
.quote-ribbon{
  position:fixed;top:calc(64px + env(safe-area-inset-top));left:50%;z-index:75;
  display:flex;align-items:center;gap:14px;padding:9px 10px 9px 18px;
  background:rgba(12,12,15,.94);border:1px solid var(--hair2);border-radius:var(--r);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
  translate:-50% -84px;opacity:0;transition:translate .5s var(--ease),opacity .4s;
  max-width:calc(100vw - 24px);
}
.quote-ribbon.on{translate:-50% 0;opacity:1}
.quote-ribbon a{color:var(--ug-y);font-weight:700;white-space:nowrap}
.quote-ribbon .rx{
  width:30px;height:30px;border:1px solid var(--line);border-radius:2px;background:transparent;
  color:var(--mut);cursor:pointer;font-size:11px;line-height:1;
}
.quote-ribbon .rx:hover{color:#fff}

/* spec-loaded toast (pricing ?svc= hand-off) */
.spec-toast{
  position:fixed;bottom:calc(86px + env(safe-area-inset-bottom));left:50%;z-index:90;
  background:#0a0a0c;border:2px solid var(--ug-y);color:var(--ug-y);border-radius:3px;
  font-family:var(--font-knock-jr);text-transform:uppercase;letter-spacing:.08em;font-size:14px;
  padding:.5em .9em .42em;rotate:var(--stamp-r);
  translate:-50% 20px;opacity:0;transition:translate .35s var(--spring),opacity .3s;
  max-width:calc(100vw - 32px);text-align:center;
}
.spec-toast.on{translate:-50% 0;opacity:1}

/* CORNER TALK — poster pull-quotes (renders only with real quotes) */
.corner-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.corner{border-left:3px solid var(--ug-y);padding:6px 0 6px 22px}
.corner blockquote{font-family:var(--font-knock-jr);text-transform:uppercase;letter-spacing:.03em;font-size:clamp(19px,2.6vw,26px);line-height:1.2}
.corner figcaption{margin-top:12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
@media(max-width:820px){.corner-grid{grid-template-columns:1fr}}

/* the pledge — anti-promises in blueprint voice */
.pledge{
  position:relative;display:flex;justify-content:center;gap:0;flex-wrap:wrap;margin-top:26px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
}
.pledge span{padding:8px 18px;border-top:1px solid var(--hair)}
.pledge span+span{border-left:1px solid var(--hair)}

/* start-page reassurance strip */
.reassure{margin-bottom:14px;font-size:9.5px;color:var(--dim)}

/* a11y: low-vision users get a stronger blueprint layer, not a vanished one */
@media (prefers-contrast:more){
  :root{--hair:rgba(255,255,255,.22);--hair2:rgba(255,255,255,.42);--mut:#a9a9b3;--dim:#8a8a93;--bp:rgba(255,255,255,.09)}
  .grain{display:none}
}
/* forced colors: outline type must not vanish */
@media (forced-colors:active){
  h1.mega .thin,.exp-line:nth-child(even) .name,.manifesto h3 .x,.lost h1 em,
  .marquee-track span,.foot-wm,.plate-num,.ghost-num{-webkit-text-stroke:0;color:CanvasText}
  .stamp,.ticket,.badge{border:1px solid CanvasText}
  .bp,.grain{display:none}
}

/* landscape phones: the bill goes two-column */
@media (max-height:480px) and (orientation:landscape){
  .hero2{min-height:100svh;padding:86px 0 30px}
  h1.mega{font-size:clamp(40px,9.5vh,64px)}
  .hero2-stats{display:none}
  .intro-mark{width:clamp(90px,30vmin,150px)}
  .intro-bridge{display:none}
}

/* perf: below-the-fold sections skip offscreen rendering */
#exp,#quote,#process,#manifesto,.cta-banner,footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 720px;
}
.work,.case,.cat-row,.svc{contain:layout paint}

/* print: the quote becomes a black-on-white spec sheet (pricing page) */
@media print{
  body{background:#fff;color:#000}
  header.nav,.mmenu,.scenes,.scenes-veil,#fxCanvas,.fx-veil,.grain,.cursor-glow,.cursor-dot,
  .scroll-progress,.float-wa,.qbar,.marquee,.cta-banner,footer,.page-hero .ghost-num,
  .bp,.reg,.plate-num,.quote-ribbon,.spec-toast,.price-gate,.change-ctry,.bundles,.btn{display:none!important}
  .price-shell{border:2px solid #000;outline:none;background:#fff}
  .summary,.svc-list{background:#fff;color:#000;border-color:#000}
  .svc .info b,.srow,.srow .k,.dep .drow,.summary h4{color:#000!important}
  .srow{border-color:#ccc}
  .dep{border-color:#000;background:#fff}
  .dep .lbl{background:#fff;color:#000;border-color:#000}
  .page-hero h1{color:#000;font-size:40px}
  .page-hero h1 em{color:#000}
}

/* ============ THE RECORD — client mark wall (home + work) ============ */
.record{margin-top:56px}
.record-cap{
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mut);
}
.record-cap b{color:var(--ug-y);font-weight:700}
.record-cap::after{content:"";flex:1;height:1px;background:var(--hair2);order:1}
.record-cap .record-link{order:2;color:var(--ug-y);font-weight:700;transition:color .2s}
.record-cap .record-link:hover{color:#fff}
.record-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px}
.record-grid figure{
  margin:0;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  background:#0a0a0c;transition:border-color .3s,transform .3s var(--ease);
}
.record-grid figure:hover{border-color:var(--hair2);transform:translateY(-3px)}
.record-grid img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.record-grid figcaption{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);padding:6px 9px;border-top:1px solid var(--hair);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media(max-width:640px){
  .record-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .record-grid figcaption{font-size:7px;letter-spacing:.06em;padding:5px 6px}
}