/* Wetline Wildfire Defense: site styles
   Layout concept: cinematic dark editorial. Full-bleed video and photography under heavy overlays,
   light geometric display type with tight tracking, bracketed mono indices, one burnt-ember accent. */
:root{
  --k0:#0A0A09; --k1:#121211; --k2:#1A1A18; --k3:#262623;
  --w0:#F4F3EF; --w1:#E4E3DE; --w2:#CFCDC6;
  --g1:#A9A79F; --g2:#7A7871; --g3:#56554F;
  --ember:#C9431C; --ember-hi:#E2582B; --ember-soft:rgba(201,67,28,.16);
  --ld:rgba(244,243,239,.12); --ld2:rgba(244,243,239,.24); --ll:rgba(10,10,9,.12); --ll2:rgba(10,10,9,.24);
  --f-display:"Geist","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-body:"Geist","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --water:#5DB4E8; --wrap:1320px; --ease:cubic-bezier(.2,.7,.1,1);
  --scrim:linear-gradient(180deg, rgba(10,10,9,.78) 0%, rgba(10,10,9,.5) 28%, rgba(10,10,9,.55) 55%, rgba(10,10,9,.97) 100%);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0; background:var(--k0); color:var(--w0); font-family:var(--f-body); font-weight:300; font-size:17px; line-height:1.6; -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:90; background:var(--k0)}
img,video{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ember-hi); outline-offset:3px}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:max(24px, env(safe-area-inset-left,0px)); padding-right:max(24px, env(safe-area-inset-right,0px))}
.narrow{max-width:820px}
.skip{position:absolute; left:-999px; top:8px; background:var(--w0); color:var(--k0); padding:8px 12px; z-index:200}
.skip:focus{left:12px}
h1,h2,h3,h4{margin:0; font-family:var(--f-display); font-weight:300; letter-spacing:-.045em; line-height:.95; text-wrap:balance}
p{margin:0}
.e{color:var(--ember-hi); font-style:normal}
.idx{font-family:var(--f-mono); font-size:.76rem; letter-spacing:.14em; color:var(--g1); text-transform:uppercase; display:inline-flex; gap:14px; align-items:center}
.idx b{font-weight:400; color:var(--ember-hi)}
.idx::after{content:""; width:48px; height:1px; background:currentColor; opacity:.5}
@media (max-width:620px){ .idx{flex-wrap:wrap; row-gap:6px; line-height:1.5} .idx::after{display:none} }
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.lede{font-size:clamp(1.05rem,1.3vw,1.22rem); line-height:1.6; color:var(--g1); max-width:56ch}
.h-xl{font-size:clamp(2.9rem, 7.6vw, 7.6rem); line-height:.88; letter-spacing:-.055em}
.h-l{font-size:clamp(2.3rem, 5vw, 4.8rem); line-height:.92; letter-spacing:-.05em}
.h-m{font-size:clamp(1.7rem, 2.8vw, 2.6rem); line-height:.98}
section{position:relative}
.pad{padding-block:clamp(88px, 11vw, 168px)}
.pad-s{padding-block:clamp(56px, 7vw, 100px)}
.sel{user-select:all}
.shadow-t{text-shadow:0 2px 24px rgba(0,0,0,.45)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:12px; font:500 .95rem/1 var(--f-body); padding:17px 24px; border-radius:999px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:background .3s var(--ease), color .3s, border-color .3s}
.btn .ar{display:inline-block; transition:transform .35s var(--ease); font-family:var(--f-mono)}
.btn:hover .ar{transform:translateX(4px)}
.btn-e{background:var(--ember); color:#fff} .btn-e:hover{background:var(--ember-hi)}
.btn-w{background:var(--w0); color:var(--k0)} .btn-w:hover{background:#fff}
.btn-o{border-color:var(--ld2); color:var(--w0); background:rgba(10,10,9,.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)} .btn-o:hover{border-color:var(--w0)}
.btn-ok{border-color:var(--ll2); color:var(--k0)} .btn-ok:hover{border-color:var(--k0)}
.actions{display:flex; flex-wrap:wrap; gap:12px}
.tlink{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; display:inline-flex; gap:10px; align-items:center; color:var(--w0); border-bottom:1px solid var(--ld2); padding-bottom:6px; transition:border-color .3s, color .3s}
.tlink:hover{border-color:var(--ember-hi); color:var(--ember-hi)}

/* reveal: rests visible, animates in */
.js .rv{opacity:.18; transform:translateY(30px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.js .rv.in{opacity:1; transform:none}
.js .rv-d1{transition-delay:.08s} .js .rv-d2{transition-delay:.16s} .js .rv-d3{transition-delay:.24s}
.js .rimg{clip-path:inset(10% 0 0 0); transition:clip-path 1.4s var(--ease)}
.js .rimg.in{clip-path:inset(0 0 0 0)}
.js .rimg img{transform:scale(1.12); transition:transform 2s var(--ease)}
.js .rimg.in img{transform:scale(1)}

/* logo */
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--w0)}
.logo svg{width:40px; height:40px; flex:none}
.logo-w{display:grid; line-height:1}
.logo-w b{font:900 1.55rem/1 "Livvic", var(--f-display); letter-spacing:.05em; text-transform:uppercase}
.logo-w small{font:500 .54rem/1 var(--f-mono); letter-spacing:.42em; text-transform:uppercase; color:var(--g1); margin-top:6px}

/* nav */
.nav{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:80; transition:background .4s, border-color .4s; border-bottom:1px solid transparent; background:linear-gradient(180deg, rgba(10,10,9,.6), rgba(10,10,9,0))}
.nav.solid{background:rgba(10,10,9,.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-color:var(--ld)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:84px; gap:24px; transition:height .4s}
.nav.solid .nav-in{height:70px}
.menu{display:flex; gap:4px; list-style:none; margin:0; padding:0; font-size:.92rem}
.menu > li{position:relative}
.menu > li > a{display:block; text-decoration:none; color:var(--w1); padding:10px 14px; border-radius:99px; transition:background .25s}
.menu > li > a:hover, .menu > li:focus-within > a{background:rgba(244,243,239,.08)}
.menu .has > a::after{content:""; display:inline-block; width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-3px); margin-left:9px; opacity:.6}
.drop{position:absolute; top:calc(100% + 8px); left:-12px; min-width:560px; padding:22px; border-radius:16px; background:rgba(18,18,17,.97); border:1px solid var(--ld2); box-shadow:0 30px 60px -20px rgba(0,0,0,.6); display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .25s, transform .25s var(--ease), visibility .25s}
.drop.one{min-width:300px; grid-template-columns:1fr}
.menu > li:hover .drop, .menu > li:focus-within .drop{opacity:1; visibility:visible; transform:none}
.drop a{display:grid; gap:2px; padding:10px 12px; border-radius:10px; text-decoration:none}
.drop a:hover{background:rgba(244,243,239,.06)}
.drop a b{font-weight:500; font-size:.92rem; color:var(--w0)}
.drop a span{font-size:.78rem; color:var(--g1); line-height:1.35}
.drop .dh{grid-column:1/-1; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--g2); padding:6px 12px 2px}
.nav-cta{display:flex; gap:10px; align-items:center}
.nav-cta .btn{padding:12px 18px; font-size:.86rem}
.burger{display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--ld2); background:transparent; color:var(--w0); cursor:pointer}
.burger span{display:block; width:16px; height:1px; background:currentColor; margin:4px auto}
.mmenu{position:fixed; inset:0; z-index:79; background:var(--k0); padding:110px max(24px, env(safe-area-inset-left,0px)) 40px; overflow-y:auto; transform:translateY(-100%); transition:transform .6s var(--ease)}
.mmenu.open{transform:none}
.mmenu details{border-bottom:1px solid var(--ld)}
.mmenu summary{list-style:none; cursor:pointer; font:300 2rem/1.2 var(--f-display); letter-spacing:-.04em; padding-block:14px}
.mmenu summary::-webkit-details-marker{display:none}
.mmenu .sub{display:grid; gap:4px; padding:0 0 16px}
.mmenu .sub a{text-decoration:none; color:var(--g1); padding-block:6px}
.mmenu > a{display:block; font:300 2rem/1.2 var(--f-display); letter-spacing:-.04em; text-decoration:none; border-bottom:1px solid var(--ld); padding-block:14px}
@media (max-width:1120px){ .menu{display:none} .burger{display:block} .nav-cta .btn-o{display:none} }
@media (max-width:460px){ .nav-cta .btn-e{display:none} }

