:root{
  color-scheme: dark;
  --bg:#050A10;
  --ink:#E9F2F9;
  --muted:#9BB0C2;
  --dim:#7C90A6;
  --line:#1C2836;          /* decorative hairline only */
  --line-ctl:#62788C;      /* borders on interactive controls — 3.7:1+ */
  --well:#0E1620;
  --card:#0B131C;
  --chip:#121C26;
  --accent:#4CC2FF;
  --accent-hi:#7BD6FF;
  --accent-ink:#042132;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:110px; scrollbar-color:#2A3A4A var(--bg)}
body{margin:0; background:var(--bg); color:var(--ink);
     font-family:"Barlow", Arial, Helvetica, sans-serif; font-size:15px; line-height:1.6;
     -webkit-font-smoothing:antialiased;
     padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
main{overflow:clip}
h1,h2,h3,p,dl,dd{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
img{display:block; max-width:100%}
ul{margin:0; padding:0; list-style:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:5px; border-radius:2px}
::selection{background:var(--accent); color:var(--accent-ink)}

/* ── night-forest backdrop ── */
.bg{position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:url("img/bg-forest.svg") center bottom / cover no-repeat, var(--bg)}
/* scrim, heaviest at the bottom where the treeline is lightest */
.bg::after{content:""; position:absolute; inset:0;
           background:linear-gradient(180deg, rgba(5,10,16,.45) 0%,
                                              rgba(5,10,16,.62) 45%,
                                              rgba(5,10,16,.80) 100%)}

/* ── reading progress ── */
.progress{position:fixed; top:0; left:0; width:100%; height:2px; background:var(--accent);
          transform:scaleX(0); transform-origin:left; z-index:100}

/* ── header ── */
.header{position:fixed; z-index:50; inset:calc(env(safe-area-inset-top,0px)) 0 auto; display:flex;
        align-items:center; justify-content:space-between; gap:1rem; padding:16px 5%;
        transition:background-color .25s ease, border-color .25s ease;
        border-bottom:1px solid transparent}
.header.scrolled{background:rgba(5,10,16,.97); border-bottom-color:var(--line)}
.brand{display:flex; align-items:center; gap:10px; font-size:21px; font-weight:700; letter-spacing:-.01em}
.brand .mark{width:28px; height:28px; border-radius:50%; flex:none}
.brand i{color:var(--accent); font-style:normal}
.header nav{display:flex; gap:28px}
.header nav a{font-size:13px; color:var(--muted); transition:color .15s ease}
.header nav a:hover,.header nav a[aria-current]{color:var(--accent)}

/* ── sections ── */
.section{width:min(1320px,88%); margin-inline:auto; padding-block:clamp(70px,11vw,130px)}
.eyebrow{display:block; color:var(--accent); font-size:11px; letter-spacing:.09em;
         text-transform:uppercase; margin-bottom:26px}
h2{font-size:clamp(42px,6.4vw,76px); line-height:1.07; font-weight:400; letter-spacing:-.01em}
h1 em,h2 em{font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-weight:400;
            color:var(--accent)}

/* ── opening ── */
.intro{position:relative; padding-top:clamp(112px,14vw,150px); isolation:isolate}
.intro::before{content:""; position:absolute; z-index:-1; top:-18%; left:50%; translate:-50% 0;
               width:min(1100px,130%); aspect-ratio:1/.62; pointer-events:none;
               background:radial-gradient(ellipse at 50% 40%,
                          rgba(76,194,255,.20) 0%, rgba(76,194,255,.07) 38%, transparent 68%)}
.introTop{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
          font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
          border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:clamp(40px,6vw,70px)}
.introGrid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:8%;
           align-items:start}
h1{font-size:clamp(44px,7.4vw,92px); line-height:1.06; font-weight:400; letter-spacing:-.015em}
.lead{font-size:clamp(19px,2.2vw,23px); line-height:1.58; color:var(--ink); margin-top:30px;
      max-width:30ch}
.introCopy p+p{font-size:15px; color:var(--muted); line-height:1.9; margin-top:20px; max-width:56ch}
.introCopy b{color:var(--ink); font-weight:600}
.facts{display:flex; flex-wrap:wrap; gap:42px; border-top:1px solid var(--line);
       margin-top:36px; padding-top:24px}
.facts strong{display:block; font-size:19px; font-weight:500}
.facts em{display:block; margin-top:6px; font-size:11px; letter-spacing:.06em; font-style:normal;
          text-transform:uppercase; color:var(--muted)}
.scrollLink{display:inline-flex; align-items:center; gap:16px; font-size:12px; margin-top:38px;
            padding-bottom:9px; border-bottom:1px solid var(--line-ctl); color:var(--accent)}
.scrollLink svg{transition:transform .2s var(--ease-out)}
.scrollLink:hover{border-bottom-color:var(--accent)}

/* ── identity card ── */
.idCard{background:rgba(11,19,28,.94); border:1px solid var(--line); border-radius:14px; padding:20px;
        box-shadow:inset 0 1px 1px rgba(123,214,255,.09), 0 24px 60px -30px rgba(76,194,255,.35)}
.idHead{display:flex; gap:18px; align-items:flex-start}
.idAvatar{width:118px; height:118px; border-radius:10px; flex:none; object-fit:cover;
          border:1px solid var(--line)}
.idMeta{min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:9px;
        padding-top:2px}
.status{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px;
        background:rgba(76,194,255,.13); color:var(--accent); font-size:12px; font-weight:500}
.idName{font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-weight:400;
        font-size:34px; line-height:1.05; letter-spacing:-.01em}
.idName span{font-family:"Barlow", sans-serif; font-style:normal; font-size:14px; color:var(--muted);
             margin-left:8px; letter-spacing:0}
.idRole{font-size:15px; color:var(--muted)}
.idRole b{color:var(--ink); font-weight:600}

.idBlock{margin-top:22px; background:rgba(18,28,38,.72); border:1px solid var(--line); border-radius:12px;
         padding:18px}
.idBlock h2{font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-weight:400;
            font-size:23px; margin-bottom:15px}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chips li{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; min-width:0;
          background:rgba(10,18,26,.66); border:1px solid var(--line); border-radius:9px;
          font-size:13px; color:var(--ink)}
.chips li svg{flex:none; color:var(--accent)}

.idActions{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px;
     padding:0 16px; border-radius:999px; font-size:14px; font-weight:600;
     transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btnPrimary{background:var(--accent); color:var(--accent-ink)}
.btnPrimary:hover{background:var(--accent-hi)}
.btnGhost{border:1px solid var(--line-ctl)}
.btnGhost:hover{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.copyNote{margin-top:12px; font-size:11px; color:var(--muted); min-height:16px; text-align:center}

/* ── split sections ── */
.split{border-top:1px solid var(--line); display:grid;
       grid-template-columns:.68fr 1.32fr; gap:7%; position:relative}
.splitHead>div{position:sticky; top:130px}
.splitHead p{color:var(--muted); font-size:15px; line-height:1.8; margin-top:32px; max-width:38ch}
.headCount{display:flex; gap:15px; align-items:center; width:170px; margin-top:48px;
           font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.headCount i{height:1px; background:var(--line); flex:1}

.projectList{display:grid; gap:clamp(52px,7vw,100px); min-width:0}
.project{min-width:0}

.projectMedia{position:relative; aspect-ratio:16/9; background:var(--well);
              overflow:hidden; border-radius:4px; border:1px solid var(--line)}
.poster{display:block; width:100%; height:100%; padding:0; position:relative; background:var(--well)}
.poster img{width:100%; height:100%; object-fit:cover; filter:saturate(.72);
            transition:transform .6s var(--ease-out), filter .4s ease}
/* the media box clips overflow, so the ring sits inside it */
.poster:focus-visible{outline-offset:-4px; border-radius:4px}
.playButton{position:absolute; top:50%; left:50%; translate:-50% -50%;
            display:grid; place-items:center; width:68px; height:68px; border-radius:50%;
            background:rgba(5,10,16,.72); border:1px solid var(--line-ctl); color:var(--ink);
            transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease-out)}
.poster:hover .playButton,.poster:focus-visible .playButton{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.poster:active .playButton{transform:scale(.94)}
.posterCaption{position:absolute; inset:auto 16px 16px auto; display:inline-flex; align-items:center;
               gap:7px; padding:7px 10px; font-size:11px; letter-spacing:.08em;
               background:rgba(5,10,16,.82); border:1px solid var(--line-ctl); border-radius:3px;
               transition:background-color .2s ease, color .2s ease, border-color .2s ease}
.poster:hover .posterCaption{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.projectMedia iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.projectInfo{display:flex; gap:20px; padding-top:22px}
.projectNumber{color:var(--dim); font-size:11px; padding-top:9px; flex:none;
               font-variant-numeric:tabular-nums}
.projectInfo>div{flex:1; min-width:0}
.projectInfo h3{font-size:clamp(20px,2.2vw,25px); font-weight:500; letter-spacing:-.01em}
.projectInfo h3 a{display:flex; align-items:center; justify-content:space-between; gap:14px}
.projectInfo h3 a span{flex:none; color:var(--accent); transition:transform .2s var(--ease-out)}
.projectInfo h3 a:hover{color:var(--accent)}

.sysTags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.sysTags li{padding:5px 10px; border:1px solid var(--line); border-radius:3px;
            font-size:11px; letter-spacing:.04em; color:var(--muted)}
.sysTags li.tk{border-style:dashed; color:var(--dim)}

/* ── contact ── */
.contact{border-top:1px solid var(--line)}
.contact h2{font-size:clamp(48px,8.4vw,106px)}
.contactLower{display:grid; grid-template-columns:1fr 1fr; gap:14%; align-items:end; margin-top:52px}
.contactCopy p{font-size:16px; line-height:1.9; color:var(--muted); max-width:38ch}
.backTop{display:inline-block; font-size:12px; margin-top:52px; padding-bottom:6px;
         border-bottom:1px solid var(--line-ctl); color:var(--accent)}
.backTop:hover{border-bottom-color:var(--accent)}
.reachBlock{width:100%; max-width:400px; justify-self:end}
.reachLabel{display:flex; align-items:center; gap:16px; font-size:11px; letter-spacing:.1em;
            text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.reachLabel i{height:1px; background:var(--line); flex:1}
.reachCard{background:rgba(11,19,28,.93); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.reachRow{display:flex; align-items:center; justify-content:space-between; gap:14px;
          padding:15px 20px; border-bottom:1px solid var(--line)}
.reachRow:last-child{border-bottom:0}
.reachRow dt{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.reachRow dd{font-size:15px; margin-top:3px}
.copyStatus{display:block; margin-top:4px; font-size:11px; color:var(--muted); min-height:13px}
.reachRow a{border-bottom:1px solid var(--line-ctl)}
.reachRow a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.copyButton{padding:7px 0; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
            border-bottom:1px solid var(--line-ctl); flex:none; color:var(--accent)}
.copyButton:hover{border-bottom-color:var(--accent)}
.copyButton{transition:filter .15s ease, opacity .15s ease}
.copyButton.swap{filter:blur(2px); opacity:0}

footer{width:min(1320px,88%); margin-inline:auto; display:flex; align-items:center;
       justify-content:space-between; gap:1rem; flex-wrap:wrap;
       border-top:1px solid var(--line); padding:26px 0 34px; font-size:11px;
       letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
footer strong{font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-weight:400;
              font-size:22px; letter-spacing:0; text-transform:none; color:var(--ink)}

/* -- secondary controls -- */
.btnLine{width:100%; margin-top:12px; min-height:44px; border:1px solid var(--line-ctl);
         font-size:13px; font-weight:500; color:var(--muted)}
.btnLine:hover{color:var(--accent); border-color:var(--accent)}
.inlineLink{padding:0; color:var(--accent); border-bottom:1px solid var(--line-ctl)}
.inlineLink:hover{border-bottom-color:var(--accent)}
.repoLink{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:12px;
          color:var(--accent); padding-bottom:5px; border-bottom:1px solid var(--line-ctl)}
.repoLink:hover{border-bottom-color:var(--accent)}

/* -- terms of service -- */
.tos{width:min(780px,92vw); max-height:88vh; padding:0; overflow:hidden; position:relative;
     border:1px solid var(--line); border-radius:16px; background:rgba(9,15,23,.98);
     color:var(--ink);
     transition:opacity .15s ease, transform .15s var(--ease-out), overlay .15s allow-discrete, display .15s allow-discrete}
.tos:not([open]){opacity:0; transform:scale(.98)}
.tos[open]{transition-duration:.24s}
@starting-style{ .tos[open]{opacity:0; transform:scale(.96)} }
.tos::backdrop{background:rgba(3,7,12,.86);
               transition:opacity .24s ease, overlay .24s allow-discrete, display .24s allow-discrete}
@starting-style{ .tos[open]::backdrop{opacity:0} }
/* drifting cloud wash, irregular by hand, faded out down the panel */
.tos::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(76,194,255,.34) 0%, rgba(76,194,255,.12) 32%, transparent 68%),
    radial-gradient(58px 30px at  8% 11%, rgba(233,242,249,.30), transparent 72%),
    radial-gradient(84px 38px at 21%  5%, rgba(233,242,249,.22), transparent 74%),
    radial-gradient(44px 24px at 33% 16%, rgba(233,242,249,.26), transparent 70%),
    radial-gradient(96px 40px at 52%  3%, rgba(233,242,249,.20), transparent 76%),
    radial-gradient(52px 26px at 67% 13%, rgba(233,242,249,.24), transparent 72%),
    radial-gradient(76px 34px at 84%  8%, rgba(233,242,249,.18), transparent 74%),
    radial-gradient(40px 22px at 96% 19%, rgba(233,242,249,.20), transparent 70%),
    radial-gradient(70px 32px at 14% 27%, rgba(233,242,249,.14), transparent 76%),
    radial-gradient(54px 26px at 45% 23%, rgba(233,242,249,.12), transparent 74%),
    radial-gradient(88px 36px at 74% 30%, rgba(233,242,249,.11), transparent 78%),
    radial-gradient(48px 24px at 27% 39%, rgba(233,242,249,.08), transparent 74%),
    radial-gradient(66px 30px at 61% 42%, rgba(233,242,249,.07), transparent 76%);
  filter:blur(7px);
  /* its own layer: the blurred wash is drawn once, not again as the terms scroll */
  will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.5) 38%, transparent 74%);
          mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.5) 38%, transparent 74%)}
.tosInner{position:relative; z-index:1; max-height:88vh; overflow-y:auto; scrollbar-color:#2A3A4A transparent;
          padding:0 clamp(18px,3.4vw,30px) clamp(22px,3.4vw,30px)}
.tosHead{position:sticky; top:0; z-index:2; display:flex; align-items:center;
         justify-content:space-between; gap:1rem; padding:18px 0 14px}
.tosEyebrow{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent)}
.tosClose{display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
          border:1px solid var(--line-ctl); background:rgba(5,10,16,.7); color:var(--ink);
          transition:background-color .15s ease, color .15s ease, border-color .15s ease}
.tosClose:hover{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.tosTitle{font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-weight:400;
          font-size:clamp(21px,3vw,27px); line-height:1.3; margin-bottom:20px; max-width:34ch}
.tosCard{background:rgba(9,16,23,.78); border:1px solid var(--line); border-radius:12px;
         padding:16px 18px; margin-top:12px}
.tosCard h3{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600;
            color:var(--accent); margin-bottom:11px}
.tosCard h3 svg{flex:none}
.tosCard ul{display:grid; gap:9px}
.tosCard li{position:relative; padding-left:19px; font-size:13.5px; line-height:1.65;
            color:var(--muted); overflow-wrap:anywhere}
.tosCard li::before{content:""; position:absolute; left:2px; top:.56em; width:6px; height:6px;
                    border-radius:50%; background:var(--accent)}

/* ── intro entrance: the one authored moment, played once on load ── */
.enter{animation:enter .7s var(--ease-out) both; animation-delay:calc(var(--i,0) * 70ms)}
@keyframes enter{from{opacity:0; translate:0 16px; filter:blur(6px)}}

/* ── reveal: quieter than the entrance, so the page settles after it ── */
.motionReady .reveal{opacity:0; translate:0 20px;
                     transition:opacity .6s var(--ease-out), translate .6s var(--ease-out)}
.motionReady .reveal.revealed{opacity:1; translate:0 0}

/* ── pointer-only hover motion: a tap on a touch screen would leave it stuck ── */
@media (hover:hover) and (pointer:fine){
  .scrollLink:hover svg{transform:translateY(3px)}
  .poster:hover img{transform:scale(1.03); filter:saturate(1.08)}
  .poster:hover .playButton{transform:scale(1.06)}
  .poster:active .playButton{transform:scale(.98)}
  .projectInfo h3 a:hover span{transform:translate(3px,-3px)}
}

/* ── responsive ── */
@media (max-width:1100px){
  .split{grid-template-columns:.6fr 1.4fr; gap:5%}
  .introGrid{gap:6%}
}
@media (max-width:860px){
  .header{padding:18px 6%}
  .header nav{gap:18px}
  .header nav a{font-size:12px}
  .introGrid,.split,.contactLower{grid-template-columns:1fr; gap:44px}
  .splitHead>div{position:static}
  .headCount{display:none}
  .idCard{max-width:460px}
  .reachBlock{justify-self:start; max-width:460px}
  .projectInfo{gap:12px}
  .playButton{width:54px; height:54px}
}
@media (max-width:460px){
  .idHead{flex-direction:column}
  .idAvatar{width:96px; height:96px}
  .idActions{grid-template-columns:1fr}
  .facts{gap:26px}
}

/* reduced motion keeps the fades, drops the movement */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .enter{animation-name:fade}
  @keyframes fade{from{opacity:0}}
  .motionReady .reveal{translate:none; transition:opacity .4s ease}
  .btn:active,.poster .playButton,.poster img,.tos,.tos:not([open]){transform:none !important}
}

/* ════════ fx layer ════════ */

/* live sky sits between the painted forest and the content */
.sky{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.skyStars,.skyFlies{position:absolute; inset:-30px}
.skyStars i{position:absolute; width:var(--s); height:var(--s); border-radius:50%; background:#E9F2F9;
            opacity:.15; animation:twinkle var(--d) ease-in-out var(--delay) infinite}
/* keyframes hold plain values: a var() inside them keeps the animation off the GPU */
@keyframes twinkle{0%,100%{opacity:.15} 50%{opacity:.9}}
/* one element and one animation per firefly: drift path and glow pulse share a
   keyframe set, because every running animation costs a little each frame */
.skyFlies i{position:absolute; width:var(--size); height:var(--size); margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
            border-radius:50%; opacity:0;
            background:radial-gradient(circle, rgba(214,242,255,1) 0 8%, rgba(123,214,255,.6) 20%, rgba(76,194,255,.14) 48%, transparent 70%);
            animation:var(--path) var(--t) ease-in-out var(--delay) infinite}
@keyframes flyA{0%,100%{transform:translate(0,0); opacity:.1} 25%{transform:translate(38px,-18px); opacity:.85}
                50%{transform:translate(70px,6px); opacity:.2} 75%{transform:translate(30px,22px); opacity:.75}}
@keyframes flyB{0%,100%{transform:translate(0,0); opacity:.7} 30%{transform:translate(-44px,14px); opacity:.1}
                60%{transform:translate(-20px,-26px); opacity:.9} 80%{transform:translate(18px,-8px); opacity:.25}}
@keyframes flyC{0%,100%{transform:translate(0,0); opacity:.2} 20%{transform:translate(24px,24px); opacity:.8}
                55%{transform:translate(-30px,12px); opacity:.15} 85%{transform:translate(-12px,-20px); opacity:.9}}
/* nobody watches fireflies mid-scroll; freezing them keeps scrolling cheap */
.sky.scrolling i,.sky.scrolling .meteor{animation-play-state:paused}
.meteor{position:absolute; width:130px; height:1.5px; border-radius:2px; opacity:0;
        background:linear-gradient(90deg, rgba(233,242,249,.95), rgba(233,242,249,0));
        transform-origin:0 50%; animation:meteor 13s linear 4s infinite}
@keyframes meteor{
  0%{opacity:0; transform:rotate(152deg) translateX(0)}
  1%{opacity:1}
  6%{opacity:0; transform:rotate(152deg) translateX(-340px)}
  100%{opacity:0; transform:rotate(152deg) translateX(-340px)}}

/* moonlight: one soft light that trails the cursor across the forest */
.moonlight{position:fixed; top:0; left:0; z-index:-1; width:720px; height:720px; margin:-360px 0 0 -360px;
           pointer-events:none; border-radius:50%;
           background:radial-gradient(circle, rgba(76,194,255,.10) 0%, rgba(76,194,255,.04) 35%, transparent 65%);
           transform:translate3d(50vw,50vh,0)}
@media (hover:none), (pointer:coarse){ .moonlight{display:none} }

/* border spotlight: the card edge nearest the cursor catches the light */
.spot{position:relative}
.spot::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
              background:radial-gradient(260px circle at var(--mx,-999px) var(--my,-999px),
                         rgba(123,214,255,.75), rgba(76,194,255,.18) 40%, transparent 70%);
              -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              -webkit-mask-composite:xor; mask-composite:exclude;
              opacity:0; transition:opacity .3s ease}
@media (hover:hover) and (pointer:fine){ .spot:hover::before{opacity:1} }

/* moonlit accent words */
h1 em,h2 em{text-shadow:0 0 42px rgba(76,194,255,.45), 0 0 12px rgba(76,194,255,.25)}

/* headings rise word by word out of a mask */
.splitReady .word{display:inline-block; overflow:hidden; vertical-align:top;
                  padding-bottom:.12em; margin-bottom:-.12em}
.splitReady .wordInner{display:inline-block; translate:0 105%; opacity:0;
                       transition:translate .9s var(--ease-out), opacity .9s var(--ease-out);
                       transition-delay:calc(var(--wi) * 60ms + 80ms)}
.splitReady.wordsIn .wordInner{translate:0 0; opacity:1}
/* italic glyphs overhang their box; give them room inside the mask */
.splitReady em .word{padding-right:.08em; margin-right:-.08em}

/* thumbnails wipe open from the bottom as they arrive */
.motionReady .project.reveal .projectMedia{clip-path:inset(100% 0 0 0 round 4px);
    transition:clip-path 1.1s cubic-bezier(.77,0,.175,1)}
.motionReady .project.reveal .projectMedia img{scale:1.18; transition:scale 1.4s var(--ease-out)}
.motionReady .project.revealed .projectMedia{clip-path:inset(0 0 0 0 round 4px)}
.motionReady .project.revealed .projectMedia img{scale:1}
.motionReady .project.reveal{translate:none; opacity:1}
.motionReady .project.reveal .projectInfo{opacity:0; translate:0 12px;
    transition:opacity .6s var(--ease-out) .35s, translate .6s var(--ease-out) .35s}
.motionReady .project.revealed .projectInfo{opacity:1; translate:0 0}

/* poster tilt glare, positioned by the cursor */
.projectMedia::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
    background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%), rgba(233,242,249,.14), transparent 60%);
    opacity:0; transition:opacity .3s ease}
