/* ============================================================
   THE NEXT VALLEY — hybrid AI · VFX studio
   Palette: navy #090F29 · pink #FF0065 · pressed #C60052 · white
   Type: Poppins (geometric, rounded). Display = heavy + outlined.
   ============================================================ */

:root{
  --navy:#090F29;
  --navy-2:#0c1334;
  --navy-3:#0f1740;
  --pink:#FF0065;
  --pink-press:#C60052;
  --white:#ffffff;
  --ink:#ffffff;
  --ink-dim:rgba(255,255,255,.66);
  --ink-faint:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.22);
  --line-soft:rgba(255,255,255,.12);

  --ticker-h:46px;
  --bar-h:96px;
  --header-h:calc(var(--ticker-h) + var(--bar-h));

  --maxw:1280px;
  --pad:clamp(20px,5vw,72px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --reveal-dur:.7s; /* tuned by motion level */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);}
body{
  margin:0;
  background:var(--navy);
  color:var(--ink);
  font-family:'Poppins',system-ui,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}

/* registration / frame marks on section edges */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}

/* ---------- reduced-motion / motion levels ---------- */
[data-motion="subtle"]{--reveal-dur:.45s;}
[data-motion="medium"]{--reveal-dur:.7s;}
[data-motion="bold"]{--reveal-dur:1s;}

.reveal{opacity:0;transform:translateY(26px);transition:opacity var(--reveal-dur) var(--ease),transform var(--reveal-dur) var(--ease);}
.reveal.in{opacity:1;transform:none;}
[data-motion="subtle"] .reveal{transform:translateY(12px);}
[data-motion="bold"] .reveal{transform:translateY(46px);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   HEADER  (fixed ticker + nav bar)
   ============================================================ */
.site-head{position:fixed;inset:0 0 auto 0;z-index:60;}

/* pink ticker */
.ticker{
  height:var(--ticker-h);
  background:var(--pink);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.ticker__arrow{
  position:absolute;top:0;bottom:0;width:64px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;opacity:.85;z-index:2;transition:opacity .2s;
}
.ticker__arrow:hover{opacity:1;}
.ticker__arrow--prev{left:0;}
.ticker__arrow--next{right:0;}
.ticker__track{display:flex;white-space:nowrap;gap:5rem;will-change:transform;animation:ticker-scroll 30s linear infinite;}
.ticker:hover .ticker__track{animation-play-state:paused;}
@keyframes ticker-scroll{to{transform:translateX(-33.333%);}}
[data-motion="subtle"] .ticker__track{animation-duration:44s;}
[data-motion="bold"] .ticker__track{animation-duration:18s;}
.ticker__item{
  font-size:14px;font-weight:500;letter-spacing:.02em;
  display:inline-flex;gap:.4ch;align-items:center;
}
.ticker__item b{font-weight:700;}
.ticker__item .tnv{font-weight:700;}
.ticker__item .tnv i{font-style:normal;font-weight:400;}

/* nav bar */
.navbar{
  height:var(--bar-h);
  background:var(--navy);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--pad);
  position:relative;
}
.navbar::after{ /* thin divider with frame ticks */
  content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;
  background:var(--line-soft);
}
.icon-btn{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  color:var(--white);border-radius:4px;transition:color .2s,transform .2s;
}
.icon-btn:hover{color:var(--pink);}
.burger{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:6px;width:34px;}
.burger span{width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease),opacity .25s;}
.brand{display:flex;align-items:center;justify-content:center;color:var(--white);}
.brand svg{height:54px;width:auto;}
.brand img{height:46px;width:auto;}
.brand .spark{fill:var(--pink);}

/* ============================================================
   OVERLAY MENU
   ============================================================ */
.menu{
  position:fixed;inset:0;z-index:55;
  pointer-events:none;visibility:hidden;
}
.menu__scrim{
  position:absolute;inset:0;background:rgba(9,15,41,.55);
  opacity:0;transition:opacity .4s var(--ease);
}
.menu__panel{
  position:absolute;top:var(--header-h);left:0;bottom:0;
  width:min(340px,82vw);
  background:var(--pink);
  transform:translateX(-100%);
  transition:transform .5s var(--ease);
  padding:38px 0;
  display:flex;flex-direction:column;
}
.menu.open{pointer-events:auto;visibility:visible;}
.menu.open .menu__scrim{opacity:1;}
.menu.open .menu__panel{transform:none;}
.menu__link{
  font-size:clamp(26px,3vw,34px);
  font-weight:500;color:var(--white);
  padding:16px var(--pad);line-height:1.1;
  transition:background .2s,padding-left .25s var(--ease);
}
.menu__link:hover{background:var(--pink-press);padding-left:calc(var(--pad) + 8px);}
.menu__link.active{background:var(--pink-press);font-weight:700;}

