/* ============================================================
   AdWow Studio — style.css
   Palette and type sampled from "aw studio web rev 7_12_26.pdf"
   ============================================================ */

:root{
  --bg-0:#200f3a;          /* top of page gradient  */
  --bg-1:#1a0c30;          /* mid                   */
  --bg-2:#0e162b;          /* deep teal-navy bottom */
  --ink:#f5f1fb;           /* primary text          */
  --ink-soft:#c9b8e4;      /* secondary text        */
  --ink-mute:#9a87bf;      /* fine print            */
  --magenta:#ff00ff;       /* nav active / accent   */
  --magenta-soft:#ff5fe0;
  --purple:#7d4ae2;        /* hub nodes             */
  --purple-hi:#946ae7;
  --indigo:#1b1151;        /* media frames          */
  --gold:#f2c14e;          /* highlighted stat      */
  --teal:#45d0bf;          /* italic pull lines     */
  --surface:rgba(255,255,255,.045);
  --stroke:rgba(255,255,255,.12);

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",system-ui,"Segoe UI",Arial,sans-serif;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:180ms;
  --t-med:280ms;

  --z-nav:100;
  --z-toast:1000;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:clip}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 85% -5%, rgba(125,74,226,.22), transparent 60%),
    radial-gradient(1000px 800px at -10% 40%, rgba(255,0,255,.07), transparent 55%),
    linear-gradient(178deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--magenta-soft);outline-offset:3px;border-radius:4px}

.container{width:min(1160px,92vw);margin-inline:auto}
.sm-hide{display:none}
@media(min-width:768px){.sm-hide{display:inline}}

/* ---------- typography ---------- */
.display{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3.4rem);
  line-height:1.12;
  letter-spacing:.2px;
  margin:0 0 .5em;
}
.display em{font-style:italic;color:var(--magenta-soft)}
.section-sub{
  max-width:56ch;
  color:var(--ink-soft);
  font-size:clamp(1rem,1.35vw,1.13rem);
  margin:0 0 2rem;
}
.section-sub.italic{font-family:var(--serif);font-style:italic}
.src{display:inline-block;font-size:.78rem;color:var(--ink-mute)}
.kicker{
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.72rem;
  font-weight:600;
  color:var(--teal);
  margin:0 0 1.2rem;
}

/* ============ NAV ============ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem clamp(1rem,4vw,3rem);
  background:rgba(32,15,58,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:padding var(--t-med) var(--ease-out),background var(--t-med),border-color var(--t-med);
}
.nav.scrolled{
  padding-block:.55rem;
  background:rgba(26,12,48,.85);
  border-bottom-color:var(--stroke);
}
.brand{display:flex;align-items:center;text-decoration:none}
.brand-logo{
  height:30px;width:auto;display:block;color:#fff;
  transition:transform var(--t-med) var(--ease-out),opacity var(--t-fast);
}
.brand:hover .brand-logo{transform:scale(1.04);opacity:.92}
.nav-links{display:flex;gap:clamp(.6rem,2vw,1.9rem)}
.nav-links a{
  position:relative;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;
  color:var(--ink);
  padding:.85rem .25rem;   /* ≥44px touch target */
  transition:color var(--t-fast);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:.55rem;height:2px;
  background:var(--magenta);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-med) var(--ease-out);
}
.nav-links a:hover{color:var(--magenta-soft)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--magenta)}
.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:10px;
  background:none;border:0;cursor:pointer;
}
.nav-burger span{height:2px;background:#fff;border-radius:2px;transition:transform var(--t-med) var(--ease-out),opacity var(--t-fast)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:820px){
  .nav-burger{display:flex}
  .nav-links{
    position:fixed;top:64px;right:0;left:0;
    flex-direction:column;align-items:center;gap:0;
    padding:1rem 0 1.5rem;
    background:rgba(20,9,38,.97);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--stroke);
    transform:translateY(-115%);
    transition:transform var(--t-med) var(--ease-out);
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:.9rem 2rem;font-size:.85rem}
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex;align-items:center;
  padding:7.5rem 0 4rem;
  overflow:hidden;
}
.aurora{position:absolute;inset:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;will-change:transform}
.blob-1{
  width:52vw;height:52vw;left:-14vw;top:-12vw;
  background:radial-gradient(circle,rgba(125,74,226,.34) 0%,rgba(125,74,226,.12) 40%,transparent 68%);
  animation:drift1 26s ease-in-out infinite alternate;
}
.blob-2{
  width:44vw;height:44vw;right:-12vw;top:20%;
  background:radial-gradient(circle,rgba(255,0,255,.13) 0%,rgba(255,0,255,.05) 40%,transparent 68%);
  animation:drift2 32s ease-in-out infinite alternate;
}
.blob-3{
  width:40vw;height:40vw;left:28%;bottom:-20vw;
  background:radial-gradient(circle,rgba(69,208,191,.10) 0%,transparent 65%);
  animation:drift1 40s ease-in-out infinite alternate-reverse;
}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,4vw) scale(1.15)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-5vw,6vh) scale(.9)}}