@media (hover:hover) and (pointer:fine){ .projectMedia:hover::after{opacity:1} }
.projectMedia:has(iframe)::after{display:none}

/* primary action: a slow sheen, once every few seconds */
.btnPrimary{position:relative; overflow:hidden; isolation:isolate;
            box-shadow:0 10px 30px -12px rgba(76,194,255,.7)}
.btnPrimary::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
    translate:-120% 0}
.btnPrimary.shine::after{animation:sheen 1.4s var(--ease-out) .25s 1 both}
@keyframes sheen{from{translate:-120% 0} to{translate:120% 0}}

@media (prefers-reduced-motion:reduce){
  .btnPrimary::after{animation:none; display:none}
  .motionReady .project.reveal .projectMedia{clip-path:none; transition:none}
  .motionReady .project.reveal .projectMedia img{scale:1}
  .motionReady .project .projectInfo{translate:none; transition:opacity .4s ease}
}
.splitReady.wordsDone .word{overflow:visible}

/* ════════ hooks: pitch, proof, guidance ════════ */

h1{font-size:clamp(40px,5.2vw,72px); line-height:1.04; letter-spacing:-.02em; max-width:16ch; text-wrap:balance}
.introCopy .lead{margin-top:26px}

.proof{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:36px 0 0;
       padding-top:24px; border-top:1px solid var(--line)}
