/* cine.css — v4 cinematic storytelling kit (shared). Classes prefixed c- */
.c-hero{position:relative;min-height:clamp(520px,88vh,860px);display:grid;align-items:end;color:#fff;overflow:hidden;background:#07080d}
.c-hero>video,.c-hero>img,.c-hero>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:c-push 14s ease-out forwards}
.c-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,13,.15) 0%,rgba(7,8,13,.35) 45%,rgba(7,8,13,.92) 100%)}
.c-hero .wrap{position:relative;z-index:2;padding:0 0 clamp(48px,8vh,96px)}
.c-hero h1{color:#fff;font-size:clamp(2.2rem,5vw,4.4rem);max-width:18ch;line-height:1.04}
.c-hero .lede{color:rgba(255,255,255,.82);max-width:46ch;font-size:1.08rem}
.c-hero .eyebrow{color:#fff;opacity:.8}
@keyframes c-push{to{transform:scale(1)}}
/* v19q static: c-words, c-curtain, c-shutter are plain (no scroll reveal) */
.c-words .w,.c-words .w>span{display:inline;transform:none}
.c-curtain{position:relative;margin:0;overflow:hidden;border-radius:var(--r)}
.c-curtain img,.c-curtain video{display:block;width:100%;height:100%;object-fit:cover}
.c-shutter{position:relative;margin:0;overflow:hidden;border-radius:var(--r)}
.c-shutter img,.c-shutter video{display:block;width:100%;height:100%;object-fit:cover}
/* before/after: <div class="c-ba" style="--p:50%"><img class="a"><img class="b"><input type="range" aria-label="Compare"></div> */
.c-ba{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:16/9;background:#111;--p:50%}
.c-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-ba .b{clip-path:inset(0 0 0 var(--p))}
.c-ba:after{content:"";position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.c-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.c-ba .lab{position:absolute;bottom:12px;z-index:2;font:700 .7rem Montserrat;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:6px 10px;border-radius:99px}
.c-ba .lab.l{left:12px}.c-ba .lab.r{right:12px}
/* v19q: scrollytelling replaced by a static step flow: <div class="c-flow"><div class="c-flow-list"><div class="c-fc"><figure class="c-flow-fig"><img></figure><p class="n">01</p><h3>..</h3><p>..</p></div>…</div></div> */
.c-flow-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.c-fc{display:flex;flex-direction:column}
.c-flow-fig{margin:0 0 16px;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:#0b0c12}
.c-flow-fig img,.c-flow-fig picture{display:block;width:100%;height:100%;object-fit:cover}
.c-fc .n{font:800 2.2rem/1 Montserrat;color:var(--acc);margin:0 0 .2em}
.c-fc h3{font-size:clamp(1.2rem,1.9vw,1.5rem);margin:0 0 6px}
.c-fc p{max-width:40ch}
.c-dark .c-fc p,.c-dark .c-fc li{color:rgba(255,255,255,.78)}
/* visual tiles with 3–6 word captions: <div class="c-tiles"><a class="c-tile" href><img><span>Caption</span></a></div> */
.c-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.c-tile{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;color:#fff;text-decoration:none;background:#0b0c12}
.c-tile img,.c-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s;filter:saturate(.9) brightness(.85)}
.c-tile:hover img,.c-tile:hover video{transform:scale(1.06);filter:none}
.c-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.8))}
.c-tile span{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;font:700 1.05rem/1.25 Montserrat}
.c-tile small{display:block;font:500 .78rem Roboto;opacity:.8;margin-top:4px}
.c-tile.wide{grid-column:span 2;aspect-ratio:16/10}
@media(max-width:560px){.c-tile.wide{grid-column:auto;aspect-ratio:4/5}}
/* big number moment: <div class="c-num"><b data-count="1000000" data-suffix="+">0</b><span>sq ft delivered</span></div> */
.c-num{text-align:center;padding:24px 0}
.c-num b{display:block;font:800 clamp(3rem,9vw,7.5rem)/1 Montserrat;color:var(--ink);letter-spacing:-.03em}
.c-num span{font:600 1rem Montserrat;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.dark .c-num b{color:#fff}
/* dark cinematic section */
.c-dark{background:#07080d;color:rgba(255,255,255,.78)}
.c-dark h2,.c-dark h3{color:#fff}.c-dark .lede{color:rgba(255,255,255,.72)}
/* spotlight: v19q the image is always visible (no dark-until-lit reveal) */
.c-spot{position:relative;border-radius:var(--r);overflow:hidden;--x:50%;--y:50%}
.c-spot img{display:block;width:100%}
.c-spot:after{content:none}
/* marquee */
.c-marq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.c-marq>div{display:flex;gap:48px;width:max-content;animation:c-marq 40s linear infinite}
.c-marq img{height:44px;width:auto;filter:grayscale(1);opacity:.75}
@keyframes c-marq{to{transform:translateX(-50%)}}
/* reel: horizontal video strip */
.c-reel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,38%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.c-reel>*{scroll-snap-align:start}
@media(prefers-reduced-motion:reduce){.c-hero>*{animation:none!important}.c-marq>div{animation:none}}