.hero-inner{
  position:relative;
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.hero-title{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(2.5rem,6vw,4.6rem);
  line-height:1.06;letter-spacing:.2px;
  margin:0 0 1.4rem;
}
.hero-title em{font-style:italic;background:linear-gradient(100deg,var(--magenta) 0%,var(--purple-hi) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-title .line>span{
  display:inline-block;
  transform:translateY(110%);
  animation:riseIn .9s var(--ease-out) forwards;
}
.hero-title .line:nth-child(2)>span{animation-delay:.12s}
.hero-title .line:nth-child(3)>span{animation-delay:.24s}
@keyframes riseIn{to{transform:translateY(0)}}
.hero-sub{max-width:44ch;color:var(--ink-soft);font-size:clamp(1rem,1.4vw,1.15rem);margin:0 0 2.2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}

/* buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.9rem 2.1rem;
  border-radius:999px;border:1px solid transparent;
  font:700 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-med),background var(--t-med),border-color var(--t-med);
  overflow:hidden;
}
.btn:active{transform:scale(.97)}
.btn-primary{
  color:#fff;
  background:linear-gradient(100deg,#c400d9 0%,var(--purple) 100%);
  box-shadow:0 8px 30px -8px rgba(196,0,217,.55);
}
.btn-primary::before{ /* sheen sweep */
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease-out);
}
.btn-primary:hover{box-shadow:0 12px 38px -8px rgba(196,0,217,.8);transform:translateY(-2px)}
.btn-primary:hover::before{transform:translateX(120%)}
.btn-ghost{color:var(--ink);border-color:var(--stroke);background:var(--surface)}
.btn-ghost:hover{border-color:var(--magenta-soft);color:var(--magenta-soft);transform:translateY(-2px)}

/* hero media */
.hero-media{margin:0;perspective:1000px}
.hero-frame{
  position:relative;border-radius:18px;overflow:hidden;
  background:var(--indigo);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.65),0 0 0 1px var(--stroke);
  transform:rotate(1.5deg);
  transition:transform .5s var(--ease-out),box-shadow .5s;
}
.hero-frame:hover{transform:rotate(0deg) scale(1.015)}
.hero-frame video{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
}
.play-badge{
  position:absolute;inset:0;margin:auto;width:84px;height:84px;
  display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:rgba(27,17,81,.45);color:#fff;cursor:pointer;
  backdrop-filter:blur(6px);
  transition:transform var(--t-med) var(--ease-spring),background var(--t-med),opacity var(--t-med);
}
.play-badge svg{width:34px;height:34px}
.play-badge .ic-play{margin-left:4px}
.play-badge::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.play-badge:hover{transform:scale(1.1);background:rgba(196,0,217,.5)}
/* icon + visibility states: .playing set on .hero-frame by script */
.play-badge .ic-pause{display:none}
.hero-frame.playing .play-badge .ic-play{display:none}
.hero-frame.playing .play-badge .ic-pause{display:block}
.hero-frame.playing .play-badge{opacity:0}
.hero-frame.playing .play-badge::after{animation:none}
.hero-frame.playing:hover .play-badge,
.hero-frame.playing .play-badge:focus-visible{opacity:1}
.mute-badge{
  position:absolute;right:1rem;bottom:1rem;
  width:46px;height:46px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(14,10,40,.55);color:#fff;cursor:pointer;
  backdrop-filter:blur(4px);
  transition:transform var(--t-fast) var(--ease-out),background var(--t-fast);
}
.mute-badge svg{width:22px;height:22px}
.mute-badge:hover{transform:scale(1.1);background:rgba(196,0,217,.5)}
.mute-badge .ic-sound{display:none}
.mute-badge[aria-pressed="true"] .ic-muted{display:none}
.mute-badge[aria-pressed="true"] .ic-sound{display:block}
.fs-badge{
  position:absolute;right:4.3rem;bottom:1rem;
  width:46px;height:46px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(14,10,40,.55);color:#fff;cursor:pointer;
  backdrop-filter:blur(4px);
  transition:transform var(--t-fast) var(--ease-out),background var(--t-fast);
}
.fs-badge svg{width:22px;height:22px}
.fs-badge:hover{transform:scale(1.1);background:rgba(196,0,217,.5)}
.fs-badge .ic-compress{display:none}
.fs-badge::before{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 12px);right:-4px;
  white-space:nowrap;
  background:rgba(14,10,40,.92);
  border:1px solid rgba(255,95,224,.4);
  color:var(--ink);
  font:600 .68rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  padding:.5rem .85rem;border-radius:8px;
  opacity:0;transform:translateY(6px);
  pointer-events:none;
  transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out);
}
.fs-badge:hover::before,.fs-badge:focus-visible::before{opacity:1;transform:translateY(0)}
/* fullscreen layout: the whole frame goes fullscreen so custom controls stay usable */
.hero-frame:fullscreen{
  transform:none;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  background:#000;
}
.hero-frame:fullscreen video{
  width:100%;height:100%;aspect-ratio:auto;object-fit:contain;
}
.hero-frame:fullscreen .fs-badge .ic-expand{display:none}
.hero-frame:fullscreen .fs-badge .ic-compress{display:block}
.hero-frame:fullscreen .hero-tag{display:none}
.hero-tag{
  position:absolute;left:1rem;top:1rem;
  font-family:var(--serif);font-style:italic;font-size:.95rem;color:#fff;
  background:rgba(14,10,40,.55);backdrop-filter:blur(4px);
  padding:.35rem .9rem;border-radius:999px;
}
.scroll-cue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);opacity:.7;padding:.5rem}
.mouse{display:block;width:26px;height:42px;border:2px solid var(--ink-soft);border-radius:14px;position:relative}
.wheel{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:var(--magenta-soft);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%,100%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .hero{padding-top:6.5rem}
  .hero-frame{transform:none}
}

