/* IntellChromatics — site.css
   One accent (terracotta), flat paper/ink, 1px rules, sharp corners. */

:root{
  --paper:#FAFAFA;
  --paper-2:#F1F0EC;
  --ink:#121212;
  --ink-2:#1b1b1b;
  --mute:#6a6a64;
  --mute-d:#9a9a93;
  --line:rgba(18,18,18,.14);
  --line-d:rgba(250,250,250,.16);
  --accent:#B4532F;
  --accent-d:#8f3f22;
  --r:4px;
  --serif:'Fraunces','Iowan Old Style','Georgia',serif;
  --sans:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  --wrap:min(1240px,calc(100vw - 48px));
  --head-h:68px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--accent);color:#fff}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.02;letter-spacing:-.02em;margin:0;font-variation-settings:'opsz' 144}
p{margin:0 0 1.1em}
.wrap{width:var(--wrap);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- reveal base (only when JS is on) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}
.js .imask{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.js .imask.in{clip-path:inset(0 0 0 0)}
.js .imask img{transform:scale(1.18);transition:transform 1.6s var(--ease)}
.js .imask.in img{transform:scale(1)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*55ms + var(--base,0ms))}
.split.in .w>span{transform:none}
.no-js .split .w>span{transform:none}

/* ---------- loader / page curtain ---------- */
.curtain{position:fixed;inset:0;z-index:999;background:var(--ink);color:var(--paper);display:grid;place-items:center;clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease);pointer-events:all}
.curtain.out{clip-path:inset(0 0 100% 0);pointer-events:none}
.curtain.leave{clip-path:inset(100% 0 0 0);transition:none}
.curtain.leave.go{clip-path:inset(0 0 0 0);transition:clip-path .6s cubic-bezier(.7,0,.2,1)}
.curtain svg{width:min(220px,50vw);height:auto;overflow:visible}
.curtain path{fill:none;stroke:var(--paper);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.curtain path.t{stroke:var(--accent)}
.curtain .go-draw path{animation:draw 1.1s var(--ease) forwards}
.curtain .go-draw path:nth-child(2){animation-delay:.2s}
.curtain .go-draw path:nth-child(3){animation-delay:.4s}
.curtain small{display:block;margin-top:18px;text-align:center;font-family:var(--serif);font-size:15px;letter-spacing:.3em;text-transform:uppercase;opacity:.7}
@keyframes draw{to{stroke-dashoffset:0}}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:60}

/* ---------- header ---------- */
.head{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--head-h);background:var(--paper);border-bottom:1px solid var(--line);transition:transform .5s var(--ease)}
.head.hide{transform:translateY(-100%)}
.head .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.mark{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:-.03em;text-decoration:none;display:flex;align-items:baseline;gap:2px}
.mark i{font-style:normal;color:var(--accent)}
.mark b{font-weight:300;font-style:italic;margin-left:.12em}
.nav{display:flex;gap:6px}
.nav a{position:relative;text-decoration:none;font-size:15px;font-weight:500;padding:8px 14px;color:var(--ink)}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current]{color:var(--accent)}
.nav .cta{margin-left:10px;background:var(--ink);color:var(--paper);border-radius:var(--r);padding:8px 16px;transition:background .3s}
.nav .cta::after{display:none}
.nav .cta:hover{background:var(--accent)}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}
main{padding-top:var(--head-h)}

/* ---------- type helpers ---------- */
.k{font-family:var(--serif);font-style:italic;color:var(--accent);font-weight:400}
.lede{font-size:clamp(19px,1.9vw,24px);line-height:1.5;max-width:34em}
.big{font-size:clamp(44px,8.2vw,132px)}
.h2{font-size:clamp(34px,5vw,72px)}
.h3{font-size:clamp(26px,3vw,40px)}
.mute{color:var(--mute)}
.dark{background:var(--ink);color:var(--paper)}
.dark .mute{color:var(--mute-d)}
.alt{background:var(--paper-2)}
.sec{padding:clamp(72px,11vw,160px) 0;position:relative}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.dark .rule{border-color:var(--line-d)}
.scribble{position:relative;display:inline-block}
.scribble svg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.3em;overflow:visible}
.scribble path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .9s}
.in .scribble path,.scribble.in path{stroke-dashoffset:0}
.no-js .scribble path{stroke-dashoffset:0}

/* ---------- buttons ---------- */
.btn{--bg:var(--ink);--fg:var(--paper);display:inline-flex;align-items:center;gap:12px;position:relative;overflow:hidden;isolation:isolate;text-decoration:none;font-weight:600;font-size:16px;padding:16px 26px;border-radius:var(--r);background:var(--bg);color:var(--fg);border:1px solid var(--bg);transition:transform .25s ease,color .4s,border-color .4s;will-change:transform;cursor:pointer;font-family:var(--sans)}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn:hover::before{transform:none}
.btn:hover{border-color:var(--accent)}
.btn .ar{display:inline-block;transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn.ghost{--bg:transparent;--fg:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{color:#fff}
.dark .btn.ghost{--fg:var(--paper);border-color:var(--paper)}
.dark .btn:not(.ghost){--bg:var(--paper);--fg:var(--ink)}
.dark .btn:not(.ghost):hover{color:#fff}
.btn:active{transform:scale(.97)}
.link{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease),color .3s;padding-bottom:2px}
.link:hover{background-size:0 1px;background-position:100% 100%;color:var(--accent)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(100svh - var(--head-h));display:flex;align-items:center;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .wrap{position:relative;z-index:1;padding:clamp(48px,8vw,110px) 0}
.hero-home .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,80px);align-items:end}
.hero h1 .wt{font-variation-settings:'opsz' 144,'wght' var(--wt,600)}
.hero .lede{margin:28px 0 36px}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.fader{position:relative;aspect-ratio:4/5;background:var(--ink);overflow:hidden;border-radius:var(--r);border:1px solid var(--line)}
.fader img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 0 100%);transition:clip-path 1.2s var(--ease);transform:scale(1.04)}
.fader img.on{clip-path:inset(0 0 0 0);z-index:1}
.fader img.prev{clip-path:inset(0 100% 0 0);z-index:0;transition:clip-path 1.2s var(--ease) .1s}
.fader-dots{position:absolute;left:16px;bottom:16px;z-index:3;display:flex;gap:6px}
.fader-dots button{width:28px;height:3px;border:0;background:rgba(255,255,255,.4);padding:0;cursor:pointer;position:relative;overflow:hidden}
.fader-dots button::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:0}
.fader-dots button.on::after{animation:fill 5s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.fader-cap{position:absolute;right:16px;bottom:12px;z-index:3;color:#fff;font-family:var(--serif);font-style:italic;font-size:15px}
.page-hero{padding:clamp(48px,8vw,110px) 0 clamp(40px,6vw,80px);position:relative;overflow:hidden}
.page-hero canvas{position:absolute;inset:0;width:100%;height:100%}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{max-width:13em}
.page-hero .lede{margin-top:28px}
.page-hero .actions{margin-top:34px}
.ph-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:end}
.crumb{font-size:14px;color:var(--mute);margin-bottom:26px}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--accent)}

/* ---------- plates (images with caption, parallax) ---------- */
.plate{position:relative;overflow:hidden;border-radius:var(--r);background:var(--ink)}
.plate>img{width:100%;height:100%;object-fit:cover}
.plate.par>img{height:118%;margin-top:-9%;will-change:transform}
.fig{border:1px solid var(--line);background:#fff;border-radius:var(--r);overflow:hidden}
.fig img{width:100%;height:auto}
.dark .fig{border-color:var(--line-d)}
.cap{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--mute);margin-top:10px}