/* media layers */
.media{position:absolute; inset:0; z-index:-2; overflow:hidden}
.media img, .media video{width:100%; height:100%; object-fit:cover}
.media.par{inset:-12% 0}
.scrim{position:absolute; inset:0; z-index:-1; background:var(--scrim)}
.scrim.side{background:linear-gradient(90deg, rgba(10,10,9,.96) 0%, rgba(10,10,9,.82) 42%, rgba(10,10,9,.45) 100%), linear-gradient(0deg, rgba(10,10,9,.95), transparent 45%)}
.scrim.heavy{background:linear-gradient(180deg, rgba(10,10,9,.85) 0%, rgba(10,10,9,.66) 40%, rgba(10,10,9,.72) 70%, var(--k0) 100%)}

/* home hero */
.hero{min-height:max(660px, min(100svh, 980px)); display:grid; align-items:end; overflow:hidden; isolation:isolate}
.hero .scrim{background:linear-gradient(180deg, rgba(10,10,9,.8) 0%, rgba(10,10,9,.55) 26%, rgba(10,10,9,.62) 52%, rgba(10,10,9,.97) 100%), radial-gradient(90% 75% at 0% 100%, rgba(10,10,9,.9), transparent 70%)}
.hero-embers{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:.55}
.hero-in{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr); gap:48px; align-items:end; padding-block:150px 64px}
@media (max-width:1060px){ .hero-in{grid-template-columns:1fr} }
.hero h1 .ln{display:block; overflow:hidden; padding-bottom:.06em}
.hero h1 .ln > span{display:inline-block; animation:rise 1.3s var(--ease) both}
.hero h1 .ln:nth-child(2) > span{animation-delay:.12s} .hero h1 .ln:nth-child(3) > span{animation-delay:.24s}
@keyframes rise{from{transform:translateY(105%)} to{transform:none}}
.hero .sub{margin-top:30px; display:grid; gap:30px; animation:fade 1.4s .5s var(--ease) both}
@keyframes fade{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.hero .lede{color:var(--w1)}
.glass{background:rgba(18,18,17,.66); border:1px solid var(--ld2); border-radius:18px; backdrop-filter:blur(22px) saturate(120%); -webkit-backdrop-filter:blur(22px) saturate(120%)}
.report{padding:22px; display:grid; gap:18px; animation:fade 1.4s .8s var(--ease) both; max-width:440px; justify-self:end; width:100%}
@media (max-width:1060px){ .report{justify-self:start} }
.r-top{display:flex; justify-content:space-between; align-items:center; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--g1)}
.live{display:inline-flex; align-items:center; gap:8px}
.live i{width:7px; height:7px; border-radius:50%; background:var(--ember-hi); animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(226,88,43,.6)} 80%,100%{box-shadow:0 0 0 10px rgba(226,88,43,0)}}
.r-addr{font:300 1.45rem/1.1 var(--f-display); letter-spacing:-.04em}
.r-dial{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--ld)}
.r-dial div{padding:14px 0; display:grid; gap:4px}
.r-dial div + div{padding-left:14px; border-left:1px solid var(--ld)}
.r-dial span{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--g1)}
.r-dial b{font:300 2rem/1 var(--f-display); letter-spacing:-.05em}
.r-dial b.up{color:var(--ember-hi)}
.r-rows{display:grid; gap:10px; font-size:.84rem}
.r-row{display:grid; grid-template-columns:24px 1fr auto; gap:8px; align-items:center}
.r-row .n{font-family:var(--f-mono); font-size:.66rem; color:var(--g2)}
.r-row .bar{grid-column:2/4; height:2px; background:var(--ld); overflow:hidden; border-radius:2px}
.r-row .bar i{display:block; height:100%; background:var(--ember-hi); transform-origin:left; animation:grow 1.8s 1.2s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.r-row .st{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--g1)}
.hero-foot{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:18px; border-top:1px solid var(--ld); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--g1); flex-wrap:wrap}
.hero-foot .vid{all:unset; cursor:pointer}
.hero-foot .vid:focus-visible{outline:2px solid var(--ember-hi)}

/* page hero (subpages) */
.phero{position:relative; min-height:min(78vh, 760px); display:grid; align-items:end; overflow:hidden; isolation:isolate}
.phero.short{min-height:min(58vh, 560px)}
.phero .wrap{padding-block:150px clamp(48px,6vw,80px); display:grid; gap:26px; width:100%}
.phero h1{font-size:clamp(2.6rem, 6.4vw, 6.2rem); line-height:.9; letter-spacing:-.055em; max-width:15ch}
.phero .lede{color:var(--w1)}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--g1)}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--w0)}
.crumbs li + li::before{content:"/"; margin-right:8px; color:var(--g3)}
.phero-meta{display:flex; flex-wrap:wrap; gap:10px}
.pill{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; padding:7px 12px; border-radius:99px; background:rgba(10,10,9,.5); border:1px solid var(--ld2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.pill.e{color:var(--ember-hi); border-color:rgba(226,88,43,.5)}

/* marquee: subtle city names */
.marq{border-bottom:1px solid var(--ld); overflow:hidden; padding-block:16px; background:transparent; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.marq-track{display:flex; width:max-content; animation:marq 120s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.sign{flex:none; display:inline-flex; align-items:center; gap:28px; padding-right:28px; font:600 .74rem/1 "Overpass", "Arial Narrow", sans-serif; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--g2); white-space:nowrap; transition:color .3s}
.sign::after{content:""; width:4px; height:4px; border-radius:50%; background:var(--ember); opacity:.7}
.sign:hover{color:var(--w0)}
@keyframes marq{to{transform:translateX(-50%)}}

/* layout helpers */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:center}
.split.top{align-items:start}
.split.end{align-items:end}
@media (max-width:960px){ .split{grid-template-columns:1fr} }
.stack{display:grid; gap:28px; align-content:start}
.ph{position:relative; overflow:hidden; border-radius:4px; margin:0}
.ph img{width:100%; height:100%; object-fit:cover}
.ph-tall{aspect-ratio:4/5}
.ph-wide{aspect-ratio:16/10}
.ph .cap{position:absolute; left:18px; bottom:18px; right:18px; display:flex; justify-content:space-between; gap:10px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--w0); text-shadow:0 1px 10px rgba(0,0,0,.7)}
.ph::after{content:""; position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(0deg, rgba(10,10,9,.6), transparent); pointer-events:none}
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--ld2)}
.stats > div{padding:22px 16px 0 0; display:grid; gap:8px}
.stats > div + div{padding-left:18px; border-left:1px solid var(--ld)}
.stats b{font:200 clamp(2.4rem,4vw,3.6rem)/1 var(--f-display); letter-spacing:-.06em}
.stats b sup{font-size:.4em; color:var(--ember-hi); vertical-align:top; margin-left:2px}
.stats span{font-size:.84rem; color:var(--g1); line-height:1.4}
@media (max-width:560px){ .stats{grid-template-columns:1fr} .stats > div + div{padding-left:0; border-left:0; border-top:1px solid var(--ld); padding-top:18px} }

