/* ░░░░░░░░░ TOKENS ░░░░░░░░░ */
:root{
  --bg: #07080b;
  --bg-2: #0c0e13;
  --ink: #f5efe2;
  --ink-soft: #b8b1a3;
  --ink-mute: #6c6557;
  --line: rgba(245, 239, 226, 0.12);
  --line-2: rgba(245, 239, 226, 0.06);
  --gold: #ffb547;
  --sun: #ffd166;
  --sun-2: #ff8a3d;
  --sky: #4cc9f0;
  --grad: linear-gradient(135deg, #ffd166 0%, #ff8a3d 50%, #ff5a5f 100%);
  --grad-soft: radial-gradient(ellipse at 50% 0%, rgba(255,209,102,0.18), transparent 60%);
  --shadow-card: 0 30px 80px -30px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.04) inset;
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Space Grotesk", -apple-system, system-ui, sans-serif;
}

/* ░░░░░░░░░ RESET ░░░░░░░░░ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:auto}
body{overflow-x:hidden;line-height:1.5;font-weight:400}
body.has-custom-cursor{cursor:none}
body.has-custom-cursor button,body.has-custom-cursor a{cursor:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:var(--sun);color:#000}

/* ░░░░░░░░░ NOISE & GLOBAL FX ░░░░░░░░░ */
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:50;opacity:0.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ░░░░░░░░░ CURSOR — SUN ░░░░░░░░░ */
.cursor{
  position:fixed;top:0;left:0;width:32px;height:32px;
  pointer-events:none;z-index:9999;
  /* JS sets translate via inline style — combined with center offset here */
  will-change:transform;
}
.cursor__sun{
  width:100%;height:100%;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 12px rgba(255,209,102,.7));
  animation:cursor-spin 6s linear infinite;
  transition:transform .35s var(--ease-out), filter .35s;
}
.cursor__sun svg{width:100%;height:100%;display:block}
@keyframes cursor-spin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
.cursor.is-link .cursor__sun{
  animation-duration:2.5s;
  filter:drop-shadow(0 0 18px rgba(255,209,102,1)) drop-shadow(0 0 36px rgba(255,138,61,.6));
}
.cursor.is-link{width:60px;height:60px}
.cursor.is-card{width:96px;height:96px}
.cursor.is-card .cursor__sun{
  animation-duration:1.6s;
  filter:drop-shadow(0 0 24px rgba(255,209,102,1)) drop-shadow(0 0 48px rgba(255,138,61,.8));
}

.cursor-trail{
  position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;
  background:rgba(255,209,102,.55);pointer-events:none;z-index:9998;
  filter:blur(2px);
  will-change:transform;transition:opacity .2s;
}
@media (hover: none){
  body.has-custom-cursor{cursor:auto}
  body.has-custom-cursor button,body.has-custom-cursor a{cursor:pointer}
  .cursor,.cursor-trail{display:none}
}

