/* ===== Kliemann Brothers - brand tokens, sampled from the new logo ===== */
:root{
  /* sampled: #003644 plate, #4EC1B2 "BROTHERS", #B0DFD6 ribbon, #003E6A jacket, #FFFFFF wordmark */
  --deep:#003644;          /* primary dark surface, headings */
  --deep-2:#00242E;        /* deepest surface, footer */
  --deep-3:#0B4152;        /* raised dark surface */
  --navy:#003E6A;          /* secondary dark, from the logo jacket */
  --teal:#4EC1B2;          /* signature logo teal, accents on dark */
  --teal-cta:#07786A;      /* accessible teal for solid buttons on light */
  --teal-cta-deep:#055F55; /* button hover/pressed */
  --mint:#B0DFD6;          /* logo ribbon tint */
  --ink:#22323a;           /* body text */
  --muted:#425258;         /* secondary text */
  --surface:#f2f7f7;       /* light section background */
  --surface-2:#e5eeee;--surface-green:#ddefe9;     /* alt light background */
  --hairline:#d5e3e3;      /* card borders */
  --bg:#ffffff;
  --white:#ffffff;

  --deep-rgb:0,54,68;
  --teal-rgb:78,193,178;
  --cta-rgb:7,120,106;

  --font-display:'Archivo', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;

  --container:1220px;
  --pad:64px;
  --radius:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media(max-width:1100px){:root{--pad:44px}}
@media(max-width:680px){:root{--pad:20px}}

/* ===== primitives ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;color:var(--deep);line-height:1.05;letter-spacing:-.015em}
.container{max-width:calc(var(--container) + var(--pad)*2);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-display);font-weight:600;letter-spacing:.005em;font-size:16px;padding:15px 30px;border-radius:9px;border:2px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s,border-color .25s}
.btn--teal{background:var(--teal-cta);color:var(--white)}
.btn--teal:hover{background:var(--teal-cta-deep);transform:translateY(-2px);box-shadow:0 16px 34px rgba(var(--cta-rgb),.34)}
.btn--teal:active{transform:translateY(0)}
.btn--deep{background:var(--deep);color:var(--white)}
.btn--deep:hover{background:var(--deep-2);transform:translateY(-2px);box-shadow:0 16px 34px rgba(var(--deep-rgb),.32)}
.btn--ghost{background:transparent;color:var(--deep);border-color:rgba(var(--deep-rgb),.32)}
.btn--ghost:hover{background:var(--deep);border-color:var(--deep);color:var(--white);transform:translateY(-2px)}
.btn--on-dark.btn--ghost{color:var(--white);border-color:rgba(255,255,255,.55)}
.btn--on-dark.btn--ghost:hover{background:var(--white);border-color:var(--white);color:var(--deep)}
.btn--lg{font-size:18px;padding:18px 36px}

/* section head */
.section-head{max-width:900px;margin:0 auto 54px;text-align:center}
.section-head h2{font-size:clamp(30px,4.1vw,50px)}
.section-head p{font-size:18px;color:var(--muted);margin-top:16px;line-height:1.65}
.section-head--light h2{color:#fff}
.section-head--light p{color:rgba(255,255,255,.8)}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* marquee */
.marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;align-items:center;gap:14px;width:max-content;animation:scrollx 44s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .marquee__track{animation:none;flex-wrap:wrap;justify-content:center}
}

/* ===== TOP BAR ===== */
/* the whole header travels as one fixed unit. The top bar used to be fixed at
   top:0 with a HIGHER z-index than the nav, so when the nav slid up to top:0 on
   scroll the bar painted over it, clipping the logo and hiding the phone row. */
.siteheader{position:fixed;top:0;left:0;right:0;z-index:50}
.topbar{position:relative;z-index:1;background:var(--deep);color:rgba(255,255,255,.8)}
.topbar__inner{display:flex;align-items:center;gap:28px;height:38px;font-size:13.5px;font-weight:500}
.topbar__item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.topbar__item svg{width:15px;height:15px;color:var(--teal);flex:0 0 auto}
@media(max-width:860px){.topbar__item--hide{display:none}.topbar__inner{justify-content:center}}

/* ===== NAV (white header, full-color logo) ===== */
.nav{position:relative;z-index:0;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:3px solid var(--teal);box-shadow:0 3px 20px rgba(0,54,68,.09);transition:padding .35s var(--ease),box-shadow .35s}
.nav.scrolled{box-shadow:0 6px 26px rgba(0,54,68,.14)}
/* full-bleed container: the nav carries a lot (oversized logo, 8 links, phone, 2 CTAs).
   Two rows on the right (contact strip over the menu) buy the logo the room to be big. */
.nav>.container{max-width:none}
.nav__inner{display:flex;align-items:center;gap:clamp(16px,2.6vw,44px);padding:6px 0}
/* the logo is oversized and hangs below the bar on purpose, so it reads at a glance.
   The negative margin pulls the flex line back up; the logo itself overflows downward. */
.nav__brand{position:relative;z-index:2;display:inline-flex;align-items:center;flex:0 0 auto;margin-left:clamp(4px,2.2vw,44px)}
.nav__logo{height:200px;width:auto;margin-bottom:-66px;filter:drop-shadow(0 10px 22px rgba(0,54,68,.32));transition:height .35s var(--ease),margin-bottom .35s var(--ease)}
/* scrolled state stays deliberately compact: the header is fixed, so an
   oversized logo here would eat the viewport on every scroll */
.nav.scrolled .nav__logo{height:118px;margin-bottom:-38px}
.nav__stack{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:9px;margin-right:clamp(4px,2vw,38px)}
.nav__top{display:flex;align-items:center;gap:14px}
.nav__menu{list-style:none;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:24px}
.nav__item>a{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--deep);padding:6px 0;position:relative;transition:color .25s}
.nav__item>a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;border-radius:2px;background:var(--teal);transition:width .3s var(--ease)}
.nav__item:hover>a{color:var(--teal-cta)}
.nav__item:hover>a::after{width:100%}
/* ---- nav dropdowns ---- */
.nav__item--sub{position:relative}
.nav__caret{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;
  opacity:.65;transition:transform .25s var(--ease),opacity .25s}
.nav__item--sub:hover .nav__caret{transform:rotate(-180deg);opacity:1}
.nav__sub{position:absolute;top:100%;left:-16px;z-index:6;min-width:244px;list-style:none;
  background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:8px 0;margin-top:6px;
  box-shadow:0 22px 44px rgba(0,54,68,.2);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
/* keeps the pointer from falling through the gap between link and panel */
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav__item--sub:hover .nav__sub,.nav__item--sub:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{display:block;padding:10px 20px;font-family:var(--font-display);font-weight:600;
  font-size:14.5px;color:var(--deep);white-space:nowrap;transition:background .2s,color .2s,padding-left .2s var(--ease)}
.nav__sub a:hover{background:rgba(var(--teal-rgb),.12);color:var(--teal-cta);padding-left:25px}
/* a top-level item with no page of its own still opens its menu */
.nav__top-label{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--font-display);
  font-weight:600;font-size:15px;color:var(--deep);padding:6px 0;cursor:default}
@media(max-width:1440px){.nav__top-label{font-size:14px}}
/* third level, indented under its parent */
.nav__deep>a,.nav__deep>span{padding-left:34px!important;font-size:13.5px;opacity:.92}
.nav__deep>a::before,.nav__deep>span::before{content:"";position:absolute;left:20px;top:50%;
  width:6px;height:1.5px;border-radius:1px;background:var(--teal);transform:translateY(-50%)}
.nav__sub li{position:relative}
/* pages that do not exist yet: labels, never links, so nothing reads as broken */
.nav__todo{color:var(--muted)!important;cursor:default;opacity:.72}
a.nav__todo{pointer-events:none}
.nav__sub span.nav__todo,.nav__col span.nav__todo{display:block;padding:10px 20px;
  font-family:var(--font-display);font-weight:600;font-size:14.5px;white-space:nowrap}
