/* ============================================================
   316 Web Works — Concrete & Ink (homepage-film palette)
   Loaded after styles.css. Colors only; layout untouched.
   ============================================================ */
:root{
  --bg:#e9e5df; --bg2:#dfdad3; --panel:#f4f1ec;
  --text:#12100e; --muted:#6b645c; --line:rgba(18,16,14,.12);
  --sand:#d2711f; --sand-soft:#e08a3c; --sand-pale:#12100e; --brass:#7a5c2e;
  --amber:#d2711f; --white:#12100e;
  --ink:#12100e; --paper:#f4f1ec;
}
::selection{background:var(--sand);color:#fff}
.label{color:var(--brass)}
.sand{color:var(--sand)}
.grad{color:var(--sand);-webkit-text-stroke:0;text-shadow:none}
#progress{background:linear-gradient(90deg,#7a5c2e,#d2711f,#e08a3c)}

/* nav */
header.scrolled{background:rgba(233,229,223,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
nav.links a{color:var(--muted)}
nav.links a:hover,nav.links a.active{color:var(--text)}
nav.links a.active::after{background:var(--sand)}
.brand .mark{background:var(--sand)}
.brand .g{color:var(--sand)}
.nav-toggle span{background:var(--text)}

/* buttons */
.btn-primary{background:var(--ink);color:#f4f1ec;box-shadow:0 8px 24px rgba(18,16,14,.18)}
.btn-primary::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent)}
.btn-primary:hover{background:#26211c;box-shadow:0 12px 32px rgba(18,16,14,.24)}
.btn-ghost{color:var(--text);border:1px solid rgba(18,16,14,.28)}
.btn-ghost:hover{border-color:var(--text);color:var(--text);background:rgba(18,16,14,.05)}
nav.links a.btn-primary{color:#f4f1ec}
.fx-pill{background:var(--ink);color:#f4f1ec;box-shadow:0 10px 30px rgba(18,16,14,.25)}
.fx-pill:hover{box-shadow:0 14px 36px rgba(18,16,14,.3)}

/* mobile nav overlay */
@media(max-width:860px){
  nav.links{background:#e9e5df}
  nav.links a{color:var(--text)}
  nav.links a.active{color:var(--sand)}
  nav.links a.btn-primary{color:#f4f1ec}
  nav.links::before{background-image:url("logo-dark.png");filter:none;opacity:.95}
}

/* footer */
footer{color:var(--muted)}
.foot-grid h4{color:var(--text)}
.foot-grid a:hover{color:var(--sand)}

/* cards, panels, tiers */
.card{background:rgba(255,255,255,.55);backdrop-filter:blur(6px);border:1px solid var(--line)}
.card::before{background:linear-gradient(90deg,transparent,rgba(210,113,31,.55),transparent)}
.card::after{background:radial-gradient(280px circle at var(--cx,50%) var(--cy,-30%),rgba(210,113,31,.10),transparent 65%)}
.card:hover{border-color:rgba(210,113,31,.5);box-shadow:0 22px 54px rgba(18,16,14,.14),0 0 44px rgba(210,113,31,.06)}
.tier{background:rgba(255,255,255,.6);border:1px solid var(--line)}
.tier::before{background:linear-gradient(90deg,transparent,rgba(210,113,31,.6),transparent)}
.tier.featured{border-color:rgba(210,113,31,.6);box-shadow:0 0 60px rgba(210,113,31,.08),inset 0 0 40px rgba(210,113,31,.03)}
.tier:hover{border-color:rgba(210,113,31,.6);box-shadow:0 24px 60px rgba(18,16,14,.14),0 0 50px rgba(210,113,31,.06)}
.tier::after{background:radial-gradient(300px circle at var(--cx,50%) var(--cy,-30%),rgba(210,113,31,.10),transparent 65%)}
.tier .pop{background:var(--sand);color:#fff}
.tier .price{color:var(--text)}
.tier li{color:var(--muted)}
.tier li::before{color:var(--sand)}
.mockup-band{border-color:rgba(18,16,14,.14);background:radial-gradient(ellipse at 50% 0%,rgba(210,113,31,.08),transparent 60%),var(--panel)}
.marquee{background:var(--bg2)}
.marquee-track span{color:var(--brass)}
.stat b{color:var(--text)}
.stat span{color:var(--muted)}

/* live embeds */
.live-card{background:var(--panel);border-color:var(--line)}
.live-card:hover{border-color:rgba(210,113,31,.5);box-shadow:0 24px 60px rgba(18,16,14,.16)}
.live-bar{background:#ded9d2;border-bottom:1px solid var(--line)}
.live-bar .dot{background:#bfb8ae}
.live-url{background:#f4f1ec;color:var(--muted)}
.live-viewport{background:#e2ddd6}
.live-cap strong{color:var(--text)}
.live-cap .go{color:var(--sand)}

/* forms */
.fg label{color:var(--text)}
.fg input,.fg textarea,.fg select{background:#fff;border:1px solid rgba(18,16,14,.16);color:var(--text)}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--sand)}
.chip span{border-color:rgba(18,16,14,.18);color:var(--muted)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:#f4f1ec}
.form-ok{background:rgba(210,113,31,.08);border-color:rgba(210,113,31,.4);color:var(--text)}

/* heroes over video: light shade, ink type */
.hero-media{background:var(--bg)}
/* the hero video carries z-index:2, so the shade must sit above it and the copy above both —
   otherwise the shade paints UNDER the video and ink type lands straight on dark footage */
.hero-shade{z-index:3;background:linear-gradient(180deg,rgba(233,229,223,.38) 0%,rgba(233,229,223,.14) 34%,rgba(233,229,223,.72) 60%,rgba(233,229,223,.98) 100%)}
.page-hero .wrap{z-index:4}
.page-hero h1,.page-hero .sub,.page-hero .label,
.scrub-sticky h1,.scrub-sticky h2,.scrub-sticky .sub,.scrub-sticky .label{text-shadow:0 1px 0 rgba(255,255,255,.35)}
.page-hero .sub{color:#3a342e}
.page-hero .sub[style*="color:#f1ebe2"]{color:#3a342e!important;text-shadow:none!important}
.page-hero h1[style*="text-shadow"]{text-shadow:0 1px 0 rgba(255,255,255,.35)!important}
.scroll-cue{color:var(--brass);text-shadow:none}
.scroll-cue .chev{border-color:var(--brass);filter:none}
.scrub-hint{color:var(--brass);text-shadow:none}

/* morph scene + captions over the new light footage */
.scene{background:var(--bg)}
.scene-cap{background:linear-gradient(180deg,rgba(233,229,223,0) 42%,rgba(233,229,223,.4) 68%,rgba(233,229,223,.9))}
.scene-sticky::after{background:linear-gradient(0deg,rgba(233,229,223,.85),rgba(233,229,223,.35) 55%,transparent)}
.scene-cap div{color:var(--text);text-shadow:none}
.scene-cap div::before{color:var(--brass);text-shadow:none}
.scene-cap div::after{background:linear-gradient(90deg,#7a5c2e,#d2711f,#e08a3c)}
.scene-fade{background:var(--bg)}

/* pinned story, parallax cards, tags */
.pin-shade{background:linear-gradient(90deg,rgba(233,229,223,.92) 0%,rgba(233,229,223,.55) 55%,rgba(233,229,223,.25))}
.pin-step{border-left-color:rgba(18,16,14,.15)}
.pin-step.on{border-left-color:var(--sand)}
.pin-step b{color:var(--text);text-shadow:none}
.pin-step span{color:var(--muted);text-shadow:none}
.pcard{background:rgba(244,241,236,.9);border-color:rgba(18,16,14,.14)}
.pcard b{color:var(--text)}
.panel-tag{background:rgba(244,241,236,.72);border-color:rgba(18,16,14,.14);box-shadow:0 14px 44px rgba(18,16,14,.18)}
.panel-tag:hover{border-color:var(--sand);background:rgba(244,241,236,.9)}
.panel-tag small{color:var(--brass)}
.panel-tag b{color:var(--text)}
.vcard .cap{background:linear-gradient(transparent,rgba(233,229,223,.92));color:var(--text)}
.vcard:hover{border-color:rgba(210,113,31,.5)}
.ba .handle,.ba .knob{background:var(--ink)}
.ba .knob::before{border-right-color:#f4f1ec}
.ba .knob::after{border-left-color:#f4f1ec}
.ba .tag{background:rgba(244,241,236,.85);color:var(--text)}

/* showroom misc */
.hpanel{border-color:rgba(18,16,14,.14);background:var(--panel)}
.hpanel b{color:var(--text)}
.deck .dcard{border-color:rgba(18,16,14,.14);box-shadow:0 -18px 50px rgba(18,16,14,.12)}
.deck .dcard h4{color:var(--text)}
.trail-img{border-color:rgba(18,16,14,.2)}
.peek{color:var(--sand);border-bottom-color:var(--sand)}
.peek-float{border-color:rgba(18,16,14,.2);box-shadow:0 20px 60px rgba(18,16,14,.3)}
.drawline path,.circuit path{stroke:var(--sand)}
.circuit circle{fill:var(--sand)}
.flip-front b{color:var(--text)}
.flip-front span{color:var(--brass)}
.flip-back{background:linear-gradient(160deg,#12100e,#26211c);border-color:rgba(210,113,31,.45)}
.flip-back b{color:var(--sand-soft)}
.flip-back p{color:#c9c2b8}
.readline span{color:rgba(18,16,14,.28)}
.readline span.lit{color:var(--text);text-shadow:none}
.want.saved{border-color:var(--sand);color:var(--text);background:rgba(210,113,31,.1)}
.fx-item .see:hover{color:var(--text);border-color:var(--sand);background:rgba(210,113,31,.08)}
.theme-demo{background:var(--bg2)}
.warp-label{color:var(--brass);text-shadow:none}
.room .p-front b{color:var(--text);text-shadow:0 10px 40px rgba(18,16,14,.15)}
.room .p-front span{color:var(--brass)}
.room .p-mid{border-color:rgba(18,16,14,.2);box-shadow:0 30px 80px rgba(18,16,14,.25)}
.xray-cover{background:var(--bg2)}
.masktext::before{background:linear-gradient(180deg,var(--bg),transparent)}
.masktext::after{background:linear-gradient(0deg,var(--bg),transparent)}

/* water CTA */
.cta-water .shade{background:radial-gradient(ellipse at 50% 55%,transparent 25%,rgba(233,229,223,.5) 100%),linear-gradient(180deg,var(--bg) 0%,rgba(233,229,223,.25) 30%,rgba(233,229,223,.25) 70%,var(--bg) 100%)}
.cta-water .logo-blend,.cta-logo{filter:drop-shadow(0 10px 30px rgba(18,16,14,.18))}

/* the homepage film ends light, hands off to the light page */
.film-final{background:linear-gradient(to top,rgba(233,229,223,1) 0%,rgba(233,229,223,.94) 30%,rgba(233,229,223,.8) 60%,rgba(233,229,223,.55) 100%)}
.film-final .line{color:#12100e}
.film-final .sub2{color:#3a342e}
.film-final img{filter:drop-shadow(0 6px 24px rgba(18,16,14,.18))}
.film2 .film-scrim{background:linear-gradient(to top,rgba(233,229,223,.92) 0%,rgba(233,229,223,.7) 16%,rgba(233,229,223,.36) 32%,rgba(233,229,223,.1) 50%,rgba(233,229,223,0) 64%),linear-gradient(to bottom,rgba(233,229,223,.55) 0%,rgba(233,229,223,.2) 9%,rgba(233,229,223,0) 20%)}

/* instagram link in the footer */
.foot-grid a.ig-link{display:inline-flex;align-items:center;gap:7px}
.foot-grid a.ig-link svg{flex:none;opacity:.85}

/* phone: pinned scrub blocks just play through — shorter runway so they don't pin forever */
@media(max-width:900px){.scrub.scrub-play{height:130vh!important}}