:root{
  --navy: #00264B;
  --navy-2: #001C3B;
  --accent: #5ECDFA;
  --accent-btn: #7FE1FD;
  --gray-text: #5C7488;
  --light-bg: #F4F9FE;
  --panel-bg: #F8FBFD;
  --icon-bg: #DCEEFC;
  --icon-blue: #1C94DC;
  --white: #FFFFFF;
  --font-head: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-script: "Caveat", cursive;
  --container: 1536px;
  --pad: clamp(20px, 6vw, 127px);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--navy);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font:inherit;background:none;border:none;cursor:pointer;}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-inline:var(--pad);
}

h1,h2,h3{font-family:var(--font-head);font-weight:800;color:var(--navy);line-height:1.15;}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.9375rem;
  padding:14px 24px;
  border-radius:999px;
  white-space:nowrap;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-1px);opacity:.92;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-accent{background:var(--accent-btn);color:var(--navy-2);}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.85);}
.play-circle{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18);
  border:1.5px solid rgba(255,255,255,.85);
}

.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.8125rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  margin-bottom:18px;
}
.eyebrow i{display:block;width:40px;height:2px;border-radius:2px;}
.eyebrow-light{color:#fff;}
.eyebrow-light i{background:var(--accent);}
.eyebrow-dark{color:var(--accent);justify-content:center;}
.eyebrow-dark i{background:var(--accent);}
.eyebrow-left{justify-content:flex-start;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:#fff;
  border-bottom:1px solid #EEF1F4;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.logo img{height:46px;width:auto;}
.header-brand{display:flex;align-items:center;gap:10px;}
.header-captain-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 18%;
  background:var(--icon-bg);
  border:2px solid var(--icon-bg);
  flex-shrink:0;
}
.main-nav{
  display:flex;align-items:center;gap:34px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:0.9375rem;
  color:var(--navy);
}
.nav-dropdown{display:flex;align-items:center;gap:6px;}
.header-actions{display:flex;align-items:center;gap:26px;}
.phone{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:0.9375rem;
  color:var(--navy);
}
.nav-toggle{
  display:none;
  color:var(--navy);
  padding:4px;
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:#00142a;}
.hero-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
video.hero-img{pointer-events:none;}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,20,42,.62) 0%, rgba(0,20,42,.42) 32%, rgba(0,20,42,.05) 58%, rgba(0,20,42,0) 72%);
}
.hero-inner{position:relative;z-index:2;padding-top:88px;padding-bottom:88px;}
.hero-content{max-width:640px;}
h1{
  font-size:clamp(2rem,4.2vw,3rem);
  color:#fff;
  margin-bottom:22px;
}
.accent{color:var(--accent);}
.hero-sub{
  color:rgba(255,255,255,.88);
  font-size:1.0625rem;
  line-height:1.55;
  max-width:460px;
  margin-bottom:34px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- Stats bar ---------- */
.stats-bar{position:relative;overflow:hidden;background:linear-gradient(100deg,var(--navy-2) 0%,var(--navy) 55%,var(--navy) 100%);}
.stats-bar-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%;transform:scaleX(-1);}
.stats-bar-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,28,59,.94) 0%, rgba(0,28,59,.86) 30%, rgba(0,28,59,.5) 62%, rgba(0,28,59,.15) 100%);
}
.stats-inner{
  position:relative;z-index:2;
  display:flex;
  flex-wrap:wrap;
  padding-block:38px;
}
.stat-item{
  display:flex;align-items:center;gap:16px;
  padding-inline:32px;
  border-right:1px solid rgba(255,255,255,.16);
}
.stat-item:last-child{border-right:none;}
.stat-item:first-child{padding-left:0;}
.stat-icon{
  flex:none;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.3);
  box-shadow:0 0 0 6px rgba(255,255,255,.05);
  border-radius:50%;
  color:#fff;
}
.stat-text{display:flex;flex-direction:column;gap:5px;}
.stat-text strong{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.125rem;
  color:#fff;
}
.stat-text small{
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

.script-tagline{
  font-family:var(--font-script);
  font-weight:700;
  font-size:1.875rem;
  color:var(--navy);
  position:relative;
  display:inline-block;
}
.script-tagline::after{
  content:"";
  display:block;
  width:92%;
  height:6px;
  margin-top:-4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 8c20-10 40 8 60 0s40-8 60 0 40 8 60 0' fill='none' stroke='%235ECDFA' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 100%;
}

/* ---------- Fiberglass Services ---------- */
.fg-services{background:var(--light-bg);overflow:hidden;}
.fg-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:start;
  column-gap:clamp(24px,2.6vw,40px);
  padding-top:clamp(48px,5vw,70px);
  padding-bottom:clamp(26px,3vw,38px);
}
.fg-head-main{container-type:inline-size;}
.fg-eyebrow{margin-bottom:14px;}
.fg-eyebrow i:first-child{width:52px;}
.fg-eyebrow i:last-child{width:52px;}
.fg-title{
  font-size:clamp(1.875rem,4.9cqw,2.9375rem);
  letter-spacing:-1px;
  margin-bottom:14px;
}
.fg-title .accent{color:var(--icon-blue);}
.fg-lead{
  font-size:1.0313rem;
  line-height:1.6;
  color:var(--gray-text);
  max-width:700px;
}
.fg-kicker{
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.7813rem;
  letter-spacing:1.6px;
  line-height:1.7;
  text-transform:uppercase;
  color:var(--gray-text);
  padding-top:12px;
  white-space:nowrap;
}
.script-tagline-accent{
  color:var(--icon-blue);
  font-size:1.75rem;
  line-height:1.15;
  text-align:center;
  transform:rotate(-6deg);
}
.script-tagline-accent::after{width:70%;margin-left:auto;}

/* "Same Boats. New Beginnings." over the photo side of a service-page hero. The comps had it
   painted into the image; the real yard photos don't, so it is live text. Desktop only:
   below 1025px the hero copy sits on top of the photo. */
