/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --canvas:#0A0A16;
  --canvas-deep:#06060F;
  --panel:#12122A;
  --panel-2:#191934;
  --accent:#8B7BFF;
  --accent-hover:#A497FF;
  --accent-muted:rgba(139,123,255,.22);
  --accent-line:rgba(139,123,255,.42);
  --starlight:#C9D4FF;
  --text-primary:#ECEBF7;
  --text-secondary:#9A99BC;
  --hair:rgba(201,212,255,.13);
  --hair-strong:rgba(201,212,255,.30);

  --display:"Bricolage Grotesque",Georgia,serif;
  --body:"Manrope","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.02,.16,1);

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --rail:64px;
  --shell:1240px;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font:400 16px/1.62 var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.022em}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}

::selection{background:var(--accent);color:#0A0A16}

:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--accent);color:#0A0A16;padding:10px 16px;border-radius:8px;
  font:500 14px/1 var(--mono);text-decoration:none;transition:top .2s var(--ease);
}
.skip:focus{top:12px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   THE ENVIRONMENT LAYER: one place, behind everything
   ============================================================ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-glow{
  position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse 52% 42% at 22% 18%,rgba(139,123,255,.14),transparent 62%),
    radial-gradient(ellipse 46% 38% at 82% 72%,rgba(96,140,255,.11),transparent 62%),
    radial-gradient(ellipse 70% 56% at 50% 108%,rgba(139,123,255,.09),transparent 66%);
  animation:envdrift 96s var(--ease-soft) -22s infinite alternate;
}
@keyframes envdrift{
  from{transform:translate3d(-1.6%,-1.2%,0) scale(1.02)}
  to{transform:translate3d(1.8%,1.4%,0) scale(1.07)}
}
.env-stars{position:absolute;inset:0;opacity:.5}
.env-stars i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:var(--starlight);opacity:.34;
  animation:twinkle 7s var(--ease-soft) infinite alternate;
}
@keyframes twinkle{from{opacity:.10;transform:scale(.7)}to{opacity:.52;transform:scale(1)}}
.env-grain{
  position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;gap:24px;
  padding:16px max(24px,calc((100vw - var(--shell))/2 + 24px));
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(8,8,18,.78);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--hair);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand svg{width:30px;height:30px;flex:0 0 auto}
.brand b{font:500 13px/1 var(--mono);letter-spacing:.18em;color:var(--text-primary)}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:baseline}
.nav-links a{
  font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--text-secondary);
  text-decoration:none;position:relative;padding:6px 0;transition:color .35s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right .45s var(--ease);
}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{right:0}
/* the button label must beat the `.nav-links a` colour rule above it */
.nav-links a.btn{margin-left:4px;color:#0A0A16}
.nav-links a.btn::after{display:none}
.nav-links a.btn:hover{color:#0A0A16}
@media (max-width:860px){.nav-links a:not(.nav-cta){display:none}.nav-links{margin-left:auto}}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border-radius:999px;border:1px solid transparent;
  font:500 13px/1 var(--mono);letter-spacing:.06em;text-decoration:none;cursor:pointer;
  background:var(--accent);color:#0A0A16;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
  box-shadow:0 0 0 0 var(--accent-muted);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(139,123,255,.5)}
.btn:active{transform:translateY(0)}
.btn.ghost{
  background:transparent;color:var(--text-primary);border-color:var(--hair-strong);
  box-shadow:none;
}
.btn.ghost:hover{background:rgba(201,212,255,.07);border-color:var(--accent-line);box-shadow:none}
.btn svg{width:13px;height:13px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ============================================================
   THE HERO: pinned scrub stage
   ============================================================ */
.hero{position:relative;height:520vh;z-index:1;padding:0}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--canvas-deep);
}
.poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity .8s var(--ease);
}
#hero{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready #hero{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed #hero{display:none}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,22,0) 32%,rgba(10,10,22,.66) 100%);
}
.scrim-top{
  position:absolute;left:0;right:0;top:0;height:34vh;pointer-events:none;
  background:linear-gradient(rgba(6,6,15,.72),rgba(6,6,15,0));
}
/* Kept light on purpose: the resting sphere lives down here, and the flow below
   has its own top gradient, so this only needs to soften the seam. */
.scrim-bottom{
  position:absolute;left:0;right:0;bottom:0;height:22vh;pointer-events:none;
  background:linear-gradient(rgba(6,6,15,0),rgba(6,6,15,.52));
}

/* the loading ring */
.ring{
  position:absolute;left:50%;bottom:8vh;transform:translateX(-50%) rotate(-90deg);
  width:44px;height:44px;color:var(--starlight);opacity:.75;
  transition:opacity .5s var(--ease);
}
.ring circle{transition:stroke-dashoffset .2s linear}
.stage.video-ready .ring{opacity:0}

/* the scroll cue, shown once the video is in */
.cue{
  position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font:400 10px/1 var(--mono);letter-spacing:.24em;color:var(--text-secondary);
  opacity:0;transition:opacity .8s var(--ease) .3s;text-shadow:var(--tshadow);
}
.stage.video-ready .cue,.stage.video-failed .cue{opacity:1}
/* the cue has done its job the moment they start scrolling; it must not sit on the settle */
.stage.scrolled .cue{opacity:0 !important}
.cue span{display:block;width:1px;height:34px;background:linear-gradient(var(--starlight),transparent);animation:cuedrop 2.6s var(--ease-soft) -.4s infinite}
@keyframes cuedrop{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{opacity:.9}100%{transform:scaleY(1);transform-origin:top;opacity:0}}

/* --- caption bands --- */
.band{
  position:absolute;inset:0;display:grid;align-content:center;
  padding:0 max(28px,calc((100vw - var(--shell))/2 + 28px));
  opacity:0;pointer-events:none;text-shadow:var(--tshadow);
}
/* Peak alphas tuned against each band's own worst frame, not its average.
   Measured with the glyphs hidden on the real composited page. */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 82% 68% at 30% 50%,rgba(5,5,12,.82) 0%,rgba(5,5,12,.60) 46%,rgba(5,5,12,0) 78%);
}
.band > *{position:relative}
/* the band itself must not eat scroll, but its buttons must still be clickable */
.band .cta-row,.band .btn{pointer-events:auto}
.band .btn{text-shadow:none}

/* bands 1 to 3 live in the calm left lane, clear of the falling action */
.band-l{justify-items:start;text-align:left}
.band-l .band-in{max-width:min(46vw,620px)}
.band-l h1,.band-l h2{font-size:clamp(30px,4.4vw,62px)}

