:root{
    --bg:#08080c;
    --bg-2:#0d0c14;
    --ink:#f3f1f8;
    --ink-dim:#a09bb5;
    --ink-faint:#5b566e;
    --purple:#8878b8;
    --purple-bright:#b2a3e0;
    --purple-deep:#574b85;
    --line:rgba(136,120,184,.18);
    --maxw:1320px;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Hanken Grotesk',sans-serif;
    font-weight:400;
    line-height:1.5;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    cursor:none;
  }
  @media (max-width:760px){ body{cursor:auto;} }
  ::selection{background:var(--purple);color:#08080c;}

  /* grain overlay */
  body::after{
    content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* custom cursor */
  .cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--purple-bright);z-index:10000;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .25s;}
  .cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid var(--purple);border-radius:50%;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),opacity .3s,border-color .3s;opacity:.7;}
  body.hovering .cursor{width:0;height:0;}
  body.hovering .cursor-ring{width:64px;height:64px;border-color:var(--purple-bright);opacity:1;}
  @media (max-width:760px){ .cursor,.cursor-ring{display:none;} }

  /* nav */
  header.nav{position:fixed;top:0;left:0;width:100%;z-index:500;padding:22px clamp(20px,4vw,48px);display:flex;justify-content:space-between;align-items:center;mix-blend-mode:difference;}
  .logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);}
  .logo svg{width:30px;height:30px;}
  .logo b{font-family:'Syne';font-weight:800;font-size:18px;letter-spacing:.04em;}
  .logo sup{font-size:9px;font-weight:600;opacity:.7;}
  .nav-right{display:flex;align-items:center;gap:26px;font-family:'JetBrains Mono';font-size:12px;}
  .sound-toggle{background:none;border:1px solid var(--ink);color:var(--ink);font-family:'JetBrains Mono';font-size:11px;letter-spacing:.1em;padding:7px 13px;border-radius:30px;cursor:none;text-transform:uppercase;display:flex;gap:8px;align-items:center;}
  .sound-toggle .bars{display:flex;gap:2px;align-items:flex-end;height:11px;}
  .sound-toggle .bars i{width:2px;height:4px;background:var(--ink);display:block;}
  .sound-toggle.on .bars i{animation:eq .8s infinite ease-in-out;}
  .sound-toggle.on .bars i:nth-child(2){animation-delay:.2s;}
  .sound-toggle.on .bars i:nth-child(3){animation-delay:.4s;}
  @keyframes eq{0%,100%{height:3px;}50%{height:11px;}}
  @media (max-width:760px){ header.nav{mix-blend-mode:normal;} .nav-link{display:none;} }

  /* progress chapter rail */
  .rail{position:fixed;right:clamp(16px,3vw,38px);top:50%;transform:translateY(-50%);z-index:400;display:flex;flex-direction:column;gap:18px;mix-blend-mode:difference;}
  .rail a{font-family:'JetBrains Mono';font-size:11px;color:var(--ink);text-decoration:none;opacity:.4;letter-spacing:.05em;transition:opacity .3s,transform .3s var(--ease);transform-origin:right;}
  .rail a.active{opacity:1;transform:scale(1.15);}
  @media (max-width:900px){ .rail{display:none;} }

  /* persistent 3D background */
  #gl{position:fixed;inset:0;z-index:0;pointer-events:none;}
  .bg-fallback{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 62% 45%,#191331 0%,#0c0a14 52%,#08080c 100%);}
  section,footer{position:relative;z-index:1;}
  /* HERO */
  .hero{position:relative;height:100svh;width:100%;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
  .hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px);pointer-events:none;}
  .hero h1{font-family:'Syne';font-weight:800;line-height:.9;letter-spacing:-.02em;font-size:clamp(48px,11vw,168px);text-transform:uppercase;}
  .hero h1 .l2{display:block;padding-left:.12em;}
  .hero h1 em{font-style:normal;color:var(--purple-bright);}
  .hero .sub{margin-top:26px;max-width:430px;font-size:clamp(15px,1.5vw,18px);color:var(--ink-dim);font-weight:300;line-height:1.45;}
  .scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.18em;color:var(--ink-dim);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;}
  .scroll-cue .line{width:1px;height:42px;background:linear-gradient(var(--purple),transparent);animation:drop 1.8s infinite;}
  @keyframes drop{0%{transform:scaleY(0);transform-origin:top;}45%{transform:scaleY(1);transform-origin:top;}55%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}
  .drag-hint{position:absolute;z-index:3;bottom:34px;right:clamp(20px,4vw,48px);font-family:'JetBrains Mono';font-size:10px;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase;}
  @media (max-width:760px){ .drag-hint{display:none;} }

  /* generic section */
  section{position:relative;padding:clamp(90px,13vh,180px) clamp(20px,4vw,48px);}
  .wrap{max-width:var(--maxw);margin:0 auto;}
  .chapter-tag{font-family:'JetBrains Mono';font-size:12px;letter-spacing:.1em;color:var(--purple);margin-bottom:30px;display:flex;align-items:center;gap:10px;}
  .chapter-tag::before{content:"";width:26px;height:1px;background:var(--purple);}

  .big-statement{font-family:'Syne';font-weight:700;font-size:clamp(30px,5.2vw,76px);line-height:1.02;letter-spacing:-.015em;max-width:16ch;}
  .big-statement em{font-style:normal;color:var(--purple-bright);}

  /* manifesto */
  .manifesto{border-top:1px solid var(--line);}
  .mani-grid{display:grid;grid-template-columns:1fr;gap:60px;margin-top:64px;}
  @media(min-width:900px){ .mani-grid{grid-template-columns:1.1fr .9fr;gap:80px;} }
  .mani-body p{color:var(--ink-dim);font-size:clamp(16px,1.4vw,19px);font-weight:300;margin-bottom:22px;line-height:1.55;max-width:46ch;}
  .mani-body p strong{color:var(--ink);font-weight:500;}
  .stats{display:flex;flex-direction:column;gap:0;align-self:start;}
  .stat{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;align-items:baseline;}
  .stat:last-child{border-bottom:1px solid var(--line);}
  .stat .n{font-family:'Syne';font-weight:800;font-size:clamp(30px,3.6vw,52px);color:var(--purple-bright);}
  .stat .t{font-family:'JetBrains Mono';font-size:12px;color:var(--ink-dim);text-align:right;max-width:14ch;}

  /* services marquee */
  .services{background:rgba(11,10,18,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding-block:clamp(70px,9vh,120px);}
  .marquee{display:flex;gap:0;white-space:nowrap;will-change:transform;}
  .marquee.row1{animation:scrollL 38s linear infinite;}
  .marquee.row2{animation:scrollR 32s linear infinite;}
  @keyframes scrollL{to{transform:translateX(-50%);}}
  @keyframes scrollR{from{transform:translateX(-50%);}to{transform:translateX(0);}}
  .marquee span{font-family:'Syne';font-weight:800;font-size:clamp(34px,6vw,90px);text-transform:uppercase;letter-spacing:-.01em;padding:0 .35em;color:transparent;-webkit-text-stroke:1px var(--ink-faint);transition:color .3s;}
  .marquee span.fill{color:var(--ink);-webkit-text-stroke:0;}
  .marquee span .dot{color:var(--purple-bright);-webkit-text-stroke:0;}
  .services .lead{max-width:var(--maxw);margin:0 auto clamp(48px,7vh,80px);padding:0 clamp(20px,4vw,48px);}

  /* work — framed image, background object stays visible around it */
  .work-panel{position:relative;width:100%;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;}
  .wp-frame{position:relative;width:min(54vw,800px);height:min(68vh,600px);margin-right:clamp(20px,5vw,96px);border-radius:11px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 120px rgba(0,0,0,.55);transition:transform .5s var(--ease);transform-style:preserve-3d;will-change:transform;}
  .wp-frame .img{position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:center;transform:scale(1.05);transition:transform .7s var(--ease);}
  .work-panel:hover .wp-frame .img{transform:scale(1.0);}
  .wp-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(0,0,0,.4);pointer-events:none;}
  .wp-frame::before{content:"";position:absolute;inset:0;z-index:2;background:var(--accent);mix-blend-mode:color;opacity:0;transition:opacity .5s;pointer-events:none;}
  .work-panel:not(:hover) .wp-frame::before{opacity:.14;}
  .wp-content{position:absolute;left:clamp(20px,5vw,84px);top:50%;transform:translateY(-50%);max-width:min(40ch,40vw);z-index:4;}
  .wp-idx{font-family:'JetBrains Mono';font-size:12px;color:var(--accent);letter-spacing:.1em;}
  .wp-client{display:block;font-family:'JetBrains Mono';font-size:12px;color:var(--ink-dim);letter-spacing:.08em;margin:14px 0 8px;text-transform:uppercase;}
  .wp-title{font-family:'Syne';font-weight:800;font-size:clamp(34px,5vw,78px);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;}
  .wp-desc{margin-top:18px;max-width:42ch;color:var(--ink-dim);font-size:clamp(14px,1.4vw,18px);font-weight:300;line-height:1.5;}
  .wp-tags{margin-top:18px;font-family:'JetBrains Mono';font-size:12px;color:var(--ink-dim);letter-spacing:.04em;}
  @media (max-width:920px){
    .work-panel{flex-direction:column-reverse;justify-content:center;gap:4vh;padding:13vh clamp(20px,5vw,40px) 15vh;}
    .wp-frame{width:min(88vw,560px);height:36vh;margin:0;}
    .wp-content{position:relative;top:auto;left:auto;transform:none;max-width:100%;}
    .wp-title{font-size:clamp(32px,9vw,56px);}
    .wp-desc{display:none;}
  }
  /* per-slide reveal (driven by .is-shown) */
  .work-panel .wp-frame{opacity:0;transition:opacity .8s var(--ease),transform .5s var(--ease);}
  .work-panel.is-shown .wp-frame{opacity:1;}
  .work-panel .wp-content > *{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
  .work-panel.is-shown .wp-content > *{opacity:1;transform:none;}
  .work-panel.is-shown .wp-content > *:nth-child(1){transition-delay:.14s;}
  .work-panel.is-shown .wp-content > *:nth-child(2){transition-delay:.22s;}
  .work-panel.is-shown .wp-content > *:nth-child(3){transition-delay:.30s;}
  .work-panel.is-shown .wp-content > *:nth-child(4){transition-delay:.38s;}
  .work-panel.is-shown .wp-content > *:nth-child(5){transition-delay:.46s;}

  /* contact */
  .contact{border-top:1px solid var(--line);text-align:center;padding-block:clamp(110px,16vh,220px);position:relative;overflow:hidden;}
  .contact .halo{position:absolute;width:120vw;height:120vw;max-width:1100px;max-height:1100px;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(136,120,184,.24),transparent 60%);pointer-events:none;}
  .contact h2{position:relative;font-family:'Syne';font-weight:800;font-size:clamp(40px,9vw,140px);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;}
  .contact h2 em{font-style:normal;color:var(--purple-bright);}
  .contact .mail{position:relative;display:inline-block;margin-top:38px;font-family:'JetBrains Mono';font-size:clamp(14px,2vw,22px);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--purple);padding-bottom:6px;transition:color .3s,border-color .3s;}
  .contact .mail:hover{color:var(--purple-bright);border-color:var(--purple-bright);}

  /* footer */
  footer{border-top:1px solid var(--line);padding:54px clamp(20px,4vw,48px);}
  .foot-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr;gap:40px;}
  @media(min-width:760px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:48px;} }
  .foot-grid h4{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase;margin-bottom:16px;}
  .foot-grid p,.foot-grid a{color:var(--ink-dim);font-size:14px;font-weight:300;text-decoration:none;display:block;line-height:1.7;transition:color .25s;}
  .foot-grid a:hover{color:var(--purple-bright);}
  .foot-bottom{max-width:var(--maxw);margin:54px auto 0;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:'JetBrains Mono';font-size:11px;color:var(--ink-faint);}

  /* ---- per-section accent (drives the page color shift) ---- */
  :root{--accent:#8878b8;}
  .tint{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--accent);opacity:.11;mix-blend-mode:screen;transition:background .8s var(--ease),opacity .8s;}
  .chapter-tag{color:var(--accent);transition:color .7s var(--ease);}
  .chapter-tag::before{background:var(--accent);transition:background .7s var(--ease);}
  .big-statement em,.hero h1 em,.contact h2 em,.stat .n{color:var(--accent);transition:color .7s var(--ease);}
  .scroll-cue .line{background:linear-gradient(var(--accent),transparent);}
  .contact .mail{border-color:var(--accent);}
  .contact .mail:hover{color:var(--accent);border-color:var(--accent);}

  /* reveal */
  .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
  .reveal.in{opacity:1;transform:none;}
  .reveal.d1{transition-delay:.08s;}.reveal.d2{transition-delay:.16s;}.reveal.d3{transition-delay:.24s;}.reveal.d4{transition-delay:.32s;}
  @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;} .reveal{opacity:1;transform:none;} .work-panel .wp-frame,.work-panel .wp-content>*{opacity:1!important;transform:none!important;} }

  /* ===== opening — sensory boot ===== */
  .pages{opacity:0;}
  body.entered .pages{opacity:1;transition:opacity 1.1s ease .15s;}
  header.nav,.rail{opacity:0;pointer-events:none;}
  body.entered header.nav,body.entered .rail{opacity:1;pointer-events:auto;transition:opacity .9s ease .3s;}
  #intro{position:fixed;inset:0;z-index:600;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,4vw,46px);transition:opacity 1s var(--ease),visibility 1s;}
  body.entered #intro{opacity:0;visibility:hidden;pointer-events:none;}
  #intro .in-top{display:flex;justify-content:space-between;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.12em;color:var(--ink-dim);text-transform:uppercase;}
  #intro .in-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;}
  #intro .in-data{font-family:'JetBrains Mono';font-size:12px;line-height:2.05;color:var(--ink-dim);}
  #intro .in-line{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
  #intro .in-line.on{opacity:1;transform:none;}
  #intro .in-line b{color:var(--ink);font-weight:500;}
  #intro .in-line .k{color:var(--purple-bright);}
  #intro .in-count{text-align:right;}
  #intro .in-pct{font-family:'Syne';font-weight:800;font-size:clamp(58px,12vw,150px);line-height:.85;color:var(--ink);letter-spacing:-.03em;}
  #intro .in-pct::after{content:"%";font-size:.38em;color:var(--purple-bright);vertical-align:super;margin-left:.08em;}
  #intro .in-sub{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase;margin-top:8px;}
  #intro.ready .in-sub{color:var(--purple-bright);}
  #intro .in-bar{position:absolute;left:0;bottom:0;width:100%;height:2px;background:rgba(136,120,184,.15);}
  #intro .in-bar i{display:block;height:100%;width:100%;background:var(--purple-bright);transform:scaleX(0);transform-origin:left;}
  #intro .in-enter{position:absolute;left:50%;bottom:clamp(58px,11vh,108px);transform:translateX(-50%);font-family:'JetBrains Mono';font-size:12px;letter-spacing:.22em;color:var(--ink);text-transform:uppercase;opacity:0;transition:opacity .6s;display:flex;align-items:center;gap:11px;cursor:none;white-space:nowrap;}
  #intro.ready .in-enter{opacity:1;animation:inpulse 2s infinite;}
  #intro .in-enter .dot{width:7px;height:7px;border-radius:50%;background:var(--purple-bright);}
  @keyframes inpulse{0%,100%{opacity:.5;}50%{opacity:1;}}
  @media (max-width:640px){ #intro .in-bottom{flex-direction:column;align-items:flex-start;} #intro .in-count{align-self:flex-end;text-align:right;} }


  html,body{height:100%;}
  body{overflow:hidden;}
  .pages{position:relative;z-index:1;transition:transform 1s cubic-bezier(.83,0,.17,1);will-change:transform;}
  .page{position:relative;width:100vw;height:100svh;display:flex;align-items:center;overflow-y:auto;overflow-x:hidden;padding:0 clamp(20px,4vw,48px);}
  .page::-webkit-scrollbar{width:0;height:0;}
  .page>.wrap,.page>.lead{width:100%;max-width:var(--maxw);margin:0 auto;}
  .page.hero,.page.work{overflow:hidden;padding:0;align-items:stretch;}
  .page.hero{flex-direction:column;justify-content:center;}
  .page.hero .hero-inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px);}
  .manifesto,.services,.contact{padding:0!important;border-top:0!important;}
  .page .big-statement{font-size:clamp(28px,4.6vw,66px);}
  .manifesto .mani-grid{margin-top:clamp(22px,4vh,44px);gap:clamp(28px,4vw,70px);}
  .manifesto .stat{padding:clamp(11px,1.9vh,20px) 0;}
  .page.services{flex-direction:column;justify-content:center;gap:clamp(28px,6vh,62px);}
  .page.services .lead{margin:0 auto;}
  /* work carousel */
  .page.work{align-items:stretch;}
  .carousel{display:flex;width:100%;height:100%;transition:transform .85s cubic-bezier(.83,0,.17,1);will-change:transform;}
  .carousel>.work-panel{flex:0 0 100%;min-width:100%;height:100%;}
  .wp-label{position:absolute;z-index:6;top:clamp(78px,12vh,118px);left:clamp(20px,4vw,48px);font-family:'JetBrains Mono';font-size:12px;letter-spacing:.1em;color:#fff;display:flex;align-items:center;gap:10px;}
  .wp-label::before{content:"";width:24px;height:1px;background:var(--accent);transition:background .6s;}
  .car-dots{position:absolute;z-index:6;bottom:clamp(38px,7vh,70px);left:50%;transform:translateX(-50%);display:flex;gap:9px;}
  .car-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);cursor:none;transition:background .4s,width .4s;}
  .car-dots i.on{background:var(--accent);width:24px;border-radius:4px;}
  .car-nav{position:absolute;z-index:6;bottom:clamp(32px,6.4vh,64px);right:clamp(20px,4vw,48px);display:flex;align-items:center;gap:14px;}
  .car-count{font-family:'JetBrains Mono';font-size:13px;color:#fff;letter-spacing:.12em;}
  .car-count b{color:var(--accent);}
  .car-btn{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:none;display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,transform .15s,color .3s;}
  .car-btn:hover{background:var(--accent);border-color:var(--accent);color:#0a0a0f;}
  .car-btn:active{transform:scale(.9);}
  .car-btn svg{width:22px;height:22px;}
  /* contact + folded footer */
  .page.contact{flex-direction:column;justify-content:center;text-align:center;}
  .in-contact{position:absolute;bottom:0;left:0;width:100%;padding:24px clamp(20px,4vw,48px)!important;border-top:1px solid var(--line);}
  .in-contact .foot-grid{gap:24px;}
  .in-contact h4{margin-bottom:8px;}
  .in-contact .foot-bottom{margin-top:18px;padding-top:14px;}
  @media (max-width:760px){
    .in-contact{position:relative;}
    .page.contact{justify-content:flex-start;padding-top:13vh;gap:6vh;}
  }