:root{--bg:#0b0b0c}
.blogo{height:52px;width:auto;display:block;flex:0 0 auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
@media(max-width:600px){.blogo{height:42px}}
.brand{gap:11px!important}
.btxt{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em;line-height:.98;color:var(--text)}
.btxt span{font-weight:500;font-size:9px;letter-spacing:.16em;color:var(--muted)}
/* fat centered hero logo */
.vhero-logo{width:min(58vw,300px);margin:0 auto 20px}
.vhero-logo img{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 70px rgba(0,0,0,.7))}
@media(max-width:600px){.vhero-logo{width:min(56vw,210px);margin-bottom:14px}}
.epill{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;padding:9px 18px;border-radius:100px;background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent2);font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.epill svg{width:15px;height:15px}
.epill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent-glow);animation:epulse 1.8s infinite}
@keyframes epulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.gleam{background:linear-gradient(90deg,var(--accent) 0%,var(--accent2) 25%,#fff 45%,var(--accent2) 65%,var(--accent) 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gleam 5.5s linear infinite}
@keyframes gleam{to{background-position:-220% 0}}
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);padding:18px 24px;width:100vw;margin-left:calc(50% - 50vw)}
.trust span{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.09em;color:var(--text);text-transform:uppercase;font-weight:700;font-family:var(--display)}
.trust span svg{width:15px;height:15px;color:var(--accent)}
/* ── Residential x Commercial split ── */
.split2{display:grid;grid-template-columns:1fr 1fr;width:100vw;margin-left:calc(50% - 50vw)}
.split2 .half{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:min(72vh,640px);padding:clamp(30px,4vw,60px);color:#fff}
.split2 .half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.split2 .half:hover img{transform:scale(1.07)}
.split2 .half::after{content:"";position:absolute;inset:0;z-index:1}
.split2 .land::after{background:linear-gradient(180deg,rgba(12,12,8,.12),rgba(12,12,8,.5) 55%,rgba(10,14,24,.92)),linear-gradient(120deg,rgba(242,163,60,.30),transparent 60%)}
.split2 .irr::after{background:linear-gradient(180deg,rgba(8,12,18,.12),rgba(8,12,18,.5) 55%,rgba(8,12,20,.92)),linear-gradient(120deg,rgba(59,125,216,.42),transparent 60%)}
.split2 .inner{position:relative;z-index:2;max-width:460px}
.split2 .k{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:14px}
.split2 .land .k{color:var(--accent2)}.split2 .irr .k{color:#a8ccec}
.split2 h3{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.4vw,54px);line-height:.98;letter-spacing:-.02em}
.split2 p{font-size:clamp(15px,1.7vw,17px);line-height:1.6;color:rgba(255,255,255,.82);margin-top:14px;max-width:40ch}
.split2 .more{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-family:var(--display);font-weight:600;font-size:14px;color:#fff}
.split2 .more svg{width:16px;height:16px;transition:transform .3s}
.split2 .half:hover .more svg{transform:translateX(5px)}
@media(max-width:800px){.split2{grid-template-columns:1fr}.split2 .half{min-height:56vh}}
/* ── full-screen overlaid scenes ── */
.scene{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:min(80vh,760px);display:flex;align-items:center;overflow:hidden}
.scene-bg{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.scene-bg img{width:100%;height:100%;object-fit:cover}
.scene::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(12,12,14,.92),rgba(12,12,14,.5) 48%,rgba(12,12,14,.15))}
.scene.right::after{background:linear-gradient(270deg,rgba(12,12,14,.92),rgba(12,12,14,.5) 48%,rgba(12,12,14,.15))}
.scene-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 28px;width:100%}
.scene-col{max-width:560px}
.scene.right .scene-col{margin-left:auto;text-align:right}
.s-num{font-family:var(--display);font-weight:700;font-size:clamp(48px,7vw,96px);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.4px var(--accent-stroke);margin-bottom:10px}
.s-tag{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.s-h{font-family:var(--display);font-weight:700;font-size:clamp(32px,5vw,66px);line-height:.98;letter-spacing:-.02em;color:var(--text)}
.s-h .accent{color:var(--accent)}
.s-p{font-size:clamp(15px,1.8vw,18px);line-height:1.65;color:rgba(244,242,238,.86);margin-top:16px;max-width:46ch}
.scene.right .s-p{margin-left:auto}
.s-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.scene.right .s-chips{justify-content:flex-end}
.s-chips span{font-family:var(--body);font-size:13px;color:var(--text);border:1px solid var(--line2);border-radius:100px;padding:8px 15px}
@media(max-width:700px){.scene{min-height:auto;padding:64px 0}.scene::after,.scene.right::after{background:linear-gradient(180deg,rgba(12,12,14,.6),rgba(12,12,14,.92))}.scene.right .scene-col{text-align:left;margin-left:0}.scene.right .s-p{margin-left:0}.scene.right .s-chips{justify-content:flex-start}}
/* interactive hover-reveal service menu */
.smenu{width:100vw;margin-left:calc(50% - 50vw);border-top:1px solid var(--line)}
.smenu-in{max-width:1280px;margin:0 auto;padding:0 28px}
.smrow{position:relative;display:flex;align-items:center;gap:22px;padding:clamp(20px,3vw,36px) 4px;border-bottom:1px solid var(--line);cursor:pointer;transition:padding-left .45s cubic-bezier(.2,.7,.2,1)}
.smrow .smi{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--muted);width:42px;flex:0 0 auto;transition:color .35s}
.smrow h3{font-family:var(--display);font-weight:700;font-size:clamp(24px,4.2vw,50px);letter-spacing:-.02em;line-height:1;color:var(--text);flex:1;transition:color .35s}
.smrow .smp{display:none}
.smrow .sma{opacity:0;transform:translateX(-14px);transition:.4s;color:var(--accent);flex:0 0 auto}
.smrow .sma svg{width:26px;height:26px}
.smrow:hover{padding-left:26px}.smrow:hover h3,.smrow:hover .smi{color:var(--accent)}.smrow:hover .sma{opacity:1;transform:translateX(0)}
.sm-float{position:fixed;top:0;left:0;width:330px;height:230px;border-radius:12px;overflow:hidden;pointer-events:none;z-index:40;opacity:0;transition:opacity .4s;box-shadow:0 40px 90px -24px rgba(0,0,0,.8);border:1px solid var(--line2);will-change:transform}
.sm-float img{width:100%;height:100%;object-fit:cover}.sm-float.on{opacity:1}
@media(max-width:860px){.sm-float{display:none}.smrow{flex-wrap:wrap;padding-left:0!important}.smrow:hover{padding-left:0}.smrow .smp{display:block;flex-basis:100%;padding-left:64px;color:var(--muted);font-size:14px;line-height:1.6;margin-top:8px}.smrow .sma{opacity:1;transform:none}}
/* moving two-row photo marquee (Our Work page) */
.pmar{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.pmar-row{display:flex;gap:16px;width:max-content;animation:pmar var(--dur,64s) linear infinite}
.pmar-row.rev{animation-direction:reverse;margin-top:16px;--dur:76s}
.pmar:hover .pmar-row{animation-play-state:paused}
@keyframes pmar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.pmar-row{animation:none}}
.pmar .pcard{position:relative;flex:0 0 auto;width:min(74vw,400px);aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.pmar .pcard img{width:100%;height:100%;object-fit:cover}
.pmar .pcard .lbl{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(transparent,rgba(0,0,0,.82));font-family:var(--display);font-weight:600;font-size:14px;color:#fff;display:flex;align-items:center;gap:8px}
.pmar .pcard .lbl b{color:var(--accent2);font-weight:700}
/* service area + map */
.area-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,68px);align-items:center}
@media(max-width:900px){.area-grid{grid-template-columns:1fr;gap:34px}}
.towns{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.towns span{font-family:var(--body);font-size:14px;color:var(--text);border:1px solid var(--line2);border-radius:8px;padding:9px 16px;transition:border-color .3s,color .3s,transform .3s}
.towns span:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.area-map{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line2);aspect-ratio:4/3.4;background:var(--bg2);box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.area-map iframe{width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(175deg) brightness(.9) contrast(1.05) saturate(.65)}
.area-map .pinbadge{position:absolute;left:18px;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:9px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:8px;padding:10px 16px;font-family:var(--display);font-weight:700;font-size:13px;color:var(--text)}
.area-map .pinbadge svg{width:15px;height:15px;color:var(--accent)}
/* values marquee */
.pchip{display:inline-flex;align-items:center;gap:20px;font-family:var(--display);font-weight:700;font-size:clamp(24px,4.2vw,50px);letter-spacing:-.02em;color:var(--text);padding:0 4px;white-space:nowrap;line-height:1}
.pchip .pdot{color:var(--accent);font-size:.5em}
.pchip.ghost{color:transparent;-webkit-text-stroke:1px var(--accent-stroke)}
@media(max-width:640px){.sec{padding:46px 0}.vhero-inner{padding:84px 18px 90px}.sec-head{margin-bottom:24px}}
/* ═══════════════════════════════════════════════════════════════════════
   CORE — shared cinematic architecture (theme-variable driven).
   Every color/font comes from :root vars set per-site in the theme block.
   ═══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--bg)}
.container{max-width:1280px;margin:0 auto;padding:0 28px}
.container-tight{max-width:980px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.container,.container-tight{padding:0 18px}}

/* ── nav ── */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.nav-wrap.scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:var(--brand-weight,700);font-size:21px;letter-spacing:var(--brand-ls,.01em);color:var(--text)}
.brand .mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(140deg,var(--accent),var(--accent2));color:var(--bg);font-family:var(--display);font-weight:800;font-size:18px}
.nav-links{display:flex;gap:30px}
.nav-link{font-size:14px;font-weight:500;color:var(--muted);transition:color .25s;position:relative}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:16px}
.burger{display:none;background:none;border:0;color:var(--text);cursor:pointer}
.burger svg{width:26px;height:26px}
.drawer{position:fixed;inset:0;z-index:70;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(20px);flex-direction:column;align-items:center;justify-content:center;gap:26px;display:none}
.drawer.open{display:flex}
.drawer a{font-family:var(--display);font-size:26px;color:var(--text)}
.drawer .drawer-close{position:absolute;top:24px;right:26px;font-size:30px;background:none;border:0;color:var(--text);cursor:pointer}
@media(max-width:880px){.nav-links{display:none}.nav-link-cta-desktop{display:none!important}.burger{display:block}}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:15px;border-radius:var(--btn-radius,100px);padding:14px 26px;cursor:pointer;border:1px solid transparent;transition:transform .25s,background .25s,border-color .25s,color .25s;line-height:1}
.btn svg{width:14px;height:14px}
.btn-primary{background:var(--accent);color:var(--bg);box-shadow:0 10px 40px -12px var(--accent-glow)}
.btn-primary:hover{background:var(--accent2);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-white{background:var(--text);color:var(--bg)}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-xl{padding:18px 34px;font-size:16px}

/* ── headings / eyebrow ── */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{display:none}
.h2{font-family:var(--display);font-weight:var(--h-weight,800);font-size:clamp(34px,5.4vw,72px);line-height:var(--h-lh,1.0);letter-spacing:var(--h-ls,-.03em);color:var(--text)}
.h2 .accent{color:var(--accent)}
.sec{padding:clamp(72px,11vh,128px) 0;position:relative}
.sec-2{background:var(--bg2)}
.sec-head{max-width:760px;margin-bottom:clamp(40px,6vh,64px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{font-size:clamp(16px,2vw,19px);line-height:1.7;color:var(--muted);margin-top:16px}

/* ── reveals ── */
.reveal{will-change:transform,opacity}

/* ── CINEMATIC VIDEO HERO ── */
.vhero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--bg)}
.vhero-media{position:absolute;inset:0;z-index:0}
.vhero-media video,.vhero-media img{width:100%;height:100%;object-fit:cover}
.vhero-veil{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 95% at 50% 30%,color-mix(in srgb,var(--bg) 25%,transparent),color-mix(in srgb,var(--bg) 72%,transparent) 72%,var(--bg) 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent),transparent 30%,color-mix(in srgb,var(--bg) 78%,transparent))}
.vhero-grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:62px 62px;-webkit-mask:radial-gradient(82% 72% at 50% 40%,#000,transparent 82%);mask:radial-gradient(82% 72% at 50% 40%,#000,transparent 82%)}
.vhero-inner{position:relative;z-index:3;max-width:1000px;padding:120px 24px}
.vhero-kicker{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.vhero-h1{font-family:var(--display);font-weight:var(--h-weight,800);font-size:clamp(46px,9.4vw,118px);line-height:var(--hero-lh,.96);letter-spacing:var(--h-ls,-.03em);color:var(--text);margin:22px 0 0;text-shadow:0 8px 70px color-mix(in srgb,var(--bg) 55%,transparent)}
.vhero-h1 .accent{color:var(--accent)}
.vhero-sub{font-size:clamp(16px,2.1vw,21px);line-height:1.6;color:color-mix(in srgb,var(--text) 84%,transparent);max-width:640px;margin:24px auto 0}
.vhero-sub strong{color:var(--text);font-weight:600}
.vhero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.vhero-meta{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-family:var(--body);font-size:13px;color:color-mix(in srgb,var(--text) 62%,transparent)}
.vhero-meta .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent-glow);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.vhero-scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;font-family:var(--body);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:color-mix(in srgb,var(--text) 50%,transparent);display:flex;flex-direction:column;align-items:center;gap:9px}
.vhero-scroll::after{content:"";width:1px;height:36px;background:linear-gradient(var(--accent),transparent);animation:scrollLine 2.1s ease-in-out infinite}
@keyframes scrollLine{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:600px){.vhero{min-height:92svh}.vhero-inner{padding:100px 20px}}