/* ░░░░░░░░░ LOADER ░░░░░░░░░ */
.loader{
  position:fixed;inset:0;background:var(--bg);z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;
  transition:opacity .8s var(--ease-out), visibility .8s;
}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__sun{position:relative;width:120px;height:120px;animation:loader-spin 4s linear infinite}
.loader__core{position:absolute;inset:30%;border-radius:50%;background:var(--grad);box-shadow:0 0 60px rgba(255,209,102,0.6)}
.loader__sun span{position:absolute;left:50%;top:50%;width:3px;height:30px;background:var(--sun);border-radius:3px;transform-origin:50% 60px;animation:loader-pulse 2s ease-in-out infinite}
.loader__sun span:nth-child(1){transform:translate(-50%,-50%) rotate(0deg)}
.loader__sun span:nth-child(2){transform:translate(-50%,-50%) rotate(45deg);animation-delay:.1s}
.loader__sun span:nth-child(3){transform:translate(-50%,-50%) rotate(90deg);animation-delay:.2s}
.loader__sun span:nth-child(4){transform:translate(-50%,-50%) rotate(135deg);animation-delay:.3s}
.loader__sun span:nth-child(5){transform:translate(-50%,-50%) rotate(180deg);animation-delay:.4s}
.loader__sun span:nth-child(6){transform:translate(-50%,-50%) rotate(225deg);animation-delay:.5s}
.loader__sun span:nth-child(7){transform:translate(-50%,-50%) rotate(270deg);animation-delay:.6s}
.loader__sun span:nth-child(8){transform:translate(-50%,-50%) rotate(315deg);animation-delay:.7s}
.loader__text{display:flex;gap:8px;letter-spacing:.4em;font-size:11px;color:var(--ink-soft);text-transform:uppercase}
.loader__text span{display:inline-block;animation:loader-letter 1.6s var(--ease-out) infinite}
.loader__text span:nth-child(1){animation-delay:0s}
.loader__text span:nth-child(2){animation-delay:.1s}
.loader__text span:nth-child(3){animation-delay:.2s}
.loader__text span:nth-child(4){animation-delay:.3s}
.loader__text span:nth-child(5){animation-delay:.4s}
.loader__text span:nth-child(6){animation-delay:.5s}
.loader__text span:nth-child(7){animation-delay:.6s}
@keyframes loader-spin{to{transform:rotate(360deg)}}
@keyframes loader-pulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes loader-letter{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* ░░░░░░░░░ NAV ░░░░░░░░░ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;mix-blend-mode:difference;
}
.nav__brand{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:-.01em;font-size:18px}
.nav__brand em{font-style:italic;font-family:var(--serif);font-weight:400;opacity:.7;margin-left:4px}
.nav__logo{width:28px;height:28px;color:var(--sun);animation:logo-spin 18s linear infinite}
@keyframes logo-spin{to{transform:rotate(360deg)}}
.nav__links{display:flex;gap:36px}
.nav__links a{font-size:14px;display:flex;align-items:baseline;gap:6px;position:relative;transition:opacity .3s}
.nav__links a span{font-size:10px;color:var(--sun);font-feature-settings:"tnum"}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:currentColor;transition:width .4s var(--ease-out)}
.nav__links a:hover::after{width:100%}
.nav__actions{display:flex;align-items:center;gap:10px}
.nav__deck{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  border:1px solid var(--line);border-radius:999px;font-size:12px;
  letter-spacing:.04em;color:var(--ink);
  transition:border-color .3s, background .3s, color .3s;
}
.nav__deck svg{width:14px;height:14px;color:var(--sun)}
.nav__deck:hover{border-color:var(--sun);background:rgba(255,209,102,.08)}
.nav__cta{
  display:flex;align-items:center;gap:8px;padding:10px 18px;
  border:1px solid var(--ink);border-radius:999px;font-size:13px;
  transition:background .3s,color .3s;
}
.nav__cta svg{width:14px;height:14px;transition:transform .3s var(--ease-out)}
.nav__cta:hover{background:var(--ink);color:#000}
.nav__cta:hover svg{transform:translateX(4px)}
@media (max-width: 880px){
  .nav__deck span{display:none}
  .nav__deck{padding:9px 11px}
}

@media (max-width: 880px){
  .nav{padding:18px 20px}
  .nav__links{display:none}
}

/* ░░░░░░░░░ TYPOGRAPHY ░░░░░░░░░ */
.section-label{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:24px;
}
.section-label .dot{width:6px;height:6px;border-radius:50%;background:var(--sun);box-shadow:0 0 12px var(--sun)}
.display{
  font-family:var(--serif);font-weight:400;font-size:clamp(36px, 6.5vw, 92px);
  line-height:.98;letter-spacing:-.02em;
}
.display em{font-style:italic;color:var(--sun)}
.lead{
  font-size:clamp(14px, 1.1vw, 16px);color:var(--ink-soft);max-width:52ch;line-height:1.65;
  margin-top:20px;
}

/* ░░░░░░░░░ HERO ░░░░░░░░░ */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:140px 40px 100px;overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
.hero__poster,.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero__poster{
  transform:scale(1.18);
  animation:kenburns 22s ease-in-out infinite alternate;
  filter:saturate(1.15) contrast(1.05);
  z-index:0;
}
.hero__video{
  z-index:1;
  filter:saturate(1.12) contrast(1.06) brightness(.92);
  /* video is visible by default; if it fails, the poster image shows through */
}
@keyframes kenburns{
  0%{transform:scale(1.18) translate(0,0)}
  50%{transform:scale(1.28) translate(-2%,-2%)}
  100%{transform:scale(1.22) translate(2%,1%)}
}
.hero__scrim{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg, rgba(7,8,11,.75) 0%, rgba(7,8,11,.45) 30%, rgba(7,8,11,.65) 70%, rgba(7,8,11,.95) 100%),
    linear-gradient(90deg, rgba(7,8,11,.7) 0%, transparent 60%);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;opacity:0;transition:opacity 1.2s var(--ease-out);mix-blend-mode:screen;pointer-events:none}
.hero__canvas.is-ready{opacity:.85}
.hero__inner{position:relative;z-index:5;max-width:980px}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:28px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  backdrop-filter:blur(8px);background:rgba(7,8,11,.4);
}
.hero__eyebrow em{font-style:normal;color:var(--ink-mute);text-transform:none;letter-spacing:0;margin-left:4px;font-family:var(--serif);font-style:italic;font-size:13px}
.hero__eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--sun);box-shadow:0 0 14px var(--sun);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.6}}

.hero__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(44px, 7.5vw, 110px);line-height:.94;letter-spacing:-.03em;
  text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .ital{font-style:italic;color:var(--sun)}
.hero__title [data-split]{display:inline-block;will-change:transform}

.hero__sub{
  margin-top:28px;max-width:48ch;font-size:clamp(14px, 1.05vw, 16px);color:var(--ink-soft);
}
.hero__actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;font-size:13px;letter-spacing:.02em;
  border:1px solid var(--line);transition:transform .4s var(--ease-out), background .4s, color .4s, border-color .4s;
  position:relative;overflow:hidden;will-change:transform;
}
.btn svg{width:16px;height:16px;transition:transform .4s var(--ease-out)}
.btn--primary{background:var(--ink);color:#000;border-color:var(--ink)}
.btn--primary::before{
  content:"";position:absolute;inset:0;background:var(--grad);transform:translateY(101%);
  transition:transform .5s var(--ease-out);z-index:-1;
}
.btn--primary span,.btn--primary svg{position:relative;z-index:1}
.btn--primary:hover::before{transform:translateY(0)}
.btn--primary:hover svg{transform:translateX(6px)}
.btn--ghost:hover{background:var(--line);border-color:var(--ink-soft)}

.hero__scroll{
  position:absolute;left:40px;bottom:40px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--ink-mute);
}
.hero__scroll-line{width:1px;height:60px;background:linear-gradient(to bottom, transparent, var(--ink-soft));position:relative;overflow:hidden}
.hero__scroll-line::before{content:"";position:absolute;top:-30px;left:0;width:100%;height:30px;background:var(--sun);animation:scroll-line 2s var(--ease-out) infinite}
@keyframes scroll-line{to{top:100%}}

