:root{--bg:#0a0a0d}
.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:#0a0a0d;--panel:#15151a;--ink:#f4f2ee;--accent:#c8102e;--accentl:#e8455f;--mut:#9b9aa3;--disp:'Archivo Black';--body:'Inter'}
*{box-sizing:border-box}
::selection{background:#c8102e;color:#ffffff}
html,body{overflow-x:clip}
body{background:#0a0a0d;color:#f4f2ee;font-family:var(--body),system-ui,sans-serif;}
h1,h2,h3{font-family:var(--disp),system-ui,sans-serif;font-weight:400;font-style:normal;letter-spacing:-.01em;line-height:.94;margin:0}
.g{color:#c8102e}
.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:#c8102e}
.kick::before{content:"";width:34px;height:2px;background:#c8102e}
.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:#c8102e;color:#ffffff}.btn-g:hover{background:#e8455f;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(10,10,13,.93);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:400;font-style:normal;font-size:22px;letter-spacing:-.01em;color:#fff;white-space:nowrap;}
.wm-sub{font-family:var(--body);font-weight:600;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#9b9aa3;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:#c8102e}
.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:400;font-size:26px;color:#fff;text-decoration:none}
.drawer a:hover{color:#c8102e}.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(10,10,13,.62),rgba(10,10,13,.4) 40%,rgba(10,10,13,.82)),radial-gradient(120% 90% at 50% 42%,rgba(10,10,13,.2),rgba(10,10,13,.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:400;font-style:normal;font-size:clamp(72px,12vw,168px);letter-spacing:-.03em;color:#fff;text-shadow:0 10px 44px rgba(0,0,0,.6)}
.hero-wm .a .g{color:#c8102e}
.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:#c8102e;margin-top:8px;padding-left:.4em}
.hero-pin{display:inline-flex;align-items:center;gap:8px;color:#e8455f;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:#c8102e}.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:#c8102e;color:#ffffff;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:400;font-style:normal;font-size:15px;white-space:nowrap}
.ticker span::after{content:"";width:5px;height:5px;border-radius:50%;background:#ffffff}
@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:#15151a}
.sec h2{font-size:clamp(40px,6vw,78px);color:#fff;margin-top:16px}
.sec .lede{color:#9b9aa3;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:#c8102e;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:#c8102e;color:#ffffff;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:#c8102e}
.ba-note{font-family:var(--body);font-size:12.5px;color:#9b9aa3;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:#9b9aa3}
}
.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(10,10,13,.92));font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.gcard figcaption b{color:#c8102e;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(200,16,46,.12)}
.mrow .mn{font-family:var(--disp);font-weight:400;font-style:normal;font-size:clamp(22px,2.6vw,30px);color:#c8102e}
.mrow>span{min-width:0}
.mrow .mt{display:block;font-family:var(--disp);font-weight:400;font-style:normal;font-size:clamp(24px,3.2vw,38px);color:#fff;line-height:1.02}
.mrow .md{display:block;font-family:var(--body);font-size:14.5px;line-height:1.6;color:#9b9aa3;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:#e8455f;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:#c8102e;color:#ffffff;border-color:#c8102e;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:#c8102e;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:#0a0a0d}
.callband::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 100% at 50% 120%,rgba(200,16,46,.32),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:400;font-style:normal;font-size:clamp(34px,5.4vw,58px);color:#fff;text-decoration:none}
.callband .num svg{width:.62em;height:.62em;color:#c8102e}.callband .num:hover{color:#c8102e}
.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:#060608;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:#9b9aa3;text-decoration:none;line-height:1.9;display:block}.foot a:hover{color:#c8102e}.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(10,10,13,.72),rgba(10,10,13,.86)),radial-gradient(80% 60% at 50% 40%,rgba(200,16,46,.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:#e8455f}
.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:#15151a;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:#c8102e;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:#15151a;color:#f4f2ee;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:#c8102e}.ci .l{font-family:var(--body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9b9aa3;display:block}.ci .v{font-family:var(--body);font-weight:600;color:#fff}
.reveal{opacity:0;transform:translateY(24px)}

/* ================= TEXAS PRIDE TERMITE & PEST CONTROL — carbon + Texas red =================
   [P8] No logo exists anywhere (their Wix site shipped a generic "MOWI" template placeholder,
   not a brand mark), so there is nothing to logo-match and the brief's dark-luxury base stands.
   ONE ownable accent: Texas-flag red #c8102e on carbon #0a0a0d, with bone/limestone #e8e3d9 as
   the second material so the palette is not merely red-on-black.
   CONTRAST DISCIPLINE:
     - red FILLS always carry WHITE ink   (#fff on #c8102e = 5.10:1  AA)
     - red as TEXT on the dark ground is only ever the LIGHT variant #e8455f
       (#e8455f on #0a0a0d = 5.68:1 AA; the base #c8102e would be 3.06:1 and is never used
        for body-size text on dark)
     - over the HERO PHOTO the accent lifts again to #ff8fa0 for large display type
   This is a DARK build, so engine bug 2 (light-palette white-on-white) does not bite; every
   section was screenshotted at 390 and 1440 regardless. */

/* ---- nav ---- */
.nav.scrolled{border-bottom:1px solid rgba(200,16,46,.20)}
.nav-links a{color:#cbc9d1}
.nav-links a:hover{color:#e8455f}
.brand .wm-name .g{color:#e8455f}
.brand .wm-sub{color:#8f8d97}

/* ---- HERO ---- */
.hero h1{color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.66)}
.hero .sub{color:#e9e6e0;text-shadow:0 2px 16px rgba(0,0,0,.82)}
.hero-pin{color:#ff8fa0;text-shadow:0 2px 12px rgba(0,0,0,.88)}
.hero-pin svg{color:#ff8fa0}
.hero .hero-trust span{color:#eae7e1}
.hero .hero-trust svg{color:#ff8fa0}
.hero .hero-trust b{color:#fff}
/* the H1 accent sits over a PHOTO -> lightest variant so large display type clears 3:1 */
.hero h1 .g{color:#ff8fa0;text-shadow:0 4px 26px rgba(0,0,0,.78)}
.phero h1 .g{color:#ff8fa0}
/* the typographic lockup IS the identity here (no logo art exists). It sits over a PHOTO, so
   the "TEXAS" half uses the LIGHT variant (base #c8102e measured only ~2.4:1 against the bright
   roof pixels) and carries a drop shadow so it holds over any hero slide. */
.hero-wm{letter-spacing:-.02em;text-shadow:0 6px 34px rgba(0,0,0,.72)}
.hero-wm .g{color:#ff5f75}
.hero-wm .b{color:#ff8fa0;text-shadow:0 2px 14px rgba(0,0,0,.92)}

/* ---- buttons: red fill + WHITE ink (5.10:1) ---- */
.btn-g{background:#c8102e;color:#fff}
.btn-g:hover{background:#e01b3c;color:#fff}
.btn-o{color:#fff;border-color:rgba(255,255,255,.36)}
.btn-o:hover{background:#fff;color:#0a0a0d;border-color:#fff}

/* ---- section furniture ---- */
.kick{color:#e8455f}
.kick::before{background:#c8102e}
.sec h2{color:#fff}
.sec h2 .g,.callband h2 .g,.mrow .mt .g{color:#e8455f}
.sec .lede{color:#a8a6b0}
.mrow .mt{color:#fff}
.mrow .md{color:#a8a6b0}
.mrow .mq{color:#e8455f}
.mrow:hover{background:rgba(200,16,46,.07)}
.mrow .mar{border-color:rgba(200,16,46,.38)}
.menu{border-top:1px solid rgba(200,16,46,.24)}
.mrow{border-bottom:1px solid rgba(255,255,255,.09)}
.mrow .mn{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;color:rgba(232,69,95,.62)}

/* ---- ticker: red band, white ink ---- */
.ticker{background:#c8102e;color:#fff}
.ticker span::after{background:rgba(255,255,255,.55)}

/* ---- phero ---- */
.phero h1{color:#fff}
.phero .ph-sub{color:#e2dfd9}
.phero .crumb,.phero .crumb a{color:#ff8fa0}

/* ---- towns / area ---- */
.towns span{color:#e2dfd9;border:1px solid rgba(200,16,46,.32);background:rgba(200,16,46,.06)}
.area .btn-o,.sec .btn-o{color:#ff8fa0;border-color:rgba(200,16,46,.48)}
.area .btn-o:hover,.sec .btn-o:hover{background:#c8102e;color:#fff;border-color:#c8102e}
.map iframe{filter:grayscale(.5) invert(.92) hue-rotate(175deg) brightness(.95)}

/* ---- included lists ---- */
.incl li{background:#15151a;border:1px solid rgba(200,16,46,.16);color:#dedbd5}
.incl li svg{color:#e8455f}
.dw-list li{color:#dedbd5}
.dw-list li svg{color:#e8455f}

/* ---- callband ---- */
.callband h2{color:#fff}
.callband .num{color:#fff}
.callband .num:hover{color:#ff8fa0}
.callband .num svg{color:#e8455f}
.callband .cs{color:rgba(255,255,255,.74)}

/* ---- forms ---- */
.cform input,.cform textarea{background:#15151a;border:1px solid rgba(200,16,46,.22);color:#f4f2ee}
.cform input:focus,.cform textarea:focus{outline:2px solid #e8455f;outline-offset:1px;border-color:#e8455f}
.cform input::placeholder,.cform textarea::placeholder{color:#8b8993}
.ci svg{color:#e8455f}
.ci .v{color:#fff}

/* ---- footer ---- */
.foot{border-top:1px solid rgba(200,16,46,.18)}
.foot h4{color:#fff}
.foot .ab strong{color:#fff}
.foot a:hover{color:#ff8fa0}

/* ---- 🚨 ENGINE BUG 6: .msticky has shipped with NO css, landed mid-page over a headline and
   covered the hero CTA at 390. Pinned to the bottom, above everything, safe-area inset, and the
   body gets bottom padding so it can never cover the last element. ---- */
.msticky{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;background:rgba(10,10,13,.97);
  border-top:1px solid rgba(200,16,46,.26);backdrop-filter:blur(10px);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.msticky .btn{flex:1;padding:14px;min-height:48px;justify-content:center}
@media(max-width:860px){body{padding-bottom:88px}}

/* ============ [P6] PROOF-FIRST cred band — engine ships NO css for any of this ============ */
.cred{background:#15151a}
.cred h2{color:#fff}
.cred h2 .g{color:#e8455f}
.cred .lede{color:#a8a6b0}
.cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(30px,4vw,44px);align-items:stretch}
@media(max-width:820px){.cred-grid{grid-template-columns:repeat(2,1fr)}}
.cred-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:6px;padding:26px 22px;padding-right:52px;height:100%;background:#0e0e12;
  border:1px solid rgba(200,16,46,.20);border-radius:10px;box-shadow:0 18px 40px -28px rgba(0,0,0,.9);
  transition:border-color .3s,transform .3s}
.cred-card:hover{border-color:rgba(200,16,46,.48);transform:translateY(-3px)}
/* 🚨 ENGINE BUG 7: .cred-ic shields have rendered ~300px tall (one page hit 16,430px).
   Explicit width AND height on the span AND the svg. */
.cred-ic{position:absolute;top:18px;right:18px;color:rgba(200,16,46,.30);width:22px;height:22px;display:block}
.cred-ic svg{width:22px;height:22px;display:block}
.cred-v{font-family:var(--disp);font-size:clamp(30px,4.4vw,50px);line-height:1;color:#e8455f;letter-spacing:-.02em;order:1}
.cred-l{font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.04em;color:#9b9aa3;order:2;margin-top:4px;max-width:22ch}
.cred .ba-note{color:#8b8993;margin-top:56px!important;line-height:1.65;max-width:96ch}

/* ============ [P9] PEST PICKER — engine ships NO css for .pp-* at all ============ */
.pp-head h2 .g{color:#e8455f}
.pp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:clamp(30px,4vw,44px)}
@media(max-width:860px){.pp-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.pp-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.pp-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:24px 12px;min-height:118px;background:#15151a;border:1px solid rgba(255,255,255,.10);
  border-radius:12px;cursor:pointer;color:#cfccd6;font-family:var(--body);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,background .25s,box-shadow .25s}
.pp-card:hover{transform:translateY(-4px);border-color:rgba(200,16,46,.52);background:#1b1b22}
.pp-card:focus-visible{outline:2px solid #e8455f;outline-offset:3px}
/* 🚨 ENGINE BUG 7 again — every icon needs an explicit width or the SVG grows unbounded */
.pp-card .pp-ic{width:40px;height:40px;display:grid;place-items:center;color:#b0aeb8;transition:color .25s,transform .25s}
.pp-card .pp-ic svg{width:40px;height:40px;display:block}
.pp-card .pp-nm{font-weight:700;font-size:13px;letter-spacing:.02em;text-align:center;line-height:1.25}
.pp-card:hover .pp-ic{color:#fff;transform:scale(1.06)}
.pp-card.active{background:#1d1319;border-color:#c8102e;box-shadow:0 18px 40px -18px rgba(200,16,46,.62),inset 0 0 0 1px rgba(200,16,46,.35)}
.pp-card.active .pp-ic{color:#e8455f;transform:scale(1.08)}
.pp-card.active .pp-nm{color:#fff}
.pp-panel{margin-top:16px;position:relative;background:#15151a;border:1px solid rgba(200,16,46,.24);
  border-radius:16px;padding:clamp(24px,4vw,44px);overflow:hidden}
.pp-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 120% at 100% 0,rgba(200,16,46,.13),transparent 60%)}
.pp-body{position:relative;animation:ppIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes ppIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pp-body{animation:none}}
.pp-kick{font-family:var(--body);font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#e8455f}
.pp-h{font-family:var(--disp);font-size:clamp(26px,4vw,42px);color:#fff;margin:12px 0 0;line-height:1.02}
.pp-h .g{color:#e8455f}
.pp-copy{font-family:var(--body);color:#a8a6b0;font-size:clamp(14.5px,1.7vw,16.5px);line-height:1.72;max-width:66ch;margin-top:16px}
.pp-list{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.pp-list{grid-template-columns:1fr}}
.pp-list li{display:flex;gap:11px;align-items:flex-start;font-family:var(--body);font-size:14.5px;color:#d6d3dd}
.pp-list li svg{width:19px;height:19px;flex:0 0 19px;color:#e8455f;margin-top:1px}
.pp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media(max-width:520px){.pp-cta{flex-direction:column}.pp-cta .btn{width:100%}}

/* ---- gallery captions on the photo ---- */
.gcard{position:relative;border:1px solid rgba(200,16,46,.18)}
.gcard figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:56px 16px 14px;color:#fff!important;
  background:linear-gradient(180deg,transparent,rgba(6,6,8,.66) 42%,rgba(6,6,8,.95));
  text-shadow:0 2px 10px rgba(0,0,0,.8)}
.gcard figcaption b{display:block;color:#ff8fa0!important;font-family:var(--body);font-weight:700;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
/* 🚨 ENGINE BUG 4: the inherited .gcard{width:min(82vw,440px)} overrides the desktop grid and
   pushes the last card past the right edge at 1440. Force the grid to own the width. */
@media(min-width:701px){.gcard{width:auto!important;max-width:none!important}}

.dw-img{border:1px solid rgba(200,16,46,.18)}

/* ---- TOUCH TARGETS — the engine ships a 26x29 burger, a 20x34 drawer close and 27px
   drawer links, all under the 44px minimum. Padded out without moving anything visually. ---- */
.burger{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:8px}
.drawer-x{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:6px}
.drawer a{min-height:44px;display:flex;align-items:center}
.foot-grid a{min-height:44px;display:flex;align-items:center}
.phero .crumb a{display:inline-flex;align-items:center;min-height:44px}
.nav-in .brand,.foot .brand{min-height:44px;display:inline-flex;align-items:center}
.ci{min-height:48px}
.pp-card{min-height:118px}
/* desktop nav links ship at 21px tall — under the 44px target. Padded to a 44px hit area
   without moving them visually (the flex row keeps them optically where they were). */
.nav-links a{display:inline-flex;align-items:center;min-height:44px}

/* ---- the mobile drawer must be opaque and light-on-dark (checked programmatically) ---- */
.drawer{background:#0a0a0d}
.drawer a{color:#f4f2ee}
.drawer a:hover{color:#e8455f}

/* ---- focus visibility ---- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #e8455f;outline-offset:2px;border-radius:2px}

/* ---- 🚨 ENGINE BUG 1: the .reveal pre-state transform can persist (GSAP batch not completing
   on some scroll paths), leaving elements 24px low and OVERLAPPING the 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}

@media(prefers-reduced-motion:reduce){.hero-bg img{animation:none;transform:none}}


/* === TEXAS PRIDE SIGNATURE === */
/* ⭐ [E] KEN-BURNS HERO — three Texas-home stills cross-fade on a 27s loop, each drifting
   slowly so the hero is never static. Slide 1 is fully opaque at 0% so there is no fade-up
   from black on load. Reduced motion freezes on slide 1 with no drift and no fade. */
.hero-kb{position:absolute;inset:0;z-index:0;overflow:hidden;background:#08080a}
.hero-kb .kb-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:transform,opacity;
  animation:kbFade 27s linear infinite, kbPan 27s ease-in-out infinite}
.hero-kb .kb-1{animation-delay:0s,0s;opacity:1}
.hero-kb .kb-2{animation-delay:9s,9s}
.hero-kb .kb-3{animation-delay:18s,18s}
@keyframes kbFade{0%{opacity:1}30%{opacity:1}37%{opacity:0}96%{opacity:0}100%{opacity:1}}
@keyframes kbPan{
  0%{transform:scale(1.06) translate3d(0,0,0)}
  37%{transform:scale(1.15) translate3d(-1.2%,-1.4%,0)}
  100%{transform:scale(1.15) translate3d(-1.2%,-1.4%,0)}}
@media(prefers-reduced-motion:reduce){
  .hero-kb .kb-slide{animation:none;opacity:0;transform:scale(1.04)}
  .hero-kb .kb-1{opacity:1}
}

/* ⭐ [C] "THE HOUSE THEY'RE EATING" — the pinned signature scroll moment.
   The .grain section is made TALL to give the sequence scroll distance, and the inner stage is
   sticky-pinned. Seven stages light in turn, descending the structure into the soil.
   Reduced motion lights everything at once and unpins the section. */
.grain{position:relative;height:auto;min-height:auto;overflow:visible;background:#08080a;padding:0}
.grain-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.grain-bg img{width:100%;height:100%;object-fit:cover;opacity:.15;filter:saturate(.65) brightness(.5)}
.grain::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#08080a 0%,rgba(8,8,10,.84) 18%,rgba(8,8,10,.84) 82%,#08080a 100%)}
.grain-in{position:sticky;top:0;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  max-width:1240px;margin:0 auto;padding:clamp(56px,8vh,88px) clamp(20px,5vw,48px)}
.grain{min-height:600vh}
@media(max-width:860px){.grain{min-height:680vh}}
.grain-in .gk{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#e8455f;display:inline-flex;align-items:center;gap:12px}
.grain-in .gk::before{content:"";width:34px;height:2px;background:#c8102e}
.grain-in h2{color:#fff;font-size:clamp(24px,3.6vw,44px);margin-top:12px;max-width:20ch;line-height:1.04}
.grain-in h2 .g{color:#e8455f}
/* the intro paragraph must NOT eat the pinned fold — it is capped and, at mobile, hidden
   once the sequence has started so the diagram + steps own the viewport. */
.grain-in>p{font-family:var(--body);color:#c6c3cd;font-size:clamp(13.5px,1.45vw,15.5px);line-height:1.62;max-width:60ch;margin-top:12px}
/* the stage: diagram left, stepped copy right */
.th-stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(20px,3.4vw,48px);align-items:start;margin-top:clamp(14px,2.4vh,28px)}
@media(max-width:900px){.th-stage{grid-template-columns:1fr;gap:14px}}
.th-art{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}
/* cap the diagram by HEIGHT as well as width so it can never overflow the pinned viewport */
.th-svg{width:100%;max-width:min(300px,26vh);max-height:44vh;height:auto;display:block;overflow:visible}
@media(max-width:900px){
  .th-svg{max-width:min(160px,20vh);max-height:26vh}
  /* below 900 the intro copy collapses once pinned — the stepped list is the payload */
  .grain.th-done .grain-in>p{display:none}
  .grain.th-done .grain-in h2{font-size:clamp(21px,5.6vw,28px)}
}
.th-svg .th-h{opacity:0;transition:opacity .7s ease}
.th-svg .th-w{stroke:rgba(232,69,95,.30);fill:none;transition:stroke .55s ease}
.th-svg .th-w.lit{stroke:#ff6b80}
.th-svg .th-tube{stroke:rgba(232,69,95,.22);transition:stroke .55s ease}
.th-svg .th-w.lit .th-tube{stroke:#ff8fa0}
.th-svg .th-treat{stroke:rgba(232,69,95,.22);transition:stroke .55s ease}
.th-svg .th-w.lit .th-treat{stroke:#ff8fa0}
.th-svg .th-w.lit .th-h{opacity:1}
.th-cue{font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#7d7b85;transition:opacity .4s}
.grain.th-done .th-cue{opacity:0}
/* stepped copy */
.th-steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(4px,1vh,10px)}
.th-step{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;opacity:.22;transform:translateY(4px);transition:opacity .5s ease,transform .5s ease}
.th-step.on{opacity:1;transform:none}
.th-n{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;font-size:11.5px;color:#e8455f;padding-top:3px;letter-spacing:.04em}
.th-t{display:block;font-family:var(--disp);font-size:clamp(13.5px,1.6vw,17.5px);color:#fff;line-height:1.15}
.th-c{display:block;font-family:var(--body);font-size:clamp(12px,1.2vw,13.5px);line-height:1.55;color:#a8a6b0;margin-top:3px;max-width:48ch}
/* on a short mobile viewport only the ACTIVE step keeps its description — the inactive ones
   collapse to their titles so all seven stages always fit above the sticky call bar. */
@media(max-width:900px){
  .th-c{font-size:12px;line-height:1.5}
  .th-step:not(.on) .th-c{display:none}
}
@media(max-width:900px) and (max-height:780px){
  .th-step.on ~ .th-step .th-c{display:none}
}
@media(prefers-reduced-motion:reduce){
  .grain{min-height:auto}
  .grain-in{position:static;min-height:auto}
  .th-step{opacity:1;transform:none}
  .th-svg .th-w{stroke:#ff6b80}
  .th-svg .th-h{opacity:1}
  .th-cue{display:none}
}

/* 🚨 ENGINE BUG 1 (re-asserted AFTER the engine's own css): a stuck .reveal transform leaves
   elements 24px low and overlapping the following copy. Visible => true position. */
.reveal[style*="opacity: 1"]{transform:none!important}