.nav__deep>span.nav__todo{font-size:13.5px}
/* mega panel: one column per second-level branch */
.nav__item--mega{position:static}
.nav__mega{position:absolute;left:0;right:0;top:100%;z-index:6;display:flex;gap:clamp(20px,3vw,54px);
  padding:26px clamp(24px,4vw,64px) 30px;margin-top:6px;background:#fff;
  border-top:1px solid var(--hairline);box-shadow:0 26px 48px rgba(0,54,68,.2);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.nav__mega::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav__item--mega:hover .nav__mega,.nav__item--mega:focus-within .nav__mega{opacity:1;visibility:visible;transform:none}
.nav__col{min-width:210px}
.nav__col>ul{list-style:none}
.nav__col li{position:relative}
.nav__colhead{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;
  color:var(--deep);padding:0 0 10px;margin-bottom:8px;border-bottom:2px solid var(--teal)}
a.nav__colhead:hover{color:var(--teal-cta)}
.nav__col a{display:block;padding:8px 0 8px 14px;font-family:var(--font-display);font-weight:600;
  font-size:14.5px;color:var(--deep);white-space:nowrap;transition:color .2s,padding-left .2s var(--ease)}
.nav__col a:hover{color:var(--teal-cta);padding-left:19px}
.nav__col span.nav__todo{padding:8px 0 8px 14px}
.nav__col .nav__deep>a,.nav__col .nav__deep>span{padding-left:30px!important}
.nav__col .nav__deep>a::before,.nav__col .nav__deep>span::before{left:14px}
.nav__phone{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.nav__phone span{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.nav__phone a{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--deep);white-space:nowrap;transition:color .25s}
.nav__phone a:hover{color:var(--teal-cta)}
.nav__cta{padding:12px 22px;font-size:15px;white-space:nowrap}
.nav__cta--quote{border-color:rgba(var(--cta-rgb),.5);color:var(--teal-cta)}
.nav__cta--quote:hover{background:var(--teal-cta);border-color:var(--teal-cta);color:#fff}
/* hamburger: desktop hides it, the collapsed breakpoints reveal it */
.nav__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:0 11px;border:2px solid rgba(var(--deep-rgb),.22);border-radius:9px;background:transparent;cursor:pointer;transition:border-color .25s,background .25s}
.nav__toggle span{display:block;height:2.5px;width:100%;border-radius:2px;background:var(--deep);transition:transform .3s var(--ease),opacity .2s var(--ease)}
.nav__toggle:hover{border-color:var(--teal-cta)}
.nav__toggle[aria-expanded="true"]{border-color:var(--teal-cta);background:rgba(var(--teal-rgb),.12)}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* CTAs duplicated inside the panel; only shown once the header CTAs collapse */
.nav__item--cta{display:none}
@media(max-width:1440px){.nav__menu{gap:17px}.nav__item>a{font-size:14px}.nav__logo{height:178px;margin-bottom:-58px}}

/* ---- collapsed header: menu becomes a drop panel under the bar ---- */
@media(max-width:1340px){.nav__menu{gap:14px}}
@media(max-width:1180px){
  .nav__toggle{display:flex}
  .nav__stack{gap:0;justify-content:center}
  .nav__logo{height:152px;margin-bottom:-48px}
  .nav.scrolled .nav__logo{height:112px;margin-bottom:-36px}
  .nav__menu{
    position:absolute;left:0;right:0;top:100%;z-index:4;
    display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;
    flex-wrap:nowrap;gap:0;padding:10px 0 18px;
    background:#fff;border-top:1px solid var(--hairline);
    box-shadow:0 22px 34px rgba(0,54,68,.18);
    max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .nav__menu.is-open{display:flex}
  .nav__item{width:100%}
  .nav__item>a{width:100%;font-size:17px;padding:14px clamp(20px,6vw,64px);border-radius:0}
  .nav__item>a::after{display:none}
  .nav__item:hover>a{background:rgba(var(--teal-rgb),.1)}
  .nav__item--cta{display:block;padding:10px clamp(20px,6vw,64px) 0}
  .nav__item--cta .btn{width:100%}
  .nav__caret{display:none}
  .nav__sub{position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;padding:0 0 6px}
  .nav__sub::before{display:none}
  .nav__sub a{padding:11px clamp(20px,6vw,64px) 11px calc(clamp(20px,6vw,64px) + 18px);
    font-size:15.5px;color:var(--muted);position:relative}
  .nav__sub a::before{content:"";position:absolute;left:clamp(20px,6vw,64px);top:50%;
    width:7px;height:2px;border-radius:2px;background:var(--teal);transform:translateY(-50%)}
  .nav__sub a:hover{padding-left:calc(clamp(20px,6vw,64px) + 18px)}
  .nav__top-label{width:100%;padding:14px clamp(20px,6vw,64px);font-size:17px}
  .nav__mega{position:static;display:block;opacity:1;visibility:visible;transform:none;
    padding:0 0 6px;margin:0;background:transparent;border:0;box-shadow:none}
  .nav__mega::before{display:none}
  .nav__col{min-width:0}
  .nav__colhead{padding:12px clamp(20px,6vw,64px) 8px;margin:0;border-bottom:0;font-size:15.5px;color:var(--teal-cta)}
  .nav__col a,.nav__col span.nav__todo{padding:11px clamp(20px,6vw,64px) 11px calc(clamp(20px,6vw,64px) + 18px);font-size:15.5px}
  .nav__col .nav__deep>a,.nav__col .nav__deep>span,
  .nav__sub .nav__deep>a,.nav__sub .nav__deep>span{padding-left:calc(clamp(20px,6vw,64px) + 34px)!important}
  .nav__col .nav__deep>a::before,.nav__col .nav__deep>span::before,
  .nav__sub .nav__deep>a::before,.nav__sub .nav__deep>span::before{left:calc(clamp(20px,6vw,64px) + 18px)}
  .nav__col a:hover{padding-left:calc(clamp(20px,6vw,64px) + 18px)}
}
@media(max-width:820px){.nav__cta--quote{display:none}}
@media(max-width:680px){
  .nav__logo{height:116px;margin-bottom:-36px}
  .nav.scrolled .nav__logo{height:96px;margin-bottom:-30px}
  .nav__phone span{display:none}
  .nav__phone a{font-size:19px}
  .nav__cta{display:none}
  .nav__inner{gap:12px}
  .nav__brand{margin-left:0}
  .nav__stack{margin-right:0}
  .nav__top{gap:10px}
}
/* very narrow phones: trim the logo again so the phone number always fits */
@media(max-width:400px){
  .nav__logo{height:96px;margin-bottom:-30px}
  .nav.scrolled .nav__logo{height:84px;margin-bottom:-26px}
  .nav__phone a{font-size:17px}
  .nav__toggle{width:44px;height:44px}
}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;background:var(--deep-2);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
/* The fixed header covers the hero's top ~184px, which was clipping the van's wrap
   logo. The image is pushed DOWN (top:10%) so the lockup clears the header; the
   resulting gap above it sits behind the opaque header and is never visible.
   object-position holds the logo to the right, clear of the hero copy. */
.hero__media img{position:absolute;top:10%;left:0;width:100%;height:122%;object-fit:cover;object-position:44% 50%;will-change:transform}
.hero__media picture{display:contents}
/* The video layers over the still and fades in once it actually plays. The still
   stays underneath as the poster, so phones, reduced motion and blocked autoplay
   all keep the approved framing instead of a blank panel. */
.hero__video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:1;opacity:0;transition:opacity .9s var(--ease)}
.hero__video.is-playing{opacity:1}
/* A tall or half-width desktop window narrows the visible slice enough to clip
   ELECTRIC off the wrap. Nudge the frame left again at those aspect ratios. */
@media(min-width:681px) and (max-aspect-ratio:3/2){
  .hero__media img{object-position:57% 50%}
}
.hero__scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(0,36,46,.62) 0%,rgba(0,36,46,.34) 32%,rgba(0,36,46,.56) 64%,rgba(0,36,46,.93) 100%)}
.hero__scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,36,46,.8) 0%,rgba(0,36,46,.46) 36%,rgba(0,36,46,.08) 64%,transparent 100%)}
/* padding-top clears the topbar, the taller nav, and the logo overhanging below it */
.hero__content{position:relative;z-index:2;width:100%;padding-top:298px;padding-bottom:clamp(72px,10vh,120px)}
.hero__title{color:var(--white);font-size:clamp(44px,6.1vw,84px);font-weight:800;line-height:1;letter-spacing:-.025em;margin-bottom:16px;max-width:14ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero__support{display:block;min-height:1.35em;font-family:var(--font-display);font-weight:600;font-size:clamp(19px,2.5vw,32px);letter-spacing:-.01em;color:var(--teal);margin-bottom:22px}
.hero__caret{display:inline-block;width:3px;height:.82em;background:var(--teal);margin-left:4px;vertical-align:-2px;animation:blink 1s step-end infinite}
.hero__caret.done{opacity:0}
.hero__desc{font-size:19px;font-weight:500;line-height:1.62;color:rgba(255,255,255,.87);max-width:580px;margin-bottom:34px}
.hero__cta{display:flex;gap:15px;flex-wrap:wrap;margin-bottom:32px}
.hero__proof{display:flex;gap:14px;flex-wrap:wrap}
.hprf{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:11px;padding:11px 20px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s}
.hprf:hover{transform:translateY(-4px);background:rgba(255,255,255,.16);border-color:rgba(var(--teal-rgb),.6);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.hprf__logo{flex:0 0 auto;width:32px;height:32px;background:#fff;border-radius:8px;display:grid;place-items:center;transition:transform .35s var(--ease)}
.hprf:hover .hprf__logo{transform:scale(1.1) rotate(-4deg)}
.hprf__logo--plain{background:var(--teal);color:var(--deep);font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:-.03em}
.hprf__t{display:flex;flex-direction:column;line-height:1.15}
.hprf__top{display:flex;align-items:center;gap:8px}
.hprf__top b{font-family:var(--font-display);font-weight:800;font-size:19px;color:#fff;letter-spacing:-.025em;white-space:nowrap}
.hprf__stars{color:#ffc21a;font-size:14px;letter-spacing:1px}
.hprf__sub{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.78);margin-top:3px}
@media(max-width:680px){
  .hero__content{padding-top:204px;padding-bottom:64px}
  /* too narrow for the full wordmark, so frame the three-brothers mark instead */
  .hero__media img{object-position:46% 52%}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
  .hprf{flex:1 1 auto;justify-content:center}
}

/* ===== TRUST MARQUEE ===== */
.trustmq{background:var(--deep);padding:16px 0;overflow:hidden}
.trustmq__item{display:inline-flex;align-items:center;gap:9px;color:#fff;font-family:var(--font-display);font-weight:600;font-size:16px;white-space:nowrap;letter-spacing:-.005em}
.trustmq__dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:0 0 auto}

/* ===== SERVICES ===== */
.services{position:relative;padding:clamp(76px,9vw,120px) 0;overflow:hidden;background:var(--surface)}
.services__bg{position:absolute;inset:0;background:var(--tex,url('../assets/textures/house.webp')) center/cover no-repeat;will-change:transform}
.services>.container{position:relative;z-index:1}
.svc__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.svc{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 26px rgba(0,54,68,.08);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.svc:hover{transform:translateY(-8px);box-shadow:0 30px 56px rgba(0,54,68,.2)}
.svc__media{position:relative;display:block;height:212px;overflow:hidden}
.svc__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,54,68,0) 45%,rgba(0,54,68,.34));opacity:0;transition:opacity .35s}
.svc:hover .svc__media::after{opacity:1}
.svc__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.svc:hover .svc__media img{transform:scale(1.06)}
.svc__body{display:flex;flex-direction:column;flex:1;padding:24px 24px 26px;border-top:4px solid var(--teal)}
.svc h3{font-size:21px;color:var(--deep);margin-bottom:9px}
.svc p{font-size:14.5px;line-height:1.62;color:var(--muted);flex:1}
.svc__link{margin-top:18px;font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--teal-cta);display:inline-flex;align-items:center;gap:7px}
.svc__link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.svc:hover .svc__link svg{transform:translateX(4px)}
@media(max-width:1180px){.svc__grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:600px){.svc__grid{grid-template-columns:1fr}}

/* ===== STATS BAND ===== */
.statband{position:relative;padding:clamp(72px,9vw,116px) 0;color:#fff;overflow:hidden;background:var(--deep-2)}
.statband__bg{position:absolute;inset:-8% 0;background:var(--tex,url('../assets/photos/team-group.webp')) center/cover no-repeat;will-change:transform}
.statband__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,36,46,.86) 0%,rgba(0,54,68,.76) 50%,rgba(0,54,68,.66) 100%)}
.statband__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.statband__copy h2{color:#fff;font-size:clamp(32px,4vw,50px);margin-bottom:18px}
.statband__copy p{color:rgba(255,255,255,.83);font-size:17px;line-height:1.7;max-width:48ch}
.statband__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.statcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:26px 24px}
.statcard b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(32px,3.8vw,44px);color:var(--teal);line-height:1;letter-spacing:-.03em}
.statcard span{display:block;margin-top:9px;font-size:13.5px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.76)}
@media(max-width:900px){.statband__inner{grid-template-columns:1fr;gap:36px}}