.hero__marquee{
  position:absolute;bottom:0;left:0;right:0;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;background:rgba(7,8,11,0.6);backdrop-filter:blur(8px);z-index:3;
}
.marquee__track{
  display:flex;gap:48px;white-space:nowrap;
  animation:marquee 30s linear infinite;
  font-family:var(--serif);font-size:24px;font-style:italic;color:var(--ink-soft);
}
.marquee__track span:nth-child(even){color:var(--sun);font-style:normal}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ░░░░░░░░░ ABOUT ░░░░░░░░░ */
.about{position:relative;padding:160px 40px;overflow:hidden}
.about__bg{
  position:absolute;inset:0;
  background:var(--grad-soft);opacity:.6;pointer-events:none;
}
.about__grid{
  position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;
  max-width:1400px;margin:0 auto;
}
.about__photo{
  position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;
  transform-style:preserve-3d;will-change:transform;
}
.about__photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 1.4s var(--ease-out)}
.about__photo:hover img{transform:scale(1.02)}
.about__photo-glow{position:absolute;inset:-30%;background:var(--grad-soft);filter:blur(40px);z-index:-1}
.about__photo-frame{
  position:absolute;inset:12px;border:1px solid rgba(255,255,255,.2);border-radius:6px;pointer-events:none;
}
.about__photo-tag{
  position:absolute;left:24px;bottom:24px;
  display:flex;flex-direction:column;gap:2px;
  padding:14px 18px;background:rgba(7,8,11,.7);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:6px;
}
.about__photo-tag span{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--sun)}
.about__photo-tag em{font-style:normal;font-size:14px;color:var(--ink)}

@media (max-width: 980px){
  .about__grid{grid-template-columns:1fr;gap:60px}
}

/* ░░░░░░░░░ STATS ░░░░░░░░░ */
.stats{
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  gap:0;margin-top:140px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat{
  position:relative;padding:48px 32px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;
}
.stat:last-child{border-right:none}
.stat__num{
  font-family:var(--serif);font-size:clamp(48px,5vw,72px);line-height:1;
  font-feature-settings:"tnum";letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat__label{font-size:13px;color:var(--ink-soft);letter-spacing:.04em}
.stat__bar{margin-top:12px;height:1px;background:var(--line);position:relative;overflow:hidden}
.stat__bar i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--sun);transition:width 1.6s var(--ease-out)}
.stat.in-view .stat__bar i{width:100%}

@media (max-width: 980px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:none;border-bottom:1px solid var(--line)}
  .stat:nth-child(odd){border-right:1px solid var(--line)}
}

/* ░░░░░░░░░ SERVICES ░░░░░░░░░ */
.services{position:relative;padding:160px 40px;background:var(--bg-2);overflow:hidden}
.services::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:80px 80px;mask-image:radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.services__head{position:relative;max-width:1400px;margin:0 auto 80px}
.cards{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:1400px;margin:0 auto;
}
@media (max-width: 1100px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{
  position:relative;padding:32px;background:rgba(255,255,255,.02);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transform-style:preserve-3d;will-change:transform;
  transition:border-color .5s, background .5s;
  min-height:480px;display:flex;flex-direction:column;
}
.card:hover{border-color:rgba(255,209,102,.3);background:rgba(255,209,102,.02)}
.card__num{
  position:absolute;top:24px;right:28px;
  font-family:var(--serif);font-size:48px;color:var(--ink-mute);opacity:.4;
  font-style:italic;
}
.card__icon{
  width:52px;height:52px;color:var(--sun);margin-bottom:24px;
  transform:translateZ(40px);transition:transform .6s var(--ease-out);
}
.card__icon svg{width:100%;height:100%}
.card:hover .card__icon{transform:translateZ(60px) rotate(45deg)}
.card h3{
  font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.01em;
  margin-bottom:12px;transform:translateZ(20px);
}
.card p{color:var(--ink-soft);font-size:13px;line-height:1.6;max-width:38ch;transform:translateZ(15px)}
.card ul{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;transform:translateZ(15px);
}
.card ul li{
  font-size:11px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;
  color:var(--ink-soft);
}
.card__photo{
  margin-top:auto;height:140px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);transform:translateZ(20px);
}
.card__photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.card:hover .card__photo img{transform:scale(1.08)}
.card__shine{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,0%), rgba(255,209,102,.15), transparent 40%);
  opacity:0;transition:opacity .4s;
}
.card:hover .card__shine{opacity:1}

@media (max-width: 880px){
  .cards{grid-template-columns:1fr}
  .card{padding:28px;min-height:auto}
}

