:root {
  --ink: #080e1a;
  --ink-2: #0f172a;
  --ink-3: #475569;
  --paper: #f8fafc;
  --paper-2: #f1f5f9;
  --paper-3: #e2e8f0;
  --accent: #f97316;
  --accent-dim: rgba(249, 115, 22, 0.15);
  --teal: #0284c7;
  --teal-light: #38bdf8;
  --teal-dim: rgba(56, 189, 248, 0.12);
  --teal-glow: rgba(56, 189, 248, 0.35);
  --hot: #f97316;
  --acid: #38bdf8;
  --shadow-acid: 0 4px 20px rgba(56, 189, 248, 0.35);
  --shadow-hard: 8px 8px 0 rgba(242, 238, 227, 0.12);
  --bw: 1px;
  --dark-blue: #080e1a;
  --dark-blue-2: #0f172a;
  --dark-blue-card: #162238;
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-hero: 'Bebas Neue', 'Impact', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --pad: clamp(1.5rem, 5vw, 5rem);
  --section-gap: clamp(6rem, 12vh, 10rem);
  --radius: 12px;
  --radius-sm: 6px;
  --z-fx: 900;
  --z-cursor: 1200;
  --z-menu-btn: 1150;
  --z-menu: 1100;
  --section-bg: var(--paper);
  --section-text: var(--ink);
  --progress-glow: rgba(56, 189, 248, 0.8);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:#080e1a;color:#f8fafc}
body{background:#080e1a;color:#f8fafc;font-family:var(--font-display);font-size:15px;line-height:1.5;overflow:auto;height:auto;-webkit-font-smoothing:antialiased;position:relative}
body::before{content:'';position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:200px 200px}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.mono{font-family:var(--font-mono)}
::selection{background:var(--teal);color:var(--paper)}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--teal);border-radius:3px}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
body.has-cursor,body.has-cursor *{cursor:none!important}