/* Band 4 sits in the open space ABOVE the resting sphere, which the delivered
   footage puts in the lower third. The layout honours the footage, not the plan. */
.band-c{justify-items:center;text-align:center;padding-bottom:26vh}
.band-c::before{background:radial-gradient(ellipse 76% 58% at 50% 36%,rgba(5,5,12,.88) 0%,rgba(5,5,12,.66) 48%,rgba(5,5,12,0) 80%)}
.band-c .band-in{max-width:min(70vw,760px)}
.band-c h2{font-size:clamp(34px,5.6vw,78px)}

.chip{
  display:inline-block;margin-bottom:22px;padding:8px 14px;border-radius:999px;
  background:rgba(8,8,18,.55);border:1px solid var(--accent-line);
  backdrop-filter:blur(10px);
  font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--starlight);
  text-shadow:0 1px 3px rgba(5,5,10,.85);
}
.band .sub{
  margin-top:20px;font-size:clamp(15px,1.5vw,19px);color:var(--text-secondary);
  max-width:44ch;
}
.band-c .sub{margin-inline:auto}
.band .cta-row{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.band-c .cta-row{justify-content:center}

/* --- split-text entrance machinery (transform + opacity only) --- */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) scatter: echoes drifting particles finding each other */
.e-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
/* (f) drift-down: echoes the fall: words start above and drift down into place */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px));
}
/* (c) blur to sharp: echoes focus arriving as the camera clears the mist.
   Named apart from the band classes on purpose: it carries display:inline-block,
   which would otherwise overwrite the band's own grid layout at equal specificity. */
.blurpair{position:relative;display:inline-block}
.blurpair .soft{position:absolute;inset:0;filter:blur(12px);opacity:calc(1 - var(--k,0));pointer-events:none}
.blurpair .sharp{opacity:var(--k,0)}
/* (e) staged settle: headline words rise, then subline, then the buttons */
.e-settle .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px));
}
.e-settle .sub{--ks:clamp(0,(var(--k,0) - .60)*3.4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.e-settle .cta-row{--kb:clamp(0,(var(--k,0) - .76)*4.4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}

/* --- the static hero, a designed layout and not an apology --- */
.static-hero{
  display:none;position:relative;min-height:100svh;
  align-content:center;padding:120px max(24px,calc((100vw - var(--shell))/2 + 24px)) 90px;
  background-size:cover;background-position:center;
}
.static-hero .sh-scrim{
  position:absolute;inset:0;
  background:linear-gradient(rgba(6,6,15,.80),rgba(6,6,15,.58) 42%,rgba(6,6,15,.94));
}
.static-hero .sh-in{position:relative;max-width:640px;text-shadow:var(--tshadow)}
.static-hero h1{font-size:clamp(38px,10vw,58px);margin-bottom:18px}
.static-hero .sub{color:var(--text-secondary);font-size:17px;max-width:38ch}
.static-hero .cta-row{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}

/* ============================================================
   THE FLOW: everything below the hero, on the thread
   ============================================================ */
.flow{position:relative;z-index:2;background:var(--canvas)}
.flow::before{
  content:"";position:absolute;left:0;right:0;top:0;height:220px;
  background:linear-gradient(rgba(6,6,15,1),rgba(10,10,22,0));pointer-events:none;
}
.shell{
  max-width:var(--shell);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:var(--rail) 1fr;
}
.shell > *{grid-column:2}
@media (max-width:900px){:root{--rail:26px}}
@media (max-width:620px){:root{--rail:0px}.shell{grid-template-columns:1fr}}

/* --- THE SIGNATURE: the insight thread --- */
.thread{
  position:absolute;top:0;bottom:0;
  left:max(24px,calc((100vw - var(--shell))/2 + 24px));
  width:var(--rail);pointer-events:none;z-index:1;
}
.thread svg{position:absolute;inset:0;width:100%;height:100%}
.thread path{
  fill:none;stroke:var(--accent-line);stroke-width:1.25;
  vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:var(--len,2000);stroke-dashoffset:calc(var(--len,2000) * (1 - var(--draw,0)));
}
.thread .glowline{stroke:var(--starlight);stroke-width:2.4;opacity:.16;filter:blur(2.5px)}
.node{
  position:absolute;left:calc(var(--rail)/2 - 5px);width:10px;height:10px;border-radius:50%;
  background:var(--canvas);border:1.5px solid var(--accent-line);
  transform:translateY(-50%) scale(.72);opacity:.42;
  transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .7s var(--ease),background .7s var(--ease);
}
.node.lit{
  opacity:1;transform:translateY(-50%) scale(1);
  background:var(--accent);border-color:var(--accent-hover);
  box-shadow:0 0 0 5px var(--accent-muted),0 0 22px 2px rgba(139,123,255,.55);
}
@media (max-width:620px){.thread{display:none}}

/* ============================================================
   SECTION FURNITURE
   ============================================================ */
section{position:relative;padding:clamp(84px,11vw,150px) 0}
.kicker{
  display:flex;align-items:center;gap:11px;margin-bottom:20px;
  font:500 10px/1 var(--mono);letter-spacing:.24em;color:var(--accent);
}
.kicker::before{content:"";width:26px;height:1px;background:var(--accent-line);flex:0 0 auto}
h2{font-size:clamp(30px,4.4vw,54px);max-width:19ch}
h3{font-size:clamp(20px,2.2vw,27px)}
.lede{margin-top:20px;max-width:60ch;font-size:clamp(16px,1.35vw,18.5px);color:var(--text-secondary)}
.hair{height:1px;background:var(--hair);border:0;margin:0}

/* Content stays put. Linda asked for the words to be readable the whole way down
   rather than fading in as you reach them, so nothing below the hero hides itself.
   The page still moves: the thread draws, the nodes light, the environment drifts,
   the process fills, hovers ease, and the hold interaction runs. None of it on text. */
.rise,.stg > *{opacity:1;transform:none}
.rise{transition:none}

/* ============================================================
   PROOF STRIP
   ============================================================ */
.proof{padding-top:clamp(40px,6vw,70px)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
@media (max-width:820px){.proof-grid{grid-template-columns:1fr}}
.proof-item{
  padding:26px 24px 28px;border:1px solid var(--hair);border-radius:16px;
  background:linear-gradient(rgba(25,25,52,.44),rgba(18,18,42,.22));
  position:relative;overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.proof-item::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-line),transparent);
  opacity:.5;animation:sweep 9s var(--ease-soft) -2s infinite;
}
@keyframes sweep{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
.proof-item:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.proof-item .n{font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:14px}
.proof-item h3{font-size:20px;margin-bottom:9px}
.proof-item p{font-size:14.5px;color:var(--text-secondary);line-height:1.55}

/* ============================================================
   SELECTED WORK
   ============================================================ */
.feature{
  margin-top:clamp(38px,5vw,60px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(26px,3.4vw,46px);border-radius:24px;
  border:1px solid var(--hair);
  background:
    radial-gradient(ellipse 80% 120% at 88% 20%,rgba(139,123,255,.13),transparent 62%),
    linear-gradient(rgba(25,25,52,.52),rgba(16,16,36,.30));
  position:relative;overflow:hidden;
}
@media (max-width:900px){.feature{grid-template-columns:1fr}}
.flag{
  display:inline-block;padding:6px 11px;border-radius:6px;margin-bottom:16px;
  background:var(--accent);color:#0A0A16;
  font:500 9.5px/1 var(--mono);letter-spacing:.19em;
}
.feature h3{font-size:clamp(28px,3.4vw,42px);margin-bottom:14px}
.feature p{color:var(--text-secondary);max-width:44ch;font-size:16px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.tag{
  padding:6px 11px;border-radius:999px;border:1px solid var(--hair-strong);
  font:400 10.5px/1 var(--mono);letter-spacing:.09em;color:var(--text-secondary);
}
.feature-art{position:relative}
.feature-art img{
  border-radius:12px;filter:drop-shadow(0 26px 48px rgba(0,0,0,.62));
  transition:transform .8s var(--ease);
}
.feature:hover .feature-art img{transform:translateY(-5px)}

/* the two smaller project cards, a deliberately different skeleton */
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px);margin-top:clamp(16px,2.4vw,26px)}
@media (max-width:820px){.mini-grid{grid-template-columns:1fr}}
.mini{
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  padding:clamp(24px,2.8vw,34px);border-radius:20px;min-height:250px;
  border:1px solid var(--hair);background:linear-gradient(rgba(18,18,42,.6),rgba(12,12,28,.3));
  transition:border-color .5s var(--ease),transform .5s var(--ease),background .5s var(--ease);
}
.mini:hover{border-color:var(--accent-line);transform:translateY(-3px);background:linear-gradient(rgba(25,25,52,.7),rgba(14,14,32,.4))}
.mini{text-decoration:none}
.mini .status{font:500 9.5px/1 var(--mono);letter-spacing:.19em;color:var(--text-secondary);margin-bottom:14px;display:block}
.mini h3{font-size:23px;margin-bottom:10px}
.mini p{color:var(--text-secondary);font-size:14.5px;line-height:1.55}
.mini .tags{margin:0}
.mini-foot{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mini .go{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--hair-strong);color:var(--text-secondary);
  transition:border-color .45s var(--ease),color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
.mini .go svg{width:12px;height:12px}
.mini:hover .go{border-color:var(--accent);color:var(--accent);background:rgba(139,123,255,.12);transform:translate(2px,-2px)}

/* ============================================================
   WANDERLUST + UZIMA
   ============================================================ */
.wl{background:radial-gradient(ellipse 58% 80% at 12% 10%,rgba(139,123,255,.10),transparent 62%)}
.uz{background:radial-gradient(ellipse 58% 80% at 88% 10%,rgba(76,196,222,.09),transparent 62%)}

/* the booking journey, read left to right, scrolling inside its own lane */
.flowstrip{
  display:flex;gap:clamp(12px,1.6vw,20px);margin-top:clamp(32px,4vw,48px);
  overflow-x:auto;padding-bottom:16px;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--accent-line) transparent;
}
.flowstrip::-webkit-scrollbar{height:6px}
.flowstrip::-webkit-scrollbar-thumb{background:var(--accent-line);border-radius:3px}
.flowstrip::-webkit-scrollbar-track{background:rgba(201,212,255,.06);border-radius:3px}
.flowstrip figure{margin:0;flex:0 0 auto;width:clamp(150px,17vw,208px);scroll-snap-align:start}
.flowstrip img{
  border-radius:14px;width:100%;height:auto;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.6));
  transition:transform .6s var(--ease);
}
.flowstrip figure:hover img{transform:translateY(-5px)}
.flowstrip figcaption{
  margin-top:14px;display:flex;align-items:baseline;gap:9px;
  font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--text-secondary);
}
.flowstrip figcaption span{color:var(--accent)}