/* ░░░░░░░░░ WORK / VIDEO GALLERY ░░░░░░░░░ */
.work{position:relative;background:var(--bg);padding:160px 40px;overflow:hidden}
.work__head{
  max-width:1400px;margin:0 auto 60px;
  display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:end;
}
.work__head .display em{font-style:italic}
.work__head .lead{margin-top:0}
.work__grid{
  max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:repeat(6, 1fr);grid-auto-rows:240px;gap:14px;
}
.vtile{
  position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:#0a0c12;cursor:pointer;
  grid-column:span 2;grid-row:span 2;
  transition:transform .5s var(--ease-out), border-color .4s;
  transform-style:preserve-3d;
}
.vtile--wide{grid-column:span 3;grid-row:span 2}
.vtile--tall{grid-column:span 2;grid-row:span 3}
.vtile:hover{border-color:rgba(255,209,102,.35)}
.vtile video,
.vtile > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out), filter .6s;
  filter:saturate(1.05) contrast(1.05);
}
.vtile:hover video{transform:scale(1.04)}
.vtile__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(7,8,11,.85) 100%);
  pointer-events:none;
}
.vtile figcaption{
  position:absolute;left:18px;right:18px;bottom:16px;
  display:flex;flex-direction:column;gap:2px;
  pointer-events:none;
}
.vtile__num{
  font-size:10px;letter-spacing:.3em;color:var(--sun);font-weight:600;
  margin-bottom:6px;
}
.vtile figcaption strong{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:22px;letter-spacing:-.01em;line-height:1.1;
}
.vtile figcaption em{font-style:normal;font-size:12px;color:var(--ink-soft);margin-top:2px}

/* play indicator — desktop only (no native play button needs hiding on touch) */
.vtile::after{
  content:"";position:absolute;top:18px;right:18px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(7,8,11,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffd166'><path d='M8 5v14l11-7z'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:14px;
  opacity:.85;transition:transform .4s, opacity .4s;
}
.vtile.is-playing::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffd166'><rect x='6' y='5' width='4' height='14'/><rect x='14' y='5' width='4' height='14'/></svg>");
  transform:scale(1.1);
}
/* Hide custom indicator AND every native browser overlay on touch devices */
@media (hover: none) and (pointer: coarse){
  .vtile::after{display:none}
}
/* Universal native-player UI suppression — applies to BOTH the hero video
   and the gallery tiles, on desktop AND mobile. The Safari/iOS overlay
   play button is rendered via several pseudo-elements; we kill them all. */
.vtile video,
.hero__video{outline:none}
.vtile video::-webkit-media-controls,
.vtile video::-webkit-media-controls-panel,
.vtile video::-webkit-media-controls-play-button,
.vtile video::-webkit-media-controls-start-playback-button,
.vtile video::-webkit-media-controls-overlay-play-button,
.vtile video::-webkit-media-controls-overlay-enclosure,
.vtile video::-webkit-media-controls-enclosure,
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-panel,
.hero__video::-webkit-media-controls-play-button,
.hero__video::-webkit-media-controls-start-playback-button,
.hero__video::-webkit-media-controls-overlay-play-button,
.hero__video::-webkit-media-controls-overlay-enclosure,
.hero__video::-webkit-media-controls-enclosure{
  display:none!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  opacity:0!important;
  pointer-events:none!important;
}

@media (max-width: 1100px){
  .work__grid{grid-template-columns:repeat(4, 1fr);grid-auto-rows:220px}
  .vtile{grid-column:span 2;grid-row:span 2}
  .vtile--wide{grid-column:span 4}
  .vtile--tall{grid-column:span 2;grid-row:span 3}
}
@media (max-width: 700px){
  .work{padding:100px 20px}
  .work__head{grid-template-columns:1fr;gap:20px}
  .work__grid{grid-template-columns:1fr;grid-auto-rows:280px}
  .vtile,.vtile--wide,.vtile--tall{grid-column:span 1;grid-row:span 1}
}

/* ░░░░░░░░░ PROCESS ░░░░░░░░░ */
.process{position:relative;padding:160px 40px;background:var(--bg-2);overflow:hidden}
.process__head{max-width:1400px;margin:0 auto 100px}
.steps{
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;
  max-width:1400px;margin:0 auto;
}
.step{
  position:relative;padding-top:60px;
  opacity:.4;transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transform:translateY(20px);
}
.step.in-view{opacity:1;transform:translateY(0)}
.step__num{
  position:absolute;top:0;left:0;
  font-family:var(--serif);font-style:italic;font-size:18px;color:var(--sun);
}
.step__line{
  position:absolute;top:14px;left:32px;right:-12px;height:1px;background:var(--line);
}
.step__line::after{
  content:"";position:absolute;left:0;top:0;height:100%;width:0;background:var(--sun);
  transition:width 1.2s var(--ease-out);
}
.step.in-view .step__line::after{width:100%}
.step:last-child .step__line{display:none}
.step h3{font-family:var(--serif);font-size:28px;font-weight:400;margin-bottom:12px;letter-spacing:-.01em}
.step p{font-size:14px;color:var(--ink-soft);line-height:1.6}

@media (max-width: 980px){
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  .steps{grid-template-columns:1fr}
  .step__line{display:none}
}

/* ░░░░░░░░░ CONTACT ░░░░░░░░░ */
.contact{position:relative;min-height:100vh;padding:160px 40px 0;overflow:hidden}
.contact__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.45}
/* dim the canvas behind the content so the wave reads as ambience, not foreground */
.contact::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 60%, rgba(7,8,11,.55) 0%, rgba(7,8,11,.2) 60%, transparent 100%);
}
.contact__inner{position:relative;z-index:2;max-width:1400px;margin:0 auto}