.proof dt{font-size:clamp(30px,3.4vw,44px); line-height:1; font-weight:600; letter-spacing:-.02em;
          color:var(--ink); font-variant-numeric:tabular-nums}
.proof dd{margin:10px 0 0; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.proof div:first-child dt{color:var(--accent); text-shadow:0 0 30px rgba(76,194,255,.4)}

.introActions{display:flex; align-items:center; flex-wrap:wrap; gap:28px; margin-top:36px}
.introActions .btn{min-width:220px}
.introActions .scrollLink{margin-top:0}

/* stacked sections: title on top, work below */
.stacked{border-top:1px solid var(--line)}
.sectionHead{display:grid; grid-template-columns:1fr auto; align-items:end; gap:12px 48px; margin-bottom:clamp(40px,5vw,64px)}
.sectionHead .eyebrow{grid-column:1 / -1; margin-bottom:0}
.sectionHead p{color:var(--muted); font-size:15px; line-height:1.7; max-width:36ch; justify-self:end}

.gameGrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 28px}
.gameGrid .featured{grid-column:1 / -1; display:grid; grid-template-columns:1.55fr 1fr; gap:36px; align-items:end}
.gameGrid .featured .projectInfo{flex-direction:column; gap:28px; padding:0 0 8px}
.gameGrid .featured h3{font-size:clamp(28px,3.2vw,44px); line-height:1.1}
.projectInfo{flex-direction:column; gap:12px}

