:root{--bg:#f8f5ee}
.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:#f8f5ee;--panel:#eee7d9;--ink:#17120f;--accent:#b41f24;--accentl:#96161c;--mut:#5c5147;--disp:'Bricolage Grotesque';--body:'Inter'}
*{box-sizing:border-box}
::selection{background:#b41f24;color:#ffffff}
html,body{overflow-x:clip}
body{background:#f8f5ee;color:#17120f;font-family:var(--body),system-ui,sans-serif;background-image:repeating-linear-gradient(45deg,rgba(23,18,15,.030) 0 1px,transparent 1px 6px),repeating-linear-gradient(135deg,rgba(23,18,15,.030) 0 1px,transparent 1px 6px)}
h1,h2,h3{font-family:var(--disp),system-ui,sans-serif;font-weight:800;font-style:normal;letter-spacing:-.01em;line-height:.94;margin:0}
.g{color:#b41f24}
.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:#b41f24}
.kick::before{content:"";width:34px;height:2px;background:#b41f24}
.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:#b41f24;color:#ffffff}.btn-g:hover{background:#96161c;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(248,245,238,.94);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;}
.wm-sub{font-family:var(--body);font-weight:600;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#5c5147;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:#b41f24}
.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;color:#fff;text-decoration:none}
.drawer a:hover{color:#b41f24}.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(248,245,238,.62),rgba(248,245,238,.4) 40%,rgba(248,245,238,.82)),radial-gradient(120% 90% at 50% 42%,rgba(248,245,238,.2),rgba(248,245,238,.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,9.2vw,128px);letter-spacing:-.03em;color:#fff;text-shadow:0 10px 44px rgba(0,0,0,.6)}
.hero-wm .a .g{color:#b41f24}
.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:#b41f24;margin-top:8px;padding-left:.4em}
.hero-pin{display:inline-flex;align-items:center;gap:8px;color:#96161c;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:#b41f24}.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:#b41f24;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:800;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:#eee7d9}
.sec h2{font-size:clamp(40px,6vw,78px);color:#fff;margin-top:16px}
.sec .lede{color:#5c5147;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:#b41f24;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:#b41f24;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:#b41f24}
.ba-note{font-family:var(--body);font-size:12.5px;color:#5c5147;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:#5c5147}
}
.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(248,245,238,.92));font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.gcard figcaption b{color:#b41f24;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(180,31,36,.10)}
.mrow .mn{font-family:var(--disp);font-weight:800;font-style:normal;font-size:clamp(22px,2.6vw,30px);color:#b41f24}
.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);color:#fff;line-height:1.02}
.mrow .md{display:block;font-family:var(--body);font-size:14.5px;line-height:1.6;color:#5c5147;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:#96161c;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:#b41f24;color:#ffffff;border-color:#b41f24;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:#b41f24;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:#f8f5ee}
.callband::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 100% at 50% 120%,rgba(180,31,36,.30),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:#b41f24}.callband .num:hover{color:#b41f24}
.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:#141110;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:#5c5147;text-decoration:none;line-height:1.9;display:block}.foot a:hover{color:#b41f24}.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(248,245,238,.72),rgba(248,245,238,.86)),radial-gradient(80% 60% at 50% 40%,rgba(180,31,36,.10),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:#96161c}
.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:#eee7d9;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:#b41f24;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:#eee7d9;color:#17120f;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:#b41f24}.ci .l{font-family:var(--body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5c5147;display:block}.ci .v{font-family:var(--body);font-weight:600;color:#fff}
.reveal{opacity:0;transform:translateY(24px)}

/* ==================== ABOVE AND BEYOND — cream paper + lumberjack red ====================
   [A8] LOGO-MATCH: the real mascot wears a RED plaid shirt and swings a RED axe, and their whole
   published icon set is red circles — so the single vivid accent is LUMBERJACK RED #b41f24 on the
   briefed cream #f8f5ee paper. PINE #2f5136 (from the mascot's conifers) is a hairline/eyebrow
   accent ONLY and is never a fill behind white text. */

/* ---- paper grain: warm cream must read as paper, never sterile white (§0.5) ---- */
body{background-color:#f8f5ee;
  background-image:
    radial-gradient(circle at 16% 10%, rgba(180,31,36,.045), transparent 46%),
    radial-gradient(circle at 86% 76%, rgba(47,81,54,.05), transparent 54%),
    repeating-linear-gradient(92deg, rgba(23,18,15,.020) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(4deg, rgba(23,18,15,.013) 0 1px, transparent 1px 9px);
  background-attachment:fixed,fixed,scroll,scroll}

/* ---- nav: TWO STATES. Transparent until .scrolled, so at the top of every page the nav sits
   directly on a DARK hero photograph — red ink is unreadable there. Unscrolled = light ink over
   the photo; scrolled = the cream panel paints in, so ink flips to near-black on paper. ---- */
.nav .wm-name{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.nav .wm-name .g{color:#ff8a72}
.nav .wm-sub{color:rgba(255,255,255,.84);text-shadow:0 2px 10px rgba(0,0,0,.72)}
.nav .nav-links a{color:#f2ece2;text-shadow:0 2px 10px rgba(0,0,0,.62)}
.nav .nav-links a:hover{color:#ff8a72}
.nav.scrolled{border-bottom:1px solid rgba(23,18,15,.10)}
.nav.scrolled .wm-name{color:#17120f;text-shadow:none}
.nav.scrolled .wm-name .g{color:#b41f24}
.nav.scrolled .wm-sub{color:#5c5147;text-shadow:none}
.nav.scrolled .nav-links a{color:#17120f;text-shadow:none}
.nav.scrolled .nav-links a:hover{color:#b41f24}
.burger{color:#fff}
.nav.scrolled .burger{color:#17120f}

/* ---- ⭐ REAL LOGO ON A WHITE CARD (house pattern for logoImg:true). The mascot art is a
   transparent PNG drawn for a white ground — dropped straight onto a dark hero photo the black
   linework disappears. It gets its own white plate everywhere it appears. ---- */
/* ⚠️ with logoImg:true the engine renders the hero mark as a bare .hero-logo (NOT inside a
   .hero-wm wrapper), so the hero rule must target .hero-logo or the mascot never gets its plate.
   NOTE: no backticks anywhere in this stylesheet — extraCss is a template literal. */
.nav .brand img,.foot .brand img{background:#fff;border-radius:8px;padding:5px 7px;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.42)}
.nav .brand img{max-height:42px;width:auto}
.foot .brand img{max-height:56px;width:auto}
.hero .hero-logo{background:#fff;padding:10px 14px;border-radius:14px;
  box-shadow:0 18px 54px -18px rgba(0,0,0,.6)}

/* ---- 🚨 BUG 2a: the engine ships .hero with NO scrim at all, and the hero here is a BRIGHT
   overcast-sky climbing shot under hardcoded #fff copy. The pseudo must be declared FULLY
   (content + position + inset + z-index) or it never paints. ---- */
.hero{position:relative;isolation:isolate}
/* weighted so the climber in the middle of the frame stays readable — a flat scrim killed him */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,11,9,.84) 0%,rgba(14,11,9,.50) 32%,rgba(14,11,9,.48) 52%,rgba(14,11,9,.82) 78%,rgba(14,11,9,.95) 100%)}
.hero-bg{z-index:0}
.hero-bg img{filter:brightness(.80) saturate(1.10) contrast(1.06)}
.hero .wrap,.hero .hero-in,.hero-wm,.hero .hero-cta,.hero .hero-trust,.hero .hero-pin,.hero h1,.hero .sub{position:relative;z-index:2}
.hero h1{color:#fff;text-shadow:0 4px 32px rgba(0,0,0,.66);letter-spacing:-.024em}
.hero .sub{color:#f1ece3;text-shadow:0 2px 16px rgba(0,0,0,.8)}
/* 🚨 the engine renders .hero-pin and .hero .g in pal.accent — #b41f24 on a dark photo is muddy
   and fails contrast. Both use the LIGHT red variant over dark grounds. */
.hero-pin{color:#ff8a72;text-shadow:0 2px 12px rgba(0,0,0,.84)}
.hero-pin svg{color:#ff8a72}
.hero .g{color:#ff8a72}
.hero .hero-trust span{color:#f2ece2}
.hero .hero-trust svg{color:#ff8a72}
.hero .hero-trust b{color:#fff}

/* ---- ⭐ ASYMMETRIC EDITORIAL HERO (§0.5 bans "everything-centered" as an AI tell).
   bespoke.js hard-centers .hero (align-items:center; text-align:center) and centers the CTA row
   and trust row on top of that. From 900px up the whole lockup is pulled LEFT into a measured
   column so the climber in the right two-thirds of the photograph is left visible and the
   composition reads as art-directed rather than a centered template. Mobile stays centered —
   at 390px a left column with a ragged right edge just looks broken. ---- */
@media(min-width:900px){
  .hero{align-items:flex-start;text-align:left;padding-left:clamp(28px,6vw,86px);padding-right:clamp(28px,6vw,86px)}
  .hero-in{max-width:min(62ch,58%);width:auto;margin:0}
  .hero-cta{justify-content:flex-start}
  .hero-trust{justify-content:flex-start}
  /* the mascot plate sits above the copy, flush left with it — not floating mid-frame */
  .hero .hero-logo{display:block;margin-left:0;margin-right:auto;width:clamp(190px,15vw,236px);height:auto;object-fit:contain}
  .hero h1{max-width:15ch}
  .hero .sub{max-width:56ch}
}
/* the engine's own centered rules for the logo need overriding at the same breakpoint */
.hero .hero-logo{margin-bottom:clamp(14px,2.6vh,26px)}

/* ---- 🚨 MOBILE: THE STICKY BAR WAS SITTING ON TOP OF THE HERO CTA.
   Measured at 390x844: the hero rendered 1185px tall, which pushed .hero-cta down to y=836-943
   — and .msticky is position:fixed at y=859-935. The two literally overlapped, clipping the
   primary "Get a free estimate" button on the single most important screen of the site (the
   operator closes on his phone). Fixed by pulling the hero back to the viewport at small widths:
   the mascot plate and the sub are trimmed and the vertical padding tightened, so the CTA lands
   comfortably above the sticky bar instead of underneath it. ---- */
@media(max-width:899px){
  .hero{min-height:auto;padding-top:96px;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  /* 🚨 size the mascot by WIDTH only. The engine sets .hero-logo{width:...;height:auto}; adding a
     max-height on top of that squashed the plate and visually cropped the beaver's head and
     raised thumb. Width + height:auto + contain keeps the whole mark intact. */
  .hero .hero-logo{width:min(212px,58vw);height:auto;object-fit:contain;margin-bottom:12px}
  .hero-pin{margin-bottom:12px;font-size:11px;letter-spacing:.14em}
  .hero h1{font-size:clamp(34px,9.2vw,46px);line-height:1.04}
  .hero .sub{font-size:15px;line-height:1.6;margin-top:12px}
  .hero-cta{margin-top:20px}
  .hero-trust{margin-top:20px;padding-top:16px;gap:8px 16px;font-size:11px}
}
/* the sticky bar overlays the page bottom — every page needs clearance under its last element
   so nothing is ever hidden behind it (the engine's 64px did not cover the 76px bar) */
@media(max-width:899px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
  .msticky{padding-bottom:env(safe-area-inset-bottom,0px)}
}

/* ---- buttons: red fill w/ white ink measures 6.9:1 (AA). Pine never sits behind white. ---- */
.btn-g{background:#b41f24;color:#fff}
.btn-g:hover{background:#96161c;color:#fff}
.phero .btn-o,.callband .btn-o,.msticky .btn-o,.hero .btn-o{color:#fff;border-color:rgba(255,255,255,.5)}
.phero .btn-o:hover,.callband .btn-o:hover,.msticky .btn-o:hover,.hero .btn-o:hover{background:#fff;color:#b41f24;border-color:#fff}

/* ---- 🚨 BUG 2b: THE DARK-THEME TEXT TRAP. bespoke.js's base sheet is authored for a DARK ground
   — h2/h3/.lede/.mt/li all ship #fff or near-white. On this cream base every one of them rendered
   white-on-white. Blanket light-ground ink for everything EXCEPT sections genuinely on a photo. */
.kick{color:#b41f24}
.kick::before{background:#2f5136}
h2{color:#17120f}
.lede{color:#544a40}
.sec h2,.sec h3,.sec h4{color:#17120f}
.sec h2 .g,.sec h3 .g{color:#b41f24}
.sec .lede,.sec p,.sec li,.sec figcaption{color:#544a40}
.sec .mt,.sec b,.sec strong{color:#17120f}
.sec figcaption b{color:#17120f}
/* restore inherited ink where the section really IS dark / over a photo */
.hero h2,.hero h3,.hero p,.hero span,
.grain h2,.grain h3,.grain p,.grain .lede,
.phero h1,.phero h2,.phero p,.phero .ph-sub,.phero .crumb,
.callband h2,.callband p,.callband .lede,
.ticker span,.ticker div,
.foot h4,.foot p,.foot a,.foot span,.foot strong{color:inherit}
.grain-in h2{color:#fff}.grain-in h2 .g{color:#ff8a72}.grain-in p{color:#f1ece3}

/* ---- 🚨 BUG 2c: .callband ships background:#f5f6f8 (a light base) with color:#fff — the whole
   closing CTA band was white-on-white. Give it the deep ground its white type was written for. */
.callband{background:#141110}
.callband::before{background:radial-gradient(70% 100% at 50% 120%,rgba(180,31,36,.60),transparent 62%)}
.callband h2{color:#fff}.callband h2 .g{color:#ff8a72}
.callband .lede,.callband p,.callband .cs{color:#e9e1d5}
.callband .num{color:#fff}.callband .num svg{color:#ff8a72}
.callband .kick{color:#ff8a72}.callband .kick::before{background:#b41f24}

/* ---- 🚨 BUG 2d: .phero's scrim derives from pal.veil, which is the CREAM base here — so it
   washed the photo LIGHT under hardcoded #fff h1/.ph-sub on all 9 inner pages. Force a deep scrim. */
.phero::after{background:linear-gradient(180deg,rgba(14,11,9,.84),rgba(14,11,9,.76) 40%,rgba(14,11,9,.93)),radial-gradient(80% 60% at 50% 40%,rgba(180,31,36,.30),transparent 76%)!important}
.phero-bg img{filter:brightness(.62) saturate(1.06)}
.phero h1{color:#fff}.phero h1 .g{color:#ff8a72}.phero .ph-sub{color:#f1ece3}
.phero .crumb,.phero .crumb a{color:#ff8a72}

/* ---- 🚨 BUG 2e: the .towns chips + the outline CTA inside .area inherit the engine's dark-ground
   cream ink; on the cream base they were near-invisible. Near-black ink on a white chip. ---- */
.towns span{color:#17120f;background:#fff;border:1px solid rgba(23,18,15,.12)}
.towns span:hover{border-color:#b41f24;color:#b41f24}
.area .btn-o,.sec .btn-o{color:#b41f24;border-color:rgba(180,31,36,.45)}
.area .btn-o:hover,.sec .btn-o:hover{background:#b41f24;color:#fff;border-color:#b41f24}
.sec .dw-list li{color:#3d352d}
.sec .incl li{background:#fff;border:1px solid rgba(23,18,15,.10);color:#3d352d}
.sec .incl li svg{color:#b41f24}
.ticker{background:#17120f;color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.ticker span::after{background:#ff8a72}
.sec-alt{background:#eee7d9}

/* ---- forms on the cream base ---- */
.cform input,.cform textarea{background:#fff;border:1px solid rgba(23,18,15,.16);color:#17120f}
.cform input::placeholder,.cform textarea::placeholder{color:#8a7d70}
.cform input:focus,.cform textarea:focus{outline:2px solid #b41f24;outline-offset:1px;border-color:#b41f24}
.ci .v{color:#17120f}.ci .l{color:#5c5147}.ci svg{color:#b41f24}
.map iframe{filter:none}

/* ---- mobile sticky bar + footer ---- */
.msticky{background:rgba(248,245,238,.97);border-top:1px solid rgba(23,18,15,.1)}
.msticky .btn-o{color:#b41f24;border-color:rgba(180,31,36,.45)}
.foot .ab{color:#d6ccbe}
.foot a,.foot p{color:#a89b8c}.foot a:hover{color:#ff8a72}
.foot h4{color:#fff}.foot .ab strong{color:#fff}
.foot-bot{color:#8a7e71}
.foot .wm-name{color:#fff}.foot .wm-name .g{color:#ff8a72}.foot .wm-sub{color:#a89b8c}

/* ============ PROOF-FIRST count-up band (credStrip) ============ */
.cred{background:#eee7d9}
.cred h2{color:#17120f}
.cred h2 .g{color:#b41f24}
.cred .lede{color:#544a40}
.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:#fff;border:1px solid rgba(23,18,15,.10);border-radius:12px;box-shadow:0 14px 34px -24px rgba(23,18,15,.42);transition:transform .3s,box-shadow .3s}
.cred-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px -24px rgba(23,18,15,.5)}
.cred-ic{position:absolute;top:18px;right:18px;color:rgba(180,31,36,.20)}.cred-ic svg{width:22px;height:22px}
.cred-v{font-family:var(--disp);font-weight:800;font-size:clamp(34px,4.8vw,52px);line-height:1;color:#b41f24;letter-spacing:-.03em;order:1}
.cred-l{font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.04em;color:#5c5147;order:2;margin-top:4px;max-width:22ch}
/* the inherited 56px top margin on the note left a dead band between the stat cards and the
   next section on desktop — 28px closes it without crowding the cards */
.cred .ba-note{color:#5c5147;margin-top:28px!important;line-height:1.65;max-width:96ch}

/* ============ ⭐ SIGNATURE SCROLL MOMENT — full-bleed GROWTH-RINGS break ============
   Their own macro photograph of a fresh-cut trunk face, parallaxed under the tenure line. The
   rings ARE the claim: twenty years of work against a hundred years of tree. */
.grain{position:relative;height:min(88vh,700px);overflow:hidden;background:#141110}
.grain-bg{position:absolute;inset:-14% 0;z-index:0}
.grain-bg img{width:100%;height:100%;object-fit:cover;object-position:center 50%;will-change:transform;opacity:.5}
.grain::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(12,9,8,.95),rgba(12,9,8,.60) 52%,rgba(12,9,8,.90)),radial-gradient(90% 90% at 22% 50%,rgba(180,31,36,.42),transparent 72%)}
.grain-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.grain-in .gk{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#ff8a72;display:inline-flex;align-items:center;gap:12px}
.grain-in .gk::before{content:"";width:34px;height:2px;background:#b41f24}
.grain-in h2{color:#fff;font-size:clamp(32px,5.8vw,66px);margin-top:16px;max-width:19ch;text-shadow:0 6px 40px rgba(0,0,0,.55);letter-spacing:-.026em}
.grain-in h2 .g{color:#ff8a72}
.grain-in p{font-family:var(--body);color:#f1ece3;font-size:clamp(15px,1.7vw,17.5px);line-height:1.74;max-width:64ch;margin-top:18px;text-shadow:0 2px 14px rgba(0,0,0,.6)}
@media(max-width:600px){.grain{height:auto;min-height:min(84vh,620px)}.grain-in{padding-top:64px;padding-bottom:64px}}

/* ---- OVERSIZED NUMBERED SERVICE BLOCKS (§0.5 required signature move) ---- */
.menu{border-top:1px solid rgba(23,18,15,.14)}
.mrow{border-bottom:1px solid rgba(23,18,15,.14);position:relative;overflow:hidden}
.mrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:#b41f24;transition:width .32s cubic-bezier(.2,.8,.2,1)}
.mrow:hover::before{width:3px}
.mrow:hover{background:rgba(180,31,36,.05)}
.mrow .mn{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;
  font-size:clamp(20px,2.5vw,30px);color:rgba(180,31,36,.34);letter-spacing:-.02em;transition:color .3s}
.mrow:hover .mn{color:#b41f24}
.mrow .mt{color:#17120f;letter-spacing:-.022em}
.mrow:hover .mt{color:#b41f24}
.mrow .md{color:#544a40}
.mrow .mq{color:#b41f24;font-weight:700}
.mrow .mar{border:1px solid rgba(23,18,15,.22);color:#17120f}
.mrow:hover .mar{background:#b41f24;color:#fff;border-color:#b41f24}

/* ---- gallery: captions sit ON bright daylight photos, so each needs its own gradient plate ---- */
.gcard{position:relative;border:1px solid rgba(23,18,15,.10)}
/* 🚨 BUG 4: the inherited upfix base sets .gcard{width:min(82vw,440px)} which overrides the
   3-col desktop grid and pushes the last card past the right edge at 1440. Reset it on desktop;
   the engine's own mobile carousel rule re-establishes the flex width under 700px. */
@media(min-width:701px){.gcard{width:auto;flex:initial}}
.gcard figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:56px 18px 16px 18px;color:#fff!important;
  background:linear-gradient(180deg,transparent,rgba(10,8,7,.62) 42%,rgba(10,8,7,.94));
  text-shadow:0 2px 10px rgba(0,0,0,.72)}
.gcard figcaption b{display:block;color:#ff8a72!important;font-family:var(--body);font-weight:700;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;
  text-shadow:0 2px 10px rgba(0,0,0,.85)}
.gswipe{color:#5c5147}

/* ---- reviews on the cream base ----
   🚨🚨 ENGINE BUG (found by screenshot, not by any gate): reviewsSec() emits .rev-grid /
   .rev-card / .rev-stars / .rev-who but bespoke.js ships NO CSS FOR ANY OF THEM. The star SVGs
   therefore inherited the section's default sizing and rendered as FIVE FULL-PAGE-WIDTH red
   stars stacked down the page, pushing the actual quotes off screen. Every one of these rules
   is load-bearing — the .rev-stars svg sizing above all. */
.rev{background:#eee7d9}
/* 🚨 BUG 2 (5th place): .rev h2 ships dark-ground ink -> invisible on cream. */
.rev h2{color:#17120f}.rev h2 .g{color:#b41f24}
.rev .kick{color:#b41f24}.rev .kick::before{background:#2f5136}
.rev .lede{color:#544a40}
.rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:clamp(28px,4vw,42px);align-items:stretch}
@media(max-width:820px){.rev-grid{grid-template-columns:1fr}}
.rev-card{display:flex;flex-direction:column;gap:14px;margin:0;padding:28px 26px;height:100%;
  background:#fff;border:1px solid rgba(23,18,15,.10);border-radius:12px;
  box-shadow:0 14px 34px -26px rgba(23,18,15,.42);transition:transform .3s,box-shadow .3s}
.rev-card:hover{transform:translateY(-3px);box-shadow:0 22px 46px -26px rgba(23,18,15,.5)}
/* THE FIX: constrain the star glyphs to a text-sized inline row */
.rev-stars{display:flex;align-items:center;gap:3px;line-height:0}
.rev-stars svg{width:17px;height:17px;flex:0 0 17px;color:#b41f24;fill:currentColor}
.rev-card p{margin:0;color:#3d352d;font-family:var(--body);font-size:clamp(14.5px,1.6vw,16px);line-height:1.72}
.rev-who{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:6px}
.rev-who .rn{color:#17120f;font-family:var(--body);font-weight:700;font-size:14px}
.rev-who .rs{color:#6b6055;font-family:var(--body);font-weight:600;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase}
.rev .ba-note{color:#5c5147}

/* ---- how-it-works image + map ---- */
.dw-img{border:1px solid rgba(23,18,15,.10)}
.map{border:1px solid rgba(23,18,15,.12)}

/* ---- TOUCH TARGETS: the engine ships a 26x29 burger, a 20x34 drawer close and 27px-tall
   drawer + footer links — all under the 44px minimum. Padded out without moving anything
   visually (icon size unchanged, hit area grows). ---- */
.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}
.towns span{min-height:38px;display:inline-flex;align-items:center}
.nav-links a{display:inline-flex;align-items:center;min-height:44px}

/* ---- focus visibility (a11y) ---- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid #b41f24;outline-offset:2px;border-radius:3px}

/* ---- 🚨 BUG 1: 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}

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


/* ---- 2026-10-07 · DESKTOP PASS -------------------------------------------
   Desktop read as broken for three MEASURED reasons, every one of them a
   desktop-only symptom of rules that are correct on a phone:
     1. .sec padding tops out at 128px top AND bottom, so a nine-section
        homepage carried roughly 2,300px of empty band and ran to 11,266px.
     2. .sec .lede is capped at 52ch. On a 1440px screen that put the copy in
        a narrow left strip with the right half of the viewport empty, which
        is the thing that actually looks broken.
     3. h2 is clamp(40px,6vw,78px). At 78px inside a ~540px grid column the
        headings orphaned: "Walk it, quote / it, / do it."
   Everything here is inside min-width:1024px, so the phone layout cannot be
   affected by it. Appended rather than edited in place for the same reason.
   -------------------------------------------------------------------------- */
@media(min-width:1024px){
  .sec{padding:84px 0}
  .callband{padding:92px 0}
  .sec .lede,.grain-in p,.ba-note{max-width:62ch}
  .sec h2{font-size:clamp(40px,5.2vw,70px)}
  /* balance stops the one-word orphan line; pretty stops widows in body copy */
  h1,h2,h3{text-wrap:balance}
  .lede,.grain-in p,.sec p{text-wrap:pretty}
}