/* ===== WHY ===== */
.why{position:relative;padding:clamp(76px,9vw,120px) 0;overflow:hidden;background:var(--bg)}
.why__bg{position:absolute;inset:0;background:var(--tex,url('../assets/textures/vest.webp')) center/cover no-repeat}
.why>.container{position:relative;z-index:1}
.why__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,84px);align-items:stretch}
.why__media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 54px rgba(0,54,68,.24);min-height:clamp(360px,38vw,540px);align-self:stretch}
.why__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform}
.why__media-tag{position:absolute;left:20px;bottom:20px;z-index:2;background:var(--teal-cta);color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;padding:12px 20px;border-radius:9px;box-shadow:0 12px 28px rgba(var(--cta-rgb),.4)}
.why__copy h2{font-size:clamp(30px,3.4vw,46px);margin-bottom:18px}
.why__copy>p{font-size:18.5px;line-height:1.78;color:var(--muted);margin-bottom:26px;max-width:52ch}
.why__list{list-style:none;display:grid;gap:16px}
.why__item{display:flex;gap:15px;align-items:flex-start}
.why__check{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--deep);color:var(--teal);margin-top:2px}
.why__check svg{width:17px;height:17px}
.why__txt strong{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--deep);line-height:1.2;margin-bottom:3px}
.why__txt span{font-size:16px;line-height:1.65;color:var(--muted)}
@media(max-width:900px){.why__grid{grid-template-columns:1fr;gap:40px}.why__media{aspect-ratio:4/3;max-height:460px}}

/* ===== CERTIFICATIONS ===== */
.certs{position:relative;padding:clamp(52px,6vw,78px) 0;overflow:hidden;background:var(--deep)}
.certs__bg{position:absolute;inset:0;background:url('../assets/photos/parts-load.webp') center/cover no-repeat}
.certs__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,54,68,.8),rgba(0,36,46,.74))}
.certs>.container,.certs__marquee{position:relative;z-index:1}
.certs__head{text-align:center;font-family:var(--font-display);font-weight:700;letter-spacing:.02em;font-size:17px;color:#fff;margin-bottom:30px}
.certs__marquee .marquee__track{gap:20px;animation-duration:36s}
.cert{flex:0 0 auto;background:#fff;border-radius:12px;padding:18px 30px;height:112px;display:grid;place-items:center;box-shadow:0 12px 28px rgba(0,36,46,.34)}
.cert img{max-height:72px;width:auto;object-fit:contain}

/* ===== OFFERS ===== */
.offers{position:relative;background:var(--bg);padding:clamp(76px,9vw,120px) 0;overflow:hidden}
.offers::before{content:"";position:absolute;inset:0;background:var(--tex,url('../assets/textures/street.webp')) center/cover no-repeat;pointer-events:none}
.offers>.container{position:relative;z-index:1}
.offer__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.offer{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);padding:34px 32px 32px;overflow:hidden;color:#fff;background:linear-gradient(150deg,var(--deep) 0%,var(--deep-3) 100%);box-shadow:0 14px 34px rgba(0,54,68,.2);transition:transform .35s var(--ease),box-shadow .35s}
.offer::before{content:"";position:absolute;top:-90px;right:-70px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(var(--teal-rgb),.34),transparent 68%);pointer-events:none}
.offer:hover{transform:translateY(-8px);box-shadow:0 32px 60px rgba(0,54,68,.32)}
.offer__big{position:relative;font-family:var(--font-display);font-weight:800;font-size:64px;line-height:.9;letter-spacing:-.045em;color:var(--teal);display:flex;align-items:baseline;gap:8px;margin-bottom:16px}
.offer__big span{font-size:24px;letter-spacing:-.02em;color:var(--mint)}
/* word-led variant for offers with no headline number to lead with */
.offer--text .offer__big{font-size:40px;flex-wrap:wrap;align-items:baseline}
.offer--text .offer__big span{font-size:20px}
.offer h3{position:relative;color:#fff;font-size:22px;margin-bottom:10px}
.offer p{position:relative;font-size:15px;line-height:1.65;color:rgba(255,255,255,.78);flex:1;margin-bottom:24px}
.offer__cta{position:relative;align-self:flex-start;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--deep);background:var(--teal);padding:12px 24px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;transition:background .25s,transform .25s var(--ease)}
.offer__cta svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.offer:hover .offer__cta{background:var(--mint)}
.offer:hover .offer__cta svg{transform:translateX(4px)}
.offers__fine{text-align:center;max-width:760px;margin:36px auto 0;font-size:13px;line-height:1.6;color:var(--muted)}
@media(max-width:960px){.offer__grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* ===== REVIEWS ===== */
.reviews{position:relative;padding:clamp(76px,9vw,120px) 0;overflow:hidden;background:var(--surface)}
.reviews__bg{position:absolute;inset:0;background:var(--tex,url('../assets/textures/drive.webp')) center/cover no-repeat}
.reviews>.container{position:relative;z-index:1}
.reviews__carousel{position:relative}
.reviews__scroller{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 4px 18px;scrollbar-width:none;-ms-overflow-style:none}
.reviews__scroller::-webkit-scrollbar{display:none}
.rev{flex:0 0 clamp(272px,25vw,330px);scroll-snap-align:start;display:flex;flex-direction:column;margin:0;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);padding:22px 22px 20px;box-shadow:0 10px 26px rgba(0,54,68,.08);transition:transform .3s var(--ease),box-shadow .3s}
.rev:hover{transform:translateY(-5px);box-shadow:0 24px 48px rgba(0,54,68,.16)}
.rev__stars{display:flex;gap:3px;margin-bottom:16px}
.rev__stars svg{width:19px;height:19px;color:#f2b21a}
.rev__quote{font-size:15.5px;line-height:1.7;color:var(--ink);flex:1;margin:0}
.rev__by{margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline);display:flex;align-items:center;gap:13px}
.rev__mark{width:44px;height:44px;border-radius:11px;background:var(--deep);color:var(--teal);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:19px;flex:0 0 auto}
.rev__who{display:flex;flex-direction:column}
.rev__name{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--deep)}
.rev__label{font-size:13px;color:var(--muted);margin-top:1px}
.reviews__nav{position:absolute;top:44%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid var(--hairline);background:#fff;color:var(--deep);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,54,68,.16);transition:background .25s,color .25s}
.reviews__nav:hover{background:var(--deep);color:var(--teal)}
.reviews__nav--prev{left:-14px}
.reviews__nav--next{right:-14px}
@media(max-width:1100px){.reviews__nav--prev{left:2px}.reviews__nav--next{right:2px}}
@media(max-width:680px){.rev{flex-basis:82vw}.reviews__nav{display:none}}

/* ===== SERVICE AREA ===== */
.areas{position:relative;padding:clamp(76px,9vw,120px) 0;overflow:hidden;background:var(--bg)}
.areas__bg{position:absolute;inset:0;background:var(--tex,url('../assets/textures/parts.webp')) center/cover no-repeat}
.areas>.container{position:relative;z-index:1}
.areas__hub{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:56px}
.hub{position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;display:flex;align-items:flex-end;box-shadow:0 14px 34px rgba(0,54,68,.16);transition:transform .35s var(--ease),box-shadow .35s}
.hub:hover{transform:translateY(-8px);box-shadow:0 32px 60px rgba(0,54,68,.26)}
.hub img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.hub:hover img{transform:scale(1.06)}
.hub__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,36,46,.06) 30%,rgba(0,36,46,.86) 100%)}
.hub__body{position:relative;z-index:1;padding:26px 28px}
.hub h3{color:#fff;font-size:26px;margin-bottom:7px}
.hub p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.85)}
.areas__all{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:34px 36px}
.areas__all h3{font-size:19px;color:var(--deep);margin-bottom:18px}
.areas__note{font-size:14.5px;line-height:1.6;color:var(--muted);margin:-8px 0 20px}
/* an even, alphabetical list rather than ragged rows of pills */
.areas__list{list-style:none;margin:0;padding:0;column-count:4;column-gap:clamp(20px,3vw,44px)}
.areas__list li{break-inside:avoid;display:flex;align-items:center;gap:10px;
  padding:7px 0;font-size:15.5px;font-weight:600;color:var(--deep);
  border-bottom:1px solid var(--hairline);transition:color .25s}
