/* ============================================================
   CONCRETE — "Proof is the pitch"
   Scroll-driven proof storm. GSAP + Lenis + CSS-driven ignite.
   Base is muted/near-grayscale; work ignites to real brand
   colour the instant it lands in focus.
   ============================================================ */

:root{
  --bg:#0a0a0b;
  --bg-2:#101012;
  --ink:#EFEFEC;
  --dim:#8c8c87;
  --faint:#7D7D77;
  --line:rgba(239,239,236,.12);
  --line-soft:rgba(239,239,236,.06);
  /* per-scene ignite accents (overridden inline) */
  --a1:#FF2E1F;
  --a2:#0F9D58;
  --a3:#F3E7C8;
  --disp:'Anton',sans-serif;
  --sans:'Hanken Grotesk',sans-serif;
  --mono:'Bungee','Hanken Grotesk',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-size:16px; line-height:1.5;
}
/* fixed full-screen backdrop ELEMENT — View Transitions capture elements but render the body/root
   background PROPERTY as white; a real element (like the detail page's .liquid-bg) captures correctly. */
.vt-backdrop{position:fixed;inset:0;z-index:-1;background:#0a0a0b;pointer-events:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--a1);color:#0a0a0b}

/* film grain + vignette over everything */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:60;
  background:radial-gradient(120% 100% at 50% 0%,transparent 60%,rgba(0,0,0,.55));
}

