/* SoCal Entertainment and Media — site styles.
   Client pick 2026-11-03: style of C "Desert Film Lab". 2026-11-06: colours + Caveat Brush headings from client's sand/plum photo (linen version: design/site-linen-2026-11-05.css).
   Every colour and font lives in :root. */
/* Self-hosted (SIL OFL fonts, latin subset): no third-party requests, no render-blocking font CSS. */
@font-face{font-family:'Space Grotesk';src:url(/fonts/space-grotesk-latin.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Caveat Brush';src:url(/fonts/caveat-brush-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/fonts/jetbrains-mono-500-latin.woff2) format('woff2');font-weight:500;font-display:swap}
:root{
  --bg:#d7c8a9; --card:#e4d8c0; --ink:#3d3439; --mute:#5c5147; --accent:#5e4e33; --line:#c2b293;
  --on-ink:#f1ebde; --on-ink-mute:#d7c8a9; --accent-on-ink:#c9b48a; /* accent is too dark on --ink; use this there */
  --head:'Space Grotesk',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --display:'Caveat Brush',var(--head);
  --pad:clamp(20px,5vw,64px); --radius:0; --max:1312px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--head);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:var(--on-ink);padding:10px 16px}

/* dark band: nav + hero (and anything else that needs the film-lab dark) */
.dark{background:var(--ink);color:var(--on-ink)}
.dark .kicker,.dark h1 em,.dark h2 em{color:var(--accent-on-ink)}
.dark .lede{color:var(--on-ink-mute)}
.dark :focus-visible{outline-color:var(--accent-on-ink)}

/* type */
.kicker,.mono{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase}
h1{font-size:clamp(46px,7vw,88px);line-height:.95;letter-spacing:.01em}
h1 em,h2 em{font-style:normal;color:var(--accent)}
h2{font-size:clamp(32px,4.2vw,48px);line-height:1;letter-spacing:.01em}
h3{font-size:24px;line-height:1.1;letter-spacing:.01em}
.lede{font-size:clamp(16px,1.5vw,18px);color:var(--mute);max-width:46ch}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid var(--accent);background:var(--accent);color:var(--on-ink);font:500 15px var(--head);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.ghost{background:none;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--on-ink)}
.dark .btn:not(.ghost){background:var(--accent-on-ink);border-color:var(--accent-on-ink);color:var(--ink)}
.dark .btn:hover{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}
.dark .btn.ghost{color:var(--on-ink);border-color:var(--on-ink)}
.row{display:flex;flex-wrap:wrap;gap:12px}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px;border-bottom:1px solid rgba(241,235,222,.18)}
.logo{font:400 24px/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;text-decoration:none}
.logo i{font-style:normal;color:var(--accent-on-ink)}
.nav ul{display:flex;gap:28px;list-style:none;padding:0;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.nav ul a{text-decoration:none}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--accent-on-ink)}
.nav details{display:none}
@media (max-width:960px){
  .nav>ul,.nav>.btn{display:none}
  .nav details{display:block;position:relative}
  .nav summary{list-style:none;cursor:pointer;min-height:44px;display:grid;place-items:center;padding:0 14px;border:1px solid var(--on-ink);font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}
  .nav summary::-webkit-details-marker{display:none}
  .nav details ul{position:absolute;right:0;top:54px;z-index:20;flex-direction:column;gap:0;background:var(--ink);border:1px solid rgba(241,235,222,.25);min-width:220px;padding:8px}
  .nav details li a{display:block;padding:12px 14px}
}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:stretch;padding-block:clamp(40px,6vw,72px)}
.hero>div{display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.hero h1{margin:8px 0}
@media (max-width:860px){.hero{grid-template-columns:1fr}}

/* video frame (reel + video cards). Warm grade on stills; true colour on hover. */
.frame{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--card)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;filter:sepia(.45) saturate(1.15) contrast(1.05);transition:filter .4s}
.frame:hover img,.frame:focus-visible img{filter:none}
.frame .tag{position:absolute;left:18px;bottom:18px;background:var(--bg);color:var(--ink);padding:9px 16px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}
button.frame{border:0;padding:0;width:100%;cursor:pointer;font:inherit;color:inherit;text-align:left}
button.frame .play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:rgba(241,235,222,.92);color:var(--ink);display:grid;place-items:center;font-size:22px;transition:transform .2s}
button.frame:hover .play{transform:scale(1.08)}
/* camera HUD overlay, decorative */
.hud{position:absolute;inset:16px;border:1px solid rgba(241,235,222,.55);pointer-events:none;display:flex;justify-content:space-between;align-items:flex-start;padding:10px 12px;font:500 12px var(--mono);letter-spacing:.08em;color:var(--on-ink);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hud .rec::first-letter{color:#e5533a}
.hero .frame{aspect-ratio:auto;min-height:420px}
@media (max-width:860px){.hero .frame{min-height:0;aspect-ratio:16/10}}

/* sections */
.sec{padding-bottom:clamp(64px,8vw,96px)}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:20px;padding-top:clamp(56px,7vw,80px);margin-bottom:28px}

/* service tiles on a film strip */
.strip{background:var(--ink);padding-block:32px;position:relative}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:12px;background:radial-gradient(circle,var(--bg) 3px,transparent 3.5px) 0 0/24px 12px}
.strip::before{top:9px}.strip::after{bottom:9px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:t}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tiles{grid-template-columns:1fr}.tile .media{aspect-ratio:16/10}}
.tile{background:#4a4045;color:var(--on-ink);text-decoration:none;display:flex;flex-direction:column;counter-increment:t}
.tile .media{aspect-ratio:4/5;overflow:hidden;background:#2e272b;position:relative}
.tile .media img,.tile .media video{width:100%;height:100%;object-fit:cover;filter:sepia(.45) saturate(1.15);transition:transform .6s,filter .4s}
.tile:hover .media img,.tile:hover .media video{transform:scale(1.04);filter:none}
.tile .b{padding:14px 16px 18px}
.tile h3{display:flex;justify-content:space-between;align-items:baseline;font-size:26px}
.tile h3 span{color:var(--accent-on-ink)}
.tile p{font:500 12px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-mute);margin-top:6px}
.tile p::before{content:"0" counter(t) " · ";color:var(--accent-on-ink)}

/* Launch: blocks still waiting on client content carry the native hidden attribute (grep data-todo). Remove hidden when the content lands. */
[hidden]{display:none!important}
/* placeholder for client content not yet supplied — grep data-todo */
.todo{display:grid;place-items:center;height:100%;min-height:120px;padding:16px;text-align:center;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);background:repeating-linear-gradient(90deg,#e0d3b9 0 2px,#d2c3a4 2px 8px)}
.tile .todo{color:var(--on-ink-mute);background:repeating-linear-gradient(90deg,#3d3439 0 2px,#2e272b 2px 8px)}

/* proof: quote + numbers grid */
.proof{display:grid;grid-template-columns:1.3fr repeat(3,1fr);border:2px solid var(--ink)}
.proof>*+*{border-left:2px solid var(--ink)}
@media (max-width:1000px){.proof{grid-template-columns:repeat(3,1fr)}.proof .quote{grid-column:1/-1}.proof>.stat:nth-child(2){border-left:0}.proof>.stat{border-top:2px solid var(--ink)}}
@media (max-width:560px){.proof{grid-template-columns:1fr}.proof>.stat{border-left:0}}
.quote{background:var(--ink);color:var(--on-ink);padding:32px;font:500 21px/1.4 var(--head)}
.quote small{display:block;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-top:16px;color:var(--on-ink-mute)}
.stat{padding:28px}
.stat b{display:block;font:400 clamp(52px,5.4vw,76px)/.9 var(--display);letter-spacing:.01em;color:var(--accent);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:10px;font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* awards ticker */
.ticker{background:var(--accent);color:var(--on-ink)}
.badges{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:center;padding-block:16px;list-style:none;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.badges li::before{content:"★ "}

/* about split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split p+p{margin-top:16px}

/* packages */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:stretch;border:2px solid var(--ink)}
.pkgs>*+*{border-left:2px solid var(--ink)}
@media (max-width:960px){.pkgs{grid-template-columns:1fr}.pkgs>*+*{border-left:0;border-top:2px solid var(--ink)}}
.pkg{background:var(--card);padding:32px 28px;display:flex;flex-direction:column}
.pkg.feat{background:var(--ink);color:var(--on-ink)}
.pkg.feat .fit,.pkg.feat li{color:var(--on-ink-mute)}
.pkg .price{font:400 60px/1 var(--display);letter-spacing:.01em;margin:12px 0 6px}
.pkg .fit{color:var(--mute);font-size:15px;margin-bottom:20px}
.pkg ul{padding-left:18px;font-size:15px;color:var(--mute);display:grid;gap:6px}
.pkg h3{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin:22px 0 8px}
.pkg .btn{margin-top:auto;width:100%;justify-content:center}
.pkg ul:last-of-type{margin-bottom:26px}
.pkg.feat .btn{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.pkg.feat .btn:hover{background:var(--accent-on-ink);border-color:var(--accent-on-ink)}

/* steps, faq */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s;list-style:none;padding:0}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}
.steps li{border-top:2px solid var(--ink);padding-top:16px;counter-increment:s}
.steps li::before{content:"0" counter(s);font:400 44px/1 var(--display);letter-spacing:.01em;color:var(--accent);display:block;margin-bottom:10px}
.steps h3{font-size:20px;margin-bottom:6px}
.steps p{font-size:15px;color:var(--mute)}
.faq details{border-bottom:2px solid var(--ink);padding:18px 0}
.faq summary{cursor:pointer;font:400 22px var(--display);text-transform:uppercase;letter-spacing:.01em;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--mute);margin-top:10px;max-width:70ch}

/* video grid + dialog player */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:860px){.vids{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.vids{grid-template-columns:1fr}}
.vids figcaption{margin-top:10px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}
dialog.player{margin:auto;border:0;padding:0;background:#000;width:min(1100px,94vw);aspect-ratio:16/9;overflow:visible}
dialog.player .out{position:absolute;left:0;top:calc(100% + 10px);color:var(--on-ink);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
dialog.player::backdrop{background:rgba(25,20,23,.88)}
dialog.player iframe{width:100%;height:100%;border:0}
dialog.player form{position:absolute;top:8px;right:8px}
dialog.player button{background:var(--bg);border:0;width:44px;height:44px;font-size:20px;cursor:pointer}

/* cta + footer */
.cta-band{background:var(--card);border-top:2px solid var(--ink)}
.cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:32px;padding-block:clamp(56px,8vw,88px)}
.cta h2{font-size:clamp(38px,5.4vw,68px);line-height:.95;letter-spacing:.01em}
footer{background:var(--ink);color:var(--on-ink-mute);padding-block:48px;font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
footer a{text-decoration:none}footer a:hover{color:var(--on-ink)}
footer ul{list-style:none;padding:0;display:flex;gap:20px;flex-wrap:wrap;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* page header band (contact, book, thanks) */
.page-h{padding-block:clamp(40px,6vw,72px)}
.page-h h1{margin:8px 0 20px}
.page-h .lede+.lede{margin-top:10px}
.page-h .lede a{color:var(--accent-on-ink)}

/* forms */
.form{max-width:880px;display:grid;gap:28px}
.form fieldset{border:2px solid var(--ink);padding:24px clamp(18px,3vw,32px) 28px;min-width:0}
.form legend{font:400 22px var(--display);text-transform:uppercase;letter-spacing:.01em;padding:0 10px;margin-left:-10px}
.form .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
@media (max-width:640px){.form .grid{grid-template-columns:1fr}}
.form .wide{grid-column:1/-1}
.form label{display:grid;gap:6px;font-size:15px;font-weight:500}
.form input:not([type=radio]):not([type=checkbox]),.form select,.form textarea{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--mute);border-radius:var(--radius);background:#f7f2e7;color:var(--ink);font:400 16px var(--head)}
.form textarea{resize:vertical}
.form :is(input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.choices.col{flex-direction:column;align-items:flex-start}
.choices label{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-weight:400}
.choices label:has(:checked){border-color:var(--accent);background:#ece2cc}
.choices input{accent-color:var(--accent);width:18px;height:18px;flex:none}
.pkg-pick b{font-weight:700;color:var(--accent)}
.estimate{margin-top:18px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.estimate output{font:400 30px var(--display);letter-spacing:.01em;color:var(--ink);text-transform:none;margin-left:8px}
.note{margin-top:12px;font-size:14px;color:var(--mute);max-width:70ch}
.terms{max-height:340px;overflow:auto;padding:18px 20px;border:1px solid var(--line);background:#f7f2e7;font-size:14px;line-height:1.6}
.terms p+p{margin-top:12px}
.hp{position:absolute;left:-9999px}
.form>.btn{justify-self:start}
.js .form fieldset[data-svc]:not(.on){display:none} /* .js is set inline in <head>, so no layout jump */

/* ambient section video: <div class="amb"><video muted loop playsinline data-src="/vid/x.mp4"></video></div> as a section's first child.
   Section needs class="has-amb". Loads only on screen, never with reduced motion or Save-Data. */
.has-amb{position:relative;isolation:isolate}
.amb{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.amb video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s}
/* Each band clamps the clip's tonal range so text keeps 4.5:1 even over the clip's brightest (dark bands)
   or darkest (light bands) pixel. Measured worst case, not average. */
.amb video.on{opacity:.15;mix-blend-mode:multiply;filter:sepia(.5) contrast(.4) brightness(1.4)}
.dark .amb video.on,.amb.on-ink video.on{opacity:.24;mix-blend-mode:normal;filter:sepia(.5) contrast(.8) brightness(.42)}

/* work gallery filter: radio chips + :has(), no JS. All films show if :has() is unsupported. */
.chips{border:0;padding:0;margin:0 0 32px;min-width:0}
.chips .choices{margin-top:8px}
.work:has([value=wedding]:checked) .vids>:not([data-cat=wedding]),
.work:has([value=business]:checked) .vids>:not([data-cat=business]),
.work:has([value=party]:checked) .vids>:not([data-cat=party]),
.work:has([value=real-estate]:checked) .vids>:not([data-cat=real-estate]){display:none}
.vids .todo{aspect-ratio:16/9;height:auto}

/* reviews + about */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.stars{font:500 14px var(--mono);letter-spacing:.2em;color:var(--accent-on-ink);margin-bottom:14px}
.awards{list-style:none;padding:0;columns:2 340px;column-gap:48px}
.awards li{break-inside:avoid;display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.awards b{font:500 13px/1.6 var(--mono);color:var(--accent);flex:none}
.facts{list-style:none;padding:0;display:grid;gap:10px}
.facts li{border-top:2px solid var(--ink);padding-top:10px}

/* before/after slider: graded image underneath, raw clipped on top, range input invisible over both */
.ba{position:relative;--x:50%;border:2px solid var(--ink);overflow:hidden}
.ba img{width:100%;height:auto}
.ba .raw{position:absolute;inset:0;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba::after{content:"";position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:var(--on-ink);box-shadow:0 0 0 1px var(--ink);pointer-events:none}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ba:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.ba .lbl{position:absolute;top:12px;padding:4px 10px;background:var(--ink);color:var(--on-ink);font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.ba .lbl.l{left:12px}.ba .lbl.r{right:12px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}