.hero-tagline{
  position:absolute;
  right:clamp(28px,5.5vw,104px);
  top:46%;
  z-index:2;
  margin:0;
  color:#fff;
  font-size:clamp(2rem,3vw,3.25rem);
  line-height:1.02;
  text-align:center;
  transform:translateY(-50%) rotate(-8deg);
  text-shadow:0 2px 18px rgba(0,22,46,.85), 0 1px 4px rgba(0,22,46,.75);
  pointer-events:none;
}
.hero-tagline::after{width:78%;height:9px;margin:2px auto 0;}
@media (max-width:1024px){
  .hero-tagline{display:none;}
}
.fg-head-script{margin-top:4px;}

.fg-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
  max-width:1760px;
  padding-inline:clamp(18px,2.6vw,44px);
  padding-bottom:clamp(40px,4vw,58px);
}
.fg-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 14px 34px -22px rgba(0,38,75,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
.fg-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(0,38,75,.5);}
.fg-card-media{position:relative;}
.fg-card-media img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.fg-card-icon{
  position:absolute;
  left:18px;
  bottom:-23px;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  box-shadow:0 6px 14px -6px rgba(0,38,75,.6);
}
.fg-card-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:1;
  padding:34px 18px 20px;
}
.fg-card-body h3{
  font-size:1.0938rem;
  letter-spacing:-.3px;
  margin-bottom:9px;
}
.fg-card-body p{
  font-size:0.9063rem;
  line-height:1.55;
  color:var(--gray-text);
  margin-bottom:16px;
}
.fg-card-link{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:auto;
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.875rem;
  color:var(--icon-blue);
}
.fg-card-link svg{transition:transform .15s ease;}
.fg-card:hover .fg-card-link svg{transform:translateX(3px);}

/* "Learn More" dropdown on cards for services that don't have their own page yet (script.js initMore).
   The panel opens by animating grid rows 0fr -> 1fr; the copy slides down into place as it opens. */
.fg-card[data-more]{cursor:pointer;}
button.fg-card-link{
  -webkit-appearance:none;appearance:none;
  background:none;border:0;padding:0;
  line-height:inherit;text-align:left;
  cursor:pointer;
}
button.fg-card-link:focus-visible{outline:2px solid var(--icon-blue);outline-offset:4px;border-radius:4px;}
.fg-card .more-toggle svg{transition:transform .3s ease;}
.fg-card:hover .more-toggle svg{transform:translateY(2px);}
.fg-card.more-open .more-toggle svg{transform:rotate(180deg);}
.more-panel{
  display:grid;
  grid-template-rows:0fr;
  width:100%;
  margin-top:auto;
  transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1);
}
.more-panel + .more-toggle{margin-top:0;}
.more-inner{
  overflow:hidden;
  visibility:hidden;
  transition:visibility 0s linear .45s;
}
.more-open .more-panel{grid-template-rows:1fr;}
.more-open .more-inner{visibility:visible;transition-delay:0s;}
.more-inner > *{
  opacity:0;
  transform:translateY(-14px);
  transition:opacity .25s ease, transform .3s ease;
}
.more-open .more-inner > *{
  opacity:1;
  transform:none;
  transition:opacity .4s ease .12s, transform .5s cubic-bezier(.2,.7,.2,1) .08s;
}
.more-open .more-inner > * + *{transition-delay:.22s, .18s;}
.fg-card-body .more-inner p{
  margin:0 0 10px;
  padding-top:14px;
  border-top:1px solid rgba(0,38,75,.12);
  font-size:0.875rem;
  line-height:1.6;
  color:var(--gray-text);
}
.more-quote{
  display:inline-flex;align-items:center;gap:7px;
  margin-bottom:16px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.8125rem;
  color:var(--navy);
}
.more-quote:hover{color:var(--icon-blue);}
@media (max-width:600px){
  .fg-card.more-open{grid-column:1/-1;}
}

.fg-feature{
  display:grid;
  grid-template-columns:54% minmax(0,1fr);
  background:var(--panel-bg);
}
.fg-feature-photo{
  width:100%;height:100%;
  min-height:clamp(300px,25vw,400px);
  object-fit:cover;
  object-position:left center;
  clip-path:polygon(0 0, 100% 0, 97.8% 100%, 0 100%);
}
.fg-feature-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  position:relative;
  padding:clamp(34px,3.5vw,54px) var(--pad) clamp(34px,3.5vw,54px) clamp(28px,3vw,54px);
}
.fg-feature-eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.7813rem;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--icon-blue);
  margin-bottom:16px;
}
.fg-feature-eyebrow i{display:block;width:44px;height:2px;border-radius:2px;background:var(--icon-blue);flex:none;}
.fg-feature-copy h2{
  font-size:clamp(1.5625rem,2.2vw,2.125rem);
  letter-spacing:-.6px;
  margin-bottom:14px;
}
.fg-feature-copy h2 .accent{color:var(--icon-blue);}
.fg-feature-copy p{
  font-size:0.9688rem;
  line-height:1.6;
  color:var(--gray-text);
  max-width:600px;
  margin-bottom:26px;
}
.fg-feature-btn{padding:16px 28px;font-size:1rem;}
.fg-feature-script{
  position:absolute;
  right:var(--pad);
  bottom:clamp(30px,3.2vw,50px);
  margin:0;
}

/* ---------- Service Areas ---------- */
.service-areas{background:#F2F8FE;overflow:hidden;}
.areas-stage{position:relative;}
.areas-bow{
  position:absolute;top:0;left:0;bottom:0;z-index:1;
  width:clamp(190px,15vw,300px);height:100%;
  object-fit:cover;object-position:center 40%;
  clip-path:polygon(0 0, 100% 0, 87% 27%, 100% 59%, 79% 100%, 0 100%);
}
.areas-coast{
  position:absolute;top:0;right:0;bottom:0;
  width:48%;height:100%;
  object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 24%);mask-image:linear-gradient(to right,transparent 0%,#000 24%);
}
.areas-inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  align-items:center;
  gap:clamp(28px,3vw,60px);
  max-width:1800px;
  margin-inline:auto;
  padding-block:clamp(44px,3.4vw,68px) clamp(44px,3.2vw,64px);
  padding-left:calc(clamp(190px,15vw,300px) + clamp(20px,1.6vw,34px));
  padding-right:clamp(20px,2vw,40px);
}

