/* ============================================================
   Deck99 art direction — shared core (tokens are overridden per site in site.css)
   Geist · dark editorial · GSAP/Lenis scroll motion
   ============================================================ */
:root{
  --bg:#1d1d20; --panel:#24262b; --ink:#e8edf4; --muted:#b5b9c2; --sec:#5aaacf; --gold:#e3c27e; --line:#3b3e45;
  --deep:#18181b; --tile:#2b3945; --btn-hover:#f4dfb2;
  --e:cubic-bezier(.16,1,.3,1); --pad:7%; --hh:90px; --logo-w:170px; --logo-h:60px;
}
*{box-sizing:border-box}
html{scroll-padding-top:95px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Geist',Arial,Helvetica,sans-serif;font-weight:400;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;text-align:left}
h1,h2,h3,h4,p,ol,ul,figure{margin:0;padding:0}
ol,ul{list-style:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
::selection{background:var(--gold);color:var(--bg)}
section{position:relative}
.wrap{padding:0 var(--pad)}

/* ---------- type ---------- */
h1{font-size:clamp(50px,7vw,118px);font-weight:400;line-height:.98;letter-spacing:-.055em}
h1 em,h2 em{color:var(--gold);font-style:normal}
h2{font-size:clamp(36px,4.6vw,74px);line-height:1.03;letter-spacing:-.045em;font-weight:400}
h3{font-weight:400}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow,var(--sec));display:flex;align-items:center;gap:12px;margin-bottom:26px}
.eyebrow.dot::before{content:"";width:6px;height:6px;background:var(--eyebrow,var(--sec));border-radius:50%;flex:none}
.lead,.copy{color:var(--muted);line-height:1.75;font-size:17px;max-width:540px}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wi{display:inline-block;will-change:transform}
.js [data-split]{visibility:hidden}
.js [data-r]{opacity:0}
.js [data-h]{opacity:0}
.reduce [data-r],.reduce [data-h]{opacity:1!important}.reduce [data-split]{visibility:visible!important}

/* ---------- buttons ---------- */
.button{position:relative;display:inline-flex;gap:35px;align-items:center;justify-content:space-between;padding:17px 24px;color:var(--bg);background:var(--gold);font-size:13px;font-weight:500;border:1px solid var(--gold);overflow:hidden;isolation:isolate;white-space:nowrap}
.button::before{content:"";position:absolute;inset:0;background:var(--btn-hover);transform:translateY(101%);transition:transform .55s var(--e);z-index:-1}
.button:hover::before{transform:none}
.button span{display:inline-block;transition:transform .5s var(--e)}
.button:hover span{transform:translate(4px,-4px)}
.text-link{position:relative;font-size:13px;padding-bottom:7px;display:inline-block}
.text-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sec);transform-origin:left;transition:transform .6s var(--e)}
.text-link:hover::after{transform:scaleX(0);transform-origin:right}
.actions{display:flex;gap:27px;align-items:center;margin-top:38px;flex-wrap:wrap}

/* ---------- loader & progress ---------- */
.loader{display:none}
.js .loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center}
.ld-in{display:grid;gap:26px;justify-items:center;width:min(240px,60vw)}
.ld-in img{width:var(--logo-w);height:var(--logo-h);object-fit:contain;opacity:0;transform:translateY(14px)}
.ld-bar{height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;z-index:60}

