/*
Theme Name: Semper Fi Landscape Solutions
Theme URI: https://semperfitx.com
Author: WH&A
Description: Bespoke, fast, local-SEO-focused theme for Semper Fi Landscape Solutions. Built from the approved Claude Design prototype. Mobile-first, near-zero JS, self-hosted fonts.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: Proprietary
Text Domain: semper-fi
*/

/* ============================================================
   1. FONTS (self-hosted — no runtime Google Fonts request)
   ============================================================ */
@font-face{font-family:'Barlow';src:url('assets/fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('assets/fonts/barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('assets/fonts/barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('assets/fonts/barlow-condensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('assets/fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ============================================================
   2. TOKENS
   ============================================================ */
:root{
  --ink:#141B13;
  --ink-2:#3A422F;
  --ink-3:#4A523F;
  --cream:#F7F4EE;
  --cream-2:#ECE8DE;
  --cream-3:#E2DCCE;
  --slate:#1B2F36;
  --brick:#8E2A23;
  --brick-dk:#6E211B;
  --moss:#46542A;
  --moss-dk:#38431F;
  --moss-lt:#4E5D30;
  --tan:#7B5230;
  --tan-lt:#C8A276;

  --font-body:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-head:'Barlow Condensed','Barlow',-apple-system,BlinkMacSystemFont,sans-serif;

  --wrap:1240px;
  --wrap-narrow:1160px;
  --wrap-text:760px;

  --pad-x:20px;
  --sec-y:64px;

  --r-sm:12px;
  --r-md:16px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  --shadow-card:0 10px 30px rgba(20,27,19,0.06);
  --shadow-lift:0 16px 40px rgba(20,27,19,0.14);
  --shadow-glass:inset 0 1px 0 rgba(255,255,255,0.45),inset 0 -1px 0 rgba(255,255,255,0.08),0 8px 24px rgba(10,14,8,0.25);

  --ease:cubic-bezier(.4,0,.2,1);
}
@media(min-width:768px){:root{--pad-x:40px;--sec-y:88px;}}
@media(min-width:1100px){:root{--pad-x:56px;--sec-y:96px;}}

/* ============================================================
   3. RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}
img,svg,video{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;text-transform:uppercase;line-height:1.05;margin:0 0 .5em;color:var(--ink);text-wrap:balance;}
h1{font-size:clamp(34px,7.2vw,56px);}
h2{font-size:clamp(28px,5.4vw,52px);}
h3{font-size:clamp(21px,3vw,28px);font-weight:600;}
h4{font-size:clamp(18px,2.4vw,21px);font-weight:600;}
p{margin:0 0 1.15em;text-wrap:pretty;}
a{color:var(--brick);text-decoration-thickness:1px;text-underline-offset:2px;}
a:hover{color:var(--brick-dk);}
ul,ol{padding-left:1.3em;margin:0 0 1.15em;}
li{margin-bottom:.45em;}
strong,b{font-weight:600;}
:focus-visible{outline:3px solid var(--brick);outline-offset:3px;border-radius:4px;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--brick);color:#fff;padding:12px 20px;font-weight:600;border-radius:0 0 var(--r-sm) 0;}
.skip-link:focus{left:0;color:#fff;}

/* ============================================================
   4. LAYOUT
   ============================================================ */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x);width:100%;}
.wrap--narrow{max-width:var(--wrap-narrow);}
.wrap--text{max-width:calc(var(--wrap-text) + var(--pad-x)*2);}
.sec{padding-block:var(--sec-y);}
.sec--cream{background:var(--cream);}
.sec--cream2{background:var(--cream-2);}
.sec--slate{background:var(--slate);color:var(--cream);}
.sec--ink{background:var(--ink);color:var(--cream);}
.sec--slate h2,.sec--slate h3,.sec--ink h2,.sec--ink h3{color:var(--cream);}
.sec--tight{padding-block:calc(var(--sec-y) * .6);}

/* ============================================================
   5. TYPE HELPERS
   ============================================================ */
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:var(--r-pill);
  background:rgba(70,84,42,.1);border:1px solid rgba(70,84,42,.25);color:var(--moss);
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-body);}
.eyebrow::before{content:"✦";font-size:11px;}
.sec--slate .eyebrow,.sec--ink .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:var(--cream);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.accent-brick{color:var(--brick);}
.accent-moss{color:var(--moss);}
.accent-tan{color:var(--tan);}
.accent-tanlt{color:var(--tan-lt);}
.lede{font-size:clamp(17px,2.2vw,19px);line-height:1.6;color:var(--ink-2);}
.sec--slate .lede,.sec--ink .lede{color:rgba(247,244,238,.78);}
.sec-head{margin-bottom:40px;}
.sec-head--center{text-align:center;max-width:760px;margin-inline:auto;}
.sec-head--center .lede{margin-inline:auto;max-width:560px;}
.sec-head h2{margin-top:14px;}
.sec-head--split{display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
@media(min-width:900px){.sec-head--split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:32px;}
  .sec-head--split>div:first-child{max-width:760px;}
  .sec-head--split .btn{flex-shrink:0;}}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:var(--r-pill);font-family:var(--font-body);font-weight:600;font-size:16px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:all .18s var(--ease);
  min-height:48px;text-align:center;line-height:1.2;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn .ico{flex-shrink:0;width:18px;height:18px;}