/* burger -> X when menu open */
body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg);}
body.menu-open .burger span:nth-child(2){opacity:0;}
body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ============================================================
   GENERIC SECTION FURNITURE
   ============================================================ */
main{padding-top:var(--header-h);}
section{position:relative;}
.section-pad{padding-block:clamp(70px,9vw,130px);}

/* left rail tag like "studio ›", "works ›" */
.rail-tag{
  position:absolute;left:var(--pad);top:26px;
  font-size:13px;font-weight:700;line-height:1.1;color:var(--white);
  letter-spacing:.08em;text-transform:uppercase;
}
.rail-tag b{color:var(--pink);}
@media (max-width:860px){.rail-tag{position:static;margin:0 0 18px var(--pad);}}

.eyebrow{color:var(--pink);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;}
.h-section{
  font-weight:800;line-height:1.04;letter-spacing:-.01em;
  font-size:clamp(28px,3.6vw,44px);text-align:center;
}
.h-pink{color:var(--pink);}
.lede{
  color:var(--ink-dim);font-size:clamp(15px,1.25vw,18px);line-height:1.6;
  max-width:60ch;margin-inline:auto;text-align:center;text-wrap:pretty;
}

/* arrow link label e.g. "› Car Work" */
.alabel{display:inline-flex;align-items:baseline;gap:.5ch;}
.alabel::before{content:"\203A";color:var(--pink);font-weight:700;}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;}
.hero__media{
  position:relative;width:100%;
  aspect-ratio:16/9;
  max-height:820px;
  background:radial-gradient(120% 120% at 50% 0,#10183f 0%,#070b22 60%,#05060f 100%);
  overflow:hidden;
}
.hero image-slot,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero__media::after{ /* legibility veil */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,15,41,.55) 0%,rgba(9,15,41,.05) 30%,rgba(9,15,41,.15) 70%,rgba(9,15,41,.7) 100%);
}
.hero__headline{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:3;
  text-align:center;pointer-events:none;
  font-weight:800;letter-spacing:-.01em;line-height:.92;
  font-size:clamp(38px,10.5vw,190px);
  color:transparent;
  -webkit-text-stroke:1.6px rgba(255,255,255,.92);
  text-stroke:1.6px rgba(255,255,255,.92);
  white-space:nowrap;
}
.hero__play{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  z-index:4;display:flex;flex-direction:column;align-items:center;gap:14px;
  color:var(--white);
}
.hero__play .pbtn{
  width:78px;height:78px;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);transition:transform .3s var(--ease),background .3s,border-color .3s;
}
.hero__play:hover .pbtn{transform:scale(1.07);background:var(--pink);border-color:var(--pink);}
.hero__play small{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);}

/* hero variant: split */
[data-hero="split"] .hero__media{aspect-ratio:16/9;max-height:760px;}
[data-hero="split"] .hero__inner{display:grid;grid-template-columns:1fr 1.15fr;align-items:stretch;}
[data-hero="split"] .hero__copy{
  display:flex;flex-direction:column;justify-content:center;gap:22px;
  padding:clamp(28px,5vw,72px);background:var(--navy);
}
[data-hero="split"] .hero__copy .ttl{
  font-weight:800;font-size:clamp(40px,5vw,76px);line-height:.95;letter-spacing:-.02em;
  -webkit-text-stroke:0;color:var(--white);white-space:normal;text-align:left;position:static;
}
[data-hero="split"] .hero__copy .ttl .pink{color:var(--pink);}
[data-hero="split"] .hero__headline{display:none;}
[data-hero="split"] .hero__play{left:auto;right:8%;}
.hero__inner{display:block;}
.hero__copy{display:none;}
[data-hero="split"] .hero__copy{display:flex;}
[data-hero="split"] .hero__media-wrap{position:relative;}

/* hero variant: marquee */
[data-hero="marquee"] .hero__headline{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:clamp(70px,15vw,230px);
}
[data-hero="marquee"] .hero__marquee{
  display:flex;white-space:nowrap;animation:hero-slide 18s linear infinite;
}
[data-hero="marquee"] .hero__marquee span{padding-right:.5em;}
@keyframes hero-slide{to{transform:translateX(-50%);}}
.hero__static{display:inline-block;}
.hero__marquee{display:none;}
[data-hero="marquee"] .hero__static{display:none;}
[data-hero="marquee"] .hero__marquee{display:flex;}

@media (max-width:760px){
  [data-hero="split"] .hero__inner{grid-template-columns:1fr;}
  [data-hero="split"] .hero__copy{order:2;}
}

/* ============================================================
   STUDIO — hybrid team + in production
   ============================================================ */
.studio{background:var(--navy);}
.studio__intro{display:grid;gap:14px;justify-items:center;margin-bottom:clamp(40px,5vw,64px);}

.team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);
}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.team-grid{grid-template-columns:1fr;}}