/* ============ DIFFERENTIATOR ============ */
.differentiator{padding:6.5rem 0 5rem;text-align:left}
.differentiator .display,.differentiator>.container>.section-sub{text-align:center;margin-inline:auto}

/* marquee wall */
.wall{
  margin:3.5rem 0;
  display:grid;gap:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee{overflow:hidden}
.marquee-track{
  display:flex;gap:14px;width:max-content;
  animation:scrollX var(--dur,60s) linear infinite;
}
.marquee-reverse .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollX{to{transform:translateX(-50%)}}
.marquee-track img{
  height:170px;width:auto;border-radius:10px;flex:none;
  box-shadow:0 6px 22px -8px rgba(0,0,0,.6);
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med);
}
.marquee-track img:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 14px 30px -8px rgba(0,0,0,.75)}
@media(min-width:900px){.marquee-track img{height:200px}}

/* stats */
.stats-block{
  display:grid;grid-template-columns:.9fr 1.4fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
  padding-top:2rem;
}
.stat-hero{
  position:sticky;top:110px;
  border:1px solid var(--stroke);border-radius:20px;
  padding:2.2rem 2rem;
  background:linear-gradient(160deg,rgba(125,74,226,.16),rgba(255,0,255,.05));
  text-align:center;
}
.stat-num{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(4rem,8vw,6.5rem);line-height:1;
  background:linear-gradient(120deg,#fff 10%,var(--magenta-soft) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat-hero p{color:var(--ink-soft);margin:.8rem 0 0}
.stats-copy h3{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.3;margin:0 0 1.4rem;
}
.fact-list{list-style:none;margin:0;padding:0}
.fact-list li{
  position:relative;
  padding:1rem 0 1rem 1.6rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--ink-soft);
  font-size:.98rem;
}
.fact-list li::before{
  content:"";position:absolute;left:0;top:1.55rem;
  width:8px;height:8px;border-radius:2px;
  background:var(--purple-hi);
  transform:rotate(45deg);
}
.fact-list li strong{color:var(--ink)}
.fact-list li.gold{color:var(--gold)}
.fact-list li.gold strong{color:var(--gold)}
.fact-list li.gold::before{background:var(--gold)}
@media(max-width:860px){.stats-block{grid-template-columns:1fr}.stat-hero{position:static}}

.pull-quote{margin:4.5rem auto 0;text-align:center;max-width:900px}
.pull-quote p{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.75rem);line-height:1.45;
  color:var(--teal);margin:0 0 1.2rem;
}
.pull-quote cite{font-style:normal;font-size:.75rem;color:var(--ink-mute)}