.btn--brick{background:var(--brick);color:var(--cream);border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 26px rgba(142,42,35,.28);}
.btn--brick:hover{background:var(--brick-dk);color:var(--cream);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 32px rgba(142,42,35,.38);}

.btn--glass{background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,.35);box-shadow:var(--shadow-glass);color:var(--cream);}
.btn--glass:hover{background:rgba(255,255,255,.26);color:var(--cream);}

.btn--glass-brick{background:rgba(142,42,35,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,.35);color:var(--cream);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 32px rgba(10,14,8,.35);}
.btn--glass-brick:hover{background:var(--brick);color:var(--cream);}

.btn--light{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-color:rgba(20,27,19,.18);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 20px rgba(20,27,19,.08);}
.btn--light:hover{background:rgba(255,255,255,.9);color:var(--ink);}

.btn--moss{background:rgba(70,84,42,.1);border-color:rgba(20,27,19,.2);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 20px rgba(20,27,19,.1);}
.btn--moss:hover{background:rgba(70,84,42,.2);color:var(--ink);}

.btn--solid-moss{background:var(--moss);color:var(--cream);box-shadow:0 10px 26px rgba(70,84,42,.3);}
.btn--solid-moss:hover{background:var(--moss-dk);color:var(--cream);}

.btn--block{width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;}

/* ============================================================
   7. HEADER / NAV
   ============================================================ */
.site-header{position:relative;z-index:60;}
.site-header--overlay{position:absolute;top:0;left:0;right:0;}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px;}
.nav__logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none;}
.nav__logo img{height:52px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}
@media(min-width:1100px){.nav__logo img{height:64px;}}
.site-header--light .nav__logo img{filter:none;}

.nav__menu{display:none;}
@media(min-width:1100px){
  .nav__menu{display:flex;align-items:center;gap:28px;}
  .nav__menu a{color:rgba(247,244,238,.85);text-decoration:none;font-weight:500;font-size:15px;white-space:nowrap;transition:color .15s;}
  .nav__menu a:hover,.nav__menu a[aria-current="page"]{color:var(--cream);}
  .site-header--light .nav__menu a{color:var(--ink-2);}
  .site-header--light .nav__menu a:hover,.site-header--light .nav__menu a[aria-current="page"]{color:var(--brick);}
  .nav__item{position:relative;}
  .nav__item--has-children>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7;}
  .nav__sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
    min-width:270px;padding:10px;margin-top:10px;border-radius:var(--r-md);
    background:rgba(247,244,238,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border:1px solid rgba(20,27,19,.1);box-shadow:0 20px 50px rgba(20,27,19,.22);
    opacity:0;visibility:hidden;transition:all .18s var(--ease);list-style:none;}
  .nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
  .nav__sub::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px;}
  .nav__sub li{margin:0;}
  .nav__sub a,.site-header--light .nav__sub a{display:block;padding:10px 14px;border-radius:9px;
    color:var(--ink-2)!important;font-size:15px;font-weight:500;}
  .nav__sub a:hover{background:rgba(70,84,42,.1);color:var(--brick)!important;}
}
.nav__phone{display:none;}
@media(min-width:900px){
  .nav__phone{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:var(--r-pill);
    background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.35);box-shadow:var(--shadow-glass);
    color:var(--cream);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:background .18s;}
  .nav__phone:hover{background:rgba(255,255,255,.26);color:var(--cream);}
  .nav__phone .ico-circle{display:inline-flex;width:26px;height:26px;border-radius:50%;
    background:rgba(255,255,255,.2);align-items:center;justify-content:center;flex-shrink:0;}
  .nav__phone .ico-circle svg{width:13px;height:13px;}
  .site-header--light .nav__phone{background:var(--brick);border-color:transparent;box-shadow:0 8px 20px rgba(142,42,35,.25);}
  .site-header--light .nav__phone:hover{background:var(--brick-dk);}
}
.nav__toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:48px;height:48px;
  padding:12px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.32);border-radius:12px;cursor:pointer;}
.site-header--light .nav__toggle{background:rgba(20,27,19,.06);border-color:rgba(20,27,19,.16);}
.nav__toggle span{display:block;height:2px;background:var(--cream);border-radius:2px;transition:transform .2s var(--ease),opacity .2s;}
.site-header--light .nav__toggle span{background:var(--ink);}
@media(min-width:1100px){.nav__toggle{display:none;}}
body.nav-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .nav__toggle span:nth-child(2){opacity:0;}
body.nav-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile drawer */
.nav__drawer{position:fixed;inset:0;z-index:200;background:var(--slate);
  padding:88px var(--pad-x) 40px;overflow-y:auto;
  transform:translateX(100%);transition:transform .3s var(--ease);visibility:hidden;}
body.nav-open .nav__drawer{transform:translateX(0);visibility:visible;}
body.nav-open{overflow:hidden;}
.nav__drawer-close{position:absolute;top:20px;right:var(--pad-x);width:48px;height:48px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:12px;
  color:var(--cream);font-size:26px;line-height:1;cursor:pointer;}
.nav__drawer ul{list-style:none;padding:0;margin:0;}
.nav__drawer>ul>li{border-bottom:1px solid rgba(255,255,255,.12);}
.nav__drawer>ul>li>a{display:block;padding:16px 0;color:var(--cream);font-family:var(--font-head);
  font-size:24px;font-weight:600;text-transform:uppercase;text-decoration:none;}