.areas-eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(0.75rem,.72vw,0.875rem);letter-spacing:2.4px;
  color:#1AA4EC;margin-bottom:14px;
}
.areas-eyebrow svg{flex:none;display:block;}
.areas-eyebrow i{display:block;width:40px;height:2px;border-radius:2px;background:#1AA4EC;}
.areas-copy h2{
  font-size:clamp(1.875rem,2.6vw,3.125rem);
  line-height:1.1;letter-spacing:-.5px;
  color:#00132F;margin-bottom:16px;
}
.areas-accent{color:#0097E6;}
.areas-copy p{
  font-size:clamp(0.9375rem,.95vw,1.125rem);line-height:1.5;
  color:#56687A;max-width:560px;margin-bottom:clamp(22px,1.8vw,34px);
}

.areas-mini-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:600px;}
.areas-mini-stat{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding-inline:10px;
  border-right:1px solid #D8E4EE;
}
.areas-mini-stat:last-child{border-right:none;}
.mini-stat-icon{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#E6F8FF 0%,#D4EEFC 100%);
  box-shadow:0 6px 14px -8px rgba(0,113,212,.35);
  color:#0A78D4;margin-bottom:12px;
}
.mini-stat-icon svg{display:block;}
.areas-mini-stat strong{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(0.8125rem,.78vw,0.9375rem);line-height:1.3;color:#0A2447;margin-bottom:6px;
}
.areas-mini-stat small{font-size:clamp(0.75rem,.66vw,0.8125rem);line-height:1.45;color:#7A8597;}

.areas-card{
  position:relative;
  background:linear-gradient(160deg,#032E52 0%,#022A4A 45%,#03223E 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 30px 60px -30px rgba(0,19,47,.55);
  padding:clamp(30px,2.5vw,48px) clamp(24px,2vw,38px) clamp(28px,2.2vw,42px);
  color:#fff;
}
.areas-card-tagline{
  position:absolute;top:clamp(14px,1vw,20px);right:clamp(24px,2.2vw,44px);
  font-family:var(--font-script);font-weight:700;
  font-size:clamp(1.375rem,1.6vw,2rem);line-height:1;
  color:#4FD3FF;text-align:center;
  transform:rotate(-7deg);
}
.areas-card-tagline::after{
  content:"";display:block;width:80%;height:10px;margin:2px 0 0 14%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cpath d='M3 10c40-7 110-10 194-4' fill='none' stroke='%234FD3FF' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 100%;
}
.areas-card-label{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(0.8125rem,.78vw,0.9375rem);letter-spacing:1.5px;
  margin-bottom:clamp(18px,1.5vw,28px);
}
.areas-card-label svg{flex:none;display:block;color:#46C9FF;}
.areas-card-body{
  display:grid;
  grid-template-columns:auto auto minmax(150px,1fr);
}
.areas-list{
  display:flex;flex-direction:column;gap:clamp(10px,.75vw,15px);
  padding-right:clamp(16px,1.1vw,22px);
  border-right:1px solid rgba(120,170,210,.28);
}
.areas-list + .areas-list{padding-left:clamp(22px,1.6vw,34px);}
.areas-list li{
  display:flex;align-items:center;gap:12px;
  font-size:clamp(0.8438rem,.8vw,0.9688rem);line-height:1.25;
  color:#fff;white-space:nowrap;
}
.areas-list li::before{
  content:"";flex:none;width:12px;height:15px;
  background:#46C9FF;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 2 14 20'%3E%3Cpath fill-rule='evenodd' d='M12 22s7-7.4 7-12.6A7 7 0 0 0 5 9.4C5 14.6 12 22 12 22zm0-10.2a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 2 14 20'%3E%3Cpath fill-rule='evenodd' d='M12 22s7-7.4 7-12.6A7 7 0 0 0 5 9.4C5 14.6 12 22 12 22zm0-10.2a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.areas-card-map{display:flex;align-items:center;justify-content:center;padding-left:6px;margin-right:clamp(-30px,-1.4vw,-12px);}
.areas-card-map img{width:calc(100% + 24px);max-width:280px;margin-top:clamp(18px,1.8vw,36px);}

.areas-bar{
  position:relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M0 20c30-12 60-12 90 0s60 12 90 0 45-9 60-6M0 46c30-12 60-12 90 0s60 12 90 0 45-9 60-6' fill='none' stroke='%23ffffff' stroke-opacity='.035' stroke-width='2'/%3E%3C/svg%3E") repeat,
    linear-gradient(90deg,#022C52 0%,#01294D 50%,#022C52 100%);
}
.areas-bar-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  max-width:1680px;margin-inline:auto;
  padding:18px clamp(20px,6vw,190px);
}
.areas-bar-item{
  flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(16px,1.4vw,28px);
  padding-inline:16px;
  border-right:1px solid rgba(255,255,255,.14);
  min-height:40px;
}
.areas-bar-item:first-child{justify-content:flex-start;padding-left:0;}
.areas-bar-item:nth-child(3){border-right:none;}
.areas-bar-item svg{flex:none;display:block;color:#41C3F5;width:42px;height:28px;}
.areas-bar-item span{display:flex;flex-direction:column;gap:4px;}
.areas-bar-item strong{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(0.8125rem,.78vw,0.9375rem);letter-spacing:2px;color:#fff;
}
.areas-bar-item small{font-size:clamp(0.7188rem,.68vw,0.8125rem);font-weight:500;letter-spacing:2px;color:#A0C4DA;}
.areas-bar-btn{
  flex:none;display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-head);font-weight:700;font-size:1rem;
  color:#00264B;background:#5ECDFA;
  padding:15px 30px;border-radius:999px;
  margin-left:clamp(12px,3vw,60px);
  transition:transform .15s ease, background .15s ease;
}
.areas-bar-btn:hover{transform:translateY(-1px);background:#7FE1FD;}
@media (max-width:1680px) and (min-width:1025px){
  .areas-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);}
  .areas-mini-stat{padding-inline:6px;}
  .areas-mini-stat strong{font-size:0.8438rem;}
  .areas-list li{font-size:0.8438rem;gap:8px;}
  .areas-list + .areas-list{padding-left:18px;}
  .areas-card-tagline{font-size:1.3125rem;}
}
@media (max-width:1280px) and (min-width:1025px){
  .areas-card-map{display:none;}
  .areas-card-body{grid-template-columns:auto auto;}
  .areas-list + .areas-list{border-right:none;}
  .areas-card{padding-top:70px;}
}

.wave-divider{display:block;width:100%;height:70px;}

/* ---------- Results + Testimonials ---------- */
.results-top{position:relative;overflow:hidden;background:linear-gradient(125deg,var(--navy-2) 0%,var(--navy) 55%,#0d3b70 100%);}
.results-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 62%;
}
.results-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(0,28,59,.8) 0%, rgba(0,28,59,.55) 24%, rgba(0,28,59,.12) 48%, rgba(0,28,59,0) 100%),
    linear-gradient(180deg, rgba(0,28,59,0) 55%, rgba(0,28,59,.4) 100%);
}
.results-diagonal{
  position:absolute;top:0;right:0;bottom:0;width:44%;
  background:var(--light-bg);
  clip-path:polygon(28% 0,100% 0,100% 100%,0% 100%);
}
.results-top-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:36px;
  padding:72px var(--pad) 96px;
}
.results-copy .eyebrow{justify-content:flex-start;}
.results-copy h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2.125rem);margin-bottom:14px;}
.results-copy p{
  color:rgba(255,255,255,.8);
  font-size:0.9375rem;
  line-height:1.6;
  margin-bottom:26px;
  max-width:300px;
}

.before-after{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:3px solid rgba(255,255,255,.25);
  width:min(520px,40vw);
  aspect-ratio:443/179;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.45);
  cursor:ew-resize;
  touch-action:none;
  user-select:none;
}
.ba-img{
  position:absolute;inset:0;
  background-image:url("assets/before-after.jpg");
  background-size:200% 100%;
  background-repeat:no-repeat;
}
.ba-before{background-position:left center;}
.ba-after{background-position:right center;clip-path:inset(0 0 0 50%);}
.ba-line{
  position:absolute;top:0;bottom:0;left:50%;
  width:3px;margin-left:-1.5px;
  background:#fff;
  box-shadow:0 0 10px rgba(0,0,0,.35);
  pointer-events:none;
}
.ba-handle{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  pointer-events:none;
}
.ba-handle svg{display:block;width:15px;height:15px;}

