/*
Theme Name: Crowd Control Digital
Theme URI: https://getcrowdcontrol.com/
Author: Crowd Control Digital
Description: One-page site for Crowd Control Digital with a WebGL particle swarm, an editable services index and a 3D portfolio of client screens. Homepage copy lives under Appearance > Homepage Content; client screens under Projects.
Version: 1.0.1
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary
Text Domain: crowd-control
*/

/* ---------- base ---------- */
body{margin:0}
img,video{max-width:100%;height:auto}
[hidden]{display:none!important}
.screen-reader-text,.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:20;background:var(--beacon,#FFB547);color:#060A12;padding:.6rem .9rem;font:600 .9rem/1 sans-serif;text-decoration:none;border-radius:2px}
.skip:focus{top:12px}

/* Layout: a fixed WebGL swarm stage; reading columns sit left, the swarm sits right. The work section pins and turns a helix of glass screens around a particle spine. */
:root{
  color-scheme: dark;
  --night:#060A12;          /* Lake Michigan after dark */
  --deep:#0C1424;
  --night-a:rgba(6,10,18,.86);
  --scrim:rgba(8,13,24,.70);
  --vignette:rgba(3,5,10,.78);
  --ink:#E9EEF5;
  --ink-soft:#C3CCDA;
  --mist:#8C99AF;
  --ice:#9CC2FF;            /* the crowd */
  --beacon:#FFB547;         /* lighthouse amber: the leads */
  --rule:rgba(156,194,255,.16);
  --rule-strong:rgba(156,194,255,.34);
  --shadow:rgba(0,0,0,.75);
  --paper:#E8ECF2;          /* placeholder homepage greys */
  --paper-2:#D8DFE8;
  --paper-3:#C2CBD8;
  --paper-4:#A9B5C6;
  --paper-5:#1B2537;
  --iris:#C9B6FF;            /* glass rim */
  --glint:rgba(255,255,255,.16);
  --glint-2:rgba(156,194,255,.12);
  --title-scrim:rgba(6,10,18,.62);
  --beacon-a:rgba(255,181,71,.75);
  --edge-a:rgba(156,194,255,.30);
  --edge-b:rgba(255,181,71,.18);
  --glass:rgba(14,22,40,.55);
  --f-display:"Big Shoulders Display","Big Shoulders",Impact,"Arial Narrow",sans-serif;
  --f-body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gl:max(clamp(16px,5vw,72px), env(safe-area-inset-left,0px));
  --gr:max(clamp(16px,5vw,72px), env(safe-area-inset-right,0px));
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html.rm{scroll-behavior:auto}
body{background:var(--night);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--beacon);color:var(--night)}
a{color:inherit}
:focus-visible{outline:2px solid var(--beacon);outline-offset:3px}

/* ---------- stage ---------- */
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity 1.2s ease}
#stage.on{opacity:1}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(130% 95% at 50% 42%, transparent 52%, var(--vignette) 100%)}
.no-gl .veil{background:radial-gradient(80% 60% at 70% 40%, var(--rule) 0%, transparent 70%), radial-gradient(130% 95% at 50% 42%, transparent 52%, var(--vignette) 100%)}
main,.site-foot{position:relative;z-index:2}
main{overflow-x:clip}
.wrap{padding-left:var(--gl);padding-right:var(--gr)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:28px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gr) 18px var(--gl);
  background:linear-gradient(var(--night-a), transparent)}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap;text-decoration:none;color:var(--ink);font:800 1.22rem/1 var(--f-display);letter-spacing:.09em;text-transform:uppercase}
.brand svg{flex:none}
.brand .r{fill:var(--ice)}
.brand .c{fill:var(--beacon)}
.links{display:flex;gap:26px;margin-left:auto}
.links a{text-decoration:none;color:var(--mist);font-size:.92rem;transition:color .2s}
.links a:hover{color:var(--ink)}
.nav .btn{padding:.62rem 1rem;font-size:.88rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.9rem 1.3rem;font:600 .95rem/1 var(--f-body);text-decoration:none;border-radius:2px;transition:transform .25s ease, border-color .25s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--beacon);color:var(--night)}
.btn-ghost{border:1px solid var(--rule-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ice)}
.btn .arr{font-family:var(--f-mono);font-weight:500}