.contact__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(44px,7vw,100px);line-height:.96;letter-spacing:-.03em;
  margin-bottom:60px;
}
.contact__title .line{display:block;overflow:hidden}
.contact__title .ital{font-style:italic;color:var(--sun)}
.contact__title [data-split]{display:inline-block}

.contact__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:60px;
}
.contact__item{
  position:relative;padding:36px 28px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;transition:background .4s;
}
.contact__item:last-child{border-right:none}
.contact__item:hover{background:rgba(255,209,102,.04)}
.contact__item small{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-mute)}
.contact__item strong{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.3}
.contact__arrow{
  position:absolute;top:32px;right:28px;font-size:20px;color:var(--sun);
  transition:transform .4s var(--ease-out);
}
.contact__item:hover .contact__arrow{transform:translate(4px,-4px)}

.contact__big{
  display:flex;align-items:center;justify-content:center;gap:18px;
  padding:48px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.02);transition:all .5s var(--ease-out);
  font-family:var(--serif);font-size:clamp(28px,4vw,52px);font-style:italic;letter-spacing:-.02em;
  margin-bottom:80px;position:relative;overflow:hidden;
}
.contact__big::before{
  content:"";position:absolute;inset:0;background:var(--grad);
  transform:translateY(101%);transition:transform .6s var(--ease-out);
}
.contact__big span,.contact__big svg{position:relative;z-index:1}
.contact__big svg{width:48px;height:48px;transition:transform .5s var(--ease-out)}
.contact__big:hover{color:#000;border-color:var(--sun)}
.contact__big:hover::before{transform:translateY(0)}
.contact__big:hover svg{transform:translateX(8px)}

.footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:32px 0;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-mute);letter-spacing:.04em;
}

@media (max-width: 880px){
  .contact__grid{grid-template-columns:1fr}
  .contact__item{border-right:none;border-bottom:1px solid var(--line)}
  .contact__item:last-child{border-bottom:none}
  .footer{flex-direction:column;gap:8px;text-align:center}
}