/* ---------- header ---------- */
header.site{position:fixed;inset:0 0 auto 0;height:var(--hh);padding:0 6%;display:flex;align-items:center;justify-content:space-between;z-index:50;transition:transform .7s var(--e),background .4s,border-color .4s;border-bottom:1px solid transparent}
header.site.scrolled{background:color-mix(in srgb,var(--bg) 96%,transparent);border-color:var(--line)}
header.site.hide{transform:translateY(-101%)}
.js header.site{transform:translateY(-101%)}
.js header.site.ready{transform:none}
.js header.site.ready.hide{transform:translateY(-101%)}
header.site .brand img{display:block;width:var(--logo-w);height:var(--logo-h);object-fit:contain}
header.site nav{display:flex;align-items:center;gap:28px;font-size:13px}
header.site nav a:not(.button){position:relative;padding:6px 0}
header.site nav a:not(.button)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e)}
header.site nav a:not(.button):hover::after,header.site nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.menu{display:none;border:1px solid var(--line);padding:10px 14px;font-size:13px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:max(100svh,720px);display:flex;align-items:center;overflow:hidden}
.hero-img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 94%,transparent),color-mix(in srgb,var(--bg) 62%,transparent) 55%,color-mix(in srgb,var(--bg) 15%,transparent)),linear-gradient(0deg,var(--bg),transparent 35%)}
.hero-content{position:relative;z-index:1;padding:130px var(--pad) 110px;width:100%}
.hero h1{margin:6px 0 34px}
.hero-p{max-width:500px;color:#d5d9d6;line-height:1.75;font-size:18px}
.hero-note{position:absolute;bottom:35px;right:6%;z-index:2;font-size:10px;letter-spacing:.2em;color:var(--muted)}
.strip{padding:34px var(--pad);display:grid;grid-template-columns:repeat(4,1fr);background:color-mix(in srgb,var(--bg) 92%,#fff);gap:20px;position:relative}
.strip div{padding:6px 0;transition:transform .6s var(--e)}
.strip div:hover{transform:translateY(-4px)}
.strip small{display:block;color:var(--sec);font-size:10px;letter-spacing:.16em;margin-bottom:14px}
.strip strong{font-weight:400;font-size:15px}

.sec-head{display:grid;grid-template-columns:1.1fr 1fr;gap:90px;align-items:end}
.sec-head .eyebrow{margin-bottom:22px}
.panel{background:var(--panel)}
.pad-sec{padding:140px var(--pad)}

/* ---------- aligned cards ---------- */
.cards{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:var(--gap,30px)}
.card{position:relative;border-top:1px solid var(--line);padding:26px 0 8px;transition:transform .7s var(--e)}
.card::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e)}
.card:hover::before{transform:scaleX(1)}
.card small{display:block;color:var(--sec);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.card h3{font-size:clamp(22px,1.9vw,28px);letter-spacing:-.03em;margin:18px 0 14px;line-height:1.12}
.card p{font-size:15px;color:var(--muted);line-height:1.75}
.cards.boxed .card{background:var(--panel);border:0;padding:34px 34px 38px}
.cards.boxed .card::before{top:0}
.card ul li{font-size:14.5px;color:var(--muted);padding:9px 0 9px 20px;position:relative;line-height:1.5}
.card ul li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--gold)}
.card .text-link{margin-top:22px}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 36px}
.pills span{border:1px solid color-mix(in srgb,var(--sec) 45%,transparent);color:color-mix(in srgb,var(--sec) 55%,var(--ink));padding:9px 14px;font-size:11.5px;transition:background .4s,color .4s,border-color .4s}
.pills span:hover{background:var(--sec);color:var(--bg);border-color:var(--sec)}

/* ---------- images ---------- */
.img-reveal{position:relative;overflow:hidden;clip-path:inset(0 0 0 0)}
.js .img-reveal{clip-path:inset(0 0 100% 0)}
.reduce .img-reveal{clip-path:none!important}
.ir-in{will-change:transform;height:100%}
.img-reveal img{width:100%;height:118%;margin-top:-9%;object-fit:cover}

