/* ==========================================================================
   Deskman Studio — main.css
   Flat colour-blocking. Electric green dominant, violet secondary, coral sparing.
   No gradients, no grain. Depth = rotation + hairline borders only.
   Palette is frozen here on purpose (no editable accent option).
   ========================================================================== */

:root{
  /* neutrals */
  --neutral-200:#F4F4F4; --neutral-300:#EAEAEA; --neutral-400:#E1E1E1;
  --neutral-450:#D8D8D8; --neutral-500:#817F7F; --neutral-600:#312E2E;
  --neutral-700:#2A2727; --neutral-800:#201D1D;
  /* brand accents */
  --electric:#A1FF62; --violet:#6840FF; --coral:#F84131;
  /* roles */
  --ink:var(--neutral-800); --paper:var(--neutral-200); --muted:var(--neutral-500);
  --line:var(--neutral-400); --line-2:var(--neutral-450); --panel:var(--neutral-700);
  /* structure */
  --stroke:1px; --radius-tight:2px; --radius-soft:1em; --radius-pill:999px;
  /* type */
  --font-display:"Bricolage Grotesque",Arial,sans-serif;
  --font-body:"Plus Jakarta Sans",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-script:"Caveat",cursive;
  /* ---- spacing scale --------------------------------------------------
     These were em, which is why nothing on the interior pages sat on a grid:
     an em token resolves against whatever font-size the element it lands on
     happens to carry, so --gap-m was 22.5px in one place and 30px in another
     and 21px on a phone. Fixed pixels instead — every step a whole multiple
     of 8, identical on mobile and desktop, and immune to the root font-size
     dropping to 14px at the narrow breakpoint.

     Some steps collapse onto the same value: the old scale had eight gap
     sizes spanning 7.5px to 37.5px, which is finer than an 8px grid can
     express. The names are all kept so no rule has to change. */
  --sp-8:8px;   --sp-16:16px; --sp-24:24px; --sp-32:32px;  --sp-40:40px;
  --sp-48:48px; --sp-56:56px; --sp-64:64px; --sp-72:72px;  --sp-80:80px;
  --sp-112:112px; --sp-152:152px; --sp-184:184px;

  --gap-xxs:var(--sp-8);  --gap-xs:var(--sp-8);   --gap-s:var(--sp-16);
  --gap-sm:var(--sp-16);  --gap-m:var(--sp-24);   --gap-l:var(--sp-32);
  --gap-xl:var(--sp-32);  --gap-xxl:var(--sp-40);
  --pad-xs:var(--sp-56);  --pad-s:var(--sp-72);   --pad-m:var(--sp-112);
  --pad-l:var(--sp-152);  --pad-xl:var(--sp-184);
  --content-max:60em; --container-pad:var(--sp-24);
  /* Header metrics. The nav itself is drawn by assets/css/nav.css from its own
     --dskn-* tokens; these three exist only so the heroes below can pad clear
     of it, and they are tuned to sum to the same 6rem as nav.css's
     --dskn-block. Change the height there, change these. */
  /* Header metrics, in px to match assets/css/nav.css. The nav itself is drawn
     there from its own --dskn-* tokens; these three exist only so the heroes
     below can pad clear of it, and they must sum to nav.css's --dskn-block
     (96px). px rather than rem because this stylesheet sets html{font-size:15px}
     while the nav is sized against a 16px baseline — in rem these would come
     out 90px and every interior hero would sit 6px under the ticker. */
  --nav-h:56px; --ticker-h:24px; --nav-top:16px;
  --btn-h:40px; --input-h:48px;
  /* hero arc: only the strip height lives here. Radius, card spacing and
     the vertical anchor are all derived in main.js from the measured card,
     so there is no second source of truth to drift out of sync. */
  --arc-h:512px;
  /* the one signature curve (also created in JS as "deskman-ease") */
  --ease:cubic-bezier(.625,.05,0,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:15px; -webkit-text-size-adjust:100%; }
@media (max-width:640px){ html{ font-size:14px; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-weight:400; line-height:1.5;
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{ margin:0; font-family:var(--font-display); font-weight:700; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--electric); color:var(--ink); }
:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:var(--radius-tight); }

.wrap{ width:100%; max-width:calc(var(--content-max) + 20em); margin-inline:auto; padding-inline:var(--container-pad); }
.eyebrow, .mono{ font-family:var(--font-mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.eyebrow{ display:inline-flex; align-items:center; gap:.6em; margin:0 0 var(--gap-m); }
.eyebrow .sp{ width:8px; height:8px; background:var(--electric); border-radius:50%; display:inline-block; }
.serif{ font-family:var(--font-display); }
.script{ font-family:var(--font-script); color:var(--coral); font-weight:700; }

/* ---------- reveal gating: only hide when JS+GSAP confirmed & motion allowed ---------- */
html.anim .fade{ opacity:0; transform:translateY(26px); }
html.anim .reveal > span{ display:block; overflow:clip; }
@media (prefers-reduced-motion:reduce){
  html.anim .fade{ opacity:1 !important; transform:none !important; }
}

/* ---------- drag-hint cursor bubble ---------- */
.cursor-bubble{
  position:fixed; top:0; left:0; width:4em; height:4em; border-radius:50%;
  background:var(--neutral-200); color:var(--ink); display:grid; place-items:center;
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  border:var(--stroke) solid var(--ink); pointer-events:none; z-index:120;
  transform:translate(-50%,-50%) scale(0); opacity:0; will-change:transform;
}
.cursor-bubble.on{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor-bubble{ display:none; } }

/* NAV, TICKER and MEGA MENU moved to assets/css/nav.css, which loads on every
   page. They used to be defined here AND again in home.css with different
   class names and a different scroll class, which is why the header looked
   different on the home page than on the interior pages. */

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5em; height:var(--btn-h);
  padding-inline:1.25em; font-weight:500; font-size:1.02em; letter-spacing:-.02em;
  border-radius:var(--radius-tight); border:var(--stroke) solid transparent;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn .ar{ transition:transform .2s var(--ease); }
.btn:hover .ar{ transform:translateX(3px); }
.btn.solid{ background:var(--electric); color:var(--ink); border-color:var(--ink); }
.btn.solid:hover{ transform:translateY(-2px); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--ink);
  border-radius:var(--radius-pill); }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); }
.btn.sm{ height:32px; font-size:.95em; }
.tag-pill{ display:inline-flex; align-items:center; height:32px; padding-inline:.9em;
  border:var(--stroke) solid var(--line-2); border-radius:var(--radius-pill);
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }

/* ==========================================================================
   HERO — centred headline, chip sub-line, arc marquee
   ========================================================================== */
.hero{ position:relative; overflow:hidden; text-align:center;
  padding:calc(var(--nav-top) + var(--nav-h) + var(--ticker-h) + var(--pad-xs)) 0 0; }