/* ---------- marquee ---------- */
.marq{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:22px 0;background:var(--paper)}
.marq-t{display:inline-flex;animation:marq 38s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
.marq span{font-family:var(--serif);font-size:clamp(28px,4vw,52px);font-weight:300;font-style:italic;padding-right:.6em}
.marq span::after{content:"/";color:var(--accent);padding-left:.6em;font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- scrub text ---------- */
.scrub{font-family:var(--serif);font-size:clamp(28px,4.1vw,60px);line-height:1.18;letter-spacing:-.015em;font-weight:400}
.scrub .sw{opacity:.16;transition:opacity .35s}
.scrub .sw.on{opacity:1}
.scrub em{color:var(--accent)}

/* ---------- pinned horizontal ---------- */
.hs{position:relative}
.hs-pin{position:sticky;top:var(--head-h);height:calc(100svh - var(--head-h));overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hs-head{width:var(--wrap);margin:0 auto 34px;display:flex;justify-content:space-between;align-items:end;gap:24px}
.hs-track{display:flex;gap:clamp(20px,3vw,48px);padding-inline:max(24px,calc((100vw - 1240px)/2));width:max-content;will-change:transform}
.hp{flex:none;display:block;text-decoration:none;position:relative;color:inherit}
.hp .num{font-family:var(--serif);font-size:clamp(70px,11vw,170px);font-weight:300;line-height:.8;letter-spacing:-.05em;color:var(--accent)}
.hp h3{font-size:clamp(22px,2.4vw,34px);margin-top:16px;transition:color .3s}
.hp:hover h3{color:var(--accent)}
.hp p{margin:10px 0 0;color:var(--mute);font-size:15px;max-width:26em}
.hp .plate{transition:clip-path .6s var(--ease)}
.hp .plate img{transition:transform 1.1s var(--ease)}
.hp:hover .plate img{transform:scale(1.07)}
.hp-a{width:clamp(250px,26vw,380px)}.hp-a .plate{height:clamp(240px,32vh,380px)}
.hp-b{width:clamp(280px,36vw,520px)}.hp-b .plate{height:clamp(200px,26vh,320px)}
.hp-c{width:clamp(220px,22vw,320px);align-self:flex-start}
.hp-d{width:clamp(260px,24vw,360px)}.hp-d .plate{height:clamp(300px,42vh,480px)}
.hp-e{width:clamp(240px,27vw,400px);align-self:flex-end}.hp-e .plate{height:clamp(180px,24vh,280px)}
.hp-go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:600;font-size:15px}
.hs-hint{font-size:14px;color:var(--mute);display:flex;align-items:center;gap:10px}
.hs-hint i{display:block;width:44px;height:1px;background:var(--mute);position:relative;overflow:hidden}
.hs-hint i::after{content:"";position:absolute;inset:0;background:var(--accent);animation:hint 2s var(--ease) infinite}
@keyframes hint{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.hs-bar{width:var(--wrap);margin:34px auto 0;height:1px;background:var(--line);position:relative}
.hs-bar i{position:absolute;inset:-1px auto -1px 0;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0}

/* ---------- reel (drag carousel) ---------- */
.reel{position:relative}
.reel-vp{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px max(24px,calc((100vw - 1240px)/2)) 4px;cursor:grab;scroll-padding-inline:max(24px,calc((100vw - 1240px)/2))}
.reel-vp::-webkit-scrollbar{display:none}
.reel-vp.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.reel-vp>*{flex:none;scroll-snap-align:start;width:min(78vw,var(--rw,520px))}
.reel-vp img{pointer-events:none;-webkit-user-drag:none}
.reel-ui{width:var(--wrap);margin:26px auto 0;display:flex;align-items:center;gap:20px}
.reel-bar{flex:1;height:1px;background:var(--line);position:relative}
.dark .reel-bar{background:var(--line-d)}
.reel-bar i{position:absolute;left:0;top:-1px;height:3px;width:20%;background:var(--accent);transform-origin:0}
.reel-btn{width:48px;height:48px;border-radius:50%;border:1px solid currentColor;background:none;color:inherit;cursor:pointer;font-size:18px;transition:background .3s,color .3s,transform .25s}
.reel-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.reel-btn:active{transform:scale(.9)}
.reel-btn[disabled]{opacity:.3;pointer-events:none}

/* ---------- story (sticky stage + steps) ---------- */
.story{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,6vw,96px);width:var(--wrap);margin-inline:auto;align-items:start}
.story.rev{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.story.rev .story-stage{order:2}
.story-stage{position:sticky;top:calc(var(--head-h) + 28px);height:calc(100svh - var(--head-h) - 56px);display:flex;align-items:center}
.stage-in{position:relative;width:100%;aspect-ratio:var(--ar,16/10);max-height:100%;margin:auto}
.stage-in .st{position:absolute;inset:0;clip-path:inset(0 0 0 100%);transition:clip-path 1s var(--ease);display:flex;align-items:center}
.stage-in .st.on{clip-path:inset(0);z-index:2}
.stage-in .st.past{clip-path:inset(0 100% 0 0)}
.stage-in .st img{width:100%;height:100%;object-fit:contain;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.stage-in .st.cover img{object-fit:cover;border:0;background:var(--ink)}
.dark .stage-in .st img{border-color:var(--line-d)}
.steps{list-style:none;margin:0;padding:0;position:relative}
.step{min-height:78svh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .6s}
.step.on{opacity:1}
.step:first-child{min-height:70svh}
.step .n{font-family:var(--serif);font-size:clamp(70px,9vw,140px);line-height:.85;font-weight:300;color:var(--accent);letter-spacing:-.05em;margin-bottom:12px}
.step h3{font-size:clamp(28px,3.4vw,50px);margin-bottom:16px}
.step p{max-width:30em;color:var(--mute)}
.dark .step p{color:var(--mute-d)}
.step .more{margin-top:10px}
.prog{position:absolute;left:-28px;top:0;bottom:0;width:1px;background:var(--line)}
.prog i{position:absolute;inset:0 0 auto 0;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:0 0}
.dark .prog{background:var(--line-d)}

/* ---------- split / editorial rows ---------- */
.split2{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,6vw,100px);align-items:start}
.split2.flip{grid-template-columns:7fr 5fr}
.split2.flip>:first-child{order:2}
.sticky{position:sticky;top:calc(var(--head-h) + 40px)}
.prose p{max-width:36em}
.prose p:first-of-type{font-size:1.18em}
.cols2{columns:2;column-gap:56px}
.cols2 p{break-inside:avoid}
.pull{font-family:var(--serif);font-size:clamp(28px,3.8vw,56px);line-height:1.15;letter-spacing:-.015em;font-weight:400;max-width:22em}
.pull em{color:var(--accent)}

/* ---------- accordion (about values) ---------- */
.acc{border-top:1px solid var(--line-d)}
.acc-i{border-bottom:1px solid var(--line-d)}
.acc-b{display:flex;align-items:baseline;gap:clamp(16px,3vw,48px);width:100%;text-align:left;background:none;border:0;color:inherit;cursor:pointer;padding:clamp(20px,3vw,34px) 0;font-family:var(--serif);font-size:clamp(28px,4.6vw,68px);font-weight:400;letter-spacing:-.02em;line-height:1.05;transition:color .3s,padding .5s var(--ease)}
.acc-b small{font-family:var(--sans);font-size:15px;color:var(--mute-d);min-width:2.2em;letter-spacing:0}
.acc-b:hover{color:var(--accent);padding-left:14px}
.acc-b .pm{margin-left:auto;width:22px;height:22px;position:relative;flex:none;align-self:center}
.acc-b .pm::before,.acc-b .pm::after{content:"";position:absolute;left:0;right:0;top:10px;height:1.5px;background:currentColor;transition:transform .5s var(--ease)}
.acc-b .pm::after{transform:rotate(90deg)}
.acc-i.open .pm::after{transform:rotate(0)}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.acc-i.open .acc-p{grid-template-rows:1fr}
.acc-p>div{overflow:hidden}
.acc-p p{max-width:36em;color:var(--mute-d);padding:0 0 32px calc(2.2em + clamp(16px,3vw,48px));font-size:19px}

/* ---------- index list (services) ---------- */
.idx{border-top:1px solid var(--line)}
.idx a{display:grid;grid-template-columns:70px 1fr 170px auto;gap:20px;align-items:baseline;padding:clamp(20px,3vw,34px) 0;border-bottom:1px solid var(--line);text-decoration:none;position:relative;transition:padding .5s var(--ease),color .3s}
.idx a:hover{padding-left:18px;color:var(--accent)}
.idx small{color:var(--mute);font-size:15px}
.idx h3{font-size:clamp(26px,4.2vw,62px);font-weight:400;letter-spacing:-.025em}
.idx .ar{font-size:28px;transition:transform .5s var(--ease)}
.idx a:hover .ar{transform:translateX(8px)}

/* ---------- list typographic ---------- */
.tlist{list-style:none;margin:0;padding:0;counter-reset:t}
.tlist li{counter-increment:t;display:grid;grid-template-columns:3.2em 1fr;padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.15;transition:padding .4s var(--ease),color .3s}
.tlist li::before{content:counter(t,decimal-leading-zero);font-family:var(--sans);font-size:14px;color:var(--mute);padding-top:.6em}
.tlist li:hover{padding-left:12px;color:var(--accent)}
.dark .tlist li{border-color:var(--line-d)}

/* ---------- morph divider ---------- */
.morph{display:block;width:100%;height:clamp(40px,7vw,100px);margin-bottom:-1px}
.morph path{fill:var(--ink)}
.morph.flip{transform:scaleY(-1);margin:-1px 0 0}

/* ---------- CTA band ---------- */
.cta-band{text-align:left}
.cta-band h2{max-width:11em}
.cta-band .actions{margin-top:40px}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:34px 28px}
.f{position:relative}
.f.full{grid-column:1/-1}
.f input,.f textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:26px 28px 10px 0;font:inherit;font-size:18px;color:var(--ink);outline:0;resize:vertical}
.f textarea{min-height:120px}
.f label{position:absolute;left:0;top:26px;color:var(--mute);pointer-events:none;transition:transform .4s var(--ease),color .3s,font-size .4s var(--ease);transform-origin:0 0}
.f input:focus+label,.f input:not(:placeholder-shown)+label,.f textarea:focus+label,.f textarea:not(:placeholder-shown)+label{transform:translateY(-22px);font-size:13px;color:var(--accent)}
.f .ln{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0;transition:transform .6s var(--ease)}
.f input:focus~.ln,.f textarea:focus~.ln{transform:scaleX(1)}
.f .ok{position:absolute;right:2px;bottom:12px;width:18px;height:18px;opacity:0;transition:opacity .3s}
.f .ok path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease)}
.f input:valid:not(:placeholder-shown)~.ok,.f textarea:valid:not(:placeholder-shown)~.ok{opacity:1}
.f input:valid:not(:placeholder-shown)~.ok path,.f textarea:valid:not(:placeholder-shown)~.ok path{stroke-dashoffset:0}
.f input:invalid:not(:placeholder-shown):not(:focus){border-color:var(--accent)}
.seg{grid-column:1/-1;border:0;padding:0;margin:0}
.seg legend{color:var(--mute);font-size:14px;margin-bottom:12px;padding:0}
.seg div{display:inline-flex;border:1px solid var(--ink);border-radius:var(--r);overflow:hidden}
.seg input{position:absolute;opacity:0}
.seg label{padding:12px 28px;cursor:pointer;transition:background .3s,color .3s;font-weight:500}
.seg input:checked+label{background:var(--ink);color:var(--paper)}
.seg input:focus-visible+label{outline:2px solid var(--accent);outline-offset:-4px}
.seg label+input+label{border-left:1px solid var(--ink)}
.submit{grid-column:1/-1}
.btn.sending{pointer-events:none;opacity:.7}
.contact-lines a,.contact-lines p{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.25;margin:0 0 6px;display:block;text-decoration:none}
.contact-lines span{display:block;color:var(--mute);font-size:14px;margin:26px 0 4px;font-family:var(--sans)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:clamp(56px,8vw,110px) 0 28px;overflow:hidden}
.foot-big{font-family:var(--serif);font-size:clamp(54px,15.5vw,250px);font-weight:300;letter-spacing:-.05em;line-height:.85;margin:0 0 clamp(36px,6vw,80px);white-space:nowrap;font-style:italic;color:var(--paper)}
.foot-big b{font-weight:700;font-style:normal;color:var(--accent)}
.foot-row{display:flex;flex-wrap:wrap;gap:30px 60px;justify-content:space-between;border-top:1px solid var(--line-d);padding-top:28px;font-size:15px;color:var(--mute-d)}
.foot-row nav{display:flex;flex-wrap:wrap;gap:6px 24px}
.foot-row a{text-decoration:none;color:var(--paper)}
.foot-row a:hover{color:var(--accent)}

