/* David Kelbakiani — studio layout
   Dark editorial canvas: oversized light serif, Inter Tight statements, mono UI labels.
   Two-column rhythm: a narrow label rail (1fr) and a wide content column (2fr). */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/inter-tight-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-tight-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-tight-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

/* ---------- Tokens (dark first) ---------- */
:root{
  color-scheme:dark;
  --bg:#080809;--panel:#121214;--panel-2:#1a1a1d;--text:#f4f4f1;--muted:#77777d;--faint:#3a3a3f;--line:#202024;
  --accent:#3a5cff;--accent-ink:#ffffff;--glass:rgba(24,24,27,.72);
  --serif:"Instrument Serif","Iowan Old Style","Times New Roman",serif;
  --sans:"Inter Tight","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --gutter:clamp(1rem,2.2vw,2.25rem);
  --radius:clamp(.75rem,1.2vw,1.1rem);
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;--bg:#f3f2ee;--panel:#e8e7e2;--panel-2:#dddcd6;--text:#0b0b0c;--muted:#6f6f72;--faint:#b9b8b2;--line:#d6d5cf;
    --accent:#2049ee;--glass:rgba(243,242,238,.78);
  }
}
:root[data-theme="light"]{
  color-scheme:light;--bg:#f3f2ee;--panel:#e8e7e2;--panel-2:#dddcd6;--text:#0b0b0c;--muted:#6f6f72;--faint:#b9b8b2;--line:#d6d5cf;
  --accent:#2049ee;--glass:rgba(243,242,238,.78);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.125rem/1.35 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;transition:background-color .4s,color .4s}
body.modal-open{overflow:hidden}
h1,h2,h3,p,figure,ul{margin:0}
ul{list-style:none;padding:0}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
::selection{background:var(--accent);color:#fff}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.display{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.display em,.display-i{font-family:var(--serif);font-style:italic;font-weight:400}
.mono{font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.tiny{font-size:.6875rem}
.muted{color:var(--muted)}
.skip{position:fixed;left:1rem;top:1rem;z-index:100;padding:.7rem 1rem;background:var(--text);color:var(--bg);border-radius:999px;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:calc(env(safe-area-inset-top,0px) + 1.1rem) var(--gutter) 1.1rem;transition:background-color .4s,backdrop-filter .4s}
.header.is-scrolled{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.wordmark{font-family:var(--serif);font-size:1.6rem;letter-spacing:-.02em;line-height:1;justify-self:start}
.wordmark sup{font-family:var(--sans);font-size:.45em;margin-left:.1em}
.nav{display:flex;gap:2.25rem}
.nav a{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;position:relative;padding:.4rem 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.header-tools{display:flex;gap:.5rem;align-items:center;justify-self:end}
.chip{display:inline-flex;align-items:center;gap:.4rem;height:2.25rem;padding:0 .9rem;border-radius:999px;background:var(--panel);color:var(--text);font-size:.6875rem;transition:background-color .3s,color .3s}
.chip:hover{background:var(--panel-2)}
.chip[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.cta{display:inline-flex;align-items:center;gap:.6rem;height:2.5rem;padding:0 1.15rem;border-radius:999px;background:var(--panel);color:var(--text);transition:background-color .35s,color .35s,transform .4s var(--ease)}
.cta:hover{background:var(--accent);color:#fff}
.spark{color:var(--accent);font-size:1rem;line-height:0;transition:transform .8s var(--ease),color .3s}
.cta:hover .spark{color:#fff;transform:rotate(180deg)}

/* ---------- Hero ---------- */
.hero{padding:clamp(7.5rem,14vw,11rem) var(--gutter) 0}
.eyebrow{color:var(--muted);margin-bottom:clamp(1.25rem,2.5vw,2rem);font-size:.75rem}
.hero h1{font-size:clamp(3.2rem,7.6vw,9rem);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line>span{display:block}
.js .hero h1 .line>span{animation:rise 1.2s var(--ease) both}
.js .hero h1 .line:nth-child(2)>span{animation-delay:.1s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}

.ticker{margin:clamp(3.5rem,8vw,7rem) calc(-1 * var(--gutter)) clamp(1.5rem,3vw,2.5rem);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;width:max-content;gap:clamp(2.5rem,5vw,4.5rem);animation:ticker 42s linear infinite;font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2.1rem);letter-spacing:-.01em;color:var(--muted);white-space:nowrap}
.ticker-track span{transition:color .3s}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span:hover{color:var(--text)}
@keyframes ticker{to{transform:translateX(-50%)}}

.reel{position:relative;margin:0 calc(-1 * var(--gutter) + .75rem);border-radius:var(--radius);overflow:hidden;background:var(--panel);isolation:isolate}
.reel video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.reel-tab{position:absolute;top:0;left:0;z-index:2;display:inline-flex;gap:.6rem;align-items:center;padding:.85rem 1.1rem;background:var(--bg);border-bottom-right-radius:var(--radius);font-size:.6875rem}
.reel figcaption{position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none}
.play{pointer-events:auto;display:inline-flex;align-items:center;gap:.8rem;height:3.25rem;padding:0 1.5rem 0 .5rem;border-radius:999px;background:var(--glass);color:var(--text);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:.75rem;transition:transform .5s var(--ease),background-color .3s}
.play:hover{transform:scale(1.05);background:var(--accent);color:#fff}
.play-dot{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--text)}
.play-dot::before{content:"";margin-left:3px;border-left:9px solid var(--bg);border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ---------- Two-column rhythm ---------- */
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.5rem,3vw,3rem);padding-inline:var(--gutter)}
.side-title{font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1}
.lead{font-family:var(--sans);font-weight:400;font-size:clamp(1.6rem,3.3vw,3rem);line-height:1.06;letter-spacing:-.025em;text-wrap:balance;max-width:24ch}
.lead em{font-size:1.08em;letter-spacing:-.01em}
.sublead{margin-top:clamp(1.5rem,3vw,2.5rem);max-width:38ch;color:var(--muted);font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.4}

.statement{padding-block:clamp(5rem,11vw,10rem)}
.portrait{width:clamp(4.5rem,7vw,6.5rem);aspect-ratio:1;height:auto;object-fit:cover;border-radius:50%;filter:grayscale(1) contrast(1.05);transition:filter .5s}
.portrait:hover{filter:none}

/* ---------- Featured work ---------- */
.work{padding-inline:var(--gutter)}
.work-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.5rem,3vw,3rem)}
.work-rail{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:6rem 2rem}
.rail-kicker{color:var(--muted);font-size:1.05rem;margin-top:auto}
.rail-category{font-size:clamp(2.6rem,5.2vw,5.5rem);line-height:1;margin-top:.75rem;overflow:hidden;padding-bottom:.08em}
#rail-category{display:inline-block;transition:transform .55s var(--ease),opacity .35s}
#rail-category.is-swapping{transform:translateY(70%);opacity:0}
.rail-client{margin-top:auto;display:flex;align-items:center;gap:.8rem}
.rail-client>span:last-child{display:grid;gap:.3rem;font-size:.95rem}
.client-mark{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.6rem;background:var(--accent);color:#fff;font-family:var(--mono);font-size:.75rem}
.work-list{display:grid;gap:clamp(1rem,1.6vw,1.5rem);padding-block:clamp(1rem,4vw,4rem)}
.project>button{display:block;width:100%;text-align:left;border-radius:var(--radius)}
.project-media{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.project-media img,.project-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),opacity .35s}
.project-media video{opacity:0}
.project-media video.is-playing{opacity:1}
.project>button:is(:hover,:focus-visible) .project-media :is(img,video){transform:scale(1.02)}
.project-label{position:absolute;left:1rem;bottom:1rem;z-index:2;display:none;align-items:center;gap:.6rem;padding:.45rem .85rem .45rem .45rem;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.85rem}
.project-label b{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--accent);color:#fff;font:500 .6rem var(--mono)}
.project-open{position:absolute;right:1rem;top:1rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 1rem;border-radius:999px;background:var(--text);color:var(--bg);opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .5s var(--ease)}
.project>button:is(:hover,:focus-visible) .project-open{opacity:1;transform:none}
.project-head{display:none}
.see-all{display:flex;align-items:center;justify-content:space-between;margin:clamp(1rem,1.6vw,1.5rem) 0 0 calc((100% - 2 * clamp(1.5rem,3vw,3rem)) / 3 + clamp(1.5rem,3vw,3rem));height:4.25rem;padding:0 1.5rem;border-radius:var(--radius);background:var(--accent);color:#fff;font-size:.8125rem;transition:padding .5s var(--ease)}
.see-all:hover{padding-inline:2rem}

/* ---------- Services ---------- */
.services{padding-block:clamp(6rem,12vw,11rem) clamp(3rem,6vw,5rem)}
.services-intro{margin-bottom:clamp(4rem,8vw,7rem)}
.service{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.5rem,3vw,3rem);padding:clamp(1.5rem,3vw,2.5rem) var(--gutter) clamp(2.5rem,5vw,4.5rem);border-top:1px solid var(--line)}
.service-num{font-size:clamp(3rem,6.5vw,6.5rem);line-height:.8;color:var(--faint);transition:color .5s}
.service:hover .service-num{color:var(--accent)}
.service-title{font-family:var(--sans);font-weight:400;font-size:clamp(2.4rem,5.4vw,5.25rem);line-height:.95;letter-spacing:-.04em;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.service-list li{padding:.95rem 0;border-top:1px solid var(--line);font-size:.75rem;transition:color .3s,padding .45s var(--ease)}
.service-list li:hover{color:var(--accent);padding-left:.6rem}
.hobbies{font-size:clamp(1.9rem,4vw,3.75rem);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.hobbies .sep{font-style:italic;color:var(--accent);margin:0 .12em 0 .08em}

/* ---------- Lab ---------- */
.lab{padding-block:clamp(5rem,10vw,9rem);border-top:1px solid var(--line)}
.lab .side{display:grid;gap:.9rem;align-content:start}
.lab-controls{display:flex;flex-wrap:wrap;gap:.5rem;margin:clamp(1.5rem,3vw,2.25rem) 0}
.lab-controls .chip[aria-pressed="true"]{background:var(--accent);color:#fff}
.lab-stage{position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background:var(--panel)}
#lab-canvas{width:100%;height:100%;touch-action:pan-y}
.lab-meta{position:absolute;inset:1rem 1.1rem auto;display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.6875rem;pointer-events:none}
.about-video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:#000;margin-top:clamp(1rem,1.6vw,1.5rem)}

/* ---------- Contact ---------- */
.contact{padding:clamp(5rem,10vw,9rem) var(--gutter) clamp(3rem,6vw,5rem);border-top:1px solid var(--line)}
.contact-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.contact-title{font-size:clamp(2.6rem,5.6vw,5.5rem);line-height:1.02;letter-spacing:-.03em}
.cta-lg{height:3.5rem;padding:0 1.6rem;background:var(--accent);color:#fff;font-size:.8125rem}
.cta-lg:hover{background:var(--text);color:var(--bg)}
.contact-details{display:flex;flex-wrap:wrap;gap:2rem 5rem;margin-top:clamp(3rem,6vw,5rem)}
.detail-label{font-size:1rem;margin-bottom:.35rem}
.contact-details p:not(.detail-label){color:var(--muted)}
.contact-details a{transition:color .3s}
.contact-details a:hover{color:var(--text)}
.email-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.email-row .chip{height:1.8rem}

/* ---------- Footer ---------- */
.footer{padding:0 var(--gutter);overflow:hidden}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;padding-block:1.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.6875rem}
.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-row a:hover{color:var(--text)}
.giant{font-size:clamp(4rem,19.5vw,22rem);line-height:.8;letter-spacing:-.045em;white-space:nowrap;padding:clamp(2rem,5vw,4rem) 0 clamp(.5rem,1.5vw,1.25rem);text-align:center}

/* ---------- Dialog ---------- */
dialog{width:calc(100% - 2rem);max-width:1320px;max-height:calc(100dvh - 2rem);padding:.75rem;border:0;border-radius:calc(var(--radius) + .5rem);background:var(--panel);color:var(--text);overscroll-behavior:contain}
dialog::backdrop{background:rgba(0,0,0,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dlg-top{display:flex;justify-content:space-between;align-items:center;padding:.25rem .25rem .75rem .5rem}
.dlg-top .chip{background:var(--panel-2)}
.player{border-radius:var(--radius);overflow:hidden;background:#000;display:grid;place-items:center}
.player video{width:100%;height:auto;max-height:72dvh;object-fit:contain}
.dlg-copy{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem 2rem;padding:1.25rem .5rem .75rem}
.dlg-copy h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1;flex:1 1 auto}
.dlg-copy p{flex:1 1 20rem;max-width:44ch}
.dlg-copy .cta{background:var(--accent);color:#fff}

/* ---------- Cursor lens ---------- */
.cursor{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:2147483647;opacity:0;transform:translate3d(-100px,-100px,0) translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),opacity .2s;display:grid;place-items:center}
.cursor.on{opacity:1}
.cursor.big{width:76px;height:76px}
.cursor.down{width:10px;height:10px}

/* ---------- Reveal ---------- */
.js .reveal{transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js .reveal.pending{opacity:0;transform:translateY(40px)}

/* ---------- Paused motion ---------- */
body.motion-paused .ticker-track{animation-play-state:paused}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .header{grid-template-columns:1fr auto}
}
@media (max-width:820px){
  .grid-2,.work-grid,.service{grid-template-columns:1fr}
  .work-rail{display:none}
  .project-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1.25rem .25rem .5rem}
  .project-head .display{font-size:clamp(2rem,9vw,3rem);line-height:1}
  .project-head .mono{color:var(--muted);font-size:.6875rem;text-align:right}
  .project-label{display:inline-flex}
  .project-open{opacity:1;transform:none}
  .see-all{margin-left:0}
  .statement .side{order:-1}
  .service-num{font-size:3rem}
  .header-tools .chip{display:none}
}
@media (max-width:560px){
  .wordmark{font-size:1.3rem}
  .cta{height:2.25rem;padding:0 .9rem;font-size:.6875rem}
  .reel{margin-inline:calc(-1 * var(--gutter) + .5rem)}
  .reel-tab{padding:.65rem .85rem}
  .play{height:2.75rem;padding-right:1.1rem}
  .play-dot{width:1.85rem;height:1.85rem}
  .contact-row .cta-lg{width:100%;justify-content:center}
  .footer-row{flex-direction:column;align-items:flex-start}
}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal.pending{opacity:1;transform:none}
  .ticker-track{flex-wrap:wrap;width:auto;row-gap:.5rem;padding-inline:var(--gutter)}
  .ticker-track [aria-hidden="true"]{display:none}
  .ticker{-webkit-mask-image:none;mask-image:none}
}

/* ---------- Mountains (3D section) ---------- */
.mountains{padding-block:clamp(5rem,10vw,9rem) clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.mtn-intro{margin-bottom:clamp(2rem,4vw,3.5rem)}
.mtn{--on:#f6f7fb;--on-dim:rgba(246,247,251,.7);--glass-d:rgba(13,17,23,.42);--edge-d:rgba(246,247,251,.2);--glow:#ffd9a8;
  position:relative;margin-inline:calc(var(--gutter) * .5);height:clamp(560px,88vh,920px);border-radius:var(--radius);overflow:hidden;background:#0d1117;color:var(--on);isolation:isolate}
.mtn-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.mtn-canvas.dragging{cursor:grabbing}
.mtn-scrim{position:absolute;left:0;bottom:0;width:min(900px,100%);height:70%;pointer-events:none;background:radial-gradient(90% 80% at 0% 100%,rgba(8,11,18,.62),rgba(8,11,18,.28) 45%,transparent 75%)}
.mtn-fog{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,rgba(236,238,255,.96),rgba(224,225,255,.9));opacity:0;transition:opacity .45s}
.mtn-fog.on{opacity:1}
.mtn-ui{position:absolute;inset:0;pointer-events:none;padding:clamp(16px,2.2vw,28px);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;gap:16px;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.mtn-ui>*{pointer-events:auto}
.mtn-top{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:10px;pointer-events:none}
.mtn-top>*{pointer-events:auto}
.mtn-hint{color:var(--on-dim)}
.mtn .chip{background:var(--glass-d);color:var(--on);border:1px solid var(--edge-d);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.mtn .chip:hover{background:rgba(13,17,23,.62)}
.mtn .chip[aria-pressed="true"]{background:var(--on);color:#10141c}
.mtn-card{grid-column:1;grid-row:3;align-self:end;max-width:min(560px,100%);min-width:0}
.mtn-idx{display:flex;align-items:center;gap:10px;color:var(--on-dim)}
.mtn-idx b{color:var(--on);font-weight:500}
.mtn-bar{flex:1;max-width:140px;height:1px;background:var(--edge-d);position:relative;overflow:hidden}
.mtn-bar i{position:absolute;inset:0;background:var(--on);transform-origin:left;transform:scaleX(var(--p,0))}
.mtn-name{font-size:clamp(3rem,7vw,6.5rem);line-height:.92;margin:.6rem 0 .5rem;letter-spacing:-.02em}
.mtn-name em{color:var(--glow)}
.mtn-region{color:var(--on-dim);font-size:.95rem}
.mtn-facts{display:flex;flex-wrap:wrap;gap:8px;margin:1rem 0 .75rem}
.mtn-fact{display:flex;flex-direction:column;gap:4px;padding:9px 12px;border-radius:12px;background:var(--glass-d);border:1px solid var(--edge-d);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.mtn-fact span:first-child{color:var(--on-dim);font-size:.625rem}
.mtn-fact span:last-child{font-family:var(--sans);font-size:1rem;font-weight:500;text-transform:none;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.mtn-note{max-width:46ch;color:var(--on-dim);font-size:.875rem;line-height:1.45}
.mtn .swap{transition:opacity .45s,transform .6s var(--ease)}
.mtn-card.swapping .swap{opacity:0;transform:translateY(10px)}
.mtn-gauge{grid-column:2;grid-row:2;align-self:center;justify-self:end;height:min(50%,400px);width:96px;position:relative;font-size:.625rem;font-variant-numeric:tabular-nums}
.mtn-rail{position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--edge-d)}
.mtn-tick{position:absolute;right:0;display:flex;align-items:center;gap:6px;transform:translateY(50%);color:var(--on-dim)}
.mtn-tick::after{content:"";width:6px;height:1px;background:var(--edge-d)}
.mtn-tick.major::after{width:12px;background:rgba(246,247,251,.45)}
.mtn-pin{position:absolute;right:-5px;width:11px;height:11px;border-radius:50%;border:1px solid var(--on);transform:translateY(50%);transition:background-color .4s,box-shadow .4s}
.mtn-pin.on{background:var(--glow);border-color:var(--glow);box-shadow:0 0 0 6px rgba(255,217,168,.18)}
.mtn-readout{position:absolute;right:72px;transform:translateY(50%);transition:bottom 1.1s var(--ease);text-align:right;white-space:nowrap;color:var(--on-dim)}
.mtn-readout b{display:block;font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1;color:var(--on);text-transform:none}
.mtn-route{grid-column:2;grid-row:3;align-self:end;display:flex;flex-direction:column;gap:6px;min-width:0}
.mtn-stop{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;text-align:left;color:var(--on);background:var(--glass-d);border:1px solid var(--edge-d);border-radius:12px;padding:10px 12px;font-size:.9rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color .3s,border-color .3s}
.mtn-stop:hover{border-color:rgba(246,247,251,.45)}
.mtn-stop[aria-current="true"]{background:rgba(246,247,251,.92);color:#10141c;border-color:transparent;text-shadow:none}
.mtn-stop .n,.mtn-stop .m{font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;opacity:.65}
.mtn-label{position:absolute;left:0;top:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;transition:opacity .5s;white-space:nowrap;font-size:.625rem;color:var(--on)}
.mtn-label.on{opacity:1}
.mtn-label span{padding:4px 9px;border-radius:999px;background:var(--glass-d);border:1px solid var(--edge-d);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mtn-label::after{content:"";width:1px;height:26px;background:linear-gradient(var(--on),transparent)}
.mtn-nogl{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--on-dim)}
.mtn-nogl[hidden]{display:none}
@media (max-width:820px){
  .mtn{height:clamp(560px,86svh,760px);margin-inline:0;border-radius:0}
  .mtn-ui{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto}
  .mtn-gauge,.mtn-note,.mtn-hint{display:none}
  .mtn-card{grid-row:3}
  .mtn-route{grid-column:1;grid-row:4;flex-direction:row;overflow-x:auto}
  .mtn-stop{flex:1 0 auto;grid-template-columns:auto 1fr;padding:8px 10px;gap:8px}
  .mtn-stop .m{display:none}
}
@media (prefers-reduced-motion:reduce){.mtn .swap,.mtn-readout,.mtn-fog,.mtn-pin{transition:none}}

/* Orb: a live 3D satellite map masked into a glass sphere. The sky around it is a fog bank, heaviest at the top. */
.mtn{background:linear-gradient(180deg,#c9cfe6 0%,#8d9cbf 24%,#2a3550 62%,#0d1117 100%)}
.mtn-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mtn-sky i{position:absolute;top:-18%;width:70%;height:46%;border-radius:50%;background:radial-gradient(closest-side,rgba(240,242,255,.95),rgba(224,225,255,.55) 55%,transparent);filter:blur(18px);animation:fog-drift 38s ease-in-out infinite alternate}
.mtn-sky i:nth-child(1){left:-12%;animation-duration:42s}
.mtn-sky i:nth-child(2){left:22%;top:-24%;width:80%;animation-duration:55s;animation-delay:-12s}
.mtn-sky i:nth-child(3){left:52%;top:-14%;animation-duration:36s;animation-delay:-20s}
.mtn-sky i:nth-child(4){left:8%;top:6%;height:24%;opacity:.55;animation-duration:60s;animation-delay:-5s}
@keyframes fog-drift{from{transform:translateX(-6%) scale(1)}to{transform:translateX(8%) scale(1.08)}}
.orb{--size:min(74%,calc(100% - 8rem),760px);position:absolute;left:50%;top:50%;width:min(var(--size),78vh);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;isolation:isolate;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.12);transition:transform 1.1s var(--ease),filter .9s}
.orb.leaving{transform:translate(-50%,-50%) scale(1.12);filter:blur(2px)}
.orb-map{position:absolute;inset:0;background:#9fb0cf}
.orb-map .maplibregl-canvas{outline:none}
.orb-fog{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 35%,rgba(236,238,255,.98),rgba(224,225,255,.92) 60%,rgba(200,206,235,.9));opacity:1;transition:opacity 1s var(--ease)}
.orb-fog.clear{opacity:0}
.orb-glass{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(38% 26% at 32% 18%,rgba(255,255,255,.55),rgba(255,255,255,.08) 60%,transparent 72%),
    radial-gradient(20% 10% at 70% 86%,rgba(255,255,255,.18),transparent 70%),
    radial-gradient(circle at 50% 50%,transparent 58%,rgba(255,255,255,.08) 70%,rgba(190,205,255,.28) 86%,rgba(255,255,255,.55) 99%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 -40px 80px rgba(8,12,24,.35),inset 0 30px 60px rgba(255,255,255,.12)}
.orb-status{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);margin:0;padding:6px 12px;border-radius:999px;background:rgba(13,17,23,.5);color:#f6f7fb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;max-width:80%;transition:opacity .4s}
.orb-status:empty{opacity:0}
.mtn-credit{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);margin:0;font-size:.5625rem;color:rgba(246,247,251,.55);white-space:nowrap;pointer-events:none}
@media (max-width:820px){
  .orb{width:min(92%,62svh);top:40%}
  .mtn-credit{white-space:normal;text-align:center;width:90%;bottom:2px}
}
@media (prefers-reduced-motion:reduce){.mtn-sky i{animation:none}.orb{transition:none}}
body.motion-paused .mtn-sky i{animation-play-state:paused}
/* Standing fog over the upper half of the globe */
.orb-haze{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(224,225,255,.72) 0%,rgba(224,225,255,.38) 18%,rgba(224,225,255,.1) 36%,transparent 50%);animation:haze 14s ease-in-out infinite alternate}
@keyframes haze{from{opacity:.75;transform:translateY(-3%)}to{opacity:1;transform:translateY(2%)}}
@media (prefers-reduced-motion:reduce){.orb-haze{animation:none}}
body.motion-paused .orb-haze{animation-play-state:paused}

/* Hero ASCII render: a three.js scene drawn as text (after three.js webgl_effects_ascii) */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:center}
.hero-copy{min-width:0}
.hero-ascii{--ascii-bg:transparent;--ascii-ink:var(--text);position:relative;width:100%;max-width:560px;justify-self:end;aspect-ratio:6/7;background:var(--ascii-bg);color:var(--ascii-ink);overflow:hidden;cursor:crosshair;opacity:0;transition:opacity 1.2s var(--ease) .3s}
.hero-ascii.ready{opacity:1}
.hero-ascii table{margin:0 auto!important;color:inherit!important;background:transparent!important}
.hero-ascii td{color:inherit!important;background:transparent!important}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr}
  .hero-ascii{justify-self:stretch;max-width:none;aspect-ratio:1}
}

/* ---------- Intro (from Figma "Desktop - 1") ---------- */
@font-face{font-family:"Inter Tight Var";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-tight-latin-wght-normal.woff2) format("woff2-variations"),url(assets/fonts/inter-tight-latin-wght-normal.woff2) format("woff2")}
.intro{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(4rem,10vw,9rem);min-height:min(100svh,1024px);padding:40px var(--gutter);font-family:var(--sans)}
.intro-note{font-size:1.25rem;line-height:24px;font-weight:400}
.intro-note b{font-weight:500}
.intro-row{display:flex;align-items:center;gap:32px}
.intro-portrait{flex:none;width:162px;height:162px;border-radius:50%;object-fit:cover}
.intro-text{max-width:883px;font-size:clamp(1.375rem,2.25vw,2rem);line-height:1.28;font-weight:400;letter-spacing:-.01em;text-wrap:pretty}
.intro-text b{font-weight:500}
.intro-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.intro-title{font-family:var(--sans);font-size:clamp(3rem,5.6vw,5rem);font-weight:500;line-height:1.1;letter-spacing:-.035em}
.pill-dark{display:inline-flex;align-items:flex-start;gap:4px;padding:12px 16px 12px 24px;border-radius:1000px;background:var(--text);color:var(--bg);font-size:1rem;line-height:20px;transition:background-color .3s,color .3s,transform .4s var(--ease)}
.pill-dark span{font-size:12px;line-height:12px}
.pill-dark:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}

/* Bold-word hover (after hki.paris "AboutText"): a colour bar sweeps through the word
   and letters near the pointer thicken on a variable weight axis. */
.hk{font-weight:500}
.hk-word{position:relative;display:inline-flex;overflow:hidden;vertical-align:bottom;isolation:isolate}
.hk-bar{position:absolute;left:0;top:10%;width:100%;height:80%;background:var(--accent);z-index:-1;transform:translate3d(-101%,0,0);pointer-events:none}
.hk-word:hover .hk-bar{animation:hk-traverse .5s cubic-bezier(.39,.575,.565,1) forwards}
@keyframes hk-traverse{0%{transform:translate3d(-100%,0,0) scaleX(1)}100%{transform:translate3d(150%,0,0) scaleX(.7)}}
.hk-letter{display:inline-block;font-family:"Inter Tight Var",var(--sans);font-variation-settings:"wght" var(--w,500);font-weight:500;transition:font-variation-settings .25s linear}
@media (prefers-reduced-motion:reduce){.hk-word:hover .hk-bar{animation:none}.hk-letter{transition:none}}
@media (max-width:720px){
  .intro{min-height:0;padding-block:2.5rem 1rem}
  .intro-row{flex-direction:column;align-items:flex-start;gap:20px}
  .intro-portrait{width:96px;height:96px}
}

/* Mountains: hidden host for the live satellite map that feeds the glass globe */
.mtn-maphost{position:absolute;left:0;top:0;width:640px;height:640px;opacity:0;pointer-events:none;z-index:-1}
.mtn{background:#0d1117}

/* Mountains: full-screen, pinned while you scroll through the places */
.mountains{padding:0!important;border-top:0!important}
.mtn-track{position:relative;height:420vh}
.mtn{position:sticky!important;top:0;height:100vh!important;height:100svh!important;margin:0!important;border-radius:0!important}
.mtn-ui{padding-top:calc(76px + clamp(12px,2vw,24px))}
.mtn-top{justify-content:space-between!important;align-items:flex-start!important}
.mtn-head{display:grid;gap:.5rem;pointer-events:none}
.mtn-head h2{font-size:clamp(2rem,3.4vw,3.25rem);line-height:1;color:var(--on)}
.mtn-head p{color:var(--on-dim)}
.mtn-top>.mtn-hint{margin-left:auto}
@media (max-width:820px){.mtn-track{height:360vh}.mtn-ui{padding-top:calc(64px + 12px)}}

.see-all-row{display:flex;justify-content:flex-end;margin-top:clamp(1.5rem,3vw,2.5rem)}

/* ---------- Loader (from the original site): four panels lift away once fonts and first posters are ready ---------- */
.loader{display:none;position:fixed;inset:0;z-index:200;color:#fff;pointer-events:none}
html.js .loader{display:block}
.loader[hidden]{display:none!important}
.loader-columns{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}
.loader-columns i{background:var(--accent);border-right:1px solid #ffffff22;transform-origin:top;transition:transform .9s cubic-bezier(.76,0,.24,1)}
.loader-top,.loader-bottom{position:absolute;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;gap:1rem;transition:opacity .25s}
.loader-top{top:1.5rem;font-size:.75rem;letter-spacing:.1em}
.loader-bottom{bottom:1.5rem;align-items:flex-end}
.loader-bottom .display{font-size:clamp(1.75rem,4vw,4rem);line-height:1}
.loader-count{font:300 clamp(4.5rem,15vw,15rem)/.85 var(--sans);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.loader.leaving .loader-top,.loader.leaving .loader-bottom{opacity:0}
.loader.leaving i{transform:scaleY(0)}
.loader.leaving i:nth-child(2){transition-delay:.08s}.loader.leaving i:nth-child(3){transition-delay:.16s}.loader.leaving i:nth-child(4){transition-delay:.24s}
body.is-loading{overflow:hidden}
@media (max-width:600px){.loader-top>span:last-child{display:none}}
@media (prefers-reduced-motion:reduce){.loader{display:none!important}}

/* ---------- Lottie ---------- */
.lottie-cell{display:block;position:relative;aspect-ratio:1;background:#f3f2ef;border-radius:calc(var(--radius) * .7);overflow:hidden}
.lottie-cell svg{position:absolute;inset:0;width:100%!important;height:100%!important}
.project-media.is-lottie{background:#f3f2ef}
.lottie-strip{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.lottie-strip .lottie-cell{border-radius:0;aspect-ratio:auto}

/* ---------- Dialog gallery ---------- */
#project-dialog{overflow-y:auto}
.player.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem;grid-auto-flow:dense;background:none;border-radius:0;overflow:visible;place-items:stretch}
.g-item{margin:0;position:relative;grid-column:span 6;border-radius:var(--radius);overflow:hidden;background:#000;max-height:82dvh}
.g-item.is-mid{grid-column:span 3}
.g-item.is-tall{grid-column:span 2}
.g-item.is-sticker{grid-column:span 2;aspect-ratio:1!important;background:#f3f2ef}
.g-item video{display:block;width:100%;height:100%;max-height:82dvh;object-fit:contain;background:inherit}
.player.is-single .g-item{grid-column:1/-1;margin-inline:auto;width:100%;max-width:calc(82dvh * var(--r,1.78))}
.g-lottie{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cell,110px),1fr));gap:.5rem;background:none;max-height:none;aspect-ratio:auto!important;overflow:visible}
.g-lottie .lottie-cell{padding:0}
.dlg-copy{padding:.5rem .5rem 1.25rem}
@media (max-width:720px){.g-item.is-mid,.g-item.is-tall,.g-item.is-sticker{grid-column:span 3}}

/* ---------- Playground ---------- */
.playground{padding:clamp(4rem,9vw,8rem) var(--gutter)}
.play-intro{margin-bottom:clamp(2rem,4vw,3.5rem)}
.play-grid{columns:3 260px;column-gap:clamp(.5rem,1vw,.85rem)}
.play-tile{position:relative;display:block;width:100%;margin:0 0 clamp(.5rem,1vw,.85rem);break-inside:avoid;border-radius:var(--radius);overflow:hidden;background:var(--panel);cursor:pointer}
.play-tile img,.play-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s,transform 1s var(--ease)}
.play-tile video{opacity:0}
.play-tile video.is-playing{opacity:1}
.play-tile:is(:hover,:focus-visible) :is(img,video){transform:scale(1.03)}

/* ---------- Intro loops: random sticker layout (loops.js) ---------- */
.intro{position:relative}
.loops-wrap{position:relative;flex:1 1 auto;min-height:clamp(260px,34vh,380px);margin-block:-1rem}
.loops{position:absolute;inset:0;touch-action:pan-y}
.loop{position:absolute;left:0;top:0;cursor:grab;user-select:none;-webkit-user-select:none;transition:transform .9s var(--ease);will-change:transform}
.loop.is-dragging{cursor:grabbing;transition:none;z-index:2}
.loop img{display:block;width:100%;height:auto;pointer-events:none;animation:loop-float 6s ease-in-out var(--d,0s) infinite alternate;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22))}
.loop:hover img{scale:1.06;transition:scale .4s var(--ease)}
.loops-shuffle{position:absolute;right:0;bottom:0;z-index:3}
@keyframes loop-float{from{translate:0 -6px}to{translate:0 6px}}
body.motion-paused .loop img{animation:none}
@media (prefers-reduced-motion:reduce){.loop,.loop img{animation:none;transition:none}}
@media (max-width:720px){.loops-wrap{min-height:300px;margin-block:0}}

/* Hero without the ASCII scene: headline spans the full width */
.hero-grid{grid-template-columns:1fr}

/* ---------- Featured works (Figma "Section - Works") ---------- */
.works{padding:clamp(6rem,14vw,12.5rem) var(--gutter) clamp(4rem,8vw,7.5rem)}
.works-inner{max-width:1356px;margin-inline:auto;display:flex;flex-direction:column;gap:40px}
.works-head{display:grid;grid-template-columns:minmax(0,439fr) minmax(0,577fr) minmax(0,260fr);gap:40px;align-items:end}
.works-kicker{font:500 16px/22.4px var(--sans);letter-spacing:-.02em;color:var(--text)}
.works-title{font:500 clamp(3.5rem,6.6vw,5.875rem)/.98 var(--sans);letter-spacing:-.068em;color:var(--text)}
.works-lede{font:500 19px/26.22px var(--sans);letter-spacing:-.038em;color:var(--muted);max-width:260px}
.works-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:50px;align-items:start}
.works .project{min-width:0}
.works .project.is-small{width:85%}
.works .project.is-small.is-right{justify-self:end}
.works .project>button{display:flex;flex-direction:column;gap:10px;width:100%;text-align:left}
.works .project-media{position:relative;display:block;width:100%;aspect-ratio:658/434;border-radius:12px;overflow:hidden;background:var(--panel)}
.works .project.is-small .project-media{aspect-ratio:559/384}
.works .project-media img,.works .project-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),opacity .35s}
.works .project-media video{opacity:0}
.works .project-media video.is-playing{opacity:1}
.works .project>button:is(:hover,:focus-visible) .project-media :is(img,video){transform:scale(1.02)}
.project-cap{display:flex;justify-content:space-between;gap:1rem;padding:0 3px;font:500 19px/26.22px var(--sans);letter-spacing:-.038em}
.project-cap .t{color:var(--text)}
.project-cap .k{color:var(--muted);text-align:right}
.works .see-all-row{margin-top:0}
@media (max-width:1080px){.works-head{grid-template-columns:1fr 1fr}.works-kicker{grid-column:1/-1}}
@media (max-width:720px){
  .works-head{grid-template-columns:1fr;gap:1.25rem}
  .works-lede{max-width:none}
  .works-grid{grid-template-columns:1fr;row-gap:2rem}
  .works .project.is-small{width:100%}
  .project-cap{font-size:17px}
}

/* ======================================================================
   Figma sections: shared header, Experience & Skills, Tools, Playground, Footer
   ====================================================================== */
:root{--azure:#6b86a0;--rule:#1c1d24}
:root[data-theme="light"]{--azure:#55708a;--rule:#d6d5cf}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--azure:#55708a;--rule:#d6d5cf}}

/* Hairline with a plus mark, as in the Figma dividers */
.sec-rule,.ft-rule{position:relative;height:2px;margin:60px 0;background:var(--rule)}
.sec-rule i,.ft-rule i{position:absolute;top:50%;left:38.3%;width:10px;height:10px;transform:translate(-50%,-50%)}
.ft-rule{height:1px;margin:0}.ft-rule i{left:50%}
.sec-rule i::before,.sec-rule i::after,.ft-rule i::before,.ft-rule i::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:10px;border-radius:16px;background:#666;transform:translate(-50%,-50%)}
.sec-rule i::after,.ft-rule i::after{transform:translate(-50%,-50%) rotate(90deg)}

/* Section header: kicker + lede in the narrow column, big title in the wide one */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:43.2px;padding:0 var(--gutter) 112px;align-items:start}
.sec-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sec-kicker{font:500 16px/22.4px var(--sans);color:var(--text)}
.sec-lede{font:400 19px/26.22px var(--sans);color:var(--azure);max-width:380px}
.sec-lede .hi{color:var(--text)}
.sec-title{font:500 clamp(3.25rem,6.5vw,94px)/1.0638 var(--sans);letter-spacing:-.03em;color:var(--text)}
.sec-title .amp{color:var(--azure)}
.stars{font-size:26px;line-height:1;letter-spacing:2px;color:#ffcc00}

/* Featured works */
.works{padding:clamp(6rem,14vw,12.5rem) 0 clamp(4rem,8vw,7.5rem)}
.works .sec-head{padding-bottom:54px}
.works .works-inner{padding-inline:var(--gutter)}
.pill-light{display:inline-flex;align-items:flex-start;gap:4px;padding:12px 16px 12px 24px;border-radius:1000px;background:#fff;color:#000;font:400 16px/20px var(--sans);transition:background-color .3s,color .3s,transform .4s var(--ease)}
.pill-light span{font-size:12px;line-height:12px}
.pill-light:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
:root[data-theme="light"] .pill-light{background:var(--text);color:var(--bg)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .pill-light{background:var(--text);color:var(--bg)}}
.works .project-media{border:1px solid rgba(255,255,255,.08)}

/* Big statement copy (43px light, highlights medium) */
.big-copy{font:300 clamp(1.75rem,3vw,43px)/1.171 var(--sans);letter-spacing:-.01em;color:var(--azure);max-width:660px;text-wrap:pretty}
.big-copy b{font-weight:500;color:var(--text)}
.big-copy i{font-style:normal;color:var(--text)}
.big-copy.wide{max-width:1000px}

/* Experience & Skills */
.xp{padding-top:clamp(4rem,10vw,172.8px)}
.xp-list{list-style:none;margin:0;padding:0 var(--gutter) 120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:43.2px;row-gap:120px}
.xp-item{grid-column:2;display:flex;flex-direction:column;gap:32px}
.xp-num{font:400 clamp(4rem,6.5vw,93.6px)/.8 var(--sans);letter-spacing:-.02em;color:#f9f9f9}
:root[data-theme="light"] .xp-num{color:var(--text)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .xp-num{color:var(--text)}}

/* Expertise & Tools */
.tools{padding-top:clamp(2rem,4vw,40px)}
.tool-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px;max-width:330px}
.tool-chips .chip{height:36px;padding:0 14.4px;font-size:11px;letter-spacing:.04em}
.tools-body{display:flex;flex-direction:column;gap:43.2px;padding:0 var(--gutter) 120px}
.tools-media{position:relative;width:100%;aspect-ratio:1377/653;border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.tools-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ai-note{font:400 20px/24px var(--sans);color:var(--azure)}
.ai-note b{font-weight:600;color:var(--text)}

/* Playground title */
.playground{padding:clamp(2rem,4vw,40px) 0 clamp(4rem,8vw,7rem)}
.playground .sec-head{padding-bottom:56px}
.playground .play-grid{padding-inline:var(--gutter)}

/* Footer */
.site-footer{background:#0a0b12;color:#fff;padding:72px var(--gutter) 24px;overflow:hidden}
.ft-inner{max-width:1356px;margin-inline:auto;display:flex;flex-direction:column;gap:72px}
.ft-marquee{display:block;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 26s linear infinite}
.mq-group{display:flex;align-items:center;gap:40px;padding-right:40px;font:500 clamp(3.5rem,7vw,99.2px)/.925 var(--sans);letter-spacing:-.02em;white-space:nowrap}
.mq-arrow{width:clamp(3.5rem,9vw,129px);height:auto;transition:transform .6s var(--ease)}
.ft-marquee:hover .mq-track{animation-play-state:paused}
.ft-marquee:hover .mq-arrow{transform:rotate(45deg)}
@keyframes mq{to{transform:translateX(-50%)}}
body.motion-paused .mq-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}
.site-footer .ft-rule{background:#1a1c26}
.ft-main{display:flex;justify-content:space-between;align-items:flex-end;gap:3rem;flex-wrap:wrap}
.ft-contact{display:flex;flex-direction:column;align-items:flex-start}
.ft-avatar{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-bottom:32px}
.ft-lede{font:400 19px/26.22px var(--sans);color:var(--azure)}
.ft-title{font:500 clamp(2rem,3vw,43px)/1.171 var(--sans);letter-spacing:-.01em;color:#f4f4f1;margin:7px 0 32px}
.ft-form{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.ft-form input{width:287px;max-width:100%;padding:10px 0 12px;border:0;border-bottom:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:400 16px/1 var(--sans);letter-spacing:-.1px;outline:none;border-radius:0}
.ft-form input::placeholder{color:rgba(255,255,255,.5)}
.ft-form input:focus{border-bottom-color:#fff}
.site-footer .pill-light{background:#fff;color:#000}
.site-footer .pill-light:hover{background:var(--accent);color:#fff}
.ft-meta{display:flex;gap:54px;flex-wrap:wrap;margin:0;font:500 16px/22.4px var(--sans);letter-spacing:-.02em}
.ft-meta dt{color:var(--azure)}
.ft-meta dd{margin:0;color:#fff}
.ft-meta a{transition:color .3s}.ft-meta a:hover{color:var(--azure)}
.ft-meta .sl{color:var(--azure)}
.ft-bottom{display:flex;justify-content:space-between;gap:1rem;font:400 16px/22.4px var(--sans);letter-spacing:-.02em;margin-top:-52px}
.ft-bottom .up{text-transform:uppercase}
.ft-dim{color:var(--azure)}

@media (max-width:820px){
  .sec-head,.xp-list{grid-template-columns:1fr;gap:1.5rem}
  .sec-head{padding-bottom:3rem}
  .xp-item{grid-column:1}
  .xp-list{row-gap:4rem;padding-bottom:4rem}
  .tools-body{padding-bottom:4rem}
  .ft-inner{gap:48px}
  .ft-bottom{margin-top:-28px}
  .ft-meta{gap:1.5rem 2.5rem}
}
.site-footer .ft-form .pill-light{background:#fff!important;color:#000!important}
.site-footer .ft-form .pill-light:hover{background:var(--accent)!important;color:#fff!important}

/* Playground title (Figma 30:4826): rule, header, rule, then the grid */
.playground{padding-top:clamp(4rem,10vw,172.8px)}
.playground .sec-head{padding-bottom:38px}
.playground .play-rule{margin-top:0}
/* Footer spans the full viewport width; the marquee runs edge to edge */
.ft-inner{max-width:none}
.ft-marquee{margin-inline:calc(-1 * var(--gutter))}

/* Hero headline in Pangea. Drop the licensed web files into assets/fonts/ with these names;
   until then it uses Pangea if installed on the visitor's machine, else Inter Tight. */
@font-face{font-family:"Pangea";font-style:normal;font-weight:400;font-display:swap;src:local("Pangea Regular"),local("Pangea-Regular"),url(assets/fonts/pangea-regular.woff2) format("woff2")}
@font-face{font-family:"Pangea";font-style:normal;font-weight:500;font-display:swap;src:local("Pangea Medium"),local("Pangea-Medium"),url(assets/fonts/pangea-medium.woff2) format("woff2")}
.hero h1{font-family:"Pangea",var(--sans);font-weight:500;letter-spacing:-.045em;line-height:1}
.hero h1 em{font-family:inherit;font-style:normal}

/* Scramble-text hover (hero title + bold statement words) */
:root{--roll:#3ee07a}
.roll .hw{display:inline-flex;cursor:default;white-space:nowrap}
.roll .hw-l{display:inline-block;text-align:center}
.roll .hw-l.is-scr{color:var(--roll)}

/* Second word of each section title in Instrument Serif */
.sec-title .serif{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}

/* One vertical rhythm for every section: the space above a title (from the section top or
   its divider) equals the space between the title and the section's content. */
:root{--sec-space:clamp(5rem,10vw,9rem)}
.works{padding-top:var(--sec-space)}
.sec-rule{margin:0 0 var(--sec-space)}
.sec-head,.works .sec-head,.playground .sec-head{padding-bottom:var(--sec-space)}
.playground .play-rule{margin:0 0 var(--sec-space)}
.xp,.tools,.playground{padding-top:var(--sec-space)}
@media (max-width:820px){:root{--sec-space:4rem}}

/* ======================================================================
   Experience & Skills (Figma "Frame 23"): neon title, lit tiles, looping motion
   ====================================================================== */
@font-face{font-family:"Mr Dafoe";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/mr-dafoe-latin-400-normal.woff2) format("woff2")}
.xp2{--text:#f4f4f5;--hot:#ffb36b;--glow:rgba(255,90,31,.9);--glow-soft:rgba(255,90,31,.34);--rim:rgba(255,255,255,.55);padding-top:var(--sec-space);background:#080809;overflow:hidden}
.xp2 .sec-rule{margin-bottom:0}

/* Hero composition — Figma 31-5557 (1440 × 925 canvas) */
.xp-hero{position:relative;height:clamp(620px,64.2vw,925px);background:transparent;overflow:hidden;isolation:isolate}
.xp-ambient{position:absolute;left:50%;top:clamp(80px,8.9vw,128px);width:min(93.75vw,1350px);aspect-ratio:1350/1050;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,90,31,.30),rgba(255,90,31,.10) 48%,rgba(255,90,31,0) 100%);animation:xp-breathe 6s ease-in-out infinite;pointer-events:none;z-index:-2;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 72%);mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 72%)}
@keyframes xp-breathe{0%,100%{opacity:.7;transform:translateX(-50%) scale(.97)}50%{opacity:1;transform:translateX(-50%) scale(1.03)}}
/* Glow sitting on the horizon line */
.xp-horizon{position:absolute;left:50%;top:clamp(268px,26.7vw,385px);width:min(97.2vw,1400px);height:clamp(120px,18vw,260px);transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,110,40,.75),rgba(255,90,31,.32) 55%,rgba(255,90,31,0));filter:blur(28px);z-index:-1;animation:xp-horizon 5s ease-in-out infinite}
@keyframes xp-horizon{0%,100%{opacity:.75}50%{opacity:1}}
/* The planet: a huge disc whose rim reads as a glowing horizon */
.xp-planet{position:absolute;left:50%;top:clamp(323px,32.3vw,465px);width:min(416.7vw,6000px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,#080809 92.5%,rgba(120,36,10,.55) 96.4%,rgba(255,90,31,.85) 99.2%,#ffb36b 99.85%,#ffe3c4 100%);
  box-shadow:0 0 18px rgba(255,170,110,.9),0 0 70px rgba(255,90,31,.55),0 -30px 160px rgba(255,90,31,.35);animation:xp-rim 6s ease-in-out infinite}
@keyframes xp-rim{0%,100%{box-shadow:0 0 14px rgba(255,170,110,.75),0 0 60px rgba(255,90,31,.45),0 -30px 140px rgba(255,90,31,.3)}50%{box-shadow:0 0 22px rgba(255,190,130,1),0 0 90px rgba(255,90,31,.65),0 -30px 190px rgba(255,90,31,.42)}}
.xp-corner{position:absolute;top:48px;margin:0;font:500 16px/22.4px "Pangea",var(--sans);color:var(--text)}
.xp-corner.l{left:max(var(--gutter),6.25%)}
.xp-corner.r{right:max(var(--gutter),6.25%);font-size:15px;color:#b8b9c2}
.xp-stage{position:absolute;left:calc(50% - 16px);top:clamp(195px,19.47vw,280px);width:554px;height:245px;transform:translateX(-50%) scale(var(--xs,1));transform-origin:top center}
.xp-h{position:absolute;inset:0;margin:0}
.xp-ghost{position:absolute;left:0;top:0;font:500 94px/100px "Pangea",var(--sans);letter-spacing:-.03em;color:#fff;opacity:.1;white-space:nowrap}
.xp-neon{position:absolute;left:37px;top:27px;z-index:2;font:400 210px/1.1 "Mr Dafoe",cursive;color:#fff;transform:rotate(-6deg);white-space:nowrap;
  text-shadow:0 0 4px #fff,0 0 11px var(--hot),0 0 30px var(--glow),0 0 82.5px rgba(232,185,49,.85);animation:xp-neon 7s linear infinite}
@keyframes xp-neon{0%,18%,22%,25%,53%,57%,100%{opacity:1;text-shadow:0 0 4px #fff,0 0 11px var(--hot),0 0 30px var(--glow),0 0 82.5px rgba(232,185,49,.85)}
  20%,24%,55%{opacity:.72;text-shadow:0 0 4px var(--hot),0 0 12px var(--glow),0 0 30px #e8b931}}
.xp-foot{position:absolute;left:max(var(--gutter),6.25%);top:clamp(520px,51.25vw,738px);display:flex;flex-direction:column;gap:12px}
.xp-foot .sec-lede{margin:0;font:400 19px/26.22px "Pangea",var(--sans);color:var(--azure)}
.xp-foot .hi{color:#fff}

/* The lit object: black squircle lit from below, glass rim */
.lit-tile{position:relative;border:1.1px solid var(--rim);background:radial-gradient(60% 45% at 50% 100%,#ffb36b 0,#ff8745 11%,#ff7032 16.5%,#ff5a1f 22%,rgba(255,90,31,.34) 55%,rgba(255,90,31,0) 100%),#000;
  overflow:hidden;isolation:isolate}

/* Rows: copy + animated tile, alternating sides */
.xp-rows{list-style:none;margin:0;padding:clamp(5rem,13.9vw,200px) max(var(--gutter),6.25%);display:flex;flex-direction:column;gap:clamp(5rem,13.9vw,200px);background:transparent}
.xp-row{display:grid;grid-template-columns:minmax(0,660px) 400px;justify-content:space-between;align-items:start;gap:4rem}
.xp-row.flip{grid-template-columns:400px minmax(0,660px)}
.xp-row.flip .nav-tile{order:-1}
.xp-copy{display:flex;flex-direction:column;gap:32px}
.nav-tile{width:400px;height:400px;border-radius:111px;box-shadow:0 16.7px 66.7px var(--glow-soft),inset 0 1.1px 1.1px var(--rim),inset 0 -20px 50px var(--glow);animation:xp-tile 5s ease-in-out infinite}
@keyframes xp-tile{0%,100%{box-shadow:0 16.7px 50px rgba(255,90,31,.26),inset 0 1.1px 1.1px var(--rim),inset 0 -20px 44px var(--glow)}50%{box-shadow:0 16.7px 80px rgba(255,90,31,.42),inset 0 1.1px 1.1px var(--rim),inset 0 -24px 62px var(--glow)}}

/* 01 · In motion — lanes rush towards the viewer */
.nav-art{position:absolute;inset:0;width:100%;height:100%}
.nav-art .ln{stroke-width:3.4}
.nav-art .ln-run{stroke:#a58cff;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:14 70;opacity:.85;animation:xp-run 1.6s linear infinite;animation-delay:var(--d)}
@keyframes xp-run{from{stroke-dashoffset:84}to{stroke-dashoffset:0}}
.nav-art .lane{filter:drop-shadow(0 0 14px rgba(255,90,31,.8))}
.nav-art .lane-flow{opacity:0;animation:xp-lane 2.4s ease-in-out infinite}
@keyframes xp-lane{0%,100%{opacity:0}50%{opacity:.55}}
.nav-art .nav-arrow{filter:drop-shadow(0 6px 10px rgba(255,90,31,.6));animation:xp-arrow 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes xp-arrow{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.nav-art .turn{stroke-dasharray:60;animation:xp-turn 4.8s ease-in-out infinite}
@keyframes xp-turn{0%{stroke-dashoffset:60}30%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-60}}
.nav-t{position:absolute;left:101px;top:41px;margin:0;font:600 40px/1.12 var(--sans);letter-spacing:-.01em;color:#fff;white-space:nowrap}
.nav-s{position:absolute;left:104px;top:88px;margin:0;font:500 18px/1.3 var(--sans);color:#fff}
.dots i{font-style:normal;animation:xp-dot 1.6s steps(1) infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes xp-dot{0%,15%{opacity:.15}16%,80%{opacity:1}81%,100%{opacity:.15}}

/* 02 · Gauge — sweeps, counts and responds to − / + */
.gauge{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.g-track{fill:none;stroke:#1a1a1e;stroke-width:24;stroke-linecap:round}
.g-prog{fill:none;stroke-width:24;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(255,90,31,.45))}
.g-knob{fill:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.7)) drop-shadow(0 0 16px rgba(255,140,70,.6))}
.g-val{position:absolute;left:0;right:0;top:147px;margin:0;text-align:center;font:700 74.4px/1.06 var(--sans);letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff 0,#fff 52%,#ffb36b 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.g-lab{position:absolute;left:0;right:0;top:228px;margin:0;text-align:center;font:500 18px/1.3 var(--sans);color:#fff}
.g-step{position:absolute;left:50%;bottom:66px;transform:translateX(-50%);display:flex;gap:19.4px}
.g-btn{width:53.3px;height:53.3px;border-radius:50%;border:.9px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;font:600 30px/1 var(--sans);display:grid;place-items:center;cursor:pointer;padding:0;
  transition:transform .18s cubic-bezier(.3,1.6,.5,1),background .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.g-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.g-btn.is-press,.g-btn:active{transform:scale(.88);background:rgba(255,179,107,.28);border-color:#ffb36b}
.g-btn:focus-visible{outline:2px solid #ffb36b;outline-offset:3px}

/* 03 · Face — floats, blinks and smiles */
.face{position:absolute;left:83.5px;top:61px;width:233px;height:233px;border-radius:50%;background:linear-gradient(180deg,#ffb36b 0,#ff8a4c 55%,#ff5a1f 100%);
  box-shadow:0 0 40px rgba(255,120,50,.55),0 0 90px rgba(255,90,31,.3);animation:xp-bob 4s ease-in-out infinite}
.face svg{position:absolute;inset:0;width:100%;height:100%}
@keyframes xp-bob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-8px) rotate(-3deg)}65%{transform:translateY(-3px) rotate(3deg)}}
@keyframes xp-blink{0%,44%,50%,100%{transform:scaleY(1)}47%{transform:scaleY(.1)}}
.f-lab{position:absolute;left:0;right:0;top:331px;margin:0;text-align:center;font:500 18px/1.3 var(--sans);color:#fff}

.xp-row:nth-child(2) .nav-tile{animation-delay:-1.6s}
.xp-row:nth-child(3) .nav-tile{animation-delay:-3.2s}

/* Only animate while on screen, and respect pause / reduced motion */
.xp2:not(.is-live) *,body.motion-paused .xp2 *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.xp2 *{animation:none!important}}

@media (max-width:1100px){
  .xp-row,.xp-row.flip{grid-template-columns:1fr;gap:2.5rem}
  .xp-row.flip .nav-tile{order:0}
  .nav-tile{justify-self:start}
  .xp-stage{--xs:.85}
}
@media (max-width:720px){
  .xp-hero{height:auto;display:flex;flex-direction:column;padding:96px var(--gutter) 56px}
  .xp-corner.r{display:none}
  .xp-ambient{top:60px;width:150vw}
  .xp-stage{--xs:.58;position:relative;left:50%;top:auto;flex:none;margin-top:24px;transform:translateX(-50%) scale(var(--xs));transform-origin:top center;margin-bottom:calc(245px * (var(--xs) - 1))}
  .xp-planet{top:236px;width:1600px}
  .xp-horizon{top:190px;width:120vw;height:120px}
  .xp-foot{position:relative;left:auto;top:auto;margin-top:150px}
  .xp-foot .sec-lede{font-size:17px;line-height:1.4}
  .xp-foot .sec-lede br{display:none}
  .nav-tile{zoom:.82}
}

/* Featured works span the full screen width (gutters only), like the reference */
.works .works-inner{max-width:none;margin-inline:0;padding-inline:var(--gutter)}
.works-grid{column-gap:clamp(2rem,8vw,112px)}

/* ===== Expertise & Tools — Figma 32-6190 (blue lit object) ===== */
.tl2{--text:#f4f4f5;--panel:#121214;--blue:#3a5cff;--rim:rgba(255,255,255,.55);padding-top:var(--sec-space);background:#080809;color:var(--text);overflow:hidden}
.tl2 .sec-rule{margin-bottom:0}
.tl-hero{position:relative;height:clamp(900px,70.6vw,1017px);isolation:isolate}
.tl-glow{position:absolute;left:50%;top:clamp(330px,36.8vw,530px);width:min(90vw,1300px);height:min(62vw,900px);transform:translate(-50%,-50%);border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(58,92,255,.62),rgba(58,92,255,.28) 42%,rgba(58,92,255,.08) 70%,rgba(58,92,255,0));animation:tl-breathe 6s ease-in-out infinite}
@keyframes tl-breathe{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
.tl-side{position:absolute;left:max(var(--gutter),6.25%);top:48px;width:360px;display:flex;flex-direction:column;gap:12px;z-index:2}
.tl-side .sec-kicker{margin:0;font:500 16px/22.4px "Pangea",var(--sans);color:var(--text)}
.tl-side .sec-lede{margin:0;font:400 19px/26.22px "Pangea",var(--sans);color:var(--azure)}
.tl-side .tool-chips{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:12px;width:360px}
.tl-side .tool-chips .chip{padding:0 12px;letter-spacing:.03em}
.tl-side .chip{background:#121214;color:#f4f4f1}
.tl-stage{position:absolute;left:calc(50% - 9px);top:clamp(240px,20.4vw,294px);width:600px;height:574px;transform:translateX(-50%) scale(var(--ts,1));transform-origin:top center}
.tl-h{position:absolute;left:57px;top:0;width:452px;height:232px;margin:0;z-index:2}
.tl-h .xp-ghost{top:-13.6px}
.tl-neon{position:absolute;left:75px;top:16px;width:351px;height:264px;display:grid;place-items:center;font:400 210px/1.1 "Mr Dafoe",cursive;color:#fff;white-space:nowrap;transform:rotate(-6deg);
  text-shadow:0 0 9px #eaddff,0 0 30px #007aff,0 0 82.5px var(--blue);animation:tl-neon 8s linear infinite}
@keyframes tl-neon{0%,30%,34%,37%,70%,74%,100%{opacity:1;text-shadow:0 0 9px #eaddff,0 0 30px #007aff,0 0 82.5px var(--blue)}
  32%,36%,72%{opacity:.72;text-shadow:0 0 4px #eaddff,0 0 12px #007aff,0 0 30px var(--blue)}}
/* Blue lit squircle */
.tl-tile{position:absolute;left:91px;top:174px;width:400px;height:400px;border-radius:116px;border:2px solid var(--rim);overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 45% at 50% 100%,#b6c3ff 0,#8197ff 11%,#6178ff 16.5%,#3a5cff 22%,rgba(58,92,255,.34) 55%,rgba(58,92,255,0) 100%),#000;
  box-shadow:0 30px 120px rgba(58,92,255,.4),inset 0 2px 2px var(--rim),inset 0 -36px 90px rgba(58,92,255,.9);animation:xp-float 6s ease-in-out infinite}
.tl-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(170,188,255,.6);
  background:radial-gradient(circle at 50% 100%,rgba(80,112,255,.55),rgba(20,30,90,.35) 55%,rgba(4,6,20,.55) 100%);
  box-shadow:0 14px 36px rgba(0,0,20,.55),inset 0 1.5px 1.5px rgba(255,255,255,.45),inset 0 -10px 24px rgba(58,92,255,.45);animation:tl-ring 4s ease-in-out infinite}
.tl-ring.r1{left:57px;top:58px;width:284px;height:284px}
.tl-ring.r2{left:106px;top:107px;width:186px;height:186px;animation-delay:.25s}
.tl-ring.r3{left:151px;top:152px;width:96px;height:96px;animation-delay:.5s;
  background:radial-gradient(circle at 50% 85%,#7f97ff 0,#4565ff 45%,#2440c8 100%);box-shadow:0 0 30px rgba(90,120,255,.7),inset 0 1.5px 1.5px rgba(255,255,255,.6)}
@keyframes tl-ring{0%,100%{transform:scale(1)}40%{transform:scale(1.045)}}
/* Ripple that leaves the core and fades past the outer ring */
.tl-wave{position:absolute;left:199px;top:200px;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:1.5px solid rgba(190,205,255,.75);opacity:0;animation:tl-wave 4s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
.tl-wave.w2{animation-delay:2s}
@keyframes tl-wave{0%{transform:scale(1);opacity:.85}80%{opacity:0}100%{transform:scale(3.4);opacity:0}}

.tl-body{padding:clamp(4rem,10.7vw,154px) max(var(--gutter),6.25%) clamp(5rem,9.7vw,139px);gap:clamp(3rem,6.9vw,100px)}
.tl-body .big-copy{max-width:none}
.tl-right{text-align:right}
.tl-clip.tools-media{aspect-ratio:1;border-radius:clamp(28px,4.45vw,64px);background:#1b1b1f;overflow:hidden;width:auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.tl-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.tl2:not(.is-live) *,body.motion-paused .tl2 *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.tl2 *{animation:none!important}}
@media (max-width:1100px){.tl-stage{--ts:.85}}
@media (max-width:720px){
  .tl-hero{height:auto;display:flex;flex-direction:column;padding:48px var(--gutter) 40px}
  .tl-side{position:relative;left:auto;top:auto;width:auto}
  .tl-side .tool-chips{width:auto}
  .tl-glow{top:560px;width:150vw;height:120vw}
  .tl-stage{--ts:.58;position:relative;left:50%;top:auto;margin-top:56px;transform:translateX(-50%) scale(var(--ts));margin-bottom:calc(574px * (var(--ts) - 1))}
  .tl-right{text-align:left}
}

/* ===== Selected Works head — Figma 32-5962 (green) ===== */
.works.wk2{--green:#44ff06;--text:#f4f4f5;padding-top:var(--sec-space);background:#080809;color:var(--text);overflow:hidden}
.wk2 .sec-rule{margin-bottom:0}
.wk-hero{position:relative;height:clamp(820px,70.6vw,1017px);isolation:isolate}
.wk-glow{position:absolute;left:calc(50% + 11px);top:clamp(390px,41.1vw,592px);width:min(80vw,1150px);height:min(60vw,860px);transform:translate(-50%,-50%);border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(68,255,6,.42),rgba(52,200,10,.2) 38%,rgba(40,150,10,.07) 66%,rgba(40,150,10,0));animation:tl-breathe 6s ease-in-out infinite}
.wk-side{top:48px}
.wk-stage{position:absolute;left:50%;top:clamp(240px,20.4vw,294px);width:452px;height:460px;transform:translateX(-50%) scale(var(--ws,1));transform-origin:top center}
.wk-h{position:absolute;inset:0 0 auto;height:232px;margin:0;z-index:2}
.wk-h .xp-ghost{left:23px;top:-3.6px}
.wk-neon{position:absolute;left:9px;top:22px;font:400 210px/1.1 "Mr Dafoe",cursive;color:#fff;white-space:nowrap;transform:rotate(-6deg);
  text-shadow:0 0 6px #fff,0 0 12px #c9ffb0,0 0 30px rgba(68,255,6,.9),0 0 82.5px rgba(68,255,6,.75);animation:wk-neon 7.5s linear infinite}
@keyframes wk-neon{0%,40%,44%,47%,80%,84%,100%{opacity:1;text-shadow:0 0 6px #fff,0 0 12px #c9ffb0,0 0 30px rgba(68,255,6,.9),0 0 82.5px rgba(68,255,6,.75)}
  42%,46%,82%{opacity:.72;text-shadow:0 0 4px #c9ffb0,0 0 12px rgba(68,255,6,.8),0 0 30px rgba(68,255,6,.5)}}
/* Green glass sphere lit from below */
.wk-sphere{position:absolute;left:81.5px;top:143px;width:311px;height:311px;border-radius:50%;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 100%,#5cff1c 0,#3ad60a 22%,rgba(40,160,10,.75) 48%,rgba(20,70,8,.55) 75%,rgba(10,30,6,.35) 100%);
  border:1.5px solid rgba(200,255,180,.55);
  box-shadow:0 0 60px rgba(68,255,6,.45),0 30px 120px rgba(68,255,6,.3),inset 0 2px 3px rgba(255,255,255,.45),inset 0 -30px 60px rgba(160,255,90,.55);
  animation:wk-float 6s ease-in-out infinite}
.wk-shine{position:absolute;left:18%;top:8%;width:64%;height:34%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.18),rgba(255,255,255,0));filter:blur(4px);animation:wk-shine 6s ease-in-out infinite}
@keyframes wk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes wk-shine{0%,100%{transform:translateX(-8%);opacity:.7}50%{transform:translateX(8%);opacity:1}}
.wk2 .works-inner{padding-bottom:0}
.wk2:not(.is-live) .wk-hero *,body.motion-paused .wk2 .wk-hero *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.wk2 .wk-hero *{animation:none!important}}
@media (max-width:1100px){.wk-stage{--ws:.85}}
@media (max-width:720px){
  .wk-hero{height:auto;display:flex;flex-direction:column;padding:48px var(--gutter) 24px}
  .wk-side{position:relative;left:auto;top:auto;width:auto}
  .wk-glow{top:420px;width:150vw;height:120vw}
  .wk-stage{--ws:.62;position:relative;left:50%;top:auto;margin-top:64px;transform:translateX(-50%) scale(var(--ws));margin-bottom:calc(460px * (var(--ws) - 1))}
}
.wk2 .pill-light{background:#fff!important;color:#000!important}
.wk2 .pill-light:hover{background:var(--accent)!important;color:#fff!important}

/* Scroll effects (driven by scroll-fx.js) */
.works .project-media :is(img,video){inset:auto 0;top:-8%;height:116%;translate:0 var(--py,0%)}
.hero h1 .line,.hero .eyebrow,.hero .reel,.big-copy,.xp-neon,.tl-neon,.wk-neon,.xp-ghost,.tl-tile,.wk-sphere,.nav-tile,.xp-copy,.project.is-right,.tl-clip,.play-tile{will-change:translate}
@media (prefers-reduced-motion:reduce){.works .project-media :is(img,video){inset:0;top:0;height:100%;translate:none}}
/* Hero title scramble glyphs: white (match the text colour in light theme) */
.hero h1 .roll .hw-l.is-scr{color:#fff}
:root[data-theme="light"] .hero h1 .roll .hw-l.is-scr{color:var(--text)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .hero h1 .roll .hw-l.is-scr{color:var(--text)}}

/* ===== Scroll reveals (reveal-fx.js) — word masks + blur-rise blocks ===== */
@property --ry{syntax:"<length>";inherits:false;initial-value:0px}
:root{--rv-ease:cubic-bezier(.76,0,.24,1);--rv-out:cubic-bezier(.16,1,.3,1)}
/* hide until split, so nothing flashes before the effect is primed */
.fx :is(.sec-kicker,.sec-lede,.big-copy,.xp-num,.ft-main h2,.ft-lede,.project-cap,.xp-corner,.ai-note):not(.fx-t){opacity:0}
.rw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em;padding-inline:.02em;margin-inline:-.02em}
.rw-i{display:inline-block;transform:translateY(112%) rotate(4deg);transform-origin:0 100%;transition:transform 1.15s var(--rv-out) var(--d,0s)}
.fx-t.is-in .rw-i{transform:none}
/* blocks: rise out of a soft blur */
.fx-b{--ry:80px;opacity:0;filter:blur(12px);translate:var(--mx,0px) calc(var(--my,0px) + var(--ry));
  transition:--ry 1.3s var(--rv-out) var(--bd,0s),opacity 1s var(--rv-ease) var(--bd,0s),filter 1.1s var(--rv-ease) var(--bd,0s)}
.fx-b.is-in{--ry:0px;opacity:1;filter:none}
.fx-b.is-in.pill-light{transition:--ry 1.3s var(--rv-out),opacity 1s var(--rv-ease),filter 1.1s var(--rv-ease),background-color .3s,color .3s,transform .4s var(--ease)}
/* work cards: wipe open from below, media settles from a slight zoom */
.fx-card .project-media{clip-path:inset(100% 0 0 0 round 12px);transition:clip-path 1.4s var(--rv-ease),transform .9s var(--rv-out),box-shadow .9s var(--rv-out)}
.fx-card .project-media :is(img,video){scale:1.25;transition:scale 1.8s var(--rv-out),opacity .35s,transform 1s var(--ease)}
.fx-card.is-in .project-media{clip-path:inset(0 0 0 0 round 12px)}
.fx-card.is-in .project-media :is(img,video){scale:1}
.fx-card.is-right .project-media{transition-delay:.12s}

/* ===== Isometric hover: the card tips back like a slab on a table ===== */
.works .project>button{perspective:1600px}
.works .project-media{--tx:0deg;--ty:0deg;transform-origin:50% 50%;transform-style:preserve-3d}
@media (hover:hover) and (pointer:fine){
  .works .project>button:is(:hover,:focus-visible) .project-media{
    transform:rotateX(var(--ty)) rotateY(var(--tx)) scale(.985);transition:clip-path 1.4s var(--rv-ease),transform .35s var(--rv-out),box-shadow .35s var(--rv-out);
    box-shadow:calc(var(--sx,0) * 1px) calc(18px + var(--sy,0) * 1px) 44px -14px rgba(0,0,0,.75),calc(var(--sx,0) * 2px) calc(50px + var(--sy,0) * 2px) 100px -40px rgba(68,255,6,.14)}
  .works .project-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .6s;
    background:radial-gradient(60% 60% at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.22),rgba(255,255,255,0) 70%)}
  .works .project>button:is(:hover,:focus-visible) .project-media::after{opacity:1}
  .works .project>button:is(:hover,:focus-visible) .project-media :is(img,video){transform:none}
  .works .project>button .project-cap{transition:translate .8s var(--rv-out)}
  .works .project>button:is(:hover,:focus-visible) .project-cap{translate:0 -6px}
}
.works .project-media{transition:clip-path 1.4s var(--rv-ease),transform .9s var(--rv-out),box-shadow .9s var(--rv-out)}

/* ===== Inner project page (dialog) in Pangea ===== */
#project-dialog,#project-dialog *{font-family:"Pangea",var(--sans)!important}
#project-dialog .dlg-copy h2{font-weight:500;letter-spacing:-.04em}

@media (prefers-reduced-motion:reduce){
  .fx-b,.rw-i{transition:none!important;transform:none!important;opacity:1!important;filter:none!important;--ry:0px}
  .fx-card .project-media{clip-path:none!important}
  .fx-card .project-media :is(img,video){scale:1!important}
}

/* ===== Mood face: colour + expression cycle (xp-tiles.js) ===== */
@property --fc{syntax:"<color>";inherits:true;initial-value:#ff5a1f}
@property --fh{syntax:"<color>";inherits:true;initial-value:#ffb36b}
.face-tile{--fc:#ff5a1f;--fh:#ffb36b;cursor:pointer;transition:--fc .35s ease-out,--fh .35s ease-out;
  border-color:color-mix(in srgb,var(--fh) 55%,#fff 45%);
  background:radial-gradient(60% 45% at 50% 100%,var(--fh) 0,color-mix(in srgb,var(--fc) 70%,var(--fh)) 11%,var(--fc) 22%,color-mix(in srgb,var(--fc) 34%,transparent) 55%,color-mix(in srgb,var(--fc) 0%,transparent) 100%),#000;
  box-shadow:0 16.7px 66.7px color-mix(in srgb,var(--fc) 34%,transparent),inset 0 1.1px 1.1px var(--rim),inset 0 -20px 50px color-mix(in srgb,var(--fc) 90%,transparent);animation:none}
.face-tile:focus-visible{outline:2px solid var(--fh);outline-offset:4px}
.face-tile .face{background:linear-gradient(180deg,var(--fh) 0,color-mix(in srgb,var(--fc) 55%,var(--fh)) 55%,var(--fc) 100%);
  box-shadow:0 0 40px color-mix(in srgb,var(--fc) 55%,transparent),0 0 90px color-mix(in srgb,var(--fc) 30%,transparent)}
.face svg *{transition:opacity .45s}
.face .eyes{transform-origin:50% 94px;transform-box:view-box;animation:xp-blink 4.2s ease-in-out infinite}
.face .eye,.face .heart{fill:#111}
.face .heart{opacity:0}
.face .brow{stroke:#111;stroke-width:7;stroke-linecap:round;opacity:0}
.face .mouth{fill:none;stroke:#111;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.f-lab{transition:opacity .14s,translate .14s}
.f-lab.is-swap{opacity:0;translate:0 6px}

/* ===== Tools — bottom: light rays + big tool pills (Figma 32-6190, v2) ===== */
.tl-body{position:relative;isolation:isolate;min-height:clamp(980px,82.2vw,1183px);padding:clamp(5rem,12.1vw,174px) max(var(--gutter),6.25%) clamp(10rem,18.7vw,269px);gap:clamp(3rem,5.6vw,80px)}
.tl-rays{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.tl-rays i{--b:0;position:absolute;left:var(--x);width:var(--w);top:var(--t);height:var(--h);border-radius:2px;
  background:linear-gradient(180deg,rgba(58,92,255,0) 0,rgba(58,92,255,.34) 70%,#3a5cff 100%);
  opacity:calc(var(--o) + var(--b) * .35);filter:brightness(calc(1 + var(--b) * .9)) saturate(calc(1 + var(--b) * .3));
  transform-origin:50% 100%;animation:tl-eq 3.2s ease-in-out infinite;animation-delay:calc(var(--k) * -.37s);transition:opacity .45s ease,filter .45s ease}
@keyframes tl-eq{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5%)}}
.tl-p1{max-width:881px}
.tl-right{max-width:807px;margin-left:auto;text-align:right}
.tl-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,2.75vw,39.5px)}
.tl-pill{display:inline-flex;align-items:center;justify-content:center;height:clamp(52px,8.24vw,118.7px);padding:0 clamp(20px,3.3vw,47.5px);border-radius:999px;
  border:clamp(2px,.28vw,4px) solid rgba(255,255,255,.06);background:#121214;color:#f4f4f1;cursor:default;
  font-size:clamp(15px,2.52vw,36.27px);line-height:1;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 0 0 rgba(58,92,255,0),inset 0 1px 0 rgba(255,255,255,.04);
  transition:background-color .5s var(--rv-out),border-color .5s var(--rv-out),box-shadow .6s var(--rv-out),color .4s,transform .5s var(--rv-out),filter .5s}
.tl-pill:is(:hover,:focus-visible){background:#1b2140;border-color:rgba(140,160,255,.75);color:#fff;transform:translateY(-4px);
  box-shadow:0 0 0 1px rgba(140,160,255,.25),0 0 40px rgba(58,92,255,.55),0 18px 60px -10px rgba(58,92,255,.6),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -14px 30px rgba(58,92,255,.35);filter:brightness(1.15)}
.tl-pill:focus-visible{outline:none}
@media (max-width:720px){.tl-right{text-align:left;margin-left:0}.tl-body{min-height:0}}
.tl2:not(.is-live) .tl-rays i,body.motion-paused .tl-rays i{animation-play-state:paused}

/* ===== Playground head — Figma 58-6375 (purple dome gauge) ===== */
.playground.pg2{--text:#f4f4f5;padding:var(--sec-space) 0 clamp(4rem,8vw,7rem);background:#080809;color:var(--text);overflow:hidden}
.pg2 .sec-rule{margin-bottom:0}
.pg-hero{position:relative;height:clamp(860px,70.6vw,1017px);isolation:isolate}
.pg-glow{position:absolute;left:50%;top:clamp(400px,36.8vw,530px);width:min(90vw,1300px);height:min(62vw,900px);transform:translate(-50%,-50%);border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(141,101,255,.55),rgba(141,101,255,.24) 42%,rgba(141,101,255,.07) 70%,rgba(141,101,255,0));animation:tl-breathe 6s ease-in-out infinite}
.pg-side{top:48px}
.pg-stage{position:absolute;left:50%;top:clamp(240px,20.4vw,294px);width:820px;height:621px;transform:translateX(-50%) scale(var(--ps,1));transform-origin:top center}
.pg-floor{position:absolute;left:0;top:416px;width:820px;height:205px;border-radius:50%;background:radial-gradient(closest-side,rgba(166,130,255,.7),rgba(141,101,255,.28) 55%,rgba(141,101,255,0));filter:blur(30px);animation:xp-horizon 5s ease-in-out infinite}
/* the dome: a lit half-squircle */
.pg-dome{position:absolute;left:61px;top:137px;width:698px;height:372px;border-radius:349px 349px 23px 23px;border:1.16px solid rgba(255,255,255,.55);overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 45% at 50% 100%,#d6c8ff 0,#b49bff 11%,#a083ff 16.5%,#8d65ff 22%,rgba(141,101,255,.34) 55%,rgba(141,101,255,0) 100%),#000;
  box-shadow:0 17px 70px rgba(141,101,255,.38),inset 0 1.16px 1.16px rgba(255,255,255,.55),inset 0 -21px 52px rgba(141,101,255,.9);transition:box-shadow .6s var(--rv-out),filter .6s var(--rv-out)}
.pg-dome:hover{filter:brightness(1.12);box-shadow:0 17px 90px rgba(141,101,255,.6),inset 0 1.16px 1.16px rgba(255,255,255,.7),inset 0 -24px 66px rgba(141,101,255,1)}
.pg-arc{position:absolute;left:9px;top:4.5px;width:680px;height:340px;overflow:visible}
.pg-cap{stroke:#17171c;stroke-width:20;stroke-linecap:round;transition:stroke .35s ease,filter .35s ease}
.pg-cap.on{stroke:#8d65ff}
.pg-cap.head{stroke:#c3b0ff;filter:drop-shadow(0 0 8px rgba(160,130,255,.9))}
.pg-chip{position:absolute;left:50%;top:124px;transform:translateX(-50%);padding:3.5px 8px 3.5px 7px;border-radius:999px;background:rgba(141,101,255,.2);color:#b9a3ff;font:500 11.6px/1.3 var(--sans);white-space:nowrap}
.pg-avail{position:absolute;left:0;right:0;top:159px;text-align:center;font:500 14px/1.3 var(--sans);color:#b8b9c2}
.pg-global{position:absolute;left:0;right:0;top:191px;text-align:center;font:700 128px/1.04 var(--sans);letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff 0,#d9ccff 60%,rgba(141,101,255,0) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-t{position:absolute;top:344px;font:500 12px/1.3 var(--sans);color:#fff}
.pg-t.l{left:34px}.pg-t.r{right:28px}
/* title */
.pg-h{position:absolute;left:167px;top:0;width:452px;height:232px;margin:0;z-index:3;pointer-events:none}
.pg-h .xp-ghost{left:-75px;top:5.4px}
.pg-neon{position:absolute;left:-205px;top:-37.6px;width:861px;height:318px;display:grid;place-items:center;font:400 210px/1.1 "Mr Dafoe",cursive;color:#fff;white-space:nowrap;transform:rotate(-6deg);
  text-shadow:0 0 9px #eaddff,0 0 30px #9a6bff,0 0 82.5px #8d65ff;animation:pg-neon 8.5s linear infinite}
@keyframes pg-neon{0%,12%,16%,19%,62%,66%,100%{opacity:1;text-shadow:0 0 9px #eaddff,0 0 30px #9a6bff,0 0 82.5px #8d65ff}
  14%,18%,64%{opacity:.72;text-shadow:0 0 4px #eaddff,0 0 12px #9a6bff,0 0 30px #8d65ff}}
.pg2 .play-grid{padding-inline:var(--gutter)}
.pg2:not(.is-live) .pg-hero *,body.motion-paused .pg2 .pg-hero *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.pg2 .pg-hero *{animation:none!important}}
@media (max-width:1100px){.pg-stage{--ps:.85}}
@media (max-width:720px){
  .pg-hero{height:auto;display:flex;flex-direction:column;padding:48px var(--gutter) 24px}
  .pg-side{position:relative;left:auto;top:auto;width:auto}
  .pg-glow{top:520px;width:150vw;height:120vw}
  .pg-stage{--ps:.44;position:relative;left:50%;top:auto;margin-top:80px;transform:translateX(-50%) scale(var(--ps));margin-bottom:calc(621px * (var(--ps) - 1))}
}

/* ===== Exact line structure for Skills (Figma 32-6190) ===== */
.tl-body .big-copy{font-family:"Pangea",var(--sans);font-size:clamp(1.6rem,2.99vw,43px);line-height:1.171}
.tl-p1,.tl-right{max-width:none}
.tl-right{margin-left:auto}
.tl-pills .tl-break{flex-basis:100%;height:0;margin:calc(clamp(12px,2.75vw,39.5px) / -2) 0}
@media (max-width:900px){.tl-body br.lg{display:none}.tl-pills .tl-break{display:none}}

/* ===== Works grid spacing (Figma 32-5962) ===== */
@media (min-width:900px){
  .wk2 .works-inner{padding-inline:clamp(24px,2.92vw,42px)}
  .wk2 .works-grid{column-gap:clamp(24px,2.78vw,40px);row-gap:50px}
}

/* ===== Playground grid (Figma 58-6375): 3 columns, 30px gaps, 16px corners, tucked under the dome ===== */
.pg2 .play-grid{columns:3;column-gap:clamp(12px,2.08vw,30px);padding-inline:clamp(16px,3.33vw,48px);margin-top:calc(-1 * clamp(0px,5.28vw,76px));position:relative;z-index:2}
.pg2 .play-tile{border-radius:16px;margin-bottom:clamp(12px,2.08vw,30px)}
@media (max-width:900px){.pg2 .play-grid{columns:2}}
@media (max-width:560px){.pg2 .play-grid{columns:1;margin-top:0}}

/* ---------- v36: client logos ticker, dot-only cursor, native card frames ---------- */
.ticker.logos{margin-top:clamp(3rem,7vw,6rem)}
.ticker.logos .ticker-track{list-style:none;margin:0;padding:0;align-items:center;gap:clamp(3rem,6vw,5.5rem);animation-duration:48s;color:rgba(244,244,245,.42)}
.ticker.logos .logo{display:flex;align-items:center;height:clamp(22px,2.4vw,32px);transition:color .35s var(--ease),opacity .35s;flex:none}
.ticker.logos .logo svg{height:100%;width:auto;display:block;overflow:visible}
.ticker.logos .logo-waikai,.ticker.logos .logo-thirdeye,.ticker.logos .logo-klipy{height:clamp(28px,3vw,40px)}
.ticker.logos .logo-xdge{height:clamp(18px,1.9vw,26px)}
.ticker.logos .logo-demostack{height:clamp(18px,1.9vw,25px)}
.ticker.logos .logo:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.ticker.logos .ticker-track{justify-content:center;column-gap:2.5rem;row-gap:1.25rem}}
@media (hover:hover) and (pointer:fine){html.no-cursor,html.no-cursor *,html.no-cursor *::before,html.no-cursor *::after{cursor:none!important}}
/* show each work's media in its own frame: no fixed crop, no parallax overscan */
.works .project-media,.works .project.is-small .project-media{aspect-ratio:16/9}
.works .project-media :is(img,video){inset:0;top:0;height:100%;translate:none;object-fit:cover}
.ticker.logos .logo-amerigo,.ticker.logos .logo-suphra{height:clamp(15px,1.6vw,22px)}
.ticker.logos .logo-extremeff{height:clamp(18px,1.9vw,26px)}
.ticker.logos .logo-klipy{height:clamp(22px,2.3vw,31px)}

/* ---------- Footer v2 (Figma 30:4567) ---------- */
.site-footer{padding:72px clamp(16px,2.92vw,42px) 24px}
.site-footer .ft-inner{max-width:1356px;gap:72px}
.site-footer .ft-marquee{margin-inline:0;font-family:"Pangea",var(--sans);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%)}
.site-footer .mq-group{font:500 clamp(3.25rem,6.9vw,99.2px)/.925 "Pangea",var(--sans);letter-spacing:-.01em;gap:40px;padding:6px 40px 6px 0}
.site-footer .mq-group>span{padding:6px}
.site-footer .mq-arrow{width:clamp(3.4rem,8.96vw,129px)}
.site-footer .mq-arrow path{stroke-width:1.5}
.site-footer .ft-rule{background:transparent;height:1px}
.ft2.ft-main{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:clamp(56px,8.3vw,120px);min-height:clamp(0px,22.4vw,322px)}
.ft2 .ft-contact{flex-direction:row;align-items:center;gap:clamp(20px,3.2vw,46px)}
.ft2 .ft-avatar{width:clamp(88px,10vw,144px);height:clamp(88px,10vw,144px);margin:0;flex:none;background:#bdb8b5}
.ft2 .ft-copy{display:flex;flex-direction:column;gap:11.5px}
.ft2 .ft-lede{font:400 clamp(17px,1.9vw,27.36px)/1.38 "Pangea",var(--sans);color:#6b86a0}
.ft2 .ft-title{font:500 clamp(30px,4.3vw,61.92px)/1.171 "Pangea",var(--sans);letter-spacing:-.01em;color:#f4f4f1;margin:0}
.ft2 .ft-title a{color:inherit;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.ft2 .ft-title a:hover{background-size:100% 1px}
.ft2 .ft-meta{gap:16px 54px;font:500 16px/22.4px var(--sans);letter-spacing:-.32px;font-feature-settings:"cv05" 1,"cv11" 1}
.ft2 .ft-meta dt{color:#6b86a0}
.site-footer .ft-bottom{margin-top:-52px;font:400 16px/22.4px "Pangea",var(--sans);letter-spacing:-.32px}
.site-footer .ft-dim{color:#6b86a0;opacity:.9}
@media (max-width:820px){
  .site-footer .ft-inner{gap:48px}
  .site-footer .ft-bottom{margin-top:-28px}
  .ft2 .ft-contact{flex-direction:column;align-items:flex-start}
  .ft2 .ft-lede br{display:none}
  .ft2 .ft-meta{gap:1.25rem 2.5rem}
}
/* Scramble hover is white everywhere, as in the hero */
.roll .hw-l.is-scr{color:#fff!important}
/* Footer spans the full width; the ticker runs edge to edge */
.site-footer .ft-inner{max-width:none}
.site-footer .ft-marquee{margin-inline:calc(-1*clamp(16px,2.92vw,42px))}
/* Works: two free-flowing columns (native card heights, no row gaps) */
.works-grid .wk-col{display:flex;flex-direction:column;gap:50px;min-width:0}
.works-grid .wk-col.is-r .project.is-small{align-self:flex-end}
@media (max-width:720px){.works-grid .wk-col{display:contents}}
/* Playground tiles: the same pointer-steered isometric bend as the work cards */
.pg2 .play-tile{--tx:0deg;--ty:0deg;transform-origin:50% 50%;
  transition:--ry 1.3s var(--rv-out) var(--bd,0s),opacity 1s var(--rv-ease) var(--bd,0s),filter 1.1s var(--rv-ease) var(--bd,0s),transform .9s var(--rv-out),box-shadow .9s var(--rv-out)}
@media (hover:hover) and (pointer:fine){
  .pg2 .play-tile:is(:hover,:focus-visible){
    transform:perspective(1600px) rotateX(var(--ty)) rotateY(var(--tx)) scale(.985);
    transition:--ry 1.3s var(--rv-out) var(--bd,0s),opacity 1s var(--rv-ease) var(--bd,0s),filter 1.1s var(--rv-ease) var(--bd,0s),transform .35s var(--rv-out),box-shadow .35s var(--rv-out);
    box-shadow:calc(var(--sx,0) * 1px) calc(18px + var(--sy,0) * 1px) 44px -14px rgba(0,0,0,.75),calc(var(--sx,0) * 2px) calc(50px + var(--sy,0) * 2px) 100px -40px rgba(68,255,6,.14)}
  .pg2 .play-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .6s;
    background:radial-gradient(60% 60% at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.22),rgba(255,255,255,0) 70%)}
  .pg2 .play-tile:is(:hover,:focus-visible)::after{opacity:1}
  .pg2 .play-tile:is(:hover,:focus-visible) :is(img,video){transform:none}
}
/* Project page: every video fills the frame width, at its own aspect ratio */
#project-dialog .player.gallery .g-item:not(.g-lottie){grid-column:1/-1;width:100%;max-width:none;max-height:none;margin-inline:0}
#project-dialog .player.gallery .g-item:not(.g-lottie) video{width:100%;height:auto;max-height:none;object-fit:contain}
/* Experience: the "6+ years" note and stars sit right under "[02] Journey" */
.xp-hero .xp-foot{top:calc(48px + 22.4px + 12px);z-index:2}
@media (max-width:720px){.xp-hero .xp-foot{top:auto;order:-1;margin:0 0 24px}}
/* Hero eyebrow uses the section-label style ([02] Journey) */
.hero .eyebrow.mono{font:500 16px/22.4px "Pangea",var(--sans);letter-spacing:normal;text-transform:none;color:var(--text)}
@media (max-width:720px){.xp-hero .xp-corner.l{left:var(--gutter)}}
/* Footer ticker v3 (Figma 30:4567): a row of "Let's Talk" pills */
.site-footer .mq-group{gap:40px;padding:6px 40px 6px 0;font:400 clamp(26px,2.98vw,42.9px)/1 "Pangea",var(--sans);letter-spacing:-.01em}
.site-footer .mq-pill{display:inline-flex;align-items:flex-start;gap:.2em;height:clamp(76px,8.24vw,118.7px);padding:0 clamp(30px,3.3vw,47.5px);padding-top:clamp(24px,2.75vw,39.6px);border-radius:999px;background:#121214;border:4px solid rgba(255,255,255,.16);color:#fff;white-space:nowrap;transition:background-color .4s var(--ease),border-color .4s var(--ease)}
.site-footer .mq-pill .mq-txt{line-height:1.05}
.site-footer .mq-pill .mq-arrow{width:.75em;height:.75em;flex:none;margin-top:-.08em;transition:transform .5s var(--ease)}
.site-footer .ft-marquee:hover .mq-pill{background:#1a1a1e;border-color:rgba(255,255,255,.28)}
.site-footer .ft-marquee:hover .mq-arrow{transform:translate(.06em,-.06em)}
.site-footer .mq-pill{align-items:center;padding-top:0;gap:.22em}
.site-footer .mq-pill .mq-arrow{align-self:center;margin-top:-.62em}

/* ======================================================================
   Header + Hero v2 (Figma 62:7379)
   ====================================================================== */
.header{display:flex;align-items:center;gap:63px;padding:calc(env(safe-area-inset-top,0px) + 26px) clamp(16px,1.8vw,26px) 18px clamp(16px,2.22vw,32px)}
.header .wordmark{margin-right:auto;font:500 22px/1 "Pangea",var(--sans);letter-spacing:-.01em;text-transform:uppercase;color:#fff;white-space:nowrap}
.header .wordmark .dk{font-weight:400;color:#6b86a0}
.header .nav{gap:63px}
.header .nav a{font:400 12px/19.1px "Pangea",var(--sans);letter-spacing:.764px;text-transform:uppercase;color:#fff;padding:.2rem 0}
.header .header-tools{justify-self:auto}
.cta.cta-req{height:auto;gap:4px;align-items:flex-start;padding:12px 16px 12px 24px;border-radius:1000px;background:#fff;color:#000;font:400 16px/normal "Pangea",var(--sans);letter-spacing:normal;text-transform:none;transition:background-color .35s,color .35s}
.cta.cta-req .cta-arr{width:12px;height:12px;flex:none;transition:transform .45s var(--ease)}
.cta.cta-req:hover{background:var(--accent);color:#fff}
.cta.cta-req:hover .cta-arr{transform:translate(2px,-2px)}
@media (max-width:1180px){.header,.header .nav{gap:36px}}
@media (max-width:560px){.header .wordmark{font-size:17px}.cta.cta-req{padding:9px 12px 9px 16px;font-size:14px}}

@property --hv-c{syntax:"<color>";inherits:true;initial-value:#22d36b}
@property --hv-c2{syntax:"<color>";inherits:true;initial-value:#9dffc4}
.hero.hv2{--u:min(1px,.069444vw);--hv-c:#22d36b;--hv-c2:#9dffc4;padding:0 0 0;transition:--hv-c .7s var(--ease),--hv-c2 .7s var(--ease)}
.hero.hv2.hv-off{--hv-c:#ff3346;--hv-c2:#ffb0a8}
.hv-stage{position:relative;height:calc(608 * var(--u))}
.hv2 .eyebrow.mono{position:absolute;left:max(var(--gutter),6.25vw);top:calc(164 * var(--u));margin:0;font:500 16px/22.4px "Pangea",var(--sans);letter-spacing:normal;text-transform:none;color:var(--text);z-index:3}
.hv2 h1{position:absolute;left:max(var(--gutter),6.25vw);top:calc(198 * var(--u));z-index:3;margin:0;font:500 calc(120 * var(--u))/calc(110 * var(--u)) "Pangea",var(--sans);letter-spacing:-.02em;color:#f9f9f9;text-wrap:nowrap;white-space:nowrap}
.hv2 h1 .line{padding-bottom:0;overflow:visible;clip-path:inset(-.1em -2em .02em -.2em)}
/* neon script word */
.hv-neon{position:absolute;left:1.833em;top:.154em;width:7.92em;font:400 1.75em/1.1 "Mr Dafoe",cursive;letter-spacing:0;color:#fff;transform:rotate(-7.2deg);pointer-events:none;
  text-shadow:0 0 9px var(--hv-c2),0 0 30px var(--hv-c),0 0 82.5px var(--hv-c);animation:hv-in 1.4s .35s var(--ease) both}
.hv2.hv-flick .hv-neon{animation:hv-flick .6s steps(1) both}
@keyframes hv-in{0%{opacity:0;filter:blur(6px)}30%{opacity:.6}35%{opacity:.15}45%{opacity:.9}50%{opacity:.4}100%{opacity:1;filter:none}}
@keyframes hv-flick{0%,100%{opacity:1}15%{opacity:.25}30%{opacity:.9}42%{opacity:.35}60%{opacity:1}}
/* the switch */
.hv-toggle{position:absolute;right:calc(26 * var(--u));top:calc(189 * var(--u));width:calc(585 * var(--u));height:calc(286 * var(--u));padding:0;border:0;border-radius:10000px;background:none;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent}
.hv-toggle:focus-visible{outline:2px solid var(--hv-c2);outline-offset:8px}
.hv-glow{position:absolute;left:30%;right:-12%;top:38%;bottom:-40%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--hv-c) 55%,transparent),transparent);filter:blur(calc(60 * var(--u)));opacity:.9;pointer-events:none;z-index:-1}
.hv-body{position:absolute;inset:0;border-radius:inherit;border:calc(1.36 * var(--u)) solid rgba(255,255,255,.55);
  background:radial-gradient(60% 45% at 50% 100%,color-mix(in srgb,var(--hv-c2) 90%,#fff),var(--hv-c) 22%,color-mix(in srgb,var(--hv-c) 34%,transparent) 55%,transparent),#000;
  box-shadow:0 calc(20 * var(--u)) calc(82 * var(--u)) color-mix(in srgb,var(--hv-c) 34%,transparent),inset 0 calc(1.36 * var(--u)) calc(1.36 * var(--u)) rgba(255,255,255,.55),inset 0 calc(-24.5 * var(--u)) calc(61 * var(--u)) color-mix(in srgb,var(--hv-c) 90%,transparent);
  transition:transform .5s var(--ease)}
.hv-toggle:hover .hv-body{transform:scale(1.012)}
.hv-toggle:active .hv-body{transform:scale(.985)}
.hv-knob{position:absolute;top:12%;left:6.3%;width:calc(214 * var(--u));height:calc(214 * var(--u));border-radius:50%;
  border:calc(1.36 * var(--u)) solid rgba(255,255,255,.5);
  background:radial-gradient(70% 45% at 50% 100%,color-mix(in srgb,var(--hv-c) 70%,transparent),transparent 75%),radial-gradient(circle at 50% 35%,rgba(255,255,255,.06),rgba(0,0,0,.25) 70%);
  box-shadow:inset 0 calc(1.36 * var(--u)) calc(1.36 * var(--u)) rgba(255,255,255,.5),inset 0 calc(-18 * var(--u)) calc(40 * var(--u)) color-mix(in srgb,var(--hv-c) 55%,transparent),0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .75s cubic-bezier(.5,1.6,.4,1)}
.hv-toggle.is-on .hv-knob{transform:translateX(138.8%)}
.hv-toggle:active .hv-knob{scale:1.04 .96}
/* rising particles */
.hv-parts{position:absolute;inset:0;pointer-events:none;overflow:visible}
.hv-parts i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:var(--hv-c2);box-shadow:0 0 6px var(--hv-c),0 0 14px var(--hv-c);opacity:0;
  animation:hv-rise var(--t) cubic-bezier(.2,.6,.35,1) infinite}
.hv-parts i.b{animation-iteration-count:1;animation-timing-function:cubic-bezier(.1,.7,.3,1)}
@keyframes hv-rise{0%{transform:translate(0,0) scale(.4);opacity:0}12%{opacity:var(--o)}70%{opacity:calc(var(--o) * .7)}100%{transform:translate(var(--dx),calc(-1 * var(--h))) scale(1);opacity:0}}
.hv2.hv-idle .hv-parts i,body.motion-paused .hv-parts i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hv-knob,.hv-body{transition:none}.hv-neon{animation:none}}
/* client logos as pills (Figma "Company logo" chips) */
.hv2 .ticker.logos{margin:0;padding:0}
.hv2 .ticker.logos .ticker-track{gap:21px;color:rgba(244,244,241,.5)}
.hv2 .ticker.logos .logo{height:62.5px;padding:0 25px;border-radius:1735px;background:#121214;border:2.1px solid rgba(255,255,255,.04);color:rgba(244,244,241,.5);transition:color .35s,border-color .35s}
.hv2 .ticker.logos .logo svg{height:22px}
.hv2 .ticker.logos .logo-waikai svg,.hv2 .ticker.logos .logo-thirdeye svg,.hv2 .ticker.logos .logo-klipy svg{height:28px}
.hv2 .ticker.logos .logo-amerigo svg,.hv2 .ticker.logos .logo-suphra svg,.hv2 .ticker.logos .logo-xdge svg,.hv2 .ticker.logos .logo-demostack svg,.hv2 .ticker.logos .logo-extremeff svg{height:18px}
.hv2 .ticker.logos .logo:hover{color:#f4f4f1;border-color:rgba(255,255,255,.12)}
/* reel card */
.hv2 .reel{margin:24px clamp(12px,1.39vw,20px) 0;border-radius:16px}
/* phones / small tablets: stack */
@media (max-width:720px){
  .hero.hv2{--u:.2326vw;padding-top:96px}
  .hv-stage{height:auto;display:flex;flex-direction:column;padding:0 var(--gutter) 40px}
  .hv2 .eyebrow.mono,.hv2 h1{position:relative;left:auto;top:auto}
  .hv2 .eyebrow.mono{margin-bottom:12px}
  .hv2 h1{font-size:13.6vw;line-height:.92}
  .hv-toggle{position:relative;right:auto;top:auto;align-self:flex-end;margin-top:72px;width:72vw;height:35.2vw;--u:.123vw}
}
.header .wordmark .dk{text-transform:none}
.hv-neon{left:1.047em;top:.088em;width:4.524em}
.hv2 h1 .line{clip-path:inset(-.1em -2em -.3em -.2em)}
.hv-knob{background:radial-gradient(80% 55% at 50% 100%,color-mix(in srgb,var(--hv-c2) 70%,transparent),color-mix(in srgb,var(--hv-c) 55%,transparent) 35%,transparent 80%),radial-gradient(circle at 50% 35%,rgba(255,255,255,.07),rgba(0,0,0,.2) 70%)}
@media (max-width:720px){
  .hv2 h1{font-size:12.2vw}
  .hv2 .ticker.logos .logo{height:48px;padding:0 18px}
  .hv2 .ticker.logos .ticker-track{gap:12px}
}
/* Tools pills: the space between the two rows matches the space between pills */
@media (min-width:901px){.tl-pills{row-gap:0}.tl-pills .tl-break{height:clamp(12px,2.75vw,39.5px);margin:0}}
/* Experience rows (Figma 32:5873): a ruled divider with a plus between rows */
.xp-rule{margin:0 calc(-1 * max(var(--gutter),6.25vw))}
.xp-rule .sec-rule{margin:60px 0}
@media (max-width:900px){.xp-rule .sec-rule{margin:0}}
.xp2 .big-copy{font-family:"Pangea",var(--sans);font-size:clamp(1.75rem,2.99vw,43px);line-height:1.171}
.xp2 .xp-num{font-family:"Pangea",var(--sans);font-size:clamp(4rem,6.5vw,93.6px);line-height:.8;letter-spacing:-1.872px}
/* Logo ticker: three copies + trailing gap so the -1/3 loop is seamless at any width; each pill links out */
.hv2 .ticker.logos .ticker-track{padding-right:21px;animation-name:ticker3;animation-duration:60s}
@keyframes ticker3{to{transform:translateX(-33.3333%)}}
.hv2 .ticker.logos .logo{padding:0}
.hv2 .ticker.logos .logo a{display:flex;align-items:center;height:100%;padding:0 25px;color:inherit;border-radius:inherit}
.hv2 .ticker.logos .logo a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:720px){.hv2 .ticker.logos .ticker-track{padding-right:12px}.hv2 .ticker.logos .logo a{padding:0 18px}}
/* Big low-left glow behind the logo row and reel (Figma 62:7379); takes the switch colour */
.hero.hv2{position:relative;isolation:isolate}
.hero.hv2::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:calc(-330 * var(--u));top:calc(330 * var(--u));width:calc(760 * var(--u));height:calc(760 * var(--u));border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--hv-c) 95%,#fff 5%),color-mix(in srgb,var(--hv-c) 55%,transparent) 45%,transparent);filter:blur(calc(70 * var(--u)));opacity:.95}
@media (max-width:720px){.hero.hv2::before{left:-60vw;top:120vw;width:130vw;height:130vw;filter:blur(40px)}}
/* Footer "Let's Talk" pills share the Tools pill look: quiet dark pill, blue glow + lift on hover */
.site-footer .ft-marquee{padding-block:44px;margin-block:-44px}
.site-footer .mq-pill{background:#121214;border:4px solid rgba(255,255,255,.06);box-shadow:0 0 0 rgba(58,92,255,0),inset 0 1px 0 rgba(255,255,255,.04);
  transition:background-color .5s var(--rv-out),border-color .5s var(--rv-out),box-shadow .6s var(--rv-out),transform .5s var(--rv-out),filter .5s}
.site-footer .ft-marquee:hover .mq-pill{background:#121214;border-color:rgba(255,255,255,.06)}
.site-footer .ft-marquee .mq-pill:hover{background:#1b2140;border-color:rgba(140,160,255,.75);transform:translateY(-4px);filter:brightness(1.15);
  box-shadow:0 0 0 1px rgba(140,160,255,.25),0 0 40px rgba(58,92,255,.55),0 18px 60px -10px rgba(58,92,255,.6),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -14px 30px rgba(58,92,255,.35)}
.site-footer .ft-marquee .mq-pill:hover .mq-arrow{transform:translate(.06em,-.06em)}
.site-footer .ft-marquee:hover .mq-arrow{transform:none}
/* Loader: same wordmark as the header, Pangea label, counter alone at the bottom right */
.loader-top{top:calc(env(safe-area-inset-top,0px) + 26px);left:clamp(16px,2.22vw,32px);right:clamp(16px,1.8vw,26px);align-items:center}
.loader-logo{font:500 22px/1 "Pangea",var(--sans);letter-spacing:-.01em;color:#fff;white-space:nowrap}
.loader-logo .dk{font-weight:400;color:rgba(255,255,255,.62)}
.loader-tag{font:400 12px/19.1px "Pangea",var(--sans);letter-spacing:.764px;text-transform:uppercase}
.loader-bottom{justify-content:flex-end}
@media (max-width:560px){.loader-logo{font-size:17px}}
/* Footer pills: more room inside so text and arrow clear the rim */
.site-footer .mq-pill{padding:0 clamp(36px,4.4vw,64px) 0 clamp(40px,4.7vw,68px);gap:.32em}
/* Logo pills: same blue glow + lift as the Let's Talk / Tools pills */
.hv2 .ticker.logos{padding-block:44px;margin-block:-44px}
.hv2 .ticker.logos .logo{box-shadow:0 0 0 rgba(58,92,255,0),inset 0 1px 0 rgba(255,255,255,.04);
  transition:background-color .5s var(--rv-out),border-color .5s var(--rv-out),box-shadow .6s var(--rv-out),color .4s,transform .5s var(--rv-out),filter .5s}
.hv2 .ticker.logos .logo:is(:hover,:focus-within){background:#1b2140;border-color:rgba(140,160,255,.75);color:#fff;transform:translateY(-4px);filter:brightness(1.15);
  box-shadow:0 0 0 1px rgba(140,160,255,.25),0 0 40px rgba(58,92,255,.55),0 18px 60px -10px rgba(58,92,255,.6),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -14px 30px rgba(58,92,255,.35)}
.hv2 .ticker.logos .logo a{padding:0 32px}
@media (max-width:720px){.hv2 .ticker.logos .logo a{padding:0 22px}}
.site-footer .mq-group>.mq-pill{padding:0 clamp(36px,4.4vw,64px) 0 clamp(40px,4.7vw,68px)}
/* Loader on dark, matching the hero */
.loader-columns i{background:#0b0b0c;border-right-color:rgba(255,255,255,.06)}
.loader-logo .dk{color:#6b86a0}
.site-footer .ft-marquee{padding-block:96px;margin-block:-96px}
.site-footer .ft-marquee{pointer-events:none}.site-footer .ft-marquee .mq-pill{pointer-events:auto}
@media (max-width:720px){.hv-toggle{align-self:center}}
/* Footer email copy feedback */
.ft-meta dd{position:relative}
.copy-tip{position:absolute;left:0;top:calc(100% + 6px);padding:4px 10px;border-radius:999px;background:#fff;color:#000;font:500 12px/1.4 var(--sans);letter-spacing:0;white-space:nowrap;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .35s var(--ease);pointer-events:none}
.copy-tip.on{opacity:1;transform:none}
.copy-email{cursor:copy}