.hero .wrap{ position:relative; z-index:2; max-width:100%; }
.hero .eyebrow{ margin-bottom:var(--gap-m); }

/* faint plumb line — gives the arc something to hang off, echoes the ticks */
.hero-rules{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-rules::before{ content:""; position:absolute; left:50%; top:0; bottom:0;
  width:1px; background:var(--line); }

.hero-title{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  /* 78rem would have been only 1170px at this root size — a px cap keeps the
     headline on one line on desktop instead of breaking it in two */
  gap:0 .24em; max-width:min(96vw, 1700px);
  /* rem, not em: --gap-* are em-based and this element's em is ~100px, which
     is what put a 170px hole under the headline in the first build */
  margin:0 auto 32px;
  font-weight:500; font-size:clamp(2.4rem,5.4vw,6.6rem); line-height:1.02;
  letter-spacing:-.035em;
}
/* each word is its own clip mask so main.js can slide it up from underneath;
   the padding/negative-margin pair keeps descenders from being sliced off */
.hero-title .w, .hero-title .glyph{ display:inline-block; overflow:clip;
  padding-bottom:.14em; margin-bottom:-.14em; }
.hero-title .w > i, .hero-title .glyph > i{ display:block; font-style:normal; }
.hero-title .glyph{ color:var(--violet); font-size:.78em; }
.hero-title .glyph > i{ transform-origin:50% 54%; }
html.anim .hero-title .glyph > i{ animation:dsk-glyph 20s linear infinite; }
@keyframes dsk-glyph{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ html.anim .hero-title .glyph > i{ animation:none; } }

.hero-sub{ max-width:46ch; margin:0 auto 32px; color:var(--neutral-600);
  font-size:clamp(1rem,1.35vw,1.14em); line-height:1.7; }
.chip{ display:inline-block; padding:.08em .5em; margin-inline:.05em;
  background:var(--neutral-300); border-radius:.45em;
  color:var(--ink); font-weight:400; white-space:nowrap; }
.hero .actions{ display:flex; flex-wrap:wrap; gap:var(--gap-s); justify-content:center; }

/* ---------- arc marquee ----------------------------------------------------
   Default state is a plain wrapped row of cards: readable with no JS, nothing
   hidden. main.js measures that row, then adds .is-arc and writes ONE
   transform per card per frame:

     translate(-50%,-50%) translate(x,y) rotate(angle)

   x and y are plain pixels off the top-centre of the strip, so the card is an
   ordinary sized element with an ordinary anchor. The first build instead hung
   zero-size items off a hub parked --arc-r below the strip and centred the
   card inside them with a second absolute layer; the tick marks landed
   correctly but the cards themselves did not survive it. There is now no hub
   offset, no nested absolute layer, and no radius shared between CSS and JS.
   ------------------------------------------------------------------------- */
.arc{ position:relative; margin-top:var(--gap-xxl); }
.arc-hub{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap-m);
  padding-inline:var(--container-pad); }
.arc.is-arc{ height:var(--arc-h); overflow:hidden; cursor:grab; }
.arc.is-arc .arc-hub{ display:block; height:0; padding:0; }
.arc.is-arc .arc-item{ position:absolute; left:50%; top:0; will-change:transform, opacity; }
/* the tick hangs off the card itself, so it follows the card's rotation and
   needs no hand-tuned offset per breakpoint */
.arc.is-arc .arc-item::after{ content:""; position:absolute; left:50%; top:100%;
  width:1px; height:.9em; margin-top:1.5em; background:var(--line-2); }
.arc.is-grab{ cursor:grabbing; }

.acard{ width:23em; flex:0 0 auto; background:var(--neutral-800); color:var(--paper);
  border:var(--stroke) solid var(--ink); border-radius:.9em; padding:.5em .5em 0;
  box-shadow:0 30px 60px -34px rgba(32,29,29,.75); }
.ac-screen{ aspect-ratio:16/10; border-radius:.5em; overflow:hidden; padding:1.1em;
  background:#fff; color:var(--ink); display:flex; flex-direction:column; gap:.45em; }
.ac-screen img{ width:100%; height:100%; object-fit:cover; }
.acard.tint-electric .ac-screen{ background:var(--electric); }
.acard.tint-violet   .ac-screen{ background:var(--violet); color:#fff; }
.acard.tint-ink      .ac-screen{ background:var(--neutral-700); color:var(--paper); }
/* caption sits in the bezel chin, sentence case, like the reference */
.ac-cap{ font-family:var(--font-body); font-size:.86em; font-weight:500;
  letter-spacing:-.01em; color:rgba(244,244,244,.92);
  padding:.85em .7em .95em; text-align:left; }

/* screen furniture — the CSS stand-ins used until a real screenshot is set */
.ac-type{ font-family:var(--font-display); font-weight:700; font-size:1.6em; line-height:1.02;
  letter-spacing:-.03em; text-align:left; }
.ac-type.sm{ font-size:1.2em; }
.ac-mono{ font-family:var(--font-mono); font-size:9px; text-transform:uppercase;
  letter-spacing:.09em; opacity:.62; text-align:left; }
.ac-bar{ display:block; height:.5em; border-radius:var(--radius-tight);
  background:currentColor; opacity:.16; }
.ac-bar.short{ width:52%; }
.ac-bar.sp{ background:var(--violet); opacity:1; width:66%; }
.acard.tint-violet .ac-bar.sp{ background:var(--electric); }
.ac-metric{ font-family:var(--font-display); font-weight:800; font-size:2.8em; line-height:1;
  letter-spacing:-.04em; margin-top:auto; text-align:left; }
.ac-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:.3em; flex:1; }
.ac-grid i{ background:currentColor; opacity:.12; border-radius:2px; }
.ac-chart{ display:flex; align-items:flex-end; gap:.35em; flex:1; }
.ac-chart i{ flex:1; background:currentColor; opacity:.2; border-radius:2px 2px 0 0; }
.ac-chart i:last-child{ background:var(--violet); opacity:1; }
.acard.tint-violet .ac-chart i:last-child{ background:var(--electric); }
.ac-bbar{ display:flex; gap:8px; }
.ac-bbar i{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.28; }

/* ==========================================================================
   INTRO BAND
   ========================================================================== */
.intro{ padding:var(--pad-s) 0; border-top:var(--stroke) solid var(--line); }
.intro .wrap{ display:grid; grid-template-columns:auto 1fr; gap:var(--gap-xxl); align-items:start; }
.intro .intro-text{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,3.4vw,2.4rem);
  line-height:1.18; letter-spacing:-.02em; max-width:20ch; }

/* ==========================================================================
   SPLIT — team / recent work
   ========================================================================== */