/* ============ APPROACH ============ */
.approach{padding:6.5rem 0 5rem}
.approach-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.approach h3{font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.45rem);margin:1.5rem 0 1rem}
.flow-list{list-style:none;margin:0;padding:0;counter-reset:flow}
.flow-list li{
  counter-increment:flow;
  position:relative;
  padding:.55rem 0 .55rem 2.6rem;
  color:var(--ink-soft);
}
.flow-list li::before{
  content:counter(flow,decimal-leading-zero);
  position:absolute;left:0;top:.62rem;
  font:700 .68rem/1.8 var(--sans);letter-spacing:.05em;
  width:1.9rem;text-align:center;
  color:var(--magenta-soft);
  border:1px solid rgba(255,95,224,.35);border-radius:6px;
}

/* orbit diagram */
.orbit-wrap{
  position:relative;
  width:min(480px,88vw);aspect-ratio:1;
  margin-inline:auto;
}
.orbit-ring{
  position:absolute;inset:12%;
  border:1.5px dashed rgba(148,106,231,.4);border-radius:50%;
  animation:spin 90s linear infinite reverse;
}
.orbit{position:absolute;inset:0;animation:spin 60s linear infinite}
.orbit:hover,.orbit-wrap:hover .orbit-ring{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}
.node{
  position:absolute;left:50%;top:50%;
  width:112px;height:112px;margin:-56px 0 0 -56px;
  transform:rotate(var(--a)) translate(calc(min(480px,88vw)/2 - 62px)) rotate(calc(-1 * var(--a)));
}
.node span{
  display:grid;place-items:center;text-align:center;
  width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,var(--purple-hi),var(--purple) 70%);
  box-shadow:0 10px 26px -8px rgba(125,74,226,.7),inset 0 1px 0 rgba(255,255,255,.25);
  font:700 .6rem/1.35 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:#fff;
  padding:.5rem;
  animation:spin 60s linear infinite reverse; /* counter-rotate to stay upright */
  transition:transform var(--t-med) var(--ease-spring),box-shadow var(--t-med);
}
.orbit:hover .node span{animation-play-state:paused}
.node span:hover{transform:scale(1.14);box-shadow:0 14px 34px -6px rgba(255,0,255,.55)}
.orbit-core{
  position:absolute;inset:0;margin:auto;
  width:46%;aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  text-align:center;
  background:radial-gradient(circle at 35% 30%,#8d5cf0,#5f2ec7 75%);
  box-shadow:0 18px 50px -12px rgba(125,74,226,.8),inset 0 2px 0 rgba(255,255,255,.3);
  animation:breathe 5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.core-mark{width:36px;height:36px;color:#fff}
.orbit-core strong{font-size:1.35rem;font-weight:800;letter-spacing:.03em;color:#fff}
.orbit-core small{font:600 .55rem/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85)}
@media(max-width:900px){
  .approach-grid{grid-template-columns:1fr}
  .node{width:92px;height:92px;margin:-46px 0 0 -46px;transform:rotate(var(--a)) translate(calc(min(480px,88vw)/2 - 46px)) rotate(calc(-1 * var(--a)))}
  .node span{font-size:.5rem}
  .orbit-core{width:40%}
  .orbit-core strong{font-size:1.05rem}
  .orbit-core small{font-size:.48rem}
  .core-mark{width:26px;height:26px}
}

.tagline{
  font-family:var(--serif);font-style:italic;text-align:center;
  color:var(--teal);font-size:clamp(1.05rem,1.9vw,1.35rem);
  margin:4rem auto 0;max-width:60ch;
}
.rule{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--stroke),transparent);margin:4rem 0}
.approach .display{margin-top:0}
.center-head{
  font-family:var(--serif);text-align:center;
  font-size:clamp(1.15rem,2vw,1.5rem);
  margin:3rem 0 2.5rem;
}

/* positioning rows */
.positions{display:grid;gap:3.2rem}
.pos-row{display:grid;grid-template-columns:170px 1fr;gap:1.5rem;align-items:center}
.pos-label{
  font-family:var(--serif);font-size:1.15rem;color:var(--ink);
  display:flex;align-items:center;gap:.6rem;margin:0;
}
.pos-label .arrow{color:var(--magenta-soft);font-size:1.3rem;animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.pos-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{
  position:relative;margin:0;border-radius:12px;overflow:hidden;
  background:var(--surface);
  box-shadow:0 8px 26px -10px rgba(0,0,0,.6);
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med);
}
.card img{width:100%;height:100%;aspect-ratio:34/44;object-fit:cover;transition:transform .5s var(--ease-out)}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 44px -12px rgba(125,74,226,.5)}
.card:hover img{transform:scale(1.05)}
.card figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.6rem .8rem .6rem;
  font-family:var(--serif);font-style:italic;font-size:.85rem;color:#fff;text-align:center;
  background:linear-gradient(0deg,rgba(14,8,32,.85),transparent);
  opacity:0;transform:translateY(8px);
  transition:opacity var(--t-med),transform var(--t-med) var(--ease-out);
}
.card:hover figcaption{opacity:1;transform:translateY(0)}
@media(max-width:820px){
  .pos-row{grid-template-columns:1fr;gap:.8rem}
  .pos-cards{grid-template-columns:repeat(2,1fr)}
}

