/* ============================================================
   OPEN GATE — cinematic agency site
   Design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Prompt:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root{
  /* palette — dark cinematic, warm-neutral */
  --ink:        #08080a;
  --ink-2:      #0e0e11;
  --surface:    #131318;
  --surface-2:  #1b1b21;
  --line:       rgba(255,255,255,.12);
  --line-soft:  rgba(255,255,255,.07);
  --white:      #f4f2ee;
  --muted:      #9a9aa3;
  --muted-2:    #6b6b73;

  /* accent — switchable via Tweaks */
  --accent:     #ff4d1a;
  --accent-ink: #08080a; /* text on accent */

  --maxw: 1480px;
  --gut: clamp(20px, 5vw, 80px);

  --ff-display: Impact, 'Anton', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --ff-body: 'Prompt', system-ui, -apple-system, sans-serif;
  --ff-mono: 'Prompt', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; background:var(--ink); }
body{
  background:transparent;
  color:var(--white);
  font-family:var(--ff-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--accent); color:var(--accent-ink); }

/* hide default cursor when custom cursor on (desktop) */
@media (hover:hover) and (pointer:fine){
  body.cursor-on, body.cursor-on a, body.cursor-on button{ cursor:none; }
}

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.eyebrow{
  font-family:var(--ff-mono); font-size:12px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:''; width:26px; height:1px; background:var(--accent); display:inline-block;
}
.eyebrow.no-mark::before{ display:none; }
.accent{ color:var(--accent); }

section{ position:relative; }
.section-pad{ padding-block:clamp(80px,11vw,180px); }

/* ============================================================
   GRAIN + VIGNETTE
   ============================================================ */
.grain{
  position:fixed; inset:-150%; z-index:9000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
  animation:grain 6s steps(6) infinite;
}
body.grain-off .grain{ display:none; }

/* ---------- BOTTOM GLOW (scroll-reactive ambient light, behind everything) ---------- */
.bg-glow{
  position:fixed; left:0; right:0; bottom:0; height:52vh; z-index:-1;
  pointer-events:none;
  opacity:var(--glow,.8);
  transform:scaleY(var(--gscale,1)); transform-origin:bottom center;
  background:radial-gradient(70% 100% at var(--gx,50%) 108%,
      #ffffff 0%,
      var(--accent) 22%,
      var(--accent) 40%,
      transparent 74%);
  will-change:opacity, transform, background;
}

/* ---------- BG VARIANT: AURORA (drifting mesh-gradient) ---------- */
.bg-aurora .bg-glow{ background:none; }
.bg-aurora .bg-glow::before{
  content:''; position:absolute; left:-12%; right:-12%; bottom:-12%; top:50%;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle at 30% 72%, var(--accent), transparent 52%),
    radial-gradient(circle at 70% 82%, #ff2e0a, transparent 52%),
    radial-gradient(circle at 52% 94%, #ffb24a, transparent 46%);
  background-size:80% 80%, 90% 90%, 70% 70%;
  filter:blur(46px) saturate(1.15);
  animation:aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{   background-position:  0% 100%, 100% 100%, 50% 100%; }
  50%{  background-position: 26%  76%,  72%  92%, 64%  82%; }
  100%{ background-position: 10%  96%,  92% 100%, 38% 100%; }
}
@media (prefers-reduced-motion:reduce){ .bg-aurora .bg-glow::before{ animation:none; } }
@keyframes grain{
  0%{transform:translate(0,0)} 10%{transform:translate(-4%,-4%)}
  30%{transform:translate(3%,-6%)} 50%{transform:translate(-5%,4%)}
  70%{transform:translate(5%,3%)} 90%{transform:translate(-3%,6%)} 100%{transform:translate(0,0)}
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:9500; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.cursor-dot{ width:7px; height:7px; background:#fff; }
.cursor-ring{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.6);
  transition:width .25s var(--ease), height .25s var(--ease), background .25s, border-color .25s;
}
.cursor-ring.hovering{ width:64px; height:64px; border-color:transparent; background:rgba(255,255,255,.16); }
.cursor-ring .clabel{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--ff-mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase;
  opacity:0; transition:opacity .2s; color:#fff;
}
.cursor-ring.label .clabel{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:9800; background:var(--ink);
  display:grid; place-items:center; overflow:hidden;
}
.preloader__inner{ text-align:center; }
.preloader__word{ overflow:hidden; display:inline-block; line-height:0; }
.preloader__word .og-logo{ transform:translateY(110%); }
.preloader__bar{
  margin-top:22px; height:2px; width:min(60vw,360px); background:rgba(255,255,255,.14);
  margin-inline:auto; overflow:hidden; position:relative;
}
.preloader__bar i{ position:absolute; inset:0; right:100%; background:var(--accent); }
.preloader__pct{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; color:var(--muted);
  margin-top:14px;
}
.preloader.done{ transform:translateY(-100%); transition:transform 1s var(--ease-io); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--gut); transition:padding .4s var(--ease), background .4s;
}
.nav::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(8,8,10,.6); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .4s; border-bottom:1px solid var(--line-soft);
}
.nav.scrolled{ padding-block:13px; }
.nav.scrolled::after{ opacity:1; }
.brand{ display:flex; align-items:center; gap:13px; font-weight:900; letter-spacing:-.01em; font-size:19px; }
.og-logo{ display:block; color:var(--white); fill:var(--white); width:auto; aspect-ratio:827.6 / 387.8; }
.og-logo .st0{ fill:currentColor; transition:fill .3s; }
.og-logo .st-dot{ fill:currentColor; transition:fill .3s; }
.og-logo--nav{ height:40px; }
.og-logo--pre{ height:clamp(64px,15vw,140px); }
.og-logo--footer{ height:clamp(74px,15vw,160px); }
.brand small{ font-family:var(--ff-mono); font-weight:400; font-size:10px; letter-spacing:.2em; color:var(--muted); align-self:flex-start; margin-top:2px; }