.split{ padding:var(--pad-xs) 0; }
.split .wrap{ display:grid; grid-template-columns:1fr 1.25fr; gap:var(--gap-m); }
.split-card{ border-radius:var(--radius-soft); padding:var(--gap-xl); min-height:22em;
  display:flex; flex-direction:column; }
.split-card.team{ background:var(--violet); color:#fff; }
.split-card.team .st-photo{ flex:1; border-radius:var(--radius-soft); background:var(--neutral-700);
  border:var(--stroke) solid rgba(255,255,255,.15); margin-bottom:var(--gap-m); display:grid; place-items:center; }
.split-card.team .st-photo span{ font-family:var(--font-script); font-size:2.2em; color:var(--electric); }
.split-card.team h3{ font-size:1.8em; letter-spacing:-.02em; }
.split-card.team p{ color:rgba(255,255,255,.82); margin:.5em 0 var(--gap-m); }
.split-card.team .link{ font-weight:600; display:inline-flex; align-items:center; gap:.4em; color:var(--electric); }
.split-card.workp{ background:var(--panel); color:var(--paper); }
.split-card.workp .eyebrow{ color:var(--electric); }
.split-card.workp .eyebrow .sp{ background:var(--electric); }
.split-card.workp .browser{ flex:1; background:var(--neutral-800); border:var(--stroke) solid rgba(255,255,255,.12);
  border-radius:var(--radius-soft); overflow:hidden; margin-top:var(--gap-m); }

/* browser frame (shared by split + project mock) */
.bframe-bar{ display:flex; align-items:center; gap:8px; padding:.7em .9em; border-bottom:var(--stroke) solid rgba(255,255,255,.1); }
.bframe-bar i{ width:9px; height:9px; border-radius:50%; background:var(--neutral-600); }
.bframe-bar .u{ margin-left:.6em; font-family:var(--font-mono); font-size:10px; color:var(--muted); }
.bframe-body{ padding:var(--gap-m); }
.bframe-body .bh{ font-family:var(--font-display); font-weight:700; font-size:1.6em; line-height:1.05;
  letter-spacing:-.02em; color:var(--paper); margin-bottom:var(--gap-s); }
.bframe-body .brow{ display:flex; gap:.5em; }
.bframe-body .brow i{ height:.6em; border-radius:var(--radius-tight); background:var(--neutral-600); flex:0 0 auto; }
.bframe-body .brow i.sp{ background:var(--electric); }

/* ==========================================================================
   SERVICES — plain-text feature list
   ========================================================================== */
.services{ padding:var(--pad-s) 0; border-top:var(--stroke) solid var(--line); }
.services .head{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--gap-m); margin-bottom:var(--gap-xxl); flex-wrap:wrap; }
.services h2{ font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:-.02em; }
.services .head p{ max-width:40ch; color:var(--neutral-600); }
.srow{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--gap-m); align-items:baseline;
  padding:var(--gap-l) 0; border-top:var(--stroke) solid var(--line);
  transition:padding-left .3s var(--ease); }
.srow:last-child{ border-bottom:var(--stroke) solid var(--line); }
.srow:hover{ padding-left:.6em; }
.srow .idx{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.srow .s-main h3{ font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.01em; }
.srow .s-main p{ color:var(--neutral-600); max-width:52ch; margin-top:.4em; }
.srow .s-note{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); text-align:right; white-space:nowrap; }
.srow:hover .s-main h3{ color:var(--violet); }

/* ==========================================================================
   WORK WHEEL — drag-to-rotate semicircle
   ========================================================================== */
.workwheel{ padding:var(--pad-s) 0 0; border-top:var(--stroke) solid var(--line); text-align:center; }
.workwheel .head{ margin-bottom:var(--gap-xl); }
.workwheel h2{ font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:-.02em; }
.workwheel .head p{ color:var(--neutral-600); margin-top:.4em; }
.ww-tabs{ display:flex; flex-wrap:wrap; gap:.5em; justify-content:center; margin-bottom:var(--gap-l); }
.ww-tab{ height:2.1em; padding-inline:.9em; border-radius:var(--radius-pill);
  border:var(--stroke) solid var(--line-2); background:var(--neutral-300);
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--neutral-600); transition:.3s var(--ease); }
.ww-tab.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ww-stage{ position:relative; height:26em; overflow:hidden; cursor:grab; touch-action:pan-y; }
.ww-stage:active{ cursor:grabbing; }
.ww-wheel{ position:absolute; left:50%; top:0; width:0; height:0; }
.ww-spine{ position:absolute; left:0; top:0; width:19em; margin-left:-9.5em;
  transform-origin:50% 34em; will-change:transform; }
.ww-card{ height:15em; border-radius:var(--radius-soft); border:var(--stroke) solid var(--ink);
  padding:var(--gap-m); display:flex; flex-direction:column; text-align:left;
  box-shadow:0 18px 40px -26px rgba(32,29,29,.5); }