.thumbrow{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(28px,3.4vw,42px);
}
@media (max-width:820px){.thumbrow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.thumbrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.thumbrow img{
  border-radius:12px;width:100%;height:auto;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));
  transition:transform .6s var(--ease);
}
.thumbrow img:hover{transform:translateY(-4px)}

.uz-hero{margin:clamp(32px,4vw,48px) 0 0}
.uz-hero img{
  border-radius:16px;width:100%;height:auto;border:1px solid var(--hair);
  box-shadow:0 34px 70px -20px rgba(0,0,0,.8);
}
.uz-hero figcaption{
  margin-top:18px;font-size:14.5px;color:var(--text-secondary);max-width:66ch;line-height:1.6;
}
.uz-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(28px,3.4vw,42px);
}
@media (max-width:900px){.uz-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.uz-grid{grid-template-columns:1fr}}
.uz-grid figure{margin:0}
.uz-grid img{
  border-radius:11px;width:100%;height:auto;border:1px solid var(--hair);
  transition:transform .6s var(--ease),border-color .6s var(--ease);
}
.uz-grid figure:hover img{transform:translateY(-4px);border-color:var(--accent-line)}
.uz-grid figcaption{
  margin-top:11px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--text-secondary);
}

.scopenote{
  margin-top:clamp(26px,3.2vw,38px);padding:16px 20px;border-radius:12px;
  border:1px solid var(--hair);background:rgba(18,18,42,.4);
  font:400 10.5px/1.7 var(--mono);letter-spacing:.1em;color:var(--text-secondary);max-width:80ch;
}

/* ============================================================
   CASE STUDY
   ============================================================ */
.case-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:clamp(32px,4vw,48px)}
@media (max-width:820px){.cards-3{grid-template-columns:1fr}}
.card{
  padding:26px 24px;border-radius:16px;border:1px solid var(--hair);
  background:rgba(18,18,42,.42);
  transition:border-color .5s var(--ease),background .5s var(--ease),transform .5s var(--ease);
}
.card:hover{border-color:var(--accent-line);background:rgba(25,25,52,.55);transform:translateY(-3px)}
.card h4{font-size:17.5px;margin-bottom:9px;font-family:var(--display);font-weight:700}
.card p{font-size:14.5px;color:var(--text-secondary);line-height:1.55}
.card .ic{width:34px;height:34px;margin-bottom:16px;color:var(--accent)}