.nav__links{ display:flex; align-items:center; gap:34px; }
.nav__links a{
  font-size:13.5px; font-weight:500; letter-spacing:.01em; position:relative; padding:4px 0;
  color:var(--white);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--accent);
  transition:width .35s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:13px; font-weight:600; padding:11px 20px; border-radius:100px;
  background:var(--white); color:var(--ink); transition:transform .3s var(--ease), background .3s;
}
.nav__cta:hover{ background:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }
.nav__right{ display:flex; align-items:center; gap:26px; }
.nav__burger{ display:none; width:30px; height:18px; position:relative; }
.nav__burger span{ position:absolute; left:0; height:2px; width:100%; background:var(--white); transition:.3s var(--ease); }
.nav__burger span:nth-child(1){ top:0; } .nav__burger span:nth-child(2){ bottom:0; }

@media (max-width:1000px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:block; }
}

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:7900; background:var(--ink); padding:120px var(--gut) 40px;
  display:flex; flex-direction:column; gap:6px;
  clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease-io);
}
.mobile-menu.open{ clip-path:inset(0 0 0 0); }
.mobile-menu a{ font-size:clamp(34px,9vw,60px); font-weight:800; letter-spacing:-.02em; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.mobile-menu a:hover{ color:var(--accent); }
.mobile-menu .mm-meta{ margin-top:auto; font-family:var(--ff-mono); font-size:12px; color:var(--muted); letter-spacing:.05em; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.hero__bg{ position:absolute; inset:-8% 0 0 0; z-index:0; will-change:transform; }
.hero__bg img{ width:100%; height:118%; object-fit:cover; object-position:center 30%; opacity:.62; }
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 70% 10%, transparent 0%, rgba(8,8,10,.5) 60%, var(--ink) 100%),
    linear-gradient(to bottom, rgba(8,8,10,.55) 0%, transparent 28%, transparent 50%, var(--ink) 99%);
}
.hero__top{ position:relative; z-index:2; padding:118px var(--gut) 0; flex:1; display:flex; align-items:flex-start; }
.hero__eyebrow{ overflow:hidden; }
.hero__main{ position:relative; z-index:2; padding:0 var(--gut) clamp(48px,7vw,104px); }
.hero h1{
  font-weight:900; line-height:.9; letter-spacing:-.035em; text-transform:uppercase;
  font-size:clamp(40px,8vw,128px); text-wrap:balance;
}
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln > span{ display:block; transform:translateY(110%); }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero__sub{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:30px;
  margin-top:30px; padding-bottom:30px; border-bottom:1px solid var(--line-soft);
}
.hero__sub p{ max-width:66ch; font-size:clamp(15px,1.5vw,18px); color:var(--muted); line-height:1.55; }
.hero__lead{ display:block; white-space:nowrap; color:var(--white); }
.hero__tail{ display:block; white-space:nowrap; }
@media (max-width:820px){ .hero__lead, .hero__tail{ white-space:normal; display:inline; } }
.hero__sub p strong{ color:var(--white); font-weight:600; }
.hero__btns{ display:flex; gap:14px; flex:none; }
.btn{
  display:inline-flex; align-items:center; gap:11px; padding:15px 26px; border-radius:100px;
  font-size:14px; font-weight:600; letter-spacing:.01em; transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s;
  border:1px solid var(--line);
}
.btn .arr{ transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translate(4px,-4px); }
.btn--solid{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn--solid:hover{ transform:translateY(-3px); }
.btn--ghost:hover{ background:var(--white); color:var(--ink); border-color:var(--white); transform:translateY(-3px); }

.hero__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:26px; }
.hero__tags span{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); padding:7px 14px; border:1px solid var(--line-soft); border-radius:100px; white-space:nowrap; }
.hero__tags span b{ color:var(--accent); font-weight:700; }