/* ── FULL-BLEED ATMOSPHERE STORY BAND ── */
.story{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:clamp(420px,72vh,680px);display:flex;align-items:center;overflow:hidden;background:var(--bg)}
.story-bg{position:absolute;inset:-12% 0;z-index:0;will-change:transform}
.story-bg img{width:100%;height:100%;object-fit:cover;opacity:.62}
.story-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 46%,color-mix(in srgb,var(--bg) 32%,transparent) 100%)}
.story.center .story-veil{background:radial-gradient(82% 86% at 50% 50%,color-mix(in srgb,var(--bg) 44%,transparent),color-mix(in srgb,var(--bg) 90%,transparent))}
.story-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:84px 28px;width:100%}
.story.center .story-inner{text-align:center}
.story-h{font-family:var(--display);font-weight:var(--h-weight,800);font-size:clamp(32px,5.6vw,76px);line-height:1.02;letter-spacing:var(--h-ls,-.03em);color:var(--text);margin-top:16px;max-width:20ch}
.story.center .story-h{margin-left:auto;margin-right:auto}
.story-h .accent{color:var(--accent)}
.story-p{font-size:clamp(16px,2vw,20px);line-height:1.65;color:color-mix(in srgb,var(--text) 82%,transparent);max-width:580px;margin-top:20px}
.story.center .story-p{margin-left:auto;margin-right:auto}