/* ---------- type ---------- */
.eyebrow{font:500 .74rem/1.4 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ice);margin:0 0 1.1rem}
h2{font:800 clamp(2.7rem,6vw,5.4rem)/.9 var(--f-display);text-transform:uppercase;letter-spacing:.005em;margin:0 0 1.3rem;text-wrap:balance}
.lede{font-size:1.12rem;color:var(--ink-soft);max-width:60ch;margin:0 0 2rem}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-block:120px clamp(40px,7vh,72px)}
.hero-copy{max-width:44rem}
.hero h1{font:900 clamp(3.4rem,7.4vw,7.2rem)/.86 var(--f-display);text-transform:uppercase;letter-spacing:.005em;margin:0 0 1.1rem;text-wrap:balance}
.hero-line{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.4;color:var(--ink-soft);max-width:40ch;margin:0 0 1.8rem;text-wrap:pretty}
.hero-line em{font-style:normal;color:var(--beacon)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.cue{position:absolute;right:var(--gr);bottom:122px;display:grid;gap:6px;text-align:right;font:400 .7rem/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.cue b{color:var(--ink);font-weight:500}
.cue .amber{color:var(--beacon)}

/* ---------- panels ---------- */
.panel{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:clamp(110px,16vh,180px)}
.panel-inner{width:min(34rem,100%);will-change:transform}

/* ---------- AI loop: five glass steps on a track, a pulse runs through and back ---------- */
.ai{align-items:flex-end;padding-block:clamp(100px,14vh,150px) clamp(56px,9vh,96px)}
.ai-inner{width:100%}
.ai-head{max-width:40rem;margin-bottom:clamp(28px,5vh,56px)}
.ai-head .lede{margin:0}
.lp{--cyc:7s;position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.lp::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:var(--rule-strong)}
.lp::after{content:"";position:absolute;top:-4px;left:10%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--beacon);box-shadow:0 0 14px 3px var(--beacon-a);animation:lprun var(--cyc) linear infinite;opacity:0}
.lp li{padding:26px 18px 18px;min-width:0}
.lp-node{position:absolute;top:-5px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--deep);border:1px solid var(--rule-strong);animation:lpnode var(--cyc) linear infinite;animation-delay:calc(var(--i) * var(--cyc) * .175)}
.lp-no{display:block;font:500 .7rem/1 var(--f-mono);letter-spacing:.12em;color:var(--mist);margin-bottom:.7rem;animation:lpno var(--cyc) linear infinite;animation-delay:calc(var(--i) * var(--cyc) * .175)}
.lp h3{font:800 1.7rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.03em;margin:0 0 .5rem}
.lp p{margin:0;color:var(--ink-soft);font-size:.94rem;line-height:1.45}
.lp-return{position:relative;height:28px;margin-top:0}
.lp-arc{position:absolute;left:10%;right:10%;top:0;height:22px;border:1px dashed var(--rule-strong);border-top:0;border-radius:0 0 16px 16px}
.lp-back{position:absolute;top:18px;left:90%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--beacon);box-shadow:0 0 10px var(--beacon-a);opacity:0;animation:lpback var(--cyc) linear infinite}
.lp-note{margin:.8rem 0 0;text-align:center;font:400 .72rem/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ice)}
@keyframes lprun{0%{left:10%;opacity:0}2%{opacity:1}70%{left:90%;opacity:1}73%,100%{left:90%;opacity:0}}
@keyframes lpback{0%,72%{left:90%;opacity:0}75%{opacity:.8}97%{left:10%;opacity:.8}100%{left:10%;opacity:0}}
@keyframes lpnode{0%{background:var(--beacon);border-color:var(--beacon);box-shadow:0 0 0 4px var(--edge-b),0 0 16px var(--beacon)}18%,100%{background:var(--deep);border-color:var(--rule-strong);box-shadow:none}}
@keyframes lpno{0%{color:var(--beacon)}18%,100%{color:var(--mist)}}
@media (max-width:1180px){
  .lp{grid-template-columns:minmax(0,1fr);gap:10px;padding-left:34px}
  .lp::before{left:14px;right:auto;top:20px;bottom:20px;width:1px;height:auto}
  .lp::after,.lp-return{display:none}
  .lp li{padding:16px 18px}
  .lp-node{left:-25px;top:22px;margin-left:0}
  .lp-note{text-align:left;padding-left:34px}
}
@media (prefers-reduced-motion: reduce){
  .lp::after,.lp-back,.lp-node,.lp-no{animation:none}
}