.areas__list li::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;
  background:var(--teal);transition:transform .25s var(--ease),background .25s}
.areas__list li:hover{color:var(--teal-cta)}
.areas__list li:hover::before{transform:scale(1.6);background:var(--teal-cta)}
@media(max-width:1100px){.areas__list{column-count:3}}
@media(max-width:760px){.areas__list{column-count:2}}
@media(max-width:430px){.areas__list{column-count:1}}
@media(max-width:960px){.areas__hub{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ===== BLOG ===== */
.blog_main{position:relative;padding:clamp(76px,9vw,120px) 0;overflow:hidden;background:var(--surface)}
.blog__bg{position:absolute;inset:0;background:var(--tex,url('../assets/textures/fleet.webp')) center/cover no-repeat}
.blog_main>.container{position:relative;z-index:1}
.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 26px rgba(0,54,68,.08);transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.post:hover{transform:translateY(-8px);box-shadow:0 30px 56px rgba(0,54,68,.2);border-color:rgba(var(--teal-rgb),.55)}
.post__media{position:relative;display:block;aspect-ratio:1200/630;overflow:hidden;background:var(--surface-2)}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);will-change:transform}
.post:hover .post__media img{transform:scale(1.06)}
.post__body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px;border-top:4px solid var(--teal)}
.post__date{font-size:13px;font-weight:600;color:var(--teal-cta);margin-bottom:10px}
.post h3{font-size:20px;line-height:1.25;color:var(--deep);margin-bottom:12px;transition:color .3s}
.post:hover h3{color:var(--teal-cta)}
.post__excerpt{font-size:14.5px;line-height:1.65;color:var(--muted);flex:1;margin-bottom:18px}
.post__link{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--teal-cta);display:inline-flex;align-items:center;gap:7px;transition:gap .3s var(--ease),color .3s}
.post__link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.post:hover .post__link{gap:12px;color:var(--deep)}
.post:hover .post__link svg{transform:translateX(4px)}
.blog__more{text-align:center;margin-top:46px}
@media(max-width:960px){.blog__grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* ===== CTA / CONTACT ===== */
.cta{position:relative;color:#fff;padding:clamp(76px,9vw,120px) 0;overflow:hidden;text-align:center;background:var(--deep-2)}
.cta__bg{position:absolute;inset:-8% 0;background:var(--tex,url('../assets/photos/tech-greet.webp')) center 35%/cover no-repeat;will-change:transform}
.cta__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,36,46,.82),rgba(0,54,68,.74) 50%,rgba(0,36,46,.86))}
.cta__inner{position:relative;z-index:1;max-width:820px;margin:0 auto}
.cta h2{color:#fff;font-size:clamp(34px,4.6vw,58px);margin-bottom:18px}
.cta p{color:rgba(255,255,255,.83);font-size:19px;line-height:1.6;margin-bottom:34px}
.cta__row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta__meta{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;margin-top:46px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.cta__meta span{display:flex;flex-direction:column;gap:5px;font-size:15px;color:rgba(255,255,255,.82)}
.cta__meta b{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--teal)}
@media(max-width:680px){.cta__row .btn{width:100%}.cta__meta{gap:24px}}

/* ===== FOOTER ===== */
.footer{position:relative;color:rgba(255,255,255,.66);padding:72px 0 34px;border-top:4px solid var(--teal);overflow:hidden;background:var(--deep-2)}
.footer>.container{position:relative;z-index:1}
.footer__inner{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:44px}
/* the logo is built for a dark ground, so it needs no plate behind it */
.footer__logoplate{display:inline-block;margin-bottom:18px;transition:transform .35s var(--ease)}
.footer__logoplate:hover{transform:translateY(-2px)}
.footer__logo{height:136px;width:auto}
.footer__blurb{font-size:14.5px;line-height:1.68;color:rgba(255,255,255,.62);max-width:36ch}
.footer__col h4{color:#fff;font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:16px}
.footer__col a,.footer__col span{display:block;font-size:14.5px;color:rgba(255,255,255,.64);margin-bottom:11px;transition:color .25s}
.footer__col a:hover{color:var(--teal)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;color:rgba(255,255,255,.58); padding-bottom:30px;}
.footer__legal{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.footer__legal a{color:rgba(255,255,255,.62);transition:color .25s}
.footer__legal a:hover{color:var(--teal)}
.footer__legal a+a::before{content:"\00b7";margin-right:10px;color:rgba(255,255,255,.3)}
@media(max-width:960px){.footer__inner{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:600px){.footer__inner{grid-template-columns:1fr}.footer__bottom{flex-direction:column;text-align:center;padding-bottom: 60px;}.footer__legal a{font-size:12px;}
.page-id-13228 .rebate-bar {
    bottom: 80px!important;

}
}
/* ===== STICKY CTA ===== */
.sticky-cta{position:fixed;right:22px;bottom:22px;z-index:999;display:inline-flex;align-items:center;gap:10px;background:var(--teal-cta);color:#fff;font-family:var(--font-display);font-weight:700;font-size:16px;padding:15px 26px;border-radius:9px;box-shadow:0 12px 32px rgba(var(--cta-rgb),.44);opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease),box-shadow .35s,background .25s}
.sticky-cta.show{opacity:1;transform:none;pointer-events:auto}
.sticky-cta.show:hover{background:var(--teal-cta-deep);transform:translateY(-3px)}
.sticky-cta__dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:0 0 auto;animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--teal-rgb),.65)}70%{box-shadow:0 0 0 8px rgba(var(--teal-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--teal-rgb),0)}}
@media(prefers-reduced-motion:reduce){.sticky-cta__dot{animation:none}}
@media(max-width:680px){.sticky-cta{right:12px;bottom:12px;padding:13px 20px;font-size:14px}}

/* =====================================================================
   HOVER INTERACTIONS
   Layered on top of the base styles above. Every rule here is decorative
   only, so the reduced-motion block at the end can safely neutralise it.
   ===================================================================== */

/* --- service tiles: teal rule wipes across, arrow leads, title shifts --- */
.svc__body{position:relative}
.svc__body::before{content:"";position:absolute;top:-4px;left:0;width:0;height:4px;background:var(--teal-cta);transition:width .45s var(--ease)}
.svc:hover .svc__body::before{width:100%}
.svc:hover{border-color:rgba(var(--teal-rgb),.55)}
.svc h3{transition:color .3s var(--ease),transform .35s var(--ease)}
.svc:hover h3{color:var(--teal-cta);transform:translateX(3px)}
.svc__link{transition:gap .3s var(--ease),color .3s}
.svc:hover .svc__link{gap:12px;color:var(--deep)}
/* photo pushes in a little harder than the base 1.06 as the card lifts */
.svc__media img{transform-origin:center 55%}
.svc:hover .svc__media img{transform:scale(1.09)}

/* --- check icons: flip to teal, pop, and glow --- */
.why__check{transition:transform .4s var(--ease),background .3s,color .3s,box-shadow .3s}
.why__item:hover .why__check{background:var(--teal-cta);color:#fff;transform:scale(1.16) rotate(-8deg);box-shadow:0 10px 22px rgba(var(--cta-rgb),.4)}
.why__check svg{transition:transform .4s var(--ease)}
.why__item:hover .why__check svg{transform:scale(1.1)}
.why__txt strong{transition:color .3s}
.why__item:hover .why__txt strong{color:var(--teal-cta)}
.why__item{border-radius:10px;padding:4px;margin:-4px;transition:background .3s}
.why__item:hover{background:rgba(var(--teal-rgb),.09)}
/* the why photo is GSAP-parallaxed (inline transform), so it gets no hover scale
   of its own. The tag on top of it carries the hover instead. */
.why__media-tag{transition:transform .35s var(--ease),background .3s}
.why__media:hover .why__media-tag{transform:translateY(-4px);background:var(--deep)}

/* --- stat cards --- */
.statcard{transition:transform .35s var(--ease),background .3s,border-color .3s,box-shadow .35s}
.statcard:hover{transform:translateY(-6px);background:rgba(255,255,255,.13);border-color:rgba(var(--teal-rgb),.6);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.statcard b{transition:transform .35s var(--ease)}
.statcard:hover b{transform:scale(1.06)}

/* --- award badges in the marquee (track pauses on hover) --- */
.cert{transition:transform .35s var(--ease),box-shadow .35s}
.cert:hover{transform:translateY(-8px) scale(1.04);box-shadow:0 24px 44px rgba(0,0,0,.42)}
.cert img{transition:transform .35s var(--ease)}
.cert:hover img{transform:scale(1.06)}

/* --- offer cards: number swells, glow sweeps across --- */
.offer::before{transition:transform .6s var(--ease),opacity .45s}
.offer:hover::before{transform:translate(-40px,40px) scale(1.35);opacity:.85}
.offer__big{transition:transform .4s var(--ease)}
.offer:hover .offer__big{transform:scale(1.07)}
.offer__big,.offer h3,.offer p,.offer__cta{transform-origin:left center}
.offer:hover .offer__cta{transform:translateX(4px)}

/* --- review cards --- */
.rev__mark{transition:transform .4s var(--ease),background .3s,color .3s}
.rev:hover .rev__mark{transform:rotate(-8deg) scale(1.1);background:var(--teal-cta);color:#fff}
.rev__stars svg{transition:transform .35s var(--ease)}
.rev:hover .rev__stars svg{transform:scale(1.14)}
.rev:hover .rev__stars svg:nth-child(2){transition-delay:.04s}
.rev:hover .rev__stars svg:nth-child(3){transition-delay:.08s}
.rev:hover .rev__stars svg:nth-child(4){transition-delay:.12s}
.rev:hover .rev__stars svg:nth-child(5){transition-delay:.16s}
.rev:hover{border-color:rgba(var(--teal-rgb),.5)}

/* --- service-area hub cards --- */
.hub__scrim{transition:background .4s var(--ease)}
.hub:hover .hub__scrim{background:linear-gradient(180deg,rgba(0,36,46,.2) 20%,rgba(0,54,68,.92) 100%)}
.hub__body{transition:transform .4s var(--ease)}
.hub:hover .hub__body{transform:translateY(-6px)}
.hub h3{transition:color .3s}
.hub:hover h3{color:var(--teal)}

/* --- city chips --- */
.areas__list li{cursor:default}

/* --- footer links slide --- */
.footer__col a{position:relative;width:fit-content;transition:color .25s,transform .25s var(--ease)}
.footer__col a:hover{transform:translateX(5px)}

/* --- nav logo lift --- */
.nav__brand{display:inline-flex;transition:transform .35s var(--ease)}
.nav__brand:hover{transform:translateY(-2px)}

/* touch devices get no hover transforms, only the base styles */
@media(hover:none){
  .svc:hover,.statcard:hover,.cert:hover,.hub:hover .hub__body,.rev:hover,.hprf:hover,.areas__list li:hover{transform:none}
}

/* =====================================================================
   PARALLAX
   JS adds .has-parallax to <html> only when GSAP is driving the motion,
   so these promotion hints never apply in the static fallback.
   ===================================================================== */
.has-parallax [data-parallax]{will-change:transform}
/* backgrounds are inset so the drift never exposes a bare edge */
.has-parallax .services__bg,
.has-parallax .why__bg,
.has-parallax .certs__bg,
.has-parallax .reviews__bg,
.has-parallax .areas__bg,
.has-parallax .blog__bg,
.has-parallax .formsec__bg,
.has-parallax .ck__bg{inset:-12% 0}
.svc__media img,.hub img{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .svc__body::before,.offer::before{transition:none}
  .svc:hover .svc__media img,.why__item:hover .why__check,
  .statcard:hover,.cert:hover,.rev:hover .rev__mark,.hub:hover .hub__body,
  .areas__list li:hover,.footer__col a:hover,.nav__brand:hover,.hprf:hover,
  .offer:hover .offer__big,.offer:hover::before{transform:none}
  .has-parallax [data-parallax],.svc__media img,.hub img{will-change:auto}
}

/* =====================================================================
   INTERIOR PAGES
   Sections used by the generated pages (tools/build.py). They reuse the
   homepage tokens, hover layer and parallax hooks so the chrome matches.
   ===================================================================== */

/* interior pages have no full-height hero, so the fixed header needs room */
body.interior .phero{padding-top:var(--hdr,252px)}

/* ---- page hero ---- */
.phero{position:relative;display:flex;align-items:flex-end;min-height:clamp(420px,56vh,620px);background:var(--deep-2);overflow:hidden}
.phero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.phero__media img{position:absolute;top:-6%;left:0;width:100%;height:112%;object-fit:cover;object-position:center 42%;will-change:transform}
.phero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,36,46,.66) 0%,rgba(0,36,46,.44) 38%,rgba(0,36,46,.78) 100%)}
.phero__scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,36,46,.82) 0%,rgba(0,36,46,.5) 44%,rgba(0,36,46,.12) 76%,transparent 100%)}
.phero__content{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,6vw,78px)}
.phero__title{color:#fff;font-size:clamp(34px,4.9vw,62px);font-weight:800;line-height:1.04;letter-spacing:-.025em;max-width:19ch;margin-bottom:16px;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.phero__lead{font-size:18px;font-weight:500;line-height:1.65;color:rgba(255,255,255,.88);max-width:66ch;margin-bottom:30px}
.phero__cta{display:flex;gap:14px;flex-wrap:wrap}
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:18px;font-family:var(--font-display);font-weight:600;font-size:13.5px;color:rgba(255,255,255,.72)}
.crumb a{transition:color .25s}
.crumb a:hover{color:var(--teal)}
.crumb>*+*::before{content:"/";margin-right:8px;color:rgba(255,255,255,.4)}
.crumb span{color:var(--teal)}
@media(max-width:680px){
  .phero__cta{flex-direction:column}
  .phero__cta .btn{width:100%}
  .phero__title{max-width:none}
}

