*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.lbl{font-family:var(--label);font-size:12px;letter-spacing:.08em;color:var(--mute);margin:0 0 8px}
h1,h2,h3{font-family:var(--disp);font-weight:400;text-transform:var(--disp-case);line-height:var(--disp-lh,.95);margin:0}
.h-xl{font-size:clamp(40px,6vw,92px)}
.h-lg{font-size:clamp(40px,6.4vw,96px)}
.slash{color:var(--accent)}
.wrap{padding-left:clamp(18px,5vw,80px);padding-right:clamp(18px,5vw,80px)}
section{position:relative}
.alt{background:var(--bg2)}

header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px clamp(14px,3vw,36px);background:linear-gradient(var(--bg),transparent)}
.logo{font-family:var(--disp);font-size:22px;letter-spacing:.03em;text-transform:var(--disp-case)}
.logo small{display:block;font-family:var(--label);font-size:10px;letter-spacing:.12em;color:var(--mute);text-transform:none}
nav{display:flex;gap:18px;font-family:var(--label);font-size:12px}
nav a{color:var(--mute);padding:6px 0;border-bottom:1px solid transparent}
nav a.on{color:var(--accent2);border-color:var(--accent2)}
.order-btn{display:inline-block;font-family:var(--label);font-size:13px;border:1px solid var(--accent2);color:var(--accent2);padding:9px 14px;border-radius:var(--radius)}
.progress{position:fixed;left:0;top:0;height:2px;background:var(--accent);width:100%;transform-origin:left;transform:scaleX(0);z-index:60}

.stick{position:sticky;top:0;height:100vh;overflow:hidden}
.hero .bg,.zoom .bg{position:absolute;inset:-8% 0;background-size:cover;filter:var(--hero-filter,brightness(.62) contrast(1.1) saturate(1.1));will-change:transform}
.zoom .bg{inset:0;filter:brightness(.7) contrast(1.12) saturate(1.15)}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 8%,transparent 62%),linear-gradient(0deg,var(--bg),transparent 40%)}
.zoom .shade{position:absolute;inset:0;background:radial-gradient(60% 70% at 30% 60%,rgba(0,0,0,.35),rgba(0,0,0,.85))}
.hero .copy{position:absolute;left:clamp(18px,5vw,80px);bottom:16vh;max-width:680px}
.hero h1{font-size:clamp(64px,12vw,180px)}
.hero .tag{margin-top:16px}
.cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%)}
.copy.mid{position:absolute;left:clamp(18px,5vw,80px);top:50%;transform:translateY(-50%);max-width:540px}
.chip{display:inline-block;margin:14px 8px 0 0;padding:6px 12px;border:1px solid var(--accent2);color:var(--accent2);font-family:var(--label);font-size:12px;border-radius:var(--radius)}
.aside{position:absolute;right:clamp(18px,5vw,80px);bottom:10vh;text-align:right;max-width:340px}
.aside b{font-family:var(--disp);font-weight:400;font-size:clamp(34px,4vw,56px);text-transform:var(--disp-case);line-height:1;display:block;margin:4px 0}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,70px);height:100%;align-items:center}
.big-num{font-family:var(--disp);font-size:clamp(72px,11vw,170px);color:var(--accent2);line-height:1;margin-top:10px}
.big-num small{font-size:.35em;color:var(--mute);margin-left:8px}
.table{margin-top:20px;border-top:1px solid var(--line)}
.table div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.table span:first-child{color:var(--mute)}
.shot{height:78vh;border-radius:var(--radius);background-size:cover;position:relative;overflow:hidden}
.shot::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(0,0,0,.85)}
.bar{position:absolute;right:16px;top:12%;bottom:12%;width:6px;background:rgba(255,255,255,.1);border-radius:3px;z-index:1}
.bar i,.meter i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(var(--accent2),var(--accent));border-radius:inherit;height:0}

.block{padding-top:14vh;padding-bottom:12vh}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .25s}
.card:hover{border-color:var(--accent2)}
.card .ph{height:300px;background-size:cover;background-position:center}
.card .in{padding:18px 20px 22px}
.card h3{font-size:30px}
.card p{color:var(--mute);margin:6px 0 14px;font-size:15px}
.row{display:flex;justify-content:space-between;align-items:center}
.price{font-family:var(--disp);font-size:28px;color:var(--accent2)}
.mini{border:1px solid var(--line);background:none;padding:8px 12px;font-family:var(--label);font-size:12px;border-radius:var(--radius)}
.mini:hover{border-color:var(--accent2);color:var(--accent2)}