/* research rows */
.research{margin-top:clamp(32px,4vw,48px);display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:18px;overflow:hidden}
.rrow{
  display:grid;grid-template-columns:auto 1.15fr 1fr;gap:clamp(18px,2.6vw,34px);
  padding:clamp(22px,2.6vw,32px);background:var(--canvas);align-items:start;
  transition:background .5s var(--ease);
}
.rrow:hover{background:rgba(18,18,42,.6)}
@media (max-width:900px){.rrow{grid-template-columns:auto 1fr;gap:16px}.rrow .imp{grid-column:2}}
.rrow .num{font:500 11px/1.4 var(--mono);color:var(--accent);letter-spacing:.14em;padding-top:4px}
.rrow .find{font-size:16.5px;line-height:1.5}
.rrow .src{display:block;margin-top:10px;font:400 11px/1.4 var(--mono);color:var(--text-secondary);letter-spacing:.03em}
.rrow .imp{font-size:14.5px;color:var(--text-secondary);line-height:1.55;padding-left:clamp(0px,1.4vw,18px);border-left:1px solid var(--hair)}
@media (max-width:900px){.rrow .imp{padding-left:0;border-left:0;border-top:1px solid var(--hair);padding-top:14px}}

.takeaway{
  margin-top:clamp(28px,3.4vw,42px);padding:clamp(28px,3.6vw,48px);
  border-radius:20px;border:1px solid var(--accent-line);
  background:radial-gradient(ellipse 90% 140% at 12% 0%,rgba(139,123,255,.16),transparent 66%),rgba(18,18,42,.5);
}
.takeaway p{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.7vw,32px);line-height:1.26;letter-spacing:-.018em;max-width:26ch}

/* how it works: four drawn diagrams, equal treatment */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,20px);margin-top:clamp(32px,4vw,48px)}
@media (max-width:1000px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}
.step{
  padding:24px 22px 26px;border-radius:18px;border:1px solid var(--hair);
  background:linear-gradient(rgba(18,18,42,.55),rgba(12,12,28,.3));
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.step:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.step .diag{width:100%;height:auto;margin-bottom:18px;border-radius:12px;background:rgba(6,6,15,.55)}
.step .n{font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:10px}
.step h4{font-size:17px;margin-bottom:8px;font-family:var(--display);font-weight:700}
.step p{font-size:14px;color:var(--text-secondary);line-height:1.55}
.diag .dl{stroke:var(--accent-line);stroke-width:1.1;fill:none;stroke-linecap:round}
.diag .dn{fill:var(--starlight)}
.diag .da{fill:var(--accent)}
.diag .dm{stroke:var(--hair-strong);stroke-width:1;fill:none;stroke-dasharray:3 4}
.diag .pulse{animation:dpulse 5.4s var(--ease-soft) -1.2s infinite}
@keyframes dpulse{0%,100%{opacity:.35}50%{opacity:1}}

/* the turn: V1 vs V2 */
.turn{
  background:
    radial-gradient(ellipse 60% 90% at 84% 8%,rgba(139,123,255,.11),transparent 60%),
    linear-gradient(rgba(16,16,38,.7),rgba(10,10,22,0));
}
.pullquote{
  margin:clamp(30px,3.8vw,48px) 0;padding-left:clamp(20px,2.6vw,34px);
  border-left:2px solid var(--accent);
}
.pullquote p{
  font-family:var(--display);font-weight:600;font-size:clamp(20px,2.6vw,30px);
  line-height:1.3;letter-spacing:-.016em;max-width:30ch;
}
.pullquote cite{display:block;margin-top:14px;font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--text-secondary);font-style:normal}

.compare{margin-top:clamp(28px,3.4vw,44px);display:grid;gap:clamp(20px,2.6vw,32px)}
.cmp{
  padding:clamp(20px,2.6vw,32px);border-radius:20px;border:1px solid var(--hair);
  background:rgba(14,14,32,.5);
}
.cmp-labels{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.lbl{padding:6px 12px;border-radius:6px;font:500 9.5px/1 var(--mono);letter-spacing:.16em}
.lbl.v1{background:rgba(201,212,255,.10);color:var(--text-secondary);border:1px solid var(--hair-strong)}
.lbl.v2{background:var(--accent);color:#0A0A16}
.cmp img{border-radius:10px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.55))}
.cmp .note{margin-top:18px;font-size:14.5px;color:var(--text-secondary);max-width:66ch;line-height:1.6}
.cmp .note b{color:var(--text-primary);font-weight:600}