/* ---------- services: an index that opens one glass panel at a time ---------- */
.sv{position:relative;height:340vh}
.sv-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-block:84px 28px}
.sv-col{width:min(36rem,100%)}
.sv h2{font-size:clamp(2.2rem,3.6vw,3.4rem)}
.sv-lede{margin-bottom:1.4rem}
.sv-list{list-style:none;margin:0;padding:0;display:grid}
.sv-item{border-top:1px solid var(--rule)}
.sv-item:last-child{border-bottom:1px solid var(--rule)}
.sv-head{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:14px;padding:10px 0;cursor:pointer;color:var(--mist);transition:color .3s}
.sv-head b{font:500 .72rem/1 var(--f-mono);letter-spacing:.12em;font-variant-numeric:tabular-nums;width:2.2em}
.sv-head span{font:800 clamp(1.35rem,2vw,1.75rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:.03em}
.sv-head i{margin-left:auto;font:500 .8rem/1 var(--f-mono);font-style:normal;color:var(--beacon);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.sv-head:hover{color:var(--ink)}
.sv-head:focus-visible{outline:2px solid var(--beacon);outline-offset:2px}
.sv-item.on .sv-head{color:var(--ink)}
.sv-item.on .sv-head b{color:var(--beacon)}
.sv-item.on .sv-head i{opacity:1;transform:none}
.sv-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.sv-item.on .sv-body{grid-template-rows:1fr}
.sv-clip{min-height:0;overflow:hidden}
.sv .glass{transform:none;margin:0 0 14px;padding:18px 20px 16px}
.sv-promise{margin:0 0 .8rem;color:var(--ink);font-size:1.02rem;line-height:1.5}
.sv-inc{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:6px}
.sv-inc:last-child{margin-bottom:0}
.sv-inc li{position:relative;padding-left:20px;color:var(--ink-soft);font-size:.94rem;line-height:1.45}
.sv-inc li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--beacon);box-shadow:0 0 8px var(--beacon)}
.sv-ai{margin:0;padding-top:10px;border-top:1px solid var(--rule);font-size:.9rem;line-height:1.5;color:var(--mist)}
.sv-ai b{font:500 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ice);margin-right:8px}
/* populate: lines arrive in sequence when a service opens */
.sv-promise,.sv-inc li,.sv-ai{opacity:0;transform:translate3d(0,8px,0);transition:opacity .25s ease,transform .25s ease}
.sv-item.on .sv-promise,.sv-item.on .sv-inc li,.sv-item.on .sv-ai{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.sv-item.on .sv-promise{transition-delay:.18s}
.sv-item.on .sv-inc li:nth-child(1){transition-delay:.28s}
.sv-item.on .sv-inc li:nth-child(2){transition-delay:.36s}
.sv-item.on .sv-inc li:nth-child(3){transition-delay:.44s}
.sv-item.on .sv-ai{transition-delay:.56s}
.wk-flat .sv{height:auto}
.wk-flat .sv-pin{position:static;height:auto;display:block;padding-block:110px 60px}
.wk-flat .sv-body{grid-template-rows:1fr}
.wk-flat .sv-promise,.wk-flat .sv-inc li,.wk-flat .sv-ai{opacity:1;transform:none}
.wk-flat .sv-head{cursor:default;color:var(--ink)}
.wk-flat .sv-head b{color:var(--beacon)}
.wk-flat .sv-head i{display:none}
@media (max-height:820px){.sv-lede{display:none}}
@media (max-height:780px) and (min-width:980px){.sv h2{font-size:clamp(2rem,3.2vw,2.8rem);margin-bottom:.9rem}.sv-head{padding:7px 0}.sv-promise{font-size:.98rem;line-height:1.45}}

/* ---------- work: glass screens orbiting a particle helix ---------- */
.wk{position:relative;height:calc(var(--wk-n,4) * 130vh)}
.wk-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.wk-stage{position:absolute;inset:0;perspective:1500px;perspective-origin:67% 52%;pointer-events:none}
.wk-ring{position:absolute;left:67%;top:52%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.wk-card{--cw:clamp(400px,41vw,660px);position:absolute;left:calc(var(--cw) / -2);top:calc(var(--cw) * -0.28125 - 17px);width:var(--cw);margin:0;transform-style:preserve-3d;will-change:transform}
.wk-card::before{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(135deg,var(--edge-a),var(--edge-b));transform:translateZ(-16px);opacity:calc(var(--op,1) * .9)}
.wk-slab{position:relative;border-radius:16px;overflow:hidden;background:var(--deep);box-shadow:0 60px 120px -50px var(--shadow);opacity:var(--op,1)}
.wk-slab .mock-view{aspect-ratio:16 / 9}
.wk-dim{position:absolute;inset:0;background:var(--night);opacity:var(--dim,0);pointer-events:none}
.wk-sheen{position:absolute;inset:0;background:linear-gradient(115deg,var(--glint) 0%,transparent 30%,transparent 70%,var(--glint-2) 100%);background-size:220% 100%;background-position:var(--sx,50%) 0;mix-blend-mode:screen;pointer-events:none}
.wk-rim{position:absolute;inset:0;border-radius:16px;padding:1.5px;background:conic-gradient(from var(--a,0deg),var(--ice),var(--beacon),var(--iris),var(--ice));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;pointer-events:none}
.wk-title{position:absolute;inset:34px 0 0;display:grid;place-items:center;margin:0;padding:0 8%;text-align:center;font:500 clamp(1.3rem,2.4vw,2.4rem)/1.08 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-shadow:-2px 0 var(--ice),2px 0 var(--beacon-a);background:var(--title-scrim);opacity:var(--to,1);pointer-events:none;text-wrap:balance}
.wk-ui{position:absolute;inset:0;z-index:3;display:flex;align-items:center;padding-left:var(--gl);padding-right:var(--gr);pointer-events:none}
.wk-col{width:min(31rem,38vw);padding-top:60px;pointer-events:auto}
.wk-index{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:2px}
.wk-index a{display:flex;align-items:center;gap:12px;padding:3px 0;text-decoration:none;color:var(--mist);font:500 .72rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;transition:color .3s}
.wk-index a b{font-weight:500;font-variant-numeric:tabular-nums;opacity:.7}
.wk-index a i{font-style:normal;display:inline-block;width:0;overflow:hidden;white-space:nowrap;color:var(--beacon);transition:width .35s ease}
.wk-index a[aria-current="true"]{color:var(--ink)}
.wk-index a[aria-current="true"] i{width:1.8em}
.wk-index a:hover{color:var(--ink)}
.wk-details{display:grid}
.wk-detail{grid-area:1 / 1;min-width:0;opacity:0;visibility:hidden;transform:translate3d(0,14px,0);transition:opacity .4s ease,transform .4s ease,visibility 0s linear .4s}
.wk-detail.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .1s,transform .5s ease .1s,visibility 0s}
.case-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 .9rem}
.case-no{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ice);font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:7px;font:500 .64rem/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;padding:.38rem .55rem;border:1px solid var(--rule-strong);border-radius:2px;color:var(--mist)}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.live{color:var(--beacon);border-color:var(--beacon)}
.case-kind{font:400 .72rem/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin:0 0 .5rem}
.case-name{font:900 clamp(2.1rem,3vw,3.1rem)/.9 var(--f-display);text-transform:uppercase;margin:0 0 .9rem;text-wrap:balance}
.wk-goal{margin:0 0 .9rem;font-size:1.08rem;line-height:1.4;color:var(--ink);text-wrap:balance}
.wk-goal b,.wk-result b{display:block;margin-bottom:.3rem;font:500 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ice)}
.stack.svc{margin:0 0 1rem}
.stack.svc li{color:var(--ink-soft);border-color:var(--rule-strong)}
.wk-result{margin:0;padding:10px 12px;border:1px dashed var(--rule-strong);border-radius:2px;font-size:.9rem;line-height:1.45;color:var(--mist)}
.wk-result.is-in{border-style:solid;background:var(--glass);padding:12px 14px 14px}
.res-stats{display:flex;flex-wrap:wrap;gap:10px 34px;margin:.55rem 0 0}
.res-stats p{margin:0;display:flex;flex-direction:column;gap:6px}
.res-stats strong{font:700 2rem/1 var(--f-display);letter-spacing:.01em;color:var(--ink);white-space:nowrap}
.res-stats strong i{font-style:normal;color:var(--beacon);margin:0 .14em}
.res-stats span{font-size:.82rem;line-height:1.3;color:var(--mist)}
.res-head{margin:.45rem 0 0;font:700 1.9rem/1 var(--f-display);letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.res-sub{margin:.4rem 0 0;font-size:.86rem;line-height:1.4;color:var(--mist)}
.res-stats p.res-aside{display:block;align-self:flex-end;flex:1 1 11rem;min-width:0;font-size:.86rem;line-height:1.4;color:var(--ink-soft)}
.site-foot a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.site-foot a:hover{color:var(--ink);border-color:var(--ink)}
.about-copy{display:grid;gap:1rem;margin:0 0 2rem}
.about-copy .lede{margin:0}
[hidden]{display:none!important}
.about-cta{color:var(--ink)}
.about-cta a{color:var(--beacon);text-decoration:none;border-bottom:1px solid currentColor;white-space:nowrap;transition:color .25s}
.about-cta a:hover{color:var(--ink)}
.contact-q{margin:0 0 .6rem;font:600 clamp(1.2rem,1.6vw,1.4rem)/1.3 var(--f-body);color:var(--ink)}
.lede em{font-style:normal;color:var(--beacon)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.build{list-style:none;margin:0 0 1rem;padding:0;display:grid}
.build li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:2px 14px;padding-block:9px;border-top:1px solid var(--rule);font-size:.92rem;line-height:1.5}
.build li:last-child{border-bottom:1px solid var(--rule)}
.build b{font:500 .68rem/1.9 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--beacon)}
.build span{color:var(--ink-soft)}
.stack{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.stack li{font:400 .64rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mist);border:1px solid var(--rule);padding:.42rem .55rem;border-radius:2px}
.mock-bar{height:34px;display:flex;align-items:center;gap:12px;padding:0 12px;border-bottom:1px solid var(--rule);background:var(--deep)}
.mock-bar .dots{display:flex;gap:6px}
.mock-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--rule-strong)}
.mock-url{flex:1;min-width:0;text-align:center;font:400 .68rem/1 var(--f-mono);letter-spacing:.06em;color:var(--mist);background:var(--night);border:1px solid var(--rule);border-radius:4px;padding:.42rem .6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-view{position:relative;overflow:hidden;background:var(--paper)}
.mock-page{will-change:transform}
.mock-page img{display:block;width:100%;height:auto}
.mock-thumb{position:absolute;top:0;right:3px;width:3px;height:22%;border-radius:2px;background:var(--paper-4);will-change:transform}
/* flat mode (phones, tablets, reduced motion): each build stacks, screen then details */
.wk-flat .wk{height:auto}
.wk-flat .wk-pin{position:static;height:auto;overflow:visible;display:flex;flex-direction:column;gap:22px;padding-block:110px 60px}
.wk-flat .wk-stage,.wk-flat .wk-ring,.wk-flat .wk-ui,.wk-flat .wk-col,.wk-flat .wk-details{display:contents}
.wk-flat .wk-index{display:none}
.wk-flat .wk-eyebrow{order:-1;margin:0}
.wk-flat .wk-card{position:relative;left:auto;top:auto;width:100%;max-width:640px;transform:none!important;--op:1!important;--dim:0!important}
.wk-flat .wk-card::before,.wk-flat .wk-title{display:none}
.wk-flat .wk-slab .mock-view{aspect-ratio:16 / 10}
.wk-flat .wk-detail{opacity:1;visibility:visible;transform:none;transition:none;background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--rule);padding:24px 20px;margin-bottom:30px}
@media (max-height:820px){.wk-index{margin-bottom:12px}.wk-index a{padding:1px 0}}
/* ---------- words ---------- */
.quotes{display:grid;margin:0}
/* ---------- glass panels: the same material as the client screens ---------- */
@property --a{syntax:'<angle>';inherits:true;initial-value:0deg}
.glass-stack{gap:12px}
.glass{position:relative;border-radius:16px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 30px 70px -36px var(--shadow);transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.glass.tilting{transition:transform .08s linear}
.glass.quote{border-top:0;padding:18px 22px 16px}
.glass.quote blockquote{margin-bottom:.6rem;font-size:clamp(1.12rem,1.6vw,1.4rem)}
.glass .wk-rim{opacity:.5;animation:rimspin 9s linear infinite;transition:opacity .3s}
.glass:hover .wk-rim{opacity:.95}
.glass .wk-sheen{border-radius:16px}
@keyframes rimspin{to{--a:360deg}}
.quote{margin:0;padding-block:22px;border-top:1px solid var(--rule)}
.quote blockquote{margin:0 0 .8rem;font:500 clamp(1.22rem,1.9vw,1.55rem)/1.36 var(--f-body);text-wrap:pretty}
.quote blockquote::before{content:"\201C";color:var(--beacon)}
.quote blockquote::after{content:"\201D";color:var(--beacon)}
.quote figcaption{font:400 .72rem/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.quote figcaption b{color:var(--ink);font-weight:500}

/* ---------- about ---------- */
.facts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin:0;border-block:1px solid var(--rule)}
.facts div{padding:16px 14px 16px 0;min-width:0}
.facts div + div{padding-left:16px;border-left:1px solid var(--rule)}
.facts dt{font:900 clamp(2.4rem,4vw,3.4rem)/.9 var(--f-display);font-variant-numeric:tabular-nums}
.facts dt span{color:var(--beacon)}
.facts dd{margin:.5rem 0 0;font:400 .68rem/1.45 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}

/* ---------- contact ---------- */
.contact-list{list-style:none;margin:0 0 2rem;padding:0;display:grid}
.contact-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding-block:14px;border-top:1px solid var(--rule)}
.contact-list li:last-child{border-bottom:1px solid var(--rule)}
.contact-list .k{grid-column:1 / -1;font:500 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ice)}
.contact-list .v{font:800 clamp(1.5rem,2.6vw,2.2rem)/1.04 var(--f-display);letter-spacing:.01em;overflow-wrap:break-word;min-width:0}
.copy{font:500 .7rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--ink);border:1px solid var(--rule-strong);border-radius:2px;padding:.55rem .75rem;cursor:pointer;min-width:5.6rem}
.copy:hover{border-color:var(--ice)}