/* image cards */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1060px){ .cards.four{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:960px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .cards, .cards.two, .cards.four{grid-template-columns:1fr} }
.icard{position:relative; aspect-ratio:3/4; min-height:400px; overflow:hidden; border-radius:4px; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; text-decoration:none; color:var(--w0)}
.icard.land{aspect-ratio:4/3; min-height:320px}
.icard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.6s var(--ease)}
.icard::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,10,9,.3) 0%, rgba(10,10,9,.45) 38%, rgba(10,10,9,.88) 62%, rgba(10,10,9,.97) 100%)}
.icard:hover img{transform:scale(1.06)}
.icard .loc{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ember-hi)}
.icard h3{font-size:clamp(1.55rem,2.2vw,2.05rem); line-height:1.05; margin-top:12px}
.icard p{font-size:.92rem; color:var(--w1); margin-top:12px; max-width:42ch}
.icard .res{margin-top:18px; padding-top:14px; border-top:1px solid var(--ld2); display:flex; justify-content:space-between; gap:12px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--g1)}
.icard .res b{color:var(--w0); font-weight:400}
.icard .go{position:absolute; top:22px; right:22px; width:42px; height:42px; border-radius:50%; border:1px solid var(--ld2); display:grid; place-items:center; font-family:var(--f-mono); background:rgba(10,10,9,.35); transition:background .3s, transform .4s var(--ease)}
.icard:hover .go{background:var(--ember); border-color:var(--ember); transform:rotate(-45deg)}

/* text cards / tiles */
.tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:960px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .tiles{grid-template-columns:1fr} }
.tile{border:1px solid var(--ld); border-radius:16px; padding:26px; display:grid; gap:14px; align-content:start; background:linear-gradient(180deg, rgba(244,243,239,.03), transparent); text-decoration:none; transition:border-color .4s, transform .5s var(--ease)}
a.tile:hover{border-color:rgba(226,88,43,.55); transform:translateY(-4px)}
.tile .ico{width:46px; height:46px; border-radius:50%; border:1px solid var(--ld2); display:grid; place-items:center; color:var(--ember-hi)}
.tile .ico svg{width:20px; height:20px}
.tile h3{font-size:1.5rem; letter-spacing:-.04em}
.tile p{font-size:.92rem; color:var(--g1)}
.tile .n{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; color:var(--g2)}

/* threat band */
.band{min-height:86vh; display:grid; align-items:center; overflow:hidden; isolation:isolate}
.band canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}
.band-in{display:grid; gap:44px; padding-block:120px}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:980px; border-top:1px solid var(--ld2)}
.facts div{padding:22px 24px 0 0; display:grid; gap:10px}
.facts div + div{padding-left:24px; border-left:1px solid var(--ld)}
.facts b{font:200 2.6rem/1 var(--f-display); letter-spacing:-.06em}
.facts span{font-size:.88rem; color:var(--w1)}
@media (max-width:720px){ .facts{grid-template-columns:1fr} .facts div + div{padding-left:0; border-left:0; border-top:1px solid var(--ld); padding-top:18px} }