.ww-card .wc-top{ display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.ww-card h3{ font-size:1.7em; line-height:1.02; letter-spacing:-.02em; margin-top:auto; }
.ww-card .wc-tags{ display:flex; flex-wrap:wrap; gap:.4em; margin-top:.7em; }
.ww-card .wc-tags span{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.04em; padding:.25em .6em; border-radius:var(--radius-pill); border:var(--stroke) solid currentColor; opacity:.75; }
.ww-card.t-e{ background:var(--electric); color:var(--ink); }
.ww-card.t-v{ background:var(--violet); color:#fff; }
.ww-card.t-ink{ background:var(--ink); color:var(--paper); }
.ww-card.t-paper{ background:#fff; color:var(--ink); }
.ww-hint{ font-family:var(--font-script); color:var(--coral); font-size:1.5em; margin-top:.4em; }

/* ==========================================================================
   THREE-CARD FAN — process
   ========================================================================== */
.fan{ padding:var(--pad-s) 0; }
.fan .head{ text-align:center; margin-bottom:var(--gap-xxl); }
.fan h2{ font-size:clamp(2rem,4.5vw,3rem); letter-spacing:-.02em; }
.fan .head p{ color:var(--neutral-600); margin-top:.4em; }
.fan-row{ display:flex; justify-content:center; gap:var(--gap-l); flex-wrap:wrap; position:relative; }
.fan-card{ width:19em; min-height:16em; border-radius:var(--radius-soft); padding:var(--gap-xl);
  border:var(--stroke) solid var(--ink); display:flex; flex-direction:column;
  rotate:var(--r,0deg); transition:rotate .4s var(--ease), transform .4s var(--ease); }
.fan-card:hover{ rotate:0deg; transform:translateY(-6px); }
.fan-card .fc-n{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; }
.fan-card h3{ font-size:2em; letter-spacing:-.02em; margin:.3em 0 .4em; }
.fan-card p{ font-size:.98em; margin-bottom:var(--gap-m); }
.fan-card .btn{ margin-top:auto; align-self:flex-start; }
.fan-card.t-v{ background:var(--violet); color:#fff; }
.fan-card.t-v p{ color:rgba(255,255,255,.85); }
.fan-card.t-ink{ background:var(--ink); color:var(--paper); }
.fan-card.t-ink p{ color:var(--neutral-450); }
.fan-card.t-e{ background:var(--electric); color:var(--ink); }

/* ==========================================================================
   TRUSTED BY
   ========================================================================== */
.trust{ padding:var(--pad-xs) 0; border-top:var(--stroke) solid var(--line);
  border-bottom:var(--stroke) solid var(--line); text-align:center; overflow:hidden; }
.trust .eyebrow{ justify-content:center; }
.trust-track{ display:flex; gap:3.5em; white-space:nowrap; will-change:transform;
  animation:marquee 34s linear infinite; }
.trust-track span{ font-family:var(--font-display); font-weight:700; font-size:1.4em;
  color:var(--neutral-450); letter-spacing:-.01em; }
@media (prefers-reduced-motion:reduce){ .trust-track{ flex-wrap:wrap; justify-content:center; white-space:normal; } }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testi{ padding:var(--pad-s) 0; }
.testi .head{ margin-bottom:var(--gap-xxl); }
.testi h2{ font-size:clamp(2rem,4.5vw,3rem); letter-spacing:-.02em; }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-m); }
.tcard{ background:var(--violet); color:#fff; border-radius:var(--radius-soft); padding:var(--gap-xl);
  display:flex; flex-direction:column; }
.tcard blockquote{ margin:0 0 var(--gap-l); font-size:1.15em; line-height:1.4; letter-spacing:-.01em; }
.tcard .who{ display:flex; align-items:center; gap:.7em; margin-top:auto; }
.tcard .who .av{ width:2.6em; height:2.6em; border-radius:50%; background:var(--electric);
  color:var(--ink); display:grid; place-items:center; font-weight:700; font-family:var(--font-display); }
.tcard .who .nm{ font-weight:600; }
.tcard .who .rl{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.05em; color:rgba(255,255,255,.75); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{ padding:var(--pad-s) 0; }
.cta-band .inner{ background:var(--violet); color:#fff; border-radius:var(--radius-soft);
  padding:var(--pad-xs) var(--gap-xxl); text-align:center; }
.cta-band h2{ font-size:clamp(2.2rem,5.5vw,3.6rem); letter-spacing:-.03em; line-height:1; }
.cta-band .go{ display:flex; gap:var(--gap-s); justify-content:center; margin-top:var(--gap-xl); flex-wrap:wrap; }
.cta-band .btn.ghost{ border-color:#fff; color:#fff; }
.cta-band .btn.ghost:hover{ background:#fff; color:var(--violet); }

/* ==========================================================================
   FOOTER + signature wordmark
   ========================================================================== */
footer{ background:var(--paper); border-top:var(--stroke) solid var(--line); padding-top:var(--pad-s); }
.foot-cap{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--gap-xl);
  padding-bottom:var(--pad-xs); }
.foot-news h3{ font-family:var(--font-display); font-size:1.6em; letter-spacing:-.02em; margin-bottom:.5em; }
.foot-news p{ color:var(--neutral-600); max-width:32ch; margin-bottom:var(--gap-m); }
.foot-form{ display:flex; gap:.5em; max-width:24em; }
.foot-form input{ flex:1; height:var(--input-h); padding-inline:1em; border-radius:var(--radius-tight);
  border:var(--stroke) solid var(--ink); background:#fff; font:inherit; }
.foot-col h4{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:500; margin-bottom:var(--gap-m); }
.foot-col a{ display:block; padding:.35em 0; color:var(--neutral-600); transition:.2s var(--ease); }
.foot-col a:hover{ color:var(--ink); }
.foot-social{ display:flex; gap:.5em; margin-top:var(--gap-s); }
.foot-social a{ width:2.4em; height:2.4em; display:grid; place-items:center; border-radius:var(--radius-pill);
  border:var(--stroke) solid var(--line-2); font-family:var(--font-mono); font-size:11px; transition:.2s var(--ease); }
.foot-social a:hover{ border-color:var(--ink); background:var(--ink); color:var(--paper); }
.foot-base{ display:flex; justify-content:space-between; gap:var(--gap-m); flex-wrap:wrap;
  padding:var(--gap-m) 0; font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); border-top:var(--stroke) solid var(--line); }
.foot-wordmark{ overflow:hidden; line-height:.8; }
.foot-wordmark span{ display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(5rem,23vw,20rem); letter-spacing:-.05em; color:var(--ink); white-space:nowrap;
  transform:translateX(0); will-change:transform; }

/* ==========================================================================
   PROJECT MOCK PREVIEWS (.pv) — used when no image is set
   ========================================================================== */
.pv{ width:100%; aspect-ratio:16/10; border-radius:var(--radius-soft); border:var(--stroke) solid var(--line-2);
  padding:var(--gap-m); background:#fff; display:flex; flex-direction:column; gap:.6em; overflow:hidden; position:relative; }
.pv .pvnav{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.pv .pvh{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,3vw,2.1rem);
  line-height:1.02; letter-spacing:-.02em; margin-top:auto; }
.pv .pvrow{ display:flex; gap:.5em; }
.pv .pvrow i{ height:.6em; border-radius:var(--radius-tight); background:var(--neutral-300); flex:0 0 auto; }
.pv.v1 .accent{ position:absolute; top:0; right:0; width:40%; height:100%; background:var(--electric); opacity:.9; }
.pv.v1 .pvh, .pv.v1 .pvnav, .pv.v1 .pvrow{ position:relative; z-index:2; }
.pv.v2{ background:var(--ink); color:var(--paper); }
.pv.v2 .band{ height:1.2em; background:var(--violet); border-radius:var(--radius-tight); }
.pv.v2 .pvnav{ color:var(--neutral-450); }
.pv.v2 .pvrow i{ background:var(--neutral-600); }
.pv.v3{ background:var(--violet); color:#fff; }
.pv.v3 .cols{ display:grid; grid-template-columns:repeat(6,1fr); gap:.3em; height:2.4em; }
.pv.v3 .cols span{ background:rgba(255,255,255,.28); border-radius:var(--radius-tight); }
.pv.v3 .pvnav{ color:rgba(255,255,255,.7); }
.pv.v3 .pvrow i{ background:rgba(255,255,255,.35); }
.pv-img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius-soft);
  border:var(--stroke) solid var(--line-2); }

/* ==========================================================================
   HOME: work list (below wheel — full case-study rows)
   ========================================================================== */
.worklist{ padding:var(--pad-s) 0; }
.worklist .head{ margin-bottom:var(--gap-xl); }
.worklist h2{ font-size:clamp(2rem,4.5vw,3rem); letter-spacing:-.02em; }
.placeholder-note{ font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--coral);
  border:var(--stroke) dashed var(--coral); border-radius:var(--radius-tight); padding:.8em 1em;
  margin-bottom:var(--gap-xl); max-width:70ch; }
.proj{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--gap-xl); align-items:center;
  padding:var(--gap-xxl) 0; border-top:var(--stroke) solid var(--line); }
.proj:nth-child(even) .visual{ order:2; }
.proj .meta .pidx{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); }
.proj .meta h3{ font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-.02em; margin:.3em 0 .5em; }
.proj .meta .built{ color:var(--neutral-600); max-width:44ch; margin-bottom:var(--gap-m); }
.proj .meta .cat{ display:flex; gap:.5em; flex-wrap:wrap; margin-bottom:var(--gap-m); }
.proj .meta .cat span{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.05em; padding:.3em .7em; border-radius:var(--radius-pill); border:var(--stroke) solid var(--line-2); color:var(--muted); }
.proj .meta .view{ font-weight:600; display:inline-flex; align-items:center; gap:.4em; color:var(--violet); }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.page-main{ padding-top:var(--pad-xs); }
.phero{ padding:calc(var(--nav-top) + var(--nav-h) + var(--ticker-h) + var(--gap-xxl)) 0 var(--pad-s);
  border-bottom:var(--stroke) solid var(--line); }
.phero h1{ font-size:clamp(2.6rem,7vw,5rem); line-height:1; letter-spacing:-.05em; max-width:16ch; }
.phero .lead{ max-width:52ch; font-size:1.1em; color:var(--neutral-600); margin-top:var(--gap-m); }
.section{ padding:var(--pad-s) 0; }
.section + .section{ padding-top:0; }
.shead{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--gap-m);
  margin-bottom:var(--gap-xl); }