/* ---------- sticky scrollytelling ---------- */
.story-track{height:calc(100vh + var(--n,5) * 62vh);position:relative}
.story-stage{position:sticky;top:0;height:100vh;padding:calc(var(--hh) + 10px) var(--pad) 36px;display:grid;grid-template-columns:1.05fr 1fr;gap:6vw;align-items:center}
.story-copy .eyebrow{margin-bottom:20px}
.story-copy h2{margin-bottom:18px;font-size:clamp(34px,min(4.2vw,7.4vh),70px)}
.story-copy>.lead{max-width:460px;margin-bottom:clamp(14px,3vh,30px);font-size:16px}
.story-list{position:relative;padding-left:34px}
.story-rail{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--line)}
.story-rail i{position:absolute;inset:0;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .8s var(--e)}
.story-item{display:block;width:100%;padding:clamp(7px,1.35vh,15px) 0}
.story-item .row{display:flex;align-items:baseline;gap:20px}
.story-item .n{font-size:12px;color:var(--sec);letter-spacing:.08em;width:22px;flex:none;transition:color .5s}
.story-item .t{font-size:clamp(25px,min(3.4vw,6vh),54px);line-height:1.06;letter-spacing:-.04em;color:color-mix(in srgb,var(--ink) 28%,transparent);transition:color .6s var(--e),transform .8s var(--e);display:block}
.story-list.sm .story-item .t{font-size:clamp(20px,min(2.3vw,4.2vh),34px)}
.story-item:hover .t{color:color-mix(in srgb,var(--ink) 60%,transparent)}
.story-item .d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--e);padding-left:42px}
.story-item .d p{overflow:hidden;color:var(--muted);line-height:1.7;font-size:15px;max-width:480px;opacity:0;transition:opacity .5s}
.story-item.on .t{color:var(--ink);transform:translateX(10px)}
.story-item.on .n{color:var(--gold)}
.story-item.on .d{grid-template-rows:1fr}
.story-item.on .d p{opacity:1;transition:opacity .8s .25s;padding-top:10px}
.vis{position:relative;background:var(--panel);aspect-ratio:1/1;width:100%;max-height:calc(100vh - 150px);max-width:calc(100vh - 150px);justify-self:end}
.sc{position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none}
.sc.on{opacity:1}
.sc svg{width:100%;height:100%;display:block;overflow:visible;padding:4%}
.vis-count{position:absolute;left:22px;top:18px;font-size:12px;color:var(--muted);letter-spacing:.1em;display:flex;gap:8px;align-items:baseline;z-index:2}
.vis-count b{font-weight:400;color:var(--gold)}
.vis-tag{position:absolute;right:22px;top:18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sec);z-index:2}

/* ---------- svg scene mechanics ---------- */
.a{opacity:0;transform:translateY(16px);transition:opacity .8s var(--e),transform .8s var(--e)}
.on .a{opacity:1;transform:none;transition-delay:calc(var(--i,0)*70ms + 150ms)}
.dr{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--e)}
.on .dr{stroke-dashoffset:0;transition-delay:calc(var(--i,0)*90ms + 200ms)}
.ln{transform-box:fill-box;transform-origin:left;transform:scaleX(0);transition:transform .9s var(--e)}
.on .ln{transform:scaleX(1);transition-delay:calc(var(--i,0)*70ms + 250ms)}
.up{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .9s var(--e)}
.on .up{transform:scaleY(1);transition-delay:calc(var(--i,0)*60ms + 250ms)}
.pop{transform-box:fill-box;transform-origin:center;transform:scale(.4);opacity:0;transition:transform .9s var(--e),opacity .6s}
.on .pop{transform:none;opacity:1;transition-delay:calc(var(--i,0)*90ms + 200ms)}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes halo{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.2);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flow{to{stroke-dashoffset:-36}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.seg,.srv{animation:pulse 2.8s ease-in-out infinite;animation-delay:var(--d,0s)}
.halo{transform-box:fill-box;transform-origin:center;animation:halo 2.6s ease-out infinite}
.spin{transform-box:view-box;transform-origin:50% 50%;animation:spin 28s linear infinite}
.spin.r{animation-direction:reverse;animation-duration:40s}
.flowl{stroke-dasharray:4 14;animation:flow 1.6s linear infinite}
.float{animation:bob 4s ease-in-out infinite}
svg text{font-family:'Geist',Arial,sans-serif}

/* inline illustrations inside cards */
.mini{width:100%;height:auto;display:block;margin-bottom:6px}
.mini-wrap{background:var(--deep);margin-bottom:26px;padding:6px}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:1fr 1.5fr;gap:90px;padding:140px var(--pad);align-items:start}
.faq h2{margin-bottom:0}
.qa{border-top:1px solid var(--line)}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa>button{width:100%;padding:26px 56px 26px 0;font-size:clamp(19px,1.7vw,25px);letter-spacing:-.025em;line-height:1.25;position:relative;transition:color .4s}
.qa>button::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--gold),var(--gold)) center/100% 1.5px no-repeat,linear-gradient(var(--gold),var(--gold)) center/1.5px 100% no-repeat;transition:transform .6s var(--e)}
.qa.on>button::after{transform:rotate(135deg)}
.qa>button:hover{color:var(--gold)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--e)}
.qa.on .ans{grid-template-rows:1fr}
.qa .ans>div{overflow:hidden}
.qa .ans p{color:var(--muted);font-size:16px;line-height:1.75;max-width:640px;padding:0 0 28px}