/* ============ CAPABILITIES ============ */
.capabilities{padding:6.5rem 0 5rem;text-align:center}
.capabilities .section-sub{margin-inline:auto}
.channel-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  align-items:start;
  margin:2.6rem 0 3rem;
  text-align:left;
}
.channel-col{display:flex;flex-direction:column;gap:18px}
@media(max-width:960px){.channel-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.channel-grid{grid-template-columns:1fr}}
.channel{
  margin:0;
  border:1px solid var(--stroke);border-radius:14px;
  background:var(--surface);
  padding:.9rem .9rem 1rem;
  transition:transform var(--t-med) var(--ease-out),border-color var(--t-med),box-shadow var(--t-med);
}
.channel:hover{
  transform:translateY(-6px);
  border-color:rgba(255,95,224,.5);
  box-shadow:0 18px 40px -14px rgba(125,74,226,.55);
}
.channel figcaption{
  font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal);margin:0 0 .7rem;
}
.channel img{
  width:100%;border-radius:8px;
  transition:transform .45s var(--ease-out);
}
.channel:hover img{transform:scale(1.02)}
.callout{
  max-width:760px;margin:0 auto 5rem;
  padding:1.6rem 2rem;text-align:left;
  border:1px solid rgba(69,208,191,.35);border-radius:14px;
  background:rgba(69,208,191,.06);
}
.callout-kicker{
  display:block;
  font-size:.68rem;font-weight:700;letter-spacing:.35em;text-transform:uppercase;
  color:var(--teal);margin-bottom:.4rem;
}
.callout p{margin:0;font-size:1.05rem}

.autoscale{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
  gap:16px;margin-top:3rem;
}
.as-item{
  margin:0;border-radius:10px;overflow:hidden;flex:none;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.65);
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med);
}
.as-item:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 18px 40px -10px rgba(255,0,255,.35);z-index:2}
.as-item img{height:clamp(140px,24vw,300px);width:auto}
.as-item:nth-child(-n+3) img{height:clamp(200px,30vw,380px)}
.format-strip{
  margin-top:2.4rem;
  font-family:var(--serif);font-style:italic;
  color:var(--ink-mute);font-size:.95rem;letter-spacing:.04em;
}