.shead h2{ font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-.02em; }
.shead .k{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }

/* work archive grid */
.wgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-xl); }
.wtile .thumb{ display:block; border-radius:var(--radius-soft); overflow:hidden; }
.wtile .tph{ display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:16/10;
  padding:var(--gap-m); background:var(--ink); color:var(--paper); border-radius:var(--radius-soft); }
.wtile .tph-nav{ display:flex; justify-content:space-between; font-family:var(--font-mono);
  font-size:11px; color:var(--neutral-450); }
.wtile .tph-h{ font-family:var(--font-display); font-weight:700; font-size:1.8em; line-height:1.02; letter-spacing:-.02em; }
.wtile .tmeta{ display:flex; justify-content:space-between; align-items:baseline; margin:var(--gap-m) 0 .3em; }
.wtile .tmeta h3{ font-size:1.5em; letter-spacing:-.01em; }
.wtile .tmeta .yr{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.wtile p{ color:var(--neutral-600); margin-bottom:var(--gap-s); }
.wtile .cat{ display:flex; gap:.5em; flex-wrap:wrap; }
.wtile .cat span{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  padding:.3em .7em; border-radius:var(--radius-pill); border:var(--stroke) solid var(--line-2); color:var(--muted); }

/* services detail */
.sdetail .srowd{ display:grid; grid-template-columns:auto 1fr 1.1fr; gap:var(--gap-xl);
  padding:var(--gap-xl) 0; border-top:var(--stroke) solid var(--line); align-items:start; }
.sdetail .srowd:last-child{ border-bottom:var(--stroke) solid var(--line); }
.sdetail .num{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.sdetail h3{ font-size:1.6em; letter-spacing:-.01em; }
.sdetail .note{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--violet); margin-top:.3em; }
.sdetail p{ color:var(--neutral-600); }

/* process timeline */
.timeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--gap-m); }
.tstep{ padding:var(--gap-m); border:var(--stroke) solid var(--line); border-radius:var(--radius-soft); }
.tstep .tn{ font-family:var(--font-mono); font-size:11px; color:var(--violet); }
.tstep h4{ font-size:1.3em; margin:.4em 0 .3em; letter-spacing:-.01em; }
.tstep p{ font-size:.92em; color:var(--neutral-600); }

/* studio stats + values */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-m); }
.stat{ padding:var(--gap-xl); border:var(--stroke) solid var(--line); border-radius:var(--radius-soft); }
.stat .big{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,6vw,4rem);
  letter-spacing:-.03em; line-height:1; display:flex; align-items:baseline; }
.stat .big .suf{ font-size:.5em; color:var(--violet); margin-left:.15em; }
.stat .lab{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); margin-top:.6em; }
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-m); }
.value{ padding:var(--gap-xl); background:var(--panel); color:var(--paper); border-radius:var(--radius-soft); }
.value h4{ font-size:1.4em; letter-spacing:-.01em; margin-bottom:.4em; }
.value p{ color:var(--neutral-450); }