.nav__drawer .nav__sub{padding:0 0 14px 0;}
.nav__drawer .nav__sub a{display:block;padding:9px 0 9px 14px;color:rgba(247,244,238,.72);
  font-size:16px;text-decoration:none;border-left:2px solid rgba(255,255,255,.18);}
.nav__drawer .nav__sub a:hover{color:var(--cream);border-left-color:var(--brick);}
.nav__drawer-cta{margin-top:32px;display:flex;flex-direction:column;gap:12px;}
@media(min-width:1100px){.nav__drawer{display:none;}}

/* ============================================================
   8. HERO
   ============================================================ */
.hero{position:relative;display:flex;flex-direction:column;background:var(--slate);overflow:hidden;}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,22,13,.74) 0%,rgba(15,22,13,.42) 42%,rgba(15,22,13,.72) 100%);}
.hero__body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;flex:1;
  padding-block:120px 44px;}
.hero__inner{max-width:880px;}
.hero__badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25);color:var(--cream);font-size:12px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;margin-bottom:20px;}
.hero__badge .dot{width:8px;height:8px;border-radius:50%;background:var(--brick);flex-shrink:0;}
.hero h1{color:var(--cream);margin-bottom:16px;}
.hero__sub{max-width:580px;font-size:clamp(16px,2.3vw,18px);line-height:1.55;color:rgba(247,244,238,.92);margin-bottom:28px;}
.hero .btn-row{margin-bottom:8px;}

/* Home hero sizing */
.hero--home{min-height:620px;}
.hero--home h1{font-size:clamp(38px,8.5vw,80px);line-height:.99;}
@media(min-width:768px){.hero--home{min-height:700px;}}
@media(min-width:1100px){.hero--home{min-height:760px;}}

/* Interior hero */
.hero--interior{min-height:auto;}
.hero--interior .hero__body{padding-block:110px 40px;}
@media(min-width:768px){.hero--interior .hero__body{padding-block:150px 56px;}}
.hero--interior h1{font-size:clamp(32px,6vw,58px);}

/* Hero stat cluster */
.hero__stats{display:none;}
@media(min-width:900px){
  .hero__stats{display:flex;justify-content:flex-end;margin-top:24px;}
  .hero__stats-inner{display:flex;gap:12px;padding:14px 20px;border-radius:18px;
    background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.22);color:var(--cream);}
  .hero__stat{display:flex;flex-direction:column;gap:2px;padding-right:16px;}
  .hero__stat + .hero__stat{padding-right:0;padding-left:16px;border-left:1px solid rgba(255,255,255,.22);}
  .hero__stat b{font-family:var(--font-head);font-size:24px;font-weight:700;text-transform:uppercase;line-height:1;}
  .hero__stat span{font-size:12px;color:rgba(247,244,238,.8);}
}

/* ============================================================
   9. TRUST STRIP
   ============================================================ */
.trust{background:var(--ink);color:var(--cream);padding-block:18px;}
.trust__inner{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;text-align:center;}
.trust__item{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;
  color:rgba(247,244,238,.85);line-height:1.3;}
.trust__item svg{width:17px;height:17px;flex-shrink:0;color:var(--tan-lt);}
@media(min-width:768px){.trust__inner{gap:12px 36px;}.trust__item{font-size:15px;}}

/* ============================================================
   10. CARDS
   ============================================================ */
.grid{display:grid;gap:18px;}
.grid--2{grid-template-columns:1fr;}
.grid--3{grid-template-columns:1fr;}
.grid--4{grid-template-columns:1fr;}
@media(min-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:900px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}}

.card{display:flex;flex-direction:column;background:var(--cream);border-radius:var(--r-lg);
  padding:14px;border:1px solid rgba(20,27,19,.08);box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);height:100%;}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.sec--cream2 .card{background:var(--cream);}
.card__media{border-radius:var(--r-sm);overflow:hidden;margin-bottom:16px;aspect-ratio:16/10;background:var(--cream-3);}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease);}
.card:hover .card__media img{transform:scale(1.04);}
.card__body{padding:0 6px 10px;display:flex;flex-direction:column;gap:8px;flex:1;}
.card__body h3{margin:0;font-size:24px;}
.card__body h3 a{color:var(--ink);text-decoration:none;}
.card__body h3 a:hover{color:var(--brick);}
.card__body p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-3);flex:1;}
.card__link{display:inline-flex;align-items:center;gap:7px;margin-top:6px;color:var(--brick);
  font-weight:600;font-size:14px;text-decoration:none;}
.card__link:hover{color:var(--brick-dk);gap:11px;}
.card__link span{transition:transform .18s var(--ease);}

/* Icon card (no photo) */
.card--icon{padding:26px 24px;}
.card--icon .card__icon{width:46px;height:46px;border-radius:13px;background:rgba(70,84,42,.12);
  border:1px solid rgba(70,84,42,.28);color:var(--moss);display:flex;align-items:center;
  justify-content:center;margin-bottom:14px;flex-shrink:0;}
.card--icon .card__icon svg{width:23px;height:23px;}
.card--icon .card__body{padding:0;}

/* Area card */
.card--area{padding:0;overflow:hidden;}
.card--area .card__media{border-radius:0;margin-bottom:0;aspect-ratio:3/2;}
.card--area .card__body{padding:20px 22px 22px;}

/* ============================================================
   11. PROCESS STEPS
   ============================================================ */