/* six layers scrollytelling */
.sys{background-color:var(--k1)}
.sys-live{transition:background-color 1.6s cubic-bezier(.4,0,.2,1)}
.sys-live .stage-box{background:radial-gradient(120% 90% at 70% 20%, rgba(255,255,255,.05) 0%, rgba(0,0,0,.35) 70%); transition:border-color 1.6s}
.sys-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,5vw,80px); align-items:start}
.stage{position:sticky; top:96px; display:grid; gap:16px}
.stage-box{border:1px solid var(--ld); border-radius:14px; background:radial-gradient(120% 90% at 70% 20%, #1d1c1a 0%, var(--k0) 70%); overflow:hidden; position:relative}
.stage-hud{position:absolute; left:18px; right:18px; top:16px; display:flex; justify-content:space-between; gap:12px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--g1); z-index:2; pointer-events:none}
.stage-hud b{color:var(--w0); font-weight:400}
.scene{width:100%; height:auto; display:block}
.lnav{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px}
.lnav button{all:unset; box-sizing:border-box; cursor:pointer; padding:10px 0 0; border-top:2px solid var(--ld2); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; color:var(--g2); text-transform:uppercase; transition:color .3s, border-color .3s}
.lnav button.on{border-color:var(--ember-hi); color:var(--w0)}
.lnav button:focus-visible{outline:2px solid var(--ember-hi)}
.lnav button span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.panel{min-height:88vh; display:grid; align-content:center; gap:22px; padding-block:48px; border-top:1px solid var(--ld)}
.panel:first-child{border-top:0}
.panel .pn{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--g1)}
.panel .pn b{color:var(--ember-hi); font-weight:400}
.panel h3{font-size:clamp(2.3rem,3.6vw,3.5rem); line-height:.95}
.panel > p{color:var(--w1); max-width:46ch; font-size:1.12rem; line-height:1.6}
.stops{display:flex; flex-wrap:wrap; gap:8px}
.stop{display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 9px; border:1px solid var(--ld2); border-radius:99px; font-size:.8rem; color:var(--w1)}
.stop svg{width:16px; height:16px; color:var(--ember-hi)}
.specs{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-top:1px solid var(--ld); margin:0}
.specs div{padding:12px 12px 12px 0; border-bottom:1px solid var(--ld); display:grid; gap:2px}
.specs div:nth-child(even){padding-left:14px; border-left:1px solid var(--ld)}
.specs dt{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--g2)}
.specs dd{margin:0; font-size:.92rem}
.ins{display:flex; gap:12px; align-items:flex-start; font-size:.86rem; color:var(--w1); padding:14px 16px; border-radius:10px; background:var(--ember-soft); border:1px solid rgba(226,88,43,.28)}
.ins svg{width:18px; height:18px; flex:none; color:var(--ember-hi); margin-top:2px}
@media (max-width:960px){
  .sys-grid{grid-template-columns:1fr}
  .stage{top:70px; z-index:5; background:var(--k1); padding-block:10px 8px}
  .stage-box, .scene{max-height:38vh}
  .lnav{display:none}
  .panel{min-height:auto; padding-block:56px}
}
.scene .hill1{fill:#151513} .scene .hill2{fill:#1b1b19} .scene .gnd{fill:#1f1f1c}
.scene .ln{fill:none; stroke:var(--w0); stroke-width:1.4; stroke-linejoin:round}
.scene .house-b{fill:#0e0e0d}
.scene .feat{transition:opacity .6s var(--ease)}
.scene .dim{opacity:.28}
.scene .lab{font:500 13px var(--f-mono); letter-spacing:.12em; fill:var(--g1)}
.scene .lab.blue{fill:var(--water)}
.scene .lab.hot{fill:var(--ember-hi)}
.scene .co{opacity:0; transition:opacity .6s var(--ease); pointer-events:none}
.scene[data-a="1"] .co1, .scene[data-a="2"] .co2, .scene[data-a="3"] .co3, .scene[data-a="4"] .co4, .scene[data-a="5"] .co5, .scene[data-a="6"] .co6{opacity:1}
.scene .spray{fill:none; stroke:var(--water); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:2 7; opacity:0; transition:opacity .6s}
.scene[data-a="1"] .spray{opacity:.85; animation:drip 1.4s linear infinite}
@keyframes drip{to{stroke-dashoffset:-18}}
.scene .mist{opacity:0; transition:opacity .8s}
.scene[data-a="1"] .mist{opacity:1}
.scene .drops circle{fill:var(--water); opacity:0}
.scene[data-a="1"] .drops circle{animation:drop 1.6s ease-in infinite}
.scene .drops circle:nth-child(2n){animation-delay:.5s} .scene .drops circle:nth-child(3n){animation-delay:1s}
@keyframes drop{0%{opacity:0; transform:translateY(-10px)} 30%{opacity:1} 100%{opacity:0; transform:translateY(26px)}}
.scene .pipe{fill:none; stroke:var(--water); stroke-width:3; stroke-dasharray:6 6; opacity:.35}
.scene[data-a="1"] .pipe{opacity:1; animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}
.scene .tankw{transform-box:fill-box; transform-origin:bottom}
.scene[data-a="1"] .tankw{animation:tank 6s ease-in-out infinite alternate}
@keyframes tank{from{transform:scaleY(1)} to{transform:scaleY(.82)}}
.scene .pulse.blue{stroke:var(--water)}
.scene .glow{filter:drop-shadow(0 0 6px rgba(226,88,43,.8))}
.scene .char circle{opacity:0; animation:charin 3.2s ease-in-out infinite alternate}
@keyframes charin{0%,40%{opacity:0} 100%{opacity:1}}
.scene .fizz{fill:var(--ember-hi); animation:fizz 2.6s ease-in infinite; animation-delay:var(--d,0s)}
@keyframes fizz{0%{transform:translate(-30px,-40px); opacity:0; fill:#E2582B} 40%{transform:none; opacity:1; fill:#E2582B} 70%{fill:#76746E; opacity:.8} 100%{fill:#56554F; opacity:0}}
.scene .blink{animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.scene .truck{animation:drive 7s linear infinite}
@keyframes drive{from{transform:translate(-80px,540px)} to{transform:translate(940px,540px)}}
.scene .pulse{fill:none; stroke:var(--ember-hi); transform-box:fill-box; transform-origin:center; animation:pulse 2.4s var(--ease) infinite}
.scene .pulse.b{animation-delay:1.2s}
@keyframes pulse{from{transform:scale(.3); opacity:.9} to{transform:scale(3.2); opacity:0}}
.scene .emb{fill:var(--ember-hi); animation:emb var(--t,7s) linear infinite; animation-delay:var(--d,0s)}
@keyframes emb{0%{transform:translate(0,0); opacity:0} 8%{opacity:1} 85%{opacity:1} 100%{transform:translate(var(--x,420px), var(--y,-40px)); opacity:0}}
.scene .swell{transform-box:fill-box; transform-origin:left center; animation:swell 3.2s var(--ease) infinite alternate}
@keyframes swell{from{transform:scaleX(1)} to{transform:scaleX(4.2)}}
.scene .bounce{animation:bounce 2.2s ease-in infinite; animation-delay:var(--d,0s)}
@keyframes bounce{0%{transform:translate(-46px,-18px); opacity:0} 15%{opacity:1} 55%{transform:translate(0,0); opacity:1} 100%{transform:translate(-26px,30px); opacity:0}}
.scene .wave{fill:none; stroke:var(--ember-hi); stroke-width:1.4; animation:wave 2.2s linear infinite; animation-delay:var(--d,0s)}
@keyframes wave{0%{transform:translateX(30px); opacity:0} 30%{opacity:.9} 100%{transform:translateX(-18px); opacity:0}}
.scene .shimmer{animation:shim 2.6s ease-in-out infinite alternate}
@keyframes shim{from{opacity:.25} to{opacity:.7}}
.scene .sweep{transform-box:view-box; transform-origin:836px 96px; animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* tools */
.tools{overflow:hidden; isolation:isolate}
.tools .media{opacity:.25}
.tools .scrim{background:linear-gradient(180deg, var(--k0) 0%, rgba(10,10,9,.85) 30%, rgba(10,10,9,.92) 75%, var(--k0) 100%)}
.tabs{display:inline-flex; gap:4px; padding:5px; border:1px solid var(--ld2); border-radius:999px; margin-block:40px 22px; max-width:100%}
.tabs button{all:unset; cursor:pointer; padding:12px 22px; border-radius:999px; font-weight:500; font-size:.92rem; color:var(--g1); transition:background .3s, color .3s}
.tabs button[aria-selected="true"]{background:var(--w0); color:var(--k0)}
.tabs button:focus-visible{outline:2px solid var(--ember-hi)}
.tool{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-radius:18px; overflow:hidden}
@media (max-width:960px){ .tool{grid-template-columns:1fr} }
.t-in{padding:clamp(24px,3vw,40px); display:grid; gap:24px; align-content:start; border-right:1px solid var(--ld)}
@media (max-width:960px){ .t-in{border-right:0; border-bottom:1px solid var(--ld)} }
.t-out{padding:clamp(24px,3vw,40px); display:grid; gap:22px; align-content:start; background:rgba(244,243,239,.035)}
.field{display:grid; gap:8px; align-content:start}
.field label, .field .lab{font-size:.84rem; font-weight:500; color:var(--w1)}
.hint{font-size:.78rem; color:var(--g2)}
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea{width:100%; font:inherit; font-weight:400; font-size:1rem; padding:14px 16px; border:1px solid var(--ld2); border-radius:10px; background:rgba(10,10,9,.6); color:var(--w0)}
select option{background:var(--k1); color:var(--w0)}
input[type=text], input[type=email], input[type=tel], input[type=number], select{height:54px; min-height:54px; line-height:1.2}
select{appearance:none; -webkit-appearance:none; padding-right:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A9A79F' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 18px center}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--ember-hi); box-shadow:0 0 0 3px var(--ember-soft)}
.row2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px}
@media (max-width:480px){ .row2{grid-template-columns:1fr} }
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; inset:0; cursor:pointer}
.chip span{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid var(--ld2); border-radius:99px; font-size:.86rem; cursor:pointer; transition:background .25s, color .25s, border-color .25s}
.chip span::before{content:""; width:7px; height:7px; border-radius:50%; border:1px solid var(--g1)}
.chip input:checked + span{background:var(--w0); color:var(--k0); border-color:var(--w0)}
.chip input:checked + span::before{background:var(--ember); border-color:var(--ember)}
.chip input:focus-visible + span{outline:2px solid var(--ember-hi); outline-offset:2px}
input[type=range]{width:100%; accent-color:var(--ember-hi)}
.rv-val{font-family:var(--f-mono); color:var(--ember-hi)}
.region{font-family:var(--f-mono); font-size:.72rem; color:var(--g1)}
.okey{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--g1)}
.big{font:200 clamp(2.6rem,5vw,4rem)/1 var(--f-display); letter-spacing:-.06em}
.meter{height:6px; border-radius:6px; background:var(--ld); position:relative; overflow:hidden}
.meter i{position:absolute; inset:0 auto 0 0; border-radius:6px; transition:width .7s var(--ease)}
.meter i.a{background:var(--ember)} .meter i.b{background:var(--w0); z-index:1}
.legend{display:flex; gap:16px; font-size:.76rem; color:var(--g1); flex-wrap:wrap}
.legend span::before{content:""; display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; background:var(--w0); vertical-align:-1px}
.legend span.a::before{background:var(--ember)}
.pkg{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px}
@media (max-width:480px){ .pkg{grid-template-columns:1fr} }
.pkg > div{border:1px solid var(--ld); border-radius:12px; padding:18px; display:grid; gap:8px; background:rgba(10,10,9,.4)}
.pkg h4{font:500 .95rem var(--f-body); letter-spacing:0}
.pkg .big{font-size:2rem}
.fine{font-size:.76rem; color:var(--g2); line-height:1.5}
.steps{display:flex; gap:6px}
.steps i{flex:1; height:2px; background:var(--ld2); transition:background .4s}
.steps i.done{background:var(--w0)} .steps i.cur{background:var(--ember-hi)}
.lines{display:grid; border-top:1px solid var(--ld2)}
.lines > div{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:12px 0; border-bottom:1px solid var(--ld); font-size:.92rem}
.lines .amt{font-family:var(--f-mono); white-space:nowrap}
.t-nav{display:flex; justify-content:space-between; gap:10px}
.confirm{border:1px solid rgba(226,88,43,.4); background:var(--ember-soft); border-radius:12px; padding:16px; font-size:.9rem}

/* team */
.team{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
@media (max-width:1060px){ .team{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .team{grid-template-columns:1fr} }
.person{border:1px solid var(--ld); border-radius:16px; padding:26px; display:grid; gap:16px; align-content:start; background:linear-gradient(180deg, rgba(244,243,239,.03), transparent); transition:border-color .4s, transform .5s var(--ease)}
.person:hover{border-color:rgba(226,88,43,.5); transform:translateY(-4px)}
.badge{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--ember); color:var(--w0); font:300 1.35rem var(--f-display); letter-spacing:-.04em; position:relative}
.badge::after{content:""; position:absolute; inset:5px; border-radius:50%; border:1px dashed var(--ld2)}
.person h3{font-size:1.65rem}
.person .role{font-size:.86rem; color:var(--ember-hi); margin-top:6px}
.person p{font-size:.9rem; color:var(--g1)}
.ledger{display:grid; gap:8px; border-top:1px solid var(--ld); padding-top:14px; font-family:var(--f-mono); font-size:.72rem; color:var(--g1)}
.ledger div{display:flex; gap:10px; align-items:baseline}
.ledger b{font:300 1.3rem/1 var(--f-display); letter-spacing:-.04em; color:var(--w0); min-width:3.2em}

/* quotes */
.quote{min-height:clamp(260px, 30vw, 360px); position:relative}
.quote blockquote{margin:0; position:absolute; inset:0; opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease); pointer-events:none}
.quote blockquote.on{opacity:1; transform:none; pointer-events:auto}
.quote p{font:200 clamp(1.8rem,3.6vw,3.4rem)/1.12 var(--f-display); letter-spacing:-.045em; max-width:24ch}
.quote p::before{content:"\201C"; color:var(--ember-hi)} .quote p::after{content:"\201D"; color:var(--ember-hi)}
.quote footer{margin-top:28px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--g1)}
.qnav{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.qnav button{all:unset; cursor:pointer; width:120px; display:grid; gap:10px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--g2)}
.qnav button i{height:2px; background:var(--ld2); position:relative; overflow:hidden}
.qnav button i::after{content:""; position:absolute; inset:0; background:var(--ember-hi); transform:scaleX(0); transform-origin:left}
.qnav button.on{color:var(--w0)}
.qnav button.on i::after{animation:prog 7s linear forwards}
@keyframes prog{to{transform:scaleX(1)}}

/* areas */
.area{position:relative; min-height:640px; border-radius:6px; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(24px,3vw,40px); gap:18px}
.area > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 2s var(--ease)}
.area:hover > img{transform:scale(1.05)}
.area::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,10,9,.35) 0%, rgba(10,10,9,.4) 40%, rgba(10,10,9,.96) 100%)}
.area .pill{position:absolute; top:24px; left:clamp(24px,3vw,40px)}
.area h3{font-size:clamp(2.2rem,3.6vw,3.4rem)}
.area p{color:var(--w1); max-width:46ch; font-size:.96rem}
.towns{display:flex; flex-wrap:wrap; gap:6px}
.towns a{text-decoration:none; font-size:.84rem; padding:7px 12px; border:1px solid var(--ld2); border-radius:99px; background:rgba(10,10,9,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .3s, color .3s}
.towns a:hover{background:var(--w0); color:var(--k0)}

/* light sections */
.light{background:var(--w0); color:var(--k0)}
.light .idx{color:var(--g3)}
.light .lede{color:#55544e}
.light .tile{border-color:var(--ll); background:#fff}
.light .tile p{color:#55544e}
.light .tile .ico{border-color:var(--ll2); color:var(--ember)}
.light .e{color:var(--ember)}
.faq{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,96px)}
@media (max-width:960px){ .faq{grid-template-columns:1fr} }
.acc details{border-bottom:1px solid var(--ll)}
.acc details:first-of-type{border-top:1px solid var(--ll)}
.acc summary{list-style:none; cursor:pointer; padding:24px 0; display:grid; grid-template-columns:minmax(0,1fr) 36px; gap:16px; align-items:center; font:400 clamp(1.15rem,1.8vw,1.45rem)/1.25 var(--f-display); letter-spacing:-.03em}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{width:36px; height:36px; border-radius:50%; border:1px solid var(--ll2); position:relative; transition:background .3s, border-color .3s, transform .4s var(--ease)}
.acc summary i::before, .acc summary i::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1px; background:currentColor; transform:translate(-50%,-50%)}
.acc summary i::after{transform:translate(-50%,-50%) rotate(90deg); transition:transform .4s var(--ease)}
.acc details[open] summary i{background:var(--ember); border-color:var(--ember); color:#fff; transform:rotate(180deg)}
.acc details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.acc details p{padding:0 56px 26px 0; color:#4d4c47; max-width:64ch}
.dark .acc details, .dark .acc details:first-of-type{border-color:var(--ld)}
.dark .acc details p{color:var(--g1)}
.dark .acc summary i{border-color:var(--ld2)}

/* prose (articles, long landing copy) */
.prose{font-size:1.08rem; line-height:1.75; color:var(--w1)}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:clamp(1.8rem,2.8vw,2.5rem); line-height:1.02; color:var(--w0); margin-top:2.1em; letter-spacing:-.045em}
.prose h3{font-size:1.4rem; line-height:1.2; color:var(--w0); margin-top:1.8em; letter-spacing:-.03em; font-weight:400}
.prose a{color:var(--w0); text-decoration-color:var(--ember-hi); text-underline-offset:3px}
.prose a:hover{color:var(--ember-hi)}
.prose strong{font-weight:500; color:var(--w0)}
.prose ul, .prose ol{padding-left:1.2em}
.prose li + li{margin-top:.5em}
.prose li::marker{color:var(--ember-hi)}
.prose blockquote{margin:1.6em 0; padding:4px 0 4px 22px; border-left:2px solid var(--ember); font:300 1.5rem/1.35 var(--f-display); letter-spacing:-.03em; color:var(--w0)}
.prose .callout{border:1px solid rgba(226,88,43,.35); background:var(--ember-soft); border-radius:12px; padding:18px 20px; font-size:.98rem}
.prose figure{margin:2em 0}
.prose figure img{border-radius:4px; width:100%}
.prose figcaption{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; color:var(--g2); margin-top:10px}
.prose table{width:100%; border-collapse:collapse; font-size:.95rem}
.prose th, .prose td{text-align:left; padding:12px 10px; border-bottom:1px solid var(--ld)}
.prose th{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--g1); font-weight:400}
.tablewrap{overflow-x:auto}
.article-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(40px,6vw,96px); align-items:start}
@media (max-width:1000px){ .article-grid{grid-template-columns:1fr} }
.aside{position:sticky; top:100px; display:grid; gap:18px}
@media (max-width:1000px){ .aside{position:static} }
.aside .box{border:1px solid var(--ld); border-radius:16px; padding:22px; display:grid; gap:14px}
.aside h4{font:500 .68rem var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--g2)}
.toc{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.9rem}
.toc a{text-decoration:none; color:var(--g1)} .toc a:hover{color:var(--w0)}
.ameta{display:flex; flex-wrap:wrap; gap:8px 22px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--g1)}
.byline{display:flex; gap:14px; align-items:center}
.byline .badge{width:48px; height:48px; font-size:1rem}

