/* =========================================================
   Big Easy Siding — Homepage Redesign
   Colour + type tokens sampled directly from the approved mockup
   ========================================================= */

:root{
  --navy-900:#0A1D32;   /* footer */
  --navy-800:#032645;   /* CTA band, hero overlay */
  --navy-700:#02345F;   /* navy buttons */
  --navy-600:#0F3D6E;
  --ink:#0F2842;        /* headings */
  --body:#4A5D72;       /* body copy */
  --gold:#FDBE31;       /* header / CTA buttons */
  --gold-hi:#FADF1E;    /* hero primary button */
  --gold-dk:#E9A912;
  --star:#FEC027;
  --tint:#F2F6FB;       /* light blue panels (matches the mockup band behind the map) */
  --warm:#F9F8F5;       /* "Our Work" band */
  --cool:#F6F8FA;       /* "Why" panel */
  --line:#DDE5EF;
  --white:#fff;

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --header-h:82px;
  --radius:10px;
  --shadow-card:0 2px 14px rgba(15,40,66,.08);
  --shadow-lift:0 10px 34px rgba(10,29,50,.16);
  --ease-quart:cubic-bezier(0.25,1,0.5,1);
  --container:1440px;
  /* Every banner is this tall, home and inner pages alike. Below 1000px the
     home banner stacks its form underneath, so the shared height is lifted
     there and each banner goes back to its own content. */
  --hero-h:666px;
  /* the inner pages carry no form beside the copy, so their banner is shorter */
  --hero-inner-h:500px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  /* Safety net for horizontal scroll. `clip`, never `hidden`: `hidden` turns the
     body into a scroll container and silently kills the sticky header. */
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
/* Embeds (the GHL form today, a map or video later) carry their own width/height
   attributes — never let one push the page sideways. */
iframe{max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;color:var(--ink);line-height:1.18}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
button{font:inherit;color:inherit}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:74px 0}
.h-serif{font-family:var(--serif);font-weight:700;letter-spacing:-.01em}

.eyebrow{
  font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#B6C8DC;margin:0 0 14px;
}
.eyebrow b{color:var(--white);font-weight:700}
.eyebrow-dark{color:#7B8FA6}
.eyebrow-dark b{color:var(--ink)}

.ico{width:22px;height:22px;flex:0 0 auto}
.arrow{display:inline-block;margin-left:6px;transition:transform .2s ease}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--navy-800);color:#fff;padding:12px 20px;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:3px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:2px;
  font-weight:700;font-size:15px;line-height:1;
  padding:15px 26px;border-radius:6px;border:2px solid transparent;
  cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
  text-align:center;
}
/* A button label is one line. Without this a narrow column breaks "Request Your
   Estimate" over two rows and the button grows a whole line taller than its
   neighbour in the same row. */
.btn{white-space:nowrap}
/* The arrow and the phone glyph are flex items, so their own line box — taller
   than the 1.0 the button sets — was adding 6px to every button that has one.
   Pinning them to the button's line height keeps every button the same height. */
.btn>*{line-height:1;flex:0 0 auto}
.btn svg{display:block;width:1.15em;height:1.15em}
.btn:hover .arrow{transform:translateX(4px)}
.btn-sm{padding:12px 20px;font-size:14px}

.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--navy-900)}
.btn-gold:hover{background:var(--gold-dk);border-color:var(--gold-dk)}

.btn-hero{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--navy-900);padding:17px 30px;font-size:16px}
.btn-hero:hover{background:var(--gold);border-color:var(--gold)}