/* ── FULL-BLEED FEATURE ROWS ── */
.frows{width:100vw;margin-left:calc(50% - 50vw)}
.frow{display:grid;grid-template-columns:1.05fr 1fr;min-height:min(84vh,720px);align-items:stretch;border-top:1px solid var(--line)}
.frow-vis{position:relative;overflow:hidden;background:var(--bg2);min-height:min(84vh,720px)}
.frow-vis img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;will-change:transform}
.frow-vis::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 15%,transparent) 0%,transparent 35%,color-mix(in srgb,var(--bg) 85%,transparent) 100%)}
.frow-vis{grid-row:1;grid-column:1}.frow-txt{grid-row:1;grid-column:2}.frow.flip .frow-vis{grid-column:2}.frow.flip .frow-txt{grid-column:1}
.frow.flip .frow-vis::after{background:linear-gradient(270deg,color-mix(in srgb,var(--bg) 15%,transparent) 0%,transparent 35%,color-mix(in srgb,var(--bg) 85%,transparent) 100%)}
.frow-txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,100px);background:var(--bg)}
.frow-num{font-family:var(--display);font-weight:var(--h-weight,800);font-size:clamp(54px,8vw,108px);line-height:.78;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--accent-stroke);margin-bottom:8px}
.frow-tag{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.frow-txt h3{font-family:var(--display);font-weight:var(--h-weight,800);font-size:clamp(28px,3.6vw,50px);line-height:1.03;letter-spacing:var(--h-ls,-.02em);color:var(--text)}
.frow-txt p{font-size:clamp(15px,1.7vw,18px);line-height:1.65;color:var(--muted);margin-top:16px;max-width:46ch}
.frow-txt p strong{color:var(--text);font-weight:600}
.frow-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.frow-chips span{font-family:var(--body);font-size:13px;color:var(--text);border:1px solid var(--line2);border-radius:100px;padding:8px 16px;transition:border-color .3s}
.frow:hover .frow-chips span{border-color:var(--accent)}
@media(max-width:860px){.frow{grid-template-columns:1fr;min-height:auto}.frow-vis,.frow-txt,.frow.flip .frow-vis,.frow.flip .frow-txt{grid-column:1;grid-row:auto}.frow-vis{min-height:40vh}.frow-vis img{inset:0;height:100%}.frow-vis::after,.frow.flip .frow-vis::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 20%,transparent),transparent 40%,color-mix(in srgb,var(--bg) 92%,transparent))}.frow-txt{padding:40px 22px 52px}}

/* ── TRIO / stat strip ── */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.trio .cell{background:var(--bg);padding:clamp(28px,4vw,46px);text-align:center}
.trio .cell .n{font-family:var(--display);font-weight:var(--h-weight,800);font-size:clamp(36px,5vw,60px);line-height:1;color:var(--accent)}
.trio .cell .l{font-size:14px;color:var(--muted);margin-top:10px}
@media(max-width:720px){.trio{grid-template-columns:1fr}}

/* ── about / founder band ── */
.about{position:relative;overflow:hidden}
.about-atmos{position:absolute;inset:0;z-index:0}
.about-atmos img{width:100%;height:100%;object-fit:cover;opacity:.28}
.about-atmos::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 28% 40%,transparent,color-mix(in srgb,var(--bg) 84%,transparent) 80%),linear-gradient(180deg,var(--bg),transparent 18%,var(--bg))}
.about .container{position:relative;z-index:1}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,80px);align-items:center}
.about-card{border:1px solid var(--line2);border-radius:20px;padding:40px;background:color-mix(in srgb,var(--bg2) 70%,transparent);backdrop-filter:blur(6px)}
.about-card .initials{width:84px;height:84px;border-radius:18px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:32px;color:var(--bg);background:linear-gradient(140deg,var(--accent),var(--accent2));margin-bottom:22px}
.about-card .nm{font-family:var(--display);font-weight:700;font-size:24px;color:var(--text)}
.about-card .ttl{font-size:14px;color:var(--muted);margin-top:4px}
.about-quote{font-family:var(--display);font-weight:var(--quote-weight,500);font-size:clamp(20px,2.4vw,26px);line-height:1.4;color:var(--text);margin:18px 0}
.about p{color:var(--muted);line-height:1.75;margin-top:14px}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:30px}}

/* ── faq ── */
.faq{display:grid;gap:14px;max-width:860px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:16px;padding:24px 26px;background:var(--bg2);transition:border-color .3s}
.faq-item:hover{border-color:var(--line2)}
.faq-q{font-family:var(--display);font-weight:600;font-size:18px;color:var(--text)}
.faq-a{font-size:15px;line-height:1.7;color:var(--muted);margin-top:10px}

/* ── final cta ── */
.cta{position:relative;text-align:center;overflow:hidden;padding:clamp(90px,14vh,150px) 0}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1100px;height:680px;background:radial-gradient(ellipse,var(--accent-glow),transparent 62%);filter:blur(60px);pointer-events:none}
.cta-inner{position:relative;z-index:2;max-width:860px;margin:0 auto;padding:0 24px}
.cta h2{font-family:var(--display);font-weight:var(--h-weight,800);font-size:clamp(36px,6vw,82px);line-height:1.0;letter-spacing:var(--h-ls,-.03em);color:var(--text)}
.cta h2 .accent{color:var(--accent)}
.cta p{font-size:clamp(16px,2vw,19px);line-height:1.65;color:var(--muted);margin:18px auto 34px;max-width:560px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── footer ── */
.footer{background:var(--bg2);border-top:1px solid var(--line);padding:80px 0 32px;color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
.footer-about{margin-top:18px;max-width:36ch;line-height:1.7;font-size:14.5px}
.footer h4{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text);margin-bottom:16px}
.footer-links{list-style:none;display:grid;gap:10px}
.footer-links a{font-size:14.5px;color:var(--muted);transition:color .25s}
.footer-links a:hover{color:var(--accent)}
.footer-contact a{color:var(--text)}
.footer-bottom{margin-top:54px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ── mobile sticky cta ── */
.msticky{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:10px;padding:12px 14px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(120%);transition:transform .35s}
.msticky.show{transform:translateY(0)}
.msticky .btn{flex:1;justify-content:center}
@media(max-width:860px){.msticky{display:flex}body{padding-bottom:64px}}

/* reduced motion */
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;scroll-behavior:auto!important}}