/* ---- rich text ---- */
.rich{position:relative;background:var(--bg);padding:clamp(60px,7vw,96px) 0;overflow:hidden}
.rich::before{content:"";position:absolute;inset:0;background:var(--tex,url('../assets/textures/brothers.webp')) center/cover no-repeat;pointer-events:none}
.rich--tint{background:var(--surface)}
.rich--tint::before{background-image:var(--tex,url('../assets/textures/vest.webp'))}
.rich__inner{position:relative;z-index:1}
.rich__inner{max-width:900px;margin:0 auto}
.rich__inner h2{font-size:clamp(26px,3.3vw,42px);margin-bottom:22px}
.rich__inner p{font-size:18.5px;line-height:1.78;color:var(--muted);margin-bottom:18px}
.rich__inner p:last-child{margin-bottom:0}
.rich__inner strong{color:var(--deep);font-weight:600}

/* ---- checklist band ---- */
.ck{position:relative;padding:clamp(64px,8vw,106px) 0;color:#fff;overflow:hidden;background:var(--deep-2)}
.ck__bg{position:absolute;inset:0;background:var(--tex,url('../assets/photos/van-brothers.webp')) center/cover no-repeat;will-change:transform}
.ck__scrim{position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,36,46,.82),rgba(0,54,68,.74))}
.ck__inner{position:relative;z-index:1}
.ck__grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:20px 34px;max-width:1040px;margin:0 auto}
.ck__item{display:flex;gap:15px;align-items:flex-start;border-radius:10px;padding:6px;margin:-6px;transition:background .3s}
.ck__item:hover{background:rgba(var(--teal-rgb),.1)}
.ck__dot{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(var(--teal-rgb),.16);color:var(--teal);margin-top:2px;transition:transform .4s var(--ease),background .3s,color .3s}
.ck__item:hover .ck__dot{background:var(--teal);color:var(--deep);transform:scale(1.14) rotate(-8deg)}
.ck__dot svg{width:17px;height:17px}
.ck__txt{font-size:16.5px;line-height:1.66;color:rgba(255,255,255,.9)}
.ck__txt strong{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;line-height:1.2;margin-bottom:3px}
@media(max-width:860px){.ck__grid{grid-template-columns:1fr}}

