@font-face{font-family:"Pagella VF";src:url(/assets/fonts/pag.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Pagella VF";src:url(/assets/fonts/pagi.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Heros VF";src:url(/assets/fonts/her.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Heros VF";src:url(/assets/fonts/herb.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Slate Mono";src:url(/assets/fonts/mono.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
/* Layout: a darkened screening room. Letterboxed hero reel, a contact-sheet grid of films, rate card, scene-numbered process, brief that opens WhatsApp. */
:root{
  --ink:#0F0C0A;        /* page, like a dark cinema */
  --reel:#181310;       /* raised surfaces */
  --line:#352B24;       /* hairlines */
  --cream:#F3E9D7;      /* text */
  --muted:#A99C89;      /* secondary text */
  --gold:#E3A94F;       /* golden hour accent */
  --ember:#D0533A;      /* REC light, used sparingly */
  --on-gold:#1A1208;
  --display:"Pagella VF","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --body:"Heros VF","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Slate Mono","Courier New",Courier,monospace;
  --gutter-l:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --max:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--ink);color:var(--cream);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;margin:0;text-wrap:balance;letter-spacing:-.005em}
h1 em,h2 em{color:var(--gold)}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.label{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.lede{color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:58ch}
section{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head h2{font-size:clamp(38px,5.4vw,66px)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:.01em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:var(--body);transition:transform .2s ease,background .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:var(--on-gold)}
.btn-gold:hover{background:#EDB964}
.btn-ghost{border-color:rgba(243,233,215,.35);color:var(--cream);background:transparent}
.btn-ghost:hover{border-color:var(--cream)}
.btn svg{width:18px;height:18px;flex:none}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(15,12,10,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:38px;height:38px;flex:none}
.brand b{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:.12em;white-space:nowrap}
.brand b i{color:var(--gold);letter-spacing:0;margin:0 .18em}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:14px}
.nav ul a{text-decoration:none;color:var(--muted)}
.nav ul a:hover{color:var(--cream)}
.nav .btn{min-height:40px;padding:8px 18px;font-size:14px}
@media (max-width:860px){.nav ul{display:none}}
@media (max-width:420px){.brand b{font-size:17px;letter-spacing:.08em}.nav .btn span{display:none}.nav .btn{padding:8px 12px}}

/* hero */
.hero{padding-block:clamp(20px,3vw,36px) clamp(48px,6vw,80px)}
.screen{position:relative;border-radius:6px;overflow:hidden;background:#000;aspect-ratio:2.39/1;max-width:100%}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,12,10,.88) 0%,rgba(15,12,10,.55) 38%,rgba(15,12,10,0) 66%),linear-gradient(0deg,rgba(15,12,10,.5),rgba(15,12,10,0) 40%);pointer-events:none}
.tc{position:absolute;top:18px;left:22px;z-index:2;display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--cream);font-variant-numeric:tabular-nums}
.tc .rec{display:inline-flex;align-items:center;gap:8px;color:var(--ember)}
.tc .rec::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ember);animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.tc .meta{color:var(--muted)}
.hero-copy{position:absolute;z-index:2;left:clamp(22px,4vw,56px);bottom:clamp(26px,4vw,56px);max-width:600px;display:grid;gap:20px}
h1.label{font-family:var(--mono);font-size:13px;font-weight:400;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-wrap:wrap}
.h1{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.005em;text-wrap:balance;margin:0}
.h1 em{color:var(--gold)}
.hero .h1{font-size:clamp(46px,6.6vw,92px)}
.hero .lede{color:#D6CAB6}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;font-size:14px;color:var(--muted)}
.facts span{display:inline-flex;align-items:center;gap:9px}
.facts span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.frame{position:absolute;inset:0}
@media (max-width:900px){
  .screen{aspect-ratio:auto;overflow:visible;background:transparent;border-radius:0}
  .screen::after{display:none}
  .frame{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:6px;overflow:hidden;background:#000}
  .tc{top:12px;left:14px;font-size:11px}
  .tc .meta{display:none}
  .hero-copy{position:static;max-width:none;padding-top:28px}
}
@media (prefers-reduced-motion:reduce){.tc .rec::before{animation:none}}

/* work */
.work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.film{grid-column:span 2;display:grid;gap:12px;min-width:0}
.film.feature{grid-column:span 4;grid-row:span 2;grid-template-rows:1fr auto auto}
.film.wide{grid-column:span 3}
.thumb{position:relative;display:block;width:100%;padding:0;border:0;border-radius:6px;overflow:hidden;background:var(--reel);cursor:pointer;aspect-ratio:16/9}
.film.feature .thumb{aspect-ratio:auto;height:100%;min-height:280px}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .4s ease;filter:saturate(.95)}
.thumb:hover img{--z:1.12;filter:saturate(1.08)}
.thumb .play{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 12px;border-radius:999px;background:rgba(15,12,10,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:var(--body);font-size:13px;font-weight:700;color:var(--cream)}
.thumb .play i{width:24px;height:24px;border-radius:50%;background:var(--gold);display:grid;place-items:center}
.thumb .play i::before{content:"";border-left:8px solid var(--on-gold);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.film-info{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.film h3{font-size:24px}
.film.feature h3{font-size:30px}
.film p{color:var(--muted);font-size:14px;line-height:1.5}
.spec{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:900px){.work-grid{grid-template-columns:repeat(2,1fr)}.film,.film.wide{grid-column:span 1}.film.feature{grid-column:span 2;grid-row:auto}.film.feature .thumb{aspect-ratio:16/9;height:auto;min-height:0}}
@media (max-width:560px){.work-grid{grid-template-columns:1fr}.film,.film.wide,.film.feature{grid-column:span 1}}

/* player */
dialog{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);width:100%;color:var(--cream)}
dialog::backdrop{background:rgba(5,4,3,.9)}
.player{display:grid;gap:12px}
.yt{position:relative;width:100%;aspect-ratio:16/9;max-height:78vh;background:#000;border-radius:6px;overflow:hidden}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player video{width:100%;max-height:78vh;background:#000;border-radius:6px;display:block}
.player-bar{display:flex;justify-content:space-between;align-items:center;gap:16px}
.player-bar h3{font-size:22px}
.close{background:transparent;border:1.5px solid rgba(243,233,215,.35);color:var(--cream);border-radius:999px;min-height:40px;padding:6px 16px;font:700 14px var(--body);cursor:pointer}

/* pricing */
.rates{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.rate{display:flex;flex-direction:column;gap:20px;padding:30px 26px;border:1px solid var(--line);border-radius:10px;background:var(--reel);min-width:0}
.rate.pick{border-color:var(--gold);background:linear-gradient(180deg,rgba(227,169,79,.09),rgba(227,169,79,0) 50%),var(--reel)}
.rate-top{display:grid;gap:8px}
.rate .tag{justify-self:start;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.rate.pick .tag{border-color:var(--gold);color:var(--gold)}
.rate h3{font-size:30px}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price b{font-family:var(--display);font-weight:400;font-size:52px;line-height:1;color:var(--cream)}
.price span{color:var(--muted);font-size:14px}
.rate .for{color:var(--muted);font-size:15px}
.rate ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15px}
.rate li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.rate li::before{content:"";width:12px;height:7px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);margin-top:6px}
.rate .btn{margin-top:auto}
.rate .eg{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
@media (max-width:900px){.rates{grid-template-columns:1fr}}

.calc{margin-top:22px;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;padding:26px;border:1px dashed var(--line);border-radius:10px}
.calc label{display:block;font-weight:700;margin-bottom:10px}
.calc-row{display:flex;align-items:center;gap:16px}
.calc input[type=range]{flex:1;accent-color:var(--gold);min-width:0}
.calc output{font-family:var(--mono);font-size:22px;font-variant-numeric:tabular-nums;min-width:4.5ch;text-align:right}
.quote{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quote div{padding:14px 16px;border-radius:8px;background:var(--reel)}
.quote small{display:block;color:var(--muted);font-size:13px}
.quote b{font-family:var(--display);font-weight:400;font-size:34px;font-variant-numeric:tabular-nums}
.included{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14px;color:var(--muted)}
.included strong{color:var(--cream)}
@media (max-width:760px){.calc{grid-template-columns:1fr}}

/* promise */
.promise{border-block:1px solid var(--line);background:var(--reel)}
.promise .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.promise h2{font-size:clamp(40px,5.8vw,76px)}
.promise p{color:var(--muted);font-size:17px}
.promise .notes{display:grid;gap:14px}
@media (max-width:820px){.promise .wrap{grid-template-columns:1fr}}

/* process */
.scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.scene{padding:24px 22px 8px 0;display:grid;gap:12px;align-content:start;min-width:0}
.scene + .scene{padding-left:22px;border-left:1px solid var(--line)}
.scene .label{color:var(--gold)}
.scene h3{font-size:24px}
.scene p{color:var(--muted);font-size:15px}
.scene .slug{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
@media (max-width:900px){.scenes{grid-template-columns:1fr 1fr}.scene:nth-child(3){padding-left:0;border-left:0}.scene:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:560px){.scenes{grid-template-columns:1fr}.scene,.scene + .scene{padding-left:0;border-left:0}.scene + .scene{border-top:1px solid var(--line)}}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(28px,5vw,72px)}
.faq details{border-top:1px solid var(--line);padding-block:18px}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-family:var(--display);font-size:22px;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);color:var(--gold);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);margin-top:12px;max-width:62ch}
@media (max-width:820px){.faq{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(28px,5vw,72px);align-items:start}
.about-copy{display:grid;gap:16px;color:var(--muted);font-size:17px;max-width:64ch}
.tags{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--cream)}
@media (max-width:820px){.about{grid-template-columns:1fr}}

/* contact */
.contact{background:linear-gradient(180deg,var(--ink),#16100C)}
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start}
.contact h2{font-size:clamp(40px,5.6vw,72px)}
.channels{display:grid;gap:12px;margin-top:30px}
.channel{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;min-width:0}
.channel div{min-width:0}
.channel small{display:block;color:var(--muted);font-size:12px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.channel span{display:block;font-size:17px;overflow-wrap:anywhere;user-select:all}
.copy{flex:none;background:transparent;border:1px solid var(--line);color:var(--cream);border-radius:999px;padding:7px 14px;font:700 13px var(--body);cursor:pointer;min-height:36px}
.copy:hover{border-color:var(--gold)}
.brief{display:grid;gap:16px;padding:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:12px;background:var(--reel)}
.brief .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px;min-width:0}
.field label{font-size:13px;font-weight:700}
.field input,.field select,.field textarea{width:100%;background:var(--ink);color:var(--cream);border:1px solid var(--line);border-radius:8px;padding:12px 14px;font:16px var(--body)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.brief .fine{font-size:13px;color:var(--muted)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:480px){.brief .row{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:32px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer a{color:var(--cream)}
/* ---------- motion ---------- */
.progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:2px;z-index:70;background:linear-gradient(90deg,var(--ember),var(--gold));transform-origin:0 50%;transform:scaleX(0)}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* hero opening: letterbox shutters part, lines rise in */
.frame::before,.frame::after{content:"";position:absolute;left:0;right:0;height:50%;background:#000;z-index:3;animation:shutter 1.3s cubic-bezier(.7,0,.2,1) .15s both;pointer-events:none}
.frame::before{top:0;transform-origin:top}
.frame::after{bottom:0;transform-origin:bottom}
@keyframes shutter{from{transform:scaleY(1)}to{transform:scaleY(0)}}
.hero video{animation:push 9s ease-out both}
@keyframes push{from{transform:scale(1.12)}to{transform:scale(1)}}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln > span{display:inline-block;animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both}
.ln:nth-child(1) > span{animation-delay:.9s}
.ln:nth-child(2) > span{animation-delay:1.05s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero .label,.hero .lede,.hero .cta-row,.facts{animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) both}
.hero .label{animation-delay:.75s}.hero .lede{animation-delay:1.25s}.hero .cta-row{animation-delay:1.4s}.facts{animation-delay:1.6s}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tc{animation:fadeUp .6s ease 1.2s both}

/* marquee */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:16px;margin-top:clamp(36px,5vw,56px)}
.marquee-track{display:flex;width:max-content;animation:scroll 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--display);font-size:clamp(22px,2.6vw,32px);white-space:nowrap;padding-right:1.4em;display:inline-flex;align-items:center;gap:1.4em}
.marquee-track span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.marquee-track span:nth-child(even){font-style:italic;color:var(--gold)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* scroll reveals (only elements below the fold at load start hidden) */
.rv.rv{transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1),filter 1s ease;transition-delay:var(--d,0s)}
.rv.rv.pre{opacity:0;transform:translateY(42px);filter:blur(6px)}
.rv-wipe.rv-wipe{transition:clip-path 1.3s cubic-bezier(.7,0,.2,1);transition-delay:var(--d,0s);clip-path:inset(0 0 0 0)}
.rv-wipe.pre{clip-path:inset(0 100% 0 0)}
.scenes{position:relative}
.scenes::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--p,1));z-index:1}

/* film cards: parallax image, hover preview, lift */
.thumb img{transform:scale(var(--z,1.06)) translateY(var(--py,0px))}
.thumb video.preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.thumb.previewing video.preview{opacity:1}
.film{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.film:hover{transform:translateY(-6px)}
.thumb .play{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s}
.thumb:hover .play{transform:translateY(-4px);background:var(--gold);color:var(--on-gold)}
.thumb:hover .play i{background:var(--on-gold)}
.thumb:hover .play i::before{border-left-color:var(--gold)}
.thumb .play,.thumb::after{z-index:2}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,12,10,.45),rgba(15,12,10,0) 45%);pointer-events:none}

/* buttons: light sweep */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s ease}
.btn-gold:hover::after{transform:translateX(120%)}
.btn svg{transition:transform .3s ease}
.btn:hover svg{transform:rotate(-12deg) scale(1.1)}

/* rate cards */
.rate{transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .5s}
.rate:hover{transform:translateY(-8px);border-color:rgba(227,169,79,.6);box-shadow:0 24px 60px -28px rgba(227,169,79,.35)}
.quote b{display:inline-block;transition:transform .25s ease}
.quote b.bump{transform:scale(1.08)}

/* faq open */
.faq details p{animation:fadeUp .5s ease both}
.faq summary::after{transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(180deg)}

/* player open */
dialog[open]{animation:pop .45s cubic-bezier(.2,.8,.2,1)}
dialog[open]::backdrop{animation:fade .4s ease}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* header shrinks after scroll */
header{transition:background .4s,border-color .4s}
header.scrolled{background:rgba(15,12,10,.94)}
.nav{transition:min-height .4s ease}
header.scrolled .nav{min-height:58px}
.nav ul a{position:relative}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.nav ul a:hover::after,.nav ul a.on::after{transform:scaleX(1);transform-origin:left}
.nav ul a.on{color:var(--cream)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .grain,.progress{display:none}
  .rv.rv.pre,.rv-wipe.rv-wipe.pre{opacity:1;transform:none;filter:none;clip-path:none}
}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--cream);color:var(--ink);padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;z-index:80}

/* ---------- multi-page additions ---------- */
.nav ul a[aria-current="page"]{color:var(--cream)}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;padding-top:28px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.crumbs span[aria-hidden]{color:var(--line)}
.page-hero{padding-block:clamp(28px,4vw,48px) clamp(40px,6vw,72px);display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.page-hero .hero-text{display:grid;gap:20px;min-width:0}
.page-hero h1{font-size:clamp(40px,5.6vw,72px)}
.page-hero .cta-row{display:flex;flex-wrap:wrap;gap:12px}
.page-hero .media{min-width:0}
.page-hero .film{grid-column:auto}
.facts.inline{margin-top:4px}
@media (max-width:900px){.page-hero{grid-template-columns:1fr}}

.prose{display:grid;gap:18px;max-width:70ch;color:#D9CDB9;font-size:17px;line-height:1.7}
.prose h2{font-size:clamp(28px,3.4vw,40px);color:var(--cream);margin-top:22px}
.prose h3{font-size:24px;color:var(--cream);margin-top:8px}
.prose ul,.prose ol{margin:0;padding-left:1.2em;display:grid;gap:8px}
.prose li::marker{color:var(--gold)}
.prose strong{color:var(--cream)}
.prose a{color:var(--gold)}
.prose table{border-collapse:collapse;width:100%;font-size:15px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:400}
.table-wrap{overflow-x:auto}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,5vw,64px);align-items:start}
.aside{position:sticky;top:96px;display:grid;gap:16px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--reel)}
.aside h3{font-size:24px}
.aside p{color:var(--muted);font-size:15px}
.aside .price b{font-size:44px}
@media (max-width:980px){.two-col{grid-template-columns:1fr}.aside{position:static}}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{display:grid;gap:10px;align-content:start;padding:22px;border:1px solid var(--line);border-radius:10px;background:var(--reel);text-decoration:none;min-width:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(227,169,79,.6)}
.card .label{font-size:11px}
.card h3{font-size:22px}
.card p{color:var(--muted);font-size:14px;line-height:1.55}
.card .go{font-weight:700;font-size:14px;color:var(--gold)}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

.cta-band{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(227,169,79,.08),rgba(227,169,79,0)),var(--reel)}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(32px,4.4vw,52px)}
.cta-band p{color:var(--muted);margin-top:10px}

.watch video{width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;display:block}
.specs{display:flex;flex-wrap:wrap;gap:10px}
.specs span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--muted)}

footer .cols{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:28px;width:100%;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:20px}
footer .cols h4{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
footer .cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer .cols a{color:var(--muted);text-decoration:none;font-size:14px}
footer .cols a:hover{color:var(--cream)}
footer .cols p{color:var(--muted);font-size:14px;margin-top:12px;max-width:34ch}
footer .wrap.foot{display:block}
footer .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){footer .cols{grid-template-columns:1fr}}

.mbar{display:none}
@media (max-width:700px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;gap:10px;align-items:center;justify-content:space-between;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(15,12,10,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  .mbar small{color:var(--muted);font-size:12px;line-height:1.3}
  .mbar small b{display:block;color:var(--cream);font-size:14px}
  .mbar .btn{min-height:42px;padding:8px 16px;font-size:14px}
  body{padding-bottom:72px}
}