.hero__scroll{ position:absolute; right:var(--gut); bottom:150px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; }
.hero__scroll .ln{ width:1px; height:54px; background:linear-gradient(var(--white),transparent); position:relative; overflow:hidden; }
.hero__scroll .ln::after{ content:''; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--accent); animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ to{ top:100%; } }
.hero__scroll span{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.2em; color:var(--muted); writing-mode:vertical-rl; }
@media (max-width:760px){ .hero__scroll{ display:none; } .hero__sub{ flex-direction:column; align-items:flex-start; } }

/* ticker */
.ticker{ position:relative; z-index:2; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); overflow:hidden; background:rgba(8,8,10,.4); }
.ticker__track{ display:flex; gap:0; white-space:nowrap; will-change:transform; }
.ticker__track span{
  font-weight:900; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(28px,4.5vw,58px);
  padding:18px 36px; display:inline-flex; align-items:center; gap:36px; color:var(--white);
}
.ticker__track span::after{ content:''; width:13px; height:13px; border-radius:50%; background:var(--accent); flex:none; }
.ticker--alt .ticker__track span{ -webkit-text-stroke:1px var(--white); color:transparent; }

/* ============================================================
   GENERIC SECTION HEADER
   ============================================================ */
.sec-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(40px,6vw,80px); }
.sec-head h2{ font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.95; font-size:clamp(34px,6vw,84px); text-wrap:balance; }
.sec-head .idx{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.2em; color:var(--muted-2); }
.sec-head p{ max-width:42ch; color:var(--muted); font-size:clamp(14px,1.4vw,17px); }

/* reveal util */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-io), transform .9s var(--ease-io); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

/* ============================================================
   STATEMENT (kinetic words)
   ============================================================ */