/* prototype player */
.player{
  margin-top:clamp(30px,3.6vw,46px);position:relative;border-radius:20px;overflow:hidden;
  border:1px solid var(--hair);background:var(--canvas-deep);
  display:grid;place-items:center;padding:clamp(20px,3vw,40px);
}
.player-frame{position:relative;width:min(420px,100%);border-radius:14px;overflow:hidden;background:#000}
.player video{width:100%;display:block}
.player-play{
  position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;border:0;
  background:rgba(6,6,15,.5);backdrop-filter:blur(3px);
  transition:opacity .5s var(--ease),background .5s var(--ease);
}
.player-play:hover{background:rgba(6,6,15,.36)}
.player-play[hidden]{display:none !important}
.player-play .disc{
  width:64px;height:64px;border-radius:50%;background:var(--accent);color:#0A0A16;
  display:grid;place-items:center;box-shadow:0 0 0 0 var(--accent-muted);
  animation:discpulse 3.4s var(--ease-soft) -1s infinite;
}
@keyframes discpulse{0%,100%{box-shadow:0 0 0 0 rgba(139,123,255,.34)}50%{box-shadow:0 0 0 16px rgba(139,123,255,0)}}
.player-cap{margin-top:20px;font:400 11px/1.5 var(--mono);letter-spacing:.1em;color:var(--text-secondary);text-align:center}

/* honest status */
.tests{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,16px);margin-top:clamp(30px,3.6vw,44px)}
@media (max-width:1080px){.tests{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.tests{grid-template-columns:1fr}}
.test{padding:22px 20px;border-radius:14px;border:1px solid var(--hair);background:rgba(18,18,42,.36)}
.test .n{font:500 10px/1 var(--mono);color:var(--accent);letter-spacing:.2em;display:block;margin-bottom:12px}
.test h4{font-size:15.5px;margin-bottom:8px;font-family:var(--display);font-weight:700}
.test p{font-size:13.5px;color:var(--text-secondary);line-height:1.52}
.statusline{
  margin-top:clamp(24px,3vw,34px);display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--text-secondary);
}
.statusline b{color:var(--accent);font-weight:500}
.deck-cta{margin-top:clamp(24px,3vw,34px);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dl-meta{font:400 10px/1.5 var(--mono);letter-spacing:.14em;color:var(--text-secondary)}
.qa .a .btn{vertical-align:middle;margin-right:14px}

/* ============================================================
   THE INTERACTIVE MOMENT
   ============================================================ */
.resolve-wrap{
  margin-top:clamp(34px,4vw,52px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;
}
@media (max-width:900px){.resolve-wrap{grid-template-columns:1fr}}
.holder{
  position:relative;aspect-ratio:370/720;max-width:330px;width:100%;margin:0 auto;
  border-radius:26px;overflow:hidden;cursor:grab;
  border:1px solid var(--hair);background:rgba(6,6,15,.7);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.holder:active{cursor:grabbing}
.holder .wire{position:absolute;inset:0;width:100%;height:100%}
.holder .wire rect{fill:none;stroke:var(--accent-line);stroke-width:1.2}
.holder .wire .fill{fill:rgba(139,123,255,.10);stroke:none}
.holder .real{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:calc(clamp(0,(var(--h,0) - .74)*3.9,1));
}
.holder .glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(139,123,255,.28),transparent 70%);
  opacity:var(--h,0);
}
.holder-bar{
  position:absolute;left:16px;right:16px;bottom:16px;height:3px;border-radius:2px;
  background:rgba(201,212,255,.16);overflow:hidden;
}
.holder-bar i{display:block;height:100%;background:var(--accent);width:calc(var(--h,0)*100%);border-radius:2px}
.holder-hint{
  position:absolute;left:0;right:0;bottom:34px;text-align:center;
  font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--starlight);
  text-shadow:0 1px 6px rgba(5,5,12,.9);pointer-events:none;
}
.resolve-copy .done-line{
  margin-top:22px;font:500 11px/1 var(--mono);letter-spacing:.18em;color:var(--accent);
  opacity:calc(clamp(0,(var(--h,0) - .92)*12,1));transition:opacity .4s var(--ease);
}

/* ============================================================
   PROCESS: a thread with nodes, not another card grid
   ============================================================ */
.proc{margin-top:clamp(34px,4vw,52px);position:relative}
.proc-line{
  position:absolute;left:0;right:0;top:19px;height:1px;background:var(--hair);
}
.proc-line i{
  display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--starlight));
  width:calc(var(--pd,0)*100%);transition:width .1s linear;
}
.proc-row{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(10px,1.4vw,18px);position:relative}
@media (max-width:1000px){.proc-row{grid-template-columns:repeat(4,1fr)}.proc-line{display:none}}
@media (max-width:640px){.proc-row{grid-template-columns:1fr 1fr}}
.proc-step .dot{
  width:12px;height:12px;border-radius:50%;background:var(--canvas);
  border:1.5px solid var(--accent-line);margin:13px 0 20px;position:relative;
  transition:background .6s var(--ease),box-shadow .6s var(--ease),transform .6s var(--ease);
}
.proc-step.lit .dot{background:var(--accent);box-shadow:0 0 0 5px var(--accent-muted);transform:scale(1.12)}
.proc-step h4{font-size:16px;margin-bottom:7px;font-family:var(--display);font-weight:700}
.proc-step p{font-size:13.5px;color:var(--text-secondary);line-height:1.5}
.proc-note{
  margin-top:clamp(30px,3.6vw,44px);padding:24px 26px;border-radius:16px;
  border:1px solid var(--accent-line);background:rgba(139,123,255,.07);
  font-size:16px;max-width:62ch;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-wrap{
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.4vw,72px);
  align-items:center;
}
@media (max-width:900px){.about-wrap{grid-template-columns:1fr;gap:44px}}
.about-copy h2{font-size:clamp(27px,3.5vw,42px);max-width:17ch;margin-top:4px}

.about-art{position:relative}
.portrait{position:relative;isolation:isolate}
/* She emerges out of the dark rather than sitting on a rectangle: the studio
   backdrop is feathered away at every edge so nothing reads as a pasted slab. */