/* stand-in for the slider while the gallery is off (see the gallery switch in chrome.css) */
.results-soon{
  width:min(520px,40vw);
  aspect-ratio:443/179;
  min-height:150px;
  border-radius:16px;
  border:3px solid rgba(255,255,255,.25);
  background:rgba(0,28,59,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:20px;
  color:#fff;text-align:center;
}
.results-soon svg{display:block;color:var(--accent);margin-bottom:2px;}
.results-soon strong{font-family:var(--font-head);font-weight:700;font-size:clamp(1.125rem,1.6vw,1.375rem);}
.results-soon span{font-size:0.875rem;line-height:1.5;color:rgba(255,255,255,.8);}

.testimonial-card{
  position:relative;z-index:2;
  background:#fff;border-radius:20px;
  padding:36px;
  box-shadow:0 28px 56px -30px rgba(0,20,42,.35);
  max-width:440px;
}
.testimonial-card .eyebrow-dark{justify-content:flex-start;}
.testimonial-card h2{font-size:clamp(1.25rem,2.2vw,1.625rem);margin-bottom:14px;}
.stars{display:flex;gap:4px;margin-bottom:18px;}
blockquote{
  font-style:italic;
  font-size:0.9375rem;
  line-height:1.65;
  color:var(--navy);
  margin-bottom:14px;
}
cite{font-style:normal;font-size:0.8125rem;color:var(--gray-text);}

.carousel-controls{
  display:flex;align-items:center;gap:18px;
  margin-top:34px;
}
.carousel-arrow{
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid #D7E2EC;
  display:flex;align-items:center;justify-content:center;
  color:var(--navy);
}
.testimonial-card .carousel-arrow{border-color:var(--accent);color:var(--accent);}
.carousel-dots{display:flex;gap:8px;}
.dot{width:7px;height:7px;border-radius:50%;background:#C7D6E3;}
.dot.active{background:var(--navy);}
.testimonial-card .dot:nth-child(1){background:var(--accent);}
.testimonial-card .dot:nth-child(2){background:var(--navy);}

.results-wave{margin-bottom:-4px;position:relative;z-index:2;display:block;}


/* ---------- Contact ---------- */
.contact{
  --c-ink:#0A2447;
  --c-blue:#1B7FD0;
  --c-muted:#5E7289;
  --c-line:#DCE3EA;
  position:relative;
  overflow:hidden;
  background:#0A2A4F;
  color:var(--c-ink);
}
.contact-body{position:relative;}
.contact-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
}
.contact-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(10,36,71,0) 55%, rgba(6,28,58,.35) 100%);
}
.contact-inner{position:relative;z-index:2;padding-top:30px;padding-bottom:28px;}

.contact-eyebrow{
  display:flex;align-items:center;gap:16px;
  font-family:var(--font-body);
  font-weight:500;font-size:0.875rem;letter-spacing:1.4px;
  color:var(--c-blue);
  margin-bottom:10px;
}
.contact-eyebrow i{display:block;width:40px;height:1.5px;background:var(--c-blue);}
.contact-title{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(2.375rem,4.3vw,4rem);
  letter-spacing:-1px;
  line-height:1.05;
  color:var(--c-ink);
  margin-bottom:14px;
}
.contact-title span{
  background:linear-gradient(90deg,#1A7CCB 0%,#2DA2E6 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.contact-lead{
  max-width:690px;
  font-size:1.0625rem;
  line-height:1.45;
  color:var(--c-ink);
  margin-bottom:22px;
}

.contact-perks{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:30px;}
.contact-perks li{
  display:flex;align-items:center;gap:14px;
  padding-inline:22px;
  border-right:2px solid rgba(10,36,71,.55);
}
.contact-perks li:first-child{padding-left:0;}
.contact-perks li:last-child{border-right:none;}
.perk-icon{
  flex:none;
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--c-ink);
  border:1.5px solid rgba(10,36,71,.25);
  background:rgba(255,255,255,.35);
}
.perk-icon svg{display:block;}
.perk-text{display:flex;flex-direction:column;gap:3px;}
.perk-text strong{font-family:var(--font-head);font-weight:700;font-size:0.9375rem;color:var(--c-ink);}
.perk-text small{font-size:0.8438rem;color:#3C526B;}

.contact-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:stretch;
}
.contact-card{
  background:rgba(255,255,255,.95);
  border-radius:16px;
  padding:24px 26px 22px;
  box-shadow:0 20px 44px -24px rgba(4,24,50,.45);
}

