@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=DM+Sans:wght@400;500;600&family=Cormorant+Garamond:ital,wght@1,400;1,500&display=swap');

  :root{
    --paper:#F3F1EB;
    --paper-dim:#E6E3D9;
    --ink:#050505;
    --ink-2:#0D0D0D;
    --line: rgba(3,3,3,0.16);
    --line-soft: rgba(248,247,242,0.18);
    --muted:#5C594F;
    --muted-2:#A6A296;
    --lime:#E4FF3B;
    --lime-dim:#AACC1F;
    --off:#F8F7F2;
    --radius:2px;
    --disp: 'Space Grotesk', 'Arial Black', sans-serif;
    --body: 'DM Sans', -apple-system, sans-serif;
    --ed: 'Cormorant Garamond', Georgia, serif;
  }

  *{box-sizing:border-box;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    cursor:default;
  }
  ::selection{background:var(--ink);color:var(--lime);}
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}
  button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;}
  h1,h2,h3,p{margin:0;}
  section{position:relative;padding-inline: clamp(20px, 6vw, 88px);}
  .eyebrow{
    font-family:var(--body); font-weight:600; font-size:12px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:'';width:22px;height:2px;background:var(--lime);display:inline-block;}
  .dark .eyebrow{color:var(--muted-2);}

  /* reveal */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);}
  .reveal.is-visible{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} }
  .scene-wipe{clip-path:inset(0 0 100% 0); transition:clip-path 1.15s cubic-bezier(.16,.8,.24,1);}
  .scene-wipe.is-visible{clip-path:inset(0 0 0% 0);}
  @media (prefers-reduced-motion: reduce){ .scene-wipe{clip-path:none; transition:none;} }
  .head-reveal{
    opacity:0; transform:translateY(85px) scale(.94); filter:blur(16px);
    transition:opacity 1.15s cubic-bezier(.16,.8,.24,1), transform 1.15s cubic-bezier(.16,.8,.24,1), filter 1s ease-out;
    will-change:transform, opacity, filter;
  }
  .head-reveal.is-visible{opacity:1; transform:none; filter:blur(0);}
  @media (prefers-reduced-motion: reduce){ .head-reveal{opacity:1;transform:none;filter:none;transition:none;} }


  /* ---------- loader ---------- */
  #loader{
    position:fixed; inset:0; z-index:999; background:var(--ink); color:var(--off);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
    transition:opacity .6s ease, visibility .6s ease; overflow:hidden;
  }
  #loader.done{opacity:0; visibility:hidden; pointer-events:none;}
  #loader::before{content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at center, rgba(5,5,5,0) 0%, var(--ink) 76%); pointer-events:none;}
  #loader .mark, #loader .bar, #loader .tag{position:relative; z-index:2;}
  #loader .mark{font-family:var(--disp); font-weight:800; font-size:clamp(28px,6vw,44px); letter-spacing:-.01em;}
  #loader .bar{width:160px; height:2px; background:rgba(246,245,241,.2); overflow:hidden;}
  #loader .bar i{display:block; height:100%; width:0%; background:var(--lime); animation:load 2.6s cubic-bezier(.6,0,.2,1) forwards;}
  @keyframes load{to{width:100%;}}
  #loader .tag{font-size:11px; letter-spacing:.3em; color:var(--muted-2); text-transform:uppercase;}


  /* ---------- custom cursor ---------- */
  #cursor{
    position:fixed; top:0; left:0; width:14px; height:14px; border-radius:50%;
    background:var(--lime); mix-blend-mode:difference; pointer-events:none; z-index:998;
    transform:translate(-50%,-50%); transition:width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1), background .25s ease;
    display:flex; align-items:center; justify-content:center;
  }
  #cursor span{
    opacity:0; font-family:var(--body); font-weight:600; font-size:11px; letter-spacing:.08em;
    color:var(--ink); white-space:nowrap; transition:opacity .2s ease;
  }
  #cursor.grow{width:86px;height:86px; background:var(--off);}
  #cursor.grow span{opacity:1;}
  @media (pointer:coarse){ #cursor{display:none;} }

  /* ---------- nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:200;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px clamp(20px,6vw,48px);
    padding-top:calc(22px + env(safe-area-inset-top, 0px));
    color:var(--off); mix-blend-mode:difference;
    transition:padding .35s ease;
  }
  header.scrolled{padding-top:calc(14px + env(safe-area-inset-top,0px)); padding-bottom:14px;}
  .logo{font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:-.01em;}
  nav.desktop-nav{display:flex; align-items:center; gap:34px;}
  nav.desktop-nav a{font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; position:relative;}
  nav.desktop-nav a:not(.talk)::after{
    content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:currentColor;
    transform:scaleX(0); transform-origin:right; transition:transform .35s cubic-bezier(.2,.8,.2,1);
  }
  nav.desktop-nav a:not(.talk):hover::after{transform:scaleX(1); transform-origin:left;}
  .talk{border:1px solid currentColor; padding:9px 16px; font-size:12px; font-weight:600; letter-spacing:.08em; transition:background .3s ease, color .3s ease, border-color .3s ease;}
  nav.desktop-nav .talk:hover{background:var(--lime); color:var(--ink); border-color:var(--lime);}
  .burger{display:none; flex-direction:column; gap:5px; width:26px;}
  .burger i{height:2px; background:currentColor; display:block;}
  @media (max-width:860px){
    nav.desktop-nav{display:none;}
    .burger{display:flex;}
  }
  #mobile-menu{
    position:fixed; inset:0; background:var(--ink); color:var(--off); z-index:190;
    display:flex; flex-direction:column; justify-content:center; gap:22px; padding:20px 28px;
    transform:translateY(-100%); transition:transform .55s cubic-bezier(.7,0,.2,1);
  }
  #mobile-menu.open{transform:translateY(0);}
  #mobile-menu a{font-family:var(--disp); font-size:clamp(32px,13vw,64px); font-weight:700; line-height:1;}
  #mobile-menu .talk{align-self:flex-start; margin-top:20px;}

  /* ---------- hero ---------- */
  #hero{
    min-height:100svh; background:var(--ink); color:var(--off);
    display:flex; flex-direction:column; justify-content:flex-end; gap:34px;
    padding-bottom:56px; padding-top:130px;
    position:relative; isolation:isolate; overflow:hidden;
  }