.page-transition{position:fixed;inset:0;z-index:99999;pointer-events:none;display:none;flex-direction:column;overflow:hidden}
.pt-bar{
  position:relative;
  width:100%;
  height:20.5%;
  transform:translateY(-102%);
  border-bottom:1.5px solid rgba(56,189,248,0.5);
  box-shadow:0 15px 40px rgba(0,0,0,0.6);
  transition:transform .5s cubic-bezier(.7,0,.15,1),opacity .4s ease;
  will-change:transform;
}
.pt-bar--1{background:linear-gradient(135deg,#050a12,#091122);z-index:5}
.pt-bar--2{background:linear-gradient(135deg,#07101f,#0f1c36);z-index:4}
.pt-bar--3{background:linear-gradient(135deg,#0c1932,#015280);z-index:3}
.pt-bar--4{background:linear-gradient(135deg,#0278b3,#0284c7);z-index:2}
.pt-bar--5{background:linear-gradient(135deg,#0284c7,#38bdf8);z-index:1}

/* Page Exit — bars slide down to cover screen */
.page-transition.is-leaving{pointer-events:auto;display:flex}
.page-transition.is-leaving .pt-bar{
  transform:translateY(0%)!important;
  transition-delay:calc(var(--i) * 0.045s)!important;
}

/* Main Container Page Enter */
body.is-page-entering main{
  animation:mainEnter .55s cubic-bezier(.2,0,.2,1) forwards;
}
@keyframes mainEnter{
  0%{transform:translateY(16px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}

.fx-scanlines{position:fixed;inset:0;z-index:var(--z-fx);pointer-events:none;opacity:.06;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(42,37,32,.03) 3px 4px)}
.fx-vignette{position:fixed;inset:0;z-index:var(--z-fx);pointer-events:none;background:radial-gradient(ellipse at center,transparent 60%,rgba(42,37,32,.06) 100%)}



body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor [role="button"] { cursor: none !important; }
body.has-cursor input, body.has-cursor textarea, body.has-cursor select { cursor: auto !important; }

.cursor { display: none; }
body.has-cursor .cursor { display: block; }
.cursor__dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--teal-light);
  pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 10px var(--teal-light);
  will-change: transform;
}
.cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1.5px solid var(--teal);
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.6;
  transition: width 0.3s cubic-bezier(.25,.46,.45,.94), height 0.3s cubic-bezier(.25,.46,.45,.94), margin 0.3s cubic-bezier(.25,.46,.45,.94), border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
  will-change: transform;
}

/* Hover State — Smooth expansion */
.cursor__ring.is-active {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-color: var(--teal-light);
  background: rgba(42, 122, 122, 0.12);
  opacity: 1;
}
.cursor__ring.is-down {
  transform: scale(0.82);
}

/* UNIQUE FULLSCREEN HAMBURGER MENU */
.nav__menu-btn{display:flex!important;align-items:center;gap:.6rem;pointer-events:auto!important;padding:.55rem 1.2rem;border-radius:24px;background:rgba(8,14,26,.85)!important;color:#f8fafc!important;border:1px solid rgba(56,189,248,.35)!important;box-shadow:0 4px 20px rgba(0,0,0,0.4);backdrop-filter:blur(12px);opacity:1!important;transition:border-color .3s,box-shadow .3s,transform .25s;z-index:calc(var(--z-menu-btn)+10)}
.nav__menu-btn:hover{border-color:var(--teal-light)!important;box-shadow:0 0 0 3px rgba(56,189,248,.15),0 6px 24px rgba(0,0,0,.5);transform:scale(1.04)}
.nav__menu-btn span{font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#f8fafc!important;transition:letter-spacing .3s}
.nav__menu-btn:hover span{letter-spacing:.26em}
.nav__bars{display:flex;flex-direction:column;gap:4px;width:18px}
.nav__bars i{display:block;width:100%;height:2px;background:#f8fafc!important;border-radius:1px;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s,width .3s;transform-origin:center}
.nav__menu-btn.open .nav__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__menu-btn.open .nav__bars i:nth-child(2){opacity:0;width:0}
.nav__menu-btn.open .nav__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* FULLSCREEN MENU OVERLAY — unique dark studio look */
.menu-overlay{
  position:fixed;inset:0;z-index:var(--z-menu);
  background:#050a10;
  display:grid;
  grid-template-columns:clamp(60px,8vw,120px) 1fr;
  align-items:center;
  padding:6rem var(--pad) 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .65s cubic-bezier(.76,0,.24,1);
  visibility:hidden;
  overflow:hidden;
}
.menu-overlay::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 50%,rgba(56,189,248,.06) 0%,transparent 60%);
  pointer-events:none;
}
.menu-overlay.open{clip-path:inset(0 0 0% 0);visibility:visible}

/* Left rail — index numbers */
.menu-overlay__rail{
  display:flex;flex-direction:column;
  gap:clamp(1.2rem,3vh,2.5rem);
  align-items:flex-end;
  padding-right:clamp(1rem,2vw,2rem);
  border-right:1px solid rgba(56,189,248,.15);
  align-self:center;
}
.menu-overlay__rail-num{
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  letter-spacing:.18em;color:rgba(56,189,248,.4);
  transition:color .3s;
}

/* Links */
.menu-overlay__links{
  display:flex;flex-direction:column;
  padding-left:clamp(1.5rem,4vw,4rem);
  gap:0;
  align-self:center;
}
.menu-overlay__link{
  font-family:var(--font-hero);
  font-size:clamp(3.5rem,10vw,8rem);
  font-weight:400;
  line-height:1.02;
  color:rgba(248,250,252,.15);
  letter-spacing:.02em;
  display:block;
  text-transform:uppercase;
  transition:color .3s ease,letter-spacing .4s ease;
  position:relative;
  overflow:hidden;
}
.menu-overlay__link::before{content:none}
.menu-overlay__link:hover{
  color:#f8fafc;
  letter-spacing:.06em;
  text-shadow:0 0 60px rgba(56,189,248,.3);
}
.menu-overlay__link:hover ~ .menu-overlay__rail-num,
.menu-overlay__link:hover .menu-overlay__rail-num{color:var(--teal-light)}

/* Footer row */
.menu-overlay__foot{
  position:absolute;bottom:2.5rem;left:0;right:0;
  display:flex;gap:2rem;flex-wrap:wrap;
  justify-content:center;
  font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.14em;color:rgba(248,250,252,.25);
}
.menu-overlay__foot a{transition:color .2s}
.menu-overlay__foot a:hover{color:var(--teal-light)}

/* Decorative teal accent on right side of open menu */
.menu-overlay::after{
  content:'';
  position:absolute;right:0;top:0;bottom:0;
  width:3px;
  background:linear-gradient(180deg,transparent,var(--teal),transparent);
  opacity:.4;
}


.hero-wrap{position:relative;height:400vh}
.hero--sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ink);overflow:hidden;text-align:center;z-index:1}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%}
.hero__content{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;padding:2rem var(--pad) 1rem}
.hero__pre{font-family:var(--font-mono);font-size:clamp(.55rem,1.1vw,.7rem);font-weight:500;letter-spacing:.25em;color:var(--teal-light);margin-bottom:1.5rem;text-transform:uppercase}
.hero__title{display:flex;flex-direction:column;align-items:center}
.hero__line{width:fit-content}
.hero__line--top{font-family:var(--font-hero);font-size:clamp(2rem,7vw,6rem);font-weight:400;line-height:1;letter-spacing:.15em;color:var(--paper)}
.hero__line--big{font-family:var(--font-hero);font-size:clamp(4rem,20vw,22rem);font-weight:400;line-height:.85;letter-spacing:.02em;color:var(--paper);display:flex;gap:0;cursor:default;text-shadow:0 2px 40px rgba(42,122,122,.15),0 0 80px rgba(42,122,122,.08);-webkit-text-stroke:3px var(--paper)}
.hero__char{display:inline-block;transition:color .25s ease,text-shadow .25s ease}
.hero__char:hover{color:var(--teal-light);text-shadow:0 0 25px rgba(110,198,198,.8),0 0 45px rgba(42,122,122,.6)}
.hero__tagline{font-family:var(--font-mono);font-size:clamp(.6rem,1.3vw,.78rem);font-weight:500;letter-spacing:.08em;color:var(--paper-2);margin-top:2rem;text-align:center}
.hero__scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;color:var(--teal-light);animation:float 2.5s ease-in-out infinite}

.trippy{position:absolute;bottom:0;left:0;right:0;top:80%;overflow:hidden;z-index:3;background:var(--ink)}
.trippy__frame{position:relative;width:100%;height:100%;transform-origin:center center;will-change:transform}

/* Text Radius Hover Effect — pure illumination without position displacement */
.radius-hover, .hero__char, .char-reveal, .work__client, .service-name, .menu-overlay__link, .section__heading, .statement__heading, .page-hero__title, .contact-hero__title {
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.in-cursor-radius {
  color: var(--teal-light) !important;
  text-shadow: 0 0 20px rgba(110, 198, 198, 0.9), 0 0 35px rgba(196, 101, 42, 0.5) !important;
}

.stats{display:flex;justify-content:center;gap:clamp(1.5rem,5vw,4rem);padding:clamp(3rem,6vh,6rem) var(--pad);background:var(--ink);color:var(--paper);border-top:1px solid rgba(110,198,198,.1);border-bottom:1px solid rgba(110,198,198,.1);flex-wrap:wrap}
.stat{text-align:center;min-width:90px}
.stat__num{font-family:var(--font-hero);font-size:clamp(2rem,5vw,4rem);line-height:1;letter-spacing:.02em;color:var(--teal-light);transition:color .3s}
.stat:hover .stat__num{color:var(--paper)}
.stat__label{font-family:var(--font-mono);font-size:clamp(.55rem,.9vw,.68rem);font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-top:.4rem}

.section{position:relative;padding:var(--section-gap) var(--pad);text-align:center;overflow:hidden;background:var(--section-bg);color:var(--section-text)}
.section__eyebrow{font-family:var(--font-mono);font-size:.65rem;font-weight:700;letter-spacing:.18em;color:var(--teal);margin-bottom:1.5rem;text-align:center;text-transform:uppercase}
.section__heading{font-family:var(--font-display);font-size:clamp(2rem,6vw,5rem);font-weight:700;line-height:1;letter-spacing:-.02em;margin-bottom:clamp(1.5rem,3vh,3rem);text-align:center}

.anim-clip{clip-path:inset(100% 0 0 0)}
.anim-scale{transform:scale(.85);opacity:0}
.anim-slide-left{transform:translateX(-60px);opacity:0}
.anim-slide-right{transform:translateX(60px);opacity:0}
.anim-slide-up{transform:translateY(40px);opacity:0}
.anim-rotate{transform:rotate(-8deg) scale(.9);opacity:0}
.anim-blur{filter:blur(12px);opacity:0}
.accent-line{display:block;width:60px;height:2px;background:var(--teal);margin:1.5rem auto 0;transform-origin:left center}
@keyframes float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--teal-glow)}50%{opacity:.5;box-shadow:0 0 12px 4px var(--teal-glow)}}

.page-hero{min-height:50vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--pad);text-align:center;background:var(--ink);position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--teal),var(--accent),var(--teal-light))}
.page-hero__title{font-family:var(--font-hero);font-size:clamp(3rem,12vw,12rem);font-weight:400;line-height:.88;letter-spacing:.02em;color:var(--paper);text-shadow:0 2px 30px rgba(42,122,122,.12);-webkit-text-stroke:1px rgba(245,239,230,.25)}

.statement{max-width:1200px;margin:0 auto;text-align:center;padding-left:var(--pad);padding-right:var(--pad)}
.statement__heading{font-family:var(--font-display);font-size:clamp(1.8rem,4.5vw,3.5rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin-bottom:2rem;text-align:center}
.statement__text{font-family:var(--font-display);font-size:clamp(1.1rem,2.2vw,1.6rem);font-weight:600;line-height:1.7;color:var(--ink);text-align:justify;text-justify:inter-word;max-width:100%;margin:0 auto}
.studio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:start;max-width:1000px;margin:0 auto}
.studio__statement{font-family:var(--font-display);font-size:clamp(1rem,2.2vw,1.5rem);font-weight:400;line-height:1.65;text-align:left}
.studio__services{list-style:none;text-align:left}
.studio__services li{font-family:var(--font-mono);font-size:.8rem;font-weight:500;letter-spacing:.06em;padding:.8rem 0;border-bottom:1px solid var(--teal-dim);transition:padding-left .25s,color .2s}
.studio__services li:hover{padding-left:.8rem;color:var(--teal)}
.studio__services li:first-child{border-top:1px solid var(--teal-dim)}
.team__group{margin-bottom:clamp(1.5rem,3vh,2.5rem);text-align:center}
.team__role{font-family:var(--font-mono);font-size:.65rem;font-weight:700;letter-spacing:.18em;color:var(--teal);margin-bottom:.8rem;text-align:center}
.team__names{font-family:var(--font-display);font-size:clamp(1.2rem,3vw,2.2rem);font-weight:700;line-height:1.2;text-align:center}