/* blog grid */
.posts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 22px}
@media (max-width:960px){ .posts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .posts{grid-template-columns:1fr} }
.post{display:grid; gap:16px; text-decoration:none; align-content:start}
.post .ph{aspect-ratio:4/3}
.post .ph img{transition:transform 1.4s var(--ease)}
.post:hover .ph img{transform:scale(1.05)}
.post .cat{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ember-hi)}
.post h3{font-size:1.55rem; line-height:1.12; letter-spacing:-.04em}
.post p{font-size:.92rem; color:var(--g1)}
.post .pm{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--g2)}
.feature{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center; text-decoration:none}
@media (max-width:900px){ .feature{grid-template-columns:1fr} }
.feature .ph{aspect-ratio:16/10}
.feature h2{font-size:clamp(2rem,3.6vw,3.4rem); line-height:1.02}
.filters{display:flex; flex-wrap:wrap; gap:8px}
.filters button{all:unset; cursor:pointer; padding:9px 14px; border:1px solid var(--ld2); border-radius:99px; font-size:.86rem; color:var(--g1); transition:background .25s, color .25s}
.filters button[aria-pressed="true"]{background:var(--w0); color:var(--k0); border-color:var(--w0)}
.filters button:focus-visible{outline:2px solid var(--ember-hi)}