/* ============ WORK ============ */
.work{padding:6.5rem 0 5rem}
.clients-card{
  margin:2.5rem 0 0;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.7),0 0 0 1px var(--stroke);
  transition:transform .45s var(--ease-out),box-shadow .45s;
}
.clients-card:hover{transform:translateY(-6px);box-shadow:0 40px 90px -25px rgba(125,74,226,.45),0 0 0 1px var(--stroke)}
.clients-card img{width:100%}

/* ============ TEAM ============ */
.team{padding:6.5rem 0 5rem}
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px;margin-top:3rem;
}
.member{
  border:1px solid var(--stroke);border-radius:16px;
  background:var(--surface);
  padding:1.2rem 1.2rem 1.5rem;
  transition:transform var(--t-med) var(--ease-out),border-color var(--t-med),background var(--t-med),box-shadow var(--t-med);
}
.member:hover{
  transform:translateY(-8px);
  border-color:rgba(148,106,231,.55);
  background:rgba(125,74,226,.09);
  box-shadow:0 22px 48px -18px rgba(0,0,0,.7);
}
.member-photo{
  border-radius:12px;overflow:hidden;aspect-ratio:1/1.05;margin-bottom:1.1rem;
  background:var(--indigo);
}
.member-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:transform .5s var(--ease-out),filter .5s}
.member:hover .member-photo img{transform:scale(1.06);filter:saturate(1.05)}
.member-photo.silhouette img{opacity:.9}
.member h3{
  font:800 1.05rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 .3rem;
}
.member .role{color:var(--magenta-soft);font-size:.8rem;font-weight:600;letter-spacing:.06em;margin:0 0 .8rem}
.member .bio{color:var(--ink-soft);font-size:.82rem;line-height:1.65;margin:0 0 .7rem}
.member .edu{color:var(--ink-mute)}