.member{
  border:1px solid var(--line);padding:16px;
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .3s,transform .3s var(--ease);
}
.member:hover{border-color:var(--pink);transform:translateY(-3px);}
.member__photo{position:relative;width:100%;aspect-ratio:1/1;}
.member__photo image-slot,.member__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);}
.member__name{color:var(--pink);font-weight:700;font-size:18px;}
.member__role{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-top:4px;}
.member__bio{font-size:13px;line-height:1.55;color:var(--ink-dim);}

.inprod{margin-top:clamp(60px,8vw,110px);}
.inprod__head{text-align:center;font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:clamp(18px,2vw,24px);margin-bottom:34px;}
.inprod__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);}
@media (max-width:760px){.inprod__grid{grid-template-columns:1fr;}}
.prod-card{display:flex;flex-direction:column;gap:12px;}
.prod-card .shot{border:1px solid var(--line);aspect-ratio:16/10;position:relative;overflow:hidden;}
.prod-card .shot image-slot{width:100%;height:100%;}
.prod-card:hover .shot{border-color:var(--pink);}
.prod-card .shot img{width:100%;height:100%;object-fit:cover;}
.prod-card .ttl{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}

/* ============================================================
   SERVICES — capability grid
   ============================================================ */
.services{background:var(--navy);}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px);}
.svc-card{
  border:1px solid var(--line);padding:clamp(14px,1.6vw,20px);
  display:flex;flex-direction:column;gap:16px;
  transition:border-color .3s,transform .35s var(--ease);
}
.svc-card:hover{border-color:var(--pink);transform:translateY(-4px);}
.svc-card .shot{position:relative;aspect-ratio:16/8.4;overflow:hidden;}
.svc-card .shot image-slot,.svc-card .shot img{width:100%;height:100%;object-fit:cover;}
.svc-card__title{color:var(--pink);font-weight:700;font-size:clamp(18px,1.7vw,22px);}
.svc-card__sub{color:var(--ink-dim);font-size:14px;margin-top:4px;}

/* services variant: compact (3 cols, no padding chrome) */
[data-svc="compact"] .svc-grid{grid-template-columns:repeat(3,1fr);}
[data-svc="compact"] .svc-card{padding:0;border:0;gap:10px;}
[data-svc="compact"] .svc-card .shot{border:1px solid var(--line);}
[data-svc="compact"] .svc-card:hover .shot{border-color:var(--pink);}
[data-svc="compact"] .svc-card:hover{transform:translateY(-4px);}
[data-svc="compact"] .svc-card__title{font-size:17px;}

/* services variant: list rows */
[data-svc="list"] .svc-grid{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);}
[data-svc="list"] .svc-card{
  flex-direction:row;align-items:center;gap:26px;
  border:0;border-bottom:1px solid var(--line);padding:18px 8px;transform:none;
}
[data-svc="list"] .svc-card:hover{transform:none;background:rgba(255,255,255,.03);}
[data-svc="list"] .svc-card .shot{width:200px;flex:0 0 200px;aspect-ratio:16/9;border:1px solid var(--line);}
[data-svc="list"] .svc-card__body{display:flex;flex-direction:column;gap:6px;}
[data-svc="list"] .svc-card .num{font-size:13px;color:var(--ink-faint);font-weight:700;width:42px;flex:0 0 42px;}
.svc-card .num{display:none;}
[data-svc="list"] .svc-card .num{display:block;}
@media (max-width:760px){
  .svc-grid{grid-template-columns:1fr!important;}
  [data-svc="list"] .svc-card{flex-direction:column;align-items:flex-start;}
  [data-svc="list"] .svc-card .shot{width:100%;flex:none;}
}

/* ============================================================
   PRESS & CLIENTS
   ============================================================ */
.press{background:var(--navy);}
.press__h{text-align:center;color:var(--pink);font-weight:800;font-size:clamp(26px,3vw,40px);margin-bottom:clamp(30px,4vw,48px);}
.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,18px);}
@media (max-width:900px){.logo-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.logo-grid{grid-template-columns:repeat(2,1fr);}}
.logo-tile{
  border:1px solid var(--line);aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;transition:border-color .3s,background .3s;
}
.logo-tile:hover{border-color:var(--pink);}
.logo-tile image-slot,.logo-tile img{width:100%;height:100%;object-fit:contain;padding:16px;}
.logo-tile image-slot::part(placeholder){font-size:11px;}