.steps{display:grid;gap:18px;grid-template-columns:1fr;}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr);}}
.step{display:flex;flex-direction:column;gap:12px;padding:30px 26px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);}
.step__num{font-family:var(--font-head);font-weight:700;font-size:42px;color:var(--brick);line-height:1;}
.step h3{margin:0;color:var(--cream);font-size:26px;}
.step p{margin:0;font-size:15px;line-height:1.6;color:rgba(247,244,238,.76);}
/* light variant */
.steps--light .step{background:var(--cream);border-color:rgba(20,27,19,.08);box-shadow:var(--shadow-card);
  -webkit-backdrop-filter:none;backdrop-filter:none;}
.steps--light .step h3{color:var(--ink);}
.steps--light .step p{color:var(--ink-3);}

/* ============================================================
   12. FEATURE LIST (Why choose us)
   ============================================================ */
.split{display:grid;gap:36px;grid-template-columns:1fr;align-items:center;}
@media(min-width:1000px){.split{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;}
  .split--reverse>*:first-child{order:2;}}
.split__media{position:relative;min-width:0;}
.split__media img{width:100%;border-radius:24px;aspect-ratio:4/5;object-fit:cover;}
.split__media--wide img{aspect-ratio:4/3;}
.split__float{display:none;}
@media(min-width:1000px){
  .split__float{display:flex;position:absolute;right:-16px;bottom:32px;align-items:center;gap:14px;
    padding:16px 22px;border-radius:var(--r-md);background:rgba(247,244,238,.82);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border:1px solid rgba(20,27,19,.12);box-shadow:var(--shadow-lift);text-decoration:none;}
  .split__float-ico{display:inline-flex;width:44px;height:44px;border-radius:50%;background:var(--moss);
    color:var(--cream);align-items:center;justify-content:center;flex-shrink:0;}
  .split__float-ico svg{width:19px;height:19px;}
  .split__float small{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--tan);margin-bottom:1px;}
  .split__float b{font-family:var(--font-head);font-weight:700;font-size:25px;color:var(--ink);}
}
.feature-list{display:flex;flex-direction:column;gap:17px;list-style:none;padding:0;margin:0;}
.feature-list li{display:flex;gap:15px;align-items:flex-start;margin:0;}
.feature-list .tick{flex-shrink:0;display:inline-flex;width:33px;height:33px;border-radius:10px;
  background:rgba(70,84,42,.12);border:1px solid rgba(70,84,42,.3);color:var(--moss);
  align-items:center;justify-content:center;}
.feature-list .tick svg{width:16px;height:16px;}
.feature-list b{display:block;font-weight:600;font-size:17px;color:var(--ink);margin-bottom:2px;}
.feature-list span{font-size:15px;line-height:1.55;color:var(--ink-3);}
.sec--slate .feature-list b,.sec--ink .feature-list b{color:var(--cream);}
.sec--slate .feature-list span,.sec--ink .feature-list span{color:rgba(247,244,238,.75);}
.sec--slate .feature-list .tick,.sec--ink .feature-list .tick{background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.25);color:var(--tan-lt);}

/* ============================================================
   13. GALLERY
   ============================================================ */
.gallery{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;}
@media(min-width:700px){.gallery{grid-template-columns:repeat(3,1fr);grid-auto-rows:180px;gap:16px;}}
@media(min-width:1000px){.gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;}}
.gallery figure{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--cream-3);}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.gallery figure:hover img{transform:scale(1.05);}
.gallery .tall{grid-row:span 2;}

/* ============================================================
   14. CTA BANNER
   ============================================================ */
.cta-banner{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--moss);isolation:isolate;}
.cta-banner::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(247,244,238,.04) 0,rgba(247,244,238,.04) 2px,transparent 2px,transparent 26px),
  linear-gradient(90deg,var(--moss-dk) 0%,var(--moss) 60%,var(--moss-lt) 100%);}
.cta-banner__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
  padding:44px 26px;}
@media(min-width:768px){.cta-banner__inner{padding:60px 40px;}}
.cta-banner h2{margin:0 0 10px;color:var(--cream);font-size:clamp(28px,4.6vw,46px);}
.cta-banner p{margin:0;font-size:17px;line-height:1.55;color:rgba(247,244,238,.86);}
.cta-banner__text{max-width:520px;}
.cta-banner .btn-row{flex-shrink:0;}

/* ============================================================
   15. TESTIMONIALS
   ============================================================ */
.quote-card{display:flex;flex-direction:column;gap:14px;padding:30px 26px;border-radius:var(--r-lg);
  background:var(--cream);border:1px solid rgba(20,27,19,.08);box-shadow:var(--shadow-card);height:100%;}
.quote-card__mark{font-family:var(--font-head);font-size:50px;line-height:.6;color:var(--brick);}
.quote-card p{margin:0;flex:1;font-size:16px;line-height:1.65;color:var(--ink-2);}
.quote-card__who{display:flex;align-items:center;gap:12px;}
.quote-card__who b{display:block;font-weight:600;font-size:15px;color:var(--ink);}
.quote-card__who span{font-size:13px;color:var(--tan);}
.quote-card__av{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:var(--moss);
  color:var(--cream);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:700;font-size:18px;}

/* ============================================================
   16. FAQ
   ============================================================ */
.faq{max-width:860px;margin-inline:auto;}
.faq__item{border:1px solid rgba(20,27,19,.12);border-radius:var(--r-md);background:var(--cream);
  margin-bottom:12px;overflow:hidden;transition:box-shadow .2s;}