/* ---- card grid column counts ---- */
.svc__grid--4{grid-template-columns:repeat(4,1fr)}
.svc__grid--3{grid-template-columns:repeat(3,1fr)}
.svc__grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1180px){.svc__grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.svc__grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.svc__grid--4,.svc__grid--3,.svc__grid--2{grid-template-columns:1fr}}
/* non-linked cards keep the card styling without the pointer affordance */
article.svc{cursor:default}

@media(prefers-reduced-motion:reduce){
  .ck__item:hover .ck__dot{transform:none}
}

/* =====================================================================
   CONTACT FORM
   Mirrors their live Gravity Forms field set. Validation here is real;
   the submit state says plainly that the preview does not send, so it is
   never a control that silently does nothing.
   ===================================================================== */
.formsec{position:relative;padding:clamp(64px,8vw,106px) 0;overflow:hidden;background:var(--surface)}
.formsec__bg{position:absolute;inset:0;background:var(--tex,url('../assets/textures/greet.webp')) center/cover no-repeat}
.formsec__inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:start}
.formsec__copy h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:16px}
.formsec__copy p{font-size:17px;line-height:1.7;color:var(--muted);margin-bottom:26px;max-width:46ch}
.formsec__meta{list-style:none;display:grid;gap:16px}
.formsec__meta li{display:flex;flex-direction:column;gap:3px}
.formsec__meta b{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--teal-cta)}
.formsec__meta a,.formsec__meta span{font-size:16px;color:var(--deep)}
.formsec__meta a{font-family:var(--font-display);font-weight:700;font-size:21px;transition:color .25s}
.formsec__meta a:hover{color:var(--teal-cta)}

.kform{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);padding:clamp(24px,3vw,38px);box-shadow:0 14px 34px rgba(0,54,68,.1)}
.kform__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kform__f{display:block;margin-bottom:18px;position:relative}
.kform__f>span{display:block;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--deep);margin-bottom:7px}
.kform__f>span i{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-cta);margin-left:6px}
.kform input[type=text],.kform input[type=email],.kform input[type=tel],.kform textarea{
  width:100%;font-family:var(--font-body);font-size:15.5px;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--hairline);border-radius:9px;padding:13px 15px;transition:border-color .2s,background .2s,box-shadow .2s}