.capabilities{padding:var(--section-gap) var(--pad);max-width:1080px;margin:0 auto}
.capabilities__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:clamp(2rem,4vh,4rem)}
.capability{border:1px solid rgba(42,122,122,0.15);border-radius:var(--radius);padding:clamp(1.5rem,2.5vh,2.2rem);text-align:left;background:rgba(255,255,255,0.6);backdrop-filter:blur(10px);transition:border-color .3s,box-shadow .3s;position:relative;overflow:hidden}
.capability::before{content:'';position:absolute;top:0;left:0;width:4px;height:0;background:var(--teal);transition:height .4s cubic-bezier(.4,0,.2,1)}
.capability:hover{border-color:var(--teal);box-shadow:0 12px 35px -10px rgba(42,122,122,.15)}
.capability:hover::before{height:100%}
.capability__icon{font-size:1.5rem;margin-bottom:.8rem;display:block;transition:transform .3s}
.capability:hover .capability__icon{transform:scale(1.1)}
.capability__name{font-family:var(--font-display);font-size:clamp(1rem,2vw,1.25rem);font-weight:700;margin-bottom:.5rem;color:var(--ink)}
.capability__tools{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);line-height:1.6}
.exp-badge{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.6rem 1.2rem;border:1.5px solid var(--teal);color:var(--teal);border-radius:30px;margin-top:1.5rem;transition:background .3s,color .3s,box-shadow .3s}
.exp-badge:hover{background:var(--teal);color:var(--paper);box-shadow:0 6px 20px rgba(42,122,122,0.3)}

.toolkit{padding:var(--section-gap) var(--pad);max-width:1080px;margin:0 auto;text-align:center}
.toolkit__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem;margin-top:clamp(2rem,4vh,4rem)}
.toolkit__card{border:1px solid rgba(42,122,122,0.12);border-radius:var(--radius);padding:clamp(1.2rem,2vh,1.8rem) clamp(1rem,1.5vw,1.2rem);text-align:center;transition:border-color .3s,box-shadow .3s;position:relative;overflow:hidden;background:rgba(255,255,255,0.7);backdrop-filter:blur(8px)}
.toolkit__card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.toolkit__card:hover{border-color:var(--teal);box-shadow:0 10px 30px -5px rgba(42,122,122,.15)}
.toolkit__card:hover::before{transform:scaleX(1)}
.toolkit__icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;background:var(--teal-dim);color:var(--teal);font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:.8rem;transition:background .3s,color .3s}
.toolkit__card:hover .toolkit__icon{background:var(--teal);color:var(--paper)}
.toolkit__name{font-family:var(--font-display);font-size:clamp(.85rem,1.5vw,1.05rem);font-weight:700;margin-bottom:.3rem;transition:color .3s}
.toolkit__card:hover .toolkit__name{color:var(--teal)}
.toolkit__role{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.work{background:var(--ink);color:var(--paper)}
.work .section__heading{color:#f8fafc}
.work__grid{display:flex;flex-direction:column;max-width:960px;margin:0 auto}
.work__item{display:grid;grid-template-columns:70px 1fr;gap:clamp(1rem,3vw,2.5rem);align-items:start;padding:clamp(2rem,4vh,3.5rem) 0;border-top:1px solid rgba(56,189,248,0.2);text-align:left;transition:border-color .3s ease}
.work__item:hover{border-color:var(--teal-light)}
.work__item:last-child{border-bottom:1px solid rgba(56,189,248,0.2)}
.work__num{font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--teal-light);padding-top:.3rem;transition:color .3s}
.work__item:hover .work__num{color:var(--accent)}
.work__client{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.8rem);font-weight:700;line-height:1.1;color:#f8fafc;transition:color .3s,text-shadow .3s}
.work__item:hover .work__client{color:var(--teal-light);text-shadow:0 0 20px rgba(56,189,248,0.4)}
.work__desc{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;color:#cbd5e1;margin-top:.5rem;line-height:1.6}
.work__tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.work__tag{font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border:1px solid rgba(56,189,248,0.3);color:var(--teal-light);border-radius:20px;transition:background .2s,color .2s}
.work__tag:hover{background:var(--teal-light);color:var(--ink)}

.reel{max-width:960px;margin:0 auto clamp(3rem,6vh,5rem);text-align:center}
.reel__title{font-family:var(--font-display);font-size:clamp(1.8rem,4.5vw,3.2rem);font-weight:700;margin-bottom:1.2rem}
.reel__desc{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-2);margin-bottom:2rem;max-width:640px;margin-left:auto;margin-right:auto;line-height:1.7}
.reel__wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border:2px solid rgba(42,122,122,0.2);border-radius:var(--radius);transition:border-color .3s,box-shadow .3s}
.reel__wrap:hover{border-color:var(--teal);box-shadow:0 12px 45px rgba(42,122,122,.15)}
.reel__wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;max-width:1080px;margin:0 auto}
.services-grid__card{border:1px solid rgba(42,122,122,0.12);border-radius:var(--radius);padding:clamp(1.5rem,3vh,2.5rem);text-align:left;transition:border-color .3s,box-shadow .3s;position:relative;overflow:hidden;background:rgba(255,255,255,0.7);backdrop-filter:blur(10px)}
.services-grid__card::before{content:'';position:absolute;top:0;left:0;width:4px;height:0;background:var(--teal);transition:height .4s cubic-bezier(.4,0,.2,1)}
.services-grid__card:hover{border-color:var(--teal);box-shadow:0 12px 35px -10px rgba(42,122,122,.15)}
.services-grid__card:hover::before{height:100%}
.services-grid__icon{font-size:1.6rem;margin-bottom:.8rem;display:block}
.services-grid__name{font-family:var(--font-display);font-size:clamp(1.1rem,2.2vw,1.4rem);font-weight:700;margin-bottom:.5rem;transition:color .3s}
.services-grid__card:hover .services-grid__name{color:var(--teal)}
.services-grid__desc{font-family:var(--font-mono);font-size:.76rem;line-height:1.7;color:var(--ink-2);margin-bottom:.8rem}
.services-grid__tags{display:flex;gap:.5rem;flex-wrap:wrap}