/* pricing */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-m); align-items:start; }
.plan{ border:var(--stroke) solid var(--line); border-radius:var(--radius-soft); padding:var(--gap-xl);
  background:#fff; display:flex; flex-direction:column; gap:.6em; }
.plan.feat{ background:var(--violet); color:#fff; border-color:var(--ink); }
.plan .pname{ font-family:var(--font-display); font-weight:700; font-size:1.5em; letter-spacing:-.01em; }
.plan .pnote{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.plan.feat .pnote{ color:var(--electric); }
.plan .pprice{ font-family:var(--font-display); font-weight:800; font-size:1.8em; letter-spacing:-.02em; margin:.2em 0 .5em; }
.plan ul{ display:flex; flex-direction:column; gap:.5em; margin:.4em 0 var(--gap-m); }
.plan li{ font-size:.95em; padding-left:1.3em; position:relative; color:var(--neutral-600); }
.plan.feat li{ color:rgba(255,255,255,.9); }
.plan li::before{ content:"\2192"; position:absolute; left:0; color:var(--violet); }
.plan.feat li::before{ color:var(--electric); }
.plan .btn{ margin-top:auto; }
.plan.feat .btn.solid{ border-color:transparent; }
.pnote-all{ font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-top:var(--gap-l); }

/* faq */
.faq details{ border-top:var(--stroke) solid var(--line); padding:var(--gap-m) 0; }
.faq details:last-child{ border-bottom:var(--stroke) solid var(--line); }
.faq summary{ display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:1.25em; letter-spacing:-.01em; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq .pm{ font-family:var(--font-mono); color:var(--violet); transition:.3s var(--ease); }
.faq details[open] .pm{ transform:rotate(45deg); }
.faq p{ color:var(--neutral-600); max-width:60ch; margin-top:var(--gap-s); }

/* contact page form */
.cwrap{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--gap-xxl); }
.cform{ display:flex; flex-direction:column; gap:var(--gap-m); }
.cform label{ display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); margin-bottom:.4em; }
.cform input, .cform textarea{ width:100%; padding:.8em 1em; border:var(--stroke) solid var(--ink);
  border-radius:var(--radius-tight); background:#fff; font:inherit; }
.cform input{ height:var(--input-h); }
.cform textarea{ min-height:9em; resize:vertical; }
.cnote{ background:var(--electric); color:var(--ink); border:var(--stroke) solid var(--ink);
  border-radius:var(--radius-soft); padding:var(--gap-m); font-weight:500; }
.cinfo .row{ display:flex; flex-direction:column; gap:.2em; padding:var(--gap-m) 0;
  border-top:var(--stroke) solid var(--line); }
.cinfo .row .k{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.cinfo .row a{ color:var(--violet); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  :root{ --arc-h:26em; }
  .acard{ width:19em; }
  .intro .wrap{ grid-template-columns:1fr; }
  .split .wrap{ grid-template-columns:1fr; }
  .testi-grid{ grid-template-columns:1fr; }
  .cwrap{ grid-template-columns:1fr; }
  .wgrid{ grid-template-columns:1fr; }
  .timeline{ grid-template-columns:repeat(2,1fr); }
  .stats, .values, .pricing{ grid-template-columns:1fr; }
  .sdetail .srowd{ grid-template-columns:1fr; gap:var(--gap-s); }
  .proj, .proj:nth-child(even){ grid-template-columns:1fr; }
  .proj:nth-child(even) .visual{ order:0; }
  .foot-cap{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  :root{ --arc-h:20em; }
  .acard{ width:15em; }
  .ac-screen{ padding:.75em; }
  .hero-title{ letter-spacing:-.04em; }
  .ww-tabs{ display:none; }
  .foot-cap{ grid-template-columns:1fr; }
  .cta-band .inner{ padding:var(--pad-xs) var(--gap-l); }
}

/* ==========================================================================
   SETUP-SYSTEM ADDITIONS
   Work filter bar, single-project layout, prose pages, 404, contact rows,
   footer legal. All built from the existing tokens above.
   ========================================================================== */

/* Contact form — paired rows */
.cf-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-m); }
.cform select{ width:100%; height:var(--input-h); padding:.6em 1em; border:var(--stroke) solid var(--ink);
  border-radius:var(--radius-tight); background:#fff; font:inherit; }

/* Prose pages — legal pages + project body copy */
.pagey{ max-width:68ch; color:var(--neutral-600); font-size:1.05em; line-height:1.7; }
.pagey > *:first-child{ margin-top:0; }
.pagey h2{ font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-size:clamp(1.4rem,3vw,1.9rem); letter-spacing:-.02em; margin:var(--gap-xl) 0 var(--gap-s); }
.pagey h3{ font-family:var(--font-display); font-weight:600; color:var(--ink);
  font-size:1.2rem; margin:var(--gap-l) 0 var(--gap-xs); }
.pagey p{ margin:0 0 var(--gap-s); }
.pagey ul, .pagey ol{ margin:0 0 var(--gap-s) 1.25em; }
.pagey li{ margin:.3em 0; }
.pagey a{ color:var(--violet); text-decoration:underline; text-underline-offset:2px; }
.pagey strong{ color:var(--ink); }

/* 404 */
.p404 .lead{ max-width:46ch; }

/* Work — category filter bar */
.wfilter{ display:flex; flex-wrap:wrap; gap:.5em; margin-bottom:var(--gap-xl); }
.wfilter .wf{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink); background:transparent; border:var(--stroke) solid var(--ink);
  border-radius:var(--radius-pill); padding:.5em 1.1em; cursor:pointer; transition:background .18s var(--ease),color .18s var(--ease); }
.wfilter .wf:hover{ background:var(--neutral-300); }
.wfilter .wf.is-on{ background:var(--ink); color:var(--paper); }

/* Single project */
.pdetail .pd-hero{ border-radius:var(--radius-soft); overflow:hidden; }
.pdetail .pd-hero img{ width:100%; height:auto; display:block; }
.pdetail .pd-hero--empty{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  background:var(--neutral-300); border:var(--stroke) dashed var(--line-2); color:var(--muted);
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }

.pd-intro{ display:grid; grid-template-columns:1.5fr 1fr; gap:var(--gap-xxl); align-items:start; }
.pd-body p{ color:var(--neutral-600); max-width:60ch; margin:0 0 var(--gap-m); font-size:1.05em; line-height:1.7; }
.pd-h{ font-size:clamp(1.3rem,3vw,1.8rem); letter-spacing:-.02em; margin:var(--gap-xl) 0 var(--gap-s); }
.pd-h:first-child{ margin-top:0; }

.pd-facts{ border-top:var(--stroke) solid var(--ink); }
.pd-fact{ display:flex; flex-direction:column; gap:.2em; padding:var(--gap-m) 0; border-bottom:var(--stroke) solid var(--line); }
.pd-fact .k{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.pd-fact .v{ color:var(--ink); font-weight:500; }

.pd-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-xl); }
.pd-shot{ margin:0; border-radius:var(--radius-soft); overflow:hidden; background:var(--neutral-300); }
.pd-shot img{ width:100%; height:auto; display:block; }
.pd-shot.mob{ max-width:22em; }

.pd-next{ display:flex; flex-direction:column; gap:.3em; padding:var(--gap-l) 0;
  border-top:var(--stroke) solid var(--ink); text-decoration:none; color:var(--ink); }
.pd-next .k{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.pd-next .nm{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:-.02em; }
.pd-next:hover .ar{ transform:translateX(4px); }
.pd-next .ar{ display:inline-block; transition:transform .2s var(--ease); }

/* Footer legal links */
.foot-legal{ display:inline-flex; gap:var(--gap-m); }
.foot-legal a{ color:inherit; opacity:.75; }
.foot-legal a:hover{ opacity:1; }

@media (max-width:900px){
  .cf-2{ grid-template-columns:1fr; }
  .pd-intro{ grid-template-columns:1fr; gap:var(--gap-xl); }
  .pd-gallery{ grid-template-columns:1fr; }
}

/* ==========================================================================
   WORK PAGE — redesign
   Hero with marker underline + rotating seal + starburst, intro & filter bar,
   dark project cards with overlaid sector/year/name and a round link button,
   and a dark CTA band with a tilted DS card. All from existing tokens.
   ========================================================================== */
.workx{ overflow-x:clip; }

/* ---- hero ---- */
.wk-hero{ position:relative; padding:calc(var(--nav-top) + var(--nav-h) + var(--ticker-h) + var(--gap-xxl)) 0 var(--pad-xs);
  border-bottom:var(--stroke) solid var(--line); overflow:clip; }
.wk-hero-grid{ display:grid; grid-template-columns:1fr auto; gap:var(--gap-xl); align-items:center; }
.wk-eyebrow{ font-family:var(--font-mono); font-size:11px; font-weight:500; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink); display:flex; align-items:center; gap:.6em; }
.wk-eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--electric);
  box-shadow:0 0 0 4px rgba(161,255,98,.25); }