.statement{ padding-block:clamp(90px,13vw,200px); }
.statement p{
  font-weight:800; letter-spacing:-.025em; line-height:1.04; text-transform:uppercase;
  font-size:clamp(30px,5.6vw,82px); text-wrap:balance;
}
.statement > p:first-of-type{ white-space:nowrap; text-wrap:nowrap; }
@media (max-width:640px){ .statement > p:first-of-type{ white-space:normal; text-wrap:balance; } }
.statement .w{ display:inline-block; opacity:.16; transition:opacity .5s var(--ease); }
.statement .w.lit{ opacity:1; }
.statement .muted{ color:var(--accent); }
.statement__meta{ display:flex; flex-wrap:wrap; gap:40px; margin-top:60px; padding-top:34px; border-top:1px solid var(--line-soft); }
.statement__lead{ max-width:56ch; margin-top:34px; font-size:clamp(16px,1.6vw,20px); font-weight:400; line-height:1.6; color:var(--muted); text-transform:none; letter-spacing:0; }
.statement__meta div{ max-width:30ch; }
.statement__meta h4{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.statement__meta p{ font-size:15px; font-weight:400; line-height:1.6; color:var(--muted); text-transform:none; letter-spacing:0; }

/* ============================================================
   MODEL (in-house) cards
   ============================================================ */
.model{ border-top:1px solid var(--line-soft); }
.model__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:18px; overflow:hidden; width:min(96vw, 1760px); margin-inline:calc(50% - min(48vw, 880px)); }
.model__card{ background:var(--ink-2); padding:clamp(28px,3vw,46px); min-height:340px; display:flex; flex-direction:column; transition:background .4s; }
.model__card:hover{ background:var(--surface); }
.model__card .no{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.2em; color:var(--accent); }
.model__card h3{ font-weight:800; font-size:clamp(21px,2vw,28px); letter-spacing:-.01em; line-height:1.1; margin-top:clamp(64px,6vw,112px); min-height:2.2em; display:flex; align-items:flex-end; }
.model__card p{ color:var(--muted); font-size:14.5px; line-height:1.6; margin-top:16px; }
.model__banner{
  margin-top:30px; display:flex; flex-direction:column; align-items:stretch; gap:26px;
  padding:clamp(26px,3vw,40px); border-radius:18px; background:var(--accent); color:var(--accent-ink);
}
.model__banner-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; }
.path-anim{ width:100%; }
.path-anim canvas{ width:100%; height:150px; display:block; }
.path-anim__labels{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.path-anim__labels span{ font-family:var(--ff-mono); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(8,8,10,.62); }
.path-anim__count{ color:rgba(8,8,10,.92) !important; }
.model__banner h3{ font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(26px,3.6vw,52px); line-height:.95; }
.model__banner p{ font-weight:500; font-size:15px; max-width:38ch; }
@media (max-width:860px){ .model__grid{ grid-template-columns:1fr; } .model__card{ min-height:auto; } }

/* ============================================================
   STATS
   ============================================================ */
.stats{ border-block:1px solid var(--line-soft); }
.stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.stats__cell{ padding:clamp(40px,5vw,72px) 8px; text-align:center; border-left:1px solid var(--line-soft); }
.stats__cell:first-child{ border-left:none; }
.stats__num{ font-weight:900; letter-spacing:-.04em; font-size:clamp(46px,7vw,104px); line-height:1; }
.stats__num sup{ font-size:.42em; color:var(--accent); vertical-align:super; font-weight:800; }
.stats__lbl{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:14px; }
@media (max-width:760px){ .stats__grid{ grid-template-columns:1fr 1fr; } .stats__cell:nth-child(odd){ border-left:none; } .stats__cell:nth-child(n+3){ border-top:1px solid var(--line-soft); } }

/* ============================================================
   SERVICES
   ============================================================ */
.svc__list{ border-top:1px solid var(--line); }
.svc__row{
  position:relative; display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:24px;
  padding:clamp(26px,3.4vw,46px) 0; border-bottom:1px solid var(--line); cursor:pointer;
  transition:padding-left .45s var(--ease);
}
.svc__row:hover{ padding-left:26px; }
.svc__row .no{ font-family:var(--ff-mono); font-size:13px; letter-spacing:.15em; color:var(--muted-2); }
.svc__row h3{ font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(28px,5vw,68px); line-height:1; transition:color .3s; }
.svc__row:hover h3{ color:var(--accent); }
.svc__row .desc{ max-width:30ch; color:var(--muted); font-size:14px; text-align:right; }
.svc__row .thumb{
  position:absolute; right:30%; top:50%; width:230px; height:150px; border-radius:12px; overflow:hidden;
  transform:translateY(-50%) scale(.85) rotate(-4deg); opacity:0; pointer-events:none; z-index:5;
  transition:opacity .4s var(--ease), transform .4s var(--ease); box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.svc__row:hover .thumb{ opacity:1; transform:translateY(-50%) scale(1) rotate(-4deg); }
.svc__row .thumb img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){ .svc__row{ grid-template-columns:48px 1fr; } .svc__row .desc{ display:none; } .svc__row .thumb{ display:none; } }

.svc__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:46px; }
.svc__tags span{ font-size:14px; font-weight:500; padding:10px 18px; border:1px solid var(--line); border-radius:100px; color:var(--muted); transition:.3s var(--ease); }
.svc__tags span:hover{ color:var(--ink); background:var(--white); border-color:var(--white); transform:translateY(-3px); }

/* ============================================================
   PORTFOLIO
   ============================================================ */