#hero .hero-slides{
    position:absolute; inset:0; z-index:-3; display:flex; width:200%; height:100%;
    transition:transform .65s cubic-bezier(.4,0,.2,1);
  }
  #hero .hero-slide{position:relative; flex:0 0 50%; width:50%; height:100%; overflow:hidden;}
  #hero .bg-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
  #hero .hero-dots{
    position:absolute; bottom:118px; left:50%; transform:translateX(-50%); z-index:5;
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  #hero .swipe-bar{display:flex; gap:6px;}
  #hero .hero-dot{
    width:34px; height:4px; border-radius:2px; background:rgba(246,245,241,.28); border:none;
    cursor:pointer; padding:0; overflow:hidden; position:relative; transition:background .3s ease;
  }
  #hero .hero-dot::after{
    content:''; position:absolute; inset:0; background:var(--lime); border-radius:2px;
    transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.4,0,.2,1);
  }
  #hero .hero-dot.active::after{transform:scaleX(1);}
  #hero .swipe-label{
    display:flex; align-items:center; gap:8px; color:var(--muted-2); font-size:10px;
    letter-spacing:.28em; text-transform:uppercase;
  }
  #hero .swipe-label svg{width:22px; height:12px; animation:swipeNudge 1.6s ease-in-out infinite;}
  @keyframes swipeNudge{
    0%,100%{transform:translateX(0); opacity:.55;}
    50%{transform:translateX(5px); opacity:1;}
  }
  @media (max-width:767px){ #hero .hero-dots{bottom:150px;} }
  #hero .field{
    position:absolute; inset:0; z-index:-2;
    background-size:cover; background-position:center;
  }
  #hero .field::before{
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(ellipse 70% 55% at 78% 18%, rgba(228,255,59,.20), transparent 60%),
      radial-gradient(ellipse 60% 60% at 10% 90%, rgba(228,255,59,.10), transparent 65%),
      linear-gradient(rgba(3,3,3,.72), rgba(3,3,3,.86));
  }
  #hero .field::after{
    content:''; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  }
  #hero .detail-label{
    position:absolute; z-index:1; font-family:var(--body); font-weight:600; font-size:11px;
    letter-spacing:.2em; text-transform:uppercase; color:rgba(248,247,242,.55);
  }
    #hero .float-word{
    position:absolute; font-family:var(--disp); font-weight:700; color:rgba(246,245,241,.06);
    font-size:clamp(40px,9vw,120px); letter-spacing:-.02em; user-select:none; z-index:-1;
  }
  #hero .headline{font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:.92; font-size:clamp(46px,9.2vw,132px);}
  #hero .headline .line{overflow:hidden; display:block;}
  #hero .headline span{
    display:block; transform:translateY(110%);
    animation: riseline .9s cubic-bezier(.2,.9,.15,1) forwards, headlineColor 6s ease-in-out infinite;
  }
  #hero .headline .line:nth-child(1) span{animation-delay:.15s, 1s;}
  #hero .headline .line:nth-child(2) span{animation-delay:.28s, 1.6s;}
  #hero .headline .line:nth-child(3) span{animation-delay:.41s, 2.2s;}
  @keyframes headlineColor{
    0%, 100%{color:var(--off);}
    50%{color:var(--lime);}
  }
  @media (prefers-reduced-motion: reduce){ #hero .headline span{animation:riseline .9s cubic-bezier(.2,.9,.15,1) forwards;} }
  @keyframes riseline{to{transform:translateY(0);}}
  #hero .sub{max-width:520px; font-size:clamp(15px,1.6vw,18px); color:var(--muted-2); line-height:1.5;}
  #hero .ctas{display:flex; flex-wrap:wrap; gap:16px; margin-top:6px;}
  .btn{
    display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase; padding:16px 26px; border-radius:999px;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease;
  }
  .btn-solid{background:var(--lime); color:var(--ink); box-shadow:0 14px 30px -10px rgba(228,255,59,.45);}
  .btn-solid:hover{transform:translateY(-3px); box-shadow:0 18px 36px -8px rgba(228,255,59,.6);}
  .btn-line{border:1px solid var(--line-soft); color:var(--off);}
  .btn-line:hover{background:var(--off); color:var(--ink); transform:translateY(-3px);}
  .dark .btn-line{border-color:var(--line-soft);}
  .light-sec .btn-line{border:1px solid var(--line); color:var(--ink);}
  .light-sec .btn-line:hover{background:var(--ink); color:var(--off);}
  #hero .scroll-cue{position:absolute; right:clamp(20px,6vw,48px); bottom:28px; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted-2); font-size:11px; letter-spacing:.2em;}
  #hero .scroll-cue i{width:1px; height:44px; background:linear-gradient(var(--lime), transparent); display:block; animation:pulse 1.8s ease-in-out infinite;}

  #sound-toggle{
    position:absolute; left:clamp(20px,6vw,88px); bottom:28px; z-index:2;
    display:flex; align-items:center; gap:10px; color:var(--off); padding:10px 16px;
    border:1px solid var(--line-soft); border-radius:999px; background:rgba(3,3,3,.35);
    backdrop-filter:blur(6px); transition:background .3s ease, border-color .3s ease, transform .3s ease;
  }
  #sound-toggle:hover{background:var(--lime); color:var(--ink); border-color:var(--lime); transform:translateY(-2px);}
  #sound-toggle svg{width:16px; height:16px;}
  #sound-toggle span{font-size:11px; font-weight:600; letter-spacing:.12em;}
  @media (max-width:600px){ #sound-toggle{left:20px; bottom:20px; padding:8px 12px;} }

  @keyframes pulse{0%,100%{opacity:.4;}50%{opacity:1;}}

  /* ---------- marquee ---------- */
  .marquee-wrap{background:var(--paper); border-block:1px solid var(--line); padding-block:26px;}
  .marquee-wrap .eyebrow{padding-inline:clamp(20px,6vw,88px); margin-bottom:18px;}
  .marquee{display:flex; overflow:hidden; user-select:none;}
  .marquee .track{display:flex; gap:64px; flex-shrink:0; animation:scroll 32s linear infinite; padding-right:64px;}
  .marquee:hover .track{animation-play-state:paused;}
  @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-100%);}}
  .marquee .track span{
    font-family:var(--disp); font-weight:700; font-size:clamp(22px,3.4vw,38px); color:var(--ink);
    opacity:.28; white-space:nowrap; letter-spacing:-.01em;
  }

  /* ---------- generic section paddings ---------- */
  .py{padding-block:clamp(70px,11vw,140px);}
  .dark{background:var(--ink); color:var(--off);}
  .bg-photo{background-size:cover; background-position:center; position:relative; isolation:isolate;}
  .bg-photo::before{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(3,3,3,.88), rgba(3,3,3,.7) 40%, rgba(3,3,3,.92));}
  .light-sec{background:var(--paper);}
  .dim{background:var(--paper-dim);}

  /* ---------- intro: cinematic What We Do experience ---------- */
  #intro .row{display:flex; gap:60px; margin-top:44px; flex-wrap:wrap;}
  #intro p.copy{max-width:420px; font-size:16px; line-height:1.7; color:var(--muted);}

  .wwd-toggle-hint{
    display:inline-flex; align-items:center; gap:12px; margin-top:36px; padding:15px 28px; border-radius:999px;
    border:1px solid var(--ink); background:none; color:var(--ink); font-family:var(--disp); font-weight:700;
    font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:all .3s ease;
  }
  .wwd-toggle-hint:hover{background:var(--ink); color:var(--lime);}
  .wwd-toggle-hint .wth-icon{font-size:17px; line-height:1; transition:transform .35s cubic-bezier(.2,.8,.2,1);}
  #intro.is-open .wwd-toggle-hint .wth-icon{transform:rotate(45deg);}

  .wwd-body-wrap{display:none; opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease;}
  .wwd-body-wrap.in{opacity:1; transform:translateY(0);}
  .wwd-body-wrap > *:first-child{margin-top:70px;}

  .kinetic-wrap{position:relative; min-height:clamp(160px,24vw,300px); margin-top:8px;}
  .kinetic-line{
    position:absolute; inset:0; display:flex; align-items:center;
    font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:.98;
    font-size:clamp(30px,6vw,76px);
  }
  .kinetic-out{opacity:1; transform:none; filter:blur(0px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1), filter 1s ease;}
  .kinetic-in{opacity:0; transform:translateY(26px) scale(.97); transition:opacity 1s ease .25s, transform 1s cubic-bezier(.2,.8,.2,1) .25s;}
  .kinetic-in em{font-family:var(--ed); font-style:italic; font-weight:500; color:var(--lime-dim); letter-spacing:0;}
  .kinetic-wrap.activated .kinetic-out{opacity:0; transform:scaleX(1.12) translateX(-24px); filter:blur(5px);}
  .kinetic-wrap.activated .kinetic-in{opacity:1; transform:translateY(0) scale(1);}

  .cinematic-reveal{
    position:relative; margin-top:70px; aspect-ratio:21/9; border-radius:var(--radius); overflow:hidden;
    opacity:0; transform:scale(1.06); transition:opacity 1.1s ease, transform 1.3s cubic-bezier(.16,.8,.24,1);
  }
  .cinematic-reveal.is-visible{opacity:1; transform:scale(1);}
  .cinematic-reveal img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .cinematic-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,3,3,0) 40%, rgba(3,3,3,.6));}
  .cinematic-label{position:absolute; left:24px; bottom:20px; color:var(--off); font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase;}

  .presence-engine{margin-top:96px; opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);}
  .presence-engine.is-visible{opacity:1; transform:none;}
  .pe-head p{color:var(--muted); font-size:14px; margin-top:8px;}
  .presence-diagram{position:relative; height:380px; display:flex; align-items:center; justify-content:center; margin-top:44px;}
  .pe-center{
    position:relative; z-index:2; width:150px; height:150px; border-radius:50%; background:var(--ink); color:var(--lime);
    display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--disp); font-weight:800;
    font-size:15px; letter-spacing:.02em; line-height:1.25; box-shadow:0 0 0 1px var(--line);
  }
  .pe-node{
    position:absolute; top:50%; left:50%; transform:rotate(var(--a)) translate(170px) rotate(calc(-1 * var(--a)));
    padding:12px 22px; border:1px solid var(--line); border-radius:999px; font-family:var(--disp); font-weight:700;
    font-size:13px; letter-spacing:.03em; text-transform:uppercase; background:var(--paper); cursor:pointer;
    transition:all .3s ease;
  }
  .pe-node:hover, .pe-node.active{background:var(--lime); border-color:var(--lime); color:var(--ink); transform:rotate(var(--a)) translate(170px) rotate(calc(-1 * var(--a))) scale(1.08);}
  .pe-detail{margin-top:36px; max-width:600px; border-top:1px solid var(--line); padding-top:22px;}
  .ped-title{font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:-.01em; color:var(--lime-dim);}
  .ped-body{color:var(--muted); font-size:14.5px; line-height:1.65; margin-top:8px;}

  .project-switcher{margin-top:96px; opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);}
  .project-switcher.is-visible{opacity:1; transform:none;}
  .ps-filters{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
  .ps-filter{
    padding:9px 18px; border:1px solid var(--line); border-radius:999px; background:none; cursor:pointer;
    font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--muted); transition:all .25s ease;
  }
  .ps-filter:hover{border-color:var(--ink); color:var(--ink);}
  .ps-filter.active{background:var(--ink); border-color:var(--ink); color:var(--lime);}
  .ps-display{position:relative; margin-top:28px; aspect-ratio:16/9; max-width:760px; border-radius:var(--radius); overflow:hidden; background:var(--ink);}
  .ps-display img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease;}
  .ps-display img.active{opacity:1;}
  .ps-display-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,3,3,0) 55%, rgba(3,3,3,.65)); pointer-events:none;}
  .ps-display-label{position:absolute; left:20px; bottom:16px; color:var(--off); font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.04em; z-index:2;}

  @media(max-width:720px){
    .presence-diagram{height:auto; flex-wrap:wrap; gap:10px; padding:20px 0;}
    .pe-node{position:static; transform:none !important;}
    .pe-center{margin:0 auto 12px;}
  }


  /* ---------- what we do: image stack ---------- */
  .image-stack-block{margin-top:96px;}
  .image-stack-block p.stack-note{color:var(--muted); font-size:14px; margin-top:8px;}
  .image-stack{position:relative; height:340px; max-width:420px; margin-top:40px;}
  .stack-card{
    position:absolute; top:0; left:0; width:100%; height:100%; border-radius:var(--radius); overflow:hidden;
    box-shadow:0 20px 40px rgba(0,0,0,.28); cursor:pointer; transition:transform .5s cubic-bezier(.16,.8,.24,1), opacity .5s ease;
  }
  .stack-card img{width:100%; height:100%; object-fit:cover; display:block;}
  .stack-card-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,3,3,0) 55%, rgba(3,3,3,.68));}
  .stack-card-label{position:absolute; left:18px; bottom:14px; color:#fff; font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.04em;}

  /* ---------- what we do: before / after concept slider ---------- */
  .ba-block{margin-top:96px;}
  .ba-block p.ba-caption{color:var(--muted-2); font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; margin-top:6px;}
  .ba-slider{position:relative; margin-top:32px; max-width:640px; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); user-select:none;}
  .ba-after, .ba-before{position:absolute; inset:0;}
  .ba-before{width:50%; overflow:hidden; border-right:2px solid var(--lime);}
  .ba-mock{position:relative; width:100%; height:100%; background:var(--paper);}
  .ba-before .ba-mock{width:200%;}
  .ba-mock-head{display:flex; gap:5px; padding:12px 14px;}
  .ba-mock-head span{width:8px; height:8px; border-radius:50%; background:var(--line);}
  .ba-mock-body{display:flex; gap:8px; padding:0 14px 14px;}
  .ba-post{flex:1; aspect-ratio:1/1; border-radius:6px; background:linear-gradient(135deg, var(--lime), #b7d92a);}
  .ba-post.dim{background:var(--line-soft);}
  .ba-tag{position:absolute; left:14px; bottom:14px; font-family:var(--disp); font-weight:800; font-size:10.5px; letter-spacing:.06em; color:var(--muted-2);}
  .ba-mock-after-body .ba-post{background:linear-gradient(135deg, var(--lime), #b7d92a);}
  .ba-handle{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%;
    background:var(--ink); color:var(--lime); display:flex; align-items:center; justify-content:center; font-size:16px;
    cursor:ew-resize; z-index:3; box-shadow:0 0 0 3px var(--paper);
  }

  /* ---------- what we do: creative pipeline (auto-animated) ---------- */
  .pipeline-block{margin-top:96px;}
  #wwd-pipeline{margin-top:32px;}
  #wwd-pipeline .pipe-bar{height:2px; background:var(--line-soft); flex:0 0 100%; margin:16px 0 0; position:relative; overflow:hidden; border-radius:2px;}
  #wwd-pipeline .pipe-bar-fill{position:absolute; inset:0 100% 0 0; background:var(--lime); transition:right 1.4s cubic-bezier(.4,0,.2,1);}

  /* ---------- what we do: growth graph ---------- */
  .growth-block{margin-top:96px;}
  .growth-graph{display:block; width:100%; max-width:620px; height:auto; margin-top:24px;}
  #growth-path{stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset 1.8s cubic-bezier(.16,.8,.24,1);}
  .growth-block.is-visible #growth-path{stroke-dashoffset:0;}

  @media(max-width:640px){
    .image-stack{max-width:100%;}
    .ba-slider{max-width:100%;}
  }

  /* ---------- typographic breaks ---------- */
  .type-break{text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px;}
  .type-break h2{font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:.98; font-size:clamp(38px,7.4vw,108px);}
  #attention h2{animation:attnZoom 3.6s ease-in-out infinite; transform-origin:center;}
  @keyframes attnZoom{
    0%, 100%{transform:scale(1);}
    50%{transform:scale(1.1);}
  }
  @media (prefers-reduced-motion: reduce){ #attention h2{animation:none;} }
  .type-break.dark h2 em, .type-break h2 em{font-family:var(--ed); font-style:italic; font-weight:500; color:var(--lime); letter-spacing:0;}
  #content-break .type-break h2 em{color:var(--lime-dim);}
  .type-break p.lede{font-family:var(--ed); font-style:italic; font-size:clamp(16px,2vw,22px); color:var(--muted-2); margin-top:14px;}
  .light-sec .type-break p.lede{color:var(--muted);}

  /* ---------- services ---------- */
  #service-list{
    max-height:640px; overflow-y:auto; scroll-behavior:smooth; padding-right:10px;
    -webkit-overflow-scrolling:touch;
  }
  #service-list::-webkit-scrollbar{width:5px;}
  #service-list::-webkit-scrollbar-track{background:rgba(3,3,3,.06);}
  #service-list::-webkit-scrollbar-thumb{background:var(--ink); border-radius:3px;}
  .services-scroll-wrap{position:relative;}
  .services-scroll-wrap::after{
    content:''; position:absolute; left:0; right:10px; bottom:0; height:64px; pointer-events:none;
    background:linear-gradient(to bottom, transparent, var(--paper) 88%);
  }
  .service-row{
    border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;
    padding:30px 4px; cursor:pointer; gap:24px; position:relative;
  }
  .service-row:last-child{border-bottom:1px solid var(--line);}
  .service-row .num{font-family:var(--disp); font-weight:700; font-size:14px; color:var(--lime-dim); width:34px;}
  .service-row .name{font-family:var(--disp); font-weight:700; font-size:clamp(24px,4vw,52px); letter-spacing:-.02em; transition:transform .4s cubic-bezier(.2,.8,.2,1), color .4s ease; flex:1;}
  .service-row .tags{font-size:13px; color:var(--muted); max-width:280px; text-align:right; display:none;}
  .service-row .arrow{font-size:20px; transition:transform .4s ease;}
  .service-row:hover .name, .service-row.active .name{transform:translateX(14px); color:var(--lime-dim);}
  .service-row:hover .arrow, .service-row.active .arrow{transform:rotate(45deg);}
  .service-row .detail{
    max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.2,.8,.2,1);
    flex-basis:100%;
  }
  .service-row.active .detail{max-height:140px;}
  .service-row .detail p{padding-top:16px; max-width:640px; color:var(--muted); font-size:15px; line-height:1.6;}
  @media (min-width:720px){ .service-row .tags{display:block;} }

  /* ---------- service preview ---------- */
  #service-preview{
    position:fixed; top:0; left:0; width:200px; height:280px; border-radius:6px; overflow:hidden;
    pointer-events:none; z-index:150; opacity:0; transform:translate(-50%,-50%) scale(.94);
    transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  }
  #service-preview.show{opacity:1; transform:translate(-50%,-50%) scale(1);}
  #service-preview img{width:100%; height:100%; object-fit:cover; display:block;}
  #service-preview .sp-shade{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.6), transparent 55%);}
  #service-preview .sp-label{position:absolute; left:14px; bottom:12px; color:#fff; font-size:11px; letter-spacing:.14em; text-transform:uppercase;}
  @media (max-width:860px){ #service-preview{display:none;} }

  /* ---------- gallery hover pop preview ---------- */
  #gallery-preview{
    position:fixed; top:0; left:0; width:230px; height:230px; border-radius:8px; overflow:hidden;
    pointer-events:none; z-index:150; opacity:0; transform:translate(-50%,-50%) scale(.8) rotate(-3deg);
    transition:opacity .3s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
  }
  #gallery-preview.show{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg);}
  #gallery-preview img{width:100%; height:100%; object-fit:cover; display:block;}
  #gallery-preview .sp-shade{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.6), transparent 55%);}
  #gallery-preview .sp-label{position:absolute; left:12px; bottom:10px; color:#fff; font-size:10px; letter-spacing:.14em; text-transform:uppercase;}
  @media (max-width:860px){ #gallery-preview{display:none;} }

  /* ---------- cursor magnifier ---------- */
  #magnifier{
    position:fixed; top:0; left:0; width:130px; height:130px; border-radius:50%;
    border:2px solid var(--lime); pointer-events:none; z-index:210; opacity:0;
    transform:translate(-50%,-50%) scale(.85); transition:opacity .25s ease, transform .25s ease;
    background-repeat:no-repeat; background-color:#000; box-shadow:0 14px 34px rgba(0,0,0,.45);
  }
  #magnifier.show{opacity:1; transform:translate(-50%,-50%) scale(1);}
  @media (pointer:coarse){ #magnifier{display:none;} }

  /* ---------- work grid ---------- */
  .work-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-top:22px; margin-bottom:56px;}
  .work-head h2{font-family:var(--disp); font-weight:800; font-size:clamp(38px,6.6vw,92px); letter-spacing:-.03em; line-height:.95;}
  .work-head p{max-width:280px; font-family:var(--ed); font-style:italic; font-size:22px; color:var(--muted);}
  .work-scroll-wrap{position:relative;}
  .grid-work{
    display:flex; gap:18px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding-bottom:14px; cursor:grab;
  }
  .grid-work.dragging{cursor:grabbing; scroll-snap-type:none;}
  .grid-work::-webkit-scrollbar{height:5px;}
  .grid-work::-webkit-scrollbar-track{background:rgba(3,3,3,.06);}
  .grid-work::-webkit-scrollbar-thumb{background:var(--ink); border-radius:3px;}
  .work-scroll-wrap::after{
    content:''; position:absolute; top:0; right:0; bottom:14px; width:80px; pointer-events:none;
    background:linear-gradient(to right, transparent, var(--paper) 92%);
  }
  .proj{flex:0 0 auto; width:min(380px,72vw); scroll-snap-align:start;}
  @media (max-width:600px){ .proj{width:80vw;} }
  .proj{position:relative; border-radius:var(--radius); overflow:hidden;}
  .proj .media{aspect-ratio:4/5; position:relative; overflow:hidden;}
  .proj .media .grain{position:absolute; inset:0; opacity:.4; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
  .proj .media .num{position:absolute; top:18px; left:18px; font-family:var(--disp); font-weight:800; font-size:13px; color:rgba(255,255,255,.7); letter-spacing:.1em;}
  .proj .media .cat{position:absolute; top:18px; right:18px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7);}
  .proj .media .title{position:absolute; left:18px; right:18px; bottom:20px; color:#fff; font-family:var(--disp); font-weight:800; font-size:clamp(22px,2.6vw,34px); letter-spacing:-.02em; transition:transform .5s cubic-bezier(.2,.8,.2,1);}
  .proj .media img.zoomsim{position:absolute; inset:-6%; transition:transform .8s cubic-bezier(.2,.8,.2,1);}
  .proj:hover .media img.zoomsim{transform:scale(1.08);}
  .proj:hover .media .title{transform:translateY(-6px);}
  .proj .meta{display:flex; justify-content:space-between; padding:14px 2px; font-size:13px; color:var(--muted);}
  .proj .meta .arrow{transition:transform .35s ease;}
  .proj-sound{
    position:absolute; right:14px; bottom:14px; z-index:2; width:32px; height:32px; border-radius:50%;
    background:rgba(3,3,3,.5); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
    color:#fff; transition:background .3s ease, transform .3s ease;
  }
  .proj-sound:hover{background:var(--lime); color:var(--ink); transform:scale(1.08);}
  .proj-sound svg{width:15px; height:15px;}

  .proj:hover .meta .arrow{transform:translate(4px,-4px);}

  /* ---------- AI video work ---------- */
  .ai-video-frame{
    position:relative; margin-top:40px; width:100%; max-width:none; aspect-ratio:16/9; border-radius:var(--radius);
    overflow:hidden; cursor:pointer; background:#000;
  }
  .ai-video-frame video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .ai-video-frame .shade{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 45%);}
  .ai-video-frame .grain{position:absolute; inset:0; opacity:.35; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  }
  .ai-tag{position:absolute; left:16px; bottom:16px; z-index:2; color:#fff; font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.85;}
  @media (max-width:600px){ .ai-video-frame{aspect-ratio:16/10;} }


  /* ---------- case study ---------- */
  #case{display:grid; grid-template-columns:1fr; gap:32px;}
  .cs-brand-tabs{display:flex; flex-wrap:wrap; gap:10px;}
  .cs-brand-tab{
    padding:9px 18px; border:1px solid var(--line); border-radius:999px; background:none; cursor:pointer;
    font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--muted); transition:all .25s ease;
  }
  .cs-brand-tab:hover{border-color:var(--ink); color:var(--ink);}
  .cs-brand-tab.active{background:var(--ink); border-color:var(--ink); color:var(--lime);}
  #case .cs-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start;}
  #case .cs-img{position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5;}
  #case .cs-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  #case .cs-img .shade{position:absolute; inset:0; background:linear-gradient(160deg, rgba(3,3,3,.15), rgba(3,3,3,.55));}
  @media (max-width:860px){ #case .cs-grid{grid-template-columns:1fr;} }
  #case .cs-head{font-family:var(--disp); font-weight:800; font-size:clamp(36px,6vw,84px); letter-spacing:-.03em; line-height:.96;}
  #case .cs-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:28px; margin-top:38px; border-top:1px solid var(--line-soft); padding-top:28px;}
  #case .cs-meta .lbl{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-2); margin-bottom:8px;}
  #case .cs-meta .val{font-weight:600; font-size:15px;}
  .stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:24px; margin-top:20px;}
  .stat{border-left:1px solid var(--line-soft); padding-left:18px;}
  .stat .n{font-family:var(--disp); font-weight:800; font-size:clamp(36px,5vw,58px); color:var(--lime-dim); letter-spacing:-.02em;}
  .stat .l{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-top:6px;}
  .demo-flag{display:inline-block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); border:1px solid var(--line-soft); padding:4px 10px; border-radius:999px; margin-top:26px;}
  .light-sec .demo-flag{color:var(--muted); border-color:var(--line);}

  /* ---------- showreel ---------- */
  .reel{position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; margin-top:40px; cursor:pointer;}
  .reel .bg{position:absolute; inset:0; background:
      radial-gradient(circle at 30% 30%, rgba(214,255,63,.18), transparent 55%),
      linear-gradient(135deg,#0b0b0a,#1c1c18 60%,#2a2a1c);}
  .reel .grain{position:absolute; inset:0; opacity:.35; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
  .reel .label{position:absolute; top:24px; left:24px; color:var(--off); font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.05em;}
  .reel .label small{display:block; font-weight:400; color:var(--muted-2); font-size:11px; margin-top:4px; letter-spacing:.15em;}
  .reel .play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:96px; height:96px; border-radius:50%; border:1px solid rgba(246,245,241,.5);
    display:flex; align-items:center; justify-content:center; color:var(--off);
    transition:transform .4s cubic-bezier(.2,.8,.2,1), background .4s ease;
  }
  .reel:hover .play{transform:translate(-50%,-50%) scale(1.12); background:var(--lime); border-color:var(--lime); color:var(--ink);}
  .reel .play svg{width:22px;height:22px;}

  /* ---------- why: cinematic chapter experience ---------- */
  .why-experience{position:relative;}
  .why-intro{max-width:900px;}
  .why-lede{font-family:var(--disp); font-weight:700; font-size:clamp(22px,3vw,34px); letter-spacing:-.01em; line-height:1.25; margin-top:28px;}
  .why-sub{color:var(--muted-2); font-size:15px; line-height:1.7; max-width:640px; margin-top:20px;}

  .why-toggle-hint{
    display:inline-flex; align-items:center; gap:12px; margin-top:36px; padding:15px 28px; border-radius:999px;
    border:1px solid var(--lime); background:none; color:var(--lime); font-family:var(--disp); font-weight:700;
    font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:all .3s ease;
  }
  .why-toggle-hint:hover{background:var(--lime); color:var(--ink);}
  .why-toggle-hint .wth-icon{font-size:17px; line-height:1; transition:transform .35s cubic-bezier(.2,.8,.2,1);}
  .why-experience.is-open .why-toggle-hint .wth-icon{transform:rotate(45deg);}

  .why-body-wrap{display:none; opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease;}
  .why-body-wrap.in{opacity:1; transform:translateY(0);}

  .why-chapters{position:relative; margin-top:80px; display:flex; gap:56px;}
  .chapter-nav{
    position:sticky; top:120px; align-self:flex-start; flex:0 0 140px;
    display:flex; flex-direction:column; gap:22px; height:fit-content;
  }
  .chapter-nav-track{position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line-soft);}
  .chapter-nav-fill{position:absolute; left:0; top:0; width:100%; background:var(--lime); height:0%; transition:height .3s ease;}
  .chapter-dot{
    position:relative; display:flex; align-items:center; gap:12px; background:none; border:none; cursor:pointer;
    color:var(--muted-2); font-family:var(--body); text-align:left; padding:0 0 0 22px; transition:color .3s ease;
  }
  .chapter-dot::before{
    content:''; position:absolute; left:0; top:50%; transform:translate(-50%,-50%);
    width:11px; height:11px; border-radius:50%; border:1px solid var(--muted-2); background:var(--ink); transition:all .3s ease;
  }
  .chapter-dot .cd-num{font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.05em;}
  .chapter-dot .cd-label{font-size:11px; text-transform:uppercase; letter-spacing:.12em;}
  .chapter-dot.active{color:var(--off);}
  .chapter-dot.active::before{border-color:var(--lime); background:var(--lime); box-shadow:0 0 0 4px rgba(228,255,59,.18);}

  .chapter-mobile-progress{display:none; align-items:center; gap:14px; margin-bottom:36px; color:var(--muted-2); font-family:var(--disp); font-size:13px; letter-spacing:.08em;}
  .cmp-line{flex:1; height:1px; background:var(--line-soft); position:relative;}
  .cmp-fill{position:absolute; left:0; top:0; height:100%; width:0%; background:var(--lime); transition:width .3s ease;}

  .why-chapter{flex:1; min-width:0; padding-bottom:96px; border-bottom:1px solid var(--line-soft);}
  .why-chapter:last-child{border-bottom:none; padding-bottom:0;}
  .wc-idx{font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.14em; color:var(--lime);}
  .wc-title{font-family:var(--disp); font-weight:800; font-size:clamp(34px,5vw,58px); letter-spacing:-.02em; margin-top:14px; line-height:1.02;}
  .wc-stmt{font-family:var(--ed); font-style:italic; font-weight:500; font-size:clamp(18px,1.9vw,23px); color:var(--off); margin-top:18px; max-width:620px;}
  .wc-body{color:var(--muted-2); font-size:15px; line-height:1.75; max-width:560px; margin-top:16px;}

  .wc-diagram{margin-top:52px; padding:36px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}

  /* strategy flow diagram */
  .strategy-diagram{display:flex; align-items:stretch; gap:0; flex-wrap:wrap;}
  .flow-node{flex:1; min-width:150px; padding:18px 20px; opacity:.45; transition:opacity .4s ease, transform .4s ease; cursor:default;}
  .flow-node.active, .flow-node:hover{opacity:1; transform:translateY(-4px);}
  .flow-node .fn-num{font-family:var(--disp); font-weight:800; font-size:12px; color:var(--lime);}
  .flow-node .fn-title{font-family:var(--disp); font-weight:700; font-size:19px; margin-top:8px;}
  .flow-node .fn-detail{color:var(--muted-2); font-size:12.5px; margin-top:8px; line-height:1.5;}
  .flow-line{flex:0 0 32px; align-self:center; height:1px; background:var(--line-soft); min-width:20px;}

  /* content pipeline */
  .pipeline-diagram{display:flex; align-items:center; flex-wrap:wrap; gap:6px;}
  .pipe-step{
    padding:12px 18px; border:1px solid var(--line-soft); border-radius:999px; font-family:var(--disp);
    font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; opacity:.55; transition:all .35s ease;
  }
  .pipe-step.active, .pipe-step:hover{opacity:1; border-color:var(--lime); color:var(--lime);}
  #intro .pipe-step.active, #intro .pipe-step:hover{border-color:var(--lime-dim); color:var(--lime-dim);}
  .pipe-arrow{color:var(--muted-2); font-size:14px;}

  /* team network */
  .network-diagram{position:relative; height:340px; display:flex; align-items:center; justify-content:center;}
  .net-center{
    position:relative; z-index:2; width:120px; height:120px; border-radius:50%; background:var(--lime); color:var(--ink);
    display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--disp); font-weight:800;
    font-size:13px; letter-spacing:.03em; line-height:1.25;
  }
  .net-node{
    position:absolute; top:50%; left:50%; transform:rotate(var(--a)) translate(150px) rotate(calc(-1 * var(--a)));
    padding:8px 14px; border:1px solid var(--line-soft); border-radius:999px; font-size:12px; color:var(--muted-2);
    background:var(--ink); white-space:nowrap; transition:all .3s ease; cursor:default;
  }
  .net-node:hover{color:var(--off); border-color:var(--lime); transform:rotate(var(--a)) translate(150px) rotate(calc(-1 * var(--a))) scale(1.08);}

  /* growth funnel */
  .funnel-diagram{display:flex; flex-direction:column; gap:14px; max-width:520px;}
  .funnel-stage{
    position:relative; width:var(--w); min-width:120px; padding:12px 20px; background:rgba(228,255,59,.08);
    border:1px solid var(--line-soft); border-left:3px solid var(--lime); font-family:var(--disp); font-weight:700;
    font-size:14px; letter-spacing:.03em; text-transform:uppercase; transition:width .8s cubic-bezier(.2,.8,.2,1);
  }
  .why-chapter:not(.in-view) .funnel-stage{width:0% !important; opacity:0;}
  .why-chapter.in-view .funnel-stage{opacity:1;}
  .funnel-note{color:var(--muted-2); font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; margin-top:6px;}

  .wc-caps{margin-top:40px; display:flex; flex-direction:column;}
  .cap-row{display:flex; flex-wrap:wrap; gap:6px 24px; padding:16px 0; border-top:1px solid var(--line-soft);}
  .cap-row:last-child{border-bottom:1px solid var(--line-soft);}
  .cap-t{font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.02em; flex:0 0 200px;}
  .cap-d{color:var(--muted-2); font-size:13.5px; flex:1; min-width:200px;}

  .why-system{margin-top:100px; text-align:center; padding-top:80px; border-top:1px solid var(--line-soft);}
  .ws-words{display:flex; justify-content:center; flex-wrap:wrap; gap:14px 28px; font-family:var(--disp); font-weight:800; font-size:clamp(13px,1.3vw,15px); letter-spacing:.14em; color:var(--muted-2);}
  .ws-head{font-family:var(--disp); font-weight:800; font-size:clamp(32px,5.5vw,64px); letter-spacing:-.02em; margin-top:22px;}
  .ws-lines{margin-top:30px; display:flex; flex-direction:column; gap:8px;}
  .ws-lines p{color:var(--muted-2); font-size:15px;}

  @media(max-width:960px){
    .why-chapters{flex-direction:column; gap:0; margin-top:56px;}
    .chapter-nav{display:none;}
    .chapter-mobile-progress{display:flex;}
    .why-chapter{padding-bottom:64px;}
    .wc-diagram{padding:26px 0;}
    .network-diagram{height:auto; flex-wrap:wrap; gap:10px; padding:20px 0;}
    .net-node{position:static; transform:none !important;}
    .net-center{margin:0 auto 12px;}
  }

  /* ---------- process ---------- */
  .proc-row{display:flex; gap:0; overflow-x:auto; scroll-snap-type:x proximity; margin-top:44px; padding-bottom:14px; scrollbar-width:none;}
  .proc-row::-webkit-scrollbar{display:none;}
  .proc-step{
    scroll-snap-align:start; flex:0 0 clamp(240px,74vw,340px); border-right:1px solid var(--line-soft);
    padding:0 32px 0 0; margin-right:32px; display:flex; flex-direction:column; gap:18px;
  }
  .proc-step:last-child{border-right:none;}
  .proc-step .proc-media{position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;}
  .proc-step .proc-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .proc-step .proc-media .n{position:absolute; left:14px; bottom:10px; margin:0; -webkit-text-stroke:0; color:#fff; opacity:.9; font-size:clamp(40px,5.5vw,64px);}
  .proc-step .n{font-family:var(--disp); font-weight:800; font-size:clamp(50px,7vw,80px); color:transparent; -webkit-text-stroke:1.4px var(--muted-2); letter-spacing:-.02em;}
  .proc-step h3{font-family:var(--disp); font-weight:700; font-size:22px; letter-spacing:-.01em; color:var(--off);}
  .proc-step p{color:var(--muted-2); font-size:14px; line-height:1.6; max-width:260px;}

  /* ---------- about ---------- */
  #about .about-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; margin-top:40px;}
  #about h2{font-family:var(--disp); font-weight:800; font-size:clamp(34px,5vw,62px); letter-spacing:-.03em; line-height:1;}
  #about p.copy{color:var(--muted); font-size:16px; line-height:1.7; margin-top:22px; max-width:440px;}
  #about .loc{margin-top:26px; font-family:var(--disp); font-weight:700; letter-spacing:.03em; font-size:14px;}
  .studio-frame{aspect-ratio:4/5; border-radius:var(--radius); position:relative; overflow:hidden;
    background:linear-gradient(150deg,#101008,#3a3a22 55%,#7d8a2f);}
  .studio-frame .grain{position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
  .studio-frame .cap{position:absolute; left:18px; bottom:18px; color:#fff; font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.8;}
  @media (max-width:820px){ #about .about-grid{grid-template-columns:1fr;} }

  /* ---------- founders (compact, closing section) ---------- */
  #founders{padding-block:clamp(56px,8vw,88px);}
  #founders .eyebrow{justify-content:center;}
  #founders .founders-head{text-align:center; max-width:480px; margin:0 auto;}
  #founders .founders-head h2{font-family:var(--disp); font-weight:800; font-size:clamp(24px,3.2vw,34px); letter-spacing:-.02em;}
  .founders-row{display:flex; justify-content:center; gap:32px; margin-top:36px; flex-wrap:wrap;}
  .founder-card{width:150px; text-align:center;}
  .founder-photo{aspect-ratio:1/1; border-radius:50%; overflow:hidden; position:relative; margin:0 auto;
    background:linear-gradient(150deg,#141410,#2b2b1c 55%,#5c6b22);}
  .founder-photo .ph-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .founder-photo .founder-placeholder{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(246,245,241,.5);}
  .founder-photo .founder-placeholder svg{width:34px; height:34px;}
  .founder-card .fc-name{margin-top:14px; font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:-.01em;}
  .founder-card .fc-title{margin-top:4px; font-size:11.5px; color:var(--muted); letter-spacing:.03em; text-transform:uppercase;}
  #founders .demo-flag{display:block; text-align:center; margin:28px auto 0; width:fit-content;}

  /* ---------- numbers ---------- */
  .num-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:40px; margin-top:50px;}
  .num-item .n{font-family:var(--disp); font-weight:800; font-size:clamp(46px,7vw,86px); letter-spacing:-.02em; color:var(--lime);}
  .num-item .l{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-top:10px;}

  /* ---------- testimonials ---------- */
  .quote-slider{margin-top:48px; max-width:760px;}
  .quote-slide-wrap{position:relative; min-height:260px;}
  .quote-slide{position:absolute; inset:0; opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); pointer-events:none;}
  .quote-slide.active{opacity:1; transform:none; pointer-events:auto; position:relative;}
  .quote-slide .mark{font-family:var(--ed); font-size:64px; line-height:1; color:var(--lime-dim); font-style:italic; display:block;}
  .quote-slide p.q{font-family:var(--ed); font-style:italic; font-size:clamp(22px,3vw,32px); line-height:1.35; margin-top:6px;}
  .quote-slide .who{margin-top:20px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
  .quote-slide .who b{display:block; color:var(--ink); font-style:normal; letter-spacing:0; font-size:14px; margin-bottom:2px;}
  .quote-controls{display:flex; align-items:center; gap:20px; margin-top:32px;}
  .quote-controls button{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); font-size:16px; transition:background .3s ease, color .3s ease, border-color .3s ease;}
  .quote-controls button:hover{background:var(--ink); color:var(--off); border-color:var(--ink);}
  .quote-controls span{font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.1em; color:var(--muted); font-variant-numeric:tabular-nums;}

  /* ---------- feed ---------- */
  .feed-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:40px;}
  .feed-tile{aspect-ratio:1/1; position:relative; overflow:hidden; border-radius:var(--radius);}
  .feed-tile .grain{position:absolute;inset:0;opacity:.45;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
  .feed-tile .tag{position:absolute; bottom:10px; left:10px; color:#fff; font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.85;}
  .feed-tile .tile-count{margin-left:8px; opacity:.6; font-size:9px; letter-spacing:.05em;}
  .feed-tile:hover .zoomsim{transform:scale(1.1);}
  .feed-tile .zoomsim{position:absolute;inset:-8%;transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  @media (max-width:820px){ .feed-grid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:480px){ .feed-grid{grid-template-columns:repeat(2,1fr);} }

  /* ---------- cta ---------- */
  #cta{position:relative; overflow:hidden; text-align:left;}
  #cta .bgword{position:absolute; white-space:nowrap; font-family:var(--disp); font-weight:800; color:rgba(246,245,241,.05); font-size:clamp(60px,14vw,180px); letter-spacing:-.02em; z-index:0; user-select:none;}
  #cta h2{position:relative; z-index:1; font-family:var(--disp); font-weight:800; font-size:clamp(48px,10vw,140px); letter-spacing:-.03em; line-height:.9;}
  #cta p{position:relative; z-index:1; margin-top:22px; color:var(--muted-2); max-width:420px; font-size:16px;}
  #cta .ctas{position:relative; z-index:1; margin-top:38px;}

  /* ---------- contact ---------- */
  #contact .c-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:70px; margin-top:44px;}
  #contact h2{font-family:var(--disp); font-weight:800; font-size:clamp(34px,5.6vw,74px); letter-spacing:-.03em; line-height:.98;}
  .field{margin-bottom:22px;}
  .field label{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
  .field input, .field select, .field textarea{
    width:100%; border:none; border-bottom:1px solid var(--line); background:transparent; padding:10px 2px;
    font-family:var(--body); font-size:16px; color:var(--ink); transition:border-color .3s ease;
  }
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--ink);}
  .field textarea{resize:vertical; min-height:70px;}
  .two-col{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  @media (max-width:600px){ .two-col{grid-template-columns:1fr;} }
  .send-btn{margin-top:8px; background:var(--ink); color:var(--off); padding:16px 30px; border-radius:999px; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; transition:transform .35s ease;}
  .send-btn:hover{transform:translateY(-3px);}
  #form-msg{margin-top:16px; font-size:13px; color:var(--lime-dim); display:none;}
  #form-msg.show{display:block;}
  .contact-info{display:flex; flex-direction:column; gap:26px;}
  .contact-info a{border-bottom:1px solid transparent; transition:border-color .25s ease;}
  .contact-info a:hover{border-bottom-color:currentColor;}
  .contact-info .blk .lbl{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
  .contact-info .blk .v{font-family:var(--disp); font-weight:700; font-size:19px;}
  @media (max-width:820px){ #contact .c-grid{grid-template-columns:1fr;} }

  /* ---------- footer ---------- */
  footer{background:var(--ink); color:var(--off);}
  footer .top{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-block:56px; border-bottom:1px solid var(--line-soft);}
  footer .brand{font-family:var(--disp); font-weight:800; font-size:clamp(30px,5vw,54px); letter-spacing:-.02em;}
  footer .brand small{display:block; font-family:var(--ed); font-style:italic; font-weight:400; font-size:16px; color:var(--muted-2); margin-top:8px;}
  footer .cols{display:flex; gap:70px; flex-wrap:wrap;}
  footer .col .lbl{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px;}
  footer .col a{display:block; font-size:14px; padding:5px 0; color:var(--off); opacity:.85; transition:opacity .25s ease;}
  footer .col a:hover{opacity:1; color:var(--lime);}
  footer .bottom{display:flex; justify-content:space-between; padding-block:22px; font-size:11px; letter-spacing:.08em; color:var(--muted-2); flex-wrap:wrap; gap:10px;}


  .proj .media{background:#111;}
  .proj .media .ph-img{position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1);}
  .proj .media .ph-img.cf-layer{transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity 1.1s ease; opacity:0;}
  .proj .media .ph-img.cf-layer.cf-active{opacity:1;}
  .proj:hover .media .ph-img{transform:scale(1.06);}
  .proj .media .shade{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.08) 45%, rgba(0,0,0,.35));}
  .feed-tile .ph-img{position:absolute; inset:-8%; width:116%; height:116%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .feed-tile .ph-img.cf-layer{transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity 1.1s ease; opacity:0;}
  .feed-tile .ph-img.cf-layer.cf-active{opacity:1;}
  .feed-tile:hover .ph-img{transform:scale(1.1);}
  .feed-tile .shade{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);}
  .studio-frame .ph-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .studio-frame .shade{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.5), transparent 50%);}
  .reel video, .reel .poster-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

  /* ---------- showreel fullscreen lightbox ---------- */
  .lightbox{position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s;}
  .lightbox.open{opacity:1; visibility:visible; transition:opacity .5s ease, visibility 0s linear 0s;}
  .lightbox-backdrop{position:absolute; inset:0; background:rgba(3,3,3,.94); backdrop-filter:blur(6px);}
  .lightbox-inner{position:relative; width:min(1100px,92vw); aspect-ratio:16/9; z-index:2; transform:scale(.92); transition:transform .55s cubic-bezier(.2,.8,.2,1);}
  .lightbox.open .lightbox-inner{transform:scale(1);}
  .lightbox-inner video{width:100%; height:100%; object-fit:contain; background:#000; border-radius:4px;}
  .lightbox-close{position:absolute; top:28px; right:28px; z-index:3; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.04); color:var(--off); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s ease, transform .3s ease, border-color .3s ease;}
  .lightbox-close svg{width:18px; height:18px;}
  .lightbox-close:hover{background:var(--lime); border-color:var(--lime); color:var(--ink); transform:rotate(90deg);}
  @media (max-width:767px){ .lightbox-close{top:16px; right:16px; width:40px; height:40px;} }

  /* ---------- gallery image lightbox ---------- */
  .gallery-lightbox-inner{width:min(880px,90vw); aspect-ratio:auto; max-height:82vh; display:flex; flex-direction:column; align-items:center;}
  .proj-lightbox-inner{width:auto; height:86vh; max-height:86vh; aspect-ratio:9/16; max-width:92vw;}
  .proj-lightbox-inner.landscape{width:min(1100px,92vw); height:auto; max-height:82vh; aspect-ratio:16/9;}
  @media (max-width:767px){ .proj-lightbox-inner{height:78vh; max-height:78vh;} }
  .gallery-lightbox-inner img, .gallery-lightbox-inner video{width:100%; height:100%; max-height:74vh; object-fit:contain; border-radius:4px; background:#000;}
  .gallery-caption{margin-top:16px; font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--off); opacity:.85;}
  .gallery-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.04); color:var(--off); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s ease, border-color .3s ease, transform .3s ease;}
  .gallery-nav svg{width:20px; height:20px;}
  .gallery-nav:hover{background:var(--lime); border-color:var(--lime); color:var(--ink);}
  .gallery-prev{left:24px;}
  .gallery-next{right:24px;}
  @media (max-width:767px){
    .gallery-nav{width:38px; height:38px;}
    .gallery-prev{left:10px;} .gallery-next{right:10px;}
    .gallery-lightbox-inner img, .gallery-lightbox-inner video{max-height:64vh;}
  }
  .reel .poster-img{transition:opacity .5s ease;}
  .reel.is-playing .poster-img{opacity:0; pointer-events:none;}
  .reel.is-playing .play{opacity:0; pointer-events:none;}
  .reel .play{opacity:1; transition:opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1), background .4s ease;}


  .logo-mark{height:62px; width:auto; display:block; animation:logocolor 5s linear infinite;}
  #loader .mark img{height:116px; width:auto; display:block; margin:0 auto; animation:logocolor 5s linear infinite;}
  @keyframes logocolor{
    0%{filter:sepia(1) saturate(7) hue-rotate(0deg) brightness(1.05);}
    50%{filter:sepia(1) saturate(7) hue-rotate(180deg) brightness(1.1);}
    100%{filter:sepia(1) saturate(7) hue-rotate(360deg) brightness(1.05);}
  }
  @media (prefers-reduced-motion: reduce){ #loader .mark img, .logo-mark, footer .brand img, #mobile-menu .brand-mark{animation:none;} }
  footer .brand img{height:clamp(84px,12.7vw,132px); width:auto; display:block; margin-bottom:16px; animation:logocolor 5s linear infinite;}
  #mobile-menu .brand-mark{position:absolute; top:26px; left:28px; height:54px; width:auto; animation:logocolor 5s linear infinite;}
  @media (max-width:600px){
    .logo-mark{height:52px;}
    #mobile-menu .brand-mark{height:46px;}
  }


  #wa-float{
    position:fixed; right:22px; bottom:22px; z-index:180; width:56px; height:56px; border-radius:50%;
    background:var(--ink); display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 30px -8px rgba(0,0,0,.45); transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease;
  }
  #wa-float:hover{transform:translateY(-4px) scale(1.06); background:var(--lime);}
  #wa-float svg{width:26px; height:26px; fill:var(--lime); transition:fill .3s ease;}
  #wa-float:hover svg{fill:var(--ink);}
  #wa-float{bottom:calc(22px + env(safe-area-inset-bottom, 0px));}


  body::after{
    content:''; position:fixed; inset:0; z-index:500; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  @media (max-width:480px){
    section{padding-inline:20px;}
  }


  /* ---------- AI chat widget ---------- */
  #chat-launcher{
    position:fixed; right:22px; bottom:calc(90px + env(safe-area-inset-bottom, 0px)); z-index:185;
    width:56px; height:56px; border-radius:50%; background:var(--ink);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 30px -8px rgba(0,0,0,.45);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease;
  }
  #chat-launcher:hover{transform:translateY(-4px) scale(1.06); background:var(--lime);}
  #chat-launcher svg{width:26px; height:26px; fill:var(--lime); color:var(--lime); transition:fill .3s ease, color .3s ease;}
  #chat-launcher:hover svg{fill:var(--ink); color:var(--ink);}
  #chat-launcher .ico-close{display:none;}
  #chat-launcher.open .ico-open{display:none;}
  #chat-launcher.open .ico-close{display:block;}

  /* padding-inline:0 overrides the global `section` rule this element inherits. */
  #chat-panel{
    padding-inline:0; position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); z-index:186;
    width:min(390px, calc(100vw - 44px)); max-height:min(600px, calc(100vh - 150px));
    background:var(--ink); color:var(--off); border:1px solid var(--line-soft); border-radius:var(--radius);
    box-shadow:0 30px 70px -20px rgba(0,0,0,.65);
    display:flex; flex-direction:column; overflow:hidden;
    opacity:0; visibility:hidden; transform:translateY(16px) scale(.98); transform-origin:bottom right;
    transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s ease;
  }
  #chat-panel.open{opacity:1; visibility:visible; transform:none;}
  @media (prefers-reduced-motion: reduce){
    #chat-panel{transition:opacity .2s ease, visibility .2s ease; transform:none;}
    #chat-launcher{transition:none;}
    #chat-launcher:hover{transform:none;}
  }

  .chat-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
    padding:18px 18px 14px; border-bottom:1px solid var(--line-soft); flex:none;
  }
  .chat-kicker{
    display:block; font-size:10px; font-weight:600; letter-spacing:.24em;
    text-transform:uppercase; color:var(--muted-2); margin-bottom:6px;
  }
  .chat-head h2{font-family:var(--disp); font-weight:800; font-size:19px; letter-spacing:-.02em;}
  #chat-close{width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--muted-2); transition:color .25s ease;}
  #chat-close:hover{color:var(--lime);}
  #chat-close svg{width:16px; height:16px;}

  #chat-log{
    flex:1 1 auto; min-height:120px; overflow-y:auto; overscroll-behavior:contain;
    padding:18px; display:flex; flex-direction:column; gap:12px;
    font-size:14px; line-height:1.55; scrollbar-width:thin; scrollbar-color:rgba(248,247,242,.22) transparent;
  }
  #chat-log::-webkit-scrollbar{width:6px;}
  #chat-log::-webkit-scrollbar-thumb{background:rgba(248,247,242,.22);}

  .chat-msg{max-width:88%; padding:10px 13px; border-radius:var(--radius); white-space:pre-wrap; overflow-wrap:anywhere;}
  .chat-msg.me{align-self:flex-end; background:var(--lime); color:var(--ink); font-weight:500;}
  .chat-msg.bot{align-self:flex-start; background:rgba(248,247,242,.07); border:1px solid var(--line-soft); color:var(--off);}
  .chat-msg.err{align-self:flex-start; background:transparent; border:1px solid rgba(248,247,242,.28); color:var(--muted-2); font-size:13px;}
  .chat-msg.bot.pending::after{
    content:''; display:inline-block; width:7px; height:7px; margin-left:3px; vertical-align:baseline;
    background:var(--lime); animation:chatBlink 1s steps(2, start) infinite;
  }
  @keyframes chatBlink{50%{opacity:0;}}
  @media (prefers-reduced-motion: reduce){ .chat-msg.bot.pending::after{animation:none;} }

  #chat-chips{display:flex; flex-wrap:wrap; gap:7px; padding:0 18px 14px; flex:none;}
  #chat-chips.hide{display:none;}
  .chat-chip{
    font-size:11.5px; font-weight:500; letter-spacing:.02em; padding:7px 11px;
    border:1px solid var(--line-soft); border-radius:var(--radius); color:var(--muted-2);
    transition:color .25s ease, border-color .25s ease, background .25s ease;
  }
  .chat-chip:hover{color:var(--ink); background:var(--lime); border-color:var(--lime);}

  #chat-form{
    display:flex; align-items:flex-end; gap:10px; padding:14px 18px;
    border-top:1px solid var(--line-soft); flex:none;
  }
  #chat-input{
    flex:1 1 auto; resize:none; max-height:120px; background:transparent; border:none; outline:none;
    color:var(--off); font-family:var(--body); font-size:14px; line-height:1.5; padding:6px 0;
  }
  #chat-input::placeholder{color:var(--muted);}
  #chat-send{
    flex:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    background:var(--lime); color:var(--ink); border-radius:var(--radius);
    transition:opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
  }
  #chat-send svg{width:20px; height:10px;}
  #chat-send:hover:not(:disabled){transform:translateX(2px);}
  #chat-send:disabled{opacity:.35; cursor:not-allowed;}

  .chat-foot{
    padding:0 18px 14px; font-size:10.5px; letter-spacing:.04em; color:var(--muted); flex:none;
  }
  .chat-foot a{color:var(--muted-2); border-bottom:1px solid rgba(248,247,242,.28);}
  .chat-foot a:hover{color:var(--lime); border-color:var(--lime);}

  @media (max-width:520px){
    #chat-panel{
      right:12px; left:12px; width:auto;
      bottom:calc(12px + env(safe-area-inset-bottom, 0px));
      max-height:calc(100vh - 130px);
    }
  }