/* ============ CONTACT ============ */
.contact{padding:6.5rem 0 7rem}
.contact-inner{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,6vw,5rem);align-items:start;
}
@media(max-width:860px){.contact-inner{grid-template-columns:1fr}}
.contact-form{
  border:1px solid var(--stroke);border-radius:20px;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  padding:clamp(1.4rem,3vw,2.4rem);
  display:grid;gap:1.15rem;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
.field{position:relative}
.field input,.field textarea{
  width:100%;
  font:500 .95rem/1.4 var(--sans);color:var(--ink);
  background:rgba(14,8,32,.5);
  border:1px solid var(--stroke);border-radius:10px;
  padding:1.35rem 1rem .55rem;
  min-height:52px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.field textarea{resize:vertical;min-height:130px}
.field input:hover,.field textarea:hover{border-color:rgba(255,255,255,.28)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--magenta-soft);
  box-shadow:0 0 0 3px rgba(255,0,255,.18);
  background:rgba(14,8,32,.75);
}
.field label{
  position:absolute;left:1rem;top:.95rem;
  font-size:.92rem;color:var(--ink-mute);
  pointer-events:none;
  transition:transform var(--t-fast) var(--ease-out),font-size var(--t-fast),color var(--t-fast),top var(--t-fast);
}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
  top:.42rem;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--magenta-soft);transform:none;
}
.field label span{color:var(--magenta-soft)}
.field.invalid input,.field.invalid textarea{border-color:#ff5470;box-shadow:0 0 0 3px rgba(255,84,112,.15)}
.err{margin:.4rem 0 0;font-size:.76rem;color:#ff8fa3}
.captcha-row{grid-template-columns:1fr auto;align-items:start}
.captcha{display:flex;align-items:center;gap:.5rem}
#captchaCanvas{border-radius:8px;border:1px solid var(--stroke);background:#efe9f7}
.captcha-refresh{
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:10px;border:1px solid var(--stroke);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;
  transition:transform var(--t-med) var(--ease-spring),color var(--t-fast),border-color var(--t-fast);
}
.captcha-refresh svg{width:20px;height:20px}
.captcha-refresh:hover{color:var(--magenta-soft);border-color:var(--magenta-soft);transform:rotate(180deg)}
.btn-submit{justify-self:center;min-width:220px}
.btn-submit .btn-spinner{
  display:none;width:18px;height:18px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.btn-submit .btn-check{display:none;width:20px;height:20px}
.btn-submit.loading .btn-label,.btn-submit.done .btn-label{display:none}
.btn-submit.loading .btn-spinner{display:block}
.btn-submit.done .btn-check{display:block}
.btn-submit.done{background:linear-gradient(100deg,#0fbf9f,#0a9c82)}
.btn-submit .btn-check path{stroke-dasharray:26;stroke-dashoffset:26;animation:draw .5s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.btn-submit[disabled]{opacity:.7;cursor:default;transform:none}

/* ============ FOOTER ============ */
.footer{
  border-top:1px solid var(--stroke);
  padding:3rem 0 2.5rem;
  background:rgba(10,8,26,.5);
}
.footer-inner{display:grid;justify-items:center;gap:1.4rem;text-align:center}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.6rem}
.footer-links a{
  text-decoration:none;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);padding:.7rem .2rem;
  transition:color var(--t-fast);
}
.footer-links a:hover{color:var(--magenta-soft)}
.fine{margin:0;font-size:.75rem;color:var(--ink-mute)}

/* back to top */
.to-top{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:var(--z-nav);
  width:50px;height:50px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--stroke);
  background:rgba(32,15,58,.8);backdrop-filter:blur(8px);
  color:var(--ink);cursor:pointer;
  opacity:0;transform:translateY(12px);
  transition:opacity var(--t-med),transform var(--t-med) var(--ease-out),background var(--t-fast);
}
.to-top svg{width:22px;height:22px}
.to-top.show{opacity:1;transform:translateY(0)}
.to-top:hover{background:rgba(125,74,226,.5)}

/* toast */
.toast{
  position:fixed;left:50%;bottom:2rem;z-index:var(--z-toast);
  transform:translate(-50%,140%);
  max-width:min(480px,90vw);
  padding:1rem 1.6rem;border-radius:12px;
  background:linear-gradient(120deg,#2a1157,#1b1151);
  border:1px solid rgba(148,106,231,.5);
  box-shadow:0 18px 46px -12px rgba(0,0,0,.8);
  font-size:.92rem;text-align:center;
  transition:transform .45s var(--ease-spring);
}
.toast.show{transform:translate(-50%,0)}

/* ============ SCROLL REVEALS ============ */
.reveal,.reveal-r{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:calc(var(--i,0) * 60ms);
}
.reveal-r{transform:translateX(50px)}

/* scroll-scrubbed reveals: progress follows the wheel (Chrome/Edge);
   the triggered transitions above remain the fallback elsewhere.
   Keyframes drive opacity + translate so transform stays free for hovers. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .reveal,.reveal-r{
      opacity:1;transform:none;transition-delay:0ms;
      animation:revealScrubUp linear both;
      animation-timeline:view();
      animation-range:entry calc(var(--i,0) * 5%) cover calc(26% + var(--i,0) * 5%);
    }
    .reveal-r{animation-name:revealScrubR}
    .reveal.d-1{animation-range:entry 6% cover 32%}
    .reveal.d-2{animation-range:entry 12% cover 38%}
    .reveal.d-3{animation-range:entry 18% cover 44%}
  }
}
@keyframes revealScrubUp{
  from{opacity:0;translate:0 44px}
  to{opacity:1;translate:0 0}
}
@keyframes revealScrubR{
  from{opacity:0;translate:60px 0}
  to{opacity:1;translate:0 0}
}
.d-1{transition-delay:.1s}
.d-2{transition-delay:.2s}
.d-3{transition-delay:.3s}
.in-view{opacity:1;transform:none}
.pos-cards .card:nth-child(1){transition-delay:0ms}
.pos-cards .card:nth-child(2){transition-delay:80ms}
.pos-cards .card:nth-child(3){transition-delay:160ms}
.pos-cards .card:nth-child(4){transition-delay:240ms}

/* flip-in entrance (Positioning 1) */
.pos-cards.flip{perspective:1200px}
.pos-cards.flip .card.reveal{
  transform:rotateY(-95deg) translateY(0);
  transform-origin:left center;
  backface-visibility:hidden;
  transition:transform .85s var(--ease-spring),opacity .45s var(--ease-out);
}
.pos-cards.flip .card.reveal:nth-child(1){transition-delay:0ms}
.pos-cards.flip .card.reveal:nth-child(2){transition-delay:120ms}
.pos-cards.flip .card.reveal:nth-child(3){transition-delay:240ms}
.pos-cards.flip .card.reveal:nth-child(4){transition-delay:360ms}
.pos-cards.flip .card.reveal.in-view{transform:rotateY(0);transition-delay:inherit}
.pos-cards.flip .card.reveal.in-view:nth-child(1){transition-delay:0ms}
.pos-cards.flip .card.reveal.in-view:nth-child(2){transition-delay:120ms}
.pos-cards.flip .card.reveal.in-view:nth-child(3){transition-delay:240ms}
.pos-cards.flip .card.reveal.in-view:nth-child(4){transition-delay:360ms}
.pos-cards.flip .card.reveal.in-view:hover{transform:rotateY(0) translateY(-8px);transition-delay:0ms}

/* flip-in entrance, right-to-left (Positioning 2) */
.pos-cards.flip-r{perspective:1200px}
.pos-cards.flip-r .card.reveal{
  transform:rotateY(95deg) translateY(0);
  transform-origin:right center;
  backface-visibility:hidden;
  transition:transform .85s var(--ease-spring),opacity .45s var(--ease-out);
}
.pos-cards.flip-r .card.reveal:nth-child(4){transition-delay:0ms}
.pos-cards.flip-r .card.reveal:nth-child(3){transition-delay:120ms}
.pos-cards.flip-r .card.reveal:nth-child(2){transition-delay:240ms}
.pos-cards.flip-r .card.reveal:nth-child(1){transition-delay:360ms}
.pos-cards.flip-r .card.reveal.in-view{transform:rotateY(0)}
.pos-cards.flip-r .card.reveal.in-view:nth-child(4){transition-delay:0ms}
.pos-cards.flip-r .card.reveal.in-view:nth-child(3){transition-delay:120ms}
.pos-cards.flip-r .card.reveal.in-view:nth-child(2){transition-delay:240ms}
.pos-cards.flip-r .card.reveal.in-view:nth-child(1){transition-delay:360ms}
.pos-cards.flip-r .card.reveal.in-view:hover{transform:rotateY(0) translateY(-8px);transition-delay:0ms}

/* scroll-scrubbed flips: progress follows the mouse wheel (Chrome/Edge).
   Other browsers keep the triggered flip above. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .pos-cards.flip .card.reveal,
    .pos-cards.flip-r .card.reveal{
      transition:none;
      opacity:1;
      animation:flipScrubL linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 38%;
    }
    .pos-cards.flip-r .card.reveal{animation-name:flipScrubR}
    /* stagger left-to-right */
    .pos-cards.flip .card.reveal:nth-child(2){animation-range:entry 12% cover 46%}
    .pos-cards.flip .card.reveal:nth-child(3){animation-range:entry 24% cover 54%}
    .pos-cards.flip .card.reveal:nth-child(4){animation-range:entry 36% cover 62%}
    /* stagger right-to-left */
    .pos-cards.flip-r .card.reveal:nth-child(4){animation-range:entry 0% cover 38%}
    .pos-cards.flip-r .card.reveal:nth-child(3){animation-range:entry 12% cover 46%}
    .pos-cards.flip-r .card.reveal:nth-child(2){animation-range:entry 24% cover 54%}
    .pos-cards.flip-r .card.reveal:nth-child(1){animation-range:entry 36% cover 62%}
    /* hover lift via translate — composes with the scrubbed transform */
    .pos-cards.flip .card,
    .pos-cards.flip-r .card{transition:translate var(--t-med) var(--ease-out),box-shadow var(--t-med)}
    .pos-cards.flip .card:hover,
    .pos-cards.flip-r .card:hover{translate:0 -8px}
  }
}
@keyframes flipScrubL{
  from{opacity:0;transform:rotateY(-95deg)}
  45%{opacity:1}
  to{opacity:1;transform:rotateY(0)}
}
@keyframes flipScrubR{
  from{opacity:0;transform:rotateY(95deg)}
  45%{opacity:1}
  to{opacity:1;transform:rotateY(0)}
}
.chips .chip:nth-child(n){transition-delay:calc((var(--n,0)) * 1ms)}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.reveal-r{opacity:1;transform:none}
  .pos-cards.flip .card.reveal,.pos-cards.flip-r .card.reveal{transform:none}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto}
  .orbit,.orbit-ring,.node span{animation:none}
  .hero-title .line>span{transform:none;animation:none}
}