/* ───────────── HUD ───────────── */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  /* env() is the notch/status-bar inset — only non-zero when viewport-fit=cover is set, so this keeps the
     logo/menu clear of the notch once the page fills edge-to-edge (and is a harmless 0 everywhere else). */
  padding:18px clamp(16px,3vw,34px);
  color:#fff;   /* was mix-blend-mode:difference — a fixed blend element re-blends the moving content every scroll frame; homepage is dark so plain white is identical */
}
.hud .mark{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:26px;letter-spacing:.04em;text-transform:uppercase}
.hud .mark .logo{height:32px;width:auto;display:block;flex:none}
.hud .mark span{line-height:1}
.hud .mark b{font-weight:400}
.hud .channels{display:flex;gap:clamp(15px,2vw,30px);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
/* links with an accent underline that wipes in from the left (same red +
   directional reveal as the .btn) — persistent on the active page */
.hud .channels a{position:relative;opacity:.6;padding-bottom:5px;transition:opacity .3s var(--ease)}
.hud .channels a::after{content:'';position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--a1);transform:scaleX(0);transform-origin:left center;transition:transform .38s var(--ease)}
.hud .channels a:hover,.hud .channels a.on{opacity:1}
.hud .channels a:hover::after,.hud .channels a.on::after{transform:scaleX(1)}
.hud .right{display:flex;align-items:center;gap:clamp(12px,2vw,22px)}
.hud .counter{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap}
.hud .counter b{font-family:var(--disp);font-size:16px;letter-spacing:.02em;font-weight:400}
.hud .cta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,255,255,.5);padding:8px 14px;border-radius:40px;transition:background .3s,color .3s}
.hud .cta:hover{background:#fff;color:#0a0a0b}
.nav-burger{display:none;background:none;border:0;cursor:pointer}
@media(max-width:720px){
  .hud{animation:none!important;transform:none!important}   /* a transformed .hud makes the fixed menu overlay relative to it, not the viewport */
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:8px;position:relative;z-index:60}
  .nav-burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
  .hud .right{display:none}
  .hud .channels{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,4.5vh,34px);background:rgba(8,8,11,.98);z-index:55;opacity:0;pointer-events:none;transition:opacity .34s var(--ease)}
  .hud.nav-open{z-index:999}
  .hud.nav-open .channels{opacity:1;pointer-events:auto}
  /* each link starts lifted + hidden, then springs up in sequence once the panel opens */
  .hud .channels a{font-family:var(--disp);text-transform:uppercase;font-size:clamp(30px,9vw,46px);color:#fff;letter-spacing:.01em;
    opacity:0;transform:translateY(26px);transition:opacity .42s var(--ease),transform .55s cubic-bezier(.22,1,.36,1)}
  .hud .channels a.on{color:var(--a1,#E5342B)}
  .hud.nav-open .channels a{opacity:.92;transform:translateY(0)}
  .hud.nav-open .channels a:nth-child(1){transition-delay:.10s}
  .hud.nav-open .channels a:nth-child(2){transition-delay:.16s}
  .hud.nav-open .channels a:nth-child(3){transition-delay:.22s}
  .hud.nav-open .channels a:nth-child(4){transition-delay:.28s}
  .hud.nav-open .channels a:nth-child(5){transition-delay:.34s}
  .hud.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hud.nav-open .nav-burger span:nth-child(2){opacity:0}
  .hud.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:720px) and (prefers-reduced-motion:reduce){
  .hud .channels a{transform:none!important;transition:opacity .2s!important;transition-delay:0s!important}
  .hr-track{animation:none!important}
}

/* ───────────── shared proof card look ───────────── */
.pcard{
  position:absolute; width:clamp(150px,17vw,230px);
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:3px; padding:14px 15px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  filter:grayscale(1) brightness(.82) contrast(.95);
}
.pcard.lit{filter:none}
.pcard .stars{font-family:var(--mono);font-size:13px;color:var(--a1);letter-spacing:.05em}
.pcard .q{font-size:14px;line-height:1.4;margin-top:8px;color:var(--ink);font-weight:500}
.pcard .who{display:flex;align-items:center;gap:8px;margin-top:11px}
.pcard .who img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.pcard .who span{font-family:var(--sans);font-size:10px;letter-spacing:.06em;color:var(--dim);text-transform:uppercase}
.pcard.ugc{padding:0;overflow:hidden;border-radius:4px}
.pcard.ugc img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pcard.dm{background:#16181c}
.pcard.dm .hd{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.pcard.dm .dot{width:7px;height:7px;border-radius:50%;background:var(--a2)}

/* SOLD OUT / press stamps */
.stamp{
  position:absolute;font-family:var(--disp);text-transform:uppercase;
  border:3px solid currentColor;border-radius:6px;padding:6px 14px;
  font-size:clamp(18px,2vw,30px);letter-spacing:.04em;line-height:1;
  transform:rotate(-9deg);color:var(--a1);opacity:.9;
}

/* ───────────── HERO — the overwhelm ───────────── */
/* hero fills the full physical screen — extends UNDER the address bar (no dark gap above it) like a
   fixed full-screen layer. lvh = the large viewport (toolbar-hidden height); 100vh is the fallback. */
.hero{position:relative;height:100vh;height:100lvh;overflow:hidden}
.hero-fan{display:none}   /* mobile-only hand-fan of work (see the max-width:720px block) */
.hero-reviews{display:none}   /* mobile-only reviews carousel */
.storm{position:absolute;inset:0;z-index:1}
.hero-mark{
  position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 20px;
  pointer-events:none;
}
.hero-mark .kick{font-family:var(--mono);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.hero-mark h1{
  font-family:var(--disp);text-transform:uppercase;line-height:.92;
  font-size:clamp(2.6rem,9vw,8.5rem);letter-spacing:.005em;
  /* NO text-shadow: Safari rasterises even a modest blur as a hard 3D-extruded emboss (looked wrong vs Chrome).
     The hero sits on a dark, veiled field so it reads fine flat. */
  text-shadow:none;
}
.hero-mark h1 .ig{color:var(--a1)}
/* ═══════════ homepage "pile of proof" — crossing marquees (this IS the header) + scattered polaroid cards ═══════════ */
.ppzone{ position:relative; z-index:2;
  /* ONE gradient behind BOTH the pile and the chatbot, and FIXED to the viewport (background-attachment:fixed)
     so the warm glow holds the same spot on screen as you scroll — behind the case studies, then behind the
     bot — instead of scrolling away. Clipped to this wrapper, so it never bleeds up into the dark scenes. */
  background:radial-gradient(120% 78% at 50% 48%, #2b1615 0%, #191010 30%, #0d0a0a 54%, #08080b 80%);
  background-attachment:fixed; }
/* top fade: the fixed warm field would otherwise show a hard edge where .ppzone meets the dark scenes.
   This overlay (scene colour #0a0a0b → transparent) rides with the content and blends that seam away.
   Sits behind the marquee/cards (z-index below .pp) so it only softens the background, not the content. */
.ppzone::before{ content:""; position:absolute; inset:0 0 auto 0; height:clamp(220px,32vh,440px); z-index:1;
  background:linear-gradient(180deg, #0a0a0b 0%, rgba(10,10,11,0) 100%); pointer-events:none; }
.pp{ position:relative; z-index:2; padding:0 0 clamp(80px,12vh,160px); overflow:hidden; }
/* two marquees CROSS into an X: a huge red word-ticker over a scrolling strip of white client logos */
.pp-cross{ position:relative; height:clamp(240px,33vh,380px); margin:clamp(20px,5vh,66px) 0 clamp(16px,3vh,42px); overflow:hidden; }
.pp-band{ position:absolute; left:50%; top:50%; width:164vw; display:flex; }
.pp-band-red{ translate:-50% -50%; rotate:-6deg; background:#E5342B; padding:clamp(4px,1vh,12px) 0; z-index:2; box-shadow:0 20px 55px -16px rgba(229,52,43,.5); }
.pp-band-logos{ translate:-50% -50%; rotate:6deg; background:#0c0c0f; padding:clamp(15px,2.4vh,26px) 0; z-index:1; border-block:1px solid rgba(255,255,255,.08); }
.pp-track{ display:flex; flex:none; align-items:center; white-space:nowrap; will-change:transform; animation:ppMarq 34s linear infinite; }
.pp-track-b{ animation-direction:reverse; animation-duration:46s; }
.pp-band-red .pp-track span{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(40px,7.6vw,108px); line-height:.96; letter-spacing:.008em; color:#fff; padding-right:.4em; }
.pp-logos{ display:flex; align-items:center; flex:none; }
.pp-logos img{ height:clamp(19px,3vh,33px); width:auto; margin:0 clamp(26px,4vw,58px); filter:brightness(0) invert(1); opacity:.8; flex:none; }
@keyframes ppMarq{ to{ transform:translateX(-50%); } }
/* the pile: cards share one grid cell (centred), scatter via per-card translate+rotate.
   --s scales the scatter distance, --cw the card size (both stepped down on smaller screens). */
.pp-pile{ --s:1; --cw:1; display:grid; place-items:center; width:100%; min-height:clamp(680px,84vh,940px); margin:0 auto; padding:0 16px; }
.pp-card{ grid-area:1/1; width:calc(var(--w,300) * var(--cw) * 1px); z-index:var(--z,1); position:relative; text-decoration:none;
  background:linear-gradient(168deg,#f7f5ee,#e9e6dc); padding:12px 12px 15px; border-radius:2px;
  box-shadow:22px 34px 60px -16px rgba(0,0,0,.62), 8px 14px 22px -7px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.7);
  transform:translate(calc(var(--x,0)*var(--s)*1px), calc(var(--y,0)*var(--s)*1px)) rotate(var(--r,0deg));
  transition:transform .85s cubic-bezier(.2,.8,.24,1), opacity .65s ease, box-shadow .42s;
  transition-delay:calc(var(--i,0) * 165ms); will-change:transform,opacity; }
/* entrance — hidden + lifted until the pile scrolls in, then dealt onto the pile one by one (staggered by --i) */
.pp-pile:not(.in) .pp-card{ opacity:0; transition-delay:0s;
  transform:translate(calc(var(--x,0)*var(--s)*1px), calc((var(--y,0)*var(--s) - 48)*1px)) rotate(0deg) scale(.9); }
.pp-card:hover,.pp-card:focus-visible{ z-index:60; outline:none; transition-delay:0s;
  transform:translate(calc(var(--x,0)*var(--s)*1px), calc(var(--y,0)*var(--s)*1px)) rotate(0deg) scale(1.055);
  box-shadow:30px 50px 84px -18px rgba(0,0,0,.74), 10px 16px 28px -6px rgba(0,0,0,.46); }
.pp-pin{ position:absolute; top:-8px; left:50%; width:15px; height:15px; margin-left:-7.5px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 38% 34%, #fff 0%, var(--c) 44%, color-mix(in srgb,var(--c) 55%,#000) 100%);
  box-shadow:0 3px 6px rgba(0,0,0,.5); }
.pp-shot{ overflow:hidden; background:#0a0a0d; }
.pp-shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pp-cap{ padding:10px 4px 1px; display:flex; flex-direction:column; gap:3px; }
.pp-stars{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--c); }
.pp-client{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(17px,1.7vw,22px); line-height:1; letter-spacing:.01em; color:#1a1813; margin-top:2px; }
.pp-verdict{ font-family:var(--sans); font-size:clamp(13px,1.1vw,15px); line-height:1.35; color:#4a463c; font-style:italic; }
.pp-foot{ text-align:center; margin-top:clamp(18px,3vh,40px); position:relative; z-index:3; }
.pp-all{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#cfccc4; text-decoration:none; display:inline-flex; align-items:center; gap:8px; padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.2); transition:color .2s,border-color .2s; }
.pp-all:hover{ color:#fff; border-color:#fff; }
@media (max-width:1240px){ .pp-pile{ --s:.76; --cw:.84; } }
@media (max-width:900px){ .pp-pile{ --s:.56; --cw:.72; min-height:clamp(500px,66vh,680px); } }
/* keep the SCATTERED PILE on mobile (like the Jagiya "raving fans" wall) — just tighter scatter + smaller cards
   so it fills the phone screen and cards bleed off the edges, instead of a flat vertical stack. */
@media (max-width:600px){ .pp-pile{ --s:.36; --cw:.6; min-height:clamp(330px,46vh,430px); }
  /* the diagonal band container was 33vh tall with the band centred — its empty lower half stacked onto the
     pile's centred top half = a big dead gap. Shrink the container + tighten margins so they sit close. */
  .pp-cross{ height:clamp(140px,20vh,200px); margin:clamp(10px,2.5vh,24px) 0 clamp(4px,1.2vh,14px); }
  /* the scattered cards fan downward, so drop the "see every case" link lower — it was almost touching them */
  .pp-foot{ margin-top:clamp(48px,9vh,84px); } }
@media (max-width:400px){ .pp-pile{ --s:.3; --cw:.52; min-height:clamp(300px,44vh,380px); } }
@media(max-width:720px){
  /* solid-ish header mask so images never appear to touch the logo/menu (they slide cleanly under it) */
  .hud{ background:linear-gradient(180deg,rgba(10,10,11,.99) 0%,rgba(10,10,11,.99) 60%,rgba(10,10,11,.55) 82%,transparent 100%); }
  /* drop the corner/bottom vignette on mobile — on a phone it just reads as an unwanted dark band at the foot */
  body::after{ display:none; }
  /* hero: keep only the two top review cards; drop the lower foreground ones that overlap the headline */
  /* the scattered desktop reviews are replaced by a swipeable carousel on mobile (see .hero-reviews) */
  .hero .storm.fg .pcard{ display:none !important; }
  /* reviews as an infinite flowing marquee — the set is duplicated in the markup and the track shifts by
     exactly one set (-50%) so it loops seamlessly. per-card margin (not gap) keeps that maths pixel-exact. */
  .hero-reviews{ display:block; position:absolute; left:0; right:0; top:clamp(88px,12vh,124px); z-index:13;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
  .hr-track{ display:flex; width:max-content; padding:2px 0 10px; animation:hrFlow 48s linear infinite; will-change:transform; }
  .hr-track:active{ animation-play-state:paused; }
  @keyframes hrFlow{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .hr-card{ flex:0 0 clamp(230px,70vw,290px); box-sizing:border-box; margin:0 12px 0 0;
    background:rgba(16,15,18,.94); border:1px solid rgba(255,46,31,.5); border-radius:12px; padding:16px 17px;
    display:flex; flex-direction:column; gap:9px; box-shadow:0 14px 30px rgba(0,0,0,.5); min-height:150px; }
  .hr-card .stars{ color:var(--a1,#E5342B); font-family:var(--mono); font-size:13px; letter-spacing:.14em; }
  .hr-card .q{ font-family:var(--sans); font-size:15px; line-height:1.42; color:#f2ece2; margin:0; font-style:normal; }
  .hr-card .who{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#9a948a; margin-top:auto; }
  .hr-card .who img{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none; }
  .hero-mark h1{ font-size:clamp(2rem,9.6vw,3.3rem); line-height:1; text-wrap:balance; }
  .hero-mark h1 br{ display:none; }   /* let balance handle the wrap instead of the desktop hard break */
  .hero-mark .sub{ font-size:1rem; }
  /* nudge the hero copy down: the two review cards sit just under the header, so dropping the block both
     clears the eyebrow from behind them AND centres the headline (it was sitting a touch high). Uses
     transform so it stacks with the tilt parallax (which drives the `translate` property). */
  .hero-mark{ transform:translateY(5.5vh); }
  /* mobile hero = 2 review cards up top + headline + a HAND-FAN of work at the bottom (no reviews down there).
     Drop the scattered background storm so the fan is the clean bottom feature. */
  #stormBack{ display:none; }
  /* FLEXBOX-CENTRED base row — impossible to land off-centre on any device. the cards heavily overlap
     (negative margin) so they stack near the middle, then each rotates to splay into a hand fan. */
  /* keep the hero's overflow:hidden (overflow:visible let the page scroll sideways). sit the fan just inside
     the bottom edge so its low cards aren't clipped, without lifting it up the screen. */
  .hero-fan{ display:flex; justify-content:center; align-items:flex-end; position:absolute; left:0; right:0; bottom:3%; z-index:11; pointer-events:none; }
  /* landscape cards (4:3, matching the desktop screenshots) so the full site shows — nothing trimmed on the sides */
  .fan-card{ position:relative; flex:0 0 auto; width:clamp(184px,52vw,250px); margin:0 -84px; transform-origin:50% 168%;
    border-radius:9px; overflow:hidden; box-shadow:0 18px 34px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.1); }
  .fan-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
  /* centre trio (2·3·4) reads big & full; the outer two spill off the screen edges */
  .fan-card:nth-child(1){ transform:rotate(-32deg); z-index:1; }
  .fan-card:nth-child(2){ transform:rotate(-16deg); z-index:2; }
  .fan-card:nth-child(3){ transform:rotate(0deg);   z-index:3; }
  .fan-card:nth-child(4){ transform:rotate(16deg);  z-index:2; }
  .fan-card:nth-child(5){ transform:rotate(32deg);  z-index:1; }
}
@media (prefers-reduced-motion:reduce){
  .pp-track{ animation:none; } .pp-card{ transition:none; }
  .pp-pile:not(.in) .pp-card{ opacity:1; transform:translate(calc(var(--x,0)*var(--s)*1px), calc(var(--y,0)*var(--s)*1px)) rotate(var(--r,0deg)); }
}

/* Safari spaces Anton a touch wider than Chrome for the same letter-spacing; tighten the hero headline
   in Safari ONLY (this @supports block is Safari-specific) so it matches Chrome's closer letters. */
@supports (background: -webkit-named-image(i)) {   /* Safari only: Anton renders wider than Chrome — tighten EVERY Anton element site-wide to match */
  .hero-mark h1, .verb,
  .sd-title, .sd-head, .sd-sec h2, .sd-proof .pf-h, .sd-next-row a, .pb-verdict, .pb-big,
  .cap h3, .cap-no, .hs-num, .hs-lbl, .jn-card h3, .jn-no, .faq-card h3, .ns-step h3, .pm-v,
  .cs-title, .cs-verdict, .cs-card h3, .ct-title,
  .svc-cap, .svc-title, .svc-card h2, .svc-cover .ttl, .svc-cover .badge, .scene-tag .ch, .hud .counter b, .hud .mark,
  .close h2, .close .agg .it .n,
  .cf-cap h1, .cf-vtext, .cf-word, .cf-fclient, .cf-unsealed, .cf-spine .sp-no, .cf-seal .cs-stamp,
  .rc-cap h1, .rc-brand, .rc-key .kn, .rc-result .rl-value,
  .ed-head h1, .ed-close h2, .ed-client, .ed-verdict, .ed-stat .n, .ed-shot .ed-stamp,
  .wall-cap h1, .scrap-stat .stat-num, .legal-title, .pp-title, .pp-client,
  .ec-header, .fd-mark, .foot-brand span { letter-spacing: -0.018em !important; }
}
.hero-mark .sub{margin-top:20px;font-size:clamp(1rem,1.6vw,1.35rem);color:var(--ink);max-width:34ch;font-weight:500}
.hero-mark .pudding-i{display:inline-block;height:2.4em;width:auto;vertical-align:-.92em;margin:0 .1em;filter:drop-shadow(0 7px 11px rgba(0,0,0,.5))}
.hero-mark .pudding-i .ooze{transform-box:fill-box;transform-origin:50% 0%}
.hero-mark .pudding-i.drip-go .ooze{animation:ooze 2.2s cubic-bezier(.33,0,.15,1) forwards}
@keyframes ooze{from{transform:scaleY(1)}to{transform:scaleY(1.75)}}
/* halo, not veil — a baked radial scrim behind the type (free); no backdrop-filter */
.hero-veil{position:absolute;inset:0;z-index:5;background:radial-gradient(60% 27% at 50% 48%,rgba(8,8,9,.97) 0%,rgba(8,8,9,.82) 44%,rgba(8,8,9,.38) 68%,transparent 82%)}

/* ── hero depth tiers: size + contrast + BAKED (static) blur; the swarm reads near→far ── */
.storm.fg{position:absolute;inset:0;z-index:12;pointer-events:none}   /* foreground rides ABOVE the headline */
.pcard.far{width:clamp(94px,10vw,148px);opacity:.5;
  filter:grayscale(1) brightness(.46) contrast(.92) blur(2.4px);
  box-shadow:0 10px 22px rgba(0,0,0,.5)}
.pcard.far .q{font-size:12px}
.pcard.mid{width:clamp(150px,15.5vw,208px);opacity:.92;filter:grayscale(.55) brightness(.82)}
.storm.fg .pcard.near{width:clamp(216px,23vw,312px);opacity:1;filter:none;box-shadow:0 30px 64px rgba(0,0,0,.62)}
.storm.fg .pcard.near .q{font-size:15px}
.storm.fg .pcard.near.lit{border-color:rgba(255,46,31,.55);
  box-shadow:0 30px 64px rgba(0,0,0,.62),0 0 0 1px rgba(255,46,31,.22),0 0 42px rgba(255,46,31,.12)}
.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:11;font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);display:flex;flex-direction:column;align-items:center;gap:9px}
/* on the homepage hero the cue lives UNDER the text (in flow) so it's never buried by the foreground cards */
.hero-mark .scrollcue{position:static;transform:none;margin-top:clamp(10px,2vh,20px)}
.scrollcue .bar{width:1px;height:34px;background:linear-gradient(var(--dim),transparent);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ───────────── capability scenes ───────────── */
.scene{position:relative;height:300vh}            /* scroll runway; pin holds the viewport */
.scene-pin{height:100vh;height:100lvh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.scene-tag{position:absolute;top:clamp(78px,12vh,120px);left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);z-index:6}

/* the wall of work rushing past (behind) */
.wall{position:absolute;inset:0;z-index:1}
.wall img{
  position:absolute;width:clamp(180px,20vw,300px);border-radius:4px;
  border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.55);
  filter:grayscale(1) brightness(.5) contrast(.9);will-change:transform;
}

/* the verb */
.verb{
  position:relative;z-index:5;font-family:var(--disp);text-transform:uppercase;
  text-align:center;line-height:1.0;font-size:clamp(2.4rem,7.5vw,7rem);
  letter-spacing:.01em;max-width:16ch;pointer-events:none; text-shadow:none;
}
.verb .ig{color:var(--a1)}

/* the focus piece (ignites) */
.focus{
  position:absolute;z-index:4;width:clamp(280px,34vw,520px);
  border-radius:6px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.focus img,.focus video{width:100%;display:block;filter:grayscale(var(--g,1)) brightness(calc(1 - var(--g,1)*.28));will-change:filter}
.v2 .focus video{height:auto}
.focus .glow{position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--a1);opacity:calc(1 - var(--g,1));mix-blend-mode:screen}
/* the proof, stamped onto the work — ignites to the scene's brand colour with the focus */
.focus-stamp{
  position:absolute; left:clamp(10px,1.4vw,16px); bottom:clamp(10px,1.4vw,16px); z-index:6;
  font-family:var(--disp); text-transform:uppercase; line-height:1;
  font-size:clamp(13px,1.5vw,21px); letter-spacing:.03em; white-space:nowrap;
  color:#0a0a0b; background:var(--a1); padding:7px 12px; border-radius:3px;
  box-shadow:0 8px 22px rgba(0,0,0,.45); transform:rotate(-3deg); transform-origin:left bottom;
  opacity:calc(1 - var(--g,1));   /* fades in as the scene ignites */
}

/* proof attached to the focus */
.proof{position:absolute;inset:0;z-index:7;pointer-events:none}
.proof>*{position:absolute;will-change:transform}
.proof .stat{
  font-family:var(--disp);line-height:.86;color:var(--a1); text-shadow:none;
}
.proof .stat .n{font-size:clamp(3rem,7vw,6.4rem);display:block}
.proof .stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-top:8px;display:block}

/* ───────────── close — the receipt ───────────── */
.close{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(60px,12vh,140px) 20px;gap:clamp(30px,5vh,60px)}
.close .agg{display:flex;flex-wrap:wrap;gap:clamp(28px,6vw,90px);justify-content:center}
.close .agg .it .n{font-family:var(--disp);font-size:clamp(2.6rem,6vw,5.5rem);line-height:.9;color:var(--a1)}
.close .agg .it .l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:10px}
.close h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2.6rem,8vw,7rem);line-height:.9}
.close .logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:clamp(30px,4.5vw,64px);row-gap:30px;max-width:900px}
.close .logos img{
  max-height:30px;max-width:132px;width:auto;height:auto;
  filter:brightness(0) invert(1);opacity:.5;
  transition:opacity .35s ease,filter .35s ease;
}
.close .logos img:hover{filter:none;opacity:1}

/* ════ FOOTER ════ */
.site-footer{position:relative;z-index:5;background:#070708;border-top:1px solid var(--line);
  padding:clamp(38px,6vw,64px) clamp(20px,6vw,80px) 30px}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  max-width:1200px;margin:0 auto}
.foot-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.foot-brand .logo{height:26px;width:auto}
.foot-brand span{font-family:var(--disp);font-size:19px;letter-spacing:.06em}
.framer-badge{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;
  padding:10px 16px;transition:border-color .3s ease,background .3s ease}
.framer-badge:hover{border-color:rgba(0,153,255,.55);background:rgba(0,153,255,.08)}
.framer-badge .fr-glyph{height:22px;width:auto;color:#0099FF;flex:none}
.framer-badge .fr-txt{display:flex;flex-direction:column;line-height:1.1}
.framer-badge .fr-txt small{font-family:var(--sans);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.framer-badge .fr-txt b{font-family:var(--disp);font-size:15px;letter-spacing:.02em;color:#fff}
.foot-base{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  max-width:1200px;margin:30px auto 0;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--dim)}
.foot-base a{color:var(--dim);text-decoration:none;transition:color .25s ease}
.foot-base a:hover{color:#fff}
.close .cta-big{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;background:var(--a1);color:#0a0a0b;padding:18px 34px;border-radius:50px;font-weight:700;transition:transform .3s var(--ease)}
.close .cta-big:hover{transform:scale(1.04)}

/* reveal helper for reduced-motion / fallback */
.rv{opacity:0;transform:translateY(24px)}
.rv.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}

/* ───────────── reduced motion ───────────── */
@media (prefers-reduced-motion: reduce){
  .scene{height:auto}
  .scene-pin{height:auto;flex-direction:column;gap:30px;padding:80px 20px}
  .wall{position:relative;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
  .wall img{position:static!important;transform:none!important;filter:grayscale(.4) brightness(.8)}
  .focus{position:relative;width:min(520px,90vw)}
  .focus img{filter:none}
  .proof{position:relative;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:24px}
  .proof>*{position:static!important;transform:none!important}
  .storm .pcard{filter:none}
  .hero-veil{display:none}
}

/* ═══════════ V2 — split layout: text never covers the work ═══════════ */
.v2 .scene-pin{justify-content:center}
.v2 .split{position:relative;z-index:5;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,78px);align-items:center;width:min(1180px,92vw)}
.v2 .scene.rev .split{grid-template-columns:.95fr 1.05fr}
.v2 .scene.rev .focus{order:2}
.v2 .focus{position:relative;width:100%;max-width:none}
.v2 .stage-copy{position:relative;z-index:6}
.v2 .verb{position:static;text-align:left;max-width:18ch;font-size:clamp(2.1rem,4.6vw,4.4rem);text-shadow:none;margin:0}
.v2 .proof{position:static;display:flex;flex-wrap:wrap;gap:15px;align-items:flex-start;margin-top:28px;inset:auto;pointer-events:auto}
.v2 .proof>*{position:static!important}
.v2 .proof .stat{margin:0}
.v2 .proof .stat .n{font-size:clamp(2.6rem,5vw,4.2rem)}
.v2 .proof .pcard{position:static;width:min(238px,100%);box-shadow:0 14px 32px rgba(0,0,0,.45)}
.v2 .proof .stamp{position:static;align-self:center}
.v2 .wall img{filter:grayscale(1) brightness(.36) contrast(.9)}
@media(max-width:820px){
  .v2 .split,.v2 .scene.rev .split{grid-template-columns:1fr;gap:26px}
  .v2 .scene.rev .focus{order:0}
  .v2 .verb{font-size:clamp(2rem,8vw,3.1rem);max-width:none}
}

/* ═══════════ V3 — Ponpon-ward: mouse parallax + camera + blend ═══════════ */
/* mouse parallax via the independent `translate` property so it stacks with
   GSAP's `transform` (scroll/scene animations) instead of fighting it */
.v3 .verb .word{display:inline-block;will-change:transform}
.v3 .wall img   { translate: calc(var(--mx,0) * -26px) calc(var(--my,0) * -17px); }
.v3 .focus      { translate: calc(var(--mx,0) *  16px) calc(var(--my,0) *  11px); }
.v3 .stage-copy { translate: calc(var(--mx,0) *   9px) calc(var(--my,0) *   7px); }
.v3 .storm .pcard{ translate: calc(var(--mx,0) * -18px) calc(var(--my,0) * -12px); }
.v3 .storm .stamp{ translate: calc(var(--mx,0) * -11px) calc(var(--my,0) *  -8px); }
/* per-depth parallax — far drifts least, near drifts most (transform/translate only, blur stays static) */
.v3 .storm .pcard.far    { translate: calc(var(--mx,0) *  -9px) calc(var(--my,0) *  -6px); }
.v3 .storm .pcard.mid    { translate: calc(var(--mx,0) * -17px) calc(var(--my,0) * -11px); }
.v3 .storm.fg .pcard.near{ translate: calc(var(--mx,0) * -30px) calc(var(--my,0) * -20px); }
.v3 .hero-mark  { translate: calc(var(--mx,0) *   6px) calc(var(--my,0) *   4px); }
.v3 .scene-pin  { will-change: transform, filter; }
@media (prefers-reduced-motion: reduce){
  .v3 .wall img,.v3 .focus,.v3 .stage-copy,.v3 .storm .pcard,.v3 .storm .stamp,.v3 .hero-mark{ translate:none!important; }
}

/* ═══════════ CONTINUOUS — one pinned stage, scenes cross-dissolve (no gap) ═══════════ */
.cont #scenes{position:relative;height:100vh;height:100lvh;overflow:hidden}
.cont #scenes .scene{position:absolute;inset:0;height:100vh;height:100lvh;width:100%}
.cont #scenes .scene .scene-pin{height:100vh;height:100lvh}
.cont #scenes .scene .split{will-change:transform,opacity}
/* stacked absolute scenes: the container boxes must let clicks pass through so the top (inactive) scene
   doesn't intercept the active scene's CTA. Only .split is interactive, and GSAP hides inactive splits
   with visibility:hidden (which also drops their pointer events). */
.cont #scenes .scene, .cont #scenes .scene-pin{ pointer-events:none; }
.cont #scenes .scene .split{ pointer-events:auto; }
@media (prefers-reduced-motion: reduce){
  .cont #scenes{height:auto;overflow:visible}
  .cont #scenes .scene{position:static;height:auto}
}
@media(max-width:720px){
  /* mobile scene tidy (animations kept): hide the busy collage; float the review cards into the BACKGROUND
     (blurred + dim) so they add texture without eating vertical space; keep focus + headline + stat + CTA in flow. */
  /* bring the ambient scene background (floating site thumbnails + the 3D orbs) to mobile too — as a dim,
     blurred layer BEHIND the content. z-index:-1 sits it behind the in-flow copy inside the isolated
     scene-pin; it still drifts on phone-tilt via --mx/--my. */
  .wall{ display:block; z-index:-1; opacity:.6; filter:blur(1.5px); }
  .wall img{ width:clamp(92px,27vw,150px); box-shadow:0 12px 30px rgba(0,0,0,.5); }
  /* top-aligned column: label under the header, image below it, then copy — with even breathing room.
     isolation:isolate makes this its own stacking context so the z-index:-1 background stays BEHIND the content. */
  .v2 .scene-pin{ position:relative; isolation:isolate; flex-direction:column; justify-content:center;
    gap:clamp(16px,3vh,30px); padding:92px 20px 40px; }
  .scene-tag{ position:static; transform:none; text-align:center; margin:0 auto; }
  .v2 .split, .v2 .stage-copy{ position:static; }
  .v2 .split{ gap:clamp(16px,3vh,30px); }
  /* cap the media by HEIGHT so portrait video (the can) and square collages both fit inside 100svh —
     otherwise a tall video at 82vw overflows and overflow:hidden clips the CTA off the bottom. */
  .v2 .focus{ width:auto; max-width:88vw; margin:0 auto; }
  .v2 .focus img, .v2 .focus video{ max-height:42vh; width:auto; max-width:100%; margin:0 auto; }
  /* portrait product videos read big even when shorter — trim them a touch more than the square collages */
  .v2 .focus video{ max-height:34vh; }
  .v2 .verb{ font-size:clamp(1.9rem,7.6vw,2.8rem); }
  .v2 .stage-copy{ display:flex; flex-direction:column; gap:clamp(12px,2.4vh,22px); }
  /* reviews hidden on mobile — nested static ancestors make a true "behind" background unreliable, and inline
     they either overlap the headline or eat vertical space. The stat carries the proof; full testimonials live
     on the case pages. Result: big image, headline, stat, button — clean. */
  .v2 .proof .pcard{ display:none !important; }
}

/* ───────────── dot navigator (Ponpon-style, right edge) ───────────── */
.dotnav{position:fixed;right:clamp(16px,2vw,32px);top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:15px;align-items:center}
/* NB: no mix-blend-mode here — a fixed blend element makes the View-Transition root snapshot render solid white
   (the dots are already white and the scenes are dark, so it looks identical), same reason the .hud dropped it. */
.dotnav a{position:relative;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.32);transition:transform .35s var(--ease),background .35s var(--ease)}
.dotnav a:hover{background:rgba(255,255,255,.75)}
.dotnav a.on{background:#fff;transform:scale(1.55)}
.dotnav a .lbl{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s}
.dotnav a:hover .lbl{opacity:.9}
@media(max-width:720px){.dotnav{display:none}}

/* ───────────── section markers — "now-playing channel" (replaces ◆ eyebrow) ───────────── */
.scene-tag{display:inline-flex;align-items:center;gap:13px;color:var(--ink);font-family:var(--mono);letter-spacing:normal;text-transform:none}
.scene-tag .ch{font-family:var(--disp);font-size:22px;line-height:.9;color:var(--a1);letter-spacing:.01em}
.scene-tag .nm{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding-left:13px;border-left:1px solid var(--line)}
.hero-mark .kick{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}

/* ───────────── mobile: lighter, vertical ───────────── */
@media(max-width:720px){
  .scene{height:240vh}
  .pcard{width:clamp(130px,42vw,180px)}
  .focus{width:min(78vw,360px)}
  .wall img{width:clamp(120px,38vw,180px)}
}

/* ═══════════ SERVICES INDEX — liquid bg + 3D tilt cards ═══════════ */
.svc-page{background:transparent;position:fixed;inset:0;width:100%;height:100%;overflow:hidden}
#bgwave{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;display:block;pointer-events:none}
.svc-page::before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 14%);pointer-events:none}
.svc-page.nowebgl{background:radial-gradient(130% 100% at 50% 42%,#2A1840,#0a0a0b 72%)}

.svc-hero{max-width:1180px;margin:0 auto;padding:clamp(120px,20vh,200px) clamp(18px,4vw,40px) clamp(26px,4vh,52px)}
.svc-hero .kick{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.svc-title{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2.6rem,7vw,5.8rem);line-height:.92;letter-spacing:.006em;margin-top:18px;}
.svc-title .ig{color:var(--a1)}
.svc-intro{margin-top:20px;font-size:clamp(1.05rem,1.6vw,1.32rem);color:var(--dim);max-width:52ch;line-height:1.5}

.svc-grid-wrap{max-width:1180px;margin:0 auto;padding:clamp(18px,3vh,40px) clamp(18px,4vw,40px) clamp(70px,12vh,140px)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:920px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}
.svc-card{position:relative;display:flex;flex-direction:column;min-height:236px;padding:clamp(24px,2.4vw,34px);border:1px solid var(--line);border-radius:15px;background:linear-gradient(160deg,rgba(17,19,23,.66),rgba(8,9,11,.58));backdrop-filter:blur(6px);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .35s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.svc-card .num{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--dim)}
.svc-card h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.55rem,2.3vw,2.15rem);line-height:.95;margin:16px 0 12px;letter-spacing:.01em;transition:color .4s var(--ease)}
.svc-card p{font-size:14.5px;color:var(--dim);line-height:1.5}
.svc-card .go{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--a1);display:inline-flex;align-items:center;gap:7px}
.svc-card .go .ar{transition:transform .4s var(--ease)}
.svc-card .ember{position:absolute;inset:0;background:radial-gradient(85% 70% at 50% 125%,var(--a1),transparent 68%);opacity:0;transition:opacity .45s var(--ease);pointer-events:none;mix-blend-mode:screen}
.svc-card:hover{border-color:color-mix(in srgb,var(--a1) 55%,var(--line));box-shadow:0 30px 70px rgba(0,0,0,.5)}
.svc-card:hover h2{color:var(--a1)}
.svc-card:hover .ember{opacity:.2}
.svc-card:hover .go .ar{transform:translateX(5px)}
@media (prefers-reduced-motion: reduce){ .svc-card{transition:none} }

/* ═══════════ SERVICES CAROUSEL — album covers + expanding ring bg ═══════════ */
body.svc-page::after{content:none}                 /* drop dark vignette; keep it vivid */
.svc-page .hud{mix-blend-mode:normal;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.svc-page .hud .cta{border-color:rgba(255,255,255,.55)}
.svc-page .hud .cta:hover{background:#fff;color:#0a0a0b}

.svc-stage{position:relative;height:100svh;perspective:1150px;perspective-origin:50% 46%;overflow:hidden}
/* slot = carousel position (smooth); cover = the whole card tilting on hover (snappy) */
.svc-slot{position:absolute;left:50%;top:48%;width:min(42vmin,430px);aspect-ratio:1/1;
  transform:translate(-50%,-50%) translateX(var(--cx,0px)) translateY(var(--cty,0px)) translateZ(var(--ctz,0px)) scale(var(--csc,1)) rotateZ(var(--crz,0deg)) rotateY(var(--cry,0deg));
  transition:transform .8s var(--ease),opacity .6s var(--ease);backface-visibility:hidden;will-change:transform,opacity}
.svc-cover{position:relative;width:100%;height:100%;border-radius:16px;padding:clamp(22px,3vmin,32px);
  display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;color:#0a0a0b;
  background:linear-gradient(155deg,color-mix(in srgb,var(--c) 62%,#ffffff),var(--c));
  box-shadow:0 40px 90px rgba(0,0,0,.4);
  transition:box-shadow .45s var(--ease);backface-visibility:hidden;will-change:transform}
.svc-cover:hover{ box-shadow:0 60px 140px rgba(0,0,0,.55); }   /* transform (3D tilt + scale) is driven by rAF in fx.js */
@media (prefers-reduced-motion: reduce){ .svc-cover{transition:none} }
.svc-cover .no{font-family:var(--mono);font-size:13px;letter-spacing:.18em;font-weight:700;opacity:.7}
.svc-cover .ttl{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2rem,4.4vmin,3.3rem);line-height:.86;letter-spacing:.01em;margin-top:auto}
.svc-cover .dsc{font-family:var(--sans);font-weight:600;font-size:13.5px;line-height:1.4;max-width:26ch;margin-top:12px}
.svc-cover .badge{position:absolute;top:clamp(22px,3vmin,32px);right:clamp(22px,3vmin,32px);width:54px;height:54px;border-radius:50%;background:#0a0a0b;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:13px;text-transform:uppercase;transform:rotate(-8deg)}
/* per-discipline inked glyph in the badge (same ink-wobble style as the detail-page seals) */
.svc-cover .badge svg{width:27px;height:27px;overflow:visible;color:#fff}
.svc-cover.active{box-shadow:0 55px 130px rgba(0,0,0,.5)}

.svc-player{position:absolute;left:50%;bottom:6.5%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:14px;
  background:rgba(10,10,11,.82);backdrop-filter:blur(10px);border-radius:50px;padding:11px 13px 11px 22px;color:#fff;width:min(460px,88vw)}
.svc-player .pinfo{flex:1;min-width:0}
.svc-player .pinfo .pt{font-family:var(--sans);font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc-player .pinfo .ps{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--dim);margin-top:3px}
.svc-player .pbtn{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:background .3s}
.svc-player .pbtn:hover{background:rgba(255,255,255,.14)}
.svc-player .pgo{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:#fff;color:#0a0a0b;border-radius:50px;padding:11px 17px;white-space:nowrap;font-weight:700}
.svc-cap{position:absolute;left:0;right:0;top:clamp(84px,13vh,140px);text-align:center;z-index:20;font-family:var(--disp);font-size:clamp(30px,6vw,68px);line-height:1;letter-spacing:.012em;text-transform:uppercase;color:#fff;}
/* MOBILE COVER FLOW — resize the SLOT (not the cover) so the card stays centred under translate(-50%);
   the cover fills its slot at 100% as on desktop, and fx.js applies the phone-tuned fan geometry. */
@media(max-width:720px){
  .svc-stage{ perspective:900px; perspective-origin:50% 44%; }
  .svc-slot{ width:min(62vw,290px); top:46%; }
  .svc-cover{ border-radius:20px; padding:22px 22px 24px; }
  .svc-cover .ttl{ font-size:clamp(2.1rem,9.4vw,3rem); }
  .svc-cover .dsc{ font-size:13.5px; line-height:1.42; max-width:24ch; margin-top:11px; }
  .svc-cover .no{ font-size:12px; }
  .svc-cover .badge{ width:46px; height:46px; top:20px; right:20px; }
  .svc-cover .badge svg{ width:23px; height:23px; }
  .svc-cap{ top:clamp(96px,15vh,132px); font-size:clamp(26px,7.4vw,40px); }
  .svc-player{ bottom:calc(5% + env(safe-area-inset-bottom,0px)); padding:9px 11px 9px 20px; gap:11px; }
  .svc-player .pbtn{ width:36px; height:36px; }
}

/* ═══════════ page-transition iris (homepage → services) ═══════════ */
.iris-out{position:fixed;inset:0;z-index:9999;background:#0a0a0b;pointer-events:none;
  clip-path:circle(0px at var(--x,50%) var(--y,50%));
  transition:clip-path .6s cubic-bezier(.7,0,.3,1)}
.iris-out.go{clip-path:circle(150vmax at var(--x,50%) var(--y,50%))}
.iris{position:fixed;inset:0;z-index:9999;background:#0a0a0b;pointer-events:none}
@media (prefers-reduced-motion: reduce){ .iris-out,.iris{display:none} }

/* ═══════════ logo-mask opening reveal (homepage) ═══════════ */
.logo-reveal{position:fixed;inset:-40%;z-index:9999;pointer-events:none;overflow:hidden;
  /* inset:-40% makes this layer larger than the viewport so its rotating corners never enter frame
     (a viewport-sized rect rotated by SPIN exposes the dark page in the corner). transform-origin
     nudged to 47.8% so the swirl pivot stays at the same on-screen point as before. */
  transform-origin:50% 47.8%; transform:rotate(var(--lr,0deg)) scale(var(--lz,1.35)); opacity:var(--lo,1); will-change:transform,opacity;
  /* same idea as the Services rings: a few big bands, each a dark→bright gradient,
     the bright seam between bands IS the ring border (mix(uEdge,uCtr,fract(rr*freq))) */
  background:repeating-radial-gradient(circle at 50% 44%, #FF2E1F 0, #0d0406 34vw);
  -webkit-mask-image:linear-gradient(#fff,#fff), url("data:image/svg+xml,%3Csvg%20width%3D%22112%22%20height%3D%22116%22%20viewBox%3D%220%200%20112%20116%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M87.0267%2015.6754C87.1083%2015.7409%2087.1898%2015.8064%2087.2739%2015.8738C89.8845%2017.98%2092.3717%2020.3881%2094.3185%2023.1268C94.4216%2023.2682%2094.4216%2023.2682%2094.5269%2023.4126C97.2865%2027.2034%2099.2172%2031.3077%20100.501%2035.8099C100.558%2036.0016%20100.615%2036.1933%20100.675%2036.3908C101.782%2040.7885%20100.964%2045.6751%2098.7359%2049.5787C96.3342%2053.5669%2092.5618%2056.6368%2088.0313%2057.8346C83.2446%2059.0159%2078.1732%2058.4686%2073.9265%2055.9105C69.7331%2053.2508%2066.8478%2049.2866%2065.7367%2044.4429C64.8257%2039.8926%2065.6236%2035.619%2067.6878%2031.5294C67.3295%2031.2034%2067.1306%2031.0596%2066.6408%2031.0221C65.4675%2031.1386%2064.4106%2031.3877%2063.2989%2031.7771C63.1336%2031.8339%2062.9684%2031.8908%2062.7982%2031.9494C58.5404%2033.4475%2054.9511%2035.9304%2051.5191%2038.8222C51.4321%2038.8949%2051.3451%2038.9676%2051.2554%2039.0426C46.7537%2042.8096%2043.3533%2047.5189%2041.8497%2053.2493C41.7988%2053.4426%2041.7479%2053.6359%2041.6955%2053.8351C40.4978%2059.3507%2041.6493%2065.1086%2044.5444%2069.8959C44.9398%2070.5016%2045.363%2071.0735%2045.8125%2071.6398C45.9139%2071.7733%2046.0153%2071.9067%2046.1197%2072.0442C50.4817%2077.6215%2056.7891%2081.198%2063.7802%2082.1544C74.0097%2083.3268%2083.5352%2079.6607%2091.4652%2073.3838C91.6197%2073.2618%2091.7741%2073.1398%2091.9333%2073.014C94.2177%2071.1653%2096.3654%2069.046%2098.0934%2066.665C98.278%2066.4126%2098.4691%2066.165%2098.6603%2065.9175C102.338%2061.0892%20105.108%2054.7674%20105.381%2048.6535C105.415%2048.176%20105.415%2048.176%20105.573%2047.7004C105.678%2047.7004%20105.782%2047.7004%20105.89%2047.7004C106.121%2048.7612%20106.287%2049.8103%20106.382%2050.8916C106.402%2051.1163%20106.402%2051.1163%20106.423%2051.3455C106.565%2053.0857%20106.58%2054.8235%20106.574%2056.5687C106.573%2056.822%20106.573%2056.822%20106.573%2057.0804C106.565%2059.8995%20106.443%2062.662%20106.049%2065.4568C106.021%2065.6528%20105.994%2065.8488%20105.966%2066.0507C104.537%2076.032%20100.91%2085.8249%2094.007%2093.3251C93.7168%2093.6415%2093.4374%2093.9641%2093.1593%2094.2912C92.0128%2095.6058%2090.7502%2096.848%2089.4045%2097.9574C89.2849%2098.0565%2089.2849%2098.0565%2089.1628%2098.1576C78.4777%20106.977%2064.8136%20111.259%2050.9915%20110.043C45.8334%20109.497%2040.8862%20108.121%2036.1431%20106.043C36.03%20105.995%2035.917%20105.947%2035.8005%20105.897C32.4189%20104.456%2029.2189%20102.416%2026.3151%20100.177C26.1673%20100.064%2026.0196%2099.9509%2025.8674%2099.8345C25.4823%2099.5324%2025.1057%2099.2221%2024.7299%2098.9086C24.5818%2098.7897%2024.4336%2098.6707%2024.281%2098.5482C22.9372%2097.4501%2021.7082%2096.2377%2020.4797%2095.0145C20.3523%2094.8883%2020.3523%2094.8883%2020.2224%2094.7596C19.1141%2093.6596%2018.0863%2092.5292%2017.1211%2091.2987C17.032%2091.1873%2016.9428%2091.0758%2016.851%2090.9609C8.02559%2079.8844%203.96316%2065.6298%205.43059%2051.5549C5.51304%2050.8498%205.60716%2050.147%205.70799%2049.4443C5.72921%2049.2893%205.75044%2049.1343%205.77231%2048.9746C6.82213%2041.5064%209.67417%2034.0905%2013.9508%2027.883C14.0481%2027.7401%2014.0481%2027.7401%2014.1474%2027.5944C15.74%2025.2654%2017.5403%2023.095%2019.4989%2021.0658C19.5934%2020.9678%2019.6878%2020.8698%2019.7852%2020.7689C21.0048%2019.5114%2022.2411%2018.3423%2023.6203%2017.2608C23.8912%2017.0331%2024.162%2016.8052%2024.4327%2016.5771C32.3685%2010.1108%2042.3628%206.45374%2052.4702%205.37036C52.6664%205.34931%2052.8626%205.32826%2053.0647%205.30657C65.2218%204.27925%2077.5611%207.95653%2087.0267%2015.6754Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
          mask-image:linear-gradient(#fff,#fff), url("data:image/svg+xml,%3Csvg%20width%3D%22112%22%20height%3D%22116%22%20viewBox%3D%220%200%20112%20116%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M87.0267%2015.6754C87.1083%2015.7409%2087.1898%2015.8064%2087.2739%2015.8738C89.8845%2017.98%2092.3717%2020.3881%2094.3185%2023.1268C94.4216%2023.2682%2094.4216%2023.2682%2094.5269%2023.4126C97.2865%2027.2034%2099.2172%2031.3077%20100.501%2035.8099C100.558%2036.0016%20100.615%2036.1933%20100.675%2036.3908C101.782%2040.7885%20100.964%2045.6751%2098.7359%2049.5787C96.3342%2053.5669%2092.5618%2056.6368%2088.0313%2057.8346C83.2446%2059.0159%2078.1732%2058.4686%2073.9265%2055.9105C69.7331%2053.2508%2066.8478%2049.2866%2065.7367%2044.4429C64.8257%2039.8926%2065.6236%2035.619%2067.6878%2031.5294C67.3295%2031.2034%2067.1306%2031.0596%2066.6408%2031.0221C65.4675%2031.1386%2064.4106%2031.3877%2063.2989%2031.7771C63.1336%2031.8339%2062.9684%2031.8908%2062.7982%2031.9494C58.5404%2033.4475%2054.9511%2035.9304%2051.5191%2038.8222C51.4321%2038.8949%2051.3451%2038.9676%2051.2554%2039.0426C46.7537%2042.8096%2043.3533%2047.5189%2041.8497%2053.2493C41.7988%2053.4426%2041.7479%2053.6359%2041.6955%2053.8351C40.4978%2059.3507%2041.6493%2065.1086%2044.5444%2069.8959C44.9398%2070.5016%2045.363%2071.0735%2045.8125%2071.6398C45.9139%2071.7733%2046.0153%2071.9067%2046.1197%2072.0442C50.4817%2077.6215%2056.7891%2081.198%2063.7802%2082.1544C74.0097%2083.3268%2083.5352%2079.6607%2091.4652%2073.3838C91.6197%2073.2618%2091.7741%2073.1398%2091.9333%2073.014C94.2177%2071.1653%2096.3654%2069.046%2098.0934%2066.665C98.278%2066.4126%2098.4691%2066.165%2098.6603%2065.9175C102.338%2061.0892%20105.108%2054.7674%20105.381%2048.6535C105.415%2048.176%20105.415%2048.176%20105.573%2047.7004C105.678%2047.7004%20105.782%2047.7004%20105.89%2047.7004C106.121%2048.7612%20106.287%2049.8103%20106.382%2050.8916C106.402%2051.1163%20106.402%2051.1163%20106.423%2051.3455C106.565%2053.0857%20106.58%2054.8235%20106.574%2056.5687C106.573%2056.822%20106.573%2056.822%20106.573%2057.0804C106.565%2059.8995%20106.443%2062.662%20106.049%2065.4568C106.021%2065.6528%20105.994%2065.8488%20105.966%2066.0507C104.537%2076.032%20100.91%2085.8249%2094.007%2093.3251C93.7168%2093.6415%2093.4374%2093.9641%2093.1593%2094.2912C92.0128%2095.6058%2090.7502%2096.848%2089.4045%2097.9574C89.2849%2098.0565%2089.2849%2098.0565%2089.1628%2098.1576C78.4777%20106.977%2064.8136%20111.259%2050.9915%20110.043C45.8334%20109.497%2040.8862%20108.121%2036.1431%20106.043C36.03%20105.995%2035.917%20105.947%2035.8005%20105.897C32.4189%20104.456%2029.2189%20102.416%2026.3151%20100.177C26.1673%20100.064%2026.0196%2099.9509%2025.8674%2099.8345C25.4823%2099.5324%2025.1057%2099.2221%2024.7299%2098.9086C24.5818%2098.7897%2024.4336%2098.6707%2024.281%2098.5482C22.9372%2097.4501%2021.7082%2096.2377%2020.4797%2095.0145C20.3523%2094.8883%2020.3523%2094.8883%2020.2224%2094.7596C19.1141%2093.6596%2018.0863%2092.5292%2017.1211%2091.2987C17.032%2091.1873%2016.9428%2091.0758%2016.851%2090.9609C8.02559%2079.8844%203.96316%2065.6298%205.43059%2051.5549C5.51304%2050.8498%205.60716%2050.147%205.70799%2049.4443C5.72921%2049.2893%205.75044%2049.1343%205.77231%2048.9746C6.82213%2041.5064%209.67417%2034.0905%2013.9508%2027.883C14.0481%2027.7401%2014.0481%2027.7401%2014.1474%2027.5944C15.74%2025.2654%2017.5403%2023.095%2019.4989%2021.0658C19.5934%2020.9678%2019.6878%2020.8698%2019.7852%2020.7689C21.0048%2019.5114%2022.2411%2018.3423%2023.6203%2017.2608C23.8912%2017.0331%2024.162%2016.8052%2024.4327%2016.5771C32.3685%2010.1108%2042.3628%206.45374%2052.4702%205.37036C52.6664%205.34931%2052.8626%205.32826%2053.0647%205.30657C65.2218%204.27925%2077.5611%207.95653%2087.0267%2015.6754Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat:no-repeat,no-repeat; mask-repeat:no-repeat,no-repeat;
  -webkit-mask-position:center,center;     mask-position:center,center;
  -webkit-mask-size:cover, var(--lm,0px);  mask-size:cover, var(--lm,0px);
  -webkit-mask-composite:xor;              mask-composite:exclude;}
@media (prefers-reduced-motion: reduce){ .logo-reveal{display:none} }
/* mobile: the rings were centred at 50% 44% of the -40%-inset (1.8×) layer, but the swirl hole sits at the
   layer centre (50% 50%). On a tall phone that 6% gap throws the ripple origin well above the logo. Match them. */
@media (max-width:720px){
  .logo-reveal{ background:repeating-radial-gradient(circle at 50% 50%, #FF2E1F 0, #0d0406 44vw); }
}
html.revealing, html.revealing body{overflow:hidden}

/* ═══════════ 3D scene — glossy floating "lemon" orbs (animated 3D ambiance) ═══════════ */
.orb{position:absolute;width:var(--d,180px);height:var(--d,180px);will-change:transform,opacity}
.orb .orb-i{display:block;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #fff7d6 0%, #f6cf57 28%, #d49620 62%, #855417 100%);
  box-shadow:0 44px 80px rgba(0,0,0,.55), inset -14px -20px 40px rgba(54,28,2,.5), inset 12px 14px 28px rgba(255,255,255,.42);
  filter:blur(1.4px);
  animation:orbfloat var(--t,10s) ease-in-out var(--delay,0s) infinite;}
@keyframes orbfloat{0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}50%{transform:translate3d(0,-26px,0) rotate(3deg)}}
.v3 #motion .orb{ translate: calc(var(--mx,0) * -22px) calc(var(--my,0) * -15px); }
@media (prefers-reduced-motion: reduce){ .orb .orb-i{animation:none} }

/* Paid scene: dense field of real Google Ads cards behind the hero (smaller + a touch brighter than the default wall) */
#paid .wall img{width:clamp(150px,16vw,242px);filter:grayscale(.9) brightness(.66) contrast(.98)}

/* ignite is now a one-shot (active-scene driven), so transition the filter smoothly instead of scrubbing it per frame */
.cont #scenes .focus img,.cont #scenes .focus video{transition:filter .55s cubic-bezier(.16,1,.3,1)}



/* ═══════════ ignite button (U1) — outlined + filled arrow-cap; fill sweeps from the arrow on hover ═══════════ */
.btn{position:relative;display:inline-flex;align-items:stretch;border:1.7px solid var(--a1);border-radius:2px;
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--a1);background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;width:max-content}
.btn .bf{position:absolute;inset:0;background:var(--a1);transform:translateX(101%);transition:transform .42s var(--ease);z-index:0}
.btn .bl{padding:14px 19px;position:relative;z-index:1;transition:color .3s var(--ease)}
.btn .bc{display:flex;align-items:center;padding:0 15px;background:var(--a1);color:#0a0a0b;position:relative;z-index:1;font-size:15px;line-height:1}
.btn .bc .ar{display:block;transition:transform .3s var(--ease)}
.btn:hover .bf{transform:translateX(0)}
.btn:hover .bl{color:#0a0a0b}
.btn:hover .bc .ar{transform:translate(2px,-2px)}
.btn:focus-visible{outline:2px solid var(--a1);outline-offset:3px}
/* compact variant for the HUD */
.btn.sm{font-size:11px;letter-spacing:.13em}
.btn.sm .bl{padding:9px 13px}
.btn.sm .bc{padding:0 11px;font-size:13px}
/* under-scene CTA spacing */
.scene-cta{margin-top:clamp(22px,3.4vh,38px)}

/* ════════════════ THE CASE FILES — a filing drawer, one case open at a time ════════════════ */
/* NO GRID. A drawer of sealed file-spines down the left; pick one and it pulls out and
   CRACKS open into a full evidence board, flooded with that client's brand colour. Three
   states: SEALED (spine) → CRACKING (redaction wipes off) → OPEN (verdict slams, evidence
   spills). All content is real server-rendered DOM — JS only enhances. Transforms / opacity
   / clip-path only — NO animated blur. */
.cases-page{background:#08080a;position:fixed;inset:0;overflow:hidden}
.cases-page::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:62;
  background:radial-gradient(125% 100% at 50% 0%,transparent 58%,rgba(0,0,0,.55))}

.cf-cap{position:fixed;left:0;right:0;top:clamp(74px,10vh,108px);text-align:center;z-index:20;pointer-events:none;padding:0 16px}
.cf-cap .k{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.cf-cap h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(20px,3vw,36px);line-height:1;letter-spacing:.012em;color:#fff;margin-top:7px;}

/* ── layout: drawer (left) + board (right) ── */
.cf-wrap{position:fixed;left:0;right:0;bottom:clamp(18px,3.4vh,34px);top:clamp(138px,19vh,206px);
  display:grid;grid-template-columns:clamp(154px,16vw,212px) 1fr;gap:clamp(14px,2vw,30px);
  padding:0 clamp(16px,4vw,46px);z-index:10}

/* ── the DRAWER of sealed spines ── */
.cf-drawer{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0}
.cf-spine{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:clamp(40px,6.4vh,58px);
  border:0;cursor:pointer;text-align:left;padding:0 12px 0 18px;border-radius:0 7px 7px 0;overflow:hidden;
  background:linear-gradient(90deg,#1b1b1f,#141417);box-shadow:0 6px 16px rgba(0,0,0,.42);
  transform:translateX(-12px);transition:transform .5s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.cf-spine .sp-edge{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c);transition:width .4s var(--ease)}
.cf-spine .sp-no{font-family:var(--disp);font-size:15px;color:#7C7C77;letter-spacing:.02em;flex:none;transition:color .35s}
.cf-spine .sp-client{font-family:var(--sans);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#8c8c87;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .35s}
.cf-spine .sp-seal{margin-left:auto;font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#5d5d59;flex:none}
.cf-spine:hover{transform:translateX(-3px);background:linear-gradient(90deg,#222227,#17171b)}
.cf-spine:focus-visible{outline:none;transform:translateX(-3px);box-shadow:0 0 0 2px var(--c),0 6px 16px rgba(0,0,0,.42)}
.cf-spine.is-active{transform:translateX(8px);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 30%,#1b1b1f),#141417);
  box-shadow:0 12px 28px rgba(0,0,0,.5)}
.cf-spine.is-active .sp-edge{width:7px;box-shadow:0 0 14px color-mix(in srgb,var(--c) 70%,transparent)}
.cf-spine.is-active .sp-no,.cf-spine.is-active .sp-client{color:#fff}
.cf-spine.is-active .sp-seal{color:#0a0a0b;background:var(--c);padding:2px 5px;border-radius:2px}

/* ── the BOARD: all 8 cases live here (server-rendered); only the open one shows ── */
.cf-board{position:relative;min-width:0}
.cf-case{position:absolute;inset:0;opacity:0;pointer-events:none;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:#0b0b0d;transition:opacity .45s var(--ease);z-index:1}
.cf-case.is-open{opacity:1;pointer-events:auto;z-index:2}

/* the brand flood fill (mono → colour) */
.cf-fill{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .6s var(--ease) .12s;
  background:
    radial-gradient(125% 95% at 12% -6%,color-mix(in srgb,var(--c) 44%,#0b0b0d),#0b0b0d 60%),
    linear-gradient(160deg,color-mix(in srgb,var(--c2,var(--c)) 17%,transparent),transparent 56%);
  box-shadow:inset 7px 0 0 var(--c),inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.cf-case.is-open .cf-fill{opacity:1}

/* the sealed overlay that wipes off (the CRACK) */
.cf-seal{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(24px,2.8vw,44px);background:linear-gradient(155deg,#2b2920,#15140e);
  clip-path:inset(0 0 0 0);opacity:1;transition:clip-path .72s var(--ease),opacity .25s ease .5s}
.cf-case.is-open .cf-seal{clip-path:inset(0 0 0 100%);opacity:0}
.cf-seal .cs-no{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#6a5b3a}
.cf-seal .cs-bars{display:flex;flex-direction:column;gap:9px;margin:auto 0}
.cf-seal .cs-bars i{height:15px;border-radius:1px;background:repeating-linear-gradient(90deg,#19150b 0 16px,#0f0c06 16px 23px);display:block}
.cf-seal .cs-bars i:nth-child(2){width:82%}.cf-seal .cs-bars i:nth-child(3){width:64%}
.cf-seal .cs-stamp{align-self:flex-start;font-family:var(--disp);font-size:clamp(13px,1.4vw,18px);letter-spacing:.06em;text-transform:uppercase;
  color:#9b1a14;border:2.5px solid #9b1a14;border-radius:4px;padding:5px 11px;transform:rotate(-7deg);opacity:.92;
  transition:transform .5s var(--ease),opacity .4s var(--ease)}
.cf-case.is-open .cf-seal .cs-stamp{transform:rotate(-7deg) translateX(60px);opacity:0}
.cf-seal .cs-foot{display:flex;align-items:center;gap:11px}
.cf-seal .cs-seal-dot{width:20px;height:20px;border-radius:50%;background:var(--c);flex:none;box-shadow:inset 0 -3px 5px rgba(0,0,0,.4)}
.cf-seal .cs-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6a5b3a}

/* ── the OPEN evidence board ── */
.cf-inner{position:absolute;inset:0;z-index:3;overflow:auto;-webkit-overflow-scrolling:touch;padding:clamp(24px,2.8vw,44px)}
.cf-fhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px}
.cf-cno{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.cf-flogo{height:22px;width:auto;max-width:140px;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
.cf-fclient{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.05rem,2vw,1.6rem);color:#fff;letter-spacing:.01em}
.cf-fdisc{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);padding-left:12px;border-left:1px solid var(--line)}
.cf-unsealed{margin-left:auto;font-family:var(--disp);text-transform:uppercase;font-size:12px;letter-spacing:.04em;color:#0a0a0b;background:var(--c);border-radius:3px;padding:5px 10px;transform:rotate(-3deg);box-shadow:0 8px 20px rgba(0,0,0,.4)}

.cf-verdict{margin-top:clamp(16px,2.2vw,28px)}
.cf-vlabel{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--c)}
.cf-vtext{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.7rem,3.7vw,3.2rem);line-height:.95;color:#fff;margin-top:10px;max-width:22ch;text-shadow:none}
.cf-vtext em{color:var(--c);font-style:normal;text-shadow:0 0 34px color-mix(in srgb,var(--c) 55%,transparent)}

.cf-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(16px,2vw,28px);margin-top:clamp(18px,2.3vw,28px)}
@media(max-width:860px){.cf-cols{grid-template-columns:1fr}}
.cf-sec{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:10px;margin-bottom:13px}
.cf-sec::after{content:'';flex:1;height:1px;background:var(--line)}
.cf-exhibits-list{display:flex;flex-direction:column;gap:17px}
.cf-evidence-list{display:flex;flex-direction:column;gap:14px}

/* exhibits — labelled cards, slight rotation, a tape accent */
.cf-exhibit{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:3px;padding:15px 16px 14px;
  transform:rotate(var(--r,-1.2deg));transition:transform .35s var(--ease)}
.cf-exhibit:hover{transform:rotate(0)}
.cf-exhibit .cf-tape{position:absolute;top:-9px;left:24px;width:58px;height:18px;transform:rotate(-3deg);
  background:color-mix(in srgb,var(--c) 34%,rgba(231,231,236,.14));box-shadow:0 2px 6px rgba(0,0,0,.3)}
.cf-exhibit .ex-no{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:7px}
.cf-exhibit .stars{font-family:var(--mono);font-size:13px;color:var(--c);letter-spacing:.05em}
.cf-exhibit blockquote{font-size:14px;line-height:1.42;margin-top:7px;color:var(--ink);font-weight:500}
.cf-exhibit figcaption{display:flex;align-items:center;gap:8px;margin-top:10px}
.cf-exhibit figcaption img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.cf-exhibit figcaption span{font-family:var(--sans);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}

/* evidence — pinned screenshots */
.ev-shot{position:relative;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#000;
  box-shadow:0 22px 50px rgba(0,0,0,.55);transform:rotate(var(--rot,-1.4deg));transition:transform .4s var(--ease)}
.ev-shot:hover{transform:rotate(0) scale(1.012)}
.ev-shot img,.ev-shot video{width:100%;display:block}
.ev-shot .pin{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;
  background:var(--c);z-index:2;box-shadow:0 3px 8px rgba(0,0,0,.55),inset 0 -2px 3px rgba(0,0,0,.35),inset 0 2px 2px rgba(255,255,255,.4)}
.ev-shot .cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82))}

/* the brief + cta */
.cf-brief{margin-top:clamp(18px,2.3vw,26px);display:flex;gap:13px;align-items:baseline;font-size:14px;color:var(--dim);line-height:1.5;border-top:1px solid var(--line);padding-top:16px}
.cf-brief .cf-brief-l{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--c);flex:none;padding-top:2px}
.cf-cta{margin-top:18px}

/* ── the CRACK choreography (verdict SLAMS, then evidence spills) — opacity+transform only ── */
.cf-rise{opacity:0;transform:translateY(26px)}
.cf-case.is-open .cf-rise{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.cf-case.is-open .cf-fhead{transition-delay:.5s}
.cf-case.is-open .cf-verdict{transition-delay:.62s;transition-duration:.46s;transition-timing-function:cubic-bezier(.2,1.5,.32,1)} /* the SLAM */
.cf-case.is-open .cf-cols{transition-delay:.84s}
.cf-case.is-open .cf-brief{transition-delay:.98s}
.cf-case.is-open .cf-cta{transition-delay:1.06s}

/* ── boot helper: suppress the first crack until JS arms it (so it replays on load) ── */
.cf-arm .cf-case.is-open .cf-seal{clip-path:inset(0 0 0 0);opacity:1}
.cf-arm .cf-case.is-open .cf-seal .cs-stamp{transform:rotate(-7deg);opacity:.92}
.cf-arm .cf-case.is-open .cf-fill{opacity:0}
.cf-arm .cf-case.is-open .cf-rise{opacity:0;transform:translateY(26px)}

/* ── controls ── */
.cf-rail{position:fixed;left:50%;bottom:clamp(18px,3.4vh,34px);transform:translateX(-50%);z-index:31;display:flex;align-items:center;gap:14px;
  background:rgba(10,10,11,.82);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:50px;padding:9px 13px 9px 17px;width:min(440px,90vw)}
.cf-rail .rbtn{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font-size:15px;line-height:1;cursor:pointer;transition:background .3s,border-color .3s,opacity .3s}
.cf-rail .rbtn:hover{background:rgba(255,255,255,.13)}
.cf-rail .rbtn:disabled{opacity:.3;cursor:default}
.cf-rail .rinfo{flex:1;min-width:0;text-align:center}
.cf-rail .rinfo .rt{font-family:var(--sans);font-weight:700;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-rail .rinfo .rs{font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:var(--dim);margin-top:2px}

@media(max-width:760px){
  .cf-wrap{grid-template-columns:1fr;top:clamp(120px,17vh,180px);bottom:96px;gap:10px}
  .cf-drawer{flex-direction:row;justify-content:flex-start;overflow-x:auto;gap:8px;
    position:fixed;left:0;right:0;bottom:74px;top:auto;height:auto;padding:0 14px 6px;z-index:30}
  .cf-spine{width:auto;min-width:128px;height:42px;transform:none;border-radius:7px}
  .cf-spine.is-active{transform:translateY(-3px)}
  .cf-board{min-height:0}
  .cf-cap h1{font-size:22px}
}

@media (prefers-reduced-motion: reduce){
  .cf-case,.cf-fill,.cf-seal,.cf-rise,.cf-spine{transition:none}
  .cf-case.is-open .cf-seal{display:none}   /* serve the open layout statically */
  .cf-case.is-open .cf-fill{opacity:1}
  .cf-case.is-open .cf-rise{opacity:1;transform:none}
}

/* ════════════════ THE RECEIPTS (alternative case index) — a thermal printer ════════════════ */
/* Proof = receipts. Pick a client and the case PRINTS down a narrow column, top-down, mono
   ink. Only the RESULT line ignites in brand colour. Paper is mono; colour = the result,
   nothing else. Server-rendered (crawlable). Transforms / opacity / clip-path only — no
   animated blur. */
.receipts-page{background:#070708;position:fixed;inset:0;overflow:hidden}
.receipts-page::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:62;
  background:radial-gradient(125% 100% at 50% 0%,transparent 54%,rgba(0,0,0,.62))}

.rc-cap{position:fixed;left:0;right:0;top:clamp(74px,10vh,108px);text-align:center;z-index:20;pointer-events:none;padding:0 16px}
.rc-cap .k{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.rc-cap h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(20px,3vw,36px);line-height:1;letter-spacing:.012em;color:#fff;margin-top:7px;}

/* the stage: machine (top) → scrollable paper → register (bottom) */
.rc-stage{position:fixed;left:0;right:0;top:clamp(132px,18vh,196px);bottom:clamp(92px,14vh,128px);
  display:flex;flex-direction:column;align-items:center;z-index:10}

/* the printer mouth */
.rc-machine{position:relative;flex:none;width:clamp(320px,33vw,400px);height:30px;border-radius:9px 9px 3px 3px;
  background:linear-gradient(#26262c,#15151a);box-shadow:0 12px 28px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;z-index:2}
.rc-machine::after{content:'';position:absolute;bottom:5px;left:20px;right:20px;height:4px;border-radius:3px;
  background:#000;box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.05)}
.rc-led{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;
  background:var(--c,#48d18a);box-shadow:0 0 9px var(--c,#48d18a);animation:rcblink 1.6s steps(1) infinite}
@keyframes rcblink{0%,60%{opacity:1}61%,100%{opacity:.25}}
.rc-ready{font-family:var(--sans);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#8c8c87}

/* the scroll area + paper column */
.rc-scroll{width:100%;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;justify-content:center;padding-bottom:30px}
.rc-paper-col{position:relative;width:clamp(296px,32vw,374px);margin-top:-2px}

/* a receipt — only the active one is in flow + visible (others stay in DOM, crawlable) */
.rc-receipt{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none;
  transform:translateY(-14px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.rc-receipt.is-active{position:relative;opacity:1;pointer-events:auto;transform:none;
  animation:rcfeed 1.05s steps(20) both}
@keyframes rcfeed{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rcjit{0%{transform:translateY(0)}34%{transform:translateY(-1.4px)}67%{transform:translateY(.7px)}100%{transform:translateY(0)}}

.rc-paper{position:relative;background:linear-gradient(#f5f0e4,#e9e1cf);color:#16140e;font-family:var(--mono);
  padding:24px 24px 28px;box-shadow:0 30px 70px rgba(0,0,0,.62);text-align:center}
.rc-receipt.is-active .rc-paper{animation:rcjit .13s steps(2) 0s 8}
/* torn perforation edges (static, baked) — dark teeth bite into the cream */
.rc-paper::before,.rc-paper::after{content:'';position:absolute;left:0;right:0;height:9px;z-index:2;
  background:linear-gradient(45deg,transparent 50%,#070708 50%) 0 0/12px 12px repeat-x,
             linear-gradient(-45deg,transparent 50%,#070708 50%) 6px 0/12px 12px repeat-x}
.rc-paper::before{top:-1px;transform:scaleY(-1)}
.rc-paper::after{bottom:-1px}

.rc-h{margin-top:4px}
.rc-brand{font-family:var(--disp);font-size:21px;letter-spacing:.32em;text-transform:uppercase;color:#16140e}
.rc-dept{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#5a5340;margin-top:5px}
.rc-rule{height:0;border-top:1px dashed #00000040;margin:15px 0}
.rc-rule.double{border-top-style:double;border-top-width:3px}
.rc-meta,.rc-items{text-align:left;display:flex;flex-direction:column;gap:8px}
.rc-line{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#332f22}
.rc-line>span:first-child{color:#5a5340}
.rc-line .dots{flex:1;border-bottom:1px dotted #00000055;transform:translateY(-3px)}
.rc-line>span:last-child{color:#16140e;font-weight:700;white-space:nowrap}

/* THE RESULT — the one line that ignites */
.rc-result{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0 4px}
.rc-result .rl-label{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#5a5340}
.rc-result .rl-value{font-family:var(--disp);text-transform:uppercase;line-height:.92;font-size:clamp(2.1rem,7vw,2.9rem);
  letter-spacing:.01em;color:var(--c);text-shadow:0 0 26px color-mix(in srgb,var(--c) 45%,transparent)}

.rc-quote{font-family:var(--sans);font-size:12px;line-height:1.5;color:#332f22;font-style:italic}
.rc-quote cite{display:block;font-style:normal;color:#5a5340;margin-top:6px;font-size:10.5px;letter-spacing:.06em}

.rc-barcode{height:46px;margin:16px 0 12px;
  background:repeating-linear-gradient(90deg,#16140e 0 2px,transparent 2px 4px,#16140e 4px 7px,transparent 7px 9px,#16140e 9px 10px,transparent 10px 13px,#16140e 13px 16px,transparent 16px 18px)}
.rc-cta{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#16140e;font-weight:700;border-bottom:2px solid #16140e;padding-bottom:2px;transition:gap .3s}
.rc-cta:hover{color:#000}
.rc-foot{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#5a5340;margin-top:16px}

/* the register selector (keypad) */
.rc-register{position:fixed;left:50%;bottom:clamp(18px,3vh,30px);transform:translateX(-50%);z-index:30;
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:min(780px,94vw);
  background:rgba(12,12,13,.82);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:10px}
.rc-key{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:66px;cursor:pointer;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
  background:linear-gradient(#1d1d21,#141417);border:1px solid var(--line);border-radius:7px;padding:9px 10px;
  box-shadow:0 3px 0 #0b0b0d,0 6px 12px rgba(0,0,0,.4);transition:transform .12s var(--ease),box-shadow .12s var(--ease),color .25s,border-color .25s}
.rc-key .kn{font-family:var(--disp);font-size:13px;color:#7a7a75;transition:color .25s}
.rc-key:hover{color:#fff;border-color:color-mix(in srgb,var(--c) 50%,var(--line))}
.rc-key:focus-visible{outline:none;border-color:var(--c);box-shadow:0 0 0 2px var(--c),0 3px 0 #0b0b0d}
.rc-key:active{transform:translateY(3px);box-shadow:0 0 0 #0b0b0d,0 3px 8px rgba(0,0,0,.4)}
.rc-key.is-active{color:#0a0a0b;background:var(--c);border-color:var(--c);box-shadow:0 3px 0 color-mix(in srgb,var(--c) 55%,#000),0 6px 14px rgba(0,0,0,.45)}
.rc-key.is-active .kn{color:#0a0a0b}
@media(max-width:560px){.rc-key{min-width:0;padding:8px;gap:2px}.rc-key .kc{display:none}}

@media (prefers-reduced-motion: reduce){
  .rc-receipt,.rc-receipt.is-active,.rc-receipt.is-active .rc-paper{animation:none;transition:none}
  .rc-led{animation:none}
}

/* ════════════════ THE CASES — editorial scroll (Option C) ════════════════ */
/* Proof wants to be SEEN, not unlocked. A native scroll of BIG editorial cards, two across
   max, masonry rhythm with full-bleed flagship/breaks. Work imagery shown in colour (it's
   the proof); chrome is mono; the verdict ignites in the client's brand colour as it enters
   view. Real <article> per case (crawlable, the SEO play). Transforms/opacity/clip-path only. */
.editorial-page{background:#0a0a0b}
.ed-head{max-width:1240px;margin:0 auto;padding:clamp(120px,18vh,200px) clamp(18px,4vw,46px) clamp(18px,3.4vh,34px);text-align:center}
.ed-head .k{font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.ed-head h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2.8rem,8vw,6.4rem);line-height:.9;letter-spacing:.006em;margin-top:15px;color:#fff}
.ed-head h1 .ig{color:var(--a1)}
.ed-head .ed-intro{margin:18px auto 0;font-size:clamp(1rem,1.5vw,1.22rem);color:var(--dim);max-width:52ch;line-height:1.5}

.ed-feed{max-width:1240px;margin:0 auto;padding:clamp(20px,3vh,40px) clamp(18px,4vw,46px) clamp(40px,7vh,90px);display:flex;flex-direction:column;gap:clamp(22px,3.2vw,46px)}
.ed-row{display:grid;gap:clamp(18px,2.4vw,34px)}
.ed-row.pair{grid-template-columns:1fr 1fr;align-items:start}
.ed-row.full{grid-template-columns:1fr}
@media(max-width:760px){.ed-row.pair{grid-template-columns:1fr}}

/* a case card — reveals + ignites on entry */
.ed-card{position:relative;opacity:0;transform:translateY(42px);clip-path:inset(0 0 7% 0);
  transition:opacity .7s var(--ease),transform .7s var(--ease),clip-path .7s var(--ease);will-change:transform,opacity}
.ed-card.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.ed-row.pair .ed-card:nth-child(2).in{transition-delay:.09s}
.ed-link{display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;overflow:hidden;color:var(--ink);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.ed-card:hover .ed-link{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:0 32px 72px rgba(0,0,0,.52)}
.ed-card:focus-within .ed-link{border-color:var(--c);box-shadow:0 0 0 2px var(--c)}

/* work image — LIT, full colour (it's the proof, never gray mush) */
.ed-shot{position:relative;overflow:hidden;aspect-ratio:16/10;background:#000}
.ed-shot img,.ed-shot video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--ease)}
.ed-card:hover .ed-shot img,.ed-card:hover .ed-shot video{transform:scale(1.03)}
.ed-shot .ed-stamp{position:absolute;left:14px;bottom:14px;z-index:2;font-family:var(--disp);text-transform:uppercase;line-height:1;
  font-size:clamp(12px,1.3vw,17px);letter-spacing:.03em;color:#0a0a0b;background:var(--c);padding:6px 11px;border-radius:3px;transform:rotate(-3deg);box-shadow:0 8px 22px rgba(0,0,0,.45)}

.ed-body{padding:clamp(20px,2.2vw,32px);display:flex;flex-direction:column}
.ed-meta{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.ed-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.ed-client{font-family:var(--disp);text-transform:uppercase;font-size:clamp(.95rem,1.6vw,1.25rem);color:#fff;letter-spacing:.01em}
.ed-disc{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-left:11px;border-left:1px solid var(--line)}

/* THE VERDICT — ignites mono → brand colour on entry */
.ed-verdict{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.5rem,2.7vw,2.4rem);line-height:.98;letter-spacing:.008em;
  margin-top:14px;max-width:20ch;color:#7C7C77;transition:color .75s var(--ease)}
.ed-card.in .ed-verdict{color:var(--c)}
.ed-verdict em{font-style:normal}
.ed-accent{display:block;height:3px;width:62px;background:var(--c);margin-top:14px;transform:scaleX(0);transform-origin:left;transition:transform .75s var(--ease) .12s}
.ed-card.in .ed-accent{transform:scaleX(1)}

.ed-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:auto;padding-top:20px;flex-wrap:wrap}
.ed-stat{display:flex;flex-direction:column}
.ed-stat .n{font-family:var(--disp);font-size:clamp(1.6rem,2.4vw,2.2rem);color:#fff;line-height:.88}
.ed-stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:7px}
.ed-cta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c);display:inline-flex;gap:7px;align-items:center;white-space:nowrap}
.ed-cta .ar{transition:transform .4s var(--ease)}
.ed-card:hover .ed-cta .ar{transform:translate(3px,-3px)}
.ed-quote{font-size:13.5px;line-height:1.5;color:var(--dim);margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.ed-quote cite{display:block;color:var(--faint);margin-top:6px;font-family:var(--sans);font-size:10px;letter-spacing:.06em;font-style:normal}

/* flagship (full-bleed, horizontal) + full-width break rows */
.ed-card.flagship .ed-link,.ed-row.full .ed-card .ed-link{display:grid;grid-template-columns:1.12fr .88fr;align-items:stretch}
.ed-card.flagship .ed-shot,.ed-row.full .ed-card .ed-shot{aspect-ratio:auto;min-height:clamp(280px,44vh,470px)}
.ed-card.flagship .ed-body,.ed-row.full .ed-card .ed-body{justify-content:center;padding:clamp(28px,3.2vw,52px)}
.ed-card.flagship .ed-verdict{font-size:clamp(2rem,4.2vw,3.7rem);max-width:16ch}
.ed-row.full .ed-card .ed-verdict{font-size:clamp(1.8rem,3.4vw,3rem)}
.ed-row.full .ed-card .ed-shot{order:2}   /* break rows mirror: image on the right */
@media(max-width:760px){
  .ed-card.flagship .ed-link,.ed-row.full .ed-card .ed-link{grid-template-columns:1fr}
  .ed-row.full .ed-card .ed-shot{order:0}
  .ed-card.flagship .ed-shot,.ed-row.full .ed-card .ed-shot{min-height:230px}
}

/* foot — we rest our case */
.ed-close{text-align:center;padding:clamp(50px,9vh,110px) 20px clamp(70px,12vh,140px);display:flex;flex-direction:column;align-items:center;gap:clamp(22px,4vh,40px)}
.ed-close h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2.4rem,7vw,5.6rem);line-height:.9;color:#fff}
.ed-close h2 em{color:var(--a1);font-style:normal}
.ed-close .cta-big{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;background:var(--a1);color:#0a0a0b;padding:18px 34px;border-radius:50px;font-weight:700;transition:transform .3s var(--ease)}
.ed-close .cta-big:hover{transform:scale(1.04)}

@media (prefers-reduced-motion: reduce){
  .ed-card{opacity:1;transform:none;clip-path:none;transition:none}
  .ed-verdict{color:var(--c)}
  .ed-accent{transform:scaleX(1)}
  .ed-shot img,.ed-shot video{transition:none}
}

/* (The cross-page hole/portal transition was removed — separate HTML pages can only transition via frozen
   snapshots, so the rings couldn't animate live during it. Navigating to services is now a plain load and the
   services page's own rings simply grow in on load, live. The .vt-backdrop element stays as a plain dark bg.) */