.wk-title{ font-family:var(--font-display); font-weight:700; letter-spacing:-.045em; line-height:.98;
  font-size:clamp(2.7rem,7.4vw,5.4rem); margin-top:var(--gap-m); max-width:15ch; color:var(--ink); }
.wk-ast{ color:var(--violet); font-weight:400; font-size:.62em; vertical-align:.18em; margin:0 .04em; }
.wk-mark{ font-style:italic; position:relative; white-space:nowrap; padding-bottom:.06em; }
.wk-mark .wk-underline{ position:absolute; left:-2%; right:-2%; bottom:-.14em; width:104%; height:.42em; overflow:visible; }
.wk-lead{ max-width:46ch; font-size:1.12em; color:var(--neutral-600); margin-top:var(--gap-l); }

/* rotating seal */
.wk-seal{ position:relative; z-index:2; width:10.5em; height:10.5em; flex:none; align-self:end; margin-bottom:.4em; }
.wk-seal svg{ width:100%; height:100%; animation:wk-spin 26s linear infinite; }
.wk-seal-t{ font-family:var(--font-mono); font-size:9px; letter-spacing:.15em; fill:var(--violet); text-transform:uppercase; }
.wk-seal-mark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--violet); letter-spacing:-.03em; }
.wk-seal-mark i{ color:var(--violet); font-style:normal; font-size:.66em; margin-left:.08em; vertical-align:.1em; }
@keyframes wk-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .wk-seal svg{ animation:none; } }

/* decorations */
.wk-burst{ position:absolute; top:-3.2em; right:-3.2em; width:15.5em; height:15.5em; z-index:0; pointer-events:none;
  opacity:.92; filter:saturate(1.05); }
.wk-burst svg{ width:100%; height:100%; }
.wk-blob{ position:absolute; left:-14em; top:40%; width:26em; height:26em; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(104,64,255,.5), rgba(104,64,255,0) 68%); }
.wk-hero .wrap{ position:relative; z-index:1; }

/* ---- intro + filters ---- */
.wk-intro{ padding:var(--pad-s) 0 var(--gap-xxl); }
.wk-intro-p{ max-width:66ch; font-size:1.06em; color:var(--neutral-600); line-height:1.6; }
.wk-intro-p a{ color:var(--violet); text-decoration:underline; text-underline-offset:2px; }
.wk-filter{ display:flex; flex-wrap:wrap; gap:.5em; margin-top:var(--gap-xl); }
.wk-f{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink); background:transparent; border:var(--stroke) solid var(--line-2); border-radius:var(--radius-pill);
  padding:.62em 1.15em; cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.wk-f:hover{ border-color:var(--ink); }
.wk-f.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---- grid ---- */
.wk-grid-sec{ padding:0 0 var(--pad-s); }
.wk-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-xxl) var(--gap-l); }