.kform input:focus,.kform textarea:focus{outline:none;border-color:var(--teal-cta);background:#fff;box-shadow:0 0 0 4px rgba(var(--cta-rgb),.12)}
.kform textarea{resize:vertical;min-height:130px}
.kform__check{display:flex;align-items:center;gap:10px;margin:4px 0 20px;position:relative;font-size:15px;color:var(--ink);cursor:pointer;min-height:44px;padding:10px 0}
.kform__check input{width:20px;height:20px;accent-color:var(--teal-cta);flex:0 0 auto}
.kform__err{display:none;font-style:normal;font-size:13px;color:#b3261e;margin-top:6px}
.kform__f.is-bad input,.kform__f.is-bad textarea{border-color:#b3261e;background:#fdf5f5}
.kform__f.is-bad .kform__err,.kform__check.is-bad .kform__err{display:block}
.kform__check.is-bad .kform__err{position:absolute;left:30px;top:calc(100% - 8px)}
.kform__send{width:100%}
.kform__note{margin-top:14px;font-size:13px;line-height:1.55;color:var(--muted);text-align:center}
.kform__done{margin-top:18px;padding:18px 20px;border-radius:10px;background:rgba(var(--teal-rgb),.12);border:1px solid rgba(var(--teal-rgb),.5)}
.kform__done strong{display:block;font-family:var(--font-display);font-size:17px;color:var(--deep);margin-bottom:5px}
.kform__done span{font-size:14.5px;line-height:1.6;color:var(--ink)}
.kform__done a{font-weight:700;color:var(--teal-cta)}
@media(max-width:900px){.formsec__inner{grid-template-columns:1fr}}
@media(max-width:560px){.kform__row{grid-template-columns:1fr;gap:0}}

/* Contact hero: the form rides in the hero so it is seen without scrolling */
.phero--form{align-items:center;min-height:clamp(560px,76vh,820px);padding-bottom:clamp(40px,5vw,64px)}
.phero--form .phero__media img{object-position:center 38%}
.phero--form .phero__scrim{background:linear-gradient(180deg,rgba(0,36,46,.78) 0%,rgba(0,36,46,.6) 40%,rgba(0,36,46,.84) 100%)}
.phero--form .phero__content{padding-bottom:0}
.phero__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(28px,4vw,56px);align-items:center}
.phero__intro{min-width:0}
.phero--form .phero__title{font-size:clamp(32px,4.2vw,52px);max-width:14ch}
.phero--form .phero__lead{margin-bottom:26px;max-width:46ch}
.phero__meta{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.phero__meta li{display:grid;gap:3px}
.phero__meta b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);font-weight:700}
.phero__meta a,.phero__meta span{color:rgba(255,255,255,.9);font-size:15px;font-weight:600;text-decoration:none}
.phero__meta a:hover{color:#fff;text-decoration:underline}

.phero__formcard{background:#fff;border-radius:18px;padding:clamp(22px,2.4vw,32px);
  box-shadow:0 30px 70px rgba(0,22,30,.42);border-top:4px solid var(--teal);min-width:0}
.phero__formtitle{font-size:clamp(21px,2.1vw,27px);font-weight:800;color:var(--deep);letter-spacing:-.02em;margin-bottom:7px}
.phero__formlead{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:18px}
.kform--hero{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.kform--hero .kform__row{gap:12px}
.kform--hero textarea{min-height:104px}
.kform--hero .kform__send{width:100%;justify-content:center}

@media(max-width:980px){
  .phero--form{min-height:0;padding-bottom:36px}
  .phero__split{grid-template-columns:1fr;gap:26px;align-items:start}
  .phero--form .phero__title{max-width:20ch}
  .phero__meta{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}
@media(max-width:560px){
  .phero__formcard{padding:20px;border-radius:14px}
  .phero--form .phero__lead{margin-bottom:20px}
}

/* FAQ accordion: each question opens its own answer */
.faq{position:relative;padding:clamp(64px,8vw,104px) 0;background:var(--surface);overflow:hidden}
.faq__bg{position:absolute;inset:-12% 0;z-index:0;background-image:var(--tex);background-size:cover;background-position:center;opacity:.5}
.faq__inner{position:relative;z-index:1}
.faq__list{list-style:none;margin:28px auto 0;padding:0;max-width:900px;display:grid;gap:12px}
.faq__d{background:#fff;border:1px solid var(--hairline);border-radius:14px;overflow:hidden;
  box-shadow:0 10px 26px rgba(0,54,68,.07);transition:box-shadow .3s var(--ease),border-color .3s}
.faq__d[open]{border-color:var(--teal);box-shadow:0 18px 40px rgba(0,54,68,.13)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);list-style:none;
  font-family:var(--font-head);font-size:clamp(15.5px,1.5vw,18px);font-weight:700;color:var(--deep);
  line-height:1.4;transition:background .25s,color .25s}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{background:var(--surface-2);color:var(--teal-cta)}
.faq__d[open] .faq__q{background:var(--surface-2)}
.faq__qt{min-width:0}
.faq__icon{position:relative;flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  background:var(--teal-cta);transition:transform .32s var(--ease),background .25s}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:2.4px;
  border-radius:2px;background:#fff;transform:translate(-50%,-50%);transition:opacity .25s,transform .32s var(--ease)}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__d[open] .faq__icon{transform:rotate(180deg)}
.faq__d[open] .faq__icon::after{opacity:0}
.faq__a{padding:4px clamp(18px,2vw,26px) clamp(20px,2.2vw,26px);border-top:1px solid var(--hairline)}
.faq__a>p{font-size:16.5px;line-height:1.75;color:var(--muted);margin-top:14px}
.faq__points{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.faq__points li{display:flex;gap:11px;align-items:flex-start;font-size:16px;line-height:1.7;color:var(--muted)}
.faq__points strong{color:var(--ink);display:block}
.faq__dot{flex:0 0 19px;width:19px;height:19px;margin-top:3px;border-radius:50%;background:var(--mint);
  display:grid;place-items:center;color:var(--deep)}
.faq__dot svg{width:11px;height:11px}
@media(prefers-reduced-motion:reduce){.faq__icon,.faq__d{transition:none}}

/* Prose bands: the picture holds one whole side of the band, edge to edge,
   with the copy set against it rather than both sitting in boxes */
.why--prose{padding:0;background:var(--bg)}
.why--prose .why__bg{opacity:.5}
.why--prose .why__grid{max-width:none;width:100%;padding:0;gap:0;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.why--prose .why__media{aspect-ratio:auto;border-radius:0;box-shadow:none;
  min-height:clamp(400px,42vw,580px)}
.why--prose .why__media img{transform:none}
.why--prose .why__copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,5.4vw,86px) clamp(26px,4.4vw,78px)}
.why--prose .why__copy>*{max-width:56ch}
.why--prose .why__copy h2{font-size:clamp(25px,2.7vw,36px);margin-bottom:16px}
.why--prose .why__copy>p{margin-bottom:16px}
.why--prose .why__copy>p:last-child{margin-bottom:0}
/* a hairline of brand colour where the picture meets the copy */
.why--prose .why__media::after{content:"";position:absolute;top:0;bottom:0;right:0;width:4px;
  background:var(--teal);opacity:.9}
.why--prose:has(.why__copy:first-child) .why__media::after{right:auto;left:0}
@media(max-width:860px){
  .why--prose .why__grid{grid-template-columns:1fr}
  .why--prose .why__media{min-height:0;aspect-ratio:16/10;order:-1}
  .why--prose .why__media::after{top:auto;left:0;right:0;bottom:0;width:auto;height:4px}
  .why--prose .why__copy{padding:clamp(30px,7vw,44px) 20px}
}

/* Checklists read as cards rather than loose ticks */
.ck__grid{gap:16px}
.ck__item{align-items:flex-start;gap:17px;padding:20px 22px;margin:0;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(2px);
  transition:background .3s var(--ease),border-color .3s,transform .3s var(--ease),box-shadow .3s}
.ck__item:hover{background:rgba(255,255,255,.12);border-color:rgba(var(--teal-rgb),.6);
  transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,22,30,.3)}
.ck__dot{flex:0 0 38px;width:38px;height:38px;border-radius:11px;margin-top:0;
  background:var(--teal);color:var(--deep)}
.ck__dot svg{width:21px;height:21px;stroke-width:3}
.ck__item:hover .ck__dot{background:#fff;color:var(--teal-cta);transform:scale(1.1) rotate(-6deg)}

.why__list{gap:14px}
.why__item{align-items:flex-start;gap:16px;padding:16px 18px;margin:0;border-radius:13px;
  background:#fff;border:1px solid var(--hairline);
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s,background .3s}
.why__item:hover{background:#fff;border-color:var(--teal);transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(0,54,68,.12)}
.why__check{flex:0 0 36px;width:36px;height:36px;border-radius:11px;margin-top:0;
  background:var(--teal-cta);color:#fff}
.why__check svg{width:20px;height:20px;stroke-width:3}
.why__item:hover .why__check{background:var(--deep)}

.faq__dot{flex:0 0 22px;width:22px;height:22px}
.faq__dot svg{width:13px;height:13px;stroke-width:3}
@media(max-width:620px){
  .ck__item{padding:16px 16px;gap:14px}
  .ck__dot{flex:0 0 34px;width:34px;height:34px}
}

/* Text-only bands get a little structure so they do not read as a blank page */
.rich__inner h2{position:relative;padding-top:20px}
.rich__inner h2::before{content:"";position:absolute;top:0;left:0;width:54px;height:4px;
  border-radius:3px;background:var(--teal)}
.rich{background:var(--surface)}
.rich--tint{background:var(--bg)}
.rich::before{opacity:.75}

/* Tournament details and sign-up, mirroring their live golf page */
.ev{position:relative;padding:clamp(64px,8vw,106px) 0;color:#fff;overflow:hidden;background:var(--deep-2)}
.ev__bg{position:absolute;inset:-10% 0;background:var(--tex,url('../assets/photos/team-group.webp')) center/cover no-repeat;will-change:transform}
.ev__scrim{position:absolute;inset:0;background:linear-gradient(118deg,rgba(0,36,46,.9),rgba(0,54,68,.8))}
.ev__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
  gap:clamp(32px,4.5vw,66px);align-items:start}
.ev__copy h2{font-size:clamp(30px,3.6vw,46px);color:#fff;margin-bottom:8px}
.ev__lead{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.9vw,22px);
  color:var(--mint);margin-bottom:26px}
.ev__meta{list-style:none;display:grid;gap:14px;margin:0 0 30px;padding:0}
.ev__meta li{display:grid;gap:3px}
.ev__meta b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);font-weight:700}
.ev__meta span{font-size:16.5px;font-weight:600;color:rgba(255,255,255,.92)}
.ev__sched{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:ev}
.ev__sched li{position:relative;display:flex;align-items:baseline;gap:16px;padding:14px 18px;
  border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  transition:background .3s var(--ease),border-color .3s,transform .3s var(--ease)}
.ev__sched li:hover{background:rgba(255,255,255,.13);border-color:rgba(var(--teal-rgb),.6);transform:translateX(4px)}
.ev__sched b{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--teal);
  flex:0 0 84px;white-space:nowrap}
.ev__sched span{font-size:16.5px;color:rgba(255,255,255,.9)}

.ev__card{background:#fff;border-radius:18px;padding:clamp(22px,2.4vw,32px);
  box-shadow:0 30px 70px rgba(0,22,30,.42);border-top:4px solid var(--teal)}
.ev__cardtitle{font-size:clamp(20px,2.1vw,26px);font-weight:800;color:var(--deep);
  letter-spacing:-.02em;margin-bottom:5px;line-height:1.2}
.ev__req{font-size:12.5px;color:var(--muted);margin-bottom:16px}
.ev__req i{font-style:normal;color:#b3261e}
.kform__set{border:0;padding:0;margin:0 0 4px}
.kform__set legend{font-size:13px;font-weight:700;color:var(--deep);
  letter-spacing:.02em;margin-bottom:9px;padding:0}
.kform__picks{display:flex;gap:10px;flex-wrap:wrap}
.kform__pick{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:11px 16px;border-radius:11px;border:1.5px solid var(--hairline);background:var(--surface);
  font-size:15px;font-weight:600;color:var(--ink);
  transition:border-color .25s,background .25s,color .25s,transform .25s var(--ease)}
.kform__pick:hover{border-color:var(--teal);transform:translateY(-2px)}
.kform__pick input{accent-color:var(--teal-cta);width:17px;height:17px;margin:0}
.kform__pick:has(input:checked){border-color:var(--teal-cta);background:rgba(var(--teal-rgb),.12);color:var(--deep)}
@media(max-width:900px){
  .ev__grid{grid-template-columns:1fr}
  .ev__card{order:-1}
}

/* Optional button and fine print inside an image band */
.why__cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.why__ctanote{font-size:14.5px;color:var(--muted);font-weight:600}
.why__note{margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline);
  font-size:13.5px;line-height:1.6;color:var(--muted)}
.why--prose .why__cta{margin-top:22px}

/* Rebates grouped by the utility that offers them */
.provs{position:relative;padding:clamp(64px,8vw,104px) 0;background:var(--surface);overflow:hidden}
.provs__bg{position:absolute;inset:-12% 0;background-image:var(--tex);background-size:cover;
  background-position:center;opacity:.5}
.provs__inner{position:relative;z-index:1}
.provs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);
  margin-top:34px}
.prov{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);
  border-radius:16px;padding:clamp(22px,2.4vw,30px);box-shadow:0 12px 30px rgba(0,54,68,.08);
  transition:transform .32s var(--ease),box-shadow .32s,border-color .32s}
.prov:hover{transform:translateY(-6px);border-color:var(--teal);box-shadow:0 26px 54px rgba(0,54,68,.16)}
.prov__logo{display:grid;place-items:center;height:78px;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--hairline)}
.prov__logo img{max-height:60px;width:auto;max-width:100%;object-fit:contain}
.prov__list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.prov__list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--ink)}
.prov__tick{flex:0 0 20px;width:20px;height:20px;margin-top:2px;border-radius:6px;display:grid;
  place-items:center;background:rgba(var(--teal-rgb),.18);color:var(--teal-cta);transition:background .25s,color .25s}