/* ---------- CTA / footer ---------- */
.cta{background:radial-gradient(at 0% 0%,color-mix(in srgb,var(--sec) 28%,var(--bg)),transparent 65%),color-mix(in srgb,var(--bg) 92%,#fff);display:flex;justify-content:space-between;align-items:center;gap:45px;border-block:1px solid color-mix(in srgb,var(--sec) 35%,var(--line));padding:130px var(--pad)}
.cta h2{max-width:820px;font-size:clamp(40px,5.4vw,90px)}
.cta .eyebrow{margin-bottom:26px}
footer.site{padding:75px var(--pad) 26px;background:color-mix(in srgb,var(--bg) 85%,#000);position:relative;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:60px}
footer.site p,footer.site a{font-size:13.5px;line-height:1.9;color:var(--muted)}
footer.site h3{font-size:10px;font-weight:400;color:var(--gold);letter-spacing:.18em;margin-bottom:18px;text-transform:uppercase}
footer.site a:hover{color:var(--ink)}
.giant{font-size:24.5vw;line-height:.82;letter-spacing:-.07em;font-weight:500;color:color-mix(in srgb,var(--ink) 7%,var(--bg));margin:70px -1vw 0;white-space:nowrap;display:flex;user-select:none}
.giant .w{padding-bottom:.02em;margin-bottom:0}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px;position:relative}
.foot-bottom p,.foot-bottom a{font-size:12px!important}
.disclaimer{margin-top:14px;font-size:11.5px!important;color:color-mix(in srgb,var(--muted) 65%,var(--bg))!important}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .sec-head,.faq{grid-template-columns:1fr;gap:34px}
  .strip{grid-template-columns:1fr 1fr;row-gap:28px}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  :root{--pad:6%;--hh:70px}
  .menu{display:block;position:relative;z-index:60}
  header.site nav{position:fixed;inset:0;background:var(--bg);flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;padding:0 var(--pad);font-size:34px;letter-spacing:-.04em;transform:translateY(-100%);transition:transform .8s var(--e);z-index:55}
  header.site nav.open{transform:none}
  header.site nav a{opacity:0;transform:translateY(24px);transition:opacity .6s var(--e),transform .6s var(--e)}
  header.site nav.open a{opacity:1;transform:none}
  header.site nav.open a:nth-child(1){transition-delay:.25s}header.site nav.open a:nth-child(2){transition-delay:.31s}header.site nav.open a:nth-child(3){transition-delay:.37s}header.site nav.open a:nth-child(4){transition-delay:.43s}header.site nav.open a:nth-child(5){transition-delay:.49s}header.site nav.open a:nth-child(6){transition-delay:.55s}
  header.site nav .button{font-size:15px;margin-top:20px}
  .hero-note{display:none}
  .hero-content{padding-top:120px}
  .story-track{height:calc(100vh + var(--n,5) * 55vh)}
  .story-stage{grid-template-columns:1fr;grid-template-rows:minmax(0,36%) auto;gap:16px;align-content:start;padding-top:calc(var(--hh) + 6px)}
  .vis{order:-1;aspect-ratio:auto;max-height:none;max-width:none;height:100%}
  .sc svg{padding:2%}
  .story-copy>.lead,.story-copy .eyebrow{display:none}
  .story-copy h2{font-size:28px;margin-bottom:10px}
  .story-list{padding-left:20px}
  .story-item{padding:5px 0}
  .story-item .t,.story-list.sm .story-item .t{font-size:clamp(19px,5.4vw,26px)}
  .story-item .d{padding-left:42px}
  .story-item .d p{font-size:13.5px}
  .cards{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:flex-start;padding:90px var(--pad)}
  .footer-grid{grid-template-columns:1fr;gap:34px}
  .pad-sec,.faq{padding:90px var(--pad)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .a,.pop{opacity:1;transform:none}.dr{stroke-dashoffset:0}.ln,.up{transform:none}
}