/* recent-work gallery (horizontal drag) */
.gallery{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden}
.ghead{max-width:1280px;margin:0 auto;padding:0 28px clamp(20px,3vh,34px)}
.gtrack{display:flex;gap:16px;padding:6px 28px 30px;overflow-x:auto;scroll-snap-type:x proximity;cursor:grab;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gtrack::-webkit-scrollbar{display:none}
.gtrack.drag{cursor:grabbing;scroll-snap-type:none}
.gcard{position:relative;flex:0 0 auto;width:min(82vw,440px);aspect-ratio:4/3.1;border-radius:16px;overflow:hidden;border:1px solid var(--line);scroll-snap-align:center;user-select:none;background:var(--bg2)}
.gcard img{width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gcard:hover img{transform:scale(1.05)}
.gcard .glabel{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));color:#fff;font-family:var(--body);font-weight:600;font-size:14px}
/* reviews as a manual swipe/drag carousel (clickable, user-controlled) */
.gtrack .rev{flex:0 0 auto;width:min(86vw,360px);scroll-snap-align:center;white-space:normal}
.rcarousel .ghint{text-align:center}
.ghint{max-width:1280px;margin:0 auto;padding:4px 28px 0;font-family:var(--body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media(max-width:560px){.gcard{width:86vw}}

/* brand logo image */
.brand img{height:44px;width:auto;display:block}
@media(max-width:600px){.brand img{height:36px}}
/* google rating badge */
.gbadge{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border:1px solid var(--line2);border-radius:100px;background:var(--bg2);font-size:13px;color:var(--text)}
.gbadge .stars{color:var(--accent);letter-spacing:1px}
.gbadge b{font-weight:700}
/* reviews grid */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.rev{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--bg2);transition:border-color .3s}
.rev:hover{border-color:var(--line2)}
.rev-stars{color:var(--accent);font-size:15px;letter-spacing:3px}
.rev-text{margin-top:14px;font-size:14.5px;line-height:1.65;color:var(--text);flex:1}
.rev-meta{margin-top:18px;display:flex;align-items:center;gap:11px}
.rev-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:15px;color:var(--bg);background:linear-gradient(140deg,var(--accent),var(--accent2));flex-shrink:0}
.rev-nm{font-family:var(--display);font-weight:600;font-size:14px;color:var(--text)}
.rev-src{font-size:12px;color:var(--muted)}
@media(max-width:860px){.reviews{grid-template-columns:1fr}}
/* instagram strip */
.igstrip{position:relative;width:100vw;margin-left:calc(50% - 50vw);text-align:center;padding:clamp(56px,8vh,92px) 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);overflow:hidden}
.igstrip h3{font-family:var(--display);font-weight:var(--h-weight,700);font-size:clamp(24px,4.4vw,44px);letter-spacing:var(--h-ls,-.02em);color:var(--text)}
.igstrip p{color:var(--muted);margin-top:10px;font-size:15px}

/* hero slideshow (fade through images + video) */
.vhero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease}
.vhero-slide.on{opacity:1}
.vhero-slide video,.vhero-slide img{width:100%;height:100%;object-fit:cover}
.vhero-slide img{animation:hkb 16s ease-in-out infinite alternate}
@keyframes hkb{from{transform:scale(1.05)}to{transform:scale(1.16)}}
/* massive hero logo */
.vhero-logo{display:block;margin:0 auto 4px}
.vhero-logo img{width:min(74vw,300px);height:auto;margin:0 auto;display:block;filter:drop-shadow(0 14px 44px rgba(0,0,0,.6))}
/* auto-scroll marquee (reviews + gallery) */
.amar{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.amar-track{display:flex;gap:16px;width:max-content;animation:amar var(--dur,55s) linear infinite}
.amar:hover .amar-track{animation-play-state:paused}
@keyframes amar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.amar-track{animation:none}}
.amar .rev{width:min(85vw,360px);flex:0 0 auto}
.amar .gcard{width:min(80vw,420px)}
@media(max-width:560px){.amar .gcard{width:84vw}.amar .rev{width:86vw}}
/* legit google badge + gold stars + per-card google mark */
.gG{flex-shrink:0}
.gstars{display:inline-flex;gap:2px}
.gstar{width:16px;height:16px;fill:#fbbc04}
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.gbadge{gap:10px}

/* nav social icons (mobile + desktop) */
.nav-social{display:inline-flex;align-items:center;gap:8px}
.nav-social a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line2);color:var(--muted);transition:all .25s}
.nav-social a:hover{color:var(--text);border-color:var(--accent);background:var(--bg2);transform:translateY(-1px)}
.nav-social svg{width:18px;height:18px}
/* page hero */
.page-hero{position:relative;padding:148px 0 clamp(44px,7vh,84px);text-align:center;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero .container{position:relative;z-index:2}
.page-hero-bg{position:absolute;inset:0;z-index:0;opacity:.3}
.page-hero-bg img{width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(80% 92% at 50% 28%,transparent,var(--bg) 78%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent),transparent 42%,var(--bg))}
.page-hero .crumb{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.page-hero h1{font-family:var(--display);font-weight:var(--h-weight);font-size:clamp(38px,6.6vw,78px);line-height:1.0;letter-spacing:var(--h-ls);color:var(--text)}
.page-hero h1 .accent{color:var(--accent)}
.page-hero .ph-sub{font-size:clamp(16px,2vw,20px);color:var(--muted);max-width:640px;margin:18px auto 0;line-height:1.65}
/* value grid */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.vcard{border:1px solid var(--line);border-radius:16px;padding:28px;background:var(--bg2)}
.vcard .vi{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);margin-bottom:16px}
.vcard .vi svg{width:24px;height:24px}
.vcard h3{font-family:var(--display);font-weight:600;font-size:19px;color:var(--text)}
.vcard p{font-size:14.5px;line-height:1.6;color:var(--muted);margin-top:8px}
@media(max-width:680px){.vgrid{grid-template-columns:1fr}}
/* contact */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.ci{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.ci svg{width:22px;height:22px;color:var(--accent);flex-shrink:0;margin-top:2px}
.ci .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ci .v{font-family:var(--display);font-weight:600;color:var(--text);margin-top:3px;font-size:16px}
.map-embed{margin-top:22px;border-radius:16px;overflow:hidden;border:1px solid var(--line2);aspect-ratio:16/11;background:var(--bg2)}
.map-embed iframe{width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) brightness(.95) contrast(.95)}