.site-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:28px 110px;border-top:1px solid var(--rule);font:400 .7rem/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}

/* ---------- HUD + rail ---------- */
.hud{position:fixed;right:var(--gr);bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:3;display:grid;gap:3px;text-align:right;pointer-events:none;font:400 .66rem/1.45 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mist);font-variant-numeric:tabular-nums}
.hud b{color:var(--ink);font-weight:500}
.hud .live{color:var(--beacon)}
.rail{position:fixed;right:max(18px, env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:3;display:grid;gap:6px}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:20px;text-decoration:none;color:var(--mist);font:400 .64rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.rail a span{opacity:0;transform:translateX(6px);transition:opacity .25s, transform .25s}
.rail a i{display:block;width:14px;height:1px;background:currentColor;transition:width .35s ease}
.rail a[aria-current="true"]{color:var(--beacon)}
.rail a[aria-current="true"] i{width:30px}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:979px){
  .hud,.rail,.cue{display:none}
  .links{gap:18px}
  #words .panel-inner{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;padding:0}
  .panel-inner{background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--rule);padding:24px 20px}
  .site-foot{padding-block:28px calc(28px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:640px){
  body{font-size:16px}
  .brand{font-size:1.05rem;letter-spacing:.07em}
  .links{display:none}
  .nav{gap:12px}
  .nav .btn{margin-left:auto}
  .channels li,.build li{grid-template-columns:minmax(0,1fr)}
  .facts div{padding-right:8px}
  .facts div + div{padding-left:10px}
}
@media (prefers-reduced-motion: reduce){
  .glass .wk-rim{animation:none}
  .btn:hover{transform:none}
  #stage{transition:none}
}
/* The script adds .wk-tight, then .wk-tighter, when a client's details would not fit the screen height. */
.wk-tight .wk-index{display:none}
.wk-tight:not(.wk-flat) .wk-eyebrow{display:none}
.wk-tight .wk-col{padding-top:48px}
.wk-tight .case-meta{margin-bottom:.6rem}
.wk-tight .case-name{font-size:clamp(1.9rem,2.6vw,2.7rem);margin-bottom:.7rem}
.wk-tight .wk-goal{margin-bottom:.7rem;font-size:1rem}
.wk-tight .stack.svc{margin-bottom:.75rem}
.wk-tight .build{margin-bottom:.75rem}
.wk-tight .build li{padding-block:7px;font-size:.88rem;line-height:1.42}
.wk-tight .res-stats strong{font-size:1.7rem}
.wk-tight .res-head{font-size:1.4rem;margin-top:.35rem}
.wk-tight .res-sub{font-size:.82rem;margin-top:.3rem}
.wk-tighter .wk-col{padding-top:40px}
.wk-tighter .case-kind{margin-bottom:.3rem}
.wk-tighter .case-name{font-size:clamp(1.6rem,2.1vw,2.1rem);margin-bottom:.5rem}
.wk-tighter .wk-goal{font-size:.93rem;margin-bottom:.55rem}
.wk-tighter .stack li{font-size:.58rem;padding:.34rem .45rem}
.wk-tighter .stack.svc{margin-bottom:.55rem}
.wk-tighter .build{margin-bottom:.55rem}
.wk-tighter .build li{padding-block:5px;font-size:.82rem;line-height:1.38;grid-template-columns:7rem minmax(0,1fr)}
.wk-tighter .wk-result{padding:9px 12px 10px}
.wk-tighter .res-stats{gap:6px 24px}
.wk-tighter .res-stats strong{font-size:1.45rem}
.wk-tighter .res-head{font-size:1.25rem}
}