.stats{display:flex; flex-wrap:wrap; gap:10px 28px; margin:0}
.stats dt{font-size:22px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.stats dd{margin:2px 0 0; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.featured .stats{gap:18px 40px}
.featured .stats dt{font-size:clamp(36px,4vw,56px); line-height:1; color:var(--accent);
                    text-shadow:0 0 34px rgba(76,194,255,.4)}
.featured .stats div+div dt{color:var(--ink); text-shadow:none}

.sysGrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px 24px}
.sysGrid .projectInfo h3{font-size:clamp(19px,1.7vw,22px)}

/* call to action bands, placed where a visitor has just been impressed */
.ctaBand{width:min(1320px,88%); margin:0 auto; display:flex; align-items:center; justify-content:space-between;
         gap:24px 48px; flex-wrap:wrap; padding:clamp(28px,4vw,44px);
         border:1px solid rgba(76,194,255,.28); border-radius:16px;
         background:linear-gradient(120deg, rgba(25,62,86,.92), rgba(11,19,28,.94) 55%)}
.ctaTitle{font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-size:clamp(28px,3.2vw,40px);
          line-height:1.1; color:var(--ink)}
.ctaBand p+p{margin-top:8px; color:var(--muted); max-width:52ch}
.ctaActions{display:flex; align-items:center; flex-wrap:wrap; gap:24px}
.ctaActions .btn{min-width:240px}
.ctaActions .inlineLink{font-size:13px}

/* commission steps */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;
       counter-reset:none}