/* location directory */
.dir{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--ld2)}
@media (max-width:960px){ .dir{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .dir{grid-template-columns:1fr} }
.dir a{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 6px; border-bottom:1px solid var(--ld); text-decoration:none; font-size:1.05rem; transition:color .3s, padding .3s var(--ease)}
.dir a span{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; color:var(--g2); text-transform:uppercase}
.dir a:hover{color:var(--ember-hi); padding-left:12px}
.kv{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--ld2)}
.kv div{padding:20px 18px 20px 0; display:grid; gap:6px}
.kv div + div{padding-left:18px; border-left:1px solid var(--ld)}
.kv dt{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--g2)}
.kv dd{margin:0; font:300 1.35rem/1.15 var(--f-display); letter-spacing:-.035em}
@media (max-width:860px){ .kv{grid-template-columns:repeat(2,minmax(0,1fr))} .kv div:nth-child(3){padding-left:0; border-left:0} .kv div:nth-child(n+3){border-top:1px solid var(--ld)} }

/* process steps */
.process{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--ld2); counter-reset:s}
@media (max-width:960px){ .process{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .process{grid-template-columns:1fr} }
.process > div{padding:26px 22px 0 0; display:grid; gap:12px; align-content:start}
.process > div + div{padding-left:22px; border-left:1px solid var(--ld)}
@media (max-width:560px){ .process > div + div{padding-left:0; border-left:0; border-top:1px solid var(--ld); padding-top:22px} }
.process .n{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; color:var(--ember-hi)}
.process h3{font-size:1.5rem}
.process p{font-size:.92rem; color:var(--g1)}
.light .process{border-color:var(--ll2)} .light .process > div + div{border-color:var(--ll)} .light .process p{color:#55544e}

/* cta band */
.cta{min-height:76vh; display:grid; align-items:center; overflow:hidden; isolation:isolate}
.cta .wrap{display:grid; gap:32px; padding-block:120px}

/* footer */
footer.site{padding-block:80px 32px; border-top:1px solid var(--ld)}
.f-grid{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr)); gap:40px}
@media (max-width:1000px){ .f-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .f-grid{grid-template-columns:1fr} }
.f-grid h4{font:500 .68rem var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--g2); margin-bottom:16px}
.f-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.9rem}
.f-grid a{text-decoration:none; color:var(--w1)} .f-grid a:hover{color:var(--ember-hi)}
.f-towns{margin-top:56px; padding-top:28px; border-top:1px solid var(--ld); display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.84rem}
.f-towns h4{width:100%; font:500 .68rem var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--g2); margin-bottom:8px}
.f-towns a{text-decoration:none; color:var(--g1)} .f-towns a:hover{color:var(--w0)}
.mega{font:200 clamp(5rem, 21vw, 22rem)/.8 var(--f-display); letter-spacing:-.075em; margin-top:64px; color:var(--k2); -webkit-text-stroke:1px var(--k3); user-select:none; white-space:nowrap; overflow:hidden}
.legal{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--ld); padding-top:22px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; color:var(--g2)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .js .rv, .js .rimg{opacity:1; transform:none; clip-path:none}
  .js .rimg img{transform:none}
}

/* hero ZIP lookup */
.zipform{display:flex; gap:8px; padding:6px; border-radius:999px; background:rgba(10,10,9,.55); border:1px solid var(--ld2); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); max-width:520px}
.zipform input{flex:1; min-width:0; border:0; background:transparent; padding:12px 18px; font-size:1rem; box-shadow:none}
.zipform input:focus{box-shadow:none}
.zipform:focus-within{border-color:var(--ember-hi)}
.zipform .btn{white-space:nowrap}
@media (max-width:480px){ .zipform{flex-direction:column; border-radius:18px} .zipform .btn{justify-content:center} }

/* testimonials grid */
.qgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:960px){ .qgrid{grid-template-columns:1fr} }
.qcard{border:1px solid var(--ld); border-radius:16px; padding:30px; display:grid; gap:26px; align-content:space-between; background:linear-gradient(180deg, rgba(244,243,239,.035), transparent)}
.qcard.big{grid-column:span 2; background:var(--k1)}
@media (max-width:960px){ .qcard.big{grid-column:auto} }
.qcard p{font:300 1.35rem/1.35 var(--f-display); letter-spacing:-.03em; color:var(--w0)}
.qcard.big p{font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1.15}
.qcard p::before{content:"\201C"; color:var(--ember-hi)} .qcard p::after{content:"\201D"; color:var(--ember-hi)}
.qcard footer{display:flex; align-items:center; gap:12px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--g1)}
.qcard footer b{display:block; color:var(--w0); font-weight:500}
.qcard .badge{width:40px; height:40px; font-size:.9rem}