/* ---------- theme additions ---------- */
.admin-bar .nav{top:32px}
@media (max-width:782px){.admin-bar .nav{top:46px}}
.contact-list a.v{color:var(--ink);text-decoration:none}
.contact-list a.v:hover{color:var(--beacon)}
.sv-more{display:inline-flex;align-items:center;gap:.5em;margin-top:.1rem;font:500 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--beacon);text-decoration:none}
.sv-more:hover{color:var(--ink)}
.sv-item.on .sv-more{opacity:1}

/* ---------- inner pages (privacy, service pages, 404) ---------- */
.cc-inner .veil{background:radial-gradient(60rem 40rem at 85% -10%,var(--glint-2),transparent 60%),radial-gradient(40rem 30rem at -10% 110%,var(--edge-b),transparent 60%)}
.page-main{position:relative;z-index:2;padding-block:clamp(120px,18vh,180px) 72px}
.page-hero{max-width:52rem;margin:0 0 clamp(36px,6vh,64px)}
.page-hero h1{font:900 clamp(2.8rem,7vw,5.6rem)/.9 var(--f-display);text-transform:uppercase;letter-spacing:.005em;margin:0 0 1.1rem;text-wrap:balance}
.page-intro{font-size:clamp(1.12rem,1.6vw,1.35rem);line-height:1.45;color:var(--ink-soft);max-width:44ch;margin:0 0 1.6rem;text-wrap:pretty}
.page-date{font:400 .74rem/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mist);margin:0}
.page-hero--404{min-height:60vh;display:flex;flex-direction:column;justify-content:center}
.prose{max-width:46rem;color:var(--ink-soft)}
.prose > *:first-child{margin-top:0}
.prose h2{font:800 clamp(1.7rem,2.6vw,2.2rem)/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);margin:2.4rem 0 .8rem;padding-top:1.6rem;border-top:1px solid var(--rule);text-wrap:balance}
.prose h3{font:600 1.05rem/1.4 var(--f-body);color:var(--ink);margin:1.6rem 0 .4rem}
.prose p{margin:0 0 1rem}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.25rem}
.prose li{margin:.35rem 0}
.prose li::marker{color:var(--beacon)}
.prose a{color:var(--ice);text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--ink)}
.prose strong{color:var(--ink)}
.prose em{font-style:normal;color:var(--beacon)}
.prose code{font:400 .86em/1.4 var(--f-mono);color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;margin:0 0 1rem}
.prose .wp-block-table{overflow-x:auto;margin:0 0 1.2rem;border:1px solid var(--rule);border-radius:8px}
.prose .wp-block-table table{margin:0;min-width:30rem}
.prose th,.prose td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{font:500 .68rem/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ice);background:var(--glint-2)}
.prose tr:last-child td{border-bottom:0}
.prose .wp-block-group.is-style-cc-callout,.prose .cc-callout{border:1px solid var(--rule-strong);border-radius:12px;background:var(--glass);padding:20px 22px;margin:0 0 2rem}
.prose .cc-callout h2,.prose .cc-callout h3{margin-top:0;padding-top:0;border:0;font:500 .72rem/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--beacon)}
.prose .cc-callout ul{margin-bottom:0}
.prose--item{padding-block:1.4rem;border-top:1px solid var(--rule)}
.cta-panel{max-width:46rem;margin:clamp(48px,8vh,88px) 0 0;padding:clamp(24px,4vw,40px);transform:none}
.cta-panel h2{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.cta-panel .lede{margin-bottom:1.6rem}
.cc-inner .site-foot{padding-block:28px 40px}
@media (max-width:640px){.page-main{padding-block:104px 48px}.cta-panel{padding:22px 18px}}