/* ── mobile density: shorter page, less endless scrolling ── */
@media(max-width:640px){
  .sec{padding:54px 0}
  .story{min-height:auto}
  .story-inner{padding:52px 22px}
  .frow-txt{padding:30px 20px 38px}
  .frow-num{font-size:64px}
  .sec-head{margin-bottom:30px}
  .cta{padding:70px 0}
  .footer{padding:54px 0 28px}
}


:root{--bg:#0b0b0c;--panel:#141416;--ink:#f2f0ec;--accent:#e56911;--accentl:#ff9a3c;--mut:#a8a49c;--disp:'Bricolage Grotesque';--body:'Inter'}
*{box-sizing:border-box}
::selection{background:#e56911;color:#0b0b0c}
html,body{overflow-x:clip}
body{background:#0b0b0c;color:#f2f0ec;font-family:var(--body),system-ui,sans-serif;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 1px,transparent 1px 6px),repeating-linear-gradient(135deg,rgba(255,255,255,.016) 0 1px,transparent 1px 6px)}
h1,h2,h3{font-family:var(--disp),system-ui,sans-serif;font-weight:800;font-style:normal;text-transform:uppercase;letter-spacing:-.01em;line-height:.94;margin:0}
.g{color:#e56911}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.kick{display:inline-flex;align-items:center;gap:12px;font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#e56911}
.kick::before{content:"";width:34px;height:2px;background:#e56911}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding:16px 26px;border-radius:4px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s}
.btn svg{width:15px;height:15px}
.btn-g{background:#e56911;color:#0b0b0c}.btn-g:hover{background:#ff9a3c;transform:translateY(-2px)}
.btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}.btn-o:hover{border-color:#fff;background:#fff;color:#0a0a0b}
.nav{display:block;position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s}
.nav-in{width:100%}
.nav.scrolled{background:rgba(11,11,12,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:inline-flex;flex-direction:column;line-height:1;text-decoration:none}
.brand-img{flex-direction:row;align-items:center}.wm-img{height:44px;width:auto;display:block;border-radius:9px;box-shadow:0 6px 22px rgba(0,0,0,.28)}
.hero-logo{display:block;margin:0 auto clamp(20px,3.4vh,34px);height:auto;width:clamp(230px,32vw,384px);max-width:82vw;border-radius:16px;box-shadow:0 22px 60px rgba(0,0,0,.5);animation:hin 2.6s cubic-bezier(.2,.7,.15,1) both}
@media(max-width:600px){.hero-logo{width:min(300px,80vw)}.wm-img{height:38px}}
.wm-name{font-family:var(--disp);font-weight:800;font-style:normal;font-size:22px;letter-spacing:-.01em;color:#fff;white-space:nowrap;text-transform:uppercase;}
.wm-sub{font-family:var(--body);font-weight:600;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#a8a49c;margin-top:4px;white-space:nowrap}
.nav-in .brand{flex:0 0 auto}
.nav-cta{white-space:nowrap;flex:0 0 auto}
.nav-links{display:flex;gap:clamp(15px,1.8vw,28px);flex:0 1 auto}
.nav-links a{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#d8d5cd;text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:#e56911}
.nav-right{display:flex;align-items:center;gap:16px}
.burger{display:none;background:none;border:none;color:#fff;cursor:pointer}.burger svg{width:26px;height:26px}
@media(max-width:1040px){.nav-links,.nav-cta{display:none}.burger{display:block}}
.drawer{position:fixed;inset:0;z-index:60;background:rgba(10,10,11,.98);backdrop-filter:blur(14px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transform:translateY(-100%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.drawer.open{transform:translateY(0)}
.drawer a{font-family:var(--disp);font-style:normal;font-weight:800;font-size:26px;text-transform:uppercase;color:#fff;text-decoration:none}
.drawer a:hover{color:#e56911}.drawer-x{position:absolute;top:24px;right:26px;background:none;border:none;color:#fff;font-size:34px;cursor:pointer;line-height:1}
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;padding:120px 20px 70px}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:hin 2.6s cubic-bezier(.2,.7,.15,1) both}
@keyframes hin{from{transform:scale(1.16);opacity:.4}to{transform:scale(1.08);opacity:1}}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,9,.62),rgba(8,8,9,.4) 40%,rgba(8,8,9,.82)),radial-gradient(120% 90% at 50% 42%,rgba(8,8,9,.2),rgba(8,8,9,.7) 82%)}
.hero-in{position:relative;z-index:2;max-width:1000px;width:100%}
.hero-wm{line-height:.82;margin-bottom:clamp(16px,3vh,28px)}
.hero-wm .a{display:block;font-family:var(--disp);font-weight:800;font-style:normal;font-size:clamp(72px,12vw,172px);letter-spacing:-.03em;color:#fff;text-transform:uppercase;text-shadow:0 10px 44px rgba(0,0,0,.6)}
.hero-wm .a .g{color:#e56911}
.hero-wm .b{display:block;font-family:var(--body);font-weight:700;font-size:clamp(13px,2.2vw,24px);letter-spacing:.4em;text-transform:uppercase;color:#e56911;margin-top:8px;padding-left:.4em}
.hero-pin{display:inline-flex;align-items:center;gap:8px;color:#ff9a3c;font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}.hero-pin svg{width:15px;height:15px}
.hero h1{color:#fff;font-size:clamp(40px,6vw,78px);text-shadow:0 6px 40px rgba(0,0,0,.5)}
.hero .sub{color:#e9e6de;max-width:56ch;margin:22px auto 0;font-size:clamp(16.5px,1.9vw,19px);font-weight:500;line-height:1.55;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hero-cta{margin-top:clamp(26px,4vh,38px);display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero-trust{margin-top:clamp(28px,5vh,42px);display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:center;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}.hero-trust b{color:#fff}.hero-trust svg{width:14px;height:14px;color:#e56911}.hero-trust .stars{display:inline-flex;gap:2px}.hero-trust .stars svg{width:13px;height:13px}
@media(max-width:600px){.hero{padding-top:112px}.hero-wm .a{font-size:clamp(60px,20vw,104px)}.hero-wm .b{font-size:12px;letter-spacing:.3em}.hero h1{font-size:clamp(36px,10vw,52px)}.hero .sub{font-size:16px}.hero-cta{width:100%;flex-direction:column}.hero-cta .btn{width:100%}}
.ticker{background:#e56911;color:#0b0b0c;overflow:hidden;border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15)}
.ticker-t{display:flex;width:max-content;animation:tick 40s linear infinite}.ticker:hover .ticker-t{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:14px;padding:13px 26px;font-family:var(--disp);font-weight:800;font-style:normal;font-size:15px;text-transform:uppercase;white-space:nowrap}
.ticker span::after{content:"";width:5px;height:5px;border-radius:50%;background:#0b0b0c}
@keyframes tick{to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){.ticker-t{animation:none}}
.sec{padding:clamp(72px,10vw,128px) 0;position:relative;overflow-x:clip}
.sec-alt{background:#141416}
.sec h2{font-size:clamp(40px,6vw,78px);color:#fff;margin-top:16px}
.sec .lede{color:#a8a49c;font-size:clamp(15px,1.8vw,18px);line-height:1.75;max-width:52ch;margin-top:20px}
.ba-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:900px){.ba-grid{grid-template-columns:1fr;gap:30px}}
.ba{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:11/13;cursor:ew-resize;user-select:none;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.08)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-top{clip-path:inset(0 50% 0 0);z-index:2}
.ba-line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#e56911;z-index:3;transform:translateX(-50%)}
.ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;width:46px;height:46px;border-radius:50%;background:#e56911;color:#0b0b0c;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.ba-handle svg{width:22px;height:22px}
.ba-tag{position:absolute;top:14px;z-index:3;font-family:var(--body);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,10,11,.7);padding:5px 12px;border-radius:5px}
.ba-tag.bf{left:14px}.ba-tag.af{right:14px;color:#e56911}
.ba-note{font-family:var(--body);font-size:12.5px;color:#a8a49c;margin-top:12px}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(30px,4vw,46px)}
.ggrid>*{min-width:0}
@media(max-width:800px){.ggrid{grid-template-columns:repeat(2,1fr)}}
.gswipe{display:none}
/* mobile: whole-image SWIPE CAROUSEL (a 2-col grid clipped tiles off-screen) */
@media(max-width:700px){
  .ggrid{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:10px;scrollbar-width:none}
  .ggrid::-webkit-scrollbar{display:none}
  .ggrid>.gcard{flex:0 0 84%;scroll-snap-align:center}
  .gswipe{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;
    font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#a8a49c}
}
.gcard{position:relative;overflow:hidden;border-radius:8px;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.08)}
.gcard img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.gcard:hover img{transform:scale(1.07)}
.gcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;background:linear-gradient(180deg,transparent,rgba(8,8,9,.92));font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.gcard figcaption b{color:#e56911;display:block;font-size:10px;letter-spacing:.14em;margin-bottom:2px}
.menu{border-top:1px solid rgba(255,255,255,.1);margin-top:clamp(34px,5vw,52px)}
.mrow{display:grid;grid-template-columns:56px 1fr auto;gap:clamp(14px,3vw,36px);align-items:center;padding:clamp(24px,3.2vw,36px) 0;border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none;color:inherit;transition:padding-left .3s ease,background .3s}
.mrow:hover{padding-left:14px;background:rgba(229,105,17,.12)}
.mrow .mn{font-family:var(--disp);font-weight:800;font-style:normal;font-size:clamp(22px,2.6vw,30px);color:#e56911}
.mrow>span{min-width:0}
.mrow .mt{display:block;font-family:var(--disp);font-weight:800;font-style:normal;font-size:clamp(24px,3.2vw,38px);text-transform:uppercase;color:#fff;line-height:1.02}
.mrow .md{display:block;font-family:var(--body);font-size:14.5px;line-height:1.6;color:#a8a49c;margin-top:8px;max-width:60ch}
.mrow .mq{display:block;font-family:var(--body);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#ff9a3c;margin-top:12px}
.mrow .mar{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.24);display:grid;place-items:center;color:#fff;transition:all .3s;flex-shrink:0}
.mrow:hover .mar{background:#e56911;color:#0b0b0c;border-color:#e56911;transform:translateX(4px)}.mrow .mar svg{width:20px;height:20px}
@media(max-width:640px){.mrow{grid-template-columns:40px 1fr;gap:14px}.mrow .mar{display:none}}
.dw-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:900px){.dw-grid{grid-template-columns:1fr;gap:30px}}
.dw-img{border-radius:12px;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.08)}.dw-img img{width:100%;height:100%;object-fit:cover}
.dw-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.dw-list li{display:flex;gap:12px;align-items:flex-start;font-family:var(--body);font-size:15.5px;color:#d8d5cd}.dw-list li svg{width:20px;height:20px;color:#e56911;flex-shrink:0;margin-top:2px}
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
@media(max-width:860px){.area-grid{grid-template-columns:1fr}}
.towns{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.towns span{font-family:var(--body);font-weight:600;font-size:13px;padding:8px 14px;border:1px solid rgba(255,255,255,.18);border-radius:4px;color:#d8d5cd}
.map{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);aspect-ratio:4/3;position:relative}.map iframe{width:100%;height:100%;border:0;filter:grayscale(.4) invert(.9) hue-rotate(180deg)}
.callband{position:relative;overflow:hidden;text-align:center;padding:clamp(80px,13vh,150px) 24px;background:#0b0b0c}
.callband::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 100% at 50% 120%,rgba(229,105,17,.34),transparent 62%)}
.callband .in{position:relative;z-index:2}.callband h2{font-size:clamp(46px,8vw,104px);color:#fff}
.callband .num{display:inline-flex;align-items:center;gap:14px;margin-top:18px;font-family:var(--disp);font-weight:800;font-style:normal;font-size:clamp(34px,5.4vw,58px);color:#fff;text-decoration:none}
.callband .num svg{width:.62em;height:.62em;color:#e56911}.callband .num:hover{color:#e56911}
.callband .cs{font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:18px}
.foot{background:#050506;border-top:1px solid rgba(255,255,255,.08);padding:clamp(48px,7vw,72px) 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:28px}}
.foot h4{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.foot a,.foot p{font-family:var(--body);font-size:14px;color:#a8a49c;text-decoration:none;line-height:1.9;display:block}.foot a:hover{color:#e56911}.foot .ab{max-width:38ch;line-height:1.7}
.foot-bot{border-top:1px solid rgba(255,255,255,.08);margin-top:36px;padding-top:22px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-family:var(--body);font-size:12px;color:#6f6c63}
.msticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,11,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1)}
.msticky .btn{flex:1;padding:14px}@media(max-width:800px){.msticky{display:flex}}
.phero{position:relative;padding:clamp(140px,20vh,180px) 0 clamp(50px,8vh,84px);overflow:hidden}
.phero-bg{position:absolute;inset:0;z-index:0}.phero-bg img{width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,9,.72),rgba(8,8,9,.86)),radial-gradient(80% 60% at 50% 40%,rgba(229,105,17,.12),transparent 76%)}
.phero .wrap{position:relative;z-index:2}.phero .crumb{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#ff9a3c}
.phero h1{color:#fff;font-size:clamp(46px,8vw,92px);margin-top:14px}.phero .ph-sub{color:#e9e6de;font-family:var(--body);font-weight:500;font-size:clamp(16px,1.9vw,19px);max-width:52ch;margin-top:18px;line-height:1.5}
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:clamp(28px,4vw,40px)}@media(max-width:640px){.incl{grid-template-columns:1fr}}
.incl li{list-style:none;display:flex;gap:12px;align-items:flex-start;padding:16px 18px;background:#141416;border:1px solid rgba(255,255,255,.08);border-radius:6px;font-family:var(--body);font-size:14.5px;color:#d8d5cd}.incl li svg{width:20px;height:20px;color:#e56911;flex-shrink:0;margin-top:1px}
.cform{display:grid;gap:12px;max-width:560px}
.cform input,.cform textarea{width:100%;padding:15px 16px;border:1px solid rgba(255,255,255,.18);background:#141416;color:#f2f0ec;font-family:var(--body);font-size:15px;border-radius:5px}
.cform input::placeholder,.cform textarea::placeholder{color:#7a766c}
.ci{display:flex;gap:13px;align-items:center;text-decoration:none;padding:12px 0}.ci svg{width:20px;height:20px;color:#e56911}.ci .l{font-family:var(--body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a8a49c;display:block}.ci .v{font-family:var(--body);font-weight:600;color:#fff}
.reveal{opacity:0;transform:translateY(24px)}

/* ==================== HAUL OFF DUMPSTER RENTALS — carbon & orange ====================
   [H6] Palette sampled from the REAL logo file with PIL (logo-match overrides the brief):
     ground #000000 (3.37M px) · orange #e56911/#e4660f (64k px) · steel #9e9e9e/#8c8c8c
   Measured contrast on this build:
     ink    #f2f0ec on carbon #0b0b0c ............ 17.6:1  AAA
     mut    #a8a49c on carbon ................... 8.6:1   AAA
     amber  #ff9a3c on carbon ................... 9.24:1  AAA  <- ORANGE TEXT uses THIS
     orange #e56911 as a FILL, ink #0b0b0c on it . 6.71:1  AA   <- near-black on orange
     🚨 white on #e56911 = 3.13:1 FAILS and is never used. Enforced below. */
:root{--carbon:#0b0b0c;--panel:#141416;--ink:#f2f0ec;--orange:#e56911;--amber:#ff9a3c;--mut:#a8a49c;--onorange:#0b0b0c}

/* ---------- ENGINE BUG 1: .reveal pre-state transform can persist (GSAP batch not completing on
   some scroll paths), leaving elements 24px low and OVERLAPPING the copy beneath. Once opacity
   has settled to 1 the element must sit at its true position. Both spacing forms are matched, and
   transform:none (not translateY(0)) is required because rv-left/right/zoom also shift x/scale. */
.reveal[style*="opacity: 1"],.reveal[style*="opacity:1"]{transform:none!important}

/* ---------- 🚨 CONTRAST ENFORCEMENT: never white on orange ---------- */
.btn-g,.ticker,.ba-handle,.mrow:hover .mar{color:var(--onorange)!important}
.btn-g:hover{background:var(--amber);color:var(--onorange)!important}

/* ---------- the two-tone display accent uses AMBER (9.24:1), not raw orange ---------- */
.g{color:var(--amber)}
.kick{color:var(--amber)}
.hero-wm .a .g{color:var(--amber)}

/* ---------- HERO: engine bug #2 — the .hero ships NO scrim of its own. On this dark base we
   still declare one explicitly so the slideshow can never wash the H1 out. ---------- */
.hero{min-height:100svh}
.hero-veil{background:
  linear-gradient(180deg,rgba(8,8,9,.66),rgba(8,8,9,.5) 38%,rgba(8,8,9,.92)),
  radial-gradient(120% 90% at 50% 40%,rgba(8,8,9,.22),rgba(8,8,9,.8) 84%)}
.phero::after{background:
  linear-gradient(180deg,rgba(8,8,9,.8),rgba(8,8,9,.92)),
  radial-gradient(80% 60% at 50% 40%,rgba(229,105,17,.14),transparent 78%)}
/* callband ships background:#f5f6f8 + color:#fff in some engine paths — force it dark here */
.callband{background:var(--carbon);color:var(--ink)}
.callband h2{color:var(--ink)}
.towns span{border-color:rgba(255,255,255,.2);color:#ded9d0}

/* ---------- THE LOGO ---------- [H6] native black ground = seamless at full bleed */
.wm-img{height:52px;border-radius:6px;box-shadow:none;background:transparent}
@media(max-width:600px){.wm-img{height:40px}}
.hero-logo{width:clamp(260px,34vw,430px);border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.7)}

/* ================= [H9] THE SIGNATURE SCROLL MOMENT — THREE CANS =================
   A pinned scroll-driven size comparison. The three cans scale against a shared driveway datum
   line as you scroll; each locks in with its honest typical-use line. Markup injected by
   _haul_patch.js into the .grain slot. */
.grain{position:relative;min-height:300vh;background:var(--carbon)}
@media(max-width:700px){.grain{min-height:280vh}}
.grain-bg{position:sticky;top:0;height:100svh;overflow:hidden;z-index:0}
.grain-bg img{width:100%;height:100%;object-fit:cover;opacity:.13;filter:grayscale(.6) contrast(1.05)}
.grain-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 50% 45%,rgba(11,11,12,.55),rgba(11,11,12,.9) 82%)}
.grain-in{position:sticky;top:0;height:100svh;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:80px 20px 40px;margin-top:-100svh}
.grain-in .gk{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber)}
.grain-in h2{font-size:clamp(40px,7vw,86px);color:var(--ink);margin-top:12px}
.grain-in>p{font-family:var(--body);color:var(--mut);font-size:clamp(15px,1.8vw,18px);margin-top:14px;max-width:46ch}

.cans{position:relative;width:min(1080px,94vw);margin:clamp(20px,4vh,46px) auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,3vw,40px);align-items:end}
.can{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:.26;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.can.on{opacity:1;transform:translateY(0)}
/* the can body scales by yardage — 10:12:15 mapped to real relative heights */
.can-box{position:relative;width:100%;background:linear-gradient(180deg,#2a2a2d,#171719);
  border:2px solid var(--orange);border-radius:3px;display:flex;align-items:flex-end;
  justify-content:center;overflow:hidden;transition:height .6s cubic-bezier(.2,.8,.2,1)}
.can[data-size="10"] .can-box{height:clamp(72px,13vh,124px)}
.can[data-size="12"] .can-box{height:clamp(88px,16vh,150px)}
.can[data-size="15"] .can-box{height:clamp(110px,20vh,188px)}
.can-box::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 34px)}
/* the "load" inside the can — fills as the can lights, so volume reads at a glance */
.can-box::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;
  background:linear-gradient(180deg,rgba(229,105,17,.85),rgba(229,105,17,.5));
  transition:height .7s cubic-bezier(.2,.8,.2,1) .1s}
.can.on .can-box::after{height:62%}
.can.on .can-box{box-shadow:0 0 0 1px rgba(229,105,17,.5),0 18px 50px -18px rgba(229,105,17,.6)}
.can-yd{font-family:var(--disp);font-weight:800;font-size:clamp(26px,4.4vw,52px);color:var(--amber);line-height:1}
.can-yd small{display:block;font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut);margin-top:6px}
.can-why{font-family:var(--body);font-size:clamp(12px,1.5vw,14.5px);line-height:1.5;color:#ded9d0;
  max-width:22ch;min-height:4.2em}
/* the shared datum the cans scale against */
.can-datum{grid-column:1/-1;height:2px;background:linear-gradient(90deg,transparent,rgba(229,105,17,.7),transparent);margin-top:6px}
.can-datumlab{grid-column:1/-1;font-family:var(--body);font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-top:8px}
.can-note{font-family:var(--body);font-size:12.5px;color:var(--mut);margin-top:14px;max-width:56ch;line-height:1.6}
@media(max-width:700px){
  .cans{gap:10px}
  .can-why{font-size:11.5px;max-width:14ch;min-height:5.4em}
  .can-yd{font-size:clamp(22px,7vw,34px)}
  .grain-in{padding-top:74px}
}

/* ---------- [H4] the size cards on /dumpster-sizes ---------- */
.incl li{background:var(--panel);border-color:rgba(255,255,255,.09)}

/* ---------- ENGINE BUG 4: inherited .gcard{width:min(82vw,440px)} can override the grid and
   push the last card past the right edge at 1440. Re-assert auto width inside the grid. ---------- */
.ggrid>.gcard{width:auto;max-width:none}
@media(max-width:700px){.ggrid>.gcard{flex:0 0 84%;width:auto}}

/* ---------- ENGINE BUG 7: every icon/SVG needs an explicit size or it renders ~300px tall ---------- */
.cred-ic{display:inline-grid;place-items:center;width:34px;height:34px}
.cred-ic svg{width:22px;height:22px;color:var(--amber)}
.dw-list li svg,.incl li svg{width:20px;height:20px;flex:0 0 20px}
.hero-trust svg{width:14px;height:14px;flex:0 0 14px}
.ci svg{width:20px;height:20px;flex:0 0 20px}
.kick::before{flex:0 0 34px}

/* ---------- ENGINE BUG 6: .msticky ships with no CSS in some paths and has covered the hero CTA
   at 390px. Pin it to the bottom, give the page bottom padding so it covers nothing. ---------- */
.msticky{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:45;
  background:rgba(8,8,9,.97);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12)}
.msticky .btn{min-height:48px}
@media(max-width:800px){body{padding-bottom:78px}}

/* ---------- credentials strip ---------- */
.cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(28px,4vw,42px)}
@media(max-width:860px){.cred-grid{grid-template-columns:repeat(2,1fr)}}
.cred-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:22px 20px;
  background:var(--panel);border:1px solid rgba(255,255,255,.09);border-radius:6px;
  transition:transform .3s ease,border-color .3s ease}
.cred-card:hover{transform:translateY(-4px);border-color:rgba(229,105,17,.5)}
.cred-l{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut)}
.cred-v{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.4vw,40px);color:var(--ink);line-height:1}

/* ---------- the second phone line, stated plainly (never "one family") ---------- */
.hero-2nd{margin-top:16px;font-family:var(--body);font-size:13.5px;color:var(--mut)}
.hero-2nd a{color:var(--amber);text-decoration:none;font-weight:600}
.hero-2nd a:hover{text-decoration:underline}

/* ---------- hover micro-interactions on every card/row ---------- */
.gcard{transition:transform .35s ease,border-color .35s ease}
.gcard:hover{transform:translateY(-5px);border-color:rgba(229,105,17,.45)}
.mrow{transition:padding-left .3s ease,background .3s ease}
.btn{transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--amber);outline-offset:3px}

/* ---------- tap targets >= 44px on mobile ---------- */
@media(max-width:800px){
  .btn{min-height:46px}
  .nav-links a,.drawer a{min-height:44px;display:inline-flex;align-items:center}
  .ci{min-height:48px}
}
/* ---------- TAP TARGETS: the engine's burger + drawer close ship under 44px ---------- */
.burger{width:46px;height:46px;display:none;align-items:center;justify-content:center;padding:0}
@media(max-width:1040px){.burger{display:inline-flex}}
.drawer-x{width:48px;height:48px;display:grid;place-items:center;top:16px;right:16px;
  font-size:32px;line-height:1;border-radius:8px}
.drawer-x:hover{color:var(--amber)}

/* drawer: verified programmatically — ink #f2f0ec on rgba(11,11,12,.98) = 17.6:1 */
.drawer{background:rgba(11,11,12,.985)}
.drawer a{color:var(--ink)}
.drawer a:hover{color:var(--amber)}


/* ==================== [E] SLIDESHOW HERO (brief §0.5 archetype) ==================== */
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slides .hslide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease-in-out}
.hero-slides .hslide.on{opacity:1}
.hero-slides .hslide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hero-slides .hslide.on img{animation:kb 7s ease-out forwards}
@keyframes kb{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.15) translate3d(-1.2%,-1.4%,0)}}
@media(prefers-reduced-motion:reduce){
  .hero-slides .hslide{transition:none}
  .hero-slides .hslide.on img{animation:none;transform:scale(1.04)}
}

/* FIX: reveal pre-state transform could persist (GSAP batch not completing on some
   scroll paths), leaving elements 24px low and overlapping following copy.
   Once an element is visible (opacity settled to 1), it must sit at its true position. */
.reveal[style*="opacity: 1"]{transform:none!important}

/* ── Booking-request form: size / date / address fields ─────────────────── */
.cform select,.cform input[type="date"]{
  width:100%;padding:15px 16px;border:1px solid rgba(255,255,255,.18);background:#141416;
  color:#f2f0ec;font-family:var(--body);font-size:15px;border-radius:5px;-webkit-appearance:none;
  appearance:none}
.cform select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e56911' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:17px;
  padding-right:44px;cursor:pointer}
.cform select:invalid{color:#7a766c}
.cform select option{background:#141416;color:#f2f0ec}
/* date inputs render light-on-light in Chrome without this */
.cform input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(58%) sepia(72%) saturate(2400%) hue-rotate(1deg) brightness(96%);cursor:pointer}
.cform input[type="date"]:not(:focus):in-range::-webkit-datetime-edit-year-field,
.cform input[type="date"]:not(:focus):in-range::-webkit-datetime-edit-month-field,
.cform input[type="date"]:not(:focus):in-range::-webkit-datetime-edit-day-field,
.cform input[type="date"]:not(:focus):in-range::-webkit-datetime-edit-text{color:#f2f0ec}
.cform select:focus,.cform input[type="date"]:focus{outline:2px solid var(--accent);outline-offset:1px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.f2{grid-template-columns:1fr}}
.flab{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#9a958a;margin:4px 0 -4px}
.fnote{font-size:12.5px;line-height:1.55;color:#8b867c;margin:2px 0 0}
.fnote b{color:#c8c3b8;font-weight:700}