.btn-navy{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.btn-navy:hover{background:var(--navy-600);border-color:var(--navy-600)}

/* Outlined phone button in the hero — 2px gold border, per the mockup */
.btn-outline-gold{
  background:rgba(4,20,36,.42);border-color:var(--gold-hi);color:#fff;
  padding:17px 28px;font-size:16px;gap:10px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.btn-outline-gold:hover{background:var(--gold-hi);color:var(--navy-900)}

/* White / light buttons — border deliberately emphasised for visibility
   (client note: "For white buttons, make sure the border is clearly emphasised") */
.btn-white{
  background:var(--white);
  color:var(--navy-700);
  border:2px solid var(--navy-700);
  box-shadow:0 1px 0 rgba(2,52,95,.18);
}
.btn-white:hover{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
.btn-white-on-dark{
  background:var(--white);
  color:var(--navy-900);
  border:2px solid var(--white);
  box-shadow:0 0 0 1px rgba(10,29,50,.35);
}
.btn-white-on-dark:hover{background:transparent;color:#fff}

/* =========================================================
   HEADER — sticky
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:900;
  background:var(--white);
  border-bottom:1px solid rgba(15,40,66,.07);
  transition:box-shadow .2s ease;
}
.site-header.is-stuck{box-shadow:0 4px 18px rgba(10,29,50,.11)}

.header-inner{
  display:flex;align-items:center;gap:20px;
  min-height:var(--header-h);
}
.brand{flex:0 0 auto}
/* The real logo is a compact, near-square mark (184x83), not the wide lockup the
   mockup drew, so it needs more height to carry the same weight in the header. */
.brand img{height:54px;width:auto}

.primary-nav{display:flex;align-items:center;gap:20px;margin-left:auto;min-width:0}
.nav-list{display:flex;align-items:center;gap:4px}
.nav-list > li{position:relative}
.nav-list > li > a{
  display:block;padding:10px 11px;border-radius:5px;
  font-size:14.5px;font-weight:500;color:#1B3A5C;white-space:nowrap;
  transition:color .16s ease,background .16s ease;
}
.nav-list > li > a:hover{color:var(--navy-700);background:#F2F6FB}
.nav-list > li > a.is-current{color:var(--navy-700);font-weight:700}
.nav-list > li > a.is-current::after{
  content:"";display:block;height:2px;background:var(--gold);
  margin:6px 2px -10px;border-radius:2px;
}

/* dropdowns */
.nav-list > li.has-dropdown > a{padding-right:30px}
.dd-toggle{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;padding:0;background:none;border:0;cursor:pointer;
  color:#1B3A5C;display:grid;place-items:center;
}
.dd-toggle svg{width:11px;height:8px;transition:transform .2s ease}
.dropdown{
  position:absolute;top:calc(100% + 8px);left:0;min-width:246px;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:var(--shadow-lift);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.dropdown-2col{min-width:400px;display:grid;grid-template-columns:1fr 1fr;gap:0 6px}
.dropdown-2col .dd-all{grid-column:1 / -1}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.has-dropdown:hover .dd-toggle svg,
.has-dropdown.is-open .dd-toggle svg{transform:rotate(180deg)}
.dropdown a{
  display:block;padding:9px 12px;border-radius:5px;
  font-size:14.5px;color:#28425F;
}
.dropdown a:hover{background:var(--tint);color:var(--navy-700)}
.dropdown .dd-all{
  margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 5px 5px;
  font-weight:700;color:var(--navy-700);
}

.nav-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.header-phone{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:16px;color:var(--navy-800);white-space:nowrap;
}
.header-phone .ico{color:var(--navy-700)}
.header-phone:hover{color:var(--navy-700)}

/* hamburger — animates to an X while the drawer is open */
.nav-toggle{display:none;margin-left:auto;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:46px;height:46px;padding:0;border:1px solid rgba(15,40,66,.2);border-radius:7px;background:#fff;cursor:pointer;position:relative;z-index:930}
.nav-toggle-bar{display:block;width:22px;height:2px;background:var(--navy-800);border-radius:2px;transition:transform .35s var(--ease-quart),opacity .3s,background-color .3s}
.nav-toggle.open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle.open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   OFF-CANVAS MOBILE MENU — backdrop + slide-in panel + accordion
   Built by main.js from the desktop .nav-list, so the markup above stays
   the single source of truth for the menu.
   ========================================================= */
body.scroll-locked{overflow:hidden}
.mobile-backdrop{position:fixed;inset:0;z-index:910;pointer-events:none;background:rgba(8,22,38,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease-quart),visibility .4s}
.mobile-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;z-index:920;pointer-events:none;width:min(360px,86vw);background:var(--navy-900);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .45s var(--ease-quart),visibility .45s;box-shadow:-24px 0 60px -24px rgba(0,0,0,.55);overflow-y:auto;overscroll-behavior:contain}
.mobile-menu.open{transform:none;visibility:visible;pointer-events:auto}
.mobile-menu__head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:18px 22px;background:var(--navy-900);border-bottom:1px solid rgba(255,255,255,.12)}
.mobile-menu__brand{font-weight:700;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.mobile-menu__close{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:none;color:#fff;display:grid;place-items:center;flex-shrink:0;cursor:pointer;transition:background .3s,border-color .3s,transform .35s var(--ease-quart)}
.mobile-menu__close:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:rotate(90deg)}
.mobile-menu__close svg{width:22px;height:22px}
.mobile-nav{flex:1;padding:6px 22px}
.mobile-nav__list,.mobile-nav__sub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mobile-nav__list>li{border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-nav__row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.mobile-nav a{display:block;flex:1;min-width:0;color:#fff;font-weight:700;font-size:16.5px;padding:.78em 0;border:0;transition:color .3s}
.mobile-nav a:hover{color:var(--gold)}
.mobile-nav__toggle{width:40px;height:40px;display:grid;place-items:center;background:none;border:0;color:#fff;flex:none;cursor:pointer}
.mobile-nav__toggle svg{width:20px;height:20px;transition:transform .35s var(--ease-quart)}
.has-sub.open>.mobile-nav__row>.mobile-nav__toggle svg{transform:rotate(180deg)}
.mobile-nav__subwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-quart)}
.has-sub.open>.mobile-nav__subwrap{grid-template-rows:1fr}
.mobile-nav__sub{overflow:hidden;min-height:0;padding-left:14px}
.mobile-nav__sub a{font-size:15px;font-weight:500;color:rgba(255,255,255,.72)}
.mobile-nav__sub li:not(:last-child) a{border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-menu__cta{display:flex;flex-direction:column;gap:12px;padding:18px 22px calc(22px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.12)}
.mobile-menu__cta .btn{width:100%;justify-content:center}
.mobile-menu__cta .mm-call{color:#fff;text-align:center;font-weight:700;font-size:16px;padding:6px 0}
.mobile-menu__cta .mm-call:hover{color:var(--gold)}
/* The drawer only exists below the hamburger breakpoint — keep it fully out of the
   desktop document so it can never take a tab stop or paint over the header. */
@media (min-width:1280px){
  .mobile-menu,.mobile-backdrop{display:none}
}

/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  min-height:var(--hero-h);display:flex;align-items:center;
  /* NOTE: the supplied mockup has the hero headline baked into its hero photo,
     so that photo cannot be lifted cleanly. This uses Big Easy Siding's own
     wide hero image, which already carries a dark-left gradient. Swap in the
     mockup's source photo if the original (text-free) file is available. */
  background:
    linear-gradient(90deg,rgba(4,18,33,.94) 0%,rgba(4,18,33,.82) 34%,rgba(4,18,33,.35) 62%,rgba(4,18,33,.28) 100%),
    var(--bes-band-photo, url("../img/hero-bg.png")) center/cover no-repeat;
  background-color:var(--navy-800);
  padding:52px 0 56px;
}
.hero-grid{
  width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) 396px;
  gap:48px;align-items:center;
}
.hero-copy{min-width:0}
.hero h1{
  font-family:var(--serif);font-weight:700;color:#fff;
  font-size:clamp(34px,4.4vw,56px);line-height:1.1;letter-spacing:-.015em;
  margin:0 0 18px;max-width:660px;
}
.hero-sub{color:#D7E2ED;font-size:17.5px;line-height:1.62;margin:0 0 30px;max-width:560px}
.hero-btns{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:44px}

.trust-bar{
  display:flex;flex-wrap:nowrap;align-items:center;
  gap:0;color:#fff;
}
.trust-bar li{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:500;line-height:1.34;
  padding:0 15px;border-left:1px solid rgba(255,255,255,.24);
  white-space:nowrap;
}
.trust-bar li:first-child{padding-left:0;border-left:0}
.trust-bar li:last-child{padding-right:0}
.trust-bar .ico{width:24px;height:24px;color:#fff}
.trust-bar .fleur{width:22px}

/* form card */
.hero-form{
  position:relative;
  background:#fff;border-radius:var(--radius);
  padding:26px 26px 22px;box-shadow:var(--shadow-lift);
}
.hero-form h2{font-family:var(--serif);font-size:25px;font-weight:700;margin:0 0 8px}
.hero-form > p{font-size:14px;line-height:1.55;color:#5A6E85;margin:0 0 16px}
/* The live HighLevel form is configured at 1100px tall (name, email, phone,
   service, full address, message, upload, SMS opt-in). form_embed.js resizes
   the iframe to its real content height; this min-height just reserves the
   space so the page does not jump while it loads. */
.lc-form-wrap{position:relative;min-height:1100px}
.lc-form-wrap iframe{width:100%;min-height:1100px;border:0;display:block}

/* form_embed.js hides the iframe (opacity:0; visibility:hidden; left:-9999px)
   until the form posts back a "ready" message, then reveals it. If that message
   never arrives the form stays invisible. These rules keep it on screen no
   matter what; the script's height/auto-resize still applies. */
.lc-form-wrap iframe[data-initial-iframe-hidden],
.lc-form-wrap iframe{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  position:static!important;
  left:auto!important;
  display:block!important;
}

/* --- Balanced banner (desktop two-column hero only) -------------------------
   The live HighLevel form runs ~1,250px tall while the headline column is
   ~370px, so a centred grid left a deep empty gap above and below the copy.
   The card is capped near the height of the copy column and the form scrolls
   inside it, which keeps the banner reading as one balanced band. Below
   1280px the hero stacks, there is nothing to balance, and the cap is off so
   the form runs full length.
   The real fix is shortening the form inside HighLevel — see HANDOFF.md. */
@media (min-width:1280px){
  .hero-form{
    display:flex;flex-direction:column;
    max-height:clamp(470px,62vh,620px);
    padding-bottom:0;
    overflow:hidden;
  }
  .hero-form .lc-form-wrap{
    min-height:0;flex:1 1 auto;
    /* overscroll-behavior is deliberately left at auto: once the form bottoms
       out the wheel chains back to the page, so a visitor scrolling with the
       cursor over the card is never stuck in it. */
    overflow-y:auto;
    /* must exceed the 32px ::after fade below, so that at full scroll the fade
       lies over blank padding and never veils the Submit button */
    padding-bottom:40px;
    scrollbar-width:thin;scrollbar-color:#C6D4E3 transparent;
  }
  .hero-form .lc-form-wrap:focus-visible{outline:3px solid var(--gold);outline-offset:-1px;border-radius:6px}
  .hero-form .lc-form-wrap::-webkit-scrollbar{width:8px}
  .hero-form .lc-form-wrap::-webkit-scrollbar-track{background:transparent}
  .hero-form .lc-form-wrap::-webkit-scrollbar-thumb{background:#C6D4E3;border-radius:4px}
  .hero-form .lc-form-wrap::-webkit-scrollbar-thumb:hover{background:#A9BDD2}
  /* soft fade at the card's bottom edge so it reads as "more form below" */
  .hero-form::after{
    content:"";position:absolute;left:2px;right:2px;bottom:2px;height:32px;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 76%);
    border-radius:0 0 var(--radius) var(--radius);
    pointer-events:none;
  }
}

/* =========================================================
   SERVICES
   ========================================================= */
.services{background:#fff;padding-top:66px;padding-bottom:56px}
.services-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:52px;align-items:start}
.services-intro h2{font-size:clamp(27px,2.5vw,33px);margin:0 0 14px}
.services-intro p{font-size:15px;line-height:1.7;margin-bottom:24px}

.service-rail{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;
}
.service-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:#C4D4E6}
.service-card img{width:100%;height:126px;object-fit:cover}
.service-label{
  display:flex;align-items:flex-start;justify-content:space-between;gap:6px;
  padding:12px 11px 14px;
  font-size:13px;font-weight:700;color:var(--ink);line-height:1.34;
}
.service-card:hover .arrow{transform:translateX(4px)}
.service-label .arrow{color:var(--navy-700);margin:0}

/* =========================================================
   WHY US
   ========================================================= */
.why{background:#fff;padding-top:18px}
.why-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:0;align-items:stretch}
.why-media{border-radius:8px 0 0 8px;overflow:hidden}
.why-media img{width:100%;height:100%;min-height:340px;object-fit:cover}
.why-panel{
  background:var(--cool);border-radius:0 8px 8px 0;
  padding:44px 48px;display:flex;flex-direction:column;justify-content:center;
}
.why-panel h2{font-size:clamp(27px,2.6vw,34px);margin:0 0 16px}
.why-panel > p{font-size:15.5px;line-height:1.72;max-width:640px;margin-bottom:30px}

.why-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.why-features li{display:flex;align-items:center;gap:11px;font-size:14.5px;line-height:1.35;color:var(--ink);font-weight:500}
.why-features .ico{width:27px;height:27px;color:var(--navy-700)}

/* =========================================================
   OUR WORK
   ========================================================= */
.work{background:var(--warm);padding:54px 0}
.work-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:52px;align-items:center}
.work-intro h2{font-size:clamp(27px,2.5vw,33px);margin:0 0 4px}
.work-kicker{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink);margin:0 0 12px}
.work-intro p{font-size:15px;line-height:1.7}
.work-intro .btn{margin-top:12px}

.work-pairs{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ba{position:relative;margin:0;border-radius:6px;overflow:hidden}
/* keep the mockup's baked-in Before/After chips (bottom-left) inside the crop */
.ba img{width:100%;height:196px;object-fit:cover;object-position:left bottom}
/* "Before"/"After" labels are part of the supplied mockup artwork, so the
   caption element is kept for screen readers only. */
.sr-only{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.how{background:#fff;padding:56px 0}
.how-grid{display:grid;grid-template-columns:minmax(0,1fr) 386px;gap:48px;align-items:center}
.how-main h2{font-size:clamp(27px,2.5vw,33px);margin:0 0 4px}
.how-sub{font-size:15px;margin:0 0 30px}

.steps{display:flex;align-items:flex-start;gap:14px}
.step{flex:1 1 0;min-width:0}
.step-arrow{
  flex:0 0 auto;align-self:center;color:#8FA2B6;font-size:22px;line-height:1;
  padding:0 6px;margin-top:-38px;
}
.step-ico{
  display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;background:var(--tint);border:1px solid #D7E5F3;
  color:var(--navy-700);margin-bottom:16px;
}
.step-ico svg{width:26px;height:26px}
.step h3{font-family:var(--serif);font-size:16.5px;font-weight:700;margin:0 0 7px}
.step p{font-size:14.5px;line-height:1.6;margin:0}

.review-card{
  margin:0;background:var(--tint);border-radius:8px;padding:30px 32px;
}
.review-card h3{font-size:21px;margin:0 0 14px}
.review-card blockquote{margin:0 0 14px;font-size:15px;line-height:1.72;color:#41576F}
.stars{display:flex;gap:2px;margin-bottom:12px}
.stars svg{width:19px;height:19px;color:var(--star)}
.review-card figcaption{font-size:14px;color:#5A6E85}

/* =========================================================
   SERVICE AREAS
   ========================================================= */
/* Photo runs behind the whole band. The light wash on top keeps the navy
   headings and body copy at full contrast — the photo reads as texture, not
   as an image the eye has to work around. Swap the url() to change it. */
.areas{
  position:relative;
  background:
    linear-gradient(180deg,rgba(242,246,251,.93) 0%,rgba(242,246,251,.90) 45%,rgba(242,246,251,.95) 100%),
    var(--bes-band-photo, url("../img/areas-bg.jpg")) center/cover no-repeat;
  background-color:var(--tint);
  padding:56px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.areas-grid{
  display:grid;
  grid-template-columns:300px 250px minmax(0,1fr);
  gap:44px;align-items:center;
}
.areas-intro h2{font-size:clamp(26px,2.4vw,32px);margin:0 0 12px}
.areas-intro p{font-size:15px;line-height:1.68;margin-bottom:22px}
/* The map PNG has an opaque white plate. multiply drops that white out against
   the photo behind the band so the map sits on the background instead of
   floating in a white rectangle. */
/* display:block is what makes the auto margins centre it — auto margins compute
   to 0 on an inline image, which left it sitting off-centre in its column. */
.areas-map img{display:block;width:100%;max-width:240px;margin:0 auto;mix-blend-mode:multiply}
/* A live Google map in place of the image. Google's iframe carries fixed
   width/height attributes, so the column sets its size instead. Scoped under
   .areas-map so the taller generic .map-embed rule in pages.css can't win. */
.areas-map--embed .map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#e5e3df}
.areas-map .map-embed iframe{display:block;width:100%;height:auto;min-height:0;aspect-ratio:5/4;border:0}

.areas-list-title{font-weight:700;color:var(--ink);font-size:15.5px;margin:0 0 14px}
.areas-list ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px}
.areas-list li{display:flex;align-items:center;gap:10px;font-size:14.5px}
.areas-list a{color:#33495F}
.areas-list a:hover{color:var(--navy-700);text-decoration:underline}
.chk{width:17px;height:17px;color:var(--navy-700);flex:0 0 auto}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{
  background:
    linear-gradient(90deg,rgba(3,38,69,.90) 0%,rgba(3,38,69,.97) 26%,rgba(3,38,69,.97) 74%,rgba(3,38,69,.90) 100%),
    var(--bes-band-photo, url("../img/hero-bg.png")) center/cover no-repeat;
  background-color:var(--navy-800);
  padding:38px 0;
  border-bottom:3px solid rgba(255,255,255,.12);
}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.cta-copy{text-align:center}
.cta-copy .eyebrow{margin-bottom:8px}
.cta-band h2{color:#fff;font-size:clamp(28px,3.2vw,40px);margin:0 0 8px}
.cta-sub{color:#CFDCE9;font-size:16px;margin:0}
.cta-actions{display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-phone{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:17px}
.cta-phone .ico{color:var(--gold)}
.cta-phone:hover{color:var(--gold)}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--navy-900);color:#B9C6D4;font-size:14.5px}
.footer-grid{
  display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1.25fr;
  gap:40px;padding:50px 24px 42px;
}
.footer-brand img{height:56px;width:auto;margin-bottom:20px}
.footer-hours{font-size:14px;line-height:1.75;color:#9FB1C3}
.footer-hours strong{color:#fff;display:inline-block;margin-bottom:4px}

.footer-col h2{
  font-family:var(--sans);font-size:15.5px;font-weight:700;color:#fff;
  margin:0 0 16px;
}
.footer-col ul{display:grid;gap:9px}
.footer-col a{color:#B9C6D4}
.footer-col a:hover{color:var(--gold)}

.footer-contact ul{gap:14px}
.footer-contact li{display:flex;gap:11px;align-items:flex-start;line-height:1.6}
.footer-contact .ico{color:var(--gold);margin-top:2px}

.socials{display:flex;gap:14px;margin-top:22px}
.socials a{
  display:grid;place-items:center;width:34px;height:34px;color:#fff;
  transition:color .18s ease,transform .18s ease;
}
.socials svg{width:24px;height:24px}
.socials a:hover{color:var(--gold);transform:translateY(-2px)}

.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:16px 0}
.footer-bottom-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 26px;
}
.footer-bottom p{margin:0;font-size:13.5px;color:#9BADBF}
.fb-legal{display:flex;flex-wrap:wrap;align-items:center;font-size:13.5px;color:#9BADBF}
.footer-bottom a{color:#9BADBF}
.footer-bottom a:hover{color:var(--gold);text-decoration:underline}
.footer-bottom a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.footer-bottom .sep{opacity:.45;margin:0 8px}

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top{
  position:fixed;right:24px;bottom:24px;z-index:880;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  width:52px;height:52px;padding:0;
  border-radius:50%;border:2px solid var(--navy-800);
  background:var(--gold);color:var(--navy-900);
  box-shadow:0 6px 18px rgba(10,29,50,.28);
  cursor:pointer;
  opacity:0;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,background .18s ease;
}
.back-to-top svg{width:20px;height:20px;margin-top:8px}
.back-to-top span{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1;margin-bottom:7px}
.back-to-top.is-visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{background:var(--gold-hi)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1200px){
  .services-grid,.work-grid{grid-template-columns:270px minmax(0,1fr);gap:38px}
  .service-rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .areas-grid{grid-template-columns:250px minmax(0,1fr);gap:32px}
  .areas-intro{grid-column:1 / -1}
  .areas-map img{max-width:210px}
}

@media (max-width:1279px){
  :root{--header-h:74px}

  .nav-toggle{display:flex}
  .brand img{height:50px}

  /* Below 1280px the header nav is replaced wholesale by the off-canvas drawer.
     main.js clones .nav-list into .mobile-menu, so this markup stays the single
     source of truth for the menu and nothing here needs a mobile skin. */
  .primary-nav{display:none}

  /* hero */
  .hero{padding:44px 0 50px;min-height:0}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-copy{max-width:none}
  .trust-bar{flex-wrap:wrap;row-gap:16px}
  .trust-bar li{font-size:14px;padding:0 18px}
  .trust-bar .ico{width:25px;height:25px}
  .br-lg{display:none}
  .hero-form{max-width:560px}

  /* why */
  .why-grid{grid-template-columns:1fr}
  .why-media{border-radius:8px 8px 0 0}
  .why-media img{min-height:260px;max-height:320px}
  .why-panel{border-radius:0 0 8px 8px;padding:34px 28px}
  .why-features{grid-template-columns:1fr 1fr;gap:18px}

  /* how */
  .how-grid{grid-template-columns:1fr;gap:34px}
}

@media (max-width:860px){
  .section{padding:48px 0}
  .services-grid,.work-grid{grid-template-columns:1fr;gap:28px}
  .service-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-pairs{grid-template-columns:1fr;gap:18px}
  .areas-grid{grid-template-columns:1fr;gap:26px}
  .areas-intro{grid-column:auto}
  .areas-map{order:2}
  .areas-list{order:3}
  .areas-map img{max-width:200px}
  .areas-map--embed .map-embed{max-width:560px;margin:0 auto}
  .areas-map .map-embed iframe{aspect-ratio:16/10}
  .areas-list ul{grid-template-columns:1fr 1fr}

  .steps{flex-direction:column;gap:26px}
  .step-arrow{display:none}
  .step{width:100%}

  .cta-grid{grid-template-columns:1fr;gap:24px;text-align:center}
  .cta-actions{align-items:center}

  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;padding:42px 24px 34px}
  .footer-brand{grid-column:1 / -1}
}

@media (max-width:600px){
  .container{padding:0 18px}
  .hero{padding:34px 0 42px}
  .hero-btns{gap:12px}
  .hero-btns .btn{width:100%}
  .hero-form{padding:22px 18px 18px}

  .trust-bar{gap:14px 0}
  .trust-bar li{
    width:50%;padding:0 12px 0 0;border-left:0;
    border-right:1px solid rgba(255,255,255,.18);
  }
  .trust-bar li:nth-child(even){padding-left:14px;padding-right:0;border-right:0}
  .trust-bar li:last-child{width:100%;border-right:0}

  .service-rail{grid-template-columns:1fr 1fr;gap:12px}
  .service-card img{height:112px}
  .service-label{font-size:13.5px;padding:11px 11px 13px}

  .why-panel{padding:28px 20px}
  .why-features{grid-template-columns:1fr;gap:14px}

  .ba img{height:150px}
  .review-card{padding:24px 20px}
  .areas-list ul{grid-template-columns:1fr}

  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom-inner{justify-content:center;text-align:center;gap:8px 0}
  .footer-bottom p{line-height:1.9}
  .fb-legal{justify-content:center;line-height:1.9}

  .back-to-top{right:16px;bottom:16px;width:48px;height:48px}
  .back-to-top svg{width:18px;height:18px;margin-top:7px}
}

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

/* =========================================================
   ESTIMATE POPUP — the GHL form, opened from any #estimate button
   ========================================================= */
/* The closed state must really be gone. A `display` of our own beats the
   `hidden` attribute, which left an invisible full-screen layer over every page
   swallowing clicks — so `hidden` is given back its meaning explicitly, and
   pointer-events is belt and braces for the frame between the two states and
   for the GHL iframe, which forces visibility:visible on itself. */
.bes-modal[hidden]{display:none}
.bes-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;pointer-events:none}
.bes-modal.is-open{pointer-events:auto}
.bes-modal__backdrop{position:absolute;inset:0;background:rgba(8,22,38,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s var(--ease-quart)}
.bes-modal__dialog{position:relative;width:min(620px,100%);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;background:#fff;border-radius:12px;box-shadow:0 30px 70px -24px rgba(0,0,0,.6);overflow:hidden;transform:translateY(14px) scale(.98);opacity:0;transition:transform .3s var(--ease-quart),opacity .3s var(--ease-quart)}
.bes-modal.is-open .bes-modal__backdrop{opacity:1}
.bes-modal.is-open .bes-modal__dialog{transform:none;opacity:1}
.bes-modal__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--navy-900)}
.bes-modal__title{margin:0;font-family:var(--serif);font-size:20px;font-weight:700;color:#fff}
.bes-modal__close{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:none;color:#fff;cursor:pointer;transition:background .25s ease,transform .3s var(--ease-quart)}
.bes-modal__close:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-900);transform:rotate(90deg)}
.bes-modal__close svg{width:20px;height:20px}
/* The GHL iframe carries inline height:100%, which resolves to nothing unless
   something above it has a height — so the body sets one. */
.bes-modal__body{flex:1 1 auto;min-height:min(620px,70dvh);overflow-y:auto;overscroll-behavior:contain;padding:0}
.bes-modal__body .lc-form-wrap{min-height:min(620px,70dvh)}
.bes-modal__body iframe{width:100%;height:min(620px,70dvh);min-height:min(620px,70dvh);border:0;display:block}
@media (max-width:600px){
  .bes-modal{padding:12px}
  .bes-modal__title{font-size:17px}
}

/* The services intro column is shorter than the card rail beside it, so it
   sticks rather than leaving dead space scrolling past. Only where the two
   actually sit side by side. */
@media (min-width:1001px){
  .services-grid .services-intro{position:sticky;top:calc(var(--header-h) + 28px)}
  .work-grid .work-intro{position:sticky;top:calc(var(--header-h) + 28px)}
  .areas-grid .areas-intro{position:sticky;top:calc(var(--header-h) + 28px)}
}