/* ---------- misc ---------- */
.thanks{min-height:calc(100svh - var(--head-h));display:flex;align-items:center}
.thanks h1{font-size:clamp(60px,12vw,200px)}
.pad-t0{padding-top:0}
.svc-next{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.svc-next a{padding:clamp(28px,4vw,56px) 24px;text-decoration:none;transition:background .4s,color .4s}
.svc-next a:last-child{text-align:right;border-left:1px solid var(--line)}
.svc-next a:hover{background:var(--ink);color:var(--paper)}
.svc-next small{display:block;color:var(--mute);margin-bottom:8px;font-size:14px}
.svc-next span{font-family:var(--serif);font-size:clamp(22px,3vw,40px);line-height:1.1}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav{position:fixed;inset:var(--head-h) 0 0 0;background:var(--paper);flex-direction:column;gap:0;padding:28px 24px;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);visibility:hidden}
  .nav.open{clip-path:inset(0);visibility:visible}
  .nav a{font-family:var(--serif);font-size:38px;padding:12px 0;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav .cta{margin:24px 0 0;text-align:center;font-family:var(--sans);font-size:17px;padding:16px;border-bottom:0}
  .burger{display:block}
  .hero-home .wrap,.ph-split,.split2,.split2.flip{grid-template-columns:1fr}
  .split2.flip>:first-child{order:0}
  .fader{aspect-ratio:16/10}
  .sticky{position:static}
  .story,.story.rev{grid-template-columns:1fr;gap:0}
  .story.rev .story-stage{order:0}
  .story-stage{top:var(--head-h);height:44svh;z-index:5;background:var(--paper);padding:12px 0;margin-inline:-24px;padding-inline:24px}
  .dark .story-stage{background:var(--ink)}
  .step{min-height:60svh}
  .prog{display:none}
  .cols2{columns:1}
  .idx a{grid-template-columns:44px 1fr auto}
  .idx-prev{display:none}
  .form{grid-template-columns:1fr}
  .hs-pin{position:static;height:auto;display:block;padding-bottom:20px}
  .hs{height:auto!important}
  .hs-track{width:auto!important;transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;align-items:flex-start}
  .hs-track>*{scroll-snap-align:start}
  .hs-bar,.hs-hint i{display:none}
  .hs-head{flex-direction:column;align-items:flex-start;gap:10px}
  .hp-c,.hp-e{align-self:flex-start}
  .svc-next{grid-template-columns:1fr}
  .svc-next a:last-child{text-align:left;border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  body{font-size:16px}
  .foot-big{font-size:17vw}
}
/* animation preferences intentionally not blocked: the site is animation-led */

/* ---------- additions ---------- */
.hero h1[data-wt]{font-variation-settings:'opsz' 144,'wght' var(--wt,460)}
.split2>*,.story>*{min-width:0}
.foot-big{font-size:clamp(40px,10.4vw,170px)}
.idx .thumb{display:block;width:170px;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);filter:grayscale(1);transition:filter .5s;align-self:center}
.idx a:hover .thumb{filter:none}
.hs-head h2{max-width:10em}
.collage{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
.page-hero h1.big{max-width:12em}
@media (max-width:980px){
  .collage>*{grid-column:1/-1!important;margin-top:0!important}
  .idx a{grid-template-columns:44px 1fr auto}
  .idx .thumb{display:block;grid-column:2/-1;width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--r);margin-top:6px}
  .idx a:hover{padding-left:0}
}
@media (max-width:980px){.idx .ar{grid-column:3;grid-row:1}}

/* ---------- video heroes & bands ---------- */
.vhero{position:relative;min-height:calc(100svh - var(--head-h));display:flex;align-items:flex-end;color:var(--paper);background:var(--ink);overflow:hidden}
.vhero.short{min-height:min(78svh,760px)}
.vhero video,.vband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vhero video.live,.vband video.live{opacity:1}
.vposter{position:absolute;inset:0;background-size:cover;background-position:center}
.vhero::after,.vband::after{content:"";position:absolute;inset:0;background:rgba(18,18,18,.52);z-index:1}
.vhero .wrap{position:relative;z-index:2;padding:clamp(56px,9vw,130px) 0 clamp(48px,6vw,90px)}
.vhero h1{color:var(--paper);max-width:12em}
.vhero .lede{color:rgba(250,250,250,.88);margin:26px 0 34px}
.vhero .k{color:#E39A78}
.vhero .btn{--bg:var(--paper);--fg:var(--ink)}
.vhero .btn.ghost{--bg:transparent;--fg:var(--paper);border-color:var(--paper)}
.vhero .btn:hover,.vband .btn:hover{color:#fff}
.vhero .crumb,.vhero .crumb a{color:rgba(250,250,250,.7)}
.vctl{position:absolute;right:24px;bottom:24px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(250,250,250,.6);background:rgba(18,18,18,.35);color:#fff;cursor:pointer;font-size:12px;letter-spacing:0;transition:background .3s,transform .25s}
.vctl:hover{background:var(--accent);border-color:var(--accent)}
.vctl:active{transform:scale(.92)}
.tagline{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(18px,2vw,26px);color:rgba(250,250,250,.85);margin:0 0 22px}
.vband{position:relative;min-height:min(86svh,820px);display:flex;align-items:center;color:var(--paper);background:var(--ink);overflow:hidden}
.vband .wrap{position:relative;z-index:2;padding:clamp(60px,9vw,130px) 0}
.vband.r .vt{margin-left:auto}
.vt{max-width:34em}
.vt h2{margin-bottom:22px}
.vt p{color:rgba(250,250,250,.88);font-size:1.08em}
.vband .k{color:#E39A78}
.vband .btn{--bg:var(--paper);--fg:var(--ink)}
.quoteline{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,2.6vw,36px);line-height:1.2;margin-top:28px;color:#fff}

/* ---------- press / recognition ---------- */
.press{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.press a{flex:1 1 180px;display:grid;place-items:center;height:110px;padding:18px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .4s}
.press a:hover{background:#fff}
.press img{max-height:56px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .4s,opacity .4s}
.press a:hover img{filter:none;opacity:1}
.recog{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);align-items:center;justify-content:space-between;padding:0 0 clamp(36px,5vw,64px);margin-bottom:clamp(36px,5vw,64px);border-bottom:1px solid var(--line-d)}
.recog img{height:clamp(70px,8vw,110px);width:auto;border-radius:var(--r)}
.recog p{font-family:var(--serif);font-size:clamp(20px,2.2vw,30px);line-height:1.15;max-width:11em;margin:0}

/* ---------- legal ---------- */
.legal{max-width:52em;margin-inline:auto}
.legal h1,.legal h2,.legal h3{margin:1.6em 0 .5em;font-weight:600}
.legal h2{font-size:clamp(26px,3vw,38px)}.legal h3{font-size:clamp(20px,2vw,26px)}
.legal p,.legal li{color:#2b2b2b}
.legal a{color:var(--accent)}
.legal table{border-collapse:collapse;width:100%;font-size:15px;display:block;overflow-x:auto}
.legal td,.legal th{border:1px solid var(--line);padding:8px 10px;vertical-align:top}

.consent{grid-column:1/-1;font-size:14px;color:var(--mute);margin:0}
.consent a{color:var(--accent)}
.addr{font-style:normal;font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.25}
@media (max-width:980px){.vctl{right:16px;bottom:16px}.vband.r .vt{margin-left:0}}

/* ---------- tall infographic reels + light accordion ---------- */
.tallreel .reel-vp>*{width:auto;flex:none}
.tallreel .reel-vp img{height:min(80vh,880px);width:auto;max-width:none}
.acc.light,.acc.light .acc-i{border-color:var(--line)}
.acc.light .acc-b small,.acc.light .acc-p p{color:var(--mute)}
.acc.light .acc-p p{color:#3a3a36}
.acc-b{text-align:left}

img{height:auto}

/* =====================================================
   v3 — readable video panels, natural-ratio images,
   stacked document columns, own diagrams
   ===================================================== */
.vhero::after,.vband::after{background:rgba(18,18,18,.22)}
.vhero{align-items:flex-end;min-height:min(84svh,820px)}
.vhero.short{min-height:min(80svh,780px)}
.vhero .wrap{padding:clamp(40px,6vw,90px) 0}
.vpanel,.vband .vt{background:var(--ink);color:var(--paper);padding:clamp(26px,3.6vw,52px);max-width:min(740px,100%)}
.vpanel h1{font-size:clamp(34px,4.9vw,74px)!important;max-width:none}
.vpanel .lede{font-size:clamp(17px,1.5vw,20px);margin:20px 0 28px;max-width:none}
.vpanel .crumb{margin-bottom:18px}
.vpanel .tagline{font-size:clamp(16px,1.5vw,20px);margin-bottom:16px;color:#E39A78}
.vband{align-items:center;min-height:min(80svh,760px)}
.vband .wrap{padding:clamp(48px,7vw,100px) 0}
.vband .vt{max-width:min(620px,100%)}
.vband .vt h2{font-size:clamp(30px,3.8vw,56px)}
.vband.r .vt{margin-left:auto}
.vband .vt p{font-size:1.02em}

/* services index strip */
.svcidx{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svcidx a{display:flex;gap:14px;align-items:baseline;padding:20px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);line-height:1.2;transition:background .35s,color .35s}
.svcidx a small{font-family:var(--sans);font-size:13px;color:var(--accent);min-width:1.6em}
.svcidx a:hover{background:var(--ink);color:var(--paper)}

/* footer recognition — tight */
.recog{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;justify-content:flex-start;padding:0 0 28px;margin-bottom:34px;border-bottom:1px solid var(--line-d)}
.recog p{flex:0 0 100%;max-width:none;font-family:var(--serif);font-size:20px;margin:0 0 6px}
.recog img{height:72px;width:72px;object-fit:contain;border-radius:var(--r);background:#1b1b1b}
.recog img.wide{width:auto;background:#fff}
.foot-row .soc{display:flex;gap:16px}

/* home services panels: natural ratio, no crop */
.hp .plate{width:max-content;max-width:none;height:var(--ph,300px);background:transparent}
.hp .plate img{height:100%;width:auto;max-width:none;object-fit:contain}
.hp-a{--ph:clamp(220px,32vh,340px);width:auto}.hp-b{--ph:clamp(180px,24vh,250px);width:auto}.hp-d{--ph:clamp(240px,38vh,400px);width:auto}.hp-e{--ph:clamp(170px,22vh,230px);width:auto}
.hp{min-width:260px}
.plate{background:transparent}
.plate>img{width:100%;height:100%;object-fit:cover}

/* stacked slices = one continuous document */
.stack{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;line-height:0}
.stack img{display:block;width:100%;height:auto}
.dark .stack{border-color:var(--line-d)}
.docsplit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:start}
.docsplit.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.docsplit.rev>.stack,.docsplit.rev>.docpair{order:-1}
.docpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);align-items:start}
.docs2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);align-items:start}
.sticky-note{position:sticky;top:calc(var(--head-h) + 36px)}

/* timeline diagram */
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 clamp(18px,2.4vw,36px);position:relative}
.tl::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0;transition:transform 1.6s var(--ease)}
.tl.in::before{transform:scaleX(1)}
.tl li{position:relative;padding-top:34px}
.tl li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .5s var(--ease);transition-delay:calc(var(--i,0)*.18s + .3s)}
.tl.in li::before{transform:scale(1)}
.tl i{display:block;font-family:var(--serif);font-style:italic;color:var(--accent);font-size:15px;margin-bottom:4px}
.tl h3{font-size:clamp(20px,1.9vw,26px);margin-bottom:8px}
.tl p{font-size:15px;color:var(--mute);margin:0;max-width:22em}
.dark .tl p{color:var(--mute-d)}
.dark .tl::before{background:var(--accent)}

/* radial diagram */
.rad{width:100%;height:auto;max-width:640px;display:block;margin-inline:auto;overflow:visible}
.rad line{stroke:var(--ink);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease)}
.in .rad line{stroke-dashoffset:0}
.rad .node{fill:var(--paper);stroke:var(--ink);stroke-width:1}
.rad .core{fill:var(--ink)}
.rad text{font-family:var(--serif);fill:var(--ink);font-size:17px;text-anchor:middle}
.rad .core+text,.rad .coretxt{fill:var(--paper);font-size:19px;font-weight:600}

/* knowledge spectrum (pentest) */
.spec{position:relative;padding:60px 0 20px}
.spec-bar{position:relative;height:1px;background:var(--ink);margin:0 4px}
.spec-bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:0;transition:transform 1.8s var(--ease)}
.in .spec-bar::after{transform:scaleX(1)}
.spec-bar span{position:absolute;top:-6px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:2px solid var(--accent)}
.spec-lab{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;gap:16px}
.spec-lab div:nth-child(2){text-align:center}.spec-lab div:nth-child(3){text-align:right}
.spec-lab b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em}
.spec-lab small{display:block;color:var(--mute);font-size:15px;margin-top:2px}
.spec-top{display:flex;justify-content:space-between;color:var(--mute);font-size:14px;position:absolute;top:0;left:0;right:0}