.testimonials{background:var(--ink);color:var(--paper);padding:var(--section-gap) var(--pad)}
.testimonials .section__eyebrow{color:var(--teal-light)}
.testimonials .section__heading{color:var(--paper)}
.testimonials__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;max-width:1080px;margin:0 auto}
.testimonials__card{border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius);padding:clamp(1.5rem,3vh,2.5rem);position:relative;transition:border-color .3s,box-shadow .3s;background:rgba(255,255,255,0.03);backdrop-filter:blur(10px)}
.testimonials__card:hover{border-color:var(--teal-light);box-shadow:0 12px 35px -10px rgba(68,175,175,.2)}
.testimonials__card::before{content:'\201C';position:absolute;top:.8rem;left:1.2rem;font-family:var(--font-hero);font-size:3.5rem;color:var(--teal);opacity:.3;line-height:1}
.testimonials__quote{font-family:var(--font-display);font-size:clamp(.9rem,1.5vw,1.05rem);font-weight:400;line-height:1.75;color:var(--paper-2);margin-bottom:1.5rem;position:relative;z-index:1}
.testimonials__author{border-top:1px solid rgba(255,255,255,0.08);padding-top:1rem}
.testimonials__name{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--paper)}
.testimonials__role{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-light);margin-top:.25rem}

.marquee{overflow:hidden;white-space:nowrap;user-select:none;padding:clamp(1.2rem,2.5vh,2rem) 0;border-top:1px solid var(--teal-dim);border-bottom:1px solid var(--teal-dim);background:linear-gradient(135deg,var(--paper-2),var(--paper))}
.marquee__track{display:inline-flex;will-change:transform}
.marquee__track span{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,3.5rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);opacity:.1;padding-right:2rem;transition:color .3s,opacity .3s}
.marquee__track span:hover{color:var(--teal);opacity:1}
.marquee__track span.mark{opacity:.25;font-size:.6em;vertical-align:middle;color:var(--teal)}

.cta{display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center}
.cta__heading{font-family:var(--font-display);font-size:clamp(2.5rem,9vw,8rem);font-weight:700;line-height:.92;letter-spacing:-.03em;text-align:center}
.cta__btn{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.9rem 1.8rem;border:1px solid var(--teal);color:var(--teal);transition:background .25s ease,color .25s ease,box-shadow .3s}
.cta__btn:hover{background:var(--teal);color:var(--paper);box-shadow:0 0 20px rgba(42,122,122,.35)}
.cta__btn:active{transform:scale(.97)}
.footer{padding:clamp(2.5rem,5vh,4rem) var(--pad);border-top:1px solid var(--teal-dim);background:var(--paper-2)}
.footer__row{display:flex;justify-content:center;align-items:center;gap:2rem;flex-wrap:wrap}
.footer__links{display:flex;gap:1.5rem}
.footer__links a{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;color:var(--ink-2);transition:color .2s ease}
.footer__links a:hover{color:var(--teal)}
.footer__copy{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;color:var(--ink-3);opacity:.5;width:100%;text-align:center;margin-top:2.5rem}
.footer__logo{display:block;width:42px;height:42px;margin:0 auto 1.2rem;object-fit:contain;opacity:.2;filter:invert(1);transition:opacity .3s}
.footer__logo:hover{opacity:.7}

.services-hero{min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--pad);text-align:center;background:var(--ink);position:relative;overflow:hidden}
.services-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--teal),var(--accent),var(--teal-light))}
.services-hero .section__eyebrow,.services-hero .section__heading{color:var(--paper)}
.services-hero .section__heading{font-family:var(--font-hero);font-size:clamp(3rem,12vw,12rem);font-weight:400;line-height:.88;letter-spacing:.02em;-webkit-text-stroke:2px var(--paper)}
.services-list{padding:0 var(--pad) var(--section-gap);max-width:1000px;margin:0 auto}
.services-tabs{padding:0 var(--pad) var(--section-gap);max-width:1000px;margin:0 auto}
.services-tabs__nav{display:flex;gap:0;border-bottom:1px solid var(--teal-dim);margin-bottom:clamp(1.5rem,3vh,3rem)}
.services-tabs__btn{flex:1;font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:1rem;color:var(--ink-3);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .3s,border-color .3s}
.services-tabs__btn:hover{color:var(--teal)}
.services-tabs__btn.active{color:var(--teal);border-bottom-color:var(--teal)}
.services-tabs__panel{display:none}
.services-tabs__panel.active{display:block}
.service-item{border-top:1px solid var(--teal-dim);padding:clamp(1.5rem,3vh,3rem) 0;display:grid;grid-template-columns:1fr 2fr;gap:clamp(1.2rem,3.5vw,3.5rem);text-align:left;transition:border-color .3s;position:relative}
.service-item:hover{border-color:var(--teal)}
.service-item::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--teal);transition:height .4s cubic-bezier(.4,0,.2,1)}
.service-item:hover::before{height:100%}
.service-item:last-child{border-bottom:1px solid var(--teal-dim)}
.service-name{font-family:var(--font-display);font-size:clamp(1.2rem,2.8vw,2rem);font-weight:700;line-height:1.1;transition:color .3s}
.service-item:hover .service-name{color:var(--teal)}
.service-detail{font-family:var(--font-mono);font-size:.78rem;line-height:1.7;color:var(--ink-2)}
.service-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.service-tag{font-family:var(--font-mono);font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .4rem;background:var(--teal-dim);color:var(--teal);border-radius:1px;transition:background .2s,color .2s}
.service-tag:hover{background:var(--teal);color:var(--paper)}

.pricing{padding:var(--section-gap) var(--pad);max-width:1100px;margin:0 auto}
.pricing__heading{font-family:var(--font-display);font-size:clamp(1.8rem,4.5vw,3rem);font-weight:700;text-align:center;margin-bottom:clamp(1.5rem,3vh,3rem)}
.pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.pricing__card{border:1px solid var(--teal-dim);padding:clamp(1.2rem,2.5vh,2rem);text-align:left;transition:border-color .3s,box-shadow .3s;position:relative}
.pricing__card:hover{border-color:var(--teal);box-shadow:0 0 30px rgba(42,122,122,.15)}
.pricing__card.popular{border-color:var(--teal);background:var(--teal-dim)}
.pricing__card.popular::before{content:'Popular';position:absolute;top:.8rem;right:.8rem;font-family:var(--font-mono);font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.2rem .5rem;background:var(--teal);color:var(--paper)}
.pricing__tier{font-family:var(--font-mono);font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:.4rem}
.pricing__price{font-family:var(--font-hero);font-size:clamp(1.8rem,4.5vw,2.8rem);line-height:1;margin-bottom:1.2rem}
.pricing__features{list-style:none}
.pricing__features li{font-family:var(--font-mono);font-size:.72rem;line-height:2;color:var(--ink-2);padding-left:1.1rem;position:relative}
.pricing__features li::before{content:'+';position:absolute;left:0;color:var(--teal);font-weight:700}
.pricing__btn{margin-top:1.2rem;display:inline-flex}

.process{padding:var(--section-gap) var(--pad);max-width:900px;margin:0 auto}
.process__heading{font-family:var(--font-display);font-size:clamp(1.8rem,4.5vw,3rem);font-weight:700;text-align:center;margin-bottom:clamp(1.5rem,3vh,3rem)}
.process__step{display:grid;grid-template-columns:50px 1fr;gap:clamp(.8rem,2.5vw,1.8rem);align-items:start;padding:clamp(1.2rem,2.5vh,2rem) 0;border-top:1px solid var(--teal-dim)}
.process__step:last-child{border-bottom:1px solid var(--teal-dim)}
.process__num{font-family:var(--font-hero);font-size:1.8rem;color:var(--teal);line-height:1}
.process__name{font-family:var(--font-display);font-size:clamp(1rem,2.2vw,1.4rem);font-weight:700;margin-bottom:.4rem}
.process__desc{font-family:var(--font-mono);font-size:.72rem;line-height:1.7;color:var(--ink-2)}
.page-cta{padding:var(--section-gap) var(--pad);text-align:center}
.page-cta h2{font-family:var(--font-display);font-size:clamp(1.8rem,5.5vw,4rem);font-weight:700;line-height:1;margin-bottom:2rem;text-align:center}
.page-cta .cta__btn{margin:0 auto}