/* ░░░░░░░░░ EXPLORE (3D CENTERPIECE) ░░░░░░░░░ */
.explore{
  position:relative;padding:160px 40px;background:var(--bg);overflow:hidden;
}
.explore::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%, rgba(255,209,102,.08), transparent 60%);
  pointer-events:none;
}
.explore__head{position:relative;max-width:1400px;margin:0 auto 60px;text-align:center}
.explore__head .lead{margin:20px auto 0}
.explore__stage{
  position:relative;max-width:1200px;margin:0 auto;
  height:min(70vh, 640px);border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(180deg, #0a0c12 0%, #050609 100%);
  cursor:grab;
}
.explore__stage:active{cursor:grabbing}
.explore__canvas{position:absolute;inset:0;width:100%;height:100%}
.explore__chip{
  position:absolute;display:inline-flex;flex-direction:column;gap:2px;
  padding:10px 14px;background:rgba(7,8,11,.78);backdrop-filter:blur(10px);
  border:1px solid rgba(255,209,102,.3);border-radius:8px;
  font-size:11px;letter-spacing:.04em;
  pointer-events:none;opacity:0;transform:translateY(8px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.explore__stage.is-ready .explore__chip{opacity:1;transform:translateY(0)}
.explore__chip strong{font-size:13px;color:var(--ink);font-weight:500;letter-spacing:0}
.explore__chip em{font-style:normal;color:var(--ink-soft);font-size:11px}
.explore__chip .dot{width:6px;height:6px;border-radius:50%;background:var(--sun);box-shadow:0 0 10px var(--sun);margin-bottom:4px;animation:pulse 2s infinite}
.explore__chip--1{top:18%;left:8%}
.explore__chip--2{top:55%;right:10%}
.explore__chip--3{bottom:14%;left:14%}
.explore__hint{
  position:absolute;right:18px;bottom:18px;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;background:rgba(7,8,11,.7);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  pointer-events:none;
}
.explore__hint svg{color:var(--sun)}
@media (max-width: 880px){
  .explore__chip--1{top:8%;left:6%}
  .explore__chip--2{top:auto;bottom:30%;right:6%}
  .explore__chip--3{bottom:8%;left:6%}
}

/* ░░░░░░░░░ SAVINGS CALCULATOR ░░░░░░░░░ */
.savings{
  position:relative;padding:160px 40px;background:var(--bg-2);overflow:hidden;
}
.savings::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.savings__inner{
  position:relative;max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center;
}
@media (max-width: 980px){.savings__inner{grid-template-columns:1fr;gap:48px}}

.calc{
  position:relative;padding:36px;background:rgba(255,255,255,.025);
  border:1px solid var(--line);border-radius:16px;
  display:flex;flex-direction:column;gap:24px;
  box-shadow:var(--shadow-card);
}
.calc::before{
  content:"";position:absolute;inset:-1px;border-radius:16px;
  background:linear-gradient(135deg, rgba(255,209,102,.4), transparent 40%, transparent 60%, rgba(255,138,61,.3));
  z-index:-1;opacity:.6;filter:blur(8px);
}
.calc__row{display:flex;flex-direction:column;gap:10px}
.calc__row label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--ink-soft)}
.calc__row output{
  font-family:var(--serif);font-style:italic;color:var(--sun);font-size:18px;
  font-feature-settings:"tnum";
}
.calc__row input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--line);
  border-radius:999px;outline:none;cursor:pointer;
}
.calc__row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;background:var(--grad);
  border:2px solid #fff;cursor:grab;box-shadow:0 0 20px rgba(255,209,102,.6);
  transition:transform .2s;
}
.calc__row input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.calc__row input[type="range"]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--sun);border:2px solid #fff;cursor:grab;
}
.calc__results{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  margin-top:8px;padding-top:24px;border-top:1px solid var(--line);
}
.calc__result{
  padding:18px;border:1px solid var(--line);border-radius:10px;
  display:flex;flex-direction:column;gap:6px;
  transition:border-color .4s, background .4s;
}
.calc__result:hover{border-color:rgba(255,209,102,.3);background:rgba(255,209,102,.03)}
.calc__result small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.calc__result strong{
  font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.01em;
  font-feature-settings:"tnum";
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.calc__result--big{grid-column:span 2;background:rgba(255,209,102,.04);border-color:rgba(255,209,102,.2)}
.calc__result--big strong{font-size:44px}
.calc__cta{align-self:flex-start;margin-top:8px}

/* ░░░░░░░░░ CONTACT FORM ░░░░░░░░░ */
.contact__layout{
  display:grid;grid-template-columns:.7fr 1.3fr;gap:48px;align-items:start;
  margin-bottom:60px;
}
@media (max-width: 980px){.contact__layout{grid-template-columns:1fr;gap:32px}}

.contact__aside{
  display:flex;flex-direction:column;
  padding:32px;border-radius:16px;
  background:rgba(10,12,18,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,209,102,.18);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.contact__aside .contact__item{
  position:relative;padding:22px 0;border-top:1px solid rgba(245,239,226,.14);
  display:flex;flex-direction:column;gap:6px;transition:padding-left .4s;
}
.contact__aside .contact__item:first-of-type{border-top:none;padding-top:4px}
.contact__aside .contact__item:hover{padding-left:10px}
.contact__aside .contact__item small{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--sun);
  font-weight:600;
}
.contact__aside .contact__item strong{
  font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.25;
  color:#fff;letter-spacing:-.01em;
}
.contact__aside .contact__arrow{
  position:absolute;top:24px;right:0;font-size:18px;color:var(--sun);
  transition:transform .4s;
}
.contact__aside .contact__item:hover .contact__arrow{transform:translate(4px,-4px)}
.contact__hours{
  margin-top:20px;padding:18px;border:1px solid rgba(255,209,102,.25);
  background:rgba(255,209,102,.05);border-radius:10px;
  display:flex;flex-direction:column;gap:4px;
}
.contact__hours small{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--sun);
  font-weight:600;
}
.contact__hours strong{font-family:var(--serif);font-weight:400;font-size:20px;color:#fff}
.contact__hours em{font-style:italic;font-size:13px;color:var(--ink-soft)}

/* form */
.form{
  position:relative;padding:36px;
  background:rgba(10,12,18,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,209,102,.18);border-radius:16px;
  display:flex;flex-direction:column;gap:28px;
  transition:opacity .5s, transform .5s;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.form.is-sent{opacity:0;transform:scale(.98);pointer-events:none}
.form__row{display:flex;flex-direction:column;gap:12px}
.form__row > label > span,
.form__field > span{
  display:block;font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:8px;
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  font-size:12px;color:var(--ink-soft);cursor:pointer;
  transition:all .3s var(--ease-out);
}
.chip:hover{border-color:rgba(255,209,102,.4);color:var(--ink)}
.chip.is-active{background:var(--sun);color:#000;border-color:var(--sun)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width: 600px){.form__grid{grid-template-columns:1fr}}
.form__field{position:relative;display:flex;flex-direction:column}
.form__field--full{grid-column:span 2}
.form__field input,
.form__field textarea{
  width:100%;background:transparent;color:var(--ink);
  border:none;border-bottom:1px solid var(--line);
  padding:8px 0 12px;font-family:inherit;font-size:15px;
  outline:none;resize:none;transition:border-color .3s;
}
.form__field input::placeholder,
.form__field textarea::placeholder{color:var(--ink-mute)}
.form__field input:focus,
.form__field textarea:focus{border-bottom-color:transparent}
.form__field .form__line{
  position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--sun);
  transition:width .5s var(--ease-out);
}
.form__field input:focus ~ .form__line,
.form__field textarea:focus ~ .form__line{width:100%}
.form__foot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:8px;border-top:1px solid var(--line);
}
.form__note{font-size:11px;color:var(--ink-mute);max-width:36ch}
.form__submit{padding:16px 26px;font-size:14px}
.form__submit svg{width:16px;height:16px}

.form__success{
  position:absolute;inset:0;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(135deg, rgba(255,209,102,.08), rgba(255,138,61,.06));
  border:1px solid rgba(255,209,102,.3);
  opacity:0;pointer-events:none;transition:opacity .6s var(--ease-out) .2s;
}
.form__success.is-on{opacity:1;pointer-events:auto}
.form__success svg{color:var(--sun)}
.form__success strong{font-family:var(--serif);font-style:italic;font-size:32px;font-weight:400}
.form__success em{font-style:normal;color:var(--ink-soft);font-size:13px}

/* ░░░░░░░░░ THE REEL — CINEMATIC SLIDESHOW ░░░░░░░░░ */
.reel{
  position:relative;padding:140px 40px 160px;
  background:linear-gradient(180deg, var(--bg) 0%, #050609 100%);
  overflow:hidden;
}
.reel__head{max-width:1400px;margin:0 auto 48px;text-align:center}
.reel__head .display em{font-style:italic}
.reel__stage{
  position:relative;max-width:1400px;margin:0 auto;
  height:min(78vh, 720px);min-height:520px;
  border-radius:18px;overflow:hidden;
  background:#05060a;
  border:1px solid rgba(255,209,102,.12);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.85);
  user-select:none;-webkit-user-select:none;
}

/* SLIDE BASE */
.reel__slide{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  transform:scale(1.06);
  transition:opacity .9s var(--ease-out), transform 1.2s var(--ease-out);
  display:flex;align-items:center;justify-content:center;
}
.reel__slide.is-active{
  opacity:1;pointer-events:auto;transform:scale(1);
}

/* shared elements */
.reel__num{
  font-family:var(--serif);font-style:italic;
  font-size:14px;letter-spacing:.04em;color:var(--sun);
}
.reel__num--corner{
  position:absolute;top:24px;left:24px;
  font-family:var(--sans);font-style:normal;
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--sun);font-weight:600;z-index:5;
}
.reel__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(48px, 8vw, 120px);line-height:.94;letter-spacing:-.03em;
  color:#fff;
}
.reel__title em{font-style:italic;color:var(--sun)}
.reel__sub{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:18px;
}