/* layered diagram (web) */
.layers{display:grid;gap:0;border-top:1px solid var(--line)}
.layers div{display:grid;grid-template-columns:minmax(150px,.7fr) 2fr;gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);transition:padding .4s var(--ease)}
.layers div:hover{padding-left:14px}
.layers b{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);font-weight:600;letter-spacing:-.02em}
.layers span{color:var(--mute);font-size:16px}
.layers div:nth-child(even){margin-left:clamp(0px,4vw,60px)}

/* compliance list */
.biglist{display:flex;flex-wrap:wrap;gap:6px 28px;font-family:var(--serif);font-size:clamp(34px,6vw,92px);line-height:1;letter-spacing:-.03em;font-weight:300}
.biglist span+span::before{content:"/";color:var(--accent);margin-right:28px}

@media (max-width:980px){
  .svcidx{grid-template-columns:repeat(2,1fr)}
  .docsplit,.docsplit.rev{grid-template-columns:1fr}
  .docsplit.rev>.stack,.docsplit.rev>.docpair{order:0}
  .docpair,.docs2{grid-template-columns:1fr}
  .sticky-note{position:static}
  .vpanel,.vband .vt{max-width:100%}
  .vhero,.vhero.short{min-height:min(76svh,640px)}
  .layers div,.layers div:nth-child(even){grid-template-columns:1fr;gap:4px;margin-left:0}
  .spec-lab{grid-template-columns:1fr;gap:14px}.spec-lab div,.spec-lab div:nth-child(2),.spec-lab div:nth-child(3){text-align:left}
  .hp{min-width:0}
}

.rad text{font-size:19px}.rad .coretxt{font-size:21px}

/* v4 — full video view again; solid panel only on the two bands whose videos carry their own logo text */
.vhero::after,.vband::after{background:rgba(18,18,18,.5)}
.vpanel{background:none;padding:0;max-width:none}
.vpanel h1{font-size:clamp(42px,7vw,112px)!important;max-width:12em}
.vpanel .lede{font-size:clamp(19px,1.9vw,24px);max-width:34em;margin:26px 0 34px}
.vpanel .tagline{font-size:clamp(18px,2vw,26px)}
.vhero .vpanel,.vband .vt{text-shadow:0 1px 14px rgba(0,0,0,.4)}
.vband .vt{background:none;padding:0;max-width:34em}
.vband .vt h2{font-size:clamp(34px,5vw,72px)}
.vband.solid::after{background:rgba(18,18,18,.08)}
.vband.solid .vt{background:var(--ink);padding:clamp(26px,3.6vw,52px);max-width:min(620px,100%);text-shadow:none}
.vband.solid .vt h2{font-size:clamp(30px,3.8vw,56px)}
.vhero,.vhero.short{min-height:min(84svh,820px)}