.portrait img{
  width:100%;display:block;position:relative;z-index:2;
  /* an inscribed ellipse: the falloff has to reach zero BEFORE the element's own
     edge, or the mask just cuts off at whatever alpha it happened to be on */
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 47%,#000 40%,rgba(0,0,0,.92) 62%,rgba(0,0,0,.34) 82%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 47%,#000 40%,rgba(0,0,0,.92) 62%,rgba(0,0,0,.34) 82%,transparent 100%);
}
.portrait::before{
  content:"";position:absolute;inset:-16%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 52% 48% at 53% 42%,rgba(139,123,255,.30),transparent 68%);
  animation:portraitglow 14s var(--ease-soft) -4s infinite alternate;
}
@keyframes portraitglow{from{opacity:.62;transform:scale(.98)}to{opacity:1;transform:scale(1.04)}}
/* the arcs pass BEHIND her, and fade out before they reach the pills below */
.portrait .orbits{
  position:absolute;left:-9%;top:-6%;width:118%;height:112%;z-index:1;pointer-events:none;overflow:visible;
  -webkit-mask-image:linear-gradient(#000 58%,rgba(0,0,0,.5) 78%,transparent 96%);
  mask-image:linear-gradient(#000 58%,rgba(0,0,0,.5) 78%,transparent 96%);
}
.portrait .orbits ellipse{fill:none;stroke:var(--accent-line);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.55}
.portrait .orbits ellipse:nth-of-type(2){stroke:var(--starlight);opacity:.20}
.portrait .orbits ellipse:nth-of-type(3){opacity:.30}
.portrait .orbits .orbit-node{fill:var(--starlight);opacity:.8;animation:twinkle 6s var(--ease-soft) -2s infinite alternate}
.portrait-fade{
  position:absolute;left:0;right:0;bottom:-1px;height:26%;z-index:3;pointer-events:none;
  background:linear-gradient(rgba(10,10,22,0),var(--canvas) 92%);
}

.exploring{position:relative;z-index:4;margin-top:clamp(14px,2vw,22px)}
.explabel{
  display:block;margin-bottom:12px;
  font:400 12px/1 var(--body);color:var(--text-secondary);
}
.exploring .pill-row{gap:8px}
.about-quote{
  margin:26px 0;padding:22px 26px;border-radius:16px;
  border:1px solid var(--hair);background:rgba(18,18,42,.44);
  font-family:var(--display);font-weight:600;font-size:clamp(17px,1.9vw,22px);line-height:1.34;letter-spacing:-.012em;
}
.lists{margin-top:28px}
.lists h4{font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--accent);margin-bottom:14px;font-family:var(--mono);font-weight:500}
.pill-row{display:flex;flex-wrap:wrap;gap:7px}
.pill{
  padding:6px 11px;border-radius:8px;border:1px solid var(--hair);
  font:400 12px/1 var(--body);color:var(--text-secondary);
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.pill:hover{border-color:var(--accent-line);color:var(--text-primary);background:rgba(139,123,255,.09)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{margin-top:clamp(30px,3.6vw,44px);border-top:1px solid var(--hair)}
.qa{border-bottom:1px solid var(--hair)}
.qa summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(17px,1.9vw,21px);letter-spacing:-.012em;
  transition:color .4s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-hover)}
.qa summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .45s var(--ease);
}
.qa[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.qa .a{padding:0 0 26px;max-width:70ch;color:var(--text-secondary);font-size:15.5px;line-height:1.66}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  background:
    radial-gradient(ellipse 70% 100% at 50% 100%,rgba(139,123,255,.16),transparent 66%),
    linear-gradient(rgba(10,10,22,0),rgba(16,16,38,.7));
}
.form{margin-top:clamp(30px,3.6vw,44px);max-width:620px}
.field{margin-bottom:20px}
.field label{display:block;font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--text-secondary);margin-bottom:10px}
.field input,.field textarea{
  width:100%;padding:14px 16px;border-radius:12px;
  background:rgba(6,6,15,.6);border:1px solid var(--hair-strong);color:var(--text-primary);
  font:400 15.5px/1.5 var(--body);
  transition:border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(154,153,188,.6)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(10,10,24,.8);
  box-shadow:0 0 0 4px var(--accent-muted);
}
.field textarea{resize:vertical;min-height:118px}
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.form-note{font:400 12px/1.5 var(--mono);color:var(--text-secondary);max-width:40ch}
.sent{
  display:none;padding:24px 26px;border-radius:16px;
  border:1px solid var(--accent-line);background:rgba(139,123,255,.10);
}
.sent.show{display:block}
.sent p{font-family:var(--display);font-weight:600;font-size:19px}
.sent small{display:block;margin-top:10px;font:400 13px/1.5 var(--body);color:var(--text-secondary)}
.direct{margin-top:26px;font-size:14.5px;color:var(--text-secondary)}
.direct a{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent-line);padding-bottom:1px;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.direct a:hover{color:var(--accent-hover);border-color:var(--accent-hover)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  position:relative;z-index:2;background:var(--canvas-deep);
  border-top:1px solid var(--hair);padding:clamp(52px,6vw,78px) 0 40px;
}
footer .shell{grid-template-columns:1fr}
footer .shell > *{grid-column:1}
.foot-top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-start}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--text-secondary);text-decoration:none;transition:color .35s var(--ease)}
.foot-links a:hover{color:var(--accent-hover)}
.disclose{
  margin-top:38px;padding-top:26px;border-top:1px solid var(--hair);
  font-size:13.5px;color:var(--text-secondary);max-width:74ch;line-height:1.62;
}
.copyline{margin-top:20px;font:400 11px/1 var(--mono);letter-spacing:.1em;color:rgba(154,153,188,.66)}

/* ============================================================
   THE FIVE STATIC-HERO GATES: must match the JS strings exactly
   ============================================================ */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:grid}
}

/* short scrub-capable windows: keep the scrub, drop the overlays with no room */
@media (max-height:560px){.cue{display:none}}

/* ============================================================
   REDUCED MOTION: honoured completely, and live in both directions
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  .rise,.stg > *{opacity:1 !important;transform:none !important}
  .thread path{stroke-dashoffset:0 !important}
  .node{opacity:1;transform:translateY(-50%) scale(1);background:var(--accent);border-color:var(--accent-hover)}
  .proc-step .dot{background:var(--accent)}
  .proc-line i{width:100% !important}
  .holder .real{opacity:1}
  .holder .glow{opacity:.5}
  .holder-bar i{width:100% !important}
  .player-play .disc{animation:none}
  /* positional transforms must survive, or mobile pieces fly off screen */
  .ring{transform:translateX(-50%) rotate(-90deg) !important}
  .cue,.holder-hint{transform:translateX(-50%) !important}
  .band-c .cue{transform:translateX(-50%) !important}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ============================================================
   MULTI-PAGE FURNITURE
   ============================================================ */

/* the compact hero on inner pages: the film's resting frame, held still */
.page-hero{
  position:relative;min-height:62vh;display:grid;align-content:center;
  padding:150px max(24px,calc((100vw - var(--shell))/2 + 24px)) 64px;
  background-image:url('hero-ending.jpg');background-size:cover;background-position:center 62%;
}
.page-hero .ph-scrim{
  position:absolute;inset:0;
  background:linear-gradient(rgba(6,6,15,.86),rgba(6,6,15,.60) 46%,var(--canvas) 96%);
}
.page-hero .ph-in{position:relative;max-width:min(90vw,760px);text-shadow:var(--tshadow)}
.page-hero h1{font-size:clamp(32px,5.2vw,62px);max-width:16ch}
.page-hero .lede{max-width:54ch}
.page-hero .kicker{text-shadow:none}
@media (max-width:720px){.page-hero{min-height:52vh;padding-top:120px}}

/* the one door from the front page into the deep work */
.deepdoor{
  background:
    radial-gradient(ellipse 54% 80% at 80% 12%,rgba(139,123,255,.13),transparent 62%),
    linear-gradient(rgba(16,16,38,.55),rgba(10,10,22,0));
}
.deepdoor h2{max-width:17ch}

/* ============================================================
   THE CV PAGE
   ============================================================ */
.cv-lead{max-width:62ch}
.cv-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;align-items:center}

.cv-block{margin-top:clamp(40px,5vw,66px)}
.cv-block > .kicker{margin-bottom:26px}