/* ── SLIDE 01: TITLE ── */
.reel__title-stack{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;padding:0 24px;
}
.reel__title-stack .reel__num{margin-bottom:8px}
.reel__particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.reel__particles i{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--sun);opacity:.6;
  box-shadow:0 0 8px var(--sun), 0 0 14px rgba(255,138,61,.4);
  animation:reel-float 7s ease-in-out infinite;
}
.reel__particles i:nth-child(1){left:8%;top:30%;animation-delay:0s;animation-duration:6s}
.reel__particles i:nth-child(2){left:18%;top:70%;animation-delay:.6s;animation-duration:8s}
.reel__particles i:nth-child(3){left:30%;top:20%;animation-delay:1.2s;animation-duration:7s}
.reel__particles i:nth-child(4){left:42%;top:60%;animation-delay:2s;animation-duration:9s}
.reel__particles i:nth-child(5){left:55%;top:25%;animation-delay:.4s;animation-duration:6.5s}
.reel__particles i:nth-child(6){left:65%;top:75%;animation-delay:1.5s;animation-duration:8.5s}
.reel__particles i:nth-child(7){left:78%;top:35%;animation-delay:2.5s;animation-duration:7.2s}
.reel__particles i:nth-child(8){left:88%;top:65%;animation-delay:.9s;animation-duration:6.8s}
.reel__particles i:nth-child(9){left:24%;top:50%;animation-delay:3s;animation-duration:9.5s}
.reel__particles i:nth-child(10){left:72%;top:50%;animation-delay:1.8s;animation-duration:7.8s}
@keyframes reel-float{
  0%,100%{transform:translateY(0) scale(1);opacity:.5}
  50%{transform:translateY(-30px) scale(1.4);opacity:1}
}

/* ── SLIDE 02 + 05: VIDEO ── */
.reel__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.15) contrast(1.06) brightness(.95);
}
.reel__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(7,8,11,.55) 0%, transparent 35%, transparent 55%, rgba(7,8,11,.85) 100%),
    linear-gradient(90deg, rgba(7,8,11,.45) 0%, transparent 50%);
  pointer-events:none;
}
.reel__overlay{position:absolute;z-index:3;color:#fff}
.reel__overlay--tl{top:24px;left:24px}
.reel__overlay--bl{bottom:36px;left:36px;max-width:60%}
.reel__overlay--bottom{bottom:36px;left:36px;right:36px;max-width:560px}
.reel__overlay--center{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;z-index:3;mix-blend-mode:difference;
}

/* ── SLIDE 03: BIG STAT ── */
.reel__stat-stack{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  text-align:center;padding:0 24px;
}
.reel__big-num{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(120px, 22vw, 320px);line-height:.85;letter-spacing:-.04em;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-feature-settings:"tnum";
}
.reel__big-num i{font-style:normal;font-size:.5em;vertical-align:top}
.reel__big-label{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(20px, 2.4vw, 32px);color:#fff;letter-spacing:-.01em;
}
.reel__grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,209,102,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,209,102,.06) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* ── SLIDE 04: QUOTE ── */
.reel__quote-stack{
  position:relative;z-index:2;max-width:880px;padding:0 32px;
  display:flex;flex-direction:column;gap:24px;
}
.reel__quote-mark{
  font-family:var(--serif);font-style:italic;font-size:240px;line-height:.7;
  color:var(--sun);opacity:.8;align-self:flex-start;margin-bottom:-40px;
}
.reel__quote{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(28px, 3.4vw, 48px);line-height:1.25;letter-spacing:-.01em;
  color:#fff;
}
.reel__attrib{
  font-style:normal;font-family:var(--sans);
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}

/* ── SLIDE 05: SPLIT ── */
.reel__half{position:absolute;top:0;bottom:0;width:50%;overflow:hidden}
.reel__half--left{left:0}
.reel__half--right{right:0}
.reel__half--right img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.reel__half--left::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 80%, rgba(7,8,11,.6) 100%);
}
.reel__overlay--bottom{
  background:rgba(7,8,11,.7);backdrop-filter:blur(14px);
  border:1px solid rgba(255,209,102,.18);border-radius:12px;
  padding:24px 28px;
}

