/* ============================================================
   CAPRI PLUMBING — Site Stylesheet
   Brand: navy + blue, rounded corners throughout.
   Headers: Suisse Intl · Body: Gravity
   ============================================================ */

@font-face{font-family:"Suisse Intl";src:url("assets/fonts/header/SuisseIntl/SuisseIntl-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Intl";src:url("assets/fonts/header/SuisseIntl/SuisseIntl-Regular.ttf") format("truetype");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Intl";src:url("assets/fonts/header/SuisseIntl/SuisseIntl-Bold.ttf") format("truetype");font-weight:600 800;font-style:normal;font-display:swap}

@font-face{font-family:"Gravity";src:url("assets/fonts/body copy/gravity/Gravity-UltraLight.otf") format("opentype");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Gravity";src:url("assets/fonts/body copy/gravity/Gravity-UltraLightItalic.otf") format("opentype");font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:"Gravity";src:url("assets/fonts/body copy/gravity/Gravity-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Gravity";src:url("assets/fonts/body copy/gravity/Gravity-LightItalic.otf") format("opentype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Gravity";src:url("assets/fonts/body copy/gravity/Gravity-Book.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Gravity";src:url("assets/fonts/body copy/gravity/Gravity-BookItalic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Gravity";src:url("assets/fonts/body copy/gravity/Gravity-Regular.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Gravity";src:url("assets/fonts/body copy/gravity/Gravity-Italic.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Gravity";src:url("assets/fonts/body copy/gravity/Gravity-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Gravity";src:url("assets/fonts/body copy/gravity/Gravity-BoldItalic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}

:root{
  --navy:#03102B;
  --navy-700:#061634;
  --navy-600:#0A1C40;
  --blue:#5D92FF;
  --blue-dark:#3F7CFF;
  --white:#ffffff;
  --offwhite:#EAF1FB;
  --accent:#435C83;
  --accent-lt:#B4BECD;
  --line:#D6DFED;
  --line-dark:rgba(255,255,255,.14);
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(3,16,43,.06),0 1px 1px rgba(3,16,43,.04);
  --shadow:0 8px 24px rgba(3,16,43,.10);
  --maxw:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --head:"Suisse Intl",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Gravity","Suisse Intl",-apple-system,sans-serif;
  --space-1:8px;--space-2:12px;--space-3:16px;--space-4:24px;--space-5:32px;
  --space-6:48px;--space-7:64px;--space-8:96px;--space-9:128px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);font-weight:400;
  color:var(--navy);background:var(--white);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.06;letter-spacing:-.02em;color:var(--navy);text-transform:capitalize}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--blue);display:inline-block}
.eyebrow.center::after{content:"";width:26px;height:2px;border-radius:2px;background:var(--blue);display:inline-block}
.eyebrow.center{justify-content:center}
.eyebrow.icon::before{display:none}
.eyebrow .eyebrow-ic{font-size:16px;color:currentColor;flex:none}
.section{padding:var(--space-8) 0}
.section-head{max-width:720px}
.section-head.center{margin:0 auto;text-align:center}
.section h2{font-size:clamp(2.25rem,3.6vw,3.25rem);margin:18px 0 0}
.section .lead{color:var(--accent);font-size:18px;margin-top:20px;max-width:600px}
.section-head.center .lead{margin-left:auto;margin-right:auto}
.section.tint{background:var(--offwhite)}
@media(max-width:760px){.section{padding:var(--space-6) 0}.section h2{font-size:clamp(1.875rem,4vw,2.75rem)}}