.cv-role{
  display:grid;grid-template-columns:210px 1fr;gap:clamp(18px,3vw,40px);
  padding:clamp(22px,2.6vw,30px) 0;border-top:1px solid var(--hair);
}
@media (max-width:760px){.cv-role{grid-template-columns:1fr;gap:14px}}
.cv-when{font:500 11px/1.6 var(--mono);letter-spacing:.1em;color:var(--text-secondary)}
.cv-when b{display:block;color:var(--accent);font-weight:500;margin-bottom:6px}
.cv-role h3{font-size:clamp(19px,2.1vw,23px);margin-bottom:6px}
.cv-where{font:500 12px/1 var(--mono);letter-spacing:.09em;color:var(--text-secondary);margin-bottom:16px;display:block}
.cv-role ul{margin:0;padding-left:18px;color:var(--text-secondary);font-size:15px;line-height:1.65}
.cv-role li{margin-bottom:8px}
.cv-role li::marker{color:var(--accent)}
.cv-role li b{color:var(--text-primary);font-weight:600}
.cv-note{
  margin-top:14px;padding:14px 16px;border-radius:10px;
  border-left:2px solid var(--accent);background:rgba(139,123,255,.07);
  font-size:14.5px;line-height:1.6;color:var(--text-secondary);
}
.cv-note b{color:var(--text-primary);font-weight:600}

.cv-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
@media (max-width:760px){.cv-cols{grid-template-columns:1fr}}
.cv-cert{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px 22px;border-radius:14px;border:1px solid var(--hair);
  background:rgba(18,18,42,.42);margin-bottom:14px;
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.cv-cert:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.cv-cert .dot{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--accent);
  margin-top:7px;box-shadow:0 0 0 4px var(--accent-muted);
}
.cv-cert h4{font-size:16px;margin-bottom:5px;font-family:var(--display);font-weight:700}
.cv-cert p{font:400 12.5px/1.55 var(--mono);letter-spacing:.02em;color:var(--text-secondary)}

.cv-skill-group{margin-bottom:26px}
.cv-skill-group h4{
  font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--accent);
  margin-bottom:13px;font-family:var(--mono);font-weight:500;
}

/* A CV reads as one continuous document, so its blocks sit closer together
   than the marketing sections on the other pages. */
.cv-sec{padding:clamp(30px,3.6vw,52px) 0}
.cv-sec:first-of-type{padding-top:clamp(52px,6vw,84px)}
.cv-sec .cv-block{margin-top:0}

/* the proof strip introduces the work directly below it, so they sit as one unit */
.proof{padding-bottom:clamp(28px,3.4vw,48px)}

/* the callout that separates real-world work from concept work */
.realnote{
  margin-top:22px;padding:18px 22px;border-radius:14px;
  border-left:2px solid var(--accent);background:rgba(139,123,255,.08);
  font-size:15.5px;line-height:1.66;color:var(--text-secondary);max-width:70ch;
}
.realnote b{color:var(--text-primary);font-weight:600}

/* ============================================================
   THE WORKS GRID on the front page
   ============================================================ */
.worksgrid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,24px);
  margin-top:clamp(16px,2.2vw,24px);
}
@media (max-width:860px){.worksgrid{grid-template-columns:1fr}}

.worklink{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  padding:clamp(24px,2.8vw,34px);border-radius:20px;min-height:250px;
  border:1px solid var(--hair);background:linear-gradient(rgba(18,18,42,.6),rgba(12,12,28,.3));
  text-decoration:none;overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease),background .5s var(--ease);
}
.worklink:hover{
  border-color:var(--accent-line);transform:translateY(-3px);
  background:linear-gradient(rgba(25,25,52,.7),rgba(14,14,32,.4));
}
.wl-kind{
  display:block;margin-bottom:14px;
  font:500 9.5px/1 var(--mono);letter-spacing:.19em;color:var(--text-secondary);
}
.worklink h3{font-size:23px;margin-bottom:11px}
.worklink p{color:var(--text-secondary);font-size:14.5px;line-height:1.6;max-width:46ch}
.wl-go{
  display:inline-flex;align-items:center;gap:9px;
  font:500 11.5px/1 var(--mono);letter-spacing:.08em;color:var(--accent);
  transition:gap .4s var(--ease),color .4s var(--ease);
}
.wl-go svg{width:11px;height:11px;transition:transform .4s var(--ease)}
.worklink:hover .wl-go{color:var(--accent-hover);gap:13px}
.worklink:hover .wl-go svg{transform:translate(2px,-2px)}

/* the certification card carries its badge, faded into the corner */
.worklink.has-badge{padding-right:clamp(110px,13vw,168px)}
.wl-badge{
  position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  width:clamp(112px,13vw,160px);height:auto;
  opacity:.5;pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 42% 50%,#000 52%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 42% 50%,#000 52%,transparent 100%);
}
.worklink.has-badge:hover .wl-badge{opacity:.72;transform:translateY(-50%) scale(1.04)}
@media (max-width:520px){
  .worklink.has-badge{padding-right:clamp(24px,2.8vw,34px)}
  .wl-badge{opacity:.16;right:-26px}
}

.cv-elsewhere{margin-top:22px;font-size:15.5px;color:var(--text-secondary)}
.cv-elsewhere a{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent-line);padding-bottom:1px;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.cv-elsewhere a:hover{color:var(--accent-hover);border-color:var(--accent-hover)}

/* the link back to where the project actually began */
.origin{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px);
  flex-wrap:wrap;margin-top:clamp(28px,3.4vw,44px);
  padding:clamp(24px,3vw,34px);border-radius:18px;
  border:1px dashed var(--hair-strong);background:rgba(18,18,42,.34);
}
.origin-kind{
  display:block;margin-bottom:12px;
  font:500 9.5px/1 var(--mono);letter-spacing:.19em;color:var(--text-secondary);
}
.origin h3{font-size:clamp(19px,2.2vw,25px);margin-bottom:10px;max-width:26ch}
.origin p{color:var(--text-secondary);font-size:14.5px;line-height:1.62;max-width:62ch}
.origin .btn{flex:0 0 auto}