/* how it works animated icons */
.pi{width:64px; height:64px; border-radius:18px; display:grid; place-items:center; background:#fff; border:1px solid var(--ll); color:var(--k0)}
.dark-steps .pi{background:var(--k2); border-color:var(--ld); color:var(--w0)}
.pi svg{width:36px; height:36px; overflow:visible}
.pi .s{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.pi .a{fill:none; stroke:var(--ember); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pi .draw{stroke-dasharray:40; stroke-dashoffset:40; animation:pdraw 3.2s ease-in-out infinite}
@keyframes pdraw{0%{stroke-dashoffset:40} 45%,80%{stroke-dashoffset:0} 100%{stroke-dashoffset:-40}}
.pi .scan{animation:pscan 2.6s ease-in-out infinite alternate}
@keyframes pscan{from{transform:translate(-5px,-4px)} to{transform:translate(5px,4px)}}
.pi .tap{transform-box:fill-box; transform-origin:80% 80%; animation:ptap 1.4s ease-in-out infinite}
@keyframes ptap{0%,100%{transform:rotate(0)} 40%{transform:rotate(-22deg)} 55%{transform:rotate(4deg)}}
.pi .stamp{transform-box:fill-box; transform-origin:center; animation:pstamp 3s ease-in-out infinite}
@keyframes pstamp{0%,30%{transform:scale(0); opacity:0} 45%{transform:scale(1.25); opacity:1} 55%,90%{transform:scale(1); opacity:1} 100%{opacity:0}}
.process .pi{margin-bottom:6px}

/* plan output (no prices) */
.plan{display:grid; gap:0; border-top:1px solid var(--ld2)}
.plan > div{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--ld); font-size:.95rem}
.imp{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; padding:5px 9px; border-radius:99px; border:1px solid var(--ld2); color:var(--g1); white-space:nowrap}
.imp.hi{color:var(--ember-hi); border-color:rgba(226,88,43,.5)}
.outgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px}
.outgrid > div{border:1px solid var(--ld); border-radius:12px; padding:18px; display:grid; gap:6px; background:rgba(10,10,9,.4)}
.outgrid .big{font-size:clamp(1.9rem,3vw,2.5rem)}
@media (max-width:480px){ .outgrid{grid-template-columns:1fr} }

/* sticky six-layer heading + focus fade */
.stage-head{display:grid; gap:14px; padding-bottom:6px}
.h-sys{font-size:clamp(2rem,3.3vw,3.4rem); line-height:.92; letter-spacing:-.05em}
.stage .scene{max-height:calc(100vh - 360px); margin-inline:auto}
.sys-mhead{display:none; gap:20px; margin-bottom:32px}
.sys-intro{padding-block:8px 24px}
.panel > *{transition:opacity .7s cubic-bezier(.4,0,.2,1)}
@media (min-width:961px){ .sys-live .panel:not(.on) > :not(figure){opacity:.4} .sys-live .panel:not(.on) > figure{opacity:.85} }
@media (max-width:960px){ .stage-head{display:none} .sys-mhead{display:grid} .stage .scene{max-height:38vh} }

/* lead options */
.leads{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.875fr) minmax(0,.875fr); gap:18px; align-items:stretch}
@media (max-width:1060px){ .leads{grid-template-columns:1fr 1fr} .lead-main{grid-column:1/-1} }
@media (max-width:620px){ .leads{grid-template-columns:1fr} }
.lead{border:1px solid var(--ld); border-radius:18px; padding:clamp(24px,2.6vw,34px); display:grid; gap:18px; align-content:start; background:linear-gradient(180deg, rgba(244,243,239,.035), transparent)}
.lead > div:last-child, .lead > div:has(.btn){margin-top:auto}
.lead h3{font-size:clamp(1.5rem,2vw,1.9rem); line-height:1.02}
.lead-main{border-color:rgba(226,88,43,.45)}
.lead-phone{font:200 clamp(2.2rem,3.4vw,3rem)/1 var(--f-display); letter-spacing:-.05em; color:var(--w0)}
.light .lead{border-color:var(--ll); background:#fff; color:var(--k0)}
.light .lead .fine{color:#66655f}
.light .lead-phone{color:var(--k0)}
.light .lead-main{background:var(--k0); color:var(--w0); border-color:var(--k0)}
.light .lead .btn-w{background:var(--k0); color:var(--w0)}
.light .lead .btn-o{color:var(--k0); border-color:var(--ll2); background:transparent}
.light .lead .okey{color:#66655f}
.light .lead-main .okey{color:var(--g1)}
section[id]{scroll-margin-top:72px}

/* live fire map */
.fmap{position:relative; height:max(700px, 100svh); background:#060606; overflow:hidden}
#map{position:absolute; inset:0}
.fm-panel, .fm-side, .fm-layers{position:absolute; z-index:3}
.fm-panel{left:max(24px, env(safe-area-inset-left,0px)); top:104px; width:min(410px, calc(100% - 48px)); padding:24px; display:grid; gap:16px; max-height:calc(100% - 128px); overflow:auto}
.fm-panel h1{font-size:clamp(2rem,3vw,2.8rem); line-height:.92; letter-spacing:-.05em}
.fm-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--ld)}
.fm-stats div{padding:12px 0; display:grid; gap:2px}
.fm-stats div + div{padding-left:12px; border-left:1px solid var(--ld)}
.fm-stats b{font:300 1.8rem/1 var(--f-display); letter-spacing:-.05em}
.fm-stats b.e{color:var(--ember-hi)}
.fm-stats span{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--g1); line-height:1.3}
.fm-form{display:flex; gap:8px}
.fm-form input{flex:1; min-width:0}
.fm-form .btn{padding:0 18px; white-space:nowrap}
.fm-result{display:grid; gap:12px; border-top:1px solid var(--ld); padding-top:14px}
.fmr{display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0; border-top:1px solid var(--ld)}
.fmr div{padding:10px 8px 10px 0; border-bottom:1px solid var(--ld); display:grid; gap:2px}
.fmr div:nth-child(even){padding-left:10px; border-left:1px solid var(--ld)}
.fmr dt{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--g2)}
.fmr dd{margin:0; font-size:.88rem}
.lvl{justify-self:start; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; border-radius:99px; border:1px solid var(--ld2)}
.lvl.hi{color:#fff; background:var(--ember); border-color:var(--ember)} .lvl.md{color:#E5A13A; border-color:rgba(229,161,58,.6)} .lvl.lo{color:#7fd1a7; border-color:rgba(127,209,167,.5)}
.fm-side{right:max(24px, env(safe-area-inset-right,0px)); top:104px; width:320px; max-height:calc(100% - 230px); display:grid; grid-template-rows:auto 1fr; overflow:hidden}
.fm-side header{padding:18px 20px 12px; border-bottom:1px solid var(--ld); display:grid; gap:4px}
.fm-side h2{font-size:1.25rem; letter-spacing:-.03em}
.fm-side ol{list-style:none; margin:0; padding:6px 8px 10px; overflow:auto}
.fm-side li button{all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 12px; border-radius:10px; position:relative}
.fm-side li button:hover, .fm-side li button:focus-visible{background:rgba(244,243,239,.06)}
.fm-side .fn{font-weight:500; font-size:.92rem}
.fm-side .fa{font-family:var(--f-mono); font-size:.76rem; color:var(--ember-hi); text-align:right}
.fm-side .fm{font-size:.74rem; color:var(--g2)}
.fm-side .fc{font-family:var(--f-mono); font-size:.62rem; color:var(--g1); text-align:right}
.fm-side li button i{grid-column:1/-1; height:2px; background:var(--ld); border-radius:2px; margin-top:6px; position:relative; overflow:hidden}
.fm-side li button i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--c); background:var(--g1)}
.fm-side .empty{padding:16px 12px; color:var(--g1); font-size:.9rem}
.fm-layers{left:max(24px, env(safe-area-inset-left,0px)); bottom:24px; padding:12px 14px; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; max-width:calc(100% - 48px)}
.fm-layers label{display:inline-flex; align-items:center; gap:8px; font-size:.8rem; cursor:pointer}
.fm-layers input{accent-color:var(--ember-hi)}
.sw{width:12px; height:12px; border-radius:50%; display:inline-block}
.sw.fire{background:#FF5A1F; box-shadow:0 0 0 3px rgba(255,90,31,.25)} .sw.per{background:rgba(201,67,28,.6); border:1px solid #FF7A45; border-radius:2px} .sw.red{background:rgba(226,88,43,.25); border:1px dashed #E2582B; border-radius:2px} .sw.town{background:rgba(143,211,255,.28); box-shadow:inset 0 0 0 1px rgba(168,222,255,.8); width:14px; height:14px}
#fmNotice{position:absolute; z-index:4; left:50%; bottom:84px; transform:translateX(-50%); background:rgba(10,10,9,.9); border:1px solid var(--ld2); padding:10px 16px; border-radius:99px; font-size:.84rem; max-width:calc(100% - 48px); text-align:center}
.fm-home{width:22px; height:22px; border-radius:50%; background:#F4F3EF; border:4px solid var(--ember); box-shadow:0 0 0 8px rgba(226,88,43,.25)}
.maplibregl-popup.fm-pop .maplibregl-popup-content{background:#121211; color:var(--w0); border:1px solid var(--ld2); border-radius:12px; padding:16px 18px; font-family:var(--f-body); min-width:220px; box-shadow:0 20px 40px -10px rgba(0,0,0,.6)}
.maplibregl-popup.fm-pop .maplibregl-popup-tip{border-top-color:#121211; border-bottom-color:#121211}
.maplibregl-popup.fm-pop .maplibregl-popup-close-button{color:var(--g1); font-size:18px; padding:4px 8px}
.fm-pop .pk{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ember-hi); margin:0 0 4px}
.fm-pop h4{font:400 1.25rem/1.1 var(--f-display); letter-spacing:-.03em; margin:0 0 10px}
.fm-pop dl{display:grid; gap:4px; margin:0 0 10px}
.fm-pop dl div{display:flex; justify-content:space-between; gap:16px; font-size:.82rem}
.fm-pop dt{color:var(--g1)} .fm-pop dd{margin:0}
.fm-pop .pl{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--w0)}
.maplibregl-ctrl-attrib{background:rgba(10,10,9,.6)!important; color:var(--g1)} .maplibregl-ctrl-attrib a{color:var(--g1)!important}
@media (max-width:960px){
  .fmap{height:auto; display:flex; flex-direction:column; overflow:visible; background:var(--k0)}
  #map{position:relative; height:62svh; min-height:420px; order:2}
  .fm-panel{position:relative; top:auto; left:auto; width:auto; max-height:none; margin:96px max(16px, env(safe-area-inset-left,0px)) 16px; order:1}
  .fm-layers{position:relative; left:auto; bottom:auto; margin:12px 16px 0; order:3}
  .fm-side{position:relative; right:auto; top:auto; width:auto; max-height:420px; margin:16px; order:4}
  #fmNotice{bottom:auto; top:110px}
}

/* live map banner */
.livebar{position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; min-height:168px; margin-block:clamp(28px,4vw,44px); padding:28px clamp(24px,3vw,40px); border:1px solid var(--ld); border-radius:18px; text-decoration:none; color:var(--w0); background:#0b0b0a; transition:border-color .4s}
.livebar:hover{border-color:rgba(226,88,43,.5)}
.lb-map{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 50%; z-index:-2; opacity:.55; transition:transform 2s var(--ease), opacity .6s}
.livebar:hover .lb-map{transform:scale(1.04); opacity:.7}
.lb-shade{position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(10,10,9,.92) 0%, rgba(10,10,9,.6) 50%, rgba(10,10,9,.82) 100%)}
.lb-left{display:grid; gap:8px}
.lb-left .live{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ember-hi)}
.lb-big{font:300 clamp(1.5rem,2.4vw,2.1rem)/1.1 var(--f-display); letter-spacing:-.035em}
.lb-big b{font-weight:400; color:var(--ember-hi)}
.lb-sub{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--g1)}
.lb-sub b{color:var(--w0); font-weight:500}
.lb-btn{pointer-events:none}
.livebar:hover .lb-btn .ar{transform:translateX(4px)}
.menu .live-link > a{display:inline-flex; align-items:center; gap:8px}
.menu .live-link i, .mmenu .live-link i{width:7px; height:7px; border-radius:50%; background:var(--ember-hi); animation:ping 2s infinite; display:inline-block}
body:has(.fmap) .nav{background:rgba(10,10,9,.94); border-color:var(--ld); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)}
@media (min-width:961px){ .fm-panel{max-height:calc(100% - 196px)} }
/* compact six-layer panels: one laptop fold each */
@media (min-width:961px){
  .panel{min-height:calc(100svh - 72px); gap:16px; padding-block:24px; align-content:center}
  .panel h3{font-size:clamp(2rem,2.9vw,2.8rem)}
  .panel > p{font-size:1.06rem; max-width:40ch}
  .panel .ph{aspect-ratio:16/9; max-height:min(34vh,330px); width:100%}
  .panel .specs div{padding-block:9px}
  .panel .btn{padding:13px 20px; font-size:.9rem}
}