.contact-hero{height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 var(--pad);text-align:center;background:var(--ink);position:relative;overflow:hidden}
.contact-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--teal),var(--accent),var(--teal-light))}
.contact-hero__title{font-family:var(--font-hero);font-size:clamp(3.5rem,14vw,14rem);font-weight:400;line-height:.85;letter-spacing:.02em;text-transform:uppercase;text-align:center;color:var(--paper);text-shadow:0 2px 30px rgba(42,122,122,.12);-webkit-text-stroke:1px rgba(245,239,230,.25)}
.contact-hero__sub{font-family:var(--font-mono);font-size:clamp(.65rem,1.3vw,.88rem);font-weight:500;letter-spacing:.14em;color:var(--teal-light);margin-top:2rem;text-align:center}
.contact-hero__status{font-family:var(--font-mono);font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-light);margin-top:.8rem;display:flex;align-items:center;gap:.5rem}
.contact-hero__status::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--teal-light);animation:pulse-dot 2s ease-in-out infinite}
.contact-links{padding:0 var(--pad) var(--section-gap);max-width:800px;margin:0 auto}
.contact-links__item{border-top:1px solid var(--teal-dim);padding:clamp(1.5rem,3vh,3rem) 0;display:grid;grid-template-columns:110px 1fr auto;gap:clamp(.8rem,2.5vw,2rem);align-items:baseline;text-align:left;transition:border-color .3s}
.contact-links__item:hover{border-color:var(--teal)}
.contact-links__item:last-child{border-bottom:1px solid var(--teal-dim)}
.contact-links__label{font-family:var(--font-mono);font-size:.65rem;font-weight:700;letter-spacing:.18em;color:var(--teal)}
.contact-links__value{font-family:var(--font-display);font-size:clamp(1.1rem,2.5vw,1.8rem);font-weight:700}
.contact-links__value a{border-bottom:1px solid rgba(42,122,122,.3);transition:border-color .2s,color .2s}
.contact-links__value a:hover{border-color:var(--teal);color:var(--teal)}
.contact-links__arrow{font-family:var(--font-mono);font-size:1.1rem;color:var(--ink-3);transition:color .25s}
.contact-links__item:hover .contact-links__arrow{color:var(--teal)}
.contact-form{max-width:600px;margin:0 auto;padding:0 var(--pad) var(--section-gap)}
.contact-form__field{margin-bottom:1.2rem}
.contact-form__label{display:block;font-family:var(--font-mono);font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:.4rem;transition:color .3s}
.contact-form__field:focus-within .contact-form__label{color:var(--accent)}
.contact-form__input,.contact-form__textarea{width:100%;font-family:var(--font-mono);font-size:.82rem;padding:.7rem .9rem;background:transparent;border:1px solid var(--teal-dim);color:var(--ink);outline:none;transition:border-color .3s,box-shadow .3s;border-radius:0}
.contact-form__input:focus,.contact-form__textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-dim)}
.contact-form__textarea{min-height:120px;resize:vertical}
.contact-form__submit{font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.9rem 2.2rem;background:var(--teal);color:var(--paper);border:1px solid var(--teal);cursor:pointer;transition:background .25s,color .25s,box-shadow .3s}
.contact-form__submit:hover{background:var(--ink);color:var(--paper);box-shadow:0 0 20px rgba(42,37,32,.2)}

body.page-sub main{max-width:100%;margin:0 auto;padding:0}
body.page-sub .section{padding-left:var(--pad);padding-right:var(--pad)}
body.page-sub .services-list,
body.page-sub .pricing,
body.page-sub .process,
body.page-sub .contact-links,
body.page-sub .contact-form,
body.page-sub .capabilities,
body.page-sub .toolkit{max-width:100%;padding-left:var(--pad);padding-right:var(--pad)}

.hero__letterbox{position:absolute;left:0;right:0;height:clamp(18px,3vh,35px);background:var(--ink);z-index:5;pointer-events:none}
.hero__letterbox--top{top:0}
.hero__letterbox--bottom{bottom:0}

.timecode{position:fixed;bottom:1.5rem;left:1.5rem;z-index:calc(var(--z-fx)+1);font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;color:var(--teal-light);opacity:0;pointer-events:none;display:flex;align-items:center;gap:.6rem;transform:translateY(160%);transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s ease}
.timecode__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse-dot 1s ease-in-out infinite}
.timecode__label{color:var(--ink-3);font-size:.5rem;letter-spacing:.15em}

.filmstrip{display:flex;align-items:center;justify-content:center;gap:0;padding:0;overflow:hidden;height:40px;background:var(--ink);position:relative}
.filmstrip__track{display:flex;gap:0;animation:filmScroll 20s linear infinite}
.filmstrip__hole{width:18px;height:12px;border:1px solid rgba(110,198,198,.15);border-radius:2px;margin:0 8px;flex-shrink:0}
@keyframes filmScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.work__play{position:absolute;top:50%;right:0;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1.5px solid var(--teal-dim);display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s,transform .3s;opacity:0}
.work__item:hover .work__play{opacity:1}
.work__play::after{content:'';display:block;width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--teal);margin-left:2px;transition:border-color .3s}
.work__play:hover{border-color:var(--teal);background:var(--teal);transform:translateY(-50%) scale(1.1)}
.work__play:hover::after{border-color:transparent transparent transparent var(--paper)}
.work__item{position:relative}

.clap-divider{display:flex;align-items:center;justify-content:center;padding:clamp(1rem,2vh,2rem) var(--pad);gap:1rem}
.clap-divider__bar{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--teal-dim),transparent)}
.clap-divider__icon{font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.15em;color:var(--teal);opacity:.5;white-space:nowrap}

.reel__wrap::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(42,37,32,.15) 0%,transparent 15%,transparent 85%,rgba(42,37,32,.15) 100%);pointer-events:none}

.hero__rec{position:absolute;top:clamp(40px,5vh,65px);right:var(--pad);z-index:6;display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.55rem;font-weight:700;letter-spacing:.12em;color:var(--accent);opacity:.7}
.hero__rec::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse-dot 1.5s ease-in-out infinite}
.hero__fps{position:absolute;top:clamp(40px,5vh,65px);left:var(--pad);z-index:6;font-family:var(--font-mono);font-size:.55rem;font-weight:700;letter-spacing:.1em;color:var(--teal-light);opacity:.5}

.fx-grain{position:fixed;inset:0;z-index:calc(var(--z-fx)-1);pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:256px 256px;animation:grainShift .8s steps(4) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,2px)}100%{transform:translate(0,0)}}