.step{position:relative; padding:26px 22px 28px; border:1px solid var(--line); border-radius:14px;
      background:rgba(11,19,28,.92)}
.step:not(:last-child)::after{content:""; position:absolute; top:44px; right:-21px; width:22px; height:1px;
                              background:linear-gradient(90deg, var(--accent), transparent)}
.stepNo{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; font-size:14px; font-weight:600;
        color:var(--accent); border:1px solid rgba(76,194,255,.45); box-shadow:0 0 22px -4px rgba(76,194,255,.55)}
.step h3{margin-top:20px; font-size:18px; font-weight:600}
.step p{margin-top:8px; font-size:14px; line-height:1.7; color:var(--muted)}
.motionReady .step.reveal{transition-delay:calc(var(--i) * 80ms)}

/* floating hire bar */
.hireBar{position:fixed; z-index:60; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px));
         display:flex; align-items:center; gap:18px; padding:8px 8px 8px 20px; border-radius:999px;
         background:rgba(9,15,23,.97); border:1px solid rgba(76,194,255,.3);
         box-shadow:0 18px 40px -16px rgba(0,0,0,.8), 0 0 30px -10px rgba(76,194,255,.45);
         translate:-50% calc(100% + 40px); opacity:0; pointer-events:none;
         transition:translate .2s var(--ease-out), opacity .2s ease}