.faq__item[open]{box-shadow:var(--shadow-card);border-color:rgba(70,84,42,.32);}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;cursor:pointer;font-weight:600;font-size:17px;color:var(--ink);
  list-style:none;line-height:1.4;}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary:hover{color:var(--brick);}
.faq__item summary::after{content:"";flex-shrink:0;width:11px;height:11px;
  border-right:2px solid var(--moss);border-bottom:2px solid var(--moss);
  transform:rotate(45deg) translateY(-3px);transition:transform .22s var(--ease);}
.faq__item[open] summary::after{transform:rotate(-135deg) translateY(-3px);}
.faq__answer{padding:0 22px 20px;color:var(--ink-2);font-size:16px;line-height:1.65;}
.faq__answer>*:last-child{margin-bottom:0;}
.sec--cream2 .faq__item{background:var(--cream);}

/* ============================================================
   17. BREADCRUMBS
   ============================================================ */
.crumbs{font-size:13px;color:rgba(247,244,238,.72);margin-bottom:16px;}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;}
.crumbs li{margin:0;display:inline-flex;align-items:center;gap:7px;}
.crumbs li+li::before{content:"/";opacity:.5;}
.crumbs a{color:rgba(247,244,238,.85);text-decoration:none;}
.crumbs a:hover{color:var(--cream);text-decoration:underline;}
.crumbs [aria-current]{color:var(--cream);font-weight:500;}

/* ============================================================
   18. PROSE (block editor content)
   ============================================================ */
.prose{font-size:17px;line-height:1.7;color:var(--ink-2);}
.prose>*:first-child{margin-top:0;}
.prose h2{margin:1.9em 0 .55em;font-size:clamp(26px,4.4vw,40px);color:var(--ink);}
.prose h3{margin:1.7em 0 .5em;font-size:clamp(20px,2.9vw,26px);color:var(--ink);}
.prose h4{margin:1.5em 0 .45em;font-size:19px;color:var(--ink);text-transform:none;font-family:var(--font-body);font-weight:600;}
.prose p{margin:0 0 1.2em;}
.prose ul,.prose ol{margin:0 0 1.4em;padding-left:1.35em;}
.prose li{margin-bottom:.6em;}
.prose li::marker{color:var(--moss);}
.prose a{color:var(--brick);font-weight:500;text-decoration:underline;text-decoration-color:rgba(142,42,35,.4);}
.prose a:hover{text-decoration-color:var(--brick);}
.prose img{border-radius:var(--r-md);margin:1.6em 0;}
.prose figure{margin:1.8em 0;}
.prose figcaption{font-size:14px;color:var(--tan);text-align:center;margin-top:9px;}
.prose blockquote{margin:1.8em 0;padding:20px 26px;border-left:4px solid var(--moss);
  background:rgba(70,84,42,.07);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:18px;color:var(--ink-2);}
.prose blockquote p:last-child{margin-bottom:0;}
.prose hr{border:0;border-top:1px solid rgba(20,27,19,.14);margin:2.4em 0;}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:16px;}
.prose th,.prose td{padding:13px 16px;text-align:left;border-bottom:1px solid rgba(20,27,19,.12);vertical-align:top;}
.prose th{background:rgba(70,84,42,.09);font-weight:600;color:var(--ink);font-size:15px;}
.prose tbody tr:hover{background:rgba(70,84,42,.04);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.6em 0;}
.table-scroll table{margin:0;min-width:520px;}

/* ============================================================
   19. CALLOUTS / PRICE BOXES
   ============================================================ */
.callout{padding:22px 26px;border-radius:var(--r-md);background:rgba(70,84,42,.08);
  border:1px solid rgba(70,84,42,.22);border-left:4px solid var(--moss);margin:1.8em 0;}
.callout>*:last-child{margin-bottom:0;}
.callout__title{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--moss-dk);
  margin-bottom:8px;font-size:16px;}
.callout__title svg{width:19px;height:19px;flex-shrink:0;}
.callout--brick{background:rgba(142,42,35,.06);border-color:rgba(142,42,35,.2);border-left-color:var(--brick);}
.callout--brick .callout__title{color:var(--brick);}

.pricebox{display:grid;gap:16px;grid-template-columns:1fr;margin:1.8em 0;}
@media(min-width:700px){.pricebox{grid-template-columns:repeat(3,1fr);}}
.pricebox__item{padding:24px 22px;border-radius:var(--r-md);background:var(--cream);
  border:1px solid rgba(20,27,19,.1);box-shadow:var(--shadow-card);}
.pricebox__item small{display:block;font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tan);margin-bottom:7px;}
.pricebox__item b{display:block;font-family:var(--font-head);font-size:31px;font-weight:700;
  color:var(--ink);line-height:1.1;margin-bottom:7px;}
.pricebox__item p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-3);}

/* ============================================================
   20. FORM
   ============================================================ */
.form-card{background:var(--cream);border-radius:var(--r-lg);padding:28px 24px;
  border:1px solid rgba(20,27,19,.1);box-shadow:var(--shadow-card);}
@media(min-width:768px){.form-card{padding:36px 34px;}}
.form-card h3{margin:0 0 8px;}
.form-card .lede{margin-bottom:22px;font-size:16px;}
.field{margin-bottom:16px;}
.field label{display:block;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;font-family:var(--font-body);
  font-size:16px;color:var(--ink);background:#fff;border:1px solid rgba(20,27,19,.22);
  border-radius:10px;transition:border-color .15s,box-shadow .15s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--moss);
  box-shadow:0 0 0 3px rgba(70,84,42,.16);}
