/* Sotee Productions · site.css */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-400.woff") format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/poppins-500.woff") format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/poppins-700.woff") format("woff")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/instrument-serif-italic.woff") format("woff")}
/* Layout: a film you scroll through. Intro sting, light that follows you, a horizontal reel, words that light up as you read. One orange action per view. */
html,body{margin:0; overflow-x:clip}
img,svg,video,canvas{max-width:100%}
[hidden]{display:none !important}
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
:root{
  --black:#0B0B0B; --graphite:#141414; --raised:#1C1C1C;
  --white:#FFFFFF; --soft:#D8D3CD; --mute:#B4AEA7; --ash:#9A958F; --line:#2A2826;
  --orange:#FF5A1F;
  --sans:"Poppins", Arial, Helvetica, sans-serif;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --gutter:max(20px, 5vw);
  --max:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{overflow-x:clip}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
body{
  background:var(--black); color:var(--white);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--black)}
a{color:inherit}
::selection{background:var(--orange); color:var(--black)}
.wrap{
  max-width:calc(var(--max) + 2 * var(--gutter)); margin:0 auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right,0px));
}
h1,h2,h3{font-weight:700; line-height:1.05; margin:0; text-wrap:balance}
p{margin:0}
.serif{font-family:var(--serif); font-style:italic; font-weight:400}
.label{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ash)}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px}

/* Split text */
.w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em}
.c{display:inline-block; will-change:transform}

/* Intro sting */
#intro{display:none}
.js #intro{position:fixed; inset:0; z-index:100; background:var(--black); display:flex; align-items:center; justify-content:center; gap:18px}
#intro .sym{width:64px; height:auto}
#intro .wm{width:auto; height:30px; opacity:0}
#intro .bar{position:absolute; left:50%; bottom:max(40px, env(safe-area-inset-bottom,0px)); transform:translateX(-50%); width:120px; height:1px; background:var(--line); overflow:hidden}
#intro .bar i{display:block; height:100%; width:100%; background:var(--orange); transform:scaleX(0); transform-origin:left}

/* Cursor */
.cursor{position:fixed; left:0; top:0; z-index:90; pointer-events:none; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--orange); display:none; align-items:center; justify-content:center; font:600 12px/1 var(--sans); color:var(--black); transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease)}
.cursor{opacity:0}
.cursor.on{opacity:1}
.cursor span{opacity:0; transition:opacity .2s}
.cursor.big{width:92px; height:92px; margin:-46px 0 0 -46px}
.cursor.big span{opacity:1}
@media (pointer:fine){ .js .cursor{display:flex} }

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:12px; position:relative; font:600 15px/1 var(--sans); text-decoration:none; cursor:pointer; padding:18px 26px; border:1px solid transparent; border-radius:0; transition:background .25s, color .25s, border-color .25s}
.btn-primary{background:var(--orange); color:var(--black)}
.btn-primary:hover{background:var(--white)}
.btn-ghost{background:transparent; color:var(--white); border-color:#3a3836}
.btn-ghost:hover{border-color:var(--white)}
.btn-light{background:var(--white); color:var(--black)}
.btn-light:hover{background:var(--orange)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* Header */
header{position:fixed; left:0; right:0; top:env(safe-area-inset-top,0px); z-index:50; transition:transform .5s var(--ease), background .3s, border-color .3s; border-bottom:1px solid transparent}
header.solid{background:rgba(11,11,11,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:var(--line)}
header.hide{transform:translateY(-100%)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; height:76px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo svg{display:block; height:26px; width:auto}
.nav ul{display:flex; gap:30px; list-style:none; margin:0; padding:0}
.nav ul a{text-decoration:none; font-size:14px; color:var(--soft); transition:color .2s; position:relative}
.nav ul a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--orange); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease)}
.nav ul a:hover{color:var(--white)}
.nav ul a:hover::after{transform:scaleX(1); transform-origin:left}
.nav-r{display:flex; align-items:center; gap:18px}
.nav .btn{padding:13px 20px; font-size:14px}
.lang{display:flex; align-items:center; font-size:12px; color:#4a4744}
.lang a{text-decoration:none; font:600 12px/1 var(--sans); letter-spacing:.04em; color:var(--ash); background:none; border:0; padding:10px 6px; cursor:pointer; transition:color .2s}
.lang a:hover{color:var(--white)}
.lang a[aria-current="true"]{color:var(--white)}

/* Hero */
.hero{position:relative; overflow:hidden; min-height:min(100svh, 980px); display:flex; align-items:flex-end; border-bottom:1px solid var(--line)}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.hero-grid{position:relative; width:100%; display:grid; grid-template-columns:1.3fr .7fr; gap:48px; align-items:end; padding-block:150px clamp(56px,7vw,96px)}
.hero h1{font-size:clamp(42px,7.2vw,108px); text-transform:uppercase; letter-spacing:-.025em; line-height:.94}
.hero h1 .serif{display:block; text-transform:none; font-size:.8em; letter-spacing:0; color:var(--orange); margin-top:.14em; line-height:1}
.hero-side{display:flex; flex-direction:column; gap:28px; padding-bottom:10px}
.hero-side p{font-size:18px; line-height:1.6; color:var(--soft); max-width:42ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.hero-meta{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:13px; color:var(--ash)}
.hero-meta b{color:var(--white); font-weight:500}
.scroll-cue{position:absolute; right:max(var(--gutter), env(safe-area-inset-right,0px)); top:120px; display:flex; flex-direction:column; align-items:center; gap:12px; font-size:12px; color:var(--ash); writing-mode:vertical-rl}
.scroll-cue i{width:1px; height:64px; background:linear-gradient(var(--orange),transparent); writing-mode:horizontal-tb; animation:cue 2.2s var(--ease) infinite; transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1); opacity:0}}

/* Marquee */
.marquee{border-bottom:1px solid var(--line); overflow:hidden; white-space:nowrap}
.marquee-track{display:inline-flex; padding-block:24px; will-change:transform}
.marquee span{font-size:clamp(20px,2.4vw,32px); font-weight:600; color:var(--white); display:inline-flex; align-items:center; gap:48px; padding-right:48px}
.marquee span.o{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--mute)}
.marquee span::after{content:""; width:9px; height:9px; background:var(--orange); border-radius:50%}