/* any heading sitting on a navy/dark section reads white, not the default navy */
.hero h1,.hero h2,.hero h3,
.subhero h1,.subhero h2,.subhero h3,
.compare h2,.compare h3,
.finance h2,.finance h3,
.cta-band h2,.cta-band h3,
.how.navy h2,.how.navy h3,
.social h2,.social h3,
.oc-band h2,.oc-band h3,
footer h2,footer h3,footer h4,
.mobile-menu h2,.mobile-menu h3{color:#fff}

/* buttons: flat fills, color-only hover states, no glow, no lift */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--head);font-weight:600;font-size:15px;
  padding:15px 28px;border-radius:100px;border:1.5px solid transparent;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s;white-space:nowrap;
}
.btn i{font-size:17px;flex:none}
.btn-primary,.btn-dark{background:var(--navy);color:#fff}
.btn-primary:hover,.btn-dark:hover{background:var(--blue-dark)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-outline{border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-accent{background:var(--blue-dark);color:#fff}
.btn-accent:hover{background:var(--blue)}
.btn-text{background:none;border:0;padding:0;color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .25s}
.btn-text:hover{text-decoration-color:currentColor}
.btn-lg{padding:18px 34px;font-size:16px}
/* a navy-fill/white-text button reads fine on a light page, but on the
   hero/subhero/cta-band's own dark navy backdrop it has almost no contrast --
   inverted to a white fill + navy text here specifically */
.hero .btn-primary,.subhero .btn-primary,.cta-band .btn-primary,
header.nav.nav-transparent .btn-primary{background:#fff;color:var(--navy)}
.hero .btn-primary:hover,.subhero .btn-primary:hover,.cta-band .btn-primary:hover,
header.nav.nav-transparent .btn-primary:hover{background:var(--blue-dark);color:#fff}

/* ---------- preloader / page transition ---------- */
#preloader{position:fixed;inset:0;z-index:400;background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s linear 0s}
#preloader img{width:min(50vw,260px);height:auto;filter:brightness(0) invert(1)}
body.loaded #preloader{opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}

/* ---------- top utility bar ---------- */
.utility{background:var(--navy);color:var(--accent-lt);font-size:13px}
.utility .wrap{display:flex;align-items:center;justify-content:center;height:46px;gap:32px}
.utility a{color:var(--accent-lt);transition:color .2s}
.utility a:hover{color:#fff}
.utility .u-left{display:flex;gap:42px;align-items:center}
.utility .u-item{display:flex;align-items:center;gap:10px}
.utility .u-item i{font-size:14px;color:var(--blue)}
.utility .u-offer{color:#fff;font-weight:600;font-size:12.5px;letter-spacing:.02em}
@media(max-width:900px){.utility .u-left .u-item.hide-sm{display:none}.utility .u-offer{display:none}}
@media(max-width:760px){.utility{display:none}}

/* ---------- header ---------- */
header.nav{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid transparent;
  transition:background-color .45s ease,border-color .45s ease,box-shadow .3s;
}
header.nav.scrolled{box-shadow:var(--shadow-sm)}
header.nav.nav-transparent{background:transparent;border-bottom:1px solid transparent;box-shadow:none}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.nav .logo{position:relative;display:inline-flex;align-items:center;opacity:1;transition:opacity .35s ease}
.nav .logo img{height:62px;max-width:none;transition:opacity .35s ease,height .3s ease}
.nav .logo .logo-light{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0}
/* pages have no logo of their own in the hero/subhero -- swap to the white cutout, no background needed */
header.nav.nav-transparent .logo .logo-dark{opacity:0}
header.nav.nav-transparent .logo .logo-light{opacity:1}
.nav ul{list-style:none;display:flex;gap:30px;align-items:center}
.nav ul a{font-family:var(--head);font-size:14.5px;font-weight:600;color:var(--accent);position:relative;padding:6px 0;transition:color .35s ease}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;height:2px;border-radius:2px;width:0;background:var(--navy);transition:width .3s var(--ease),background-color .35s ease}
.nav ul a:hover::after,.nav ul a.active::after{width:100%}
.nav ul a:hover,.nav ul a.active{color:var(--navy)}
.nav ul li{position:relative}
.nav ul li.has-drop>a{display:inline-flex;align-items:center;gap:6px}
.nav ul li.has-drop>a .chev{font-size:11px;flex:none;color:currentColor;transition:transform .25s ease}
.nav ul li.has-drop:hover>a .chev{transform:rotate(180deg)}
.nav .drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);min-width:240px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:10px;display:grid;gap:2px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s,transform .2s,visibility .2s}
.nav ul li.has-drop:hover .drop,.nav ul li.has-drop:focus-within .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav .drop a{display:block;padding:11px 14px;border-radius:var(--radius);font-size:14px;font-weight:500;color:var(--accent)}
.nav .drop a::after{display:none}
.nav .drop a:hover{background:var(--offwhite);color:var(--navy)}
/* Plumbing/HVAC rows expand their subpages instead of always showing them --
   grid-template-rows 0fr->1fr animates to the real content height at any
   length (same technique as the FAQ accordion), with the inner .sub-in as
   the overflow:hidden host since a 0fr row still has to clip its content */
.mobile-menu nav .mm-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.12)}
.mobile-menu nav .mm-row a{border-bottom:0;flex:1}
.mm-plus{flex:none;width:40px;height:40px;display:grid;place-items:center;background:none;border:0;
  color:#fff;cursor:pointer}
.mm-plus i{font-size:15px;transition:transform .35s var(--ease)}
.mm-item.open .mm-plus i{transform:rotate(45deg)}
.mobile-menu nav .sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease);padding-left:14px}
.mm-item.open .sub{grid-template-rows:1fr}
.mobile-menu nav .sub .sub-in{overflow:hidden;min-height:0;display:grid}
.mobile-menu nav .sub a{font-size:16px;font-weight:500;padding:11px 0;border-bottom:0;color:var(--accent-lt)}
.nav .nav-cta{display:flex;align-items:center;gap:18px}
header.nav.nav-transparent nav>ul>li>a{color:#fff}
header.nav.nav-transparent nav>ul>li>a::after{background:#fff}
header.nav.nav-transparent .nav-toggle span{background:#fff}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px}
.nav-toggle span{width:26px;height:2px;border-radius:2px;background:var(--navy);display:block;transition:.3s}
@media(max-width:1120px){
  .nav ul{display:none}
  .nav-toggle{display:flex}
}
@media(max-width:520px){.nav .logo img{height:48px}header.nav.nav-transparent .logo img{height:38px}}
@media(max-width:760px){.nav-cta .btn-primary{padding:10px 18px;font-size:13px}}

/* ---------- HERO (video) ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;margin-top:-84px}
.hero-bg{position:absolute;left:0;right:0;top:-8%;height:118%;z-index:0;will-change:transform}
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(3,16,43,.85) 0%,rgba(3,16,43,0) 14%),
    linear-gradient(105deg,rgba(3,16,43,.92) 0%,rgba(3,16,43,.72) 42%,rgba(3,16,43,.38) 100%);}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--navy) 92%)}
.hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding-top:130px;padding-bottom:90px;min-height:calc(100vh - 42px)}
.hero-copy{max-width:640px}
@media(prefers-reduced-motion:reduce){.hero-bg{transform:none!important}}
.hero-copy .eyebrow{color:var(--accent-lt)}
.hero-copy .eyebrow::before{background:var(--blue)}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.24);padding:8px 16px;border-radius:100px;
  font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#fff;
  margin-top:26px}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none;
  animation:pulseDot 1.8s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.hero-badge .dot{animation:none}}
.hero h1{font-size:clamp(3rem,6vw,5.5rem);font-weight:700;margin:0;letter-spacing:-.02em;color:#fff}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p.sub{font-size:19px;color:var(--accent-lt);max-width:520px;margin-top:22px}
.hero .hero-actions{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap}
.trust-stats{display:flex;gap:64px;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex-shrink:0}
.trust-stats .t{display:flex;flex-direction:column;line-height:1.18;position:relative}
/* plain hairline divider between stats -- centered in the gap itself
   (not on padding) so column spacing has a single source of truth */
.trust-stats .t:not(:last-child)::after{content:"";position:absolute;right:-32px;top:6px;bottom:6px;
  width:1px;background:var(--line-dark)}
.trust-stats .t b{font-family:var(--head);font-size:clamp(1.75rem,3vw,2.25rem);color:#fff}
.trust-stats .t span:not(.stars){font-size:14.5px;color:var(--accent-lt);letter-spacing:.02em}
.trust-stats .stars{color:var(--blue);font-size:20px;letter-spacing:3px;display:inline-block}
@media(max-width:640px){.trust-stats{gap:40px}.trust-stats .t b{font-size:1.625rem}
  .trust-stats .t:not(:last-child)::after{right:-20px}}

/* ---------- emergency callout bar ---------- */
.emergency-bar{background:var(--navy);position:relative;z-index:2}
.emergency-bar .wrap{display:flex;align-items:center;justify-content:center;padding:46px 28px;flex-wrap:wrap}
@media(max-width:760px){.emergency-bar .wrap{padding:32px 20px}}

/* ---------- emergency floating toast ---------- */
.emergency-toast{position:fixed;right:24px;bottom:24px;z-index:150;display:flex;flex-direction:column;gap:12px;
  background:var(--navy);text-decoration:none;
  border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow);max-width:280px;
  transition:box-shadow .25s}
.emergency-toast:hover{box-shadow:0 12px 32px rgba(3,16,43,.22)}
.emergency-toast .et-msg{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--accent-lt)}
.emergency-toast .et-msg i{font-size:20px;color:var(--blue);flex-shrink:0}
.emergency-toast .et-msg b{color:#fff;font-family:var(--head)}
.emergency-toast .et-call{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;
  color:var(--navy);font-family:var(--head);font-weight:700;font-size:13.5px;padding:11px 16px;border-radius:100px;
  transition:background .2s}
.emergency-toast:hover .et-call{background:var(--offwhite)}
.emergency-toast .et-call i{font-size:15px;color:var(--navy);flex-shrink:0}
@media(max-width:760px){.emergency-toast{display:none}}

@media(max-width:940px){
  .hero .wrap{padding-top:160px;padding-bottom:60px;min-height:0}
}
/* phones: the fixed bottom call bar (.mobile-callbar) eats into the usable
   viewport, and with min-height:0 above, the hero is only as tall as its
   own content -- so that content has to be compact enough to clear the
   call bar instead of running underneath it */
@media(max-width:760px){
  /* back to a real viewport-height box (the 940px breakpoint above zeroes
     this out so content doesn't get stretched) so the absolutely-positioned
     .hero-bg video, which sizes itself off .hero's own height, fills the
     whole screen instead of just the content's box.
     100vh on real mobile Safari is the height WITH the address bar hidden
     -- taller than what's actually visible when the page first loads, so
     content vertically centered in a 100vh box can render below the fold,
     under the fixed call bar. 100svh ("small" viewport) is the guaranteed-
     visible height instead; the 100vh line stays first as a fallback for
     browsers that don't support svh (that declaration is simply invalid
     there, so it's ignored and the vh value above it still applies).
     padding-bottom is also widened to the call bar's own height (70px)
     plus breathing room, so centered content can never land behind it. */
  .hero .wrap{padding-top:108px;padding-bottom:94px;min-height:100vh;min-height:100svh}
  .hero-badge{display:none}
  .hero h1{font-size:clamp(2.5rem,11.5vw,3.75rem)}
  .hero .hero-actions{margin-top:24px}
  /* one CTA on mobile -- drop the phone-number ghost button, keep the quote button */
  .hero .hero-actions .btn-ghost{display:none}
}

/* ---------- offer strip ---------- */
.offerstrip{background:var(--navy);color:#fff}
.offerstrip .wrap{display:flex;align-items:center;justify-content:center;gap:40px;height:64px;flex-wrap:wrap;
  font-weight:600;font-size:15px}
.offerstrip .o{display:flex;align-items:center;gap:10px}
.offerstrip .o i{font-size:18px;color:#fff}
.offerstrip .o b{font-family:var(--head);font-size:18px}
.offerstrip .dot{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.4}
@media(max-width:760px){.offerstrip .dot{display:none}.offerstrip .wrap{gap:18px;height:auto;padding-top:16px;padding-bottom:16px}}

/* ---------- trust bar ---------- */
.trustbar{background:var(--offwhite);border-bottom:1px solid var(--line)}
.trustbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:24px 28px;flex-wrap:wrap}
.trustbar .tb-item{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--accent);font-weight:500}
.trustbar .tb-item i{font-size:22px;color:var(--navy);flex-shrink:0}
.trustbar .tb-item b{font-weight:700}

/* ---------- story / split media ---------- */
.story .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.story-media{position:relative}
.story-media .m-main{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:4/5}
.story-media .m-main img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.story-media:hover .m-main img{transform:scale(1.05)}
.story-media .m-badge{position:absolute;bottom:-26px;left:-26px;background:var(--navy);color:#fff;
  border-radius:var(--radius-lg);padding:22px 26px;box-shadow:var(--shadow);max-width:230px}
.story-media .m-badge b{font-family:var(--head);font-size:38px;color:#fff;display:block;line-height:1}
.story-media .m-badge span{font-size:13px;color:var(--accent-lt);margin-top:6px;display:block}
.story-body h2{margin-top:16px}
.story-list{list-style:none;margin-top:30px;display:grid;gap:16px}
.story-list li{display:flex;gap:14px;align-items:flex-start;font-size:16px;color:var(--navy)}
.story-list li i{font-size:22px;color:var(--navy);flex-shrink:0;margin-top:2px}
.story-body .btn{margin-top:34px}
@media(max-width:900px){.story .wrap{grid-template-columns:1fr;gap:64px}.story-media .m-badge{left:0}}

/* ---------- story carousel (merges the intro story + "who we help" cards
   into one rotating card, Nuve-style: one unified panel with text on one
   side and media on the other, arrows floating just outside it) ---------- */
.story.carousel .wrap{display:block;position:relative;max-width:none;padding:0 2%}
.car-card{background:var(--offwhite);border-radius:var(--radius-lg);overflow:hidden;
  display:grid;grid-template-columns:35fr 65fr;grid-template-rows:minmax(0,1fr);align-items:stretch;
  height:clamp(546px,81vh,806px)}
/* overflow:hidden clips at the padding edge, not the content edge -- so
   padding has to live INSIDE the clipped/sliding piece (on each slide, or
   on an inner viewport for media) rather than on the element overflow is
   set on, or the clip window ends up wider than the slide math assumes
   and neighboring slides peek in at the edges */
.car-body{position:relative;overflow:hidden}
/* slides sit side by side in a flex row and the whole track translates --
   a single-line flex row's height auto-stretches every item to match the
   tallest one, so the card height still stays constant across slides */
.car-body .car-track{display:flex;height:100%;transition:transform .6s var(--ease)}
.car-body .car-slide{flex:none;min-width:0;padding:36px 48px;display:flex;flex-direction:column;justify-content:center}
.car-body h2{margin-top:0;font-size:clamp(24px,2.6vw,36px);line-height:1.15}
.car-body .lead{font-size:16px;margin-top:14px;line-height:1.6;display:-webkit-box;
  -webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.car-body a.btn{margin-top:20px;align-self:flex-start}
.car-media{position:relative;padding:16px}
.car-media .car-viewport{position:relative;height:100%;border-radius:var(--radius-lg);overflow:hidden}
.car-media .car-track{display:flex;height:100%;transition:transform .6s var(--ease)}
.car-media .car-slide{flex:none;min-width:0;height:100%}
.car-media img.car-slide{width:100%;height:100%;object-fit:cover;display:block}
@media(prefers-reduced-motion:reduce){.car-body .car-track,.car-media .car-track{transition:none}}
.car-dots{display:flex;gap:8px;justify-content:center;margin-top:28px}
.car-dots .dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:0;padding:0;cursor:pointer;
  transition:background .2s,transform .2s}
.car-dots .dot.active{background:var(--navy);transform:scale(1.25)}
@media(max-width:900px){
  /* a 1fr column still defers to its item's min-content width unless told
     not to -- without minmax(0,...) the slide track's forced 300% width
     pushes the column (and the card) wider than the screen, running text
     off the right edge instead of wrapping inside it */
  .car-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;height:auto}
  .car-body{min-width:0}
  .car-media{order:-1;aspect-ratio:16/11.7;padding:16px;min-width:0}
  .car-body .car-slide{padding:40px 32px}
  .car-body h2{font-size:clamp(26px,6vw,38px)}
  /* desktop clamps the lead to 4 lines to protect a FIXED card height --
     mobile's card height is auto, so there's nothing to protect and the
     clamp just truncates longer copy (like the HVAC slide) mid-sentence */
  .car-body .lead{display:block;-webkit-line-clamp:unset;overflow:visible}
}
/* on phones the whole card (photo + headline + copy + button) needs to
   read in one frame without scrolling into the fixed call bar -- size the
   photo off viewport height (not width, which varies independently of how
   tall a given phone actually is) and shrink the type/padding to match */
@media(max-width:760px){
  .car-media{aspect-ratio:auto;height:clamp(143px,23.4vh,247px);height:clamp(143px,23.4svh,247px);padding:10px}
  .car-body .car-slide{padding:18px 18px}
  .car-body h2{font-size:clamp(18px,4.6vw,22px);line-height:1.15}
  .car-body .lead{font-size:12.5px;line-height:1.42;margin-top:8px}
  .car-body a.btn{margin-top:10px;padding:10px 20px;font-size:13px}
}

/* ---------- services — hover-expand accordion ---------- */
.prod-stack{display:flex;gap:4px;height:clamp(520px,74vh,780px);overflow:hidden;
  background:var(--navy);margin-top:52px;width:100vw;margin-left:calc(50% - 50vw);border-radius:0}
.prod-card{flex:1;position:relative;overflow:hidden;cursor:pointer;min-width:0;background:var(--navy);
  color:#fff;text-decoration:none;isolation:isolate;
  transition:flex .65s cubic-bezier(.5,0,.1,1)}
.prod-card:hover,.prod-card:focus-visible{flex:4.2}
.prod-stack:hover .prod-card:not(:hover) img{filter:brightness(.6) saturate(.9)}
.prod-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--navy);
  transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .6s ease;will-change:transform,filter}
.prod-card:hover img{transform:scale(1.05)}
/* uniform navy tint across every card photo so mixed source images read as one cohesive set */
.prod-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--navy-600);mix-blend-mode:color;opacity:.32}
.prod-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:background .4s ease;
  background:linear-gradient(180deg,rgba(3,16,43,.18) 0%,rgba(3,16,43,.12) 42%,rgba(3,16,43,.9) 100%)}