.field textarea{min-height:110px;resize:vertical;}
.field .hint{display:block;font-size:13px;color:var(--ink-3);margin-top:5px;}

/* ============================================================
   21. FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:rgba(247,244,238,.65);padding-block:56px 24px;}
.site-footer a{color:rgba(247,244,238,.65);text-decoration:none;}
.site-footer a:hover{color:var(--cream);}
.footer__grid{display:grid;gap:34px;grid-template-columns:1fr;padding-bottom:38px;
  border-bottom:1px solid rgba(247,244,238,.12);}
@media(min-width:700px){.footer__grid{grid-template-columns:repeat(2,1fr);gap:34px 40px;}}
@media(min-width:1000px){.footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;}}
.footer__col h4{font-family:var(--font-head);font-weight:600;font-size:19px;text-transform:uppercase;
  color:var(--cream);margin:0 0 14px;}
.footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
.footer__col li{margin:0;font-size:15px;}
.footer__brand img{height:72px;width:auto;margin-bottom:14px;}
.footer__brand p{font-size:15px;line-height:1.6;max-width:340px;margin:0;}
.footer__phone{display:block;font-family:var(--font-head);font-weight:700;font-size:26px;
  color:var(--cream)!important;margin-bottom:8px;}
.footer__nap{font-style:normal;font-size:15px;line-height:1.6;}
.footer__nap strong{color:rgba(247,244,238,.85);font-weight:600;}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;
  font-size:13px;color:rgba(247,244,238,.45);}
.footer__bottom a{color:rgba(247,244,238,.45);}

/* ============================================================
   22. STICKY MOBILE CALL BAR
   ============================================================ */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:rgba(20,27,19,.2);box-shadow:0 -4px 20px rgba(20,27,19,.24);
  padding-bottom:env(safe-area-inset-bottom);}
.callbar a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;
  padding:12px 10px;font-weight:600;font-size:16px;text-decoration:none;line-height:1.2;}
.callbar__call{background:var(--brick);color:var(--cream);}
.callbar__call:hover{background:var(--brick-dk);color:var(--cream);}
.callbar__quote{background:var(--moss);color:var(--cream);}
.callbar__quote:hover{background:var(--moss-dk);color:var(--cream);}
.callbar svg{width:18px;height:18px;flex-shrink:0;}
@media(min-width:900px){.callbar{display:none;}}
@media(max-width:899px){body{padding-bottom:56px;}}

/* ============================================================
   23. MISC
   ============================================================ */
.chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0;}
.chips li{margin:0;}
.chips a,.chips span{display:inline-flex;align-items:center;padding:9px 17px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.55);border:1px solid rgba(20,27,19,.15);color:var(--ink);
  font-weight:500;font-size:14px;text-decoration:none;transition:all .16s;}
.chips a:hover{background:var(--moss);border-color:var(--moss);color:var(--cream);}
.sec--slate .chips a,.sec--ink .chips a{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:var(--cream);}
.sec--slate .chips a:hover,.sec--ink .chips a:hover{background:var(--cream);color:var(--ink);}

.map-embed{border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(20,27,19,.12);
  box-shadow:var(--shadow-card);line-height:0;background:var(--cream-3);}
.map-embed iframe{width:100%;height:340px;border:0;display:block;}