.section__marker{font-family:var(--font-mono);font-size:.5rem;font-weight:700;letter-spacing:.2em;color:var(--teal);opacity:.3;text-align:center;margin-bottom:.5rem}

.waveform{display:flex;align-items:end;justify-content:center;gap:2px;height:20px;padding:1rem 0}
.waveform__bar{width:2px;background:var(--teal);opacity:.2;border-radius:1px;animation:waveformPulse 1.2s ease-in-out infinite}
.waveform__bar:nth-child(2n){animation-delay:.2s}
.waveform__bar:nth-child(3n){animation-delay:.4s}
.waveform__bar:nth-child(5n){animation-delay:.6s}
@keyframes waveformPulse{0%,100%{height:4px}50%{height:16px}}

.hero__typewriter{font-family:var(--font-mono);font-size:clamp(.55rem,1vw,.72rem);font-weight:500;letter-spacing:.2em;color:var(--teal);margin-bottom:.6rem;text-transform:uppercase;min-height:1.2em;text-align:center}
.hero__typewriter .tw-cursor{display:inline-block;width:2px;height:1em;background:var(--teal);margin-left:2px;vertical-align:text-bottom;animation:blink .8s step-end infinite}

.tw-type{opacity:0;transform:translateY(20px)}
.tw-type.tw-active{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s ease}
.tw-type::after{display:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.text-highlight{color:var(--teal);font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--teal);padding-bottom:1px;transition:color .3s,border-color .3s,background .3s}
.text-highlight:hover{color:var(--paper);background:var(--teal);border-color:var(--teal);padding:0 4px 2px}

.tech-chars{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.tech-char{position:absolute;font-family:var(--font-mono);font-size:.7rem;color:var(--teal);opacity:0;animation:floatChar 8s linear infinite;will-change:transform,opacity}
@keyframes floatChar{0%{transform:translateY(100vh) rotate(0deg);opacity:0}10%{opacity:.12}90%{opacity:.12}100%{transform:translateY(-10vh) rotate(360deg);opacity:0}}

.live-clock{position:fixed;bottom:1.5rem;right:1.5rem;z-index:calc(var(--z-fx)+1);font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;color:var(--teal-light);opacity:0;pointer-events:none;display:flex;align-items:center;gap:.6rem;transform:translateY(160%);transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s ease}
.live-clock::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulse-dot 2s ease-in-out infinite}

/* Slide UP bottom bars when scrolling */
body.is-scrolled .timecode,
body.is-scrolled .live-clock{transform:translateY(0%);opacity:.6}

/* ═══════════════════════════════════════════════════════
   SCROLL-DRIVEN ANIMATION SYSTEM
   ═══════════════════════════════════════════════════════ */