.wk-card{ display:flex; flex-direction:column; }
.wk-shot{ position:relative; display:block; aspect-ratio:16/10.4; border-radius:var(--radius-soft);
  overflow:hidden; background:var(--ink); color:#fff; isolation:isolate; }
.wk-shot .wk-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.wk-shot::after{ content:""; position:absolute; inset:0; z-index:3;
  background:linear-gradient(180deg, rgba(15,13,13,.55) 0%, rgba(15,13,13,0) 32%, rgba(15,13,13,.78) 100%); }

/* accent glow + tilted browser mockup (shown when there's no screenshot) */
.wk-glow{ position:absolute; z-index:0; width:78%; height:78%; right:2%; top:6%; border-radius:50%;
  filter:blur(46px); opacity:.6; pointer-events:none; }
.tone-0 .wk-glow{ background:radial-gradient(circle, #6840FF, transparent 66%); }
.tone-1 .wk-glow{ background:radial-gradient(circle, #A1FF62, transparent 66%); }
.tone-2 .wk-glow{ background:radial-gradient(circle, #F84131, transparent 66%); }
.tone-3 .wk-glow{ background:radial-gradient(circle, #7a5cff, transparent 66%); }
.wk-shot{ background:#141317; }
.tone-0 .wk-shot, .wk-shot.tone-0{ background:#15121e; }
.tone-1 .wk-shot, .wk-shot.tone-1{ background:#121710; }
.tone-2 .wk-shot, .wk-shot.tone-2{ background:#1a1211; }
.tone-3 .wk-shot, .wk-shot.tone-3{ background:#121217; }

.wk-mock{ position:absolute; z-index:1; left:11%; top:21%; right:-16%; bottom:-11%;
  transform:perspective(1300px) rotateY(-24deg) rotateX(7deg) rotate(-3deg); transform-origin:center;
  border-radius:11px; overflow:hidden; box-shadow:0 44px 90px -34px rgba(0,0,0,.75);
  outline:1px solid rgba(255,255,255,.06); }
.wk-win{ position:absolute; inset:0; background:#17161b; display:flex; flex-direction:column; }
.wk-bar{ height:11%; min-height:16px; background:#201e25; display:flex; align-items:center; gap:5px; padding:0 3.5%; }
.wk-bar i{ width:6px; height:6px; border-radius:50%; background:#3b3844; flex:none; }
.wk-screen{ flex:1; display:flex; gap:4%; padding:4.5%; }
.wk-hero-blk{ flex:1.25; border-radius:7px; display:flex; flex-direction:column; justify-content:flex-end;
  gap:7%; padding:8%; background:linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.02)); }
.tone-0 .wk-hero-blk{ background:linear-gradient(155deg, #7a53ff, #4a2fb0); }
.tone-1 .wk-hero-blk{ background:linear-gradient(155deg, #b6ff7a, #6fbf3a); }
.tone-2 .wk-hero-blk{ background:linear-gradient(155deg, #ff6a52, #c22f22); }
.tone-3 .wk-hero-blk{ background:linear-gradient(155deg, #2a2740, #16151d); }
.wk-hero-blk u{ display:block; height:11%; width:34%; border-radius:3px; background:rgba(255,255,255,.55); }
.wk-hero-blk b{ display:block; height:12%; border-radius:3px; background:rgba(255,255,255,.9); }
.wk-hero-blk b:nth-of-type(2){ width:62%; opacity:.6; }
.tone-1 .wk-hero-blk u, .tone-1 .wk-hero-blk b{ background:rgba(0,0,0,.65); }
.wk-panel{ flex:1; border-radius:7px; background:#211f28; padding:6%; display:flex; flex-direction:column; gap:8.5%; }
.wk-panel i{ display:block; height:9%; border-radius:3px; background:rgba(255,255,255,.14); }
.wk-panel i:nth-child(1){ width:70%; background:rgba(255,255,255,.24); }
.wk-panel i:nth-child(3){ width:84%; }
.wk-panel i:nth-child(5){ width:60%; }

.wk-cap-top{ position:absolute; z-index:4; top:1.1em; left:1.15em; right:1.15em;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1em; }
.wk-sector{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  display:inline-flex; align-items:center; gap:.55em; color:rgba(255,255,255,.92); }
.wk-sector .dot{ width:7px; height:7px; border-radius:50%; background:var(--electric); flex:none; }
.wk-yr{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:rgba(255,255,255,.85); }
.wk-name{ position:absolute; z-index:4; left:.7em; bottom:.42em; margin:0;
  font-family:var(--font-display); font-weight:600; letter-spacing:-.03em; line-height:1;
  font-size:clamp(1.7rem,3.4vw,2.5rem); color:#fff; padding:0 .3em; }
.wk-shot:hover .wk-img{ transform:scale(1.03); }
.wk-shot .wk-img{ transition:transform .6s var(--ease); }

.wk-meta{ display:flex; align-items:center; justify-content:space-between; gap:var(--gap-m); padding:var(--gap-m) .2em 0; }
.wk-meta-head{ display:flex; align-items:baseline; gap:.7em; }
.wk-meta-head h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:1.35rem; color:var(--ink); }
.wk-yr2{ font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.wk-meta-l p{ margin:.5em 0 0; color:var(--neutral-600); font-size:.98em; line-height:1.5; max-width:46ch; }
.wk-pills{ display:flex; flex-wrap:wrap; gap:.4em; margin-top:.9em; }
.wk-pills span{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--neutral-600); border:var(--stroke) solid var(--line-2); border-radius:var(--radius-pill); padding:.42em .8em; }
.wk-go{ flex:none; width:3.4em; height:3.4em; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; transition:transform .25s var(--ease), background .25s var(--ease); }
.wk-go svg{ width:1.35em; height:1.35em; }
.wk-go:hover{ transform:translateY(-3px) rotate(3deg); background:var(--violet); }

/* ---- CTA ---- */
.wk-cta{ padding:0 0 var(--pad-s); }
.wk-cta-inner{ position:relative; overflow:clip; background:var(--ink); color:#fff; border-radius:var(--radius-soft);
  padding:var(--pad-xs) var(--pad-xs); display:grid; grid-template-columns:1.1fr .9fr; gap:var(--gap-xxl); align-items:center; }
.wk-cta-l h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.04em; line-height:1;
  font-size:clamp(2.2rem,4.6vw,3.4rem); max-width:9ch; }
.wk-cta-mark{ position:relative; display:inline-block; }
.wk-cta-mark::after{ content:""; position:absolute; left:0; right:0; bottom:.02em; height:.16em;
  background:var(--electric); border-radius:2px; }
.wk-cta-r{ max-width:34ch; }
.wk-cta-r p{ color:rgba(255,255,255,.72); font-size:1.02em; line-height:1.5; }
.wk-cta-btn{ display:inline-flex; align-items:center; gap:.5em; margin-top:var(--gap-m);
  background:var(--electric); color:var(--ink); font-weight:600; border-radius:var(--radius-pill);
  padding:.85em 1.5em; transition:transform .2s var(--ease); }
.wk-cta-btn:hover{ transform:translateY(-2px); }
.wk-cta-btn .ar{ transition:transform .2s var(--ease); }
.wk-cta-btn:hover .ar{ transform:translateX(4px); }
.wk-cta-spark{ position:absolute; left:1.2em; bottom:1em; color:var(--electric); font-size:1.6rem; z-index:2; }
.wk-cta-card{ position:absolute; right:2.4em; top:50%; width:6.6em; height:8.6em; border-radius:1em; z-index:1;
  background:linear-gradient(150deg, #7a53ff, var(--violet)); box-shadow:0 30px 60px -24px rgba(104,64,255,.7);
  transform:translateY(-50%) rotate(9deg); display:flex; align-items:flex-start; justify-content:flex-start;
  padding:.7em .8em; font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:#fff; }
.wk-cta-card i{ color:var(--electric); font-style:normal; }

/* ---- responsive ---- */
@media (max-width:1000px){
  .wk-hero-grid{ grid-template-columns:1fr; gap:var(--gap-l); }
  .wk-seal{ display:none; }
}
@media (max-width:820px){
  .wk-grid{ grid-template-columns:1fr; gap:var(--gap-xl); }
  .wk-cta-inner{ grid-template-columns:1fr; padding:var(--gap-xxl) var(--gap-l); }
  .wk-cta-card{ display:none; }
  .wk-burst{ width:15em; right:-4em; top:-1em; }
}

/* ==========================================================================
   TOUCH TARGET & MOBILE SAFEGUARDS  (appended — interior pages)
   --------------------------------------------------------------------------
   The visual design keeps buttons at 40px (and 32px for .btn.sm) which is
   correct for a mouse. On touch devices that is below the ~44px minimum tap
   area recommended by WCAG 2.5.5 and the Apple / Google interface guidelines,
   which is a real cause of mis-taps on phones. These rules are gated behind
   `pointer:coarse`, so they ONLY affect touch input — the desktop design is
   untouched, pixel for pixel. min-height (never height) means a control can
   grow to a comfortable tap size but never shrinks an existing layout.
   ========================================================================== */
@media (pointer:coarse){
  .btn,
  .btn.sm,
  .wfilter .wf,
  .tag-pill,
  .cf-2 + .btn,
  .cform button,
  .cform .btn{
    min-height:44px;
  }
  /* Anything that reads as a button but is a bare link still needs the area. */
  a.btn, button.btn{ min-height:44px; }
}

/* Very small screens: let a hero / CTA button pair use the full width so the
   two buttons stack cleanly and each is easy to hit, instead of squeezing
   side by side. Only below 480px, and only for the action groups — normal
   inline buttons are left alone. */
@media (max-width:480px){
  .hero .actions,
  .cta-band .go,
  .wk-cta .go,
  .pd-cta .go{
    flex-direction:column;
    align-items:stretch;
  }
  .hero .actions .btn,
  .cta-band .go .btn,
  .wk-cta .go .btn,
  .pd-cta .go .btn{
    width:100%;
    justify-content:center;
  }
}

/* Guarantee no element can force a horizontal scrollbar on a phone — a common
   production bug from a single wide inline-block or a long unbroken string. */
@media (max-width:640px){
  html, body{ overflow-x:hidden; }
  img, video, svg, iframe{ max-width:100%; height:auto; }
}