.builder{display:grid;grid-template-columns:1.4fr 1fr;gap:28px}
.group{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px;background:var(--panel)}
.group h4{margin:0 0 10px;font-family:var(--label);font-size:12px;color:var(--accent2);font-weight:400}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{padding:9px 14px;border:1px solid var(--line);background:none;border-radius:999px;font-size:14px}
.opt[aria-pressed="true"]{background:var(--accent2);color:var(--accent-ink);border-color:var(--accent2)}
.sum{position:sticky;top:90px;align-self:start;border:1px solid var(--accent2);border-radius:var(--radius);padding:22px;background:var(--panel)}
.sum h3{font-size:34px;margin-bottom:10px}
.sum ul{list-style:none;margin:0 0 16px;padding:0;color:var(--mute)}
.sum li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line)}
.total{display:flex;justify-content:space-between;font-family:var(--disp);font-size:36px;color:var(--accent2);margin-bottom:14px}
.cta{width:100%;padding:15px;border:0;background:var(--accent);color:var(--accent-ink);font-family:var(--label);font-weight:700;border-radius:var(--radius)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.stat{border-top:2px solid var(--accent2);padding-top:12px}
.stat b{font-family:var(--disp);font-weight:400;font-size:clamp(44px,6vw,90px);line-height:1;display:block}
.meter-wrap{display:flex;align-items:center;justify-content:center}
.rest{font-family:var(--disp);font-size:clamp(100px,17vw,260px);line-height:.9}
.meter{width:12px;height:56vh;background:rgba(255,255,255,.08);border-radius:6px;position:relative;margin-left:22px}

.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px clamp(18px,5vw,80px) 24px;scrollbar-width:thin}
.lay{flex:0 0 min(360px,78vw);scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.lay .ph{height:260px;background-size:cover;background-position:center}
.lay .in{padding:16px 18px 20px}
.lay .n{float:right;font-family:var(--disp);font-size:36px;color:rgba(255,255,255,.15)}
.lay h3{font-size:26px}
.lay p{margin:6px 0 0;color:var(--mute);font-size:15px}

details{border-top:1px solid var(--line);padding:18px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;justify-content:space-between;gap:16px;cursor:pointer;font-family:var(--disp);font-size:clamp(26px,3.4vw,46px);text-transform:var(--disp-case)}
summary::-webkit-details-marker{display:none}
summary span{font-family:var(--label);font-size:13px;color:var(--accent2);align-self:center}
details p{max-width:760px;color:var(--mute);margin:14px 0 0}

.tm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,70px);align-items:center}
.tm.flip>div:first-child{order:2}
.tm .ph{min-height:60vh;border-radius:var(--radius);background-size:cover;background-position:center}
.tm p{max-width:60ch}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.map{width:100%;height:360px;border:0;border-radius:var(--radius);margin-top:24px}