.talk{margin-top:clamp(60px,8vw,100px);}
.talk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);}
@media (max-width:900px){.talk-grid{grid-template-columns:repeat(2,1fr);}}
.talk-tile{
  border:1px solid var(--line);aspect-ratio:5/3.4;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:border-color .3s,transform .3s var(--ease);
}
.talk-tile:hover{border-color:var(--pink);transform:translateY(-3px);}
.talk-tile image-slot,.talk-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.talk-tile .cap{position:relative;z-index:2;padding:12px 14px;font-size:12px;font-weight:600;
  background:linear-gradient(180deg,transparent,rgba(9,15,41,.85));}

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.contact{background:var(--navy-2);}
.contact__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center;}
@media (max-width:820px){.contact__inner{grid-template-columns:1fr;}}
.contact h2{font-weight:800;font-size:clamp(34px,5vw,68px);line-height:1;letter-spacing:-.02em;margin:0 0 18px;}
.contact h2 .pink{color:var(--pink);}
.contact p{color:var(--ink-dim);font-size:16px;line-height:1.6;max-width:46ch;}
.contact__mail{
  display:inline-flex;align-items:center;gap:12px;margin-top:26px;
  font-size:clamp(18px,2vw,26px);font-weight:600;color:var(--white);
  border-bottom:2px solid var(--pink);padding-bottom:6px;transition:gap .25s var(--ease),color .2s;
}
.contact__mail:hover{gap:18px;color:var(--pink);}
.cform{display:flex;flex-direction:column;gap:14px;}
.cform input,.cform textarea{
  background:transparent;border:1px solid var(--line);color:var(--white);
  font-family:inherit;font-size:15px;padding:14px 16px;border-radius:4px;transition:border-color .25s;
}
.cform input::placeholder,.cform textarea::placeholder{color:var(--ink-faint);}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--pink);}
.cform textarea{resize:vertical;min-height:110px;}
.cform .send{
  align-self:flex-start;background:var(--pink);color:var(--white);font-weight:700;
  padding:14px 30px;border-radius:4px;letter-spacing:.04em;transition:background .25s,transform .2s;
}
.cform .send:hover{background:var(--pink-press);transform:translateY(-2px);}
.cform .send.ok{background:#1f8a5b;}

.site-foot{background:var(--navy);border-top:1px solid var(--line-soft);}
.foot__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:34px;flex-wrap:wrap;}
.foot__brand{display:flex;align-items:center;gap:14px;}
.foot__brand svg{height:42px;}
.foot__brand img{height:80px;width:auto;}
.foot__brand .tnv{font-weight:700;font-size:15px;}
.foot__brand .tnv i{font-style:normal;font-weight:400;color:var(--ink-dim);}
.foot__meta{color:var(--ink-faint);font-size:12.5px;}
.foot__links{display:flex;gap:22px;font-size:13px;}
.foot__links a:hover{color:var(--pink);}

/* floating instagram */
.ig{
  position:fixed;right:22px;bottom:22px;z-index:50;
  width:46px;height:46px;border:2px solid var(--white);border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:var(--white);
  background:rgba(9,15,41,.5);backdrop-filter:blur(4px);
  transition:color .25s,border-color .25s,transform .25s var(--ease);
}
.ig:hover{color:var(--pink);border-color:var(--pink);transform:translateY(-3px);}

/* scroll progress under ticker */
.scrollbar{position:fixed;left:0;top:var(--ticker-h);height:2px;background:var(--pink);width:0;z-index:61;transition:width .1s linear;}

/* ============================================================
   FINANCE YOUR FILM
   ============================================================ */
.finance{
  position:relative;overflow:hidden;
  min-height:clamp(440px,62vh,660px);
  display:flex;align-items:center;
  background:linear-gradient(120deg,#241712 0%,#13101c 52%,#0b0a1e 100%);
}
.finance__bg{position:absolute;inset:0;z-index:0;}
.finance__bg image-slot,.finance__bg img{width:100%;height:100%;object-fit:cover;outline:none;background:transparent;}
.finance::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,8,20,.45) 0%,rgba(8,8,20,.31) 48%,rgba(8,8,20,.11) 100%);
}
.finance .rail-tag{z-index:3;position:absolute;top:26px;margin-left:0;}
.finance__inner{position:relative;z-index:2;}
.finance__h{
  font-weight:800;font-size:clamp(30px,4.6vw,62px);line-height:1.15;
  color:var(--pink);letter-spacing:-.01em;margin:0 0 30px;text-transform:lowercase;
}
.finance__h span{color:var(--pink);font-weight:400;}
.finance__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px;max-width:64ch;}
.finance__list li{position:relative;padding-left:28px;font-size:clamp(15px,1.4vw,20px);line-height:1.5;color:var(--ink);text-wrap:pretty;}
.finance__list li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;background:var(--pink);border-radius:50%;}

/* image-slot empty-state look on navy */
image-slot{
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.5)!important;
  outline:1px dashed rgba(255,255,255,.18);
  outline-offset:-1px;
}
.svc-card .shot image-slot,.prod-card .shot image-slot,.logo-tile image-slot,.talk-tile image-slot,.member__photo image-slot,.hero image-slot{outline:none;}