.anchor-nav{position:sticky;top:0;z-index:40;background:rgba(247,244,238,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(20,27,19,.1);}
.anchor-nav ul{display:flex;gap:6px;list-style:none;padding:11px 0;margin:0;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.anchor-nav ul::-webkit-scrollbar{display:none;}
.anchor-nav li{margin:0;flex-shrink:0;}
.anchor-nav a{display:inline-block;padding:8px 15px;border-radius:var(--r-pill);color:var(--ink-2);
  font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;}
.anchor-nav a:hover{background:rgba(70,84,42,.11);color:var(--brick);}

.notice-strip{background:var(--tan);color:var(--cream);text-align:center;padding:11px var(--pad-x);font-size:14px;font-weight:500;}
.notice-strip a{color:var(--cream);text-decoration:underline;}

/* Page-level utility */
.mt-0{margin-top:0;}.mb-0{margin-bottom:0;}
.center{text-align:center;}
.stack-lg{display:flex;flex-direction:column;gap:34px;}

/* Print */
@media print{.callbar,.nav__toggle,.nav__drawer,.cta-banner,.hero__media,.hero__scrim{display:none!important;}
  body{padding-bottom:0;background:#fff;}
  .hero{background:#fff;color:#000;min-height:auto;}
  .hero h1,.hero__sub{color:#000;}}

/* ============================================================
   24. REVIEWS
   ============================================================ */
.rev{display:flex;flex-direction:column;gap:12px;padding:26px 24px;border-radius:var(--r-lg);
  background:var(--cream);border:1px solid rgba(20,27,19,.1);box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);height:100%;}
.rev:hover{transform:translateY(-6px);box-shadow:0 25px 50px -12px rgba(20,27,19,.16),0 0 0 1px rgba(70,84,42,.14);}
.rev__stars{display:flex;gap:2px;color:#E0A100;}
.rev__stars svg{width:16px;height:16px;fill:currentColor;stroke:none;}
.rev__badge{align-self:flex-start;padding:4px 11px;border-radius:var(--r-pill);
  background:rgba(70,84,42,.11);border:1px solid rgba(70,84,42,.24);color:var(--moss-dk);
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.rev__quote{margin:0;padding:0;border:0;background:none;}
.rev__quote p{margin:0;font-size:16px;line-height:1.65;color:var(--ink-2);}
.rev__reply{margin-top:2px;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(27,47,54,.05);border-left:3px solid var(--slate);}
.rev__reply-label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--slate);margin-bottom:6px;}
.rev__reply-label svg{width:14px;height:14px;}
.rev__reply p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-3);}
.rev__who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px;}
.rev__av{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;
  border-radius:50%;background:var(--moss);color:var(--cream);
  font-family:var(--font-head);font-weight:700;font-size:16px;letter-spacing:.02em;}
.rev__meta{display:flex;flex-direction:column;min-width:0;}
.rev__meta cite{font-style:normal;font-weight:600;font-size:15px;color:var(--ink);line-height:1.3;}
.rev__meta span{font-size:13px;color:var(--tan);}
.sec--cream2 .rev{background:#fff;}
.revgrid{align-items:stretch;}

/* Scrolling wall — three columns, pure CSS, seamless loop */
.revwall{display:flex;justify-content:center;gap:20px;max-height:720px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 88%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 88%,transparent);}
.revwall__col{flex:1 1 0;min-width:0;max-width:360px;}
.revwall__col--md,.revwall__col--lg{display:none;}
@media(min-width:768px){.revwall__col--md{display:block;}}
@media(min-width:1100px){.revwall__col--lg{display:block;}}
.revwall__track{display:flex;flex-direction:column;animation:sf-revscroll var(--sf-dur,70s) linear infinite;will-change:transform;}
.revwall:hover .revwall__track{animation-play-state:paused;}
.revwall__set{display:flex;flex-direction:column;gap:20px;padding-bottom:20px;}
@keyframes sf-revscroll{from{transform:translateY(0);}to{transform:translateY(-50%);}}
@media(prefers-reduced-motion:reduce){
  .revwall{max-height:none;-webkit-mask-image:none;mask-image:none;}
  .revwall__track{animation:none;}
  .revwall__set:nth-child(2){display:none;}
}

/* Compact rating bar */
.revbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;
  padding:14px 22px;border-radius:var(--r-pill);background:var(--cream);
  border:1px solid rgba(20,27,19,.12);box-shadow:var(--shadow-card);max-width:640px;margin:0 auto;}
.revbar__stars{display:inline-flex;gap:2px;color:#E0A100;}
.revbar__stars svg{width:17px;height:17px;fill:currentColor;stroke:none;}
.revbar__score{font-size:15px;color:var(--ink-2);}
.revbar__score b{font-family:var(--font-head);font-size:21px;color:var(--ink);margin-right:2px;}
.revbar__link{font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;}
.sec--slate .revbar,.sec--ink .revbar{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.sec--slate .revbar__score,.sec--ink .revbar__score{color:rgba(247,244,238,.85);}
.sec--slate .revbar__score b,.sec--ink .revbar__score b{color:var(--cream);}

/* Full reviews page listing */
.revlist{display:grid;gap:20px;grid-template-columns:1fr;}
@media(min-width:760px){.revlist{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1150px){.revlist{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* ============================================================
   25. NAV ACTIONS (estimate CTA + phone) & GHL EMBED
   ============================================================ */
.nav__actions{display:flex;align-items:center;gap:10px;}
.nav__cta{display:none;}
@media(min-width:1240px){
  .nav__cta{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:var(--r-pill);
    background:var(--brick);color:var(--cream);font-weight:600;font-size:15px;text-decoration:none;
    white-space:nowrap;border:1px solid rgba(255,255,255,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 22px rgba(142,42,35,.3);transition:all .18s var(--ease);}
  .nav__cta:hover{background:var(--brick-dk);color:var(--cream);transform:translateY(-1px);}
  .nav__cta svg{width:17px;height:17px;flex-shrink:0;}
}
@media(min-width:900px) and (max-width:1239px){
  /* Tighten the phone pill so the menu still fits before the CTA appears */
  .nav__phone{padding:10px 16px;font-size:14px;}
}
@media(min-width:1100px){.nav__menu{gap:22px;}}
@media(min-width:1400px){.nav__menu{gap:28px;}}

/* GoHighLevel embedded form */
.ghl-embed{position:relative;width:100%;min-height:var(--ghl-h,1033px);}
.ghl-embed iframe{width:100%;min-height:var(--ghl-h,1033px);height:var(--ghl-h,1033px);
  border:none;border-radius:8px;display:block;background:#fff;}
@media(max-width:600px){.ghl-embed,.ghl-embed iframe{min-height:1180px;height:1180px;}}

/* ============================================================
   26. MOBILE FIXES
   ============================================================ */
/* Button rows must never exceed their container. Long CTA labels
   ("Call (469) 400-9581", "Free On-Site Estimate") were forcing the row
   wider than the viewport inside the CTA banner and getting clipped. */
.btn-row{max-width:100%;min-width:0;}
.btn{max-width:100%;}
@media(max-width:640px){
  .btn-row{width:100%;}
  .btn-row>.btn{flex:1 1 100%;}
  .cta-banner__text{max-width:100%;}
  .cta-banner__inner{padding:36px 22px;}
}

/* Roomier tap targets in the mobile drawer's sub-menus */
.nav__drawer .nav__sub a{padding:12px 0 12px 14px;}

/* Keep long unbroken strings (URLs, phone numbers) from forcing overflow */
.prose a,.rev__quote p,.faq__answer{overflow-wrap:break-word;}

/* ============================================================
   27. BUTTON PAINT FIX
   ============================================================
   Symptom: button labels invisible until the button is clicked or hovered.

   Cause: `backdrop-filter` on a small element that also runs
   `transition: all` and a `transform` on hover. WebKit promotes the element
   to its own compositing layer for the filter, and in that path the text can
   fail to paint until something forces a repaint — a click, a scroll, a
   hover. It reproduces in Safari and in iOS WebViews and not in Chromium,
   which is why it survived the earlier checks.

   Fix, in two parts:
   1. Transition only the properties that actually animate. `transition: all`
      makes WebKit re-evaluate the backdrop-filter on every state change,
      which is where the bug lives.
   2. Drop backdrop-filter from the buttons themselves. The glass look came
      from the translucent background far more than from the blur, so the
      backgrounds are made slightly more opaque to compensate. The blur is
      kept on the larger decorative panels (hero badge, floating call card,
      review bar, process steps), which are not interactive and do not show
      the bug.
   ============================================================ */
.btn,
.nav__cta,
.nav__phone,
.chips a,
.card,
.rev,
.card__link{
  transition-property:background-color,border-color,color,box-shadow,transform,opacity;
  transition-duration:.18s;
  transition-timing-function:var(--ease);
}

.btn--glass,
.btn--glass-brick,
.btn--light,
.nav__phone,
.nav__cta{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Compensate for the removed blur with slightly more opaque backgrounds. */
.btn--glass{background:rgba(255,255,255,.20);}
.btn--glass:hover{background:rgba(255,255,255,.32);}
.btn--glass-brick{background:rgba(142,42,35,.92);}
.btn--glass-brick:hover{background:var(--brick);}
.btn--light{background:rgba(255,255,255,.82);}
.btn--light:hover{background:#fff;}
.nav__phone{background:rgba(255,255,255,.20);}
.nav__phone:hover{background:rgba(255,255,255,.32);}

/* Belt and braces: keep label text on its own paint layer and always opaque. */
.btn,.nav__cta,.nav__phone{ -webkit-transform:translateZ(0); transform:translateZ(0); }
.btn:hover,.nav__cta:hover{ -webkit-transform:translateZ(0) translateY(-1px); transform:translateZ(0) translateY(-1px); }
.btn>*,.nav__cta>*,.nav__phone>*{ opacity:1; }

/* ============================================================
   28. MOBILE HERO SIMPLIFICATION
   ============================================================
   The home hero stacked five blocks — a two-line badge, a three-line H1, a
   four-line paragraph and two full-width buttons — bottom-aligned so all of
   it landed on the busiest part of the photograph (the truck and house).

   On small screens the content now sits at the TOP, over the sky, where the
   image is calm; the copy is shortened; and the secondary button is dropped
   because the sticky call bar already carries Call and Free Estimate
   persistently, so repeating them in the hero is pure duplication.
   ============================================================ */

/* Short/long copy pairs. One of each renders; the other is removed from the
   accessibility tree entirely, so nothing is announced twice. */
.u-narrow{display:none;}
.u-wide{display:inline;}
@media(max-width:767px){
  .u-narrow{display:inline;}
  .u-wide{display:none;}
}

@media(max-width:767px){
  .hero--home{min-height:540px;}

  /* Top-align over the sky rather than bottom-align over the truck */
  .hero--home .hero__body{
    justify-content:flex-start;
    padding-block:92px 32px;
  }

  .hero--home .hero__badge{
    font-size:11px;
    letter-spacing:.05em;
    padding:6px 13px;
    margin-bottom:14px;
    white-space:nowrap;
  }

  .hero--home h1{
    font-size:clamp(29px,8.2vw,36px);
    line-height:1.03;
    margin-bottom:12px;
  }

  .hero--home .hero__sub{
    font-size:15.5px;
    line-height:1.5;
    margin-bottom:20px;
    max-width:32ch;
  }

  /* The sticky call bar already offers both actions on mobile. */
  .hero--home .hero__secondary{display:none;}
  .hero--home .btn-row>.btn{flex:0 1 auto;width:auto;max-width:100%;}

  /* Darker at the top so light-on-sky copy stays legible, clearer lower down
     so the truck and the finished landscape are actually visible. */
  .hero--home .hero__scrim{
    background:linear-gradient(180deg,
      rgba(15,22,13,.82) 0%,
      rgba(15,22,13,.66) 38%,
      rgba(15,22,13,.30) 62%,
      rgba(15,22,13,.52) 100%);
  }
}

/* Interior heroes carry a breadcrumb as well, so they get the same trim. */
@media(max-width:767px){
  .hero--interior .hero__body{padding-block:88px 30px;}
  .hero--interior h1{font-size:clamp(27px,7.4vw,34px);line-height:1.05;}
  .hero--interior .hero__sub{font-size:15.5px;line-height:1.5;max-width:34ch;}
  .hero--interior .btn-row>.btn:nth-child(2){display:none;}
  .hero--interior .btn-row>.btn{flex:0 1 auto;width:auto;}
}