.card-head{position:relative;display:flex;align-items:center;gap:22px;margin-bottom:26px;}
.card-head-icon{
  flex:none;
  width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#1C3F6E 0%,#0A2447 70%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -6px rgba(10,36,71,.6);
}
.card-head-icon-lg{width:64px;height:64px;}
.card-head-icon svg{display:block;}
.card-head-text h3{font-family:var(--font-head);font-weight:800;font-size:1.4375rem;color:var(--c-ink);margin-bottom:6px;}
.card-head-text p{font-size:0.8125rem;color:var(--c-muted);}
.card-script{
  position:absolute;right:-16px;top:-12px;
  font-family:var(--font-script);
  font-weight:600;
  font-size:1.625rem;
  line-height:1.05;
  color:#4F86BF;
  text-align:center;
  transform:rotate(-9deg);
  pointer-events:none;
}
.card-script::after{
  content:"";
  display:block;
  width:78%;height:9px;
  margin:1px 0 0 22%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 9C30 4 70 2 118 3M18 11c26-4 56-5 84-4' fill='none' stroke='%2362A8E6' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 100%;
}

.contact-form-card{display:flex;flex-direction:column;}
.contact-form{flex:1;display:flex;flex-direction:column;gap:18px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{
  position:relative;
  display:flex;align-items:center;gap:12px;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:8px;
  padding:0 16px;
  min-height:46px;
  color:#3F5670;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field:focus-within{border-color:var(--c-blue);box-shadow:0 0 0 3px rgba(27,127,208,.14);}
.field svg{flex:none;display:block;}
.field input,.field select,.field textarea{
  flex:1;min-width:0;
  border:none;outline:none;background:none;
  font:inherit;font-size:0.9063rem;color:var(--c-ink);
  width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:#6B7E92;}
.field-select{cursor:pointer;}
.field-select select{appearance:none;-webkit-appearance:none;cursor:pointer;height:44px;color:#6B7E92;padding-right:22px;}
.field-select select:valid{color:var(--c-ink);}
.field-chevron{position:absolute;right:16px;pointer-events:none;color:var(--c-ink);}

.field-message{flex:1;align-items:flex-start;padding:16px 16px 10px;}
.field-message > svg{margin-top:2px;}
.field-message-body{flex:1;align-self:stretch;display:flex;flex-direction:column;gap:4px;min-width:0;}
.field-message-body textarea{flex:1;}
.field-label{font-size:0.9063rem;color:#3F5670;}
.field-message textarea{resize:vertical;min-height:62px;line-height:1.45;}

.robot-check{
  position:relative;
  display:flex;align-items:center;gap:14px;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:8px;
  padding:14px 16px 14px 14px;
  min-height:58px;
  cursor:pointer;
}
.robot-check input{position:absolute;opacity:0;width:22px;height:22px;left:14px;margin:0;cursor:pointer;}
.robot-box{
  width:22px;height:22px;flex:none;
  border:1.5px solid #8C9AA8;border-radius:3px;
  background:#fff;
}
.robot-check input:focus-visible + .robot-box{outline:2px solid var(--c-blue);outline-offset:2px;}
.robot-check input:checked + .robot-box{background:var(--c-blue);border-color:var(--c-blue);}
.robot-check input:checked + .robot-box::after{
  content:"";
  display:block;width:6px;height:11px;
  margin:3px auto 0;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.robot-label{font-size:0.8438rem;font-weight:500;color:var(--c-ink);}
.robot-badge{margin-left:auto;font-size:0.6563rem;line-height:1.5;text-align:right;color:#55687C;}
.robot-badge a{color:#55687C;text-decoration:underline;}

.contact-submit{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;
  min-height:48px;
  border-radius:999px;
  background:linear-gradient(90deg,#2A9BE2 0%,#1576C9 55%,#0F63B2 100%);
  color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:0.9688rem;
  box-shadow:0 10px 22px -12px rgba(15,99,178,.8);
  transition:transform .15s ease, filter .15s ease;
}
.contact-submit:hover{transform:translateY(-1px);filter:brightness(1.06);}
.contact-submit:disabled{opacity:.6;transform:none;cursor:default;}
.form-secure{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:0.8438rem;color:var(--c-muted);
  margin-top:-4px;
}
.form-secure svg{flex:none;color:#55687C;}
.form-success{font-size:0.875rem;color:var(--c-ink);font-weight:600;text-align:center;}

.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
  gap:26px 20px;
  margin-bottom:24px;
}
.info-item{display:flex;align-items:flex-start;gap:18px;}
.info-icon{
  flex:none;
  width:48px;height:48px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#1C3F6E 0%,#0A2447 70%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 12px -6px rgba(10,36,71,.6);
}
.info-icon-bright{background:radial-gradient(circle at 35% 30%,#1F73BE 0%,#0B3C74 75%);}
.info-icon svg{display:block;}
.info-item div{min-width:0;}
.info-item strong{display:block;font-family:var(--font-head);font-weight:700;font-size:0.9063rem;color:var(--c-ink);margin-bottom:2px;}
.info-item div > a,.info-item div > span{display:block;font-family:var(--font-head);font-weight:700;font-size:0.9063rem;color:var(--c-ink);overflow-wrap:break-word;}
.info-item a:hover{color:var(--c-blue);}
.info-item small{display:block;font-size:0.8125rem;color:var(--c-muted);margin-top:2px;}

.contact-map{
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--c-line);
  height:230px;
}
.contact-map iframe{width:100%;height:100%;border:0;display:block;}

.contact-strip{
  position:relative;z-index:2;
  background:#0A2344;
  background-image:
    radial-gradient(ellipse 420px 120px at 8% 110%, rgba(94,205,250,.08), transparent 70%),
    repeating-radial-gradient(ellipse at 0% 100%, rgba(255,255,255,.035) 0 1px, transparent 1px 14px);
}
.contact-strip-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  min-height:56px;
  padding-block:8px;
}
.strip-brand{display:flex;align-items:center;gap:14px;color:#fff;}
.strip-brand svg{flex:none;display:block;}
.strip-brand span{display:flex;flex-direction:column;gap:2px;}
.strip-brand strong{font-family:var(--font-head);font-weight:700;font-size:0.8125rem;}
.strip-brand small{font-size:0.5313rem;letter-spacing:1.4px;color:rgba(255,255,255,.6);}
.strip-rule{display:block;width:60px;height:2px;background:#2A8FD8;border-radius:2px;}
.strip-meta{
  justify-self:end;
  font-size:0.7188rem;letter-spacing:1.4px;
  color:rgba(255,255,255,.75);
}
.strip-meta span{margin-inline:14px;color:rgba(255,255,255,.4);}
.strip-meta a:hover{color:#fff;}

@media (max-width:1560px){
  .card-script{position:static;flex:none;white-space:nowrap;margin:-6px -6px 0 auto;align-self:flex-start;font-size:1.4375rem;}
}
@media (max-width:1200px){
  .contact-perks{row-gap:16px;}
}
@media (max-width:1024px){
  .contact-shade{
    background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.3) 35%, rgba(10,36,71,.25) 100%);
  }
  .contact-cards{grid-template-columns:1fr;}
  .contact-perks li{border-right:none;padding-inline:0 28px;}
}
@media (max-width:640px){
  .contact-inner{padding-top:28px;}
  .contact-lead{font-size:1rem;}
  .contact-perks{flex-direction:column;align-items:flex-start;gap:12px;}
  .contact-perks li{padding:0;}
  .perk-icon{width:46px;height:46px;}
  .contact-card{padding:20px 18px;}
  .card-head{flex-wrap:wrap;gap:14px;}
  .card-head-icon,.card-head-icon-lg{width:50px;height:50px;}
  .card-head-text{flex:1;min-width:0;}
  .card-head-text h3{font-size:1.25rem;}
  .card-script{display:none;}
  .form-row{grid-template-columns:1fr;}
  .info-grid{grid-template-columns:1fr;}
  .robot-badge{font-size:0.5938rem;}
  .contact-strip-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;padding-block:14px;}
  .strip-meta{justify-self:center;}
  .strip-meta span{margin-inline:8px;}
}

@media (max-width:1400px){
  .fg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
}
@media (max-width:1240px){
  .fg-head{grid-template-columns:minmax(0,1fr);text-align:center;row-gap:16px;}
  .fg-head-main{width:100%;}
  .fg-eyebrow{justify-content:center;}
  .fg-lead{margin-inline:auto;}
  .fg-kicker{padding-top:0;white-space:normal;justify-self:center;}
  .fg-head-script{justify-self:center;}
}
@media (max-width:1024px){
  .fg-feature{grid-template-columns:minmax(0,1fr);}
  .fg-feature-photo{
    clip-path:none;
    min-height:clamp(260px,56vw,360px);
  }
  .fg-feature-copy{
    padding:clamp(30px,5vw,44px) var(--pad);
  }
  .fg-feature-script{position:static;align-self:flex-end;margin-top:24px;}
}
@media (max-width:1100px){
  .fg-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fg-card-media img{aspect-ratio:5/2;}
}
@media (max-width:620px){
  .fg-grid{grid-template-columns:minmax(0,1fr);gap:22px;}
  .fg-card-media img{aspect-ratio:2/1;}
  .fg-feature-copy h2 br{display:none;}
  .fg-feature-script{align-self:center;}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .main-nav{
    display:none;
    position:absolute;top:72px;left:0;right:0;
    background:#fff;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:8px var(--pad) 16px;
    border-bottom:1px solid #EEF1F4;
    box-shadow:0 16px 24px -20px rgba(0,38,75,.3);
  }
  .main-nav.open{display:flex;}
  .main-nav a{padding:12px 0;width:100%;}
  .nav-toggle{display:flex;align-items:center;justify-content:center;}
  .stats-inner{padding-block:28px;}
  .stat-item{border-right:none;padding-inline:18px;}

  .areas-bow{display:none;}
  .areas-coast{top:auto;width:100%;height:62%;object-position:center bottom;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 40%);mask-image:linear-gradient(to bottom,transparent 0%,#000 40%);}
  .areas-inner{grid-template-columns:minmax(0,1fr);padding-inline:var(--pad);gap:44px;}
  .areas-card-body{grid-template-columns:auto auto minmax(0,1fr);}
  .areas-card-map img{max-width:250px;}
  .areas-copy{text-align:center;}
  .areas-eyebrow{justify-content:center;}
  .areas-copy p{margin-inline:auto;}
  .areas-mini-stats{margin-inline:auto;}
  .areas-card{max-width:820px;width:100%;margin-inline:auto;}
  .areas-bar-inner{flex-wrap:wrap;justify-content:center;padding-inline:var(--pad);row-gap:20px;}
  .areas-bar-item{flex:1 1 30%;justify-content:center;}
  .areas-bar-item:first-child{justify-content:center;}
  .areas-bar-btn{margin-left:0;}

  .results-top-inner{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .results-diagonal{display:none;}
  .results-copy .eyebrow{justify-content:center;}
  .results-copy p{margin-inline:auto;}

}
@media (max-width:640px){
  .header-actions .phone span{display:none;}
  .hero-actions{flex-direction:column;align-items:flex-start;}
  .stats-inner{flex-direction:column;align-items:flex-start;}
  .stat-item{padding-inline:0;padding-block:8px;}

  .areas-coast{height:46%;}
  .areas-mini-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;}
  .areas-mini-stat:nth-child(2){border-right:none;}
  .areas-card{padding:72px 20px 20px;}
  .areas-card-tagline{right:50%;transform:translateX(50%) rotate(-6deg);top:16px;}
  .areas-card-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .areas-list{padding-right:10px;gap:14px;}
  .areas-list + .areas-list{padding-left:14px;border-right:none;}
  .areas-list li{font-size:0.8438rem;white-space:normal;gap:8px;}
  .areas-list li::before{width:11px;height:14px;}
  .areas-card-map{grid-column:1 / -1;padding-left:0;}
  .areas-card-map img{max-width:190px;margin-top:14px;}
  .areas-bar-inner{flex-direction:column;align-items:stretch;}
  .areas-bar-item{border-right:none;justify-content:flex-start !important;padding-inline:0;}
  .areas-bar-btn{align-self:center;}

  .results-top-inner{gap:28px;}
  .before-after,.results-soon{width:100%;max-width:300px;}

}

/* ---------- Chat Widget ---------- */
.chat-widget{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:14px;
}

.chat-toggle{
  position:relative;
  width:66px;
  height:66px;
  border-radius:50%;
  padding:3px;
  background:linear-gradient(145deg,var(--accent-btn),var(--accent));
  box-shadow:0 10px 26px rgba(0,38,75,.32);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease, box-shadow .18s ease;
  animation:chat-toggle-pop .5s ease;
}
.chat-toggle:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 30px rgba(0,38,75,.4);}
.chat-toggle img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  object-position:center 18%;
  background:var(--white);
  display:block;
}
.chat-toggle-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#E85C4A;
  color:#fff;
  font-family:var(--font-head);
  font-size:0.6875rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--white);
}
.chat-widget.open .chat-toggle-badge{display:none;}

@keyframes chat-toggle-pop{
  from{transform:scale(.4);opacity:0;}
  to{transform:scale(1);opacity:1;}
}

.chat-panel[hidden]{display:none;}
.chat-panel{
  width:min(360px, calc(100vw - 40px));
  height:min(500px, calc(100vh - 120px));
  background:var(--white);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,28,59,.28);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(0,38,75,.08);
  animation:chat-panel-in .22s ease;
  transform-origin:bottom right;
}
@keyframes chat-panel-in{
  from{opacity:0;transform:translateY(10px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.chat-panel-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 16px;
  background:var(--navy);
  color:#fff;
  flex-shrink:0;
}
.chat-panel-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 18%;
  background:#fff;
  flex-shrink:0;
}
.chat-panel-heading{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.chat-panel-heading strong{font-family:var(--font-head);font-size:0.9375rem;}
.chat-panel-heading span{
  display:flex;align-items:center;gap:6px;
  font-size:0.75rem;color:var(--accent);
}
.chat-panel-heading span i{
  width:7px;height:7px;border-radius:50%;background:#4ADE80;display:block;
}
.chat-close{
  color:#fff;
  opacity:.75;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  flex-shrink:0;
}
.chat-close:hover{opacity:1;background:rgba(255,255,255,.12);}

.chat-messages{
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--light-bg);
}
.chat-msg{
  max-width:82%;
  padding:10px 13px;
  border-radius:14px;
  font-size:0.8438rem;
  line-height:1.45;
}
.chat-msg-bot{
  align-self:flex-start;
  background:#fff;
  color:var(--navy);
  border-bottom-left-radius:4px;
  box-shadow:0 1px 4px rgba(0,38,75,.08);
}
.chat-msg-user{
  align-self:flex-end;
  background:var(--navy);
  color:#fff;
  border-bottom-right-radius:4px;
}
.chat-msg-typing{
  align-self:flex-start;
  display:flex;
  gap:4px;
  background:#fff;
  padding:12px 14px;
  border-radius:14px;
  border-bottom-left-radius:4px;
  box-shadow:0 1px 4px rgba(0,38,75,.08);
}
.chat-msg-typing span{
  width:6px;height:6px;border-radius:50%;
  background:var(--gray-text);
  opacity:.5;
  animation:chat-typing 1s infinite ease-in-out;
}
.chat-msg-typing span:nth-child(2){animation-delay:.15s;}
.chat-msg-typing span:nth-child(3){animation-delay:.3s;}
@keyframes chat-typing{
  0%,60%,100%{transform:translateY(0);opacity:.4;}
  30%{transform:translateY(-4px);opacity:1;}
}

.chat-quick-replies{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 16px 12px;
  background:var(--light-bg);
  flex-shrink:0;
}
.chat-chip{
  font-family:var(--font-body);
  font-size:0.7813rem;
  font-weight:600;
  color:var(--navy);
  background:#fff;
  border:1px solid rgba(0,38,75,.14);
  padding:7px 12px;
  border-radius:999px;
  transition:background .15s ease, border-color .15s ease;
}
.chat-chip:hover{background:var(--icon-bg);border-color:var(--accent);}

.chat-input-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px;
  border-top:1px solid rgba(0,38,75,.08);
  flex-shrink:0;
  background:#fff;
}
.chat-input-row input{
  flex:1;
  border:1px solid rgba(0,38,75,.16);
  border-radius:999px;
  padding:10px 16px;
  font-family:var(--font-body);
  font-size:0.8438rem;
  color:var(--navy);
  background:var(--panel-bg);
}
.chat-input-row input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.chat-send{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--accent-btn);
  color:var(--navy-2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform .15s ease, opacity .15s ease;
}
.chat-send:hover{transform:translateY(-1px);opacity:.9;}

@media (max-width:480px){
  .chat-widget{right:14px;bottom:14px;}
  .chat-panel{
    width:calc(100vw - 28px);
    height:min(72vh, 560px);
  }
  .chat-toggle{width:58px;height:58px;}
}

/* ==========================================================================
   Responsive + touch optimization
   Sits last so it can tune the section rules above without editing them.
   ========================================================================== */

/* --- Cross-cutting --- */
:root{--header-h:72px;}

/* <img> carries width/height attributes so the browser can reserve space before
   the file loads; height:auto keeps the stylesheet in charge of actual sizing. */
img{height:auto;}

/* The header is sticky, so in-page jumps (#quote, #repairs) must clear it. */
section[id],div[id="before-after"]{scroll-margin-top:calc(var(--header-h) + 14px);}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--icon-blue);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Nothing should render below ~11px. */
.strip-brand small{font-size:0.6563rem;}
.robot-badge{font-size:0.6875rem;}

/* --- Tablet and below: touch targets --- */
@media (max-width:1024px){
  .main-nav a{min-height:48px;display:flex;align-items:center;}
  .nav-toggle{width:44px;height:44px;}
  .phone{min-height:44px;}
}

@media (max-width:820px){
  .carousel-arrow{width:42px;height:42px;}
  .dot{width:10px;height:10px;}
  .strip-meta a{display:inline-block;padding-block:8px;}
  .fg-card-link{min-height:40px;padding-block:8px;}
  .logo{display:flex;align-items:center;min-height:44px;}

  /* 16px keeps iOS Safari from zooming the page in on focus. */
  .field input,.field select,.field textarea,.chat-input-row input{font-size:1rem;}
  .field-select select{height:48px;}
}

/* --- Phone header: the old layout overflowed and forced a sideways scroll --- */
@media (max-width:900px){
  .logo img{height:40px;}
}
@media (max-width:640px){
  .header-inner{gap:10px;}
  .header-brand{gap:8px;}
  .logo img{height:34px;}
  .header-captain-avatar{width:36px;height:36px;border-width:2px;}
  .header-actions{gap:4px;}
  /* The hero CTA sits directly below this, so the header keeps tap-to-call instead. */
  .header-actions .btn-navy{display:none;}
  .header-actions .phone{width:44px;height:44px;justify-content:center;gap:0;}
}
@media (max-width:400px){
  .logo img{height:30px;}
  .header-captain-avatar{width:32px;height:32px;}
}

/* --- Phone: shorten the page --- */
@media (max-width:640px){
  /* Cards stay two-up like the mobile comp instead of stacking into a long ribbon. */
  .fg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .fg-card-media img{aspect-ratio:3/2;}
  .fg-card-icon{left:12px;bottom:-18px;width:36px;height:36px;}
  .fg-card-icon svg{width:18px;height:18px;}
  .fg-card-body{padding:26px 13px 14px;}
  .fg-card-body h3{font-size:0.9375rem;margin-bottom:6px;}
  .fg-card-body p{font-size:0.8125rem;line-height:1.45;margin-bottom:10px;}
  .fg-card-link{font-size:0.8125rem;gap:6px;}
  .fg-head{padding-top:34px;padding-bottom:18px;row-gap:10px;}
  /* Both repeat copy that the stats bar right below already carries. */
  .fg-kicker,.fg-head-script{display:none;}
  .fg-lead{font-size:0.9375rem;}
  .fg-feature-photo{min-height:clamp(210px,46vw,280px);}

  /* Stat rows read fine two-up and save a screen of scrolling each time. */
  .stats-inner{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 10px;padding-block:24px;
  }
  .stat-item{padding:0;gap:10px;}
  .stat-icon{width:40px;height:40px;}
  .stat-icon svg{width:19px;height:19px;}
  .stat-text{gap:2px;}
  .stat-text strong{font-size:0.9063rem;line-height:1.2;}
  .stat-text small{font-size:0.6875rem;letter-spacing:.4px;}

  .areas-bar-inner{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 10px;
  }
  .areas-bar-item{padding:0;}
  .areas-bar-btn{grid-column:1 / -1;justify-self:center;}

  .before-after,.results-soon{width:100%;max-width:none;}

  .areas-card{padding:60px 16px 20px;}
  .areas-list{gap:9px;}
  .areas-list li{font-size:0.8125rem;}
  .areas-card-map img{max-width:150px;margin-top:10px;}
  .areas-mini-stats{row-gap:20px;}
  .areas-copy p{font-size:0.9375rem;}

  /* The four trust facts ran three times down this page. Two is plenty on a
     phone, so drop the middle repeat and keep the one above the form. */
  .results-testimonials .stats-bar{display:none;}

  .fg-feature-copy{padding-block:30px;}
  .fg-feature-copy h2{font-size:1.375rem;margin-bottom:10px;}
  .fg-feature-copy p{font-size:0.9063rem;margin-bottom:20px;}
  .fg-feature-script{display:none;}
  .fg-feature-btn{padding:14px 22px;font-size:0.9375rem;}

  .contact-perks{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 10px;
  }
  .contact-perks li{padding:0;}
  .perk-icon{width:40px;height:40px;}

}

@media (max-width:379px){
  .fg-grid{grid-template-columns:minmax(0,1fr);}
  .stats-inner,.areas-bar-inner,.contact-perks{grid-template-columns:minmax(0,1fr);}
}

/* ==========================================================================
   Services dropdown (header + footer) — shared by every page.
   ========================================================================== */
.nav-item{position:relative;display:flex;align-items:center;}
.nav-dropdown svg{transition:transform .18s ease;}
.nav-item.open > .nav-dropdown svg{transform:rotate(180deg);}

.nav-menu{
  position:absolute;
  top:100%;left:-18px;
  min-width:268px;
  background:#fff;
  border:1px solid #E6EEF6;
  border-radius:14px;
  box-shadow:0 26px 48px -24px rgba(0,38,75,.5);
  padding:8px;
  margin-top:10px;
  z-index:130;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Bridges the gap between the trigger and the panel so hover doesn't drop. */
.nav-menu::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-12px;
  height:12px;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu,
.nav-item.open .nav-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-menu a{
  display:block;
  padding:9px 12px;
  border-radius:9px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:0.9063rem;
  color:var(--navy);
  line-height:1.35;
  transition:background .14s ease, color .14s ease;
}
.nav-menu a small{
  display:block;
  font-family:var(--font-body);
  font-weight:400;
  font-size:0.7813rem;
  color:var(--gray-text);
  margin-top:2px;
}
.nav-menu a:hover,.nav-menu a:focus-visible{background:var(--light-bg);color:var(--icon-blue);}
.nav-menu a[aria-current="page"]{background:var(--icon-bg);color:var(--icon-blue);}
.nav-menu hr{
  border:none;
  border-top:1px solid #EDF3F8;
  margin:6px 10px;
}

@media (max-width:1024px){
  /* Inside the stacked mobile nav the panel becomes an inline accordion. */
  .nav-item{display:block;width:100%;}
  .nav-item > .nav-dropdown{justify-content:space-between;}
  .nav-menu{
    position:static;
    min-width:0;
    width:100%;
    margin:0 0 6px;
    padding:4px 0 4px 12px;
    border:none;
    border-left:2px solid var(--icon-bg);
    border-radius:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
  }
  .nav-menu::before{display:none;}
  .nav-item:hover .nav-menu,
  .nav-item:focus-within .nav-menu{display:none;}
  .nav-item.open .nav-menu{display:block;}
  .nav-menu a{padding:10px 10px;min-height:44px;}
  .nav-menu a small{display:none;}
}