/* Sections */
section{padding-block:clamp(90px,11vw,160px)}
.head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:clamp(44px,6vw,80px)}
.head h2{font-size:clamp(36px,4.8vw,64px); letter-spacing:-.02em}
.head p{color:var(--mute); font-size:17px; max-width:48ch; justify-self:end}

/* Services */
.services{display:grid; grid-template-columns:repeat(12,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.svc{grid-column:span 3; position:relative; overflow:hidden; background:var(--black); padding:38px 32px 32px; display:flex; flex-direction:column; gap:18px; min-width:0; --mx:50%; --my:50%}
.svc::before{content:""; position:absolute; inset:0; background:radial-gradient(420px circle at var(--mx) var(--my), rgba(255,90,31,.13), transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none}
.svc:hover::before{opacity:1}
.svc > *{position:relative}
.svc.wide{grid-column:span 6}
.svc h3{font-size:28px; font-weight:600; letter-spacing:-.01em}
.svc p{color:var(--mute); font-size:15px}
.svc ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.svc li{font-size:12.5px; color:var(--soft); border:1px solid #33312e; padding:5px 10px}
.qlink{margin-top:auto; padding:10px 0 0; font:600 14px/1.4 var(--sans); color:var(--orange); display:inline-flex; gap:10px; align-items:center; background:none; border:0; cursor:pointer; align-self:flex-start; text-decoration:none}
.qlink .arr{transition:transform .25s var(--ease)}
.qlink:hover .arr{transform:translateX(4px)}

/* Packs */
.packs-sec{background:var(--graphite); border-block:1px solid var(--line)}
.packs{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.pack{position:relative; background:var(--black); border:1px solid var(--line); padding:36px 30px 30px; display:flex; flex-direction:column; gap:22px; min-width:0; overflow:hidden; transition:translate .5s var(--ease), border-color .3s; --mx:50%; --my:50%}
.pack::before{content:""; position:absolute; inset:0; background:radial-gradient(380px circle at var(--mx) var(--my), rgba(255,90,31,.12), transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none}
.pack:hover{translate:0 -6px; border-color:#45413d}
.pack:hover::before{opacity:1}
.pack > *{position:relative}
.pack.rec{border-color:var(--orange)}
.pack .top{display:flex; justify-content:space-between; align-items:center; gap:12px}
.pack .badge{font-size:11.5px; font-weight:600; background:var(--orange); color:var(--black); padding:5px 9px; text-transform:uppercase; letter-spacing:.05em}
.pack h3{font-size:30px; font-weight:600}
.pack .for{color:var(--mute); font-size:15px; min-height:3.2em}
.pack .nums{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
.pack .nums div{background:var(--black); padding:14px 16px; display:flex; flex-direction:column}
.pack .nums b{font-size:30px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums}
.pack .nums span{font-size:12.5px; color:var(--ash)}
.pack ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14.5px; color:var(--soft)}
.pack li{display:flex; gap:12px; align-items:baseline}
.pack li::before{content:""; width:12px; height:2px; background:var(--orange); flex:none; transform:translateY(-4px)}
.pack .btn{margin-top:auto; justify-content:space-between}
.packs-note{margin-top:44px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 32px; color:var(--soft); font-size:14px}
.packs-note span{display:inline-flex; gap:10px; align-items:center}
.packs-note span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--orange); flex:none}

/* Work */
.reel{position:relative; overflow:hidden}
.reel-head{padding-top:clamp(90px,9vw,130px)}
.reel-head .head{margin-bottom:28px}
.wf{display:flex; flex-wrap:wrap; gap:6px 4px; margin-bottom:clamp(28px,3.5vw,44px); border-bottom:1px solid var(--line)}
.wf button{font:500 15px/1 var(--sans); color:var(--ash); background:none; border:0; cursor:pointer; padding:14px 14px 16px; position:relative; display:inline-flex; gap:6px; align-items:flex-start; transition:color .25s}
.wf button:first-child{padding-left:0}
.wf button sup{font-size:11px; font-weight:600; color:var(--ash); font-variant-numeric:tabular-nums; transform:translateY(-3px)}
.wf button::after{content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease)}
.wf button:first-child::after{left:0}
.wf button:hover, .wf button[aria-pressed="true"]{color:var(--white)}
.wf button[aria-pressed="true"] sup{color:var(--orange)}
.wf button[aria-pressed="true"]::after{transform:scaleX(1)}
.reel-track{display:flex; gap:32px; padding-left:max(var(--gutter), env(safe-area-inset-left,0px)); padding-right:max(var(--gutter), env(safe-area-inset-right,0px)); padding-bottom:clamp(60px,8vw,120px); will-change:transform}
.film{flex:0 0 min(56vw, 780px); text-decoration:none; display:flex; flex-direction:column; gap:14px; min-width:0}
.frame{position:relative; aspect-ratio:2.39/1; max-width:100%; background:#111; overflow:hidden}
.frame canvas{position:absolute; inset:-8% -4%; width:108%; height:116%; display:block}
.film .meta{display:flex; justify-content:space-between; align-items:baseline; gap:16px}
.film h3{font-size:clamp(22px,2.2vw,30px); font-weight:600}
.film p{color:var(--mute); font-size:15px; max-width:58ch}
.film .idx{font-size:13px; color:var(--ash); font-variant-numeric:tabular-nums}
.reel-end{flex:0 0 min(40vw, 520px); display:flex; flex-direction:column; justify-content:center; gap:24px; padding:0 20px}
.reel-end p{font-family:var(--serif); font-style:italic; font-size:clamp(28px,3vw,44px); line-height:1.15}

/* Statement */
.statement{border-block:1px solid var(--line)}
.statement p.big{font-size:clamp(30px,4.6vw,66px); line-height:1.12; font-weight:600; letter-spacing:-.02em; max-width:22ch}
.statement p.big .serif{font-weight:400; color:var(--orange)}
.statement .who{margin-top:40px; display:flex; gap:16px; align-items:center; color:var(--ash); font-size:14px}
.statement .who::before{content:""; width:36px; height:3px; background:var(--orange)}

/* Process */
.steps{position:relative; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line)}
.steps .fill{position:absolute; left:0; top:-1px; height:1px; width:100%; background:var(--orange); transform:scaleX(0); transform-origin:left}
.step{padding:30px 28px 0 0; border-right:1px solid var(--line); margin-right:28px; display:flex; flex-direction:column; gap:12px; min-width:0}
.step:last-child{border-right:0; margin-right:0}
.step .n{font-size:13px; font-weight:600; color:var(--orange); font-variant-numeric:tabular-nums}
.step h3{font-size:21px; font-weight:600}
.step p{color:var(--mute); font-size:15px}
.step .t{margin-top:auto; padding-block:20px 28px; font-size:13px; color:var(--ash)}

/* Why */
.why{display:grid; grid-template-columns:repeat(3,1fr); gap:48px}
.why div{display:flex; flex-direction:column; gap:12px; min-width:0}
.why h3{font-size:22px; font-weight:600}
.why p{color:var(--mute); font-size:15px}
.why svg{width:40px; height:auto}

/* FAQ */
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px}
.faq-grid h2{font-size:clamp(34px,4.6vw,60px); letter-spacing:-.02em}
.faq-grid > div:first-child p{color:var(--mute); margin-top:20px; max-width:36ch}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{list-style:none; cursor:pointer; padding:24px 0; display:flex; justify-content:space-between; gap:24px; font-size:18px; font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-weight:400; font-size:26px; line-height:1; color:var(--orange); transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-bottom:26px; color:var(--mute); max-width:62ch}

/* Quote */
.quote{background:var(--orange); color:var(--black); position:relative}
.quote-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:72px; align-items:start}
.quote h2{font-size:clamp(44px,6.4vw,92px); text-transform:uppercase; letter-spacing:-.025em; line-height:.94}
.quote h2 .serif{display:block; text-transform:none; letter-spacing:0; font-size:.7em; margin-top:.12em}
.quote-intro{position:sticky; top:110px}
.quote-intro p{margin-top:28px; font-size:17px; max-width:40ch}
.quote-intro ul{list-style:none; padding:0; margin:28px 0 0; display:flex; flex-direction:column; gap:10px; font-weight:500; font-size:15px}
.quote-intro li{display:flex; gap:12px; align-items:baseline}
.quote-intro li::before{content:""; width:14px; height:3px; background:var(--black); flex:none; transform:translateY(-4px)}
.direct{margin-top:36px; padding-top:24px; border-top:1px solid rgba(11,11,11,.3); font-size:14px}
.direct a{font-weight:600; font-size:18px; display:inline-block; margin-top:4px}

form{background:var(--black); color:var(--white); padding:clamp(24px,4vw,44px); display:flex; flex-direction:column; gap:26px}
fieldset{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; min-width:0}
legend{padding:0; margin-bottom:12px; font-size:14px; font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips input{position:absolute; opacity:0; pointer-events:none}
.chips label{cursor:pointer; padding:10px 15px; border:1px solid #3a3836; font-size:14px; color:var(--soft); transition:.15s; user-select:none}
.chips label:hover{border-color:var(--white)}
.chips input:checked + label{background:var(--orange); border-color:var(--orange); color:var(--black); font-weight:500}
.chips input:focus-visible + label{outline:2px solid var(--orange); outline-offset:2px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:8px; min-width:0}
.field label{font-size:14px; font-weight:600}
.field label small{font-weight:400; color:var(--ash)}
.field input, .field textarea{font:400 16px/1.5 var(--sans); color:var(--white); background:transparent; border:0; border-bottom:1px solid #3a3836; padding:10px 0; border-radius:0; width:100%}
.field textarea{resize:vertical; min-height:96px}
.field input:focus, .field textarea:focus{outline:none; border-bottom-color:var(--orange)}
.field input::placeholder, .field textarea::placeholder{color:#6f6a64}
.err{color:#ff8a5c; font-size:13px; min-height:1em}
form .btn{align-self:flex-start}
.form-note{font-size:13px; color:var(--ash)}
.form-note a{color:var(--soft)}
.done{background:var(--black); color:var(--white); padding:clamp(24px,4vw,44px); display:flex; flex-direction:column; gap:18px}
.done h3{font-size:30px; font-weight:600}
.done p{color:var(--mute)}
.done pre{white-space:pre-wrap; font:400 14px/1.6 var(--sans); background:var(--graphite); padding:18px; margin:0; color:var(--soft); border:1px solid var(--line)}
.done .acts{display:flex; flex-wrap:wrap; gap:10px}

/* Footer */
footer{padding-block:80px 40px; overflow:hidden}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.foot h4{margin:0 0 16px; font-size:14px; font-weight:600}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.foot a{text-decoration:none; color:var(--mute); font-size:15px}
.foot a:hover{color:var(--white)}
.foot .tag{font-family:var(--serif); font-style:italic; font-size:30px}
.foot .seo{color:var(--ash); font-size:13px; margin-top:16px; max-width:44ch}
.giant{margin-top:72px}
.giant svg{display:block; width:100%; height:auto}
.legal{margin-top:40px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; color:var(--ash); font-size:13px}
.legal nav{display:flex; flex-wrap:wrap; gap:8px 22px}
.legal a{color:var(--ash); text-decoration:none; font-size:13px}
.legal a:hover{color:var(--white)}
.lre{display:inline-flex; align-items:center; gap:8px; border:1px solid #3a3836; padding:6px 10px}
.lre::before{content:""; width:10px; height:12px; border:1.5px solid currentColor; border-radius:1px}

/* Cookie banner */
.cb{position:fixed; z-index:80; left:max(20px, env(safe-area-inset-left,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); width:min(460px, calc(100vw - 40px)); background:var(--raised); border:1px solid #34312e; padding:26px; display:flex; flex-direction:column; gap:16px; box-shadow:0 24px 60px rgba(0,0,0,.5)}
.cb h2{font-size:18px; font-weight:600; line-height:1.3}
.cb p{font-size:14px; color:var(--mute); line-height:1.6}
.cb p a{color:var(--white)}
.cb-prefs{display:flex; flex-direction:column; border-top:1px solid #34312e}
.tg{display:grid; grid-template-columns:1fr auto; gap:2px 16px; padding:14px 0; border-bottom:1px solid #34312e; cursor:pointer}
.tg b{font-size:14px; font-weight:600}
.tg small{grid-column:1; font-size:13px; color:var(--ash); line-height:1.5}
.tg input{position:absolute; opacity:0; pointer-events:none}
.tg .sw{grid-row:1 / span 2; grid-column:2; align-self:center; width:42px; height:24px; border-radius:12px; background:#3a3836; position:relative; transition:background .2s}
.tg .sw::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--white); transition:transform .25s var(--ease)}
.tg input:checked + .sw{background:var(--orange)}
.tg input:checked + .sw::after{transform:translateX(18px)}
.tg input:disabled + .sw{opacity:.55}
.tg input:focus-visible + .sw{outline:2px solid var(--orange); outline-offset:2px}
.cb-acts{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.cb-acts .btn{justify-content:center; padding:14px 12px; font-size:14px}
.cb-acts .cust{grid-column:1 / -1; background:none; border:0; color:var(--soft); font:500 13px/1 var(--sans); padding:8px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.cb-acts .cust:hover{color:var(--white)}

/* Legal modal */
.lm{position:fixed; inset:0; z-index:95; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:max(16px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) max(16px, env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px))}
.lm-panel{position:relative; width:min(820px, 100%); max-height:100%; overflow:auto; overscroll-behavior:contain; background:var(--graphite); border:1px solid var(--line); padding:clamp(28px,5vw,56px)}
.lm-x{position:sticky; top:0; float:right; margin:-12px -12px 0 0; width:44px; height:44px; border:1px solid #3a3836; background:var(--graphite); color:var(--white); font:400 22px/1 var(--sans); cursor:pointer}
.lm-x:hover{border-color:var(--white)}
.doc h2{font-size:clamp(30px,4vw,44px); letter-spacing:-.015em; margin-bottom:8px}
.doc .upd{color:var(--ash); font-size:13px; margin-bottom:28px}
.doc h3{font-size:18px; font-weight:600; margin:32px 0 10px}
.doc p, .doc li{color:var(--soft); font-size:15px; line-height:1.7; max-width:66ch}
.doc p + p{margin-top:12px}
.doc ul{padding-left:18px; margin:0; display:flex; flex-direction:column; gap:6px}
.doc a{color:var(--white)}
.doc .ph{color:var(--orange)}
.tbl{overflow-x:auto; margin-top:8px}
.doc table{border-collapse:collapse; width:100%; min-width:540px; font-size:14px}
.doc th, .doc td{text-align:left; padding:12px 14px 12px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--soft)}
.doc th{color:var(--white); font-weight:600; font-size:13px}

/* Mobile CTA */
.mcta{display:none}

@media (max-width:1100px){ .nav ul{gap:22px} }
@media (max-width:980px){
  .nav ul{display:none}
  .hero-grid, .head, .faq-grid, .quote-grid{grid-template-columns:1fr}
  .head p{justify-self:start}
  .svc, .svc.wide{grid-column:span 6}
  .packs{grid-template-columns:1fr}
  .pack .for{min-height:0}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(3){border-right:0; margin-right:0}
  .why{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
  .quote-grid{gap:44px}
  .quote-intro{position:static}
  .scroll-cue{display:none}
  .reel-track{flex-direction:column; gap:56px}
  .film, .reel-end{flex:none; width:100%}
  .reel-end{padding:0}
}
@media (max-width:640px){
  .nav .btn{display:none}
  .services{grid-template-columns:1fr}
  .svc, .svc.wide{grid-column:auto}
  .steps, .why, .row{grid-template-columns:1fr}
  .step{border-right:0; margin-right:0; border-bottom:1px solid var(--line); padding-right:0}
  .step .t{padding-bottom:20px}
  .foot{grid-template-columns:1fr}
  .hero-cta .btn{flex:1 1 auto; justify-content:center}
  .hero-grid{padding-top:130px}
  .cb{left:12px; right:12px; width:auto; bottom:calc(12px + env(safe-area-inset-bottom,0px)); padding:22px}
  .mcta{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; gap:10px; 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(11,11,11,.92); backdrop-filter:blur(10px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .4s var(--ease)}
  .mcta.show{transform:none}
  .mcta .btn{flex:1; justify-content:center; padding:15px}
  footer{padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){
  .js #intro{display:none}
  .scroll-cue i{animation:none}
  .pack{transition:none}
}