/* social icons */
.soc{display:flex;gap:10px;margin:10px 0 12px}
.soc a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-d);border-radius:50%;color:var(--paper);transition:background .3s,border-color .3s,transform .25s}
.soc a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.soc .ico{width:18px;height:18px;fill:currentColor}
.soc.light a{border-color:var(--ink);color:var(--ink)}
.soc.light a:hover{color:#fff}

.ico.line{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* v5 — video shown in full, text beside it (no overlay) for videos with baked-in logo text */
.vsplit{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);background:var(--ink);color:var(--paper);align-items:center}
.vsplit.r .vsv{order:2}
.vsplit.r{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
.vsv{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:#000}
.vsv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vsplit .vt{padding:clamp(28px,5vw,84px)}
.vsplit .vt h2{font-size:clamp(30px,3.8vw,60px);margin-bottom:22px}
.vsplit .vt p{color:rgba(250,250,250,.88)}
.vsplit .k{color:#E39A78}
.vsplit .btn{--bg:var(--paper);--fg:var(--ink)}
.vsplit .btn:hover{color:#fff}
@media (max-width:980px){.vsplit,.vsplit.r{grid-template-columns:1fr}.vsplit.r .vsv{order:0}}

/* v6 — solid dark hero (no video) + separate clear video section */
.shero{background:var(--ink);color:var(--paper);padding:clamp(56px,8vw,120px) 0}
.shero h1{font-size:clamp(40px,6.4vw,100px);max-width:13em;color:var(--paper)}
.shero .lede{color:rgba(250,250,250,.86);margin:26px 0 34px;max-width:34em}
.shero .k{color:#E39A78}
.shero .crumb,.shero .crumb a{color:rgba(250,250,250,.7)}
.shero .tagline{color:#E39A78}
.shero .btn{--bg:var(--paper);--fg:var(--ink)}
.shero .btn.ghost{--bg:transparent;--fg:var(--paper);border-color:var(--paper)}
.shero .btn:hover{color:#fff}
.vclear{background:var(--ink);padding:0 0 clamp(48px,7vw,100px)}
.vclear .vsv{border-radius:var(--r)}
.rad text{font-size:17px}.rad .coretxt{font-size:20px}

.rad text{font-size:19px}.rad .coretxt{font-size:21px}

/* dimmed hero videos: text stays readable */
.vhero.dim video,.vhero.dim .vposter{opacity:.42}
.vhero.dim::after{background:rgba(18,18,18,.12)}

/* split hero: dark text panel left, video right at full brightness */
.vsplit.vhs{min-height:min(84svh,780px);grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.vsplit.vhs .vt{padding:clamp(32px,5vw,84px)}
.vsplit.vhs h1{font-size:clamp(34px,4.2vw,68px);color:var(--paper);max-width:none}
.vsplit.vhs .lede{color:rgba(250,250,250,.86);font-size:clamp(17px,1.5vw,20px);margin:20px 0 28px}
.vsplit.vhs .crumb,.vsplit.vhs .crumb a{color:rgba(250,250,250,.65)}
.vsplit.vhs .vsv{align-self:center;aspect-ratio:16/9}
.vsplit.vhs .btn.ghost{--bg:transparent;--fg:var(--paper);border-color:var(--paper)}
@media (max-width:980px){.vsplit.vhs{grid-template-columns:1fr}.vsplit.vhs .vsv{aspect-ratio:16/9;min-height:0}}

/* ---------- image life: drift, hover, tilt, slice reveal ---------- */
@keyframes drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.05) translate3d(-.8%,-.8%,0)}}
.plate.imask img{animation:drift 18s ease-in-out infinite alternate;transition:filter .6s}
.plate.imask:hover img{filter:brightness(1.06) saturate(1.08)}
.plate,.stack,.fig{transition:transform .5s var(--ease);will-change:transform}
.stack{transition:transform .5s var(--ease),border-color .4s}
.stack:hover,.fig:hover{border-color:var(--accent)}
.js .stack img{opacity:0;transform:translateY(46px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .stack img.in{opacity:1;transform:none}
.stack img{transition:filter .5s}
.stack img:hover{filter:brightness(1.04)}
.idx .thumb{transition:filter .5s,transform .6s var(--ease)}
.idx a:hover .thumb{transform:scale(1.12) rotate(-1.5deg)}
.reel-vp .fig{transition:transform .5s var(--ease),border-color .4s}
.reel-vp .fig:hover{transform:scale(1.025);border-color:var(--accent)}
.reel-vp .fig img{transition:transform 1s var(--ease)}
.reel-vp .fig:hover img{transform:scale(1.04)}
.hp .plate{overflow:hidden}
.hp:hover .plate{transform:translateY(-6px)}
.stage-in .st img{transition:transform 1.4s var(--ease)}
.stage-in .st.on img{transform:scale(1.03)}
.recog img{transition:transform .5s var(--ease),filter .4s;filter:grayscale(.35)}
.recog img:hover{transform:translateY(-4px) scale(1.06);filter:none}


/* Team page "intercontinental" band: video 15% less opaque */
.vband.dim15 video,.vband.dim15 .vposter{opacity:.70}

/* ---------- continuous image motion: 4s of movement, then a 5s rest, forever ----------
   Uses the individual transform properties (scale / translate / rotate) so hover tilt still works on top. */
@keyframes cyc-zoom{0%{scale:1}22%{scale:1.07}44.4%,100%{scale:1}}
@keyframes cyc-float{0%{translate:0 0;rotate:0deg}22%{translate:0 -9px;rotate:-.35deg}44.4%,100%{translate:0 0;rotate:0deg}}
@keyframes cyc-nudge{0%{translate:0 0;scale:1}22%{translate:0 -5px;scale:1.08}44.4%,100%{translate:0 0;scale:1}}
.plate.imask img,.hp .plate img,.stage-in .st img{animation:cyc-zoom 9s ease-in-out infinite}
.stack,.reel-vp .fig,.fig,.hp .plate{animation:cyc-float 9s ease-in-out infinite}
.idx .thumb,.recog img{animation:cyc-nudge 9s ease-in-out infinite}
/* stagger so everything doesn't move at once (each still rests 5s) */
.plate.imask:nth-of-type(2n) img,.hp:nth-child(2n) .plate img,.idx a:nth-child(2n) .thumb,.recog img:nth-child(2n){animation-delay:1.5s}
.plate.imask:nth-of-type(3n) img,.hp:nth-child(3n) .plate img,.idx a:nth-child(3n) .thumb,.recog img:nth-child(3n),.reel-vp .fig:nth-child(2n){animation-delay:3s}
.stack:nth-of-type(2n),.hp:nth-child(2n) .plate,.reel-vp .fig:nth-child(3n){animation-delay:2s}
.plate.imask:hover img,.stack:hover,.reel-vp .fig:hover,.hp:hover .plate{animation-play-state:paused}

.scrub{font-size:clamp(26px,3.4vw,50px)}

/* scroll-fill text: unread words stay readable (mid grey), read words go full strength */
.scrub .sw{opacity:1!important;color:#6b6b64;transition:color .4s}
.scrub .sw.on{color:var(--ink)}
.dark .scrub .sw{color:#9b9b93}
.dark .scrub .sw.on{color:var(--paper)}
.scrub em .sw{color:#86594a}
.scrub em .sw.on{color:var(--accent)}
.dark .scrub em .sw{color:#c9957f}
.dark .scrub em .sw.on{color:#E39A78}

/* home services strip: never clip the heading, fit short screens */
.hs-pin{justify-content:flex-start;padding-top:clamp(14px,3vh,36px);overflow-y:visible;overflow-x:clip}
.hs-head{margin-bottom:clamp(14px,2.4vh,30px)}
.hs-bar{margin-top:clamp(14px,2.4vh,30px)}
.hp-a{--ph:clamp(170px,27vh,320px)}.hp-b{--ph:clamp(150px,21vh,240px)}.hp-d{--ph:clamp(190px,33vh,380px)}.hp-e{--ph:clamp(140px,19vh,220px)}
.hp h3{margin-top:12px}
.hp p{margin-top:6px}
@media (max-width:980px){.hs-pin{padding-top:0}}

/* extra diagram kinds: overlap, rings, compare bars */
.diag{width:100%;max-width:600px;height:auto;display:block;margin-inline:auto;overflow:visible}
.diag .dr{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease);transition-delay:calc(var(--i,0)*.25s)}
.in .diag .dr{stroke-dashoffset:0}
.diag .lens{fill:var(--accent);opacity:0;transition:opacity 1.2s .9s}
.in .diag .lens{opacity:.9}
.diag text{font-family:var(--serif);font-size:20px;fill:var(--ink);text-anchor:middle}
.diag .midt text{fill:#fff;font-size:19px;font-weight:600}
.diag .dot{fill:var(--ink)}
.diag .dott{fill:var(--paper);font-size:22px;font-weight:600}
.diag .pt{fill:var(--accent);opacity:0;transition:opacity .5s 1.2s}
.in .diag .pt{opacity:1}
.diag .ld{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease) 1s}
.in .diag .ld{stroke-dashoffset:0}
.diag .lt{text-anchor:start;font-size:19px}
.bars{position:relative;display:grid;gap:34px;padding:26px 0 8px}
.bar span{display:block;font-family:var(--serif);font-size:clamp(18px,1.7vw,24px);margin-bottom:10px}
.bar i{display:block;height:46px;background:var(--ink);width:0;transition:width 1.8s var(--ease)}
.bar i.acc{background:var(--accent)}
.in.bars .bar i,.in .bars .bar i{width:var(--w)}
.bar-mark{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed var(--mute)}
.bar-mark em{position:absolute;top:-6px;left:8px;font-style:italic;font-family:var(--serif);color:var(--mute);font-size:15px;white-space:nowrap}

/* compliance staircase */
.stairs{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:0;border-bottom:1px solid var(--ink)}
.stp{position:relative;padding:18px 18px 20px;border-left:1px solid var(--ink);background:var(--paper-2);transform-origin:bottom;transform:scaleY(.2);opacity:0;transition:transform 1s var(--ease),opacity .6s;transition-delay:calc(var(--i)*.28s)}
.in.stairs .stp,.in .stairs .stp{transform:none;opacity:1}
.stp.s0{min-height:130px}.stp.s1{min-height:215px}.stp.s2{min-height:300px;background:var(--accent);color:#fff;border-color:var(--accent)}
.stp span{position:absolute;top:12px;right:14px;font-family:var(--serif);font-style:italic;font-size:18px;opacity:.6}
.stp b{display:block;font-family:var(--serif);font-size:clamp(18px,1.8vw,24px);line-height:1.15;margin-bottom:8px;padding-right:22px}
.stp small{display:block;font-size:14px;line-height:1.4;opacity:.85}
@media (max-width:560px){.stp.s0{min-height:110px}.stp.s1{min-height:170px}.stp.s2{min-height:230px}.stp{padding:14px 10px}}

/* split hero: text panel hugs the video — no dead space */
.vsplit.vhs{align-items:stretch}
.vsplit.vhs .vt{padding:clamp(32px,4.5vw,72px) clamp(16px,2vw,32px) clamp(32px,4.5vw,72px) clamp(24px,4vw,72px);display:flex;flex-direction:column;justify-content:center}
.vsplit.vhs .vsv{align-self:stretch;aspect-ratio:auto;min-height:clamp(300px,32.5vw,560px)}
@media (max-width:980px){.vsplit.vhs .vsv{aspect-ratio:16/9;min-height:0}.vsplit.vhs .vt{padding:32px 24px}}
.stairs{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px}
.stp b,.stp small{overflow-wrap:anywhere}

/* vulnerability page: full-width hero video at 20% opacity under the text */
.vhero.dim20 video,.vhero.dim20 .vposter{opacity:.2}
.vhero.dim20::after{background:rgba(18,18,18,0)}

/* compliance staircase — three clearly different levels */
.stp.s0{background:#121212;color:#FAFAFA;border-color:#121212}
.stp.s1{background:#6b6b64;color:#fff;border-color:#6b6b64}
.stp.s2{background:var(--accent);color:#fff;border-color:var(--accent)}
.stairs{border-bottom-color:var(--ink)}

/* cloud platform logos */
.clouds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.clouds li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:26px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .4s,color .4s}
.clouds svg{width:auto;height:44px;max-width:100%;fill:currentColor;transition:transform .5s var(--ease),fill .3s}
.clouds span{font-size:13px;color:var(--mute);transition:color .3s}
.clouds li:hover{background:var(--ink);color:var(--paper)}
.clouds li:hover span{color:var(--mute-d)}
.clouds li:hover svg{transform:scale(1.12);fill:#E39A78}
@media (max-width:560px){.clouds{grid-template-columns:repeat(2,1fr)}}

/* auto-highlight uses the same look as hover */
.clouds li.lit{background:var(--ink);color:var(--paper)}
.clouds li.lit span{color:var(--mute-d)}
.clouds li.lit svg{transform:scale(1.12);fill:#E39A78}

/* real IntellChromatics logo */
.mark{align-items:center;gap:0}
.mark-ico{width:40px;height:40px;border-radius:var(--r);margin-right:10px;flex:none;display:block}
.foot-logo{width:150px;height:auto;border-radius:var(--r);display:block}
@media (max-width:560px){.mark-ico{width:34px;height:34px}}

/* services list thumbnails: always full colour */
.idx .thumb{filter:none!important}
.foot-logo{width:190px}

/* footer: big, clearly visible full logo (wordmark removed) */
.foot-logo{display:block;width:min(420px,100%);height:auto;border-radius:var(--r);margin:0 0 clamp(28px,4vw,48px)}
.foot-big{display:none}

/* footer top: logo left, standards right — two equal columns */
.foot-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;padding-bottom:clamp(28px,4vw,48px);margin-bottom:clamp(24px,3vw,36px);border-bottom:1px solid var(--line-d)}
.foot-top .foot-logo{width:100%;max-width:none;margin:0}
.foot-top .recog{border:0;margin:0;padding:0;align-content:center}
.foot-top .recog p{font-size:clamp(20px,2vw,28px);margin-bottom:10px}
.foot-top .recog img{height:clamp(64px,7vw,96px);width:clamp(64px,7vw,96px)}
.foot-top .recog img.wide{width:auto}
@media (max-width:820px){.foot-top{grid-template-columns:1fr}.foot-top .foot-logo{max-width:420px}}

.foot-top .foot-logo{max-width:360px}

/* =====================================================
   animated diagrams that replace the infographic images
   cy-tabs · cy-hub · cy-flow · cy-orbit  (auto-cycle, hover/click to pick)
   ===================================================== */
.cy{--cy-fg:var(--ink);--cy-mute:var(--mute);--cy-line:var(--line);--cy-bg:var(--paper-2);container-type:inline-size;color:var(--cy-fg);width:100%}
.dark .cy{--cy-fg:var(--paper);--cy-mute:var(--mute-d);--cy-line:var(--line-d);--cy-bg:var(--ink-2)}
.cy button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left;padding:0}
.cy-stage{position:relative;display:grid;background:var(--cy-bg);border:1px solid var(--cy-line);border-radius:var(--r);padding:clamp(24px,3.4vw,48px);overflow:hidden;align-content:center}
.cy-p{grid-area:1/1;opacity:0;transform:translateX(26px);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}
.cy-p.on{opacity:1;transform:none;pointer-events:auto}
.cy-n{font-family:var(--serif);font-style:italic;font-size:clamp(54px,7vw,104px);line-height:.85;color:var(--accent);margin-bottom:14px;font-weight:300}
.cy-p h3{font-size:clamp(24px,2.6vw,38px);margin-bottom:14px}
.cy-p p{margin:0;color:var(--cy-mute);font-size:clamp(16px,1.3vw,18px);max-width:34em}
.cy-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0;animation:cyfill 4.8s linear forwards}
.cy.hold .cy-bar{animation-play-state:paused}
@keyframes cyfill{to{transform:scaleX(1)}}

/* tabs */
.cy-tabs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,2.4vw,36px);align-items:stretch}
.cy-tabs .cy-list{display:flex;flex-direction:column;border-top:1px solid var(--cy-line)}
.cy-tabs .cy-i{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--cy-line);font-family:var(--serif);font-size:clamp(19px,2vw,28px);line-height:1.15;transition:padding .4s var(--ease),color .3s}
.cy-tabs .cy-i small{font-family:var(--sans);font-size:13px;color:var(--cy-mute);min-width:1.8em}
.cy-tabs .cy-i:hover,.cy-tabs .cy-i.on{padding-left:14px;color:var(--accent)}
@container (max-width:640px){
  .cy-tabs{grid-template-columns:1fr}
  .cy-tabs .cy-list{flex-direction:row;flex-wrap:wrap;gap:8px;border:0}
  .cy-tabs .cy-i{border:1px solid var(--cy-line);border-radius:var(--r);padding:8px 14px;font-size:16px}
  .cy-tabs .cy-i small{display:none}
  .cy-tabs .cy-i:hover,.cy-tabs .cy-i.on{padding-left:14px;background:var(--accent);color:var(--on,#fff);border-color:var(--accent)}
}

/* hub */
.cy-hub{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,32px);align-items:center}
.cy-hub.wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@container (max-width:820px){.cy-hub.wide{grid-template-columns:1fr}}
.cy-ring{position:relative;width:100%;max-width:500px;aspect-ratio:1;margin-inline:auto}
.cy-ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cy-ring line{stroke:var(--cy-fg);stroke-width:.35;opacity:.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease)}
.cy.in .cy-ring line{stroke-dashoffset:0}
.cy-ring .orb{fill:none;stroke:var(--accent);stroke-width:.3;stroke-dasharray:1.2 2.4;transform-origin:50% 50%;animation:cyspin 40s linear infinite}
@keyframes cyspin{to{transform:rotate(360deg)}}
.cy-core{position:absolute;left:50%;top:50%;width:28%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--cy-fg);color:var(--paper);display:grid;place-items:center;text-align:center;padding:10px;font-family:var(--serif);font-weight:600;font-size:clamp(13px,3.4cqw,20px);line-height:1.15;z-index:2}
.dark .cy-core{color:var(--ink)}
.cy-core::before{content:"";position:absolute;inset:-7%;border-radius:50%;border:1px solid var(--accent);animation:cypulse 3s ease-out infinite}
@keyframes cypulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.22);opacity:0}}
.cy-hub .cy-i{position:absolute;width:27%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--cy-fg);background:var(--paper);color:var(--ink);display:grid;place-items:center;text-align:center;padding:8px;font-size:clamp(11px,2.4cqw,15px);line-height:1.15;font-weight:500;z-index:2;transition:background .4s,color .4s,border-color .4s,transform .5s var(--ease)}
.dark .cy-hub .cy-i{background:var(--ink);color:var(--paper)}
.cy-hub .cy-i:hover{transform:translate(-50%,-50%) scale(1.08)}
.cy-hub .cy-i.on,.dark .cy-hub .cy-i.on{background:var(--accent);color:var(--on,#fff);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.1)}

/* flow */
.cy-flow{display:grid;gap:clamp(22px,3vw,40px)}
.cy-rail{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr)}
.cy-rail::before{content:"";position:absolute;top:22px;left:calc(50% / var(--n));right:calc(50% / var(--n));height:1px;background:var(--cy-line)}
.cy-fill{position:absolute;top:21px;left:calc(50% / var(--n));height:3px;width:calc((100% - 100% / var(--n)) * var(--k, 0));background:var(--accent);transition:width .9s var(--ease)}
.cy-flow .cy-i{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 4px}
.cy-flow .cy-i b{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--cy-fg);background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:20px;font-weight:600;transition:background .4s,color .4s,border-color .4s,transform .5s var(--ease)}
.dark .cy-flow .cy-i b{background:var(--ink);color:var(--paper)}
.cy-flow .cy-i span{font-size:clamp(12px,2.2cqw,16px);line-height:1.2;font-weight:500;transition:color .3s}
.cy-flow .cy-i:hover b{transform:scale(1.1)}
.cy-flow .cy-i.on b,.dark .cy-flow .cy-i.on b{background:var(--accent);border-color:var(--accent);color:var(--on,#fff);transform:scale(1.15)}
.cy-flow .cy-i.on span{color:var(--accent)}

/* orbit */
.cy-orbit{position:relative;width:min(560px,100%);aspect-ratio:1;margin-inline:auto;display:block}
.cy-spin{position:absolute;inset:0;animation:cyspin 70s linear infinite}
.cy-orbit:hover .cy-spin,.cy-orbit:hover .cy-spin .cy-i span{animation-play-state:paused}
.cy-spin::before{content:"";position:absolute;inset:11%;border-radius:50%;border:1px dashed var(--cy-line)}
.cy-orbit .cy-i{position:absolute;left:50%;top:50%;width:34%;transform:rotate(var(--a)) translateY(-134%) rotate(calc(var(--a) * -1)) translate(-50%,-50%);transform-origin:0 0}
.cy-orbit .cy-i span{display:block;animation:cyspin 70s linear infinite reverse;border:1px solid var(--cy-fg);background:var(--paper);color:var(--ink);border-radius:999px;padding:10px 14px;text-align:center;font-size:clamp(11px,2.8cqw,16px);line-height:1.2;transition:background .4s,color .4s,border-color .4s}
.dark .cy-orbit .cy-i span{background:var(--ink);color:var(--paper)}
.cy-orbit .cy-i.on span{background:var(--accent);border-color:var(--accent);color:var(--on,#fff)}
.cy-orbit .cy-core{width:30%}

/* hub nodes: label when it fits, number when the diagram is narrow */
.cy-hub .cy-i{font-size:clamp(11px,2.2cqw,14px);padding:6px;overflow-wrap:anywhere;hyphens:auto}
.cy-hub .cy-i b{display:none;font-family:var(--serif);font-size:clamp(18px,5cqw,24px);font-weight:600}
@container (max-width:440px){.cy-hub .cy-i span{display:none}.cy-hub .cy-i b{display:block}}

/* flow: never wider than its container; numbers only when narrow */
.cy-flow{grid-template-columns:minmax(0,1fr)}
.cy-rail{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.cy-flow .cy-i span{overflow-wrap:break-word;hyphens:auto}
@container (max-width:560px){.cy-flow .cy-i span{display:none}.cy-flow .cy-i b{width:40px;height:40px}.cy-rail::before{top:20px}.cy-fill{top:19px}}

/* home services index: never wider than the screen */
.svcidx{grid-template-columns:repeat(4,minmax(0,1fr))}
.svcidx a{min-width:0;overflow-wrap:anywhere}
@media (max-width:980px){.svcidx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.svcidx{grid-template-columns:minmax(0,1fr)}}

.cy-hub .cy-i{font-size:clamp(11px,2.7cqw,14px)}

/* =====================================================
   v2 diagram kinds: chat · ticker · road · device · grid · layers · win · term · radar · cmp · dial · doc
   ===================================================== */
.cyd-h{max-width:20em}
.cy-chat .cy-i,.cy-device .cy-i{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--cy-line);font-family:var(--serif);font-size:clamp(17px,1.7vw,24px);line-height:1.2;transition:padding .4s var(--ease),color .3s}
.cy-chat .cy-i small,.cy-device .cy-i small{font-family:var(--sans);font-size:13px;color:var(--cy-mute);min-width:1.8em}
.cy-chat .cy-i:hover,.cy-chat .cy-i.on,.cy-device .cy-i:hover,.cy-device .cy-i.on{padding-left:14px;color:var(--accent)}
.cy-chat .cy-list,.cy-device .cy-list{display:flex;flex-direction:column;border-top:1px solid var(--cy-line)}

/* chat */
.cy-chat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,3vw,44px);align-items:center}
@container (max-width:700px){.cy-chat{grid-template-columns:1fr}}
.cy-phone{position:relative;border:1px solid var(--cy-line);border-radius:18px;background:var(--cy-bg);overflow:hidden;min-height:340px;display:flex;flex-direction:column}
.ph-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--cy-line)}
.ph-head .av{width:30px;height:30px;border-radius:50%;background:var(--accent);flex:none}
.ph-head b{font-family:var(--serif);font-size:17px}
.ph-head em{margin-left:auto;font-size:12px;color:var(--cy-mute);font-style:normal;display:flex;align-items:center;gap:6px}
.ph-head em::before{content:"";width:7px;height:7px;border-radius:50%;background:#5aa55a;animation:cypulse 2s infinite}
.ph-body{position:relative;flex:1;display:grid;padding:20px 18px 26px}
.ph-body .cy-p{grid-area:1/1;display:flex;flex-direction:column;gap:12px;transform:none;align-self:start}
.msg{max-width:88%;padding:12px 16px;border-radius:14px;font-size:clamp(14px,1.2vw,16px);line-height:1.45;position:relative}
.msg.q{align-self:flex-end;background:var(--cy-fg);color:var(--paper);border-bottom-right-radius:3px;opacity:0}
.dark .msg.q{color:var(--ink)}
.msg.a{align-self:flex-start;background:var(--paper);color:var(--ink);border:1px solid var(--cy-line);border-bottom-left-radius:3px;opacity:0}
.msg.a .txt{opacity:0}
.msg.a .dots{position:absolute;left:16px;top:16px;display:flex;gap:5px}
.msg.a .dots i{width:7px;height:7px;border-radius:50%;background:var(--mute);animation:cybounce 1s infinite}
.msg.a .dots i:nth-child(2){animation-delay:.15s}.msg.a .dots i:nth-child(3){animation-delay:.3s}
@keyframes cybounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
@keyframes cymsg{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cyfade{from{opacity:0}to{opacity:1}}
@keyframes cyhide{to{opacity:0;visibility:hidden}}
.cy-p.on .msg.q{animation:cymsg .5s var(--ease) both}
.cy-p.on .msg.a{animation:cymsg .5s .55s var(--ease) both}
.cy-p.on .msg.a .dots{animation:cyhide .2s 1.6s forwards}
.cy-p.on .msg.a .txt{animation:cyfade .5s 1.6s both}

/* ticker */
.cy-ticker{display:grid;gap:clamp(18px,2.4vw,30px)}
.tk-row{overflow:hidden;border-block:1px solid var(--cy-line);padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tk-track{display:flex;gap:14px;width:max-content;animation:tkmove 38s linear infinite}
.cy-ticker:hover .tk-track,.cy-ticker.hold .tk-track{animation-play-state:paused}
@keyframes tkmove{to{transform:translateX(-50%)}}
.cy-ticker .cy-i{flex:none;border:1px solid var(--cy-fg);border-radius:999px;padding:12px 24px;font-family:var(--serif);font-size:clamp(18px,1.9vw,26px);white-space:nowrap;transition:background .35s,color .35s,border-color .35s}
.cy-ticker .cy-i:hover{border-color:var(--accent);color:var(--accent)}
.cy-ticker .cy-i.on{background:var(--accent);border-color:var(--accent);color:var(--on,#fff)}

/* roadmap */
.cy-road{position:relative;display:grid;gap:clamp(30px,4.4vw,64px);padding:6px 0}
.rd-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--cy-line,var(--line));transform-origin:top;transform:scaleY(0);transition:transform 2.4s var(--ease)}
.cy-road.in .rd-line{transform:scaleY(1)}
.dark .rd-line{background:var(--line-d)}
.rd-dot{position:absolute;left:calc(50% - 5px);top:0;width:11px;height:11px;border-radius:50%;background:var(--accent);animation:rdtravel 9s ease-in-out infinite;z-index:2}
@keyframes rdtravel{0%{top:0}44%,100%{top:calc(100% - 11px)}}
.rd-n{position:relative;width:calc(50% - 56px)}
.rd-n.r{margin-left:calc(50% + 56px)}
.rd-n b{position:absolute;top:0;width:46px;height:46px;border-radius:50%;border:1px solid currentColor;background:var(--paper);color:var(--ink);display:grid;place-items:center;font-family:var(--serif);font-size:20px;font-weight:600}
.dark .rd-n b{background:var(--ink);color:var(--paper)}
.rd-n.l b{right:-79px}.rd-n.r b{left:-79px}
.rd-n.l{text-align:right}.rd-n.l p{margin-left:auto}
.rd-n h3{font-size:clamp(26px,3vw,42px);margin-bottom:12px}
.rd-n p{margin:0;max-width:30em;color:var(--mute)}
.dark .rd-n p{color:var(--mute-d)}
@media (max-width:760px){.rd-line{left:23px}.rd-dot{left:18px}.rd-n,.rd-n.r{width:auto;margin-left:64px;text-align:left}.rd-n.l b,.rd-n.r b{left:-64px;right:auto}.rd-n.l p{margin-left:0}}

/* device */
.cy-device{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center}
@container (max-width:720px){.cy-device{grid-template-columns:1fr}.dv-phone{margin-inline:auto}}
.dv-phone{position:relative;width:min(280px,100%);aspect-ratio:9/17;border:2px solid var(--cy-fg);border-radius:34px;padding:46px 20px 36px;display:grid;background:var(--cy-bg);margin-inline:auto}
.dv-notch{position:absolute;top:12px;left:50%;width:70px;height:7px;border-radius:99px;background:var(--cy-fg);transform:translateX(-50%)}
.dv-home{position:absolute;bottom:12px;left:50%;width:84px;height:4px;border-radius:99px;background:var(--cy-fg);transform:translateX(-50%);opacity:.6}
.dv-scr{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;opacity:0;transform:scale(.94);transition:opacity .5s,transform .6s var(--ease)}
.dv-scr.on{opacity:1;transform:none}
.dv-scr small{font-family:var(--serif);font-style:italic;font-size:44px;line-height:1;color:var(--accent)}
.dv-scr b{font-family:var(--serif);font-size:clamp(20px,2vw,26px);line-height:1.15}
.dv-scr u{display:block;height:9px;width:100%;background:var(--cy-line);border-radius:5px;position:relative;overflow:hidden}
.dv-scr u:nth-of-type(2){width:82%}.dv-scr u:nth-of-type(3){width:56%}
.dv-scr.on u::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:0;animation:cyfill 1.4s var(--ease) forwards}
.dv-scr.on u:nth-of-type(2)::after{animation-delay:.2s}.dv-scr.on u:nth-of-type(3)::after{animation-delay:.4s}
.dv-side .cy-stage{margin-top:18px}
.dv-side .cy-p{transform:none}

/* grid */
.cy-grid{display:grid;gap:18px}
.gd-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--cy-line);border:1px solid var(--cy-line)}
@container (max-width:620px){.gd-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cy-grid .cy-i{display:flex;flex-direction:column;gap:20px;justify-content:space-between;background:var(--paper);color:var(--ink);padding:18px;min-height:128px;font-family:var(--serif);font-size:clamp(16px,1.6vw,22px);line-height:1.2;transition:background .4s,color .4s,transform .4s var(--ease)}
.dark .cy-grid .cy-i{background:var(--ink);color:var(--paper)}
.cy-grid .cy-i small{font-family:var(--sans);font-size:13px;opacity:.6}
.cy-grid .cy-i:hover{transform:translateY(-3px)}
.cy-grid .cy-i.on,.dark .cy-grid .cy-i.on{background:var(--accent);color:var(--on,#fff)}

/* layers */
.cy-layers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center}
@container (max-width:760px){.cy-layers{grid-template-columns:1fr}}
.ly-stack{position:relative;height:clamp(330px,46cqw,470px);perspective:1500px;perspective-origin:50% 25%}
.cy-layers .cy-i{position:absolute;left:50%;bottom:calc(4% + var(--z) * 12.5%);width:76%;height:22%;transform:translateX(-50%) rotateX(64deg) rotateZ(-32deg);border:1px solid var(--cy-fg);background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;padding:6px 14px;font-family:var(--serif);font-size:clamp(11px,2.3cqw,17px);line-height:1.1;text-align:center;transition:background .45s,color .45s,transform .6s var(--ease),border-color .4s;box-shadow:0 14px 0 -8px var(--cy-line)}
.dark .cy-layers .cy-i{background:var(--ink);color:var(--paper)}
.cy-layers .cy-i:hover{transform:translateX(-50%) rotateX(64deg) rotateZ(-32deg) translateZ(18px)}
.cy-layers .cy-i.on,.dark .cy-layers .cy-i.on{background:var(--accent);color:var(--on,#fff);border-color:var(--accent);transform:translateX(-50%) rotateX(64deg) rotateZ(-32deg) translateZ(34px)}

/* window */
.cy-win{border:1px solid var(--cy-line);border-radius:var(--r);overflow:hidden;background:var(--cy-bg)}
.wn-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--cy-line)}
.wn-bar i{width:11px;height:11px;border-radius:50%;background:var(--cy-line)}
.wn-bar i:first-child{background:var(--accent)}
.wn-bar em{margin-left:12px;font-style:normal;font-size:13px;color:var(--cy-mute);flex:1;border:1px solid var(--cy-line);border-radius:99px;padding:3px 14px}
.wn-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--cy-line)}
.cy-win .cy-i{padding:12px 22px;font-size:15px;font-weight:500;border-right:1px solid var(--cy-line);position:relative;transition:background .3s,color .3s}
.cy-win .cy-i::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0;transition:transform .45s var(--ease)}
.cy-win .cy-i.on{background:var(--paper);color:var(--accent)}
.dark .cy-win .cy-i.on{background:var(--ink)}
.cy-win .cy-i.on::after{transform:scaleX(1)}
.cy-win .cy-stage{border:0;border-radius:0;background:var(--paper);min-height:230px}
.dark .cy-win .cy-stage{background:var(--ink)}

/* terminal */
.cy-term{--cy-fg:#e8e8e2;--cy-mute:#9b9b93;--cy-line:rgba(250,250,250,.16);background:#0c0c0c;color:#e8e8e2;border:1px solid #2a2a2a;border-radius:var(--r);overflow:hidden;position:relative}
.tm-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #222}
.tm-bar i{width:11px;height:11px;border-radius:50%;background:#333}.tm-bar i:first-child{background:var(--accent)}
.tm-bar span{margin-left:12px;font-family:ui-monospace,Consolas,monospace;font-size:13px;color:#8a8a84}
.tm-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;border-bottom:1px solid #222}
.cy-term .cy-i{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:#a8a8a0;padding:6px 12px;border:1px solid #2c2c2c;border-radius:3px;transition:background .3s,color .3s,border-color .3s}
.cy-term .cy-i:hover{border-color:var(--accent);color:var(--on,#fff)}
.cy-term .cy-i.on{background:var(--accent);border-color:var(--accent);color:var(--on,#fff)}
.tm-body{display:grid;padding:clamp(20px,3vw,34px);min-height:210px}
.tm-body .cy-p{grid-area:1/1;transform:none}
.tm-cmd{font-family:ui-monospace,Consolas,monospace;font-size:clamp(14px,1.3vw,17px);color:var(--on,#fff);margin-bottom:14px}
.tm-cmd span{color:var(--accent);margin-right:8px}
.tm-out b{display:block;font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);margin-bottom:10px;color:var(--on,#fff)}
.tm-out .tw{margin:0;font-family:ui-monospace,Consolas,monospace;font-size:clamp(13px,1.15vw,15px);line-height:1.7;color:#c9c9c2;max-width:52em}
.tm-out .tw::after{content:"▍";color:var(--accent);animation:cyblink 1s steps(1) infinite}
@keyframes cyblink{50%{opacity:0}}
.cy-term .cy-bar{bottom:0}

/* radar */
.cy-radar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:center}
@container (max-width:780px){.cy-radar{grid-template-columns:1fr}}
.rd-wrap{width:100%;max-width:470px;margin-inline:auto}
.rd-disc{position:relative;aspect-ratio:1;border-radius:50%;border:1px solid var(--cy-fg);background:radial-gradient(circle,transparent 0 33%,var(--cy-line) 33.4% 33.8%,transparent 34% 66%,var(--cy-line) 66.4% 66.8%,transparent 67%)}
.rd-disc::before,.rd-disc::after{content:"";position:absolute;background:var(--cy-line)}
.rd-disc::before{left:50%;top:0;bottom:0;width:1px}.rd-disc::after{top:50%;left:0;right:0;height:1px}
.rd-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(180,83,47,0) 0 280deg,rgba(180,83,47,.38) 360deg);animation:cyspin 5s linear infinite}
.cy-radar .cy-i{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;z-index:2}
.cy-radar .cy-i b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--cy-fg);background:var(--paper);color:var(--ink);font-size:13px;transition:background .3s,color .3s,transform .4s var(--ease)}
.dark .cy-radar .cy-i b{background:var(--ink);color:var(--paper)}
.cy-radar .cy-i span{display:none}
.cy-radar .cy-i.on b,.dark .cy-radar .cy-i.on b{background:var(--accent);border-color:var(--accent);color:var(--on,#fff);transform:scale(1.35)}
.cy-radar .cy-i.on::after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:1px solid var(--accent);animation:cypulse 1.6s ease-out infinite}

/* compare */
.cy-cmp{display:grid;gap:14px}
.cm-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--cy-fg);border-radius:99px;overflow:hidden}
.cm-tabs .cy-i{position:relative;z-index:2;text-align:center;padding:13px 10px;font-weight:600;font-size:15px;transition:color .4s}
.cm-knob{position:absolute;z-index:1;top:0;bottom:0;left:0;width:50%;background:var(--cy-fg);border-radius:99px;transform:translateX(calc(var(--i,0) * 100%));transition:transform .6s var(--ease)}
.cm-tabs .cy-i.on{color:var(--paper)}
.dark .cm-tabs .cy-i.on{color:var(--ink)}
.cm-stage{position:relative;display:grid;border-radius:var(--r);overflow:hidden;min-height:250px}
.cm-stage .cy-p{grid-area:1/1;padding:clamp(24px,3.4vw,46px);transform:scale(.97)}
.cm-stage .cy-p.on{transform:none}
.cm-a{background:#1d1d1d;color:#fafafa;border:1px solid #333}
.cm-b{background:var(--accent);color:var(--on,#fff)}
.cm-stage h3{font-size:clamp(24px,2.6vw,38px);margin-bottom:14px}
.cm-stage p{margin:0;max-width:34em;font-size:clamp(16px,1.3vw,18px);color:inherit;opacity:.92}
.cm-stage .cy-bar{background:#fff;opacity:.6}

/* dial */
.cy-dial{display:grid;gap:clamp(14px,2vw,22px);justify-items:stretch}
.dl-gauge{position:relative;width:min(420px,100%);margin-inline:auto;aspect-ratio:200/112}
.dl-gauge svg{width:100%;height:100%;display:block}
.dl-gauge .seg{fill:none;stroke-width:14;stroke:var(--cy-line);transition:stroke .5s}
.dl-gauge .s0{stroke:#8a8a84}.dl-gauge .s1{stroke:#555550}.dl-gauge .s2{stroke:#B4532F}.dl-gauge .s3{stroke:#8f3f22}
.dl-needle{position:absolute;left:50%;bottom:10.7%;width:0;height:0}
.dl-needle i{position:absolute;left:-2px;bottom:0;width:4px;height:min(36cqw,150px);background:var(--cy-fg);border-radius:4px;transform-origin:50% 100%;transform:rotate(calc(-72deg + var(--k,0) * 144deg));transition:transform 1.1s cubic-bezier(.3,1.6,.5,1)}
.dl-hub{position:absolute;left:50%;bottom:10.7%;width:22px;height:22px;margin:0 0 -11px -11px;border-radius:50%;background:var(--cy-fg)}
.cy-dial .cy-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cy-dial .cy-i{border:1px solid var(--cy-line);border-radius:99px;padding:8px 16px;font-size:14px;font-weight:500;transition:background .3s,color .3s,border-color .3s}
.cy-dial .cy-i small{display:none}
.cy-dial .cy-i:hover{border-color:var(--accent);color:var(--accent)}
.cy-dial .cy-i.on{background:var(--accent);border-color:var(--accent);color:var(--on,#fff)}

/* doc */
.cy-doc{display:block}
.dc-page{max-width:900px;border:1px solid var(--cy-fg);border-radius:var(--r);background:var(--paper);color:var(--ink);padding:clamp(18px,3vw,38px);margin-inline:auto}
.dc-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:6px}
.dc-head b{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px)}
.dc-head small{color:var(--mute);font-size:13px}
.dc-row{display:grid!important;grid-template-columns:44px 1fr;gap:6px 14px;width:100%;padding:16px 0;border-bottom:1px solid var(--line);text-align:left;transition:background .4s}
.dc-n{font-family:var(--serif);font-style:italic;color:var(--mute);font-size:18px;padding-top:4px;transition:color .3s}
.dc-t h3{font-size:clamp(18px,2vw,26px);transition:color .3s}
.dc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.dc-b>span{overflow:hidden;display:block;color:var(--mute);font-size:16px;line-height:1.6;max-width:44em}
.dc-row.on .dc-b{grid-template-rows:1fr}
.dc-row.on .dc-b>span{padding-top:10px}
.dc-row.on h3,.dc-row.on .dc-n{color:var(--accent)}
.dc-row:not(.on) .dc-t::after{content:"";display:block;height:6px;width:min(60%,420px);margin-top:10px;background:var(--line);border-radius:3px}

/* layers: larger labels */
.cy-layers .cy-i{font-size:clamp(12px,3cqw,19px);height:24%;width:80%}

/* radar: show the active blip's name next to it */
.cy-radar .cy-i.on span{display:block;position:absolute;left:36px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:13px;font-weight:600;background:var(--paper);color:var(--ink);padding:3px 9px;border:1px solid var(--accent);border-radius:99px}
.dark .cy-radar .cy-i.on span{background:var(--ink);color:var(--paper)}

/* never let a diagram grow wider than its column */
.cy,.cy-road{max-width:100%}
.cy>*,.cy-grid .cy-i,.cy-device>*,.cy-chat>*,.cy-layers>*,.cy-radar>*,.dv-side>*{min-width:0}
.cy-grid{grid-template-columns:minmax(0,1fr)}
.cy-grid .cy-i{overflow-wrap:anywhere}
@container (max-width:720px){.cy-device{grid-template-columns:minmax(0,1fr)}}
@container (max-width:700px){.cy-chat{grid-template-columns:minmax(0,1fr)}}
@container (max-width:760px){.cy-layers{grid-template-columns:minmax(0,1fr)}}
@container (max-width:780px){.cy-radar{grid-template-columns:minmax(0,1fr)}}
.cy-device{grid-template-columns:minmax(220px,300px) minmax(0,1fr)}
.cy-rail .cy-i,.cy-tabs>*{min-width:0}

/* .cyw is the size container (a container cannot restyle itself) */
.cyw{container-type:inline-size;width:100%;min-width:0}
.cy{container-type:normal}
.cy-orbit{container-type:normal}

/* fixes: device collapses when narrow; radar label only when there is room */
@container (max-width:720px){.cy-device{grid-template-columns:minmax(0,1fr)}.dv-phone{margin-inline:auto}}
@container (max-width:560px){.cy-radar .cy-i.on span{display:none}}

/* ===== v3: 2-second rhythm, one colour per diagram kind, legible text on dark ===== */
:root{--mute-d:#e6e6e0}
.dark .scrub .sw{color:#c9c9c1}
.cy-term{--cy-mute:#f2f2ee;--cy-fg:#fff}

/* each kind its own colour (--on = text colour that sits on that colour) */
.cy-hub,.cy-orbit{--accent:#B4532F}
.cy-tabs{--accent:#3567A8}
.cy-flow{--accent:#D4A017;--on:#121212}
.cy-chat{--accent:#D1495B}
.cy-ticker{--accent:#1F8A9E}
.cy-road{--accent:#6B8E23}
.cy-device{--accent:#3567A8}
.cy-grid{--accent:#B8336A}
.cy-layers{--accent:#F2B705;--on:#121212}
.cy-win{--accent:#3F8A4F}
.cy-term{--accent:#E8801F;--on:#121212}
.cy-radar{--accent:#1F9E8F}
.cy-cmp{--accent:#2F7D95}
.cy-dial{--accent:#D4A017;--on:#121212}
.cy-doc{--accent:#3F8A4F}
.cy-orbit{--accent:#B8336A}
.cy-term .cy-i.on,.cy-flow .cy-i.on b,.cy-dial .cy-i.on,.cy-layers .cy-i.on{color:var(--on)}

/* angled stack: bold, dark-on-light labels */
.cy-layers .cy-i{background:#fafafa;color:#121212;border-color:#121212;font-family:var(--sans);font-weight:700;letter-spacing:.005em;box-shadow:0 14px 0 -8px rgba(0,0,0,.35)}
.dark .cy-layers .cy-i{background:#fafafa;color:#121212;border-color:#fafafa}
.cy-layers .cy-i.on,.dark .cy-layers .cy-i.on{background:var(--accent);color:#121212;border-color:var(--accent)}
.ly-stack{height:clamp(360px,52cqw,520px);padding-top:6%}
.cy-layers .cy-i{bottom:calc(2% + var(--z) * 11.5%)}

/* terminal: white text everywhere */
.tm-bar span{color:#fff}
.cy-term .cy-i{color:#fff;border-color:#555}
.cy-term .cy-i:hover{color:#fff;border-color:var(--accent)}
.cy-term .cy-i.on{color:#121212}
.tm-out .tw,.tm-out b,.tm-cmd{color:#fff}
.tm-cmd span{color:var(--accent)}

/* everything runs on a 2-second beat */
.cy-bar{animation-duration:2s}
.cy-p{transition-duration:.3s,.35s}
.dv-scr{transition-duration:.3s,.35s}
.tk-track{animation-duration:16s}
.cy-spin,.cy-orbit .cy-i span{animation-duration:26s}
.cy-ring .orb{animation-duration:16s}
.rd-sweep{animation-duration:2.4s}
.rd-dot{animation-duration:4s}
.cy-core::before{animation-duration:1.6s}
.dl-needle i{transition-duration:.45s}
.cy-fill{transition-duration:.45s}
.cm-knob{transition-duration:.3s}
.dc-b{transition-duration:.3s}
.cy-hub .cy-i,.cy-flow .cy-i b,.cy-grid .cy-i,.cy-layers .cy-i,.cy-radar .cy-i b{transition-duration:.25s}
.cy-p.on .msg.q{animation:cymsg .3s var(--ease) both}
.cy-p.on .msg.a{animation:cymsg .3s .25s var(--ease) both}
.cy-p.on .msg.a .dots{animation:cyhide .15s .9s forwards}
.cy-p.on .msg.a .txt{animation:cyfade .3s .9s both}
.dv-scr.on u::after{animation-duration:.7s}

/* ===== v4 ===== */
/* orbit: radius from the container (not the pill), bigger spacing, bold labels */
.cy-orbit{--R:calc(min(560px,100cqw) * .335)}
.cy-orbit .cy-i{width:29%;transform:rotate(var(--a)) translateY(calc(var(--R) * -1)) rotate(calc(var(--a) * -1)) translate(-50%,-50%)}
.cy-orbit .cy-i span{font-weight:700;font-size:clamp(12px,3cqw,16px);padding:9px 10px;line-height:1.2}
.cy-orbit .cy-core{width:24%;font-size:clamp(12px,3.2cqw,18px)}
.cy-spin::before{inset:15%}

/* bold white text on dark diagrams */
.dark .cy-dial .cy-i,.cy-term .cy-i,.dark .cy-chat .cy-i,.dark .cy-tabs .cy-i,.dark .cy-win .cy-i{font-weight:700}
.dark .cy-dial .cy-i:not(.on){color:#fff;border-color:rgba(255,255,255,.45)}
.cy-term .cy-i:not(.on){color:#fff;border-color:#6a6a6a}
.dark .cy-p h3,.dark .cy-p p,.cy-term .tm-out p{color:#fff}
.dark .cy-p p{font-weight:500}

/* gauge: needle keeps moving continuously, with a pointer-follow on each 2s step */
.dl-needle i{animation:cywobble 1.1s ease-in-out infinite alternate}
@keyframes cywobble{from{margin-left:-3px;rotate:-5deg}to{margin-left:3px;rotate:5deg}}
.dl-needle i{transform-origin:50% 100%}
.dl-gauge .seg{animation:cyseg 2s ease-in-out infinite alternate}
@keyframes cyseg{from{stroke-width:14}to{stroke-width:18}}
.dl-gauge .s1{animation-delay:.25s}.dl-gauge .s2{animation-delay:.5s}.dl-gauge .s3{animation-delay:.75s}

/* faster rhythm everywhere on the service pages */
[data-reveal]{transition-duration:.5s!important}
.js .imask{transition-duration:.7s!important}.js .imask img{transition-duration:.9s!important}
.split .w>span{transition-duration:.55s!important}
.cy-road.in .rd-line{transition-duration:1.2s}
.cy-spin,.cy-orbit .cy-i span{animation-duration:20s}
.tk-track{animation-duration:12s}

/* loading screen: the official logo, uncropped */
.curtain .cv-logo{width:min(340px,70vw);animation:cvin .7s var(--ease) both}
.curtain .cv-logo img{display:block;width:100%;height:auto;border-radius:var(--r)}
@keyframes cvin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}