.work{ border-top:1px solid var(--line-soft); }
.work__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,2vw,30px); }
.case{ position:relative; overflow:hidden; border-radius:14px; cursor:pointer; background:var(--surface); grid-column:span 6; }
.case.tall{ grid-column:span 6; }
.case.wide{ grid-column:span 8; }
.case.small{ grid-column:span 4; }
.case__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.case.wide .case__media{ aspect-ratio:16/9; }
.case__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-io), filter .6s; filter:grayscale(.2) brightness(.82); }
.case:hover .case__media img{ transform:scale(1.07); filter:grayscale(0) brightness(.95); }
.case__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,10,.9) 0%, transparent 55%); }
.case__info{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(18px,2vw,30px); }
.case__client{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.case__title{ font-weight:800; font-size:clamp(20px,2vw,30px); letter-spacing:-.01em; line-height:1.05; margin-top:8px; }
.case__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; opacity:0; transform:translateY(10px); transition:.45s var(--ease); }
.case:hover .case__tags{ opacity:1; transform:none; }
.case__tags i{ font-style:normal; font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:5px 10px; border:1px solid var(--line); border-radius:100px; }
.case__plus{ position:absolute; top:18px; right:18px; z-index:2; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; background:rgba(8,8,10,.4); backdrop-filter:blur(6px); transition:.4s var(--ease); }
.case:hover .case__plus{ background:var(--accent); border-color:var(--accent); transform:rotate(90deg); }
.case__plus svg{ stroke:var(--white); }
.case:hover .case__plus svg{ stroke:var(--accent-ink); }
.case__vbadge{
  position:absolute; left:18px; top:18px; z-index:2; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-mono); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--white);
  padding:7px 12px 7px 9px; border-radius:100px; background:rgba(8,8,10,.42); backdrop-filter:blur(6px); border:1px solid var(--line);
}
.case__vbadge::before{ content:''; width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent var(--accent); }
.case:hover .case__vbadge{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.case:hover .case__vbadge::before{ border-left-color:var(--accent-ink); }
@media (max-width:860px){
  .work__grid{ grid-template-columns:1fr; }
  .case, .case.tall, .case.wide, .case.small{ grid-column:auto; }
  .case.wide .case__media{ aspect-ratio:4/3; }
}

/* case modal */
.modal{ position:fixed; inset:0; z-index:9200; display:none; }
.modal.open{ display:block; }
.modal__scrim{ position:absolute; inset:0; background:rgba(4,4,6,.75); backdrop-filter:blur(8px); opacity:0; transition:opacity .4s; }
.modal.open .modal__scrim{ opacity:1; }
.modal__panel{
  position:absolute; top:0; right:0; height:100%; width:min(760px,100%); background:var(--ink-2);
  border-left:1px solid var(--line); overflow-y:auto; transform:translateX(100%); transition:transform .6s var(--ease-io);
}
.modal.open .modal__panel{ transform:none; }
.modal__media{ position:relative; aspect-ratio:16/10; }
.modal__media img{ width:100%; height:100%; object-fit:cover; }
.modal__media .modal__videoEl, .modal__media .modal__poster{ width:100%; height:100%; object-fit:cover; display:block; }
.modal__media .modal__iframe{ position:absolute; inset:0; }
.modal__media .modal__iframe iframe{ width:100%; height:100%; border:0; }
.modal__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4;
  width:84px; height:84px; border-radius:50%; background:var(--accent); display:grid; place-items:center;
  transition:transform .35s var(--ease); cursor:pointer;
}
.modal__play:hover{ transform:translate(-50%,-50%) scale(1.08); }
.modal__play::before{ content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--accent); animation:reelpulse 2.4s var(--ease) infinite; }
.modal__tri{ width:0; height:0; margin-left:6px; border-style:solid; border-width:12px 0 12px 21px; border-color:transparent transparent transparent var(--accent-ink); }
.modal__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, var(--ink-2), transparent 60%); }
.modal__close{ position:absolute; top:20px; right:20px; z-index:3; width:46px; height:46px; border-radius:50%; background:rgba(8,8,10,.5); backdrop-filter:blur(8px); border:1px solid var(--line); display:grid; place-items:center; transition:.3s; }
.modal__close:hover{ background:var(--accent); transform:rotate(90deg); }
.modal__body{ padding:clamp(26px,4vw,50px); margin-top:-60px; position:relative; z-index:2; }
.modal__client{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.modal__title{ font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(30px,4.6vw,56px); line-height:.96; margin:12px 0 6px; }
.modal__kicker{ color:var(--muted); font-size:14px; font-family:var(--ff-mono); letter-spacing:.05em; }
.modal__tags{ display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 30px; }
.modal__tags i{ font-style:normal; font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:6px 12px; border:1px solid var(--line); border-radius:100px; }
.modal__block{ padding:22px 0; border-top:1px solid var(--line-soft); }
.modal__block h5{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin-bottom:10px; }
.modal__block p{ font-size:16px; line-height:1.66; color:var(--white); }
.modal__effect{ background:var(--surface); border-radius:14px; padding:24px; margin-top:14px; border:1px solid var(--line-soft); }
.modal__effect h5{ color:var(--accent); }

/* ============================================================
   LEAD PERSON (one point of contact)
   ============================================================ */
.lead-person__grid{ display:grid; grid-template-columns:auto 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.lead-person__media{ position:relative; width:225px; max-width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden; border:1px solid var(--line-soft); background:var(--surface); }
.lead-person__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
.lead-person__head{ font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.92; font-size:clamp(38px,5.6vw,82px); margin:18px 0 0; }
.lead-person__head em{ font-style:normal; color:var(--accent); }
.lead-person__lead{ max-width:44ch; margin-top:26px; font-size:clamp(16px,1.6vw,20px); color:var(--muted); line-height:1.55; }
.lead-person__card{ margin-top:38px; padding-top:28px; border-top:1px solid var(--line-soft); }
.lead-person__name{ font-family:var(--ff-display); font-weight:400; font-size:clamp(26px,3vw,40px); line-height:1; }
.lead-person__role{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-top:12px; }
.lead-person__links{ margin-top:18px; }
.lead-person__links a{ font-size:16px; color:var(--white); border-bottom:1px solid var(--line); padding-bottom:3px; transition:color .3s, border-color .3s; }
.lead-person__links a:hover{ color:var(--accent); border-color:var(--accent); }
@media (max-width:820px){ .lead-person__grid{ grid-template-columns:1fr; } .lead-person__media{ max-width:340px; } }

/* ============================================================
   CLIENTS marquee
   ============================================================ */
.clients{ overflow:hidden; }
.client-row{ display:flex; gap:0; white-space:nowrap; will-change:transform; }
.client-row span{
  font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(26px,3.6vw,48px);
  padding:14px 30px; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.32); display:inline-flex; align-items:center; gap:30px; transition:color .3s, -webkit-text-stroke .3s;
}
.client-row span::after{ content:'✦'; -webkit-text-stroke:0; color:var(--accent); font-size:.4em; }
.client-row span:hover{ color:var(--white); -webkit-text-stroke:1px transparent; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ border-top:1px solid var(--line-soft); }
.contact__big{ font-weight:900; text-transform:uppercase; letter-spacing:-.035em; line-height:.9; font-size:clamp(44px,7.5vw,120px); text-wrap:balance; }
.contact__big em{ font-style:normal; color:var(--accent); }
.contact__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,5vw,70px); margin-top:clamp(40px,5vw,70px); align-items:start; }
.contact__lead{ font-size:clamp(17px,1.7vw,21px); color:var(--muted); line-height:1.55; max-width:40ch; }
.contact__lead strong{ color:var(--white); font-weight:600; }
.contact__details{ margin-top:38px; }
.contact__email{
  display:inline-block; font-family:var(--ff-display); font-weight:400;
  font-size:clamp(26px,3.4vw,50px); letter-spacing:.01em; line-height:1; color:var(--white);
  position:relative; padding-bottom:6px;
}
.contact__email::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.contact__email:hover{ color:var(--accent); }
.contact__email:hover::after{ transform:scaleX(1); }
.contact__meta{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; padding-top:30px; border-top:1px solid var(--line-soft); }
.contact__metaItem h5{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.contact__metaItem p{ font-size:18px; line-height:1.55; color:var(--muted); }
@media (max-width:480px){ .contact__meta{ grid-template-columns:1fr; } }

form{ display:flex; flex-direction:column; gap:18px; }
.field{ position:relative; }
.field label{ position:absolute; left:0; top:14px; font-size:15px; color:var(--muted-2); pointer-events:none; transition:.3s var(--ease); white-space:nowrap; }
.field input, .field textarea{ width:100%; background:none; border:none; border-bottom:1px solid var(--line); padding:14px 0; color:var(--white); font-family:inherit; font-size:16px; resize:none; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label{ top:-12px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-family:var(--ff-mono); }
.field.err input, .field.err textarea{ border-color:#ff5a5a; }
form .btn--solid{ align-self:flex-start; margin-top:6px; }
.form-note{ font-family:var(--ff-mono); font-size:12px; color:var(--muted); letter-spacing:.04em; }
@media (max-width:860px){ .contact__grid{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line); padding-block:50px; }
.footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; align-items:flex-start; }
.footer__brand{ line-height:0; }
.footer__cols{ display:flex; gap:60px; flex-wrap:wrap; }
.footer__col h6{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; }
.footer__col a{ display:block; font-size:14px; color:var(--muted); padding:5px 0; transition:color .3s; }
.footer__col a:hover{ color:var(--white); }
.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:50px; padding-top:24px; border-top:1px solid var(--line-soft); font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.08em; color:var(--muted-2); }

/* tablet tweaks */
@media (max-width:1000px){
  .sec-head{ align-items:flex-start; flex-direction:column; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .statement .w{ opacity:1; }
}

/* ============================================================
   TYPE OVERRIDE — Impact display + Prompt body
   ============================================================ */
.hero h1, .sec-head h2, .statement p, .model__card h3, .model__banner h3,
.stats__num, .svc__row h3, .case__title, .modal__title, .ticker__track span,
.client-row span, .contact__big{
  font-family:var(--ff-display); font-weight:400;
}
/* Impact is condensed — relax negative tracking, give a touch of air */
.hero h1{ letter-spacing:0; line-height:.96; }
.sec-head h2{ letter-spacing:.005em; line-height:1; }
.statement p{ letter-spacing:.01em; line-height:1.08; }
.contact__big{ letter-spacing:0; line-height:.94; }
.svc__row h3{ letter-spacing:.01em; }
.stats__num{ letter-spacing:0; }
.ticker__track span, .client-row span{ letter-spacing:.01em; }
.model__card h3, .model__banner h3, .case__title, .modal__title{ letter-spacing:.01em; }

/* Italic accents — dynamic, like the brand deck */
.hero h1 em,
.statement .muted,
.sec-head h2 .accent,
.contact__big em,
.svc__row:hover h3{ font-style:italic; }
.hero__tags span:nth-child(2){ font-style:italic; }
.ticker__track span:nth-child(even){ font-style:italic; }

/* statement meta paragraphs stay in body font (Prompt), not Impact */
.statement__meta p, .statement__lead{ font-family:var(--ff-body); font-weight:400; letter-spacing:0; line-height:1.6; }

/* ============================================================
   SHOWREEL
   ============================================================ */
.reel__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:30px 40px; margin-bottom:40px; }
.reel__headL{ flex:1 1 auto; }
.reel__headR{ flex:0 1 360px; padding-bottom:8px; }
.reel__title{ margin-top:14px; font-family:var(--ff-display); font-weight:400; text-transform:uppercase; line-height:.86; letter-spacing:.01em; font-size:clamp(54px,11vw,150px); }
.reel__title .ln{ display:block; overflow:hidden; }
.reel__title .ln > span{ display:block; transform:translateY(110%); }
.reel.in .reel__title .ln > span{ animation:reelUp .9s var(--ease-io) forwards; }
.reel.in .reel__title .ln:nth-child(2) > span{ animation-delay:.1s; }
@keyframes reelUp{ to{ transform:translateY(0); } }
.reel__title em{ font-style:italic; color:var(--accent); }
.reel__star{ font-style:normal; color:var(--accent); font-size:.42em; vertical-align:.32em; display:inline-block; animation:reelSpin 9s linear infinite; }
@keyframes reelSpin{ to{ transform:rotate(360deg); } }
.reel__lead{ color:var(--muted); max-width:38ch; font-size:clamp(15px,1.4vw,18px); line-height:1.5; }
.reel__lead strong{ color:var(--white); font-weight:600; }
.reel__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.reel__meta span{ font-family:var(--ff-mono); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:6px 12px; border:1px solid var(--line-soft); border-radius:100px; }
@media (max-width:760px){ .reel__headR{ flex-basis:100%; } }
.reel__frame{ position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius:18px; overflow:hidden; cursor:pointer; background:var(--surface); border:1px solid var(--line-soft); padding:0; }
.reel__frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-io), filter .6s; filter:brightness(.8) saturate(1.05); }
.reel__frame:hover img{ transform:scale(1.05); filter:brightness(.92); }
.reel__grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,10,.78), transparent 46%), linear-gradient(to bottom, rgba(8,8,10,.5), transparent 36%); }
.reel__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:clamp(72px,9vw,118px); height:clamp(72px,9vw,118px); border-radius:50%; background:var(--accent); display:grid; place-items:center; transition:transform .4s var(--ease), opacity .4s; z-index:3; }
.reel__frame:hover .reel__play{ transform:translate(-50%,-50%) scale(1.08); }
.reel__play::before{ content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--accent); animation:reelpulse 2.4s var(--ease) infinite; }
@keyframes reelpulse{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.65); opacity:0 } }
.reel__tri{ width:0; height:0; margin-left:7px; border-style:solid; border-width:15px 0 15px 26px; border-color:transparent transparent transparent var(--accent-ink); }
.reel__tl,.reel__tr,.reel__bl,.reel__br{ position:absolute; font-family:var(--ff-mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--white); z-index:2; }
.reel__tl{ top:22px; left:24px; } .reel__tr{ top:22px; right:24px; color:rgba(244,242,238,.72); }
.reel__bl{ bottom:22px; left:24px; } .reel__br{ bottom:22px; right:24px; color:rgba(244,242,238,.72); }
.reel__bar{ position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--accent); z-index:4; transition:width .15s linear; }
.reel__frame.is-playing .reel__play{ opacity:0; pointer-events:none; }
.reel__frame.is-playing img{ filter:brightness(.96) saturate(1.05); transform:scale(1.04); }
.reel__video{ position:absolute; inset:0; z-index:6; background:#000; }
.reel__video iframe{ width:100%; height:100%; border:0; display:block; }
.reel__frame.is-embedded .reel__grad,.reel__frame.is-embedded .reel__play,.reel__frame.is-embedded .reel__tl,.reel__frame.is-embedded .reel__tr,.reel__frame.is-embedded .reel__bl,.reel__frame.is-embedded .reel__br{ opacity:0; pointer-events:none; }
.reel__frame.is-embedded{ cursor:default; }
@media (max-width:600px){ .reel__tl,.reel__tr,.reel__bl,.reel__br{ font-size:9px; } .reel__tr,.reel__br{ display:none; } }

/* ============================================================
   GLASS MORPHISM (tweakable — body.glass)
   ============================================================ */
body.glass .model__grid{
  background:transparent; border:0; gap:16px; border-radius:0; overflow:visible;
}
body.glass .model__card{
  position:relative; overflow:hidden; border-radius:26px;
  background:
    radial-gradient(125% 55% at 50% 120%, color-mix(in oklch, var(--accent) 60%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -26px 55px -22px color-mix(in oklch, var(--accent) 80%, transparent),
    0 16px 40px -12px color-mix(in oklch, var(--accent) 42%, transparent),
    0 22px 50px rgba(0,0,0,.42);
}
body.glass .model__card > *{ position:relative; z-index:1; }
body.glass .model__card::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:36px 36px;
  -webkit-mask:linear-gradient(180deg, transparent 42%, #000);
  mask:linear-gradient(180deg, transparent 42%, #000);
  opacity:.55;
}
body.glass .model__card:hover{
  background:
    radial-gradient(125% 58% at 50% 120%, color-mix(in oklch, var(--accent) 78%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
}

body.glass .field input,
body.glass .field textarea{
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px; padding:14px 16px;
}
body.glass .field label{ left:16px; }
body.glass .field input:focus,
body.glass .field textarea:focus{ border-color:var(--accent); }

body.glass .reel__frame{
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
body.glass .modal__panel{
  background:rgba(16,16,20,.55);
  -webkit-backdrop-filter:blur(28px) saturate(1.2);
  backdrop-filter:blur(28px) saturate(1.2);
}