.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;align-items:stretch}
.tier{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--panel)}
.tier.featured{border-color:var(--accent2)}
.tier h3{font-size:30px}
.tier-price b{font-family:var(--disp);font-weight:400;font-size:52px;color:var(--accent2)}
.tier-price span{color:var(--mute)}
.tier-blurb{color:var(--mute)}
.tier ul{list-style:none;padding:0;margin:8px 0 22px;flex:1}
.tier li{padding:7px 0;border-bottom:1px dashed var(--line)}
.tier-cta{text-align:center;text-decoration:none}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.quotes figure{margin:0;padding:24px;border-left:2px solid var(--accent2);background:var(--panel);border-radius:var(--radius)}
.quotes blockquote{margin:0 0 14px;font-size:19px;line-height:1.5}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.gallery figure{margin:0}
.gallery .wide{grid-column:span 2}
.gallery .ph{aspect-ratio:4/3;border-radius:var(--radius);background-size:cover;background-position:center}
.gallery figcaption{margin-top:8px}
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-family:var(--label);font-size:13px;color:var(--mute)}
.form input,.form textarea,.form select{font:inherit;font-family:var(--body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
footer{padding:60px clamp(18px,5vw,80px) 30px;border-top:1px solid var(--line);background:var(--bg2)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
.credits{font-size:12px;color:var(--mute);max-height:170px;overflow:auto;padding-left:16px}
.credits li{margin-bottom:4px}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,16px);opacity:0;background:var(--accent2);color:var(--accent-ink);padding:12px 18px;font-family:var(--label);font-size:13px;z-index:80;transition:.3s;pointer-events:none;border-radius:var(--radius)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

@media (max-width:860px){
  nav{display:none}
  .grid2,.builder,.tm{grid-template-columns:1fr}
  .tm.flip>div:first-child{order:0}
  .shot{height:40vh}
  .hero .copy{bottom:12vh}
  .aside{position:static;margin:24px clamp(18px,5vw,80px);text-align:left}
  .copy.mid{position:relative;transform:none;top:auto;padding-top:22vh}
  .meter{height:30vh}
  .sum{position:static}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}



/* film-hero: canvas image sequence + HUD */
.filmsec{background:#000}
.filmsec .fposter,.filmsec .fcanvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.filmsec .fposter{transition:opacity .4s}
.fshade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 28%)}
.hud{position:absolute;inset:clamp(64px,9vh,92px) clamp(12px,2.4vw,32px) clamp(14px,3vh,28px);pointer-events:none;font-variant-numeric:tabular-nums}
.hud .lbl{position:absolute;margin:0;font-size:11px;color:rgba(242,236,228,.72);letter-spacing:.12em}
.hud .h-tl{left:14px;top:10px}.hud .h-tr{right:14px;top:10px}.hud .h-bl{left:14px;bottom:24px;color:var(--accent2)}.hud .h-br{right:14px;bottom:24px}
.hud .h-tl b{font-weight:400;color:var(--ink)}
.rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff3b2f;margin-right:7px;vertical-align:1px;animation:rec 1.2s steps(2) infinite}
@keyframes rec{50%{opacity:.15}}
.hud .br{position:absolute;width:22px;height:22px;border:1px solid rgba(242,236,228,.5)}
.b1{left:0;top:0;border-width:1px 0 0 1px!important}.b2{right:0;top:0;border-width:1px 1px 0 0!important}.b3{left:0;bottom:0;border-width:0 0 1px 1px!important}.b4{right:0;bottom:0;border-width:0 1px 1px 0!important}
.ruler{position:absolute;left:14px;right:14px;bottom:6px;height:10px;overflow:hidden;
  background:repeating-linear-gradient(90deg,rgba(242,236,228,.35) 0 1px,transparent 1px 8px) bottom/100% 5px no-repeat,repeating-linear-gradient(90deg,rgba(242,236,228,.55) 0 1px,transparent 1px 80px) bottom/100% 10px no-repeat}
.ruler i{position:absolute;left:0;bottom:0;width:100%;height:10px;transform:translateX(0)}
.ruler i::before{content:"";position:absolute;left:0;bottom:0;width:3px;height:10px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.fcopy{position:absolute;top:50%;translate:0 -50%;max-width:min(560px,44vw);visibility:hidden;opacity:0;will-change:opacity,transform}
.fcopy.left{left:clamp(26px,6vw,96px)}.fcopy.right{right:clamp(26px,6vw,96px);text-align:right}
.fcopy.right .table div{flex-direction:row-reverse}
.fcopy h1{font-size:clamp(64px,10vw,168px)}
.fcopy h1,.fcopy h2{text-shadow:0 2px 30px rgba(0,0,0,.6)}
.fcopy .big-num{text-shadow:0 0 34px color-mix(in srgb,var(--accent) 55%,transparent)}
.fcopy .fbody{max-width:420px;margin:14px 0 0;color:rgba(242,236,228,.86)}
.fcopy.right .fbody{margin-left:auto}
.fcopy .table{max-width:420px}.fcopy.right .table{margin-left:auto}
.fcopy .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.fcopy.right .chips{justify-content:flex-end}
.fcopy .chips span{border:1px solid var(--accent2);color:var(--accent2);padding:5px 10px;border-radius:var(--radius);margin:0}
.filmsec .cue{z-index:2}
/* pinned-stats with a photo behind */
.has-bg .stick{position:sticky}
.has-bg .bg{position:absolute;inset:0;background-size:cover;filter:brightness(.55) contrast(1.1) saturate(1.1);will-change:transform}
.has-bg .shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0,rgba(0,0,0,.55) 45%,rgba(0,0,0,.25)),linear-gradient(0deg,var(--bg),transparent 30%)}
.has-bg .inner{position:relative;height:100%}
@media (max-width:760px){
  .fcopy,.fcopy.right{left:18px;right:18px;top:auto;bottom:12vh;translate:none;max-width:none;text-align:left}
  .fcopy.right .table div{flex-direction:row}.fcopy.right .fbody,.fcopy.right .table{margin-left:0}.fcopy.right .chips{justify-content:flex-start}
  .fcopy .table{display:none}
  .fcopy h1{font-size:clamp(56px,17vw,92px)}
  .fshade{background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.2) 55%,transparent 75%)}
  .hud .h-br{display:none}
}