/* a failed send must not look like a success: different colour, different weight */
.sent.error{
  border-color:rgba(255,138,128,.55);
  background:rgba(255,138,128,.10);
}
.sent.error p{color:#FFB4AC}

/* ============================================================
   CONTACT DETAILS
   ============================================================ */
.contact-details{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(30px,3.6vw,44px);padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--hair);max-width:920px;
}
.cd-item{display:flex;flex-direction:column;gap:9px;min-width:0}
.cd-label{font:500 9.5px/1 var(--mono);letter-spacing:.2em;color:var(--accent)}
.cd-item a,.cd-plain{
  font-size:15px;color:var(--text-primary);text-decoration:none;
  overflow-wrap:anywhere;
}
.cd-item a{
  border-bottom:1px solid var(--hair-strong);padding-bottom:2px;width:fit-content;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.cd-item a:hover{color:var(--accent-hover);border-color:var(--accent-hover)}
.cd-plain{color:var(--text-secondary)}
.sent.error a{color:#FFB4AC;text-decoration:underline}

/* only flag a field once the visitor has actually interacted with it */
.field input:user-invalid,.field textarea:user-invalid{border-color:rgba(255,138,128,.7)}
.field input:user-invalid:focus,.field textarea:user-invalid:focus{box-shadow:0 0 0 4px rgba(255,138,128,.16)}

/* ============================================================
   PRINT: the CV becomes a light, ink-friendly document.
   A dark screen design is wrong for paper, so this inverts the
   palette rather than pretending one treatment suits both.
   ============================================================ */
@media print{
  @page{size:A4;margin:0}

  :root{
    --canvas:#fff;--canvas-deep:#fff;--panel:#fff;--panel-2:#fff;
    --accent:#5A46E0;--accent-hover:#5A46E0;--accent-muted:rgba(90,70,224,.12);
    --accent-line:rgba(90,70,224,.35);--starlight:#5A46E0;
    --text-primary:#14141F;--text-secondary:#4A4A5C;
    --hair:rgba(20,20,31,.16);--hair-strong:rgba(20,20,31,.3);
    --tshadow:none;
  }
  html,body{background:#fff !important;color:#14141F !important}
  body{padding:13mm 14mm !important;margin:0 !important}
  *,*::before,*::after{
    animation:none !important;transition:none !important;
    box-shadow:none !important;text-shadow:none !important;
  }

  /* screen furniture that has no business on paper */
  .env,.nav,.skip,.thread,.node,.page-hero .ph-scrim,
  .cv-actions,.contact .btn,.cv-sec.contact,footer .foot-links,
  .deepdoor,.hero,.static-hero,.cue,.ring{display:none !important}

  /* the header becomes a plain document masthead */
  .page-hero{
    min-height:0;background:none !important;padding:0 0 11pt;
    border-bottom:2pt solid var(--accent);margin-bottom:12pt;
  }
  .page-hero .ph-in{max-width:none}
  .page-hero h1{font-size:26pt;max-width:none;margin-bottom:8pt}
  .page-hero .lede,.cv-lead{font-size:9.6pt;line-height:1.5;max-width:none;color:#3A3A4A}

  .flow::before{display:none}
  /* screen gradients render as grey slabs on paper */
  .contact,.turn,.wl,.uz,.deepdoor,.proof-item,.takeaway,.feature,.mini,.worklink{background:none !important}
  .shell{display:block;max-width:none;padding:0}
  .shell > *{grid-column:auto}
  section,.cv-sec{padding:0 0 8pt !important;break-inside:auto}
  .cv-block{margin-top:0}

  .kicker{font-size:7.4pt;letter-spacing:.18em;margin-bottom:8pt;color:var(--accent)}
  .kicker::before{background:var(--accent)}
  h2{font-size:13pt;max-width:none;margin-bottom:6pt}
  h3{font-size:11pt}
  .lede{font-size:9.6pt;line-height:1.5;max-width:none;margin-top:6pt}

  .cv-role{
    grid-template-columns:112pt 1fr;gap:11pt;padding:7pt 0;
    border-top:.5pt solid var(--hair);
  }
  .cv-role h3,.cv-role .cv-where{break-after:avoid}
  .cv-role ul{break-inside:auto}
  .cv-when{font-size:7.6pt;line-height:1.5}
  .cv-where{font-size:7.6pt;margin-bottom:6pt}
  .cv-role ul{font-size:9.1pt;line-height:1.42;padding-left:12pt}
  .cv-role li{margin-bottom:2pt}
  .cv-note{
    background:var(--accent-muted) !important;border-left:2pt solid var(--accent);
    padding:6pt 8pt;font-size:8.6pt;line-height:1.4;margin-top:6pt;
  }
  .cv-note a{color:var(--accent) !important;text-decoration:none}

  .cv-cols{gap:18pt}
  .cv-cert{
    padding:0;border:0;background:none !important;margin-bottom:5.5pt;
    gap:7pt;break-inside:avoid;
  }
  .cv-cert .dot{width:4pt;height:4pt;margin-top:4pt;box-shadow:none !important;background:var(--accent)}
  .cv-cert h4{font-size:9.4pt;margin-bottom:1pt}
  .cv-cert p{font-size:7.6pt}

  .cv-skill-group{margin-bottom:9pt;break-inside:avoid}
  .cv-skill-group h4{font-size:7.4pt;margin-bottom:6pt}
  .pill-row{gap:4pt}
  .pill{
    padding:2.5pt 6pt;font-size:8.2pt;border-radius:3pt;
    border:.5pt solid var(--hair-strong);color:#2E2E3E;
  }
  .cv-elsewhere{font-size:9pt;margin-top:10pt}
  .cv-elsewhere a{color:var(--accent) !important;border:0}

  footer{background:#fff !important;border-top:.5pt solid var(--hair);padding:10pt 0 0}
  .disclose{font-size:7.6pt;line-height:1.45;max-width:none}
  .copyline{font-size:7pt;margin-top:6pt}
  .brand b{color:#14141F}
}

.cv-dlmeta{margin-top:14px}
@media print{.cv-dlmeta{display:none !important}}

/* the CV's own contact line: on screen, and on the PDF where it matters most */
.cv-contactbar{
  list-style:none;margin:24px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 0;
  font-size:14.5px;color:var(--text-secondary);
}
.cv-contactbar li{display:flex;align-items:center}
.cv-contactbar li:not(:last-child)::after{
  content:"";width:3px;height:3px;border-radius:50%;
  background:var(--accent);margin:0 14px;flex:0 0 auto;
}
.cv-contactbar a{
  color:var(--text-primary);text-decoration:none;
  border-bottom:1px solid var(--hair-strong);padding-bottom:1px;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.cv-contactbar a:hover{color:var(--accent-hover);border-color:var(--accent-hover)}
@media print{
  .cv-contactbar{margin-top:9pt;font-size:8.6pt;gap:3pt 0}
  .cv-contactbar li:not(:last-child)::after{width:2pt;height:2pt;margin:0 7pt}
  .cv-contactbar a{color:#14141F !important;border:0}
}