/* ── SLIDE 06: KINETIC TYPE ── */
.reel__kinetic{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  overflow:hidden;
}
.reel__kinetic-row{
  display:flex;gap:36px;white-space:nowrap;
  font-family:var(--sans);font-weight:600;
  font-size:clamp(48px, 9vw, 132px);line-height:1;letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1px var(--sun);
}
.reel__kinetic-row--ital{
  font-family:var(--serif);font-style:italic;font-weight:400;
  -webkit-text-stroke:0;color:var(--sun);
  font-size:clamp(56px, 11vw, 156px);
}
.reel__kinetic-row--right{animation:kinetic-right 28s linear infinite}
.reel__kinetic-row--left{animation:kinetic-left 32s linear infinite}
@keyframes kinetic-right{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes kinetic-left{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

/* ── SLIDE 07: CTA ── */
.reel__cta-stack{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:36px;
  text-align:center;padding:0 24px;
}
.reel__cta-btn{padding:18px 32px;font-size:15px}
.reel__cta-btn svg{width:18px;height:18px}

/* ── TRANSITION OVERLAY (strip wipe) ── */
.reel__transition{
  position:absolute;inset:0;display:flex;
  pointer-events:none;z-index:8;
}
.reel__transition i{
  flex:1;height:100%;background:var(--sun);
  transform:translateY(-101%);
  will-change:transform;
}
.reel__transition.is-running i{animation:reel-strip 1.05s cubic-bezier(.7,0,.18,1) forwards}
.reel__transition.is-running i:nth-child(1){animation-delay:0s}
.reel__transition.is-running i:nth-child(2){animation-delay:.04s}
.reel__transition.is-running i:nth-child(3){animation-delay:.08s}
.reel__transition.is-running i:nth-child(4){animation-delay:.12s}
.reel__transition.is-running i:nth-child(5){animation-delay:.16s}
.reel__transition.is-running i:nth-child(6){animation-delay:.20s}
.reel__transition.is-running i:nth-child(7){animation-delay:.24s}
.reel__transition.is-running i:nth-child(8){animation-delay:.28s}
@keyframes reel-strip{
  0%{transform:translateY(-101%)}
  42%{transform:translateY(0)}
  58%{transform:translateY(0)}
  100%{transform:translateY(101%)}
}

/* ── NAV CONTROLS ── */
.reel__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(7,8,11,.6);backdrop-filter:blur(10px);
  border:1px solid rgba(255,209,102,.25);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  z-index:6;transition:all .3s var(--ease-out);cursor:pointer;
}
.reel__nav:hover{background:var(--sun);color:#000;border-color:var(--sun)}
.reel__nav svg{width:18px;height:18px}
.reel__nav--prev{left:18px}
.reel__nav--next{right:18px}

/* ── PROGRESS BAR ── */
.reel__progress{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(245,239,226,.08);z-index:7;
}
.reel__progress i{
  display:block;height:100%;width:0;background:var(--grad);
  transition:width .15s linear;
}

/* ── DOTS ── */
.reel__dots{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:6;
}
.reel__dots button{
  width:28px;height:3px;border-radius:0;
  background:rgba(245,239,226,.2);border:none;cursor:pointer;
  transition:background .3s, transform .3s, height .3s;
  padding:0;
}
.reel__dots button:hover{background:rgba(255,209,102,.5)}
.reel__dots button.is-active{
  background:var(--sun);
  box-shadow:0 0 12px var(--sun);
}

/* ── HINT (mobile gesture cue) ── */
.reel__hint{
  position:absolute;top:24px;right:24px;z-index:6;
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;background:rgba(7,8,11,.6);backdrop-filter:blur(10px);
  border:1px solid rgba(255,209,102,.18);border-radius:999px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);pointer-events:none;
}
.reel__hint svg{color:var(--sun)}

/* responsive */
@media (max-width: 880px){
  .reel{padding:80px 16px 100px}
  .reel__stage{height:min(80vh, 640px);min-height:480px;border-radius:14px}
  .reel__overlay--bl{left:20px;bottom:50px;max-width:88%}
  .reel__overlay--bottom{left:16px;right:16px;bottom:50px;padding:18px 20px}
  .reel__quote-mark{font-size:140px}
  .reel__nav{width:40px;height:40px}
  .reel__nav--prev{left:10px}.reel__nav--next{right:10px}
  .reel__hint{display:none}
  /* split slide stacks vertically on mobile */
  .reel__half{position:absolute;width:100%;height:50%}
  .reel__half--left{top:0;bottom:auto}
  .reel__half--right{bottom:0;top:auto}
  .reel__half--left::after{
    background:linear-gradient(180deg, transparent 80%, rgba(7,8,11,.6) 100%);
  }
}

/* ░░░░░░░░░ ANIMATION HELPERS ░░░░░░░░░ */
[data-fade]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
[data-fade].in-view{opacity:1;transform:translateY(0)}
[data-split-words] .word{display:inline-block;overflow:hidden;vertical-align:top}
[data-split-words] .word > span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease-out)}
[data-split-words].in-view .word > span{transform:translateY(0)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  body{cursor:auto}
  .cursor,.cursor-trail,.loader{display:none}
}