.hireBar.shown{translate:-50% 0; opacity:1; pointer-events:auto; transition-duration:.45s, .3s}
.hireBar .btn{min-height:42px; padding:0 20px}
.hireStatus{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); white-space:nowrap}
.hireStatus svg{color:#5BE0A0}

@media (max-width:1100px){
  .sysGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step:nth-child(2)::after{display:none}
}
@media (max-width:860px){
  .gameGrid .featured{grid-template-columns:1fr; gap:0}
  .gameGrid .featured .projectInfo{padding-top:20px; gap:18px}
  .sectionHead{grid-template-columns:1fr}
  .sectionHead p{justify-self:start}
  .proof{gap:16px}
}
@media (max-width:600px){
  .gameGrid,.sysGrid,.steps{grid-template-columns:1fr}
  .step::after{display:none}
  .proof{grid-template-columns:1fr 1fr}
  .proof div:last-child{display:none}
  .introActions .btn,.ctaActions .btn{width:100%}
  .hireBar{left:12px; right:12px; translate:0 calc(100% + 40px); justify-content:space-between}
  .hireBar.shown{translate:0 0}
  .hireStatus{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .hireBar{translate:-50% 0; transition:opacity .3s ease}
  @media (max-width:600px){ .hireBar{translate:0 0} }
}

.ownedTag{align-self:flex-start; display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px;
          font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
          color:var(--accent-ink); background:var(--accent); box-shadow:0 0 22px -6px rgba(76,194,255,.8)}

@media (prefers-reduced-motion:reduce){
  .skyStars i,.skyFlies i,.meteor{animation:none}
  .skyFlies i{opacity:.4}
  .meteor{display:none}
}

/* ════════ carousels ════════ */
:root{--slide:min(920px, 76vw)}
.carousel{position:relative; width:100vw; margin-left:calc(50% - 50vw)}
.carouselTrack{display:grid; grid-auto-flow:column; grid-auto-columns:var(--slide); gap:28px;
               overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
               padding:12px calc((100vw - var(--slide)) / 2) 32px}
.carouselTrack::-webkit-scrollbar{display:none}
.carouselTrack:focus-visible{outline-offset:-4px}

.slide{scroll-snap-align:center; display:grid; grid-template-columns:1.2fr 1fr; min-width:0;
       background:#0B131C; border:1px solid var(--line); border-radius:18px; overflow:hidden;
       opacity:.32; scale:.93; transition:opacity .35s ease, scale .45s var(--ease-out), border-color .35s ease}
.slide.active{opacity:1; scale:1; border-color:rgba(76,194,255,.28)}
.slide:not(.active){cursor:pointer}
.slide .projectMedia{aspect-ratio:auto; height:100%; min-height:320px; border:0; border-radius:0}
.slide .projectInfo{flex-direction:column; justify-content:center; gap:16px; padding:36px 36px 36px 32px}
.slide h3{font-size:clamp(24px,2.4vw,32px); line-height:1.15; font-weight:500}
.slide .ownedTag{margin-top:-4px}
.playLink{width:auto; align-self:flex-start; margin-top:10px; padding:0 24px; min-height:48px; gap:10px;
          color:var(--accent); border-color:rgba(76,194,255,.5)}
.playLink:hover{background:rgba(76,194,255,.1)}
.slide .repoLink{margin-top:0; align-self:flex-start}

.carouselNav{position:absolute; z-index:3; top:50%; translate:0 -50%; display:grid; place-items:center;
             width:48px; height:48px; border-radius:50%; color:var(--ink);
             background:rgba(9,15,23,.94); border:1px solid var(--line-ctl);
             transition:background-color .2s ease, color .2s ease, opacity .2s ease, transform .16s var(--ease-out)}
.carouselNav.prev{left:calc((100vw - var(--slide)) / 2 - 24px)}
.carouselNav.next{right:calc((100vw - var(--slide)) / 2 - 24px)}
.carouselNav:active{transform:scale(.94)}
.carouselNav:disabled{opacity:.25; cursor:default}
@media (hover:hover) and (pointer:fine){
  .carouselNav:not(:disabled):hover{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
}

@media (max-width:760px){
  :root{--slide:86vw}
  .carouselTrack{gap:14px}
  .slide{grid-template-columns:1fr}
  .slide .projectMedia{aspect-ratio:16/9; min-height:0; height:auto}
  .slide .projectInfo{padding:22px 22px 26px}
  .playLink{align-self:stretch; justify-content:center}
}
/* touch screens swipe; arrows would only cover the cards */
@media (pointer:coarse){ .carouselNav{display:none} }
@media (prefers-reduced-motion:reduce){ .slide{scale:1; transition:opacity .3s ease} }

/* pager: only where one card fills the screen or there are no arrows */
.carouselPager{display:none}
@media (pointer:coarse), (max-width:760px){
  .carouselPager{display:flex; align-items:center; justify-content:center; gap:7px; margin-top:-14px; min-height:20px}
  .carouselPager i{width:7px; height:7px; border-radius:4px; background:var(--line-ctl);
                   transition:width .3s var(--ease-out), background-color .3s ease}
  .carouselPager i.on{width:22px; background:var(--accent)}
  .swipeHint{display:inline-flex; align-items:center; gap:4px; margin-left:10px;
             font-size:12px; color:var(--muted); transition:opacity .4s ease}
  .swipeHint svg{color:var(--accent); animation:swipeNudge 1.6s var(--ease-out) infinite}
  .swipeHint.done{opacity:0}
  .swipeHint.done svg{animation:none}
}
@keyframes swipeNudge{0%,100%{translate:0} 45%{translate:4px}}
@media (prefers-reduced-motion:reduce){ .swipeHint svg{animation:none} }

/* five nav links do not fit a phone header; Process is one scroll away */
@media (max-width:520px){ .header nav a[href="#process"]{display:none} }

/* nothing behind an open dialog needs to move */
.modalOpen .sky i,.modalOpen .sky .meteor{animation-play-state:paused}
.modalOpen .moonlight{display:none}