.prov:hover .prov__tick{background:var(--teal-cta);color:#fff}
.prov__tick svg{width:12px;height:12px;stroke-width:3}
@media(max-width:900px){.provs__grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}

/* An odd last item spans the row rather than leaving a gap */
.ck__grid>li:last-child:nth-child(odd){grid-column:1/-1}
.provs__grid>.prov:last-child:nth-child(3n-1){grid-column:span 1}

/* Alternating tones so two pale sections never sit against each other.
   Last in the file on purpose: these win over each band's own background. */
.tone-a{background:var(--bg)}
.tone-b{background:var(--surface-green)}
/* the texture sits lighter over the green so the colour still reads */
/* Pale bands show their photograph in full and multiply it over the band's
   own colour. Multiply keeps the colour's hue and the picture's structure,
   so the band reads as a photographic surface rather than a flat fill, and
   the texture's light band keeps body copy above 4.5:1 either way. */
.tone-a .provs__bg,.tone-a .faq__bg,.tone-a .why__bg,
.tone-a .services__bg,.tone-a .offers__bg,.tone-a .reviews__bg,
.tone-a .areas__bg,.tone-a .blog__bg,.tone-a .formsec__bg,
.tone-b .provs__bg,.tone-b .faq__bg,.tone-b .why__bg,
.tone-b .services__bg,.tone-b .offers__bg,.tone-b .reviews__bg,
.tone-b .areas__bg,.tone-b .blog__bg,.tone-b .formsec__bg{opacity:1;mix-blend-mode:multiply}
.rich.tone-a::before,.offers.tone-a::before,
.rich.tone-b::before,.offers.tone-b::before{opacity:1;mix-blend-mode:multiply}
/* two dark bands in a row: the second sits a shade lighter and warmer */
.tone-d1{background:var(--deep-2)}
.tone-d2{background:var(--deep-3)}
.tone-d2 .ck__scrim,.tone-d2 .ev__scrim,.tone-d2 .statband__scrim{background:linear-gradient(118deg,rgba(11,65,82,.88),rgba(0,62,106,.78))}
.tone-d2 .cta__scrim{background:linear-gradient(118deg,rgba(11,65,82,.9),rgba(0,62,106,.8))}

/* the copy column centres itself against a picture that fills the band */
.why__copy{display:flex;flex-direction:column;justify-content:center}
@media(max-width:860px){
  .why__grid{grid-template-columns:1fr;align-items:start}
  .why__media{min-height:0;aspect-ratio:16/10}
}

/* Cards must not sit white on a white band. On a pale band they take the
   tinted fill; on a green band they stay white. Either way the card reads. */
.tone-a .why__item,
.tone-a .prov,
.tone-a .faq__d,
.tone-a .rev,
.tone-a .post,
.tone-a .svc{background:var(--surface)}
.tone-a .why__item:hover,
.tone-a .prov:hover,
.tone-a .faq__d:hover,
.tone-a .rev:hover,
.tone-a .post:hover,
.tone-a .svc:hover{background:#fff}
.tone-b .why__item,
.tone-b .prov,
.tone-b .faq__d,
.tone-b .rev,
.tone-b .post,
.tone-b .svc{background:#fff}

/* Testimonials run as a marquee. Without JS, or with reduced motion on, the
   row stays a plain horizontal scroller and nothing animates. */
.reviews__scroller.is-marquee{overflow:visible;width:max-content;scroll-snap-type:none;
  animation:scrollx var(--mq-time,60s) linear infinite;will-change:transform}
.reviews__carousel:has(.is-marquee){overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.reviews__carousel:hover .is-marquee,
.reviews__carousel:focus-within .is-marquee{animation-play-state:paused}
.is-marquee .rev{scroll-snap-align:none}
@media(prefers-reduced-motion:reduce){
  .reviews__scroller.is-marquee{animation:none;overflow-x:auto;width:auto}
  .reviews__carousel:has(.is-marquee){-webkit-mask-image:none;mask-image:none}
}

/* Slimmer testimonial cards: the quote sets the height, not the box */
.rev__quote{font-size:15px;line-height:1.62}
.rev__stars{margin-bottom:10px}
.rev__stars svg{width:15px;height:15px}
.rev__by{margin-top:16px;padding-top:14px;gap:11px}
.rev__mark{width:34px;height:34px;font-size:14px}
.rev__name{font-size:14.5px}
.rev__label{font-size:12.5px}
.reviews__scroller{gap:18px}
/* the home feature band carries a checklist, so it needs a little more room */
.why--prose .why__list{margin-top:4px}
.why--prose .why__copy>.why__list{max-width:none}

/* the trust strip gets a photograph behind it like every other band */
.trustmq{position:relative}
.trustmq__bg{position:absolute;inset:0;background:var(--tex,url('../assets/photos/shop-talk.webp')) center/cover no-repeat}
.trustmq__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,54,68,.93),rgba(0,36,46,.88))}
.trustmq>.marquee{position:relative;z-index:1}

/* multiply must blend with the band's own colour, not with whatever the page
   painted underneath it, so each pale band gets its own stacking context */
section.tone-a,section.tone-b{isolation:isolate}

/* Blog index and the article template */
.blog__note{max-width:760px;margin:30px auto 0;text-align:center;font-size:14.5px;color:var(--muted)}

/* The article reads in one column, the way their own post does */
.art{position:relative;padding:clamp(54px,6.5vw,88px) 0;overflow:hidden}
.art__bg{position:absolute;inset:-10% 0;background-image:var(--tex);background-size:cover;background-position:center}
.art>.container{position:relative;z-index:1}
.art__body{max-width:68ch;margin:0 auto}
.art__sec{margin-bottom:clamp(34px,4vw,52px)}
.art__sec:last-child{margin-bottom:0}
.art__sec+.art__sec{padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--hairline)}
.art__body h2{font-size:clamp(24px,2.7vw,33px);color:var(--deep);line-height:1.2;
  margin:0 0 14px;position:relative;padding-top:20px}
.art__body h2::before{content:"";position:absolute;top:0;left:0;width:48px;height:4px;
  border-radius:3px;background:var(--teal)}
.art__body h3{font-size:clamp(17px,1.8vw,20px);color:var(--deep);margin:26px 0 8px;
  padding-left:14px;border-left:3px solid var(--mint)}
.art__body p{font-size:17.5px;line-height:1.8;color:var(--muted);margin-bottom:16px}
.art__body p:last-child{margin-bottom:0}
.art__sec:first-child>p:first-child{font-size:20px;line-height:1.7;color:var(--ink);font-weight:500}
.art__list{list-style:none;margin:14px 0 20px;padding:0;display:grid;gap:11px}
.art__list li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.7;color:var(--muted)}
.art__tick{flex:0 0 22px;width:22px;height:22px;margin-top:3px;border-radius:7px;display:grid;place-items:center;
  background:rgba(var(--teal-rgb),.18);color:var(--teal-cta)}
.art__tick svg{width:13px;height:13px;stroke-width:3}
.art__fig{margin:26px 0;border-radius:16px;overflow:hidden;background:var(--surface-2);
  box-shadow:0 18px 40px rgba(0,54,68,.14);border-bottom:4px solid var(--teal)}
.art__fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.art__quote{margin:26px 0;padding:20px 24px;border-left:4px solid var(--teal);background:var(--surface);
  border-radius:0 14px 14px 0;font-family:var(--font-display);font-size:19px;line-height:1.6;color:var(--deep)}
.art__backrow{max-width:68ch;margin:36px auto 0;padding-top:20px;border-top:1px solid var(--hairline)}
.art__back{font-size:15px;font-weight:700;color:var(--teal-cta);text-decoration:none}
.art__back:hover{text-decoration:underline}

/* The author closes the piece, in a band of its own */
.auth{position:relative;padding:clamp(44px,5vw,66px) 0;overflow:hidden}
.auth__bg{position:absolute;inset:-10% 0;background-image:var(--tex);background-size:cover;background-position:center}
.auth__inner{position:relative;z-index:1;display:grid;grid-template-columns:120px minmax(0,1fr);
  gap:clamp(20px,3vw,34px);align-items:center;max-width:860px;margin:0 auto;
  background:#fff;border:1px solid var(--hairline);border-radius:18px;
  padding:clamp(22px,2.6vw,30px);box-shadow:0 18px 40px rgba(0,54,68,.12)}
.auth__photo{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid var(--teal)}
.auth__label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-cta);font-weight:700;margin-bottom:5px}
.auth__inner h2{font-size:clamp(21px,2.2vw,26px);color:var(--deep);margin:0 0 2px}
.auth__role{display:block;font-size:14.5px;font-weight:600;color:var(--muted);margin-bottom:10px}
.auth__inner p{font-size:16px;line-height:1.72;color:var(--muted);margin:0}
@media(max-width:620px){
  .auth__inner{grid-template-columns:1fr;text-align:center;justify-items:center}
  .auth__photo{width:104px;height:104px}
}


/* A card with no page yet: still a card, but plainly not a link */
.post--soon{cursor:default;opacity:.9}
.post--soon:hover{transform:none;box-shadow:0 10px 26px rgba(0,54,68,.08);border-color:var(--hairline)}
.post--soon .post__media img{filter:saturate(.75)}
.post--soon:hover .post__media img{transform:none}
.post__soon{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;
  font-size:13.5px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.post__soon::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hairline);
  border:2px solid var(--muted);flex:0 0 auto}
/* the home strip holds a single example too, so it should not stretch */
.blog__grid{grid-template-columns:repeat(auto-fit,minmax(300px,360px));
  justify-content:center;max-width:1280px;margin-inline:auto}