.pc-collapsed{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(20px,2vw,30px) clamp(15px,1.3vw,24px);pointer-events:none;transition:opacity .35s ease}
.pc-collapsed .pc-num{font-weight:600;font-size:clamp(11px,.9vw,13px);letter-spacing:.18em;color:var(--blue);
  text-shadow:0 1px 12px rgba(0,0,0,.55)}
.pc-collapsed .pc-vlabel{align-self:flex-start;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--head);font-weight:600;font-size:clamp(11px,.85vw,13px);letter-spacing:.3em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;max-height:72%}
.prod-card:hover .pc-collapsed{opacity:0}
.pc-expanded{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(24px,3vw,44px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;color:#fff;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .45s ease .18s,transform .55s cubic-bezier(.2,.8,.2,1) .15s}
.prod-card:hover .pc-expanded,.prod-card:focus-visible .pc-expanded{opacity:1;transform:none;pointer-events:auto}
.pc-expanded .pc-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;white-space:nowrap}
.pc-expanded .pc-eyebrow::before{content:"";width:22px;height:1.5px;background:var(--blue)}
.pc-expanded h3{font-family:var(--head);font-size:clamp(26px,3.2vw,44px);line-height:1;letter-spacing:-.03em;color:#fff;
  margin-bottom:14px;white-space:nowrap}
.pc-expanded .pc-meta{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap}
.pc-expanded .pc-meta .dot{width:4px;height:4px;background:var(--blue)}
.pc-go{flex:none;width:clamp(46px,3.4vw,56px);height:clamp(46px,3.4vw,56px);border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background .3s,border-color .3s,color .3s}
.pc-go i{font-size:18px;transition:transform .3s ease}
.prod-card:hover .pc-go{background:#fff;border-color:#fff;color:var(--navy)}
.prod-card:hover .pc-go i{transform:translateX(3px)}
.prod-hint{margin-top:22px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent)}
@media(max-width:820px){
  .prod-stack{flex-direction:column;height:auto;background:transparent;gap:0}
  .prod-card{flex:none;height:56vh;min-height:320px;border-radius:var(--radius-lg)}
  .prod-card:hover{flex:none}
  .prod-stack:hover .prod-card:not(:hover) img{filter:none}
  .pc-collapsed{opacity:0}
  .pc-expanded{opacity:1;transform:none;pointer-events:auto}
  .pc-expanded>div{min-width:0}
  .pc-expanded .pc-meta{white-space:normal;flex-wrap:wrap;row-gap:4px}
  .prod-hint{display:none}
}

/* ---------- comparison ---------- */
.compare{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.compare .section-head.center .lead{color:var(--accent-lt)}
.compare .eyebrow{color:var(--accent-lt)}
.compare .eyebrow::before,.compare .eyebrow::after{background:var(--blue)}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px;max-width:960px;margin-left:auto;margin-right:auto}
.cmp-col{border-radius:var(--radius-lg);padding:38px 34px}
.cmp-col.typical{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.cmp-col.premium{background:var(--navy-600);border:1.5px solid var(--blue-dark);position:relative}
.cmp-col .cmp-tag{font-family:var(--head);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;margin-bottom:6px}
.cmp-col.typical .cmp-tag{color:var(--accent-lt)}
.cmp-col.premium .cmp-tag{color:var(--blue)}
.cmp-col h3{color:#fff;font-size:25px;margin-bottom:24px}
.cmp-col ul{list-style:none;display:grid;gap:16px}
.cmp-col li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px}
.cmp-col li i{font-size:20px;flex-shrink:0;margin-top:2px}
.cmp-col.typical li{color:var(--accent-lt)}
.cmp-col.typical li i{color:var(--accent)}
.cmp-col.premium li{color:#eaf0ff}
.cmp-col.premium li i{color:var(--blue)}
.cmp-col.premium .badge-best{position:absolute;top:-13px;right:30px;background:#fff;color:var(--navy);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:100px}
@media(max-width:760px){.cmp-grid{grid-template-columns:1fr}}

/* ---------- projects / recent jobs ---------- */
.projects .proj-list{display:grid;gap:70px;margin-top:60px}
.proj{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.proj.rev .proj-info{order:-1}
.proj-media{display:flex;gap:12px;height:clamp(340px,40vw,500px)}
.proj-shot{flex:1;min-width:0;position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.proj-shot img{width:100%;height:100%;object-fit:cover;display:block}
.proj-shot .lbl{position:absolute;top:12px;left:12px;background:rgba(3,16,43,.8);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:100px}
.proj-info{background:var(--offwhite);border-radius:var(--radius-lg);padding:46px 44px;display:flex;flex-direction:column;justify-content:center}
.proj-info .p-eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);font-weight:600}
.proj-info h3{font-size:28px;margin:12px 0 14px}
.proj-info p{color:var(--accent);font-size:15.5px}
.proj-info .p-meta{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.proj-info .p-meta div b{font-family:var(--head);font-size:21px;color:var(--navy);display:block;line-height:1}
.proj-info .p-meta div span{font-size:12.5px;color:var(--accent);margin-top:4px;display:block}
@media(max-width:860px){.proj{grid-template-columns:1fr}.proj.rev .proj-info{order:0}}

/* ---------- how it works ---------- */
.how{background:var(--offwhite)}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
.how-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 28px 34px 30px;position:relative}
.how-step .num{font-family:var(--head);font-size:clamp(2.5rem,4vw,3.25rem);font-weight:700;color:var(--blue);
  line-height:1;margin-bottom:16px;display:block}
.how-step h3{font-size:19px}
.how-step p{color:var(--accent);font-size:14.5px;margin-top:10px}
@media(max-width:900px){.how-grid{grid-template-columns:1fr 1fr}}
/* mobile: swipe through the steps one at a time (scroll-snap) instead of
   stacking all 4 vertically and making the visitor scroll past each one */
@media(max-width:760px){
  .how-grid{display:flex;grid-template-columns:none;gap:16px;margin-top:40px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;scrollbar-width:none}
  .how-grid::-webkit-scrollbar{display:none}
  .how-step{flex:0 0 80%;scroll-snap-align:center}
}
/* navy variant */
.how.navy{background:var(--navy)}
.how.navy .eyebrow{color:var(--accent-lt)}
.how.navy .lead{color:var(--accent-lt)}
.how.navy .how-step{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.how.navy .how-step h3{color:#fff}
.how.navy .how-step p{color:var(--accent-lt)}

/* ---------- promise ---------- */
.promise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 60px;margin-top:56px}
.promise-item{display:flex;gap:20px;align-items:flex-start;padding-bottom:28px;border-bottom:1px solid var(--line)}
.promise-item .ic{width:52px;height:52px;border-radius:var(--radius);background:var(--navy);display:grid;place-items:center;flex-shrink:0}
.promise-item .ic i{font-size:24px;color:#fff}
.promise-item h3{font-size:20px}
.promise-item p{color:var(--accent);font-size:15px;margin-top:8px}
@media(max-width:760px){.promise-grid{grid-template-columns:1fr}}

/* ---------- social / video showcase ---------- */
.social{background:var(--navy);color:#fff}
.social .eyebrow{color:var(--accent-lt)}
.social .eyebrow::before,.social .eyebrow::after{background:var(--blue)}
.social .lead{color:var(--accent-lt)}
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.social-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:9/16;
  box-shadow:var(--shadow-sm);background:#000;transition:box-shadow .3s}
.social-card:hover{box-shadow:var(--shadow)}
.social-card video{width:100%;height:100%;object-fit:cover;display:block}
.social-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(3,16,43,.7) 0%,transparent 42%)}
.social-card .sc-tag{position:absolute;top:16px;left:16px;z-index:1;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);color:#fff;font-family:var(--head);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:100px}
.follow-row{margin-top:48px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.follow-row a{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);color:#fff;padding:13px 24px;border-radius:100px;
  font-family:var(--head);font-weight:600;font-size:14.5px;transition:background .25s}
.follow-row a:hover{background:rgba(255,255,255,.16)}
.follow-row i{font-size:19px;color:currentColor}
@media(max-width:820px){.social-grid{grid-template-columns:1fr;max-width:320px;margin-left:auto;margin-right:auto}}
/* keep all 3 videos in one row like desktop even on phones -- just scaled
   down -- rather than stacking them full-width and forcing a long scroll */
@media(max-width:760px){.social-grid{grid-template-columns:repeat(3,1fr);max-width:none;gap:8px}}

/* ---------- reviews ---------- */
.reviews .rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.reviews .rv-score{display:flex;align-items:center;gap:16px;background:var(--offwhite);border:1px solid var(--line);
  border-radius:100px;padding:12px 22px}
.reviews .rv-score .stars{color:var(--blue);letter-spacing:2px;font-size:17px}
.reviews .rv-score b{font-family:var(--head);font-size:22px}
.reviews .rv-score span{font-size:13px;color:var(--accent)}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
/* desktop: the track is a transparent wrapper so the 3 real cards still lay
   out directly in the grid; the duplicate set stays hidden until mobile
   turns this into a looping marquee */
.rv-track{display:contents}
.rv-card.rv-dup{display:none}
.rv-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 30px;box-shadow:var(--shadow-sm);
  transition:box-shadow .3s,transform .3s var(--ease)}
.rv-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.rv-card .stars{color:var(--blue);letter-spacing:2px;font-size:15px}
.rv-card p{font-size:15.5px;color:var(--navy);margin:16px 0 22px;line-height:1.65}
.rv-card .rv-by{display:flex;align-items:center;gap:12px}
.rv-card .rv-av{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:700;font-family:var(--head)}
.rv-card .rv-by b{font-size:15px}
.rv-card .rv-by span{font-size:12.5px;color:var(--accent);display:flex;align-items:center;gap:5px}
.rv-card .rv-by span i{font-size:13px}
@media(max-width:900px){.rv-grid{grid-template-columns:1fr}}
/* mobile: an auto-scrolling horizontal loop instead of a tall vertical
   stack -- the track holds the 3 cards plus an identical duplicate set, and
   the animation slides by --rv-loop (the exact pixel width of one set,
   measured in app.js) before snapping back to 0. A plain -50% looks close
   but isn't exact once gap is involved: 6 cards means 5 gaps across the
   whole track, so half of that total is half a gap short of where the
   duplicate set actually starts -- a few px, but enough to stutter every
   loop. --rv-loop has a 50% fallback only for the instant before JS runs */
@media(max-width:760px){
  .rv-grid{display:block;overflow:hidden;margin-top:36px;
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .rv-track{display:flex;gap:16px;width:max-content;--rv-loop:50%;
    animation:rvMarquee 26s linear infinite}
  .rv-grid:hover .rv-track{animation-play-state:paused}
  .rv-card,.rv-card.rv-dup{display:block;flex:0 0 min(64vw,260px);padding:26px 24px}
}
@keyframes rvMarquee{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--rv-loop)))}}
@media(prefers-reduced-motion:reduce){.rv-track{animation:none}}

/* ---------- membership band ---------- */
.finance{position:relative;color:#fff;background:var(--navy);overflow:hidden}
.finance .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:center;padding:80px 28px;position:relative;z-index:1}
.finance h2{font-size:clamp(28px,3.4vw,44px);color:#fff}
.finance p{color:var(--accent-lt);font-size:17px;margin-top:18px;max-width:520px}
.finance .fin-terms{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.finance .fin-terms .term{border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);padding:14px 20px;text-align:center;
  transition:border-color .3s}
.finance .fin-terms .term:hover{border-color:var(--blue)}
.finance .fin-terms .term b{font-family:var(--head);font-size:24px;color:#fff;display:block;line-height:1}
.finance .fin-terms .term span{font-size:12px;color:var(--accent-lt)}
.finance .fin-right{text-align:center}
.finance .fin-right .btn{width:100%}
.finance .fin-note{font-size:12px;color:var(--accent-lt);margin-top:14px}
@media(max-width:860px){.finance .wrap{grid-template-columns:1fr;gap:34px}}

/* ---------- cinematic OC video band ---------- */
.oc-band{position:relative;height:78vh;min-height:520px;overflow:hidden;color:#fff}
.oc-band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oc-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,16,43,.2) 0%,rgba(3,16,43,.5) 62%,rgba(3,16,43,.94) 100%)}
.oc-band .wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:64px}
.oc-band .eyebrow{color:var(--accent-lt)}
.oc-band .eyebrow::before{background:var(--blue)}
.oc-band h2{color:#fff;font-size:clamp(30px,4.4vw,54px);margin-top:16px;max-width:16ch}
.oc-band .cities{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.oc-band .cities span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;
  border-radius:100px;padding:8px 16px;font-size:13.5px;font-weight:500}
@media(max-width:760px){.oc-band{height:64vh}}

/* ---------- area + faq ---------- */
.area .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.area-map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.area-map iframe{width:100%;height:340px;border:0;display:block}
.area .cities{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.area .cities span{background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:8px 16px;font-size:13.5px;font-weight:500;color:var(--accent)}
.cities-center{justify-content:center}
/* a long city list centered row-by-row makes each row's left/right edges
   land somewhere different, which reads as ragged and unintentional on a
   narrow screen -- left-aligning it instead makes it read as one wrapping
   paragraph of chips, which looks deliberate at any width */
@media(max-width:760px){
  .cities-center{justify-content:flex-start}
  .area .cities{gap:8px}
  .area .cities span{padding:7px 13px;font-size:12.5px}
}
.zip-note{margin-top:30px;font-size:15px;color:var(--accent);text-align:center}
.zip-note a{color:var(--navy);font-weight:600;text-decoration:underline}
.section.navy{background:var(--navy)}
.section.navy h2{color:#fff}
.section.navy .zip-note{color:var(--accent-lt)}
.section.navy .zip-note a{color:#fff}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:22px 40px 22px 0;
  font-family:var(--head);font-size:18px;font-weight:600;color:var(--navy);position:relative;display:block;
  transition:color .3s ease}
.faq-q:hover{color:var(--blue)}
.faq-q::after{content:"+";position:absolute;right:0;top:18px;font-family:var(--head);font-size:26px;
  font-weight:400;color:var(--blue);transition:transform .4s var(--ease),color .3s ease;
  display:inline-block;transform-origin:center}
.faq-item.open .faq-q::after{transform:rotate(135deg)}
/* grid-rows accordion: animates to the real content height at any length,
   instead of guessing a fixed max-height */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-a p{color:var(--accent);font-size:15.5px;padding-bottom:0;overflow:hidden;min-height:0;
  transition:padding-bottom .45s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-item.open .faq-a p{padding-bottom:22px}
@media(prefers-reduced-motion:reduce){.faq-a,.faq-a p,.faq-q::after{transition-duration:.01s}}
@media(max-width:860px){.area .wrap{grid-template-columns:1fr;gap:48px}}

/* ---------- final CTA ---------- */
.finalcta{background:var(--offwhite)}
.finalcta .wrap,.wrap.finalcta{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.finalcta h2{font-size:clamp(32px,4vw,52px)}
.finalcta h2 em{font-style:normal;color:var(--blue)}
.finalcta .lead{color:var(--accent);font-size:18px;margin-top:20px;max-width:460px}
.finalcta .fc-contact{margin-top:32px;display:grid;gap:18px}
.finalcta .fc-row{display:flex;gap:14px;align-items:flex-start}
.finalcta .fc-row .ic{width:44px;height:44px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;flex-shrink:0}
.finalcta .fc-row .ic i{font-size:20px;color:var(--navy)}
.finalcta .fc-row b{font-size:15px;display:block}
.finalcta .fc-row span{font-size:14.5px;color:var(--accent)}
.finalcta .fc-row a{font-weight:600}
.finalcta.navy{background:var(--navy);color:#fff;position:relative;overflow:hidden;
  border-top:1px solid var(--line-dark)}
.finalcta.navy h2{color:#fff}
.finalcta.navy .lead{color:var(--accent-lt)}
.finalcta.navy .fc-row b{color:#fff}
.finalcta.navy .fc-row span{color:var(--accent-lt)}
.finalcta.navy .fc-row a{color:#fff}
.finalcta.navy .fc-row .ic{background:#fff;border-color:transparent}
.finalcta.navy .contact-social a{border-color:rgba(255,255,255,.28);color:#fff}
.finalcta.navy .contact-social a:hover{background:rgba(255,255,255,.12);border-color:#fff}
.fc-card{background:#fff;border-radius:var(--radius-lg);padding:52px 48px;box-shadow:var(--shadow)}
@media(max-width:520px){.fc-card{padding:34px 26px}}
.fc-card h3{font-size:25px;margin-bottom:6px}
.fc-card .fc-sub{color:var(--accent);font-size:14.5px;margin-bottom:24px}
.fc-card form{display:grid;gap:14px}
.fc-card .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fc-card input,.fc-card select,.fc-card textarea{width:100%;padding:14px 16px;border:1.5px solid var(--line);
  border-radius:var(--radius);font-family:var(--body);font-size:15px;background:var(--offwhite);color:var(--navy);resize:vertical}
.fc-card input:focus,.fc-card select:focus,.fc-card textarea:focus{outline:none;border-color:var(--navy);background:#fff}
.fc-card button{width:100%;margin-top:4px}
.form-success{font-size:16px;color:var(--navy);line-height:1.65;padding:20px 0}
.form-success a{color:var(--blue);font-weight:600;text-decoration:underline}
@media(max-width:860px){.finalcta .wrap,.wrap.finalcta{grid-template-columns:1fr;gap:44px}}

/* ---------- footer ---------- */
footer{background:var(--navy);color:var(--accent-lt);padding:74px 0 34px;position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
.foot-brand img{height:64px;margin-bottom:20px}
.foot-brand p{font-size:14.5px;color:var(--accent-lt);max-width:280px}
.foot-social{display:flex;gap:12px;margin-top:22px}
.foot-social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);display:grid;place-items:center;transition:.25s}
.foot-social a:hover{border-color:var(--blue);background:rgba(255,255,255,.06)}
.foot-social i{font-size:17px;color:var(--accent-lt)}
.foot-social a:hover i{color:var(--blue)}
.foot-col h4{font-family:var(--head);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.foot-col ul{list-style:none;display:grid;gap:11px}
.foot-col a{font-size:14.5px;color:var(--accent-lt);transition:color .2s}
.foot-col a:hover{color:var(--blue)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:52px;padding-top:26px;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--accent-lt)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* reveal animation */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
@media(prefers-reduced-motion:reduce){.reveal{transition-delay:0s!important}}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   SUB-PAGE COMPONENTS (shared across interior pages)
   ============================================================ */
/* top-aligned with a viewport-relative padding (instead of centering, or a
   padding that only changes at a breakpoint) so the heading's clearance
   under the fixed nav scales continuously across every frame size instead
   of snapping at a breakpoint while the window is being resized */
.subhero{position:relative;background:var(--navy);color:#fff;overflow:hidden;margin-top:-84px;
  height:576px;display:flex;align-items:flex-start}
.subhero .wrap{padding-top:clamp(92px,12vw,140px)}
.subhero-bg{position:absolute;left:0;right:0;top:-8%;height:118%;z-index:0;will-change:transform}
@media(prefers-reduced-motion:reduce){.subhero-bg{transform:none!important}}
.subhero-bg img,.subhero-bg video{width:100%;height:100%;object-fit:cover;opacity:.6}
/* subhero slideshow: crossfading photos, each with its own slow Ken Burns
   zoom/pan running continuously so the motion never resets between slides */
.subhero-bg .ss-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.8s ease;animation:kenburnsA 18s ease-in-out infinite;will-change:transform,opacity}
.subhero-bg .ss-slide.active{opacity:.6;z-index:1}
.subhero-bg .ss-slide:nth-child(even){animation-name:kenburnsB}
@keyframes kenburnsA{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.14) translate(-2%,-1.2%)}}
@keyframes kenburnsB{0%{transform:scale(1.14) translate(2%,1.2%)}100%{transform:scale(1) translate(0,0)}}
@media(prefers-reduced-motion:reduce){.subhero-bg .ss-slide{animation:none!important;transition:none}}
.subhero-bg::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(3,16,43,.85) 0%,rgba(3,16,43,.55) 14%,rgba(3,16,43,.4) 45%,rgba(3,16,43,.85) 100%)}
/* fades the hero image all the way to a flat navy that matches the section
   below, so pages that follow the subhero with a navy block (e.g. contact's
   .finalcta.navy) have no visible seam */
.subhero.navy-fade .subhero-bg::after{
  background:linear-gradient(180deg,rgba(3,16,43,.3) 0%,rgba(3,16,43,.6) 40%,var(--navy) 75%,var(--navy) 100%)}
.subhero .wrap{position:relative;z-index:2;width:100%}
/* lets a page shift its hero copy to whichever side of the background
   media should stay visually clear -- used on About so the text sits
   over the empty side of the video instead of the person we want in focus */
.subhero-text{max-width:600px}
.subhero-text.push-right{margin-left:auto}
.crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--accent-lt);margin-bottom:22px;flex-wrap:wrap}
.crumb a{color:var(--accent-lt);transition:color .2s}
.crumb a:hover{color:#fff}
.crumb .sep{opacity:.5}
.crumb .cur{color:#fff}
.subhero .eyebrow{color:var(--accent-lt)}
.subhero .eyebrow::before{background:var(--blue)}
.subhero h1{font-size:clamp(23px,4.2vw,4rem);line-height:1.18;font-weight:700;letter-spacing:-.03em;
  margin-top:18px;max-width:18ch;color:#fff}
.subhero h1 em{font-style:normal;color:#fff}
.subhero p.sub{color:var(--accent-lt);font-size:18px;margin-top:20px;max-width:600px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.subhero-actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}

.subhero-stats{display:flex;gap:30px;margin-top:clamp(14px,2.8vw,22px);flex-wrap:wrap}
.subhero-stats .t{display:flex;flex-direction:column;line-height:1.15}
.subhero-stats .t b{font-size:1.75rem;color:#fff;font-weight:700;font-family:var(--head)}
.subhero-stats .t span{font-size:12.5px;color:var(--accent-lt)}

/* mobile: every subhero strips down to a headline + one CTA -- the body
   copy, the phone-number button, and the stat/badge row all go, and the
   section itself goes full-screen so the background photo/video/slideshow
   actually fills the phone instead of a content-sized box */
@media(max-width:760px){
  /* vh fallback, svh ("small" viewport -- the guaranteed-visible height
     even with Safari's address bar showing) as the real value; see the
     matching note on .hero above */
  .subhero{height:100vh;height:100svh}
  .subhero .wrap{text-align:center}
  .subhero-text{max-width:none}
  .subhero p.sub{display:none}
  .subhero-stats{display:none}
  .subhero-actions{justify-content:center}
  .subhero-actions .btn-ghost{display:none}
  .subhero h1{font-size:clamp(2.75rem,11.5vw,3.85rem);max-width:none}
  /* this video is a side-by-side two-person shot -- a centered crop on a
     narrow phone lands right on the seam between them, so shift the crop
     window left to favor the left-hand person instead of the gap */
  .subhero-about .subhero-bg video{object-position:20% center}
}

.prose{max-width:760px}
.prose p{color:var(--navy);font-size:17px;margin-top:18px;line-height:1.75}
.prose p:first-child{margin-top:0}
.prose h3{font-size:25px;margin-top:38px;letter-spacing:-.02em}
.prose ul{list-style:none;margin-top:20px;display:grid;gap:14px}
.prose ul li{display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--navy)}
.prose ul li i{font-size:21px;color:var(--navy);flex-shrink:0;margin-top:2px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev .split-media{order:-1}
.split-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:4/3}
.split-media.tall{aspect-ratio:4/5}
.split-media img,.split-media video{width:100%;height:100%;object-fit:cover}
.split-body h2{font-size:clamp(28px,3.4vw,42px);margin-top:16px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:44px}.split.rev .split-media{order:0}}

.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.spec{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-sm);
  transition:box-shadow .35s,transform .35s var(--ease)}
.spec:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.spec .ic{width:52px;height:52px;border-radius:var(--radius);background:var(--offwhite);display:grid;place-items:center;margin-bottom:20px;
  transition:background-color .3s}
.spec:hover .ic{background:var(--navy)}
.spec:hover .ic i{color:#fff}
.spec .ic i{font-size:25px;color:var(--navy)}
.spec h3{font-size:19px}
.spec p{color:var(--accent);font-size:14.5px;margin-top:10px}
.spec .fa-arrow-right{transition:transform .3s var(--ease)}
.spec:hover .fa-arrow-right{transform:translateX(4px)}
@media(max-width:860px){.specs{grid-template-columns:1fr}}

.cta-band{position:relative;background:var(--navy);color:#fff;text-align:center;padding:92px 0}
.cta-band .eyebrow{color:var(--accent-lt);justify-content:center}
.cta-band .eyebrow::before,.cta-band .eyebrow::after{background:var(--blue)}
.cta-band h2{font-size:clamp(30px,4vw,50px);margin-top:16px;color:#fff}
.cta-band h2 em{font-style:normal;color:var(--blue)}
.cta-band p{color:var(--accent-lt);font-size:18px;margin-top:18px;max-width:560px;margin-left:auto;margin-right:auto}
.cta-actions{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* --- specials / pricing table --- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 30px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s var(--ease);position:relative}
.price-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.price-card.featured{background:var(--navy);border-color:var(--navy)}
.price-card.featured .badge-best{position:absolute;top:-13px;left:30px;background:var(--blue);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:100px}
.price-card .p-name{font-family:var(--head);font-size:20px;color:var(--navy)}
.price-card.featured .p-name{color:#fff}
.price-card .p-amount{font-family:var(--head);font-size:clamp(2.5rem,4vw,3rem);color:var(--navy);margin-top:14px;line-height:1}
.price-card.featured .p-amount{color:#fff}
.price-card .p-amount span{font-size:16px;color:var(--accent);font-weight:400}
.price-card.featured .p-amount span{color:var(--accent-lt)}
.price-card .p-desc{color:var(--accent);font-size:14.5px;margin-top:14px;flex-grow:1}
.price-card.featured .p-desc{color:var(--accent-lt)}
.price-card .btn{margin-top:24px}
.price-card.featured .btn-outline{border-color:#fff;color:#fff}
.price-card.featured .btn-outline:hover{background:#fff;color:var(--navy)}
@media(max-width:860px){.pricing-grid{grid-template-columns:1fr}}

/* --- process flow (about page): big flat numerals carry the sequence,
   no connector graphic between steps --- */
.process-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:56px}
.process-step{text-align:left}
.process-step .num{font-family:var(--head);font-size:clamp(2.5rem,4vw,3.25rem);font-weight:700;color:var(--blue);
  line-height:1;margin-bottom:16px;display:block}
.process-step h3{font-size:19px}
.process-step p{color:var(--accent);font-size:14.5px;margin-top:10px;line-height:1.55}
@media(max-width:900px){.process-flow{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.process-flow{grid-template-columns:1fr}}

.contact-social{display:flex;gap:12px}
.contact-social a{width:38px;height:38px;border:1px solid var(--line);border-radius:var(--radius);
  display:grid;place-items:center;color:var(--navy);transition:background .2s,border-color .2s}
.contact-social a:hover{background:var(--offwhite);border-color:var(--navy)}
.contact-social i{font-size:18px}

/* ---------- sticky mobile call bar ---------- */
.mobile-callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--navy);
  border-top:1px solid rgba(255,255,255,.1);padding:10px 14px;gap:10px}
.mobile-callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;
  border-radius:var(--radius);font-family:var(--head);font-weight:700;font-size:14.5px}
.mobile-callbar a.call{background:#fff;color:var(--navy)}
.mobile-callbar a.book{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}
.mobile-callbar i{font-size:16px}
@media(max-width:760px){.mobile-callbar{display:flex}body{padding-bottom:70px}}

/* ============================================================
   MOBILE NAV (off-canvas)
   ============================================================ */
.mm-backdrop{position:fixed;inset:0;background:rgba(3,16,43,.6);z-index:190;opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s}
.mm-backdrop.open{opacity:1;visibility:visible}
.mobile-menu{position:fixed;top:0;right:0;height:100%;width:min(86vw,380px);background:var(--navy);color:#fff;
  z-index:200;transform:translateX(100%);transition:transform .42s var(--ease);
  padding:32px 32px 40px;box-shadow:-8px 0 32px rgba(3,16,43,.28);overflow-y:auto;display:flex;flex-direction:column}
.mobile-menu.open{transform:none}
.mm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.mm-head img{height:52px}
.mm-close{background:none;border:0;cursor:pointer;width:40px;height:40px;display:grid;place-items:center}
.mm-close i{font-size:24px;color:#fff}
.mobile-menu nav a{display:block;font-family:var(--head);font-size:19px;font-weight:600;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12);
  color:#fff;transition:color .2s}
.mobile-menu nav a:hover,.mobile-menu nav a.active{color:var(--blue)}
.mm-cta{margin-top:auto;padding-top:26px;display:grid;gap:12px}
.mm-cta .callnum{color:#fff;justify-content:center;font-size:17px}
.mm-cta .callnum i{color:var(--blue)}
.mobile-menu,.mm-backdrop{display:none}
@media(max-width:1120px){.mobile-menu,.mm-backdrop{display:flex}.mm-backdrop{display:block}}
body.mm-open{overflow:hidden}

/* ============================================================
   ANGLED SECTION EDGES -- kept intentionally: a deliberate wow-factor
   element the client asked to preserve. clip-path only removes pixels
   from the section's OWN box, so without a matching negative margin
   pulling it up to overlap whatever comes before it, the cut exposes
   bare page background instead of a clean color transition. Applied
   only where a generously-padded section precedes it. Deliberately NOT
   applied to .hero/.subhero (nothing precedes them in normal flow) or
   .emergency-bar (too little clearance above it to safely overlap).
   ============================================================ */
.compare,.social,footer,.cta-band,.how.navy,.oc-band{
  clip-path:polygon(0 36px,100% 0,100% 100%,0 100%);
  margin-top:-36px}
@media(max-width:640px){
  .compare,.social,footer,.cta-band,.how.navy,.oc-band{clip-path:none;margin-top:0}}
.finance{clip-path:polygon(0 18px,100% 0,100% 100%,0 100%);margin-top:-18px}
@media(max-width:640px){.finance{clip-path:none;margin-top:0}}
/* reusable version of the same technique for one-off cases (e.g. the
   contact page's navy finalcta into the bone "Find Us" section) --
   apply to the section that comes AFTER the one that should show through */
.angled-top{clip-path:polygon(0 36px,100% 0,100% 100%,0 100%);margin-top:-36px}
@media(max-width:640px){.angled-top{clip-path:none;margin-top:0}}