/* SMART NAV — scroll-aware hide/show + glassmorphism */
.nav{position:fixed;top:0;left:0;width:100%;z-index:1000;display:flex;justify-content:space-between;align-items:center;padding:1.5rem var(--pad);transition:all .4s cubic-bezier(.4,0,.2,1);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.nav--scrolled{background:rgba(8,14,26,0.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-top:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(56,189,248,0.15)}
.nav__logo{display:flex;align-items:center;gap:0.8rem;z-index:1001}
.nav__logo-img{width:32px;height:32px;object-fit:contain}
.nav__logo-text{font-family:var(--font-mono);font-size:0.85rem;font-weight:700;letter-spacing:0.15em;color:#f8fafc}

/* Enhanced Progress Bar — glow at leading edge */
.scroll-progress{position:fixed;top:0;left:0;z-index:calc(var(--z-fx)+1);width:100%;height:3px;background:linear-gradient(90deg,var(--teal),var(--accent),var(--teal-light));transform-origin:0 0;transform:scaleX(0);transition:box-shadow .3s}
.scroll-progress::after{content:'';position:absolute;top:-2px;right:-1px;width:12px;height:7px;border-radius:50%;background:var(--teal-light);box-shadow:0 0 14px 4px var(--progress-glow),0 0 30px 8px rgba(110,198,198,.2);opacity:0;transition:opacity .2s}
.scroll-progress.has-glow::after{opacity:1}

/* Section reveal — fully visible */
.section--reveal{clip-path:none;opacity:1}

/* Parallax wrapper */
[data-speed]{will-change:transform}

/* Horizontal Work Scroll */
.work--horizontal{overflow:hidden;min-height:100vh;display:flex;flex-direction:column;justify-content:center;background:var(--ink);color:var(--paper)}
.work--horizontal .section__eyebrow{color:var(--teal-light)}
.work--horizontal .section__heading{color:#f8fafc!important;text-shadow:0 4px 30px rgba(56,189,248,0.25)}
.work--horizontal .work__grid{display:flex;flex-direction:row;flex-wrap:nowrap;gap:clamp(1.5rem,3vw,3rem);max-width:none;width:max-content;padding:0 var(--pad)}
.work--horizontal .work__item{
  min-width:clamp(320px,42vw,520px);
  flex-shrink:0;
  border:1px solid rgba(56,189,248,0.25);
  border-radius:var(--radius);
  background:var(--dark-blue-card);
  padding:clamp(1.8rem,3.5vh,3rem) clamp(1.5rem,2.5vw,2.5rem);
  grid-template-columns:1fr;
  gap:1rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s ease,border-color .3s,box-shadow .3s;
}
.work--horizontal .work__item:hover{
  border-color:var(--teal-light);
  box-shadow:0 15px 45px rgba(56,189,248,0.3);
  transform:translateY(-6px);
}
.work--horizontal .work__num{padding-top:0;color:var(--teal-light);font-size:.95rem;font-weight:700;letter-spacing:.15em}
.work--horizontal .work__client{
  color:#f8fafc!important;
  font-size:clamp(1.5rem,3.5vw,2.5rem);
  font-weight:700;
  line-height:1.15;
  transition:color .3s ease,text-shadow .3s ease;
}
.work--horizontal .work__item:hover .work__client{
  color:var(--teal-light)!important;
  text-shadow:0 0 25px rgba(56,189,248,0.7);
}
.work--horizontal .work__desc{
  color:#cbd5e1!important;
  font-size:.85rem;
  line-height:1.6;
  margin-top:.6rem;
  opacity:.95;
}
.work--horizontal .work__play{position:relative;top:auto;right:auto;transform:none;opacity:1;margin-top:1rem;border-color:rgba(56,189,248,0.35)}
.work--horizontal .work__play::after{border-color:transparent transparent transparent var(--teal-light)}

/* Velocity-responsive marquee */
.marquee__track{transition:none}
.marquee.is-fast .marquee__track span{opacity:.2}

/* Section color transitions */
.section{transition:background-color .6s ease,color .6s ease}

/* Clap divider animation */
.clap-divider{overflow:hidden}
.clap-divider__bar{transform:scaleX(0);transform-origin:center;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.clap-divider__icon{opacity:0;transform:translateY(8px);transition:opacity .5s ease .3s,transform .5s ease .3s}
.clap-divider.is-visible .clap-divider__bar{transform:scaleX(1)}
.clap-divider.is-visible .clap-divider__icon{opacity:.5;transform:translateY(0)}

/* Footer curtain raise */
.footer{clip-path:inset(100% 0 0 0);transition:clip-path .8s cubic-bezier(.4,0,.2,1)}
.footer.is-visible{clip-path:inset(0 0 0 0)}

/* Scroll-linked character reveal for headings */
.char-reveal{display:inline-block;opacity:0;transform:translateY(40px) rotateX(-60deg);transform-origin:bottom center;transition:none;will-change:transform,opacity}
.char-reveal.is-visible{opacity:1;transform:translateY(0) rotateX(0deg)}

/* Enhanced section eyebrow with dash animation */
.section__eyebrow{position:relative}
.section__eyebrow::before{content:'';display:inline-block;width:0;height:1.5px;background:var(--teal);margin-right:.5rem;vertical-align:middle;transition:width .6s cubic-bezier(.4,0,.2,1)}
.section__eyebrow.is-visible::before{width:20px}

/* Work item hover micro-interactions enhancement */
.work__item{transform:translateX(0);transition:transform .5s cubic-bezier(.4,0,.2,1),border-color .3s ease,opacity .6s ease}

/* Stagger cascade for children */
.cascade-child{opacity:0;transform:translateY(30px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.cascade-child.is-visible{opacity:1;transform:translateY(0)}

/* Smooth section background transitions */
.section[data-section-color="dark"]{background:var(--ink);color:var(--paper)}
.section[data-section-color="dark"] .section__eyebrow{color:var(--teal-light)}
.section[data-section-color="dark"] .section__heading{color:var(--paper)}

/* Scroll indicator animation */
@keyframes scrollPulse{0%,100%{opacity:.5;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(-6px)}}

/* Progress section indicators */
.scroll-progress__marker{position:fixed;top:3px;z-index:calc(var(--z-fx)+2);width:2px;height:8px;background:var(--teal-light);opacity:0;transition:opacity .3s;pointer-events:none}

@media(max-width:768px){
  .studio{grid-template-columns:1fr;gap:2.5rem}
  .work__item{grid-template-columns:40px 1fr;gap:.8rem}
  .service-item{grid-template-columns:1fr;gap:.8rem}
  .pricing__grid{grid-template-columns:1fr}
  .toolkit__grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .services-grid{grid-template-columns:1fr}
  .testimonials__grid{grid-template-columns:1fr}
  .hero__line--big{font-size:clamp(3rem,18vw,12rem)}
  .page-hero__title{font-size:clamp(2.5rem,10vw,6rem)}
  .contact-hero__title{font-size:clamp(2.5rem,12vw,8rem)}
  .cta__heading{font-size:clamp(2rem,8vw,5rem)}
  .section__heading{font-size:clamp(1.6rem,5vw,3rem)}
  .statement__heading{font-size:clamp(1.4rem,4vw,2.5rem)}
  .nav__logo-text{display:none}
  /* Disable horizontal scroll on mobile */
  .work--horizontal .work__grid{flex-direction:column;width:auto;gap:0}
  .work--horizontal .work__item{min-width:100%;border-left:none;border-top:1px solid var(--teal-dim);padding:clamp(1rem,2vh,2rem) 0}
  .work--horizontal .work__item:last-child{border-bottom:1px solid var(--teal-dim);border-right:none}
}
@media(max-width:560px){
  :root{--pad:1rem;--section-gap:clamp(3rem,8vh,5rem)}
  .hero__line--big{font-size:clamp(3rem,20vw,6rem);gap:0}
  .hero__line--top{font-size:clamp(1.2rem,5vw,2.5rem)}
  .hero__pre{font-size:.5rem;letter-spacing:.15em}
  .hero__tagline{font-size:.55rem}
  .page-hero{min-height:40vh}
  .page-hero__title{font-size:clamp(2rem,12vw,4rem)}
  .contact-hero{height:auto;min-height:80svh;padding:var(--pad)}
  .contact-hero__title{font-size:clamp(2rem,14vw,5rem)}
  .contact-hero__sub{font-size:.6rem}
  .section__heading{font-size:clamp(1.3rem,6vw,2rem)}
  .section__eyebrow{font-size:.55rem}
  .statement__heading{font-size:clamp(1.2rem,5vw,2rem)}
  .statement__text{font-size:.95rem;text-align:left}
  .studio__statement{font-size:.9rem}
  .work__item{grid-template-columns:1fr;gap:.3rem}
  .work__num{padding-top:0;font-size:.6rem}
  .work__client{font-size:clamp(1rem,4vw,1.5rem)}
  .footer__row{flex-direction:column;align-items:center;text-align:center}
  .footer__links{flex-direction:column;align-items:center;gap:.8rem}
  .contact-links__item{grid-template-columns:1fr;gap:.4rem}
  .contact-links__value{font-size:clamp(.9rem,4vw,1.3rem)}
  .process__step{grid-template-columns:1fr;gap:.4rem}
  .cta__heading{font-size:clamp(1.8rem,10vw,3.5rem)}
  .cta__btn{padding:.7rem 1.4rem;font-size:.65rem}
  .pricing__card{padding:1rem}
  .pricing__price{font-size:1.5rem}
  .capabilities__grid{grid-template-columns:1fr 1fr}
  .capability{padding:.8rem}
  .capability__name{font-size:.8rem}
  .capability__tools{font-size:.6rem}
  .service-item{padding:1rem 0}
  .service-name{font-size:clamp(1rem,4vw,1.4rem)}
  .service-detail{font-size:.7rem}
  .service-tags{gap:.3rem}
  .service-tag{font-size:.5rem;padding:.15rem .35rem}
  .reel__wrap{border-width:1px}
  .footer__copy{font-size:.5rem}
  .marquee__track span{font-size:clamp(1rem,5vw,2rem)}
  .stats{gap:1rem;padding:2rem var(--pad)}
  .stat__num{font-size:1.5rem}
  .stat__label{font-size:.5rem}
  .contact-form__input,.contact-form__textarea{font-size:.75rem;padding:.6rem .7rem}
  .menu-overlay__link{font-size:clamp(2rem,10vw,4rem)}
  .nav__menu-btn span{display:none}
  .nav__bars{width:16px}
  .nav__bars i{height:2px}
  .hero__scroll{bottom:1rem;font-size:.5rem}
  .exp-badge{font-size:.6rem;padding:.4rem .8rem}
  .studio__services li{font-size:.7rem;padding:.6rem 0}
  .team__names{font-size:clamp(1rem,4vw,1.5rem)}
  .hero__typewriter{font-size:.5rem;letter-spacing:.12em}
  .live-clock{bottom:1rem;right:1rem;font-size:.5rem}
  .tech-chars{display:block}
}
@media(max-width:380px){
  :root{--pad:.75rem}
  .capabilities__grid{grid-template-columns:1fr}
  .hero__line--big{font-size:clamp(2.5rem,22vw,4.5rem)}
  .page-hero__title{font-size:clamp(1.8rem,14vw,3rem)}
  .contact-hero__title{font-size:clamp(1.8rem,16vw,3.5rem)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  .section--reveal,.char-reveal,.cascade-child{opacity:1!important;transform:none!important;clip-path:none!important}
  .clap-divider__bar{transform:scaleX(1)!important}
  .clap-divider__icon{opacity:.5!important;transform:none!important}
  .footer{clip-path:none!important}
  .nav{transform:none!important}
}
/* dossier */
.dossier { display: flex; flex-direction: column; gap: 1.4rem; }
.dossier__card {
  border: var(--bw) solid var(--ink);
  background: var(--paper);
  padding: 1.4rem;
  box-shadow: var(--shadow-hard);
  position: relative;
}
.dossier__card--main { transform: rotate(-0.5deg); }
.dossier__card--edu { transform: rotate(0.7deg); background: var(--acid); }
.dossier__label {
  display: inline-block;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em;
  background: var(--ink); color: var(--acid);
  padding: 0.3rem 0.55rem;
  margin-bottom: 0.9rem;
}
.dossier__card--edu .dossier__label { color: var(--acid); }
.dossier__text { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.55; font-weight: 500; }
.dossier__text b { background: var(--acid); padding: 0 0.2em; font-weight: 700; }
.dossier__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.1rem; }
.dossier__chips span, .exp-card__tags span {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
  border: 2px solid var(--ink);
  padding: 0.28rem 0.55rem;
  transition: background 0.15s, color 0.15s;
}
.dossier__chips span:hover { background: var(--ink); color: var(--acid); }
.dossier__big {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  line-height: 1.1; letter-spacing: 0.01em;
}
.dossier__arrow { color: var(--hot); }

.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow-hard);
  background: var(--ink);
}
.stat {
  background: var(--paper);
  padding: 1.2rem 1.1rem 1rem;
  outline: 1.5px solid var(--ink);
  transition: background 0.15s;
}
.stat:hover { background: var(--acid); }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
}
.stat__label { display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; margin-top: 0.45rem; opacity: 0.75; }

/* stack ticker */
.ticker--stack {
  background: var(--ink); color: var(--paper);
  border-top: var(--bw) solid var(--ink);
  border-bottom: var(--bw) solid var(--ink);
  padding: 0.9rem 0;
}
.stack-item {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.12em;
  margin-right: 2.6rem;
}
.stack-item img { width: 30px; height: 30px; object-fit: contain; filter: grayscale(1) brightness(1.6); transition: filter 0.2s; }
.stack-item:hover img { filter: none; }
.stack-item .x { color: var(--hot); }

/* ============================================================
   02 / EXPERIENCE
   ============================================================ */
.exp { background: var(--ink); color: var(--paper); }

.exp__grid {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}
.exp__rail { position: relative; }
.exp { overflow: visible !important; }
.exp__rail-inner {
  position: sticky; top: 80px;
  height: calc(100svh - 110px);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.exp__year {
  font-family: var(--font-display);
  font-size: 2.4rem; letter-spacing: 0.04em;
  color: var(--acid);
  border: var(--bw) solid var(--acid);
  padding: 0.1em 0.35em;
  min-width: 4.4ch; text-align: center;
  position: relative;
  z-index: 20;
  background: var(--ink);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.9);
}
.exp__rail-foot { font-size: 0.6rem; letter-spacing: 0.18em; color: var(--paper-3); }

.ladder {
  position: relative; flex: 1; width: 120px;
  overflow: hidden;
}
.ladder__rail {
  position: absolute; top: 0; bottom: 0; width: 6px;
  background: var(--paper);
  left: 18px;
}
.ladder__rail--r { left: auto; right: 18px; }
.ladder__rung {
  position: absolute; left: 18px; right: 18px; height: 4px;
  background: var(--paper-3);
  transition: background 0.3s, box-shadow 0.3s;
}
.ladder__rung.active {
  background: var(--acid);
  box-shadow: 0 0 10px var(--acid);
}
.ladder__rung:nth-child(3) { top: 4%; } .ladder__rung:nth-child(4) { top: 12.7%; }
.ladder__rung:nth-child(5) { top: 21.4%; } .ladder__rung:nth-child(6) { top: 30.1%; }
.ladder__rung:nth-child(7) { top: 38.8%; } .ladder__rung:nth-child(8) { top: 47.5%; }
.ladder__rung:nth-child(9) { top: 56.2%; } .ladder__rung:nth-child(10) { top: 64.9%; }
.ladder__rung:nth-child(11) { top: 73.6%; } .ladder__rung:nth-child(12) { top: 82.3%; }
.ladder__rung:nth-child(13) { top: 91%; } .ladder__rung:nth-child(14) { top: 99%; }

.climber {
  position: absolute; left: 50%; bottom: 2%;
  width: 132px; margin-left: -66px;
  will-change: bottom;
  z-index: 5;
  filter: sepia(0.65) hue-rotate(330deg) saturate(2.4) brightness(0.92) drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.5));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.climber:hover {
  transform: scale(1.08);
}
.climber img { width: 100%; }

.exp__list { display: flex; flex-direction: column; gap: clamp(2rem, 5vh, 3.5rem); padding-bottom: 12vh; }
.exp-card {
  position: relative;
  border: var(--bw) solid var(--paper);
  background: var(--ink-2);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: 8px 8px 0 rgba(242, 238, 227, 0.12);
  transition: box-shadow 0.25s, border-color 0.25s, background 0.25s, transform 0.25s;
  overflow: hidden;
}
.exp-card.active {
  border-color: var(--acid);
  box-shadow: var(--shadow-acid);
  transform: translate(-3px, -3px);
}
.exp-card__ghost {
  position: absolute; right: -0.05em; top: -0.18em;
  font-family: var(--font-display);
  font-size: clamp(5rem, 11vw, 9rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(242, 238, 227, 0.14);
  pointer-events: none;
}
.exp-card.active .exp-card__ghost { -webkit-text-stroke-color: rgba(200, 255, 0, 0.3); }
.exp-card__date { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; color: var(--hot); }
.exp-card__company {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.4vw, 3.8rem);
  line-height: 1; letter-spacing: 0.01em;
  margin: 0.35em 0 0.18em;
}
.exp-card__role { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; color: var(--acid); margin-bottom: 0.9rem; }
.exp-card__desc { max-width: 56ch; color: var(--paper-2); font-size: 0.98rem; }
.exp-card__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.1rem; }
.exp-card__tags span { border-color: var(--paper-3); color: var(--paper-2); }
.exp-card__tags span:hover { background: var(--paper); color: var(--ink); }
.exp-card--now { border-style: dashed; }
.exp-card--now .exp-card__company { color: var(--acid); }

/* ============================================================
   03 / HEMANG_OS  (CRT scene → OS)
   ============================================================ */
.os-zone { position: relative; background: var(--ink); height: 430vh; }

/* ═══════════════════════════════════════════════════════
   ADVANCED ANIMATION & SPOTLIGHT SHEEN STYLES
   ═══════════════════════════════════════════════════════ */
.work__item, .exp-card, .capability, .toolkit__card, .services-grid__card, .pricing__card, .dossier__card {
  position: relative;
  overflow: hidden;
  will-change: transform;
  transform-style: preserve-3d;
}
.work__item::after, .exp-card::after, .capability::after, .toolkit__card::after, .services-grid__card::after, .pricing__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(550px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(56, 189, 248, 0.18), transparent 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 2;
}
.work__item:hover::after, .exp-card:hover::after, .capability:hover::after, .toolkit__card:hover::after, .services-grid__card:hover::after, .pricing__card:hover::after {
  opacity: 1;
}

.cta__btn, .work__play, .nav__menu-btn, .exp-badge, .nav__logo {
  will-change: transform;
}