/* credentials strip */
.trust{padding-block:clamp(28px,4vw,48px) 0}
.trust-grid{display:grid; grid-template-columns:minmax(0,1.7fr) repeat(4,minmax(0,1fr)); border:1px solid var(--ld)}
.trust-copy{padding:clamp(22px,2.6vw,36px); display:grid; gap:16px; align-content:center}
.trust-copy p{color:var(--g1); font-size:1rem; line-height:1.6; max-width:52ch}
.tpill{justify-self:start; font-size:.84rem; font-weight:500; padding:8px 14px; border-radius:8px; border:1px solid var(--ld2); background:linear-gradient(90deg, rgba(226,88,43,.18), transparent 40%), var(--k1); position:relative}
.tcell{border-left:1px solid var(--ld); padding:26px 14px; display:grid; justify-items:center; align-content:center; gap:10px; text-align:center}
.tcell svg{width:46px; height:46px; fill:none; stroke:var(--g2); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .4s}
.tcell:hover svg{stroke:var(--ember-hi)}
.tcell b{font:600 .72rem/1.3 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--w1)}
.tcell span{font-size:.74rem; color:var(--g2); line-height:1.35; max-width:18ch}
@media (max-width:1060px){ .trust-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .trust-copy{grid-column:1/-1; border-bottom:1px solid var(--ld)} .tcell:nth-child(2){border-left:0} }
@media (max-width:620px){ .trust-grid{grid-template-columns:1fr 1fr} .tcell{border-top:1px solid var(--ld)} .tcell:nth-child(2n){border-left:0} .tcell:nth-child(2n+1){border-left:1px solid var(--ld)} }

/* team photos */
.person{padding:0; overflow:hidden; gap:0}
.pphoto{margin:0; position:relative; aspect-ratio:4/5; overflow:hidden; background:#d8d7d2}
.pphoto img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:transform 1.2s var(--ease), filter .6s}
.person:hover .pphoto img{transform:scale(1.04); filter:grayscale(.2) contrast(1.05)}
.pphoto::after{content:""; position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(0deg, rgba(10,10,9,.85), transparent)}
.pbadge{position:absolute; left:16px; bottom:14px; z-index:1; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; color:var(--w0); padding:5px 9px; border:1px solid rgba(244,243,239,.4); border-radius:99px; background:rgba(10,10,9,.4)}
.pbody{padding:22px 24px 26px; display:grid; gap:14px}

/* testimonial carousel */
.qsec{overflow:hidden}
.qctrl{display:grid; gap:18px; justify-items:start}
.qbtns{display:flex; gap:10px}
.qarrow{width:48px; height:48px; border-radius:50%; border:1px solid var(--ld2); background:transparent; color:var(--w0); font-family:var(--f-mono); font-size:1rem; cursor:pointer; transition:background .3s, border-color .3s}
.qarrow:hover{background:var(--w0); color:var(--k0); border-color:var(--w0)}
.qtrack{margin-top:clamp(36px,4vw,56px); display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:8px calc((100vw - min(1080px, 84vw)) / 2) 4px; scrollbar-width:none; outline:none}
.qtrack::-webkit-scrollbar{display:none}
.qslide{flex:0 0 min(1080px, 84vw); height:min(66vh, 600px); min-height:440px; margin:0; position:relative; border-radius:18px; overflow:hidden; scroll-snap-align:center; isolation:isolate; display:grid; place-items:center; opacity:.42; transform:scale(.965); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.qslide.on{opacity:1; transform:none}
.qslide > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transform:scale(1.06); transition:transform 6s ease-out}
.qslide.on > img{transform:scale(1)}
.qshade{position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 65% at 50% 50%, rgba(10,10,9,.74), rgba(10,10,9,.42)), linear-gradient(0deg, rgba(10,10,9,.75), transparent 45%)}
.qin{display:grid; justify-items:center; gap:22px; text-align:center; padding:clamp(28px,5vw,64px); max-width:820px}
.qplace{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ember-hi)}
.qplace svg{width:26px; height:26px; color:var(--w0)}
.qin blockquote{margin:0}
.qin blockquote p{text-shadow:0 2px 24px rgba(0,0,0,.55); font:300 clamp(1.6rem,3vw,2.6rem)/1.18 var(--f-display); letter-spacing:-.035em; color:var(--w0); text-wrap:balance}
.qin figcaption{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--g1); display:grid; gap:4px}
.qin figcaption b{color:var(--w0); font-weight:500}
.qcta{padding:12px 18px; font-size:.86rem; border-radius:10px}
.qdots{display:flex; justify-content:center; gap:8px; margin-top:22px}
.qdots button{all:unset; cursor:pointer; width:28px; height:3px; border-radius:3px; background:var(--ld2); transition:background .3s, width .3s}
.qdots button[aria-current="true"]{background:var(--ember-hi); width:44px}
.qdots button:focus-visible{outline:2px solid var(--ember-hi); outline-offset:4px}
@media (max-width:620px){ .qslide{height:auto; min-height:460px} }