/* ==========================================================================
   AE Building Design — Elevated Living Solutions
   Shared stylesheet for all pages
   ========================================================================== */

:root{
  /* Palette — navy, dark blue, light blue, white */
  --ink:        #0a2a4a;   /* navy — dark sections */
  --ink-2:      #123f68;   /* dark blue surface */
  --ink-3:      #1a5285;
  --ink-deep:   #061d35;   /* deepest navy — footer */
  --line:       #235c8c;
  --line-lt:    #d6e6f2;
  --paper:      #ffffff;   /* white */
  --paper-2:    #eef5fb;   /* palest blue */
  --text:       #0a2a4a;
  --text-mute:  #4a6882;
  --warm-gray:  #90afc6;
  --on-dark:    #eef5fb;
  --on-dark-mute:#a8c4dc;
  --gold:       #1f6fa8;   /* accent on light grounds — 5.4:1 on white */
  --gold-soft:  #79bce6;   /* accent on dark grounds  — 7.0:1 on navy  */
  --blue:       #2a7fbc;   /* dark blue */
  --sky:        #79bce6;   /* light blue */
  --teal:       #2a7fbc;
  --teal-light: #79bce6;
  --seafoam:    #c3dff2;

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 48px);
  --sec: clamp(68px, 9vw, 122px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --r: 2px;

  /* One classic serif across the whole site */
  --ff-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-disp: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-script: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* On dark grounds the accent flips to the light blue so contrast holds. */
.utility, .nav, .shero, .section--dark, .cta, .leadband, .leadstrip,
.marquee, .foot, .modal__box, .statstrip, .trust, .sticky-cta{
  --gold: #79bce6;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:860px; }
.section{ padding-block:var(--sec); }
.section--dark{ background:var(--ink); color:var(--on-dark); }
.section--tint{ background:var(--paper-2); }
.section--dark .h2, .section--dark h3{ color:var(--on-dark); }
section[id]{ scroll-margin-top:78px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#000; padding:12px 18px; font-weight:600;
}
.skip:focus{ left:8px; top:8px; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- Type ---------- */
.eyebrow{
  margin:0 0 14px;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}
.h1, .h2{
  font-family:var(--ff-disp); font-weight:600;
  line-height:1.12; letter-spacing:-.01em; margin:0 0 20px;
}
.h1{ font-size:clamp(32px, 5.2vw, 62px); line-height:1.06; }
.h2{ font-size:clamp(27px, 4vw, 48px); }
.h1 em, .h2 em{ font-style:italic; color:var(--gold); }
.h3{
  font-family:var(--ff-disp); font-weight:600; font-size:clamp(19px,2.2vw,24px);
  line-height:1.25; margin:0 0 10px;
}
.lead{ font-size:clamp(17px,1.8vw,19.5px); line-height:1.65; }

.sec-head{ max-width:760px; margin-bottom:clamp(36px,5vw,58px); }
.sec-head--row{
  display:flex; gap:40px; align-items:flex-end; justify-content:space-between;
  max-width:none; flex-wrap:wrap;
}
.sec-head--mid{ margin-inline:auto; text-align:center; }
.sec-head p{ color:var(--text-mute); margin:0; }
.section--dark .sec-head p{ color:var(--on-dark-mute); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px;
  font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; border:1px solid transparent; border-radius:var(--r);
  cursor:pointer; transition:.35s var(--ease); white-space:nowrap;
}
.btn--gold{ background:var(--gold); color:#04222c; border-color:var(--gold); }
.btn--gold:hover{ background:var(--gold-soft); border-color:var(--gold-soft); transform:translateY(-2px); }
.btn--ghost{ color:var(--on-dark); border-color:rgba(255,255,255,.4); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:var(--on-dark); transform:translateY(-2px); }
.btn--dark{ color:var(--text); border-color:#bfb49e; }
.btn--dark:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-2px); }
.btn--sm{ padding:11px 20px; font-size:11.5px; }
.btn--full{ width:100%; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:20px; }
.nav.is-stuck, .nav--solid{
  background:rgba(7,38,63,.95);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}

.brand{ display:flex; align-items:center; gap:11px; color:var(--on-dark); text-decoration:none; flex:none; }
.brand__mark{ width:26px; height:26px; color:var(--gold); flex:none; }
.brand__text{ font-family:var(--ff-disp); font-size:17px; font-weight:500; line-height:1; }
.brand__text em{ color:var(--gold); font-style:italic; }
.brand__tag{
  display:block; font-family:var(--ff-body); font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-dark-mute); margin-top:4px; font-style:normal;
}

.nav__links{ display:flex; align-items:center; gap:clamp(16px,2.2vw,30px); }
.nav__links a{
  color:var(--on-dark); text-decoration:none;
  font-size:13.5px; letter-spacing:.04em; opacity:.85; transition:.25s var(--ease);
}
.nav__links a:hover{ opacity:1; color:var(--gold); }
.nav__links a[aria-current="page"]{ opacity:1; color:var(--gold); }
.nav__links .btn{ opacity:1; }
.nav__links .btn:hover{ color:#04222c; }

.nav__tel{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--gold) !important; opacity:1 !important;
  font-size:14px !important; font-weight:600 !important;
  text-decoration:none; white-space:nowrap;
}
.nav__tel svg{ width:16px; height:16px; fill:currentColor; flex:none; }
.nav__tel:hover{ color:var(--gold-soft) !important; }
@media (max-width:1150px) and (min-width:901px){ .nav__tel span{ display:none; } }
@media (max-width:1050px) and (min-width:901px){ .nav__links{ gap:14px; } .nav__links a{ font-size:12.5px; } }

.nav__toggle{
  display:none; width:42px; height:42px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0;
}
.nav__toggle span{ display:block; height:1.5px; width:24px; margin-inline:auto; background:var(--on-dark); transition:.3s var(--ease); }
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:900px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:fixed; inset:78px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(7,38,63,.985);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    padding:10px var(--pad) 26px;
    max-height:calc(100svh - 78px); overflow-y:auto;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:.32s var(--ease);
  }
  .nav.is-open .nav__links{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:15px 0; font-size:16px; border-bottom:1px solid var(--line); }
  .nav__tel{ order:-1; justify-content:center; font-size:18px !important; }
  .nav__links .btn{ margin-top:18px; border-bottom:0; }
  .nav.is-open{ background:rgba(7,38,63,.985); }
}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--ink); color:var(--on-dark); overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; animation:kb 28s var(--ease) infinite alternate; }
@keyframes kb{ from{ transform:scale(1.04) } to{ transform:scale(1.13) translateY(-1.5%) } }
@media (prefers-reduced-motion: reduce){ .hero__media img{ animation:none } }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,27,46,.95) 0%, rgba(5,27,46,.6) 40%, rgba(5,27,46,.36) 70%, rgba(5,27,46,.7) 100%);
}
.hero__inner{ position:relative; padding-bottom:clamp(84px,11vh,140px); padding-top:140px; }
.hero__title{
  font-family:var(--ff-disp); font-weight:600;
  font-size:clamp(36px, 6.4vw, 78px); line-height:1.05; letter-spacing:-.02em;
  margin:0 0 22px; max-width:17ch;
}
.hero__title em{ font-style:italic; color:var(--gold-soft); }
.hero__lede{
  max-width:60ch; margin:0 0 32px;
  font-size:clamp(15px,1.5vw,18px); line-height:1.7;
  color:rgba(242,239,233,.87); font-weight:300;
}
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__tel{
  margin:26px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  font-size:14.5px; color:rgba(242,239,233,.72); font-weight:300;
}
.hero__tel a{
  color:var(--gold-soft); font-size:19px; font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(230,205,148,.45); transition:.25s var(--ease);
}
.hero__tel a:hover{ color:#fff; border-color:#fff; }
.hero__tel span{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(208,176,117,.4); border-radius:100px; padding:4px 11px;
}

/* ---------- Page banner (inner pages) ---------- */
.banner{
  position:relative; background:var(--ink); color:var(--on-dark);
  padding:clamp(130px,17vh,190px) 0 clamp(52px,7vw,84px); overflow:hidden;
}
.banner__media{ position:absolute; inset:0; }
.banner__media img{ width:100%; height:100%; object-fit:cover; opacity:.4; }
.banner__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,27,46,.96), rgba(5,27,46,.62));
}
.banner__inner{ position:relative; max-width:760px; }
.banner .h1{ color:var(--on-dark); margin-bottom:16px; }
.banner p{ color:rgba(242,239,233,.78); margin:0; font-size:clamp(15px,1.6vw,17.5px); font-weight:300; }

.crumbs{ display:flex; gap:8px; align-items:center; font-size:12px; color:var(--on-dark-mute); margin-bottom:18px; }
.crumbs a{ text-decoration:none; color:var(--gold); }
.crumbs a:hover{ text-decoration:underline; }
.crumbs span{ opacity:.5; }

/* ---------- Trust bar ---------- */
.trust{ background:var(--ink-2); border-bottom:1px solid var(--line); padding-block:26px; }
.trust__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
@media (max-width:980px){ .trust__grid{ grid-template-columns:repeat(2,1fr); gap:22px 18px; } }
@media (max-width:420px){ .trust__grid{ grid-template-columns:1fr; } }
.trust__item{ display:flex; flex-direction:column; gap:3px; padding-left:15px; border-left:2px solid var(--teal); }
.trust__item strong{ color:var(--on-dark); font-size:13.5px; font-weight:600; line-height:1.3; }
.trust__item span{ color:var(--on-dark-mute); font-size:12px; }

/* ---------- Marquee ---------- */
.marquee{ background:var(--ink-2); color:var(--on-dark-mute); border-block:1px solid var(--line); overflow:hidden; padding-block:17px; }
.marquee__track{ display:flex; width:max-content; animation:mq 42s linear infinite; }
.marquee__group{ display:flex; align-items:center; gap:30px; padding-right:30px; }
.marquee__group span{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
.marquee__group i{ color:var(--teal-light); font-size:7px; font-style:normal; }
@keyframes mq{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none } }

/* ---------- Grids ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); align-items:start; }
@media (max-width:860px){ .grid-2{ grid-template-columns:1fr; } }

.ticks{ list-style:none; margin:26px 0 0; padding:0; }
.ticks li{ position:relative; padding-left:28px; margin-bottom:11px; font-size:15px; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em; width:13px; height:7px;
  border-left:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold); transform:rotate(-45deg);
}

/* ---------- Promise cards (differentiators) ---------- */
.promise{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,28px); }
@media (max-width:980px){ .promise{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .promise{ grid-template-columns:1fr; } }
.promise__card{
  background:var(--ink-2); border:1px solid var(--line); padding:clamp(24px,3vw,32px);
  transition:.4s var(--ease);
}
.promise__card:hover{ border-color:rgba(208,176,117,.45); transform:translateY(-4px); }
.promise__ico{ width:30px; height:30px; color:var(--teal-light); margin-bottom:18px; }
.promise__ico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; }
.promise__card h3{ font-family:var(--ff-disp); font-weight:600; font-size:20px; margin:0 0 10px; color:var(--on-dark); }
.promise__card p{ margin:0; color:var(--on-dark-mute); font-size:14.5px; line-height:1.68; }

/* ---------- Service cards ---------- */
.svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,30px); }
@media (max-width:980px){ .svc{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .svc{ grid-template-columns:1fr; } }
.svc__card{
  background:var(--ink-2); border:1px solid var(--line); overflow:hidden;
  display:flex; flex-direction:column; transition:.45s var(--ease);
  text-decoration:none; color:inherit;
}
.svc__card:hover{ border-color:rgba(208,176,117,.5); transform:translateY(-5px); }
.svc__img{ aspect-ratio:16/10; overflow:hidden; background:var(--ink-3); }
.svc__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.svc__card:hover .svc__img img{ transform:scale(1.06); }
.svc__body{ padding:26px clamp(20px,2.6vw,30px) 30px; flex:1; display:flex; flex-direction:column; }
.svc__num{ display:block; font-family:var(--ff-disp); font-size:13px; letter-spacing:.2em; color:var(--gold); margin-bottom:11px; }
.svc__body h3{ font-family:var(--ff-disp); font-weight:600; font-size:clamp(19px,2.1vw,23px); line-height:1.22; margin:0 0 10px; color:var(--on-dark); }
.svc__body p{ margin:0; color:var(--on-dark-mute); font-size:14.5px; line-height:1.68; }
.svc__more{ margin-top:auto; padding-top:18px; color:var(--gold); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }

/* ---------- Service list (services page) ---------- */
.svclist{ display:grid; gap:clamp(40px,5vw,64px); }
.svcgroup{ display:grid; grid-template-columns:minmax(0,320px) 1fr; gap:clamp(24px,4vw,56px); align-items:start; }
@media (max-width:820px){ .svcgroup{ grid-template-columns:1fr; gap:22px; } }
.svcgroup__head{ position:sticky; top:104px; }
@media (max-width:820px){ .svcgroup__head{ position:static; } }
.svcgroup__head img{ width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:18px; border-radius:var(--r); }
.svcgroup__items{ display:grid; gap:2px; }
.svcitem{ padding:22px 0; border-top:1px solid var(--line-lt); }
.svcitem h3{ font-family:var(--ff-disp); font-weight:600; font-size:20px; margin:0 0 7px; }
.svcitem p{ margin:0; color:var(--text-mute); font-size:14.8px; line-height:1.68; }

/* ---------- Filters + Gallery ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px; }
.chip{
  background:transparent; border:1px solid var(--line-lt); color:var(--text-mute);
  padding:9px 19px; border-radius:100px; cursor:pointer;
  font-family:inherit; font-size:12.5px; letter-spacing:.06em; transition:.28s var(--ease);
}
.chip:hover{ border-color:var(--gold); color:var(--text); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.gal{ column-count:3; column-gap:16px; }
@media (max-width:980px){ .gal{ column-count:2; } }
@media (max-width:560px){ .gal{ column-count:1; } }
.gal__item{
  break-inside:avoid; margin-bottom:16px; position:relative; display:block; width:100%;
  border:0; padding:0; background:var(--paper-2); cursor:zoom-in; overflow:hidden;
  border-radius:var(--r); animation:pop .5s var(--ease) both;
}
@keyframes pop{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.gal__item img{ width:100%; transition:transform .85s var(--ease); }
.gal__item:hover img{ transform:scale(1.045); }
.gal__cap{
  position:absolute; inset:auto 0 0 0; padding:38px 18px 16px;
  background:linear-gradient(to top, rgba(5,27,46,.9), transparent);
  color:#fff; text-align:left; opacity:0; transform:translateY(8px); transition:.4s var(--ease);
}
.gal__item:hover .gal__cap, .gal__item:focus-visible .gal__cap{ opacity:1; transform:none; }
.gal__cap strong{ display:block; font-weight:500; font-size:14.5px; }
.gal__cap span{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); }

/* ---------- Stats ---------- */
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(28px,4vw,42px) 30px; text-align:center; }
@media (max-width:760px){ .stats__grid{ grid-template-columns:repeat(2,1fr); } }
.stat strong{
  display:block; font-family:var(--ff-disp); font-weight:400;
  font-size:clamp(34px,5vw,54px); line-height:1; color:var(--gold); margin-bottom:10px;
}
.stat span{ font-size:12.5px; letter-spacing:.08em; color:var(--on-dark-mute); }

/* ---------- Steps ---------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,40px); }
@media (max-width:980px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ padding-top:24px; border-top:1px solid var(--line-lt); }
.step__n{ font-family:var(--ff-disp); font-size:13px; letter-spacing:.2em; color:var(--gold); display:block; margin-bottom:14px; }
.step h3{ font-family:var(--ff-disp); font-weight:600; font-size:21px; line-height:1.25; margin:0 0 10px; }
.step p{ margin:0; font-size:14.8px; color:var(--text-mute); line-height:1.7; }
.section--dark .step{ border-top-color:var(--line); }
.section--dark .step p{ color:var(--on-dark-mute); }

/* ---------- Split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; background:var(--paper-2); }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.split--reverse .split__media{ order:2; }
@media (max-width:900px){ .split--reverse .split__media{ order:0; } }
.split__media{ min-height:clamp(320px,50vw,700px); }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__body{ display:flex; align-items:center; padding:var(--sec) var(--pad); }
.split__inner{ max-width:520px; margin-inline:auto; }
.split__inner p{ color:var(--text-mute); margin:0 0 20px; }
.split__inner .lead{ color:var(--text); }

.facts{ margin:26px 0 32px; }
.facts > div{ display:flex; gap:16px; justify-content:space-between; align-items:baseline; padding:13px 0; border-top:1px solid var(--line-lt); }
.facts dt{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); flex:none; }
.facts dd{ margin:0; font-size:14.5px; text-align:right; }

/* ---------- Quotes ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,30px); }
@media (max-width:920px){ .quotes{ grid-template-columns:1fr; } }
.quote{
  margin:0; padding:clamp(24px,3vw,34px); background:var(--ink-2); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:16px; transition:.4s var(--ease);
}
.quote:hover{ border-color:rgba(208,176,117,.45); transform:translateY(-4px); }
.quote__stars{ color:var(--gold); letter-spacing:.24em; font-size:13px; }
.quote blockquote{
  margin:0; flex:1; font-family:var(--ff-disp); font-size:clamp(16px,1.7vw,18.5px);
  line-height:1.6; color:var(--on-dark); font-style:italic;
}
.quote blockquote::before{ content:'“' } .quote blockquote::after{ content:'”' }
.quote figcaption{ display:flex; flex-direction:column; gap:2px; padding-top:14px; border-top:1px solid var(--line); }
.quote figcaption strong{ font-size:14px; font-weight:600; color:var(--on-dark); }
.quote figcaption span{ font-size:12px; letter-spacing:.06em; color:var(--gold); }

/* ---------- Areas ---------- */
.areas{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); }
@media (max-width:820px){ .areas{ grid-template-columns:1fr; } }
.area{ padding-top:22px; border-top:1px solid var(--line-lt); }
.area h3{ font-family:var(--ff-disp); font-weight:600; font-size:21px; margin:0 0 6px; }
.area > p{ margin:0 0 16px; font-size:13px; color:var(--text-mute); }
.area ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.area li{ font-size:13px; color:var(--text-mute); border:1px solid var(--line-lt); border-radius:100px; padding:6px 14px; background:#fff; }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:0; }
.faq details{ border-top:1px solid var(--line-lt); }
.faq details:last-child{ border-bottom:1px solid var(--line-lt); }
.faq summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-family:var(--ff-disp); font-size:clamp(17px,2vw,21px); font-weight:500; line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:10px; top:50%; width:12px; height:12px;
  border-right:1.8px solid var(--gold); border-bottom:1.8px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-25%) rotate(-135deg); }
.faq summary:hover{ color:var(--gold); }
.faq__a{ padding:0 44px 26px 0; color:var(--text-mute); font-size:15.5px; line-height:1.72; }
.faq__a p{ margin:0 0 12px; } .faq__a p:last-child{ margin:0; }

/* ---------- Contact ---------- */
.contact__lede{ color:var(--on-dark-mute); max-width:48ch; margin:0 0 30px; }
.contact__list{ list-style:none; margin:0; padding:0; }
.contact__list li{ display:flex; gap:20px; align-items:baseline; padding:15px 0; border-top:1px solid var(--line); font-size:15px; }
.contact__list li:last-child{ border-bottom:1px solid var(--line); }
.contact__label{ flex:none; width:92px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.contact__list a{ color:var(--on-dark); text-decoration:none; border-bottom:1px solid var(--line); }
.contact__list a:hover{ border-color:var(--gold); color:var(--gold-soft); }
.contact__list span:not(.contact__label){ color:var(--on-dark-mute); }
.contact__btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

.form{ background:var(--ink-2); border:1px solid var(--line); padding:clamp(24px,3.5vw,38px); }
.field{ margin-bottom:18px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.field label{ display:block; margin-bottom:8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-mute); }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; background:var(--ink); border:1px solid var(--line);
  border-radius:var(--r); color:var(--on-dark); font-family:inherit; font-size:15px;
  transition:border-color .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); }
.field input::placeholder, .field textarea::placeholder{ color:#6f8a8a; }
.field select{
  appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239fd0c7' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:#c0564a; }
.form__note{ margin:14px 0 0; min-height:20px; font-size:13.5px; color:var(--gold-soft); }
.form__fine{ margin:14px 0 0; font-size:12px; color:var(--on-dark-mute); text-align:center; }

/* ---------- Prose (privacy) ---------- */
.prose h2{ font-family:var(--ff-disp); font-weight:600; font-size:clamp(21px,2.6vw,27px); margin:42px 0 12px; }
.prose h2:first-child{ margin-top:0; }
.prose p, .prose li{ color:var(--text-mute); font-size:15.5px; line-height:1.75; }
.prose ul{ padding-left:20px; }
.prose a{ color:var(--text); }

/* ---------- CTA band ---------- */
.cta{ background:var(--ink); color:var(--on-dark); padding-block:clamp(56px,7vw,86px); text-align:center; }
.cta .h2{ margin-inline:auto; max-width:18ch; }
.cta p{ color:var(--on-dark-mute); max-width:54ch; margin:0 auto 28px; }
.cta__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.foot{ background:var(--ink-deep); color:var(--on-dark); padding-block:60px 30px; border-top:1px solid var(--line); }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(26px,4vw,48px); padding-bottom:34px; }
@media (max-width:900px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .foot__grid{ grid-template-columns:1fr; } }
.foot__brand .brand__text{ display:block; margin-bottom:12px; font-size:19px; }
.foot__brand p{ margin:0 0 18px; color:var(--on-dark-mute); font-size:14px; max-width:42ch; line-height:1.7; }
.foot__badges{ display:flex; flex-wrap:wrap; gap:8px; }
.foot__badges span{ font-size:11px; letter-spacing:.08em; color:var(--gold); border:1px solid rgba(208,176,117,.35); border-radius:100px; padding:5px 12px; }
.foot__col{ display:flex; flex-direction:column; gap:10px; }
.foot__col h3{ margin:0 0 6px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark); font-weight:600; }
.foot__col a, .foot__col span{ color:var(--on-dark-mute); text-decoration:none; font-size:13.5px; line-height:1.5; transition:color .25s var(--ease); }
.foot__col a:hover{ color:var(--gold); }
.foot__social{ display:flex; gap:10px; margin-top:4px; }
.foot__social a{ width:34px; height:34px; border:1px solid var(--line); display:grid; place-items:center; border-radius:50%; }
.foot__social svg{ width:15px; height:15px; fill:currentColor; }
.foot__social a:hover{ border-color:var(--gold); color:var(--gold); }
.foot__legal{ margin:0; padding-top:22px; border-top:1px solid var(--line); font-size:12px; color:var(--warm-gray); line-height:1.7; }
.foot__legal a{ color:var(--seafoam); }

/* ---------- Lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:150; background:rgba(5,27,46,.985);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(6px,2vw,24px); padding:clamp(14px,3vw,40px); animation:fade .3s var(--ease);
}
.lb[hidden]{ display:none; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.lb__fig{ margin:0; display:grid; place-items:center; gap:14px; min-width:0; }
.lb__fig img{ max-width:100%; max-height:82svh; object-fit:contain; animation:pop .35s var(--ease) both; }
.lb__fig figcaption{ color:var(--on-dark-mute); font-size:13px; text-align:center; }
.lb__x{
  position:absolute; top:14px; right:18px; z-index:2; background:none; border:0;
  color:var(--on-dark); font-size:34px; line-height:1; cursor:pointer; padding:6px 12px;
}
.lb__x:hover{ color:var(--gold); }
.lb__nav{
  background:none; border:1px solid rgba(255,255,255,.18); color:var(--on-dark);
  width:clamp(38px,5vw,52px); height:clamp(38px,5vw,52px); border-radius:50%;
  font-size:26px; line-height:1; cursor:pointer; flex:none; transition:.28s var(--ease);
}
.lb__nav:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------- Sticky mobile call bar ---------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:none; flex-direction:column; align-items:center; gap:1px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:var(--gold); color:#04222c; text-decoration:none;
  box-shadow:0 -6px 24px rgba(0,0,0,.25);
  transform:translateY(100%); transition:transform .4s var(--ease);
}
.callbar span{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; opacity:.75; }
.callbar strong{ font-size:16px; font-weight:600; }
@media (max-width:760px){
  .callbar{ display:flex; }
  body.past-hero .callbar{ transform:none; }
  .foot{ padding-bottom:96px; }
}

/* ---------- Reveal ---------- */
.reveal{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .gal__item{ animation:none; }
}

/* ---------- Quick estimate popup ---------- */
.estimate-fab{
  position:fixed; right:18px; bottom:18px; z-index:95;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 20px 13px 16px; border:0; cursor:pointer;
  background:var(--ink); color:var(--on-dark);
  border:1px solid var(--gold); border-radius:100px;
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.06em;
  box-shadow:0 8px 26px rgba(0,0,0,.34);
  transition:.3s var(--ease);
}
.estimate-fab:hover{ background:var(--gold); color:#04222c; transform:translateY(-3px); }
.estimate-fab svg{ width:18px; height:18px; fill:none; stroke:var(--gold); stroke-width:1.8; flex:none; transition:stroke .3s var(--ease); }
.estimate-fab:hover svg{ stroke:#14100a; }
.estimate-fab__pulse{
  position:absolute; left:16px; top:50%; width:18px; height:18px; margin-top:-9px;
  border-radius:50%; border:1px solid var(--gold); animation:pulse 2.4s var(--ease) infinite; pointer-events:none;
}
@keyframes pulse{ 0%{ transform:scale(.8); opacity:.9 } 70%,100%{ transform:scale(2.2); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .estimate-fab__pulse{ animation:none; opacity:0 } }
@media (max-width:760px){
  .estimate-fab{ right:14px; bottom:82px; padding:11px 15px 11px 13px; font-size:12px; }
}
@media (max-width:400px){
  .estimate-fab span:not(.estimate-fab__pulse){ display:none; }
}

.modal{
  position:fixed; inset:0; z-index:160; display:grid; place-items:center;
  padding:20px; background:rgba(5,27,46,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:fade .28s var(--ease);
}
.modal[hidden]{ display:none; }
.modal__box{
  position:relative; width:min(520px,100%); max-height:92svh; overflow-y:auto;
  background:var(--ink-2); border:1px solid var(--line); border-top:3px solid var(--gold);
  padding:clamp(26px,4vw,40px); color:var(--on-dark);
  animation:rise .35s var(--ease) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
.modal__x{
  position:absolute; top:10px; right:14px; background:none; border:0;
  color:var(--on-dark-mute); font-size:30px; line-height:1; cursor:pointer; padding:4px 10px;
}
.modal__x:hover{ color:var(--gold); }
.modal__box .eyebrow{ margin-bottom:10px; }
.modal__box h2{
  font-family:var(--ff-disp); font-weight:600; font-size:clamp(23px,3vw,30px);
  line-height:1.18; margin:0 0 10px; color:var(--on-dark);
}
.modal__box h2 em{ font-style:italic; color:var(--gold); }
.modal__lede{ margin:0 0 22px; color:var(--on-dark-mute); font-size:14.5px; line-height:1.65; }
.modal__now{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
@media (max-width:420px){ .modal__now{ grid-template-columns:1fr; } }
.modal__now a{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 12px; text-decoration:none; border-radius:var(--r);
  font-size:13px; font-weight:600; letter-spacing:.04em; transition:.3s var(--ease);
}
.modal__now svg{ width:17px; height:17px; fill:currentColor; flex:none; }
.modal__now--single{ grid-template-columns:1fr; }
.modal__call{ background:var(--gold); color:#04222c; }
.modal__call:hover{ background:var(--gold-soft); }
.modal__or{
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-mute);
}
.modal__or::before, .modal__or::after{ content:""; flex:1; height:1px; background:var(--line); }
.modal__fine{ margin:14px 0 0; font-size:11.5px; color:var(--on-dark-mute); text-align:center; line-height:1.6; }

/* ============================================================
   4-PANEL SPLIT HERO
   ============================================================ */
.shero{ position:relative; background:var(--ink); color:var(--on-dark); }
.shero__brandline{
  text-align:center; padding:104px var(--pad) 0;
  font-family:var(--ff-disp); font-size:clamp(26px,3.6vw,44px); font-weight:600;
  letter-spacing:.02em; color:var(--gold-soft); line-height:1.2;
}
.shero__head{ text-align:center; padding:14px var(--pad) 34px; max-width:960px; margin-inline:auto; }
.shero__head h1{
  font-family:var(--ff-disp); font-weight:600;
  font-size:clamp(28px,4.4vw,52px); line-height:1.1; margin:0 0 16px; color:var(--on-dark);
}
.shero__head h1 em{ font-style:italic; color:var(--gold); }
.shero__services{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 0; margin:0 0 18px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--sky);
}
.shero__services span{ padding:0 14px; border-right:1px solid var(--line); }
.shero__services span:last-child{ border-right:0; }
.shero__lede{
  max-width:64ch; margin:0 auto 26px; font-size:clamp(15px,1.5vw,17px);
  line-height:1.7; color:var(--on-dark-mute); font-weight:300;
}
.shero__cta{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

.quad{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); }
@media (max-width:900px){ .quad{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .quad{ grid-template-columns:1fr; } }

.quad__cell{
  position:relative; display:block; overflow:hidden; text-decoration:none; color:var(--on-dark);
  min-height:clamp(230px,30vw,380px); background:var(--ink-2);
}
.quad__cell img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease), filter .5s var(--ease);
  filter:saturate(1.05) brightness(.82);
}
.quad__cell:hover img{ transform:scale(1.07); filter:saturate(1.1) brightness(.95); }
.quad__cell::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,27,46,.92) 0%, rgba(5,27,46,.35) 55%, rgba(7,38,63,.15) 100%);
  transition:opacity .5s var(--ease);
}
.quad__cell:hover::after{ opacity:.8; }
.quad__body{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(18px,2.2vw,26px); }
.quad__n{ font-size:11px; letter-spacing:.2em; color:var(--gold-soft); margin-bottom:8px; }
.quad__body h2{
  font-family:var(--ff-disp); font-weight:600; font-size:clamp(20px,2.3vw,27px);
  line-height:1.15; margin:0 0 6px; color:#fff;
}
.quad__body p{ margin:0; font-size:13.5px; line-height:1.55; color:rgba(238,247,251,.8); }
.quad__go{
  margin-top:12px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-soft); display:inline-flex; align-items:center; gap:7px;
}
.quad__cell:hover .quad__go{ color:#fff; }

.shero__tel{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px;
  padding:20px var(--pad); background:var(--ink-2); border-top:1px solid var(--line);
  font-size:14.5px; color:var(--on-dark-mute); font-weight:300;
}
.shero__tel a{
  color:var(--gold-soft); font-size:19px; font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(121,188,230,.45);
}
.shero__tel a:hover{ color:#fff; border-color:#fff; }
.shero__tel em{
  font-style:normal; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(31,111,168,.45); border-radius:100px; padding:4px 11px;
}

/* Service-page content blocks */
.copy{ max-width:74ch; }
.copy h2{ font-family:var(--ff-disp); font-weight:600; font-size:clamp(22px,2.7vw,30px); margin:44px 0 12px; }
.copy h2:first-child{ margin-top:0; }
.copy h3{ font-family:var(--ff-disp); font-weight:600; font-size:20px; margin:26px 0 8px; }
.copy p, .copy li{ color:var(--text-mute); font-size:16px; line-height:1.75; }
.copy ul{ padding-left:20px; }
.copy strong{ color:var(--text); }

.twocol{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:start; }
@media (max-width:880px){ .twocol{ grid-template-columns:1fr; } }
.sticky-cta{ position:sticky; top:104px; background:var(--ink); color:var(--on-dark); padding:clamp(24px,3vw,32px); border-top:3px solid var(--gold); }
.sticky-cta h3{ font-family:var(--ff-disp); font-weight:600; font-size:23px; margin:0 0 10px; color:#fff; }
.sticky-cta p{ margin:0 0 18px; font-size:14px; color:var(--on-dark-mute); line-height:1.6; }
.sticky-cta .btn{ width:100%; margin-bottom:9px; }
@media (max-width:880px){ .sticky-cta{ position:static; } }

.pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; }
.pill-row a, .pill-row span{
  font-size:13px; color:var(--text-mute); text-decoration:none;
  border:1px solid var(--line-lt); border-radius:100px; padding:7px 15px; background:#fff;
  transition:.25s var(--ease);
}
.pill-row a:hover{ border-color:var(--gold); color:var(--text); }

/* ============================================================
   DESIGN PASS — refinement over the base system
   ============================================================ */

:root{ --ff-script: Georgia, serif; }

/* ---- Script slogan, larger and centred with rules ---- */
.shero__brandline{
  font-family:var(--ff-script) !important;
  font-size:clamp(46px,7vw,92px) !important;
  font-weight:400 !important;
  line-height:1.05 !important;
  letter-spacing:0 !important;
  color:var(--gold-soft) !important;
  padding:clamp(96px,13vh,150px) var(--pad) 0 !important;
  display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,34px);
  text-shadow:0 2px 30px rgba(31,111,168,.22);
}
.shero__brandline::before, .shero__brandline::after{
  content:""; height:1px; flex:0 1 clamp(30px,10vw,150px);
  background:linear-gradient(to right, transparent, rgba(121,188,230,.55), transparent);
}
.brand__tag{ font-family:var(--ff-script) !important; font-size:12px !important;
  letter-spacing:.04em !important; text-transform:none !important; color:var(--gold-soft) !important; }
.foot__brand .brand__text{ line-height:1.35; }

/* ---- Hero rhythm ---- */
.shero{
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(47,143,206,.20), transparent 70%),
    radial-gradient(760px 380px at 12% 8%, rgba(31,111,168,.12), transparent 70%),
    var(--ink);
}
.shero__head{ padding-top:22px; }
.shero__head h1{ letter-spacing:-.015em; }
.shero__services{ margin-top:22px; }
.shero__services span{ color:var(--sky); opacity:.9; }
.shero__cta{ margin-top:30px; }

/* ---- Buttons: softer, more considered ---- */
.btn{ border-radius:3px; letter-spacing:.07em; }
.btn--gold{
  box-shadow:0 6px 22px rgba(31,111,168,.24);
  background:linear-gradient(135deg, var(--gold), #19a89c);
}
.btn--gold:hover{
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow:0 10px 30px rgba(31,111,168,.34);
}
.btn--ghost{ backdrop-filter:blur(3px); }

/* ---- Section headings: a small rule above the eyebrow ---- */
.sec-head .eyebrow{ position:relative; padding-top:20px; }
.sec-head .eyebrow::before{
  content:""; position:absolute; top:0; left:0; width:44px; height:2px; background:var(--gold);
}
.sec-head--mid .eyebrow::before, .cta .eyebrow::before{ left:50%; transform:translateX(-50%); }
.cta .eyebrow{ position:relative; padding-top:20px; }

/* ---- Cards: lighter borders, real depth on hover ---- */
.svc__card, .promise__card, .quote{ border-radius:3px; }
.svc__card{ box-shadow:0 1px 0 rgba(255,255,255,.04) inset; }
.svc__card:hover{ box-shadow:0 18px 44px rgba(3,18,30,.45); }
.promise__card{ position:relative; overflow:hidden; }
.promise__card::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px;
  background:linear-gradient(to right, var(--gold), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.promise__card:hover::before{ transform:scaleX(1); }

/* ---- Quad cells: cleaner separation, readable captions ---- */
.quad{ gap:1px; }
.quad__cell::after{
  background:linear-gradient(to top, rgba(4,22,38,.94) 0%, rgba(4,22,38,.45) 52%, rgba(7,38,63,.12) 100%);
}
.quad__body h2{ letter-spacing:-.01em; }
.quad__cell::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:3;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.quad__cell:hover::before{ transform:scaleX(1); }

/* ---- Trust bar ---- */
.trust{ background:linear-gradient(to bottom, var(--ink-2), var(--ink)); }

/* ---- Gallery ---- */
.gal__item{ border-radius:3px; }
.gal__item::after{
  content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(7,38,63,.08);
  pointer-events:none; border-radius:3px;
}

/* ---- Service page copy: better reading rhythm ---- */
.copy h2{ position:relative; padding-top:14px; }
.copy h2::before{
  content:""; position:absolute; top:0; left:0; width:34px; height:2px; background:var(--gold);
}
.copy p{ max-width:68ch; }
.copy a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:rgba(31,111,168,.5); }
.copy a:hover{ color:var(--gold); }

.sticky-cta{ border-radius:3px; box-shadow:0 18px 44px rgba(3,18,30,.18); }

/* ---- FAQ ---- */
.faq summary{ transition:color .25s var(--ease); }
.faq details[open] summary{ color:var(--gold); }

/* ---- Footer ---- */
.foot__col a{ position:relative; }
.foot__badges span{ background:rgba(31,111,168,.06); }

/* ---- Smoother scroll reveal ---- */
.reveal{ transform:translateY(16px); }

/* ---- Selection + scrollbar polish ---- */
::selection{ background:var(--gold); color:#04222c; }

/* ---- Hero vertical rhythm: keep the quad panels in view ---- */
.shero__brandline{
  padding:clamp(88px,11vh,112px) var(--pad) 0 !important;
  font-size:clamp(42px,5.6vw,74px) !important;
}
.shero__head{ padding-top:10px; padding-bottom:26px; }
.shero__head h1{ font-size:clamp(26px,3.6vw,44px); margin-bottom:12px; }
.shero__lede{ margin-bottom:22px; font-size:clamp(14.5px,1.35vw,16px); }
.shero__services{ margin-top:16px; margin-bottom:14px; }
.shero__cta{ margin-top:22px; }
.quad__cell{ min-height:clamp(215px,26vw,330px); }

@media (max-width:900px){
  .shero__brandline{ padding-top:96px !important; font-size:clamp(34px,8vw,52px) !important; }
  .shero__brandline::before, .shero__brandline::after{ flex-basis:24px; }
}


/* ============================================================
   V2 DESIGN SYSTEM — lead-gen layout, bolder type, soft cards
   Inspiration: Everlast Bathrooms / Okly Home conversion patterns
   ============================================================ */

:root{
  --ff-disp: -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-body: -apple-system, BlinkMacSystemFont, sans-serif;
  --r-card: 16px;
  --r-pill: 100px;
  --shadow-sm: 0 2px 10px rgba(7,38,63,.06);
  --shadow: 0 14px 40px rgba(7,38,63,.10);
  --shadow-lg: 0 28px 70px rgba(7,38,63,.18);
}

/* ---- Typography: bold geometric sans, tight tracking ---- */
.h1, .h2, .h3, .hero__title, .shero__head h1,
.quad__body h2, .svc__body h3, .promise__card h3, .step h3, .area h3,
.copy h2, .copy h3, .prose h2, .faq summary, .sticky-cta h3, .modal__box h2{
  font-family:var(--ff-disp) !important;
  font-weight:600 !important;
  letter-spacing:-.025em !important;
}
.h1{ font-size:clamp(34px,5vw,58px); line-height:1.04; }
.h2{ font-size:clamp(28px,3.6vw,46px); line-height:1.08; }
.h1 em, .h2 em, .shero__head h1 em{ font-style:normal !important; color:var(--gold); }
.lead{ font-weight:400; }
body{ font-weight:400; }
.eyebrow{ font-weight:600; font-size:12px; letter-spacing:.16em; }

/* Slogan keeps the script face */
.shero__brandline, .brand__tag{ font-family:var(--ff-script) !important; }
.brand__text{ font-family:var(--ff-disp) !important; font-weight:600 !important; letter-spacing:-.01em !important; }

/* ---- Buttons: pills ---- */
.btn{ border-radius:var(--r-pill); padding:16px 32px; font-size:13.5px; letter-spacing:.04em;
  text-transform:none; font-weight:600; }
.btn--sm{ padding:12px 22px; font-size:13px; }
.btn--gold{ box-shadow:0 8px 24px rgba(31,111,168,.30); }
.chip{ border-radius:var(--r-pill); font-weight:500; }

/* ---- Top utility bar ---- */
.utility{
  background:var(--ink-deep); color:var(--on-dark-mute);
  font-size:13px; position:relative; z-index:101;
}
.utility__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:9px; }
.utility a{ color:var(--gold-soft); text-decoration:none; font-weight:600; }
.utility a:hover{ color:#fff; }
.utility__areas{ opacity:.85; }
@media (max-width:820px){
  .utility__areas{ display:none; }
  .utility__inner{ justify-content:center; }
}

/* ---- Nav sits below the utility bar ---- */
.nav{ top:0; }
body.has-utility .nav{ position:sticky; }

/* ---- HERO v2: copy left, lead form right ---- */
.hero2{
  position:relative; background:var(--ink); color:var(--on-dark); overflow:hidden;
  padding:clamp(40px,6vw,70px) 0 clamp(50px,7vw,80px);
}
.hero2__bg{ position:absolute; inset:0; }
.hero2__bg img{ width:100%; height:100%; object-fit:cover; opacity:.30; }
.hero2__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 18% 30%, rgba(7,38,63,.72), transparent 72%),
    linear-gradient(105deg, rgba(5,27,46,.95) 0%, rgba(7,38,63,.86) 46%, rgba(7,38,63,.62) 100%);
}
.hero2__grid{
  position:relative; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,60px); align-items:center;
}
@media (max-width:980px){ .hero2__grid{ grid-template-columns:1fr; gap:34px; } }

.hero2__slogan{
  font-family:var(--ff-script) !important; font-weight:400;
  font-size:clamp(34px,4.4vw,56px); line-height:1; color:var(--gold-soft);
  margin:0 0 14px; text-shadow:0 2px 26px rgba(31,111,168,.25);
}
.hero2 h1{
  font-size:clamp(33px,4.5vw,58px); line-height:1.03; margin:0 0 18px; color:#fff;
}
.hero2 h1 em{ font-style:normal; color:var(--gold); }
.hero2__lede{
  max-width:52ch; margin:0 0 24px; font-size:clamp(15px,1.45vw,17px);
  line-height:1.65; color:rgba(238,247,251,.84); font-weight:300;
}

/* Rating badge */
.rating{
  display:inline-flex; align-items:center; gap:12px; margin:0 0 20px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill); padding:9px 18px 9px 10px;
  backdrop-filter:blur(6px);
}
.rating__g{ width:32px; height:32px; border-radius:50%; background:#fff; display:grid; place-items:center; flex:none; }
.rating__g svg{ width:18px; height:18px; }
.rating__txt{ display:flex; flex-direction:column; line-height:1.25; }
.rating__stars{ color:#fbbc04; font-size:13px; letter-spacing:.12em; }
.rating__stars b{ color:#fff; font-size:13px; margin-left:7px; letter-spacing:0; font-weight:600; }
.rating__src{ font-size:11.5px; color:var(--on-dark-mute); }

/* Benefit chips */
.benefits{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 26px; max-width:560px; }
@media (max-width:520px){ .benefits{ grid-template-columns:1fr; } }
.benefits li{
  list-style:none; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-pill); padding:10px 16px; font-size:13.5px; color:rgba(238,247,251,.92);
}
.benefits svg{ width:17px; height:17px; flex:none; fill:none; stroke:var(--gold); stroke-width:2; }
.benefits ul{ margin:0; padding:0; }

/* Lead form card */
.leadcard{
  background:#fff; border-radius:var(--r-card); padding:clamp(24px,2.8vw,34px);
  box-shadow:var(--shadow-lg); color:var(--text);
}
.leadcard h2{
  font-size:clamp(21px,2.3vw,27px) !important; margin:0 0 6px; color:var(--text) !important;
}
.leadcard__sub{ margin:0 0 20px; font-size:14px; color:var(--text-mute); line-height:1.55; }
.leadcard .field{ margin-bottom:12px; }
.leadcard label{
  color:var(--text-mute); font-size:11px; letter-spacing:.1em; margin-bottom:6px; font-weight:500;
}
.leadcard input, .leadcard select, .leadcard textarea{
  background:#f4f8fa; border:1px solid #dbe6ec; color:var(--text);
  border-radius:10px; padding:13px 15px; font-size:15px;
}
.leadcard input:focus, .leadcard select:focus, .leadcard textarea:focus{
  border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(31,111,168,.14);
}
.leadcard input::placeholder, .leadcard textarea::placeholder{ color:#90a6b2; }
.leadcard select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2354666d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
.leadcard .btn{ width:100%; margin-top:6px; padding:17px 24px; font-size:14.5px; }
.leadcard__fine{ margin:12px 0 0; font-size:12px; color:var(--text-mute); text-align:center; line-height:1.5; }
.leadcard__or{
  display:flex; align-items:center; gap:12px; margin:16px 0 0;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute);
}
.leadcard__or::before, .leadcard__or::after{ content:""; flex:1; height:1px; background:#dbe6ec; }
.leadcard__call{
  display:flex; align-items:center; justify-content:center; gap:9px; margin-top:14px;
  padding:14px; border:1.5px solid var(--ink-2); border-radius:var(--r-pill);
  color:var(--ink-2); text-decoration:none; font-weight:600; font-size:15px;
  transition:.28s var(--ease);
}
.leadcard__call svg{ width:17px; height:17px; fill:currentColor; }
.leadcard__call:hover{ background:var(--ink-2); color:#fff; }

/* ---- Reviews section ---- */
.reviews__head{
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  flex-wrap:wrap; margin-bottom:34px;
}
.score{
  display:flex; align-items:center; gap:18px;
  background:#fff; border:1px solid var(--line-lt); border-radius:var(--r-card);
  padding:18px 26px; box-shadow:var(--shadow-sm);
}
.score__num{ font-size:44px; font-weight:600; line-height:1; color:var(--ink); letter-spacing:-.03em; }
.score__meta{ display:flex; flex-direction:column; gap:3px; }
.score__stars{ color:#fbbc04; font-size:16px; letter-spacing:.1em; }
.score__src{ font-size:12.5px; color:var(--text-mute); }
.score__src strong{ color:var(--text); }

.rev{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
@media (max-width:920px){ .rev{ grid-template-columns:1fr; } }
.rev__card{
  background:#fff; border:1px solid var(--line-lt); border-radius:var(--r-card);
  padding:26px; display:flex; flex-direction:column; gap:14px;
  box-shadow:var(--shadow-sm); transition:.4s var(--ease);
}
.rev__card:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.rev__top{ display:flex; align-items:center; gap:12px; }
.rev__avatar{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--gold),var(--blue));
  color:#fff; display:grid; place-items:center; font-weight:600; font-size:17px;
}
.rev__who{ display:flex; flex-direction:column; line-height:1.3; }
.rev__who strong{ font-size:14.5px; font-weight:600; }
.rev__who span{ font-size:12px; color:var(--text-mute); }
.rev__stars{ color:#fbbc04; font-size:14px; letter-spacing:.1em; }
.rev__card p{ margin:0; font-size:14.5px; line-height:1.7; color:var(--text-mute); flex:1; }
.rev__src{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-mute);
  padding-top:12px; border-top:1px solid var(--line-lt); }
.rev__src svg{ width:14px; height:14px; }

/* ---- Cards rounded throughout ---- */
.svc__card, .promise__card, .quote, .sticky-cta, .modal__box, .leadcard,
.gal__item, .area li, .pill-row a, .pill-row span{ border-radius:var(--r-card); }
.gal__item, .gal__item::after{ border-radius:12px; }
.area li, .pill-row a, .pill-row span{ border-radius:var(--r-pill); }
.svc__img img{ border-radius:0; }
.svc__card{ overflow:hidden; }
.section--tint{ background:var(--paper-2); }

/* ---- Light-section cards get real shadow, not just borders ---- */
.section:not(.section--dark) .svc__card{
  background:#fff; border-color:var(--line-lt); box-shadow:var(--shadow-sm);
}
.section:not(.section--dark) .svc__card h3{ color:var(--text) !important; }
.section:not(.section--dark) .svc__card p{ color:var(--text-mute); }
.section:not(.section--dark) .svc__card:hover{ box-shadow:var(--shadow); }

/* ---- Steps as numbered cards ---- */
.step{
  border-top:0; background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:var(--r-card); padding:26px;
}
.section:not(.section--dark) .step{ background:#fff; border-color:var(--line-lt); box-shadow:var(--shadow-sm); }
.step__n{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--gold); color:#04222c; font-weight:600; font-size:14px; letter-spacing:0; margin-bottom:14px;
}

/* Fix: .leadcard background shorthand reset the select chevron sizing */
.leadcard select{
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:12px 8px !important;
  padding-right:38px !important;
}

/* ============================================================
   V3 — editorial polish (awwwards architecture aesthetic)
   Oversized type · hairlines · numbered index · asymmetric space
   ============================================================ */

/* ---- Oversized, confident section headings ---- */
.h2{ font-size:clamp(30px,4.6vw,60px) !important; line-height:1.02 !important; letter-spacing:-.035em !important; }
.h1{ letter-spacing:-.035em !important; }
.hero2 h1{ letter-spacing:-.04em !important; font-weight:600 !important; }
.sec-head{ max-width:20ch; }
.sec-head--row{ max-width:none; }
.sec-head p{ max-width:56ch; font-size:16px; line-height:1.7; margin-top:18px; }

/* ---- Numbered index labels with a hairline ---- */
.sec-head .eyebrow{
  display:flex; align-items:center; gap:14px; padding-top:0 !important;
  font-size:11.5px; letter-spacing:.2em;
}
.sec-head .eyebrow::before{
  position:static !important; content:""; width:clamp(28px,4vw,60px); height:1px;
  background:currentColor; opacity:.5; flex:none; transform:none !important;
}
.section--dark .sec-head .eyebrow{ color:var(--gold-soft); }

/* ---- Hairline section separators ---- */
.section + .section:not(.section--dark):not(.section--tint){
  border-top:1px solid var(--line-lt);
}

/* ---- Generous vertical rhythm ---- */
:root{ --sec: clamp(76px,10vw,150px); }

/* ---- Gallery: editorial hover, caption slides up ---- */
.gal{ column-gap:22px; }
.gal__item{ margin-bottom:22px; }
.gal__item img{ transition:transform 1.1s cubic-bezier(.16,.84,.44,1); }
.gal__item:hover img{ transform:scale(1.06); }
.gal__cap{
  padding:44px 20px 20px;
  background:linear-gradient(to top, rgba(5,27,46,.94) 0%, rgba(5,27,46,.6) 55%, transparent 100%);
  transform:translateY(14px);
}
.gal__cap span{ letter-spacing:.18em; font-size:10.5px; }
.gal__cap strong{ font-size:16px; font-weight:500; letter-spacing:-.01em; margin-top:4px; }

/* ---- Service cards: asymmetric, number as watermark ---- */
.svc__card{ position:relative; }
.svc__num{
  position:absolute; top:calc(var(--r-card) + 4px); right:18px; z-index:2;
  font-size:13px; letter-spacing:.14em; color:#fff; opacity:.8;
  background:rgba(5,27,46,.5); backdrop-filter:blur(4px);
  border-radius:var(--r-pill); padding:5px 12px; margin:0 !important;
}
.svc__body{ padding-top:30px; }
.svc__body h3{ font-size:clamp(20px,2.2vw,25px) !important; }
.svc__more{
  display:inline-flex; align-items:center; gap:8px; text-transform:none;
  font-size:13.5px; letter-spacing:0; font-weight:600;
}
.svc__card:hover .svc__more{ gap:13px; transition:gap .35s var(--ease); }

/* ---- Quad hero panels: editorial numbering ---- */
.quad__n{ letter-spacing:.2em; font-size:10.5px; opacity:.85; }
.quad__body h2{ font-size:clamp(21px,2.4vw,29px) !important; letter-spacing:-.025em !important; }

/* ---- Split sections: more air, larger type ---- */
.split__inner{ max-width:560px; }
.split__inner .lead{ font-size:clamp(18px,2vw,22px); line-height:1.5; letter-spacing:-.015em; }

/* ---- Steps: hairline grid rather than boxes on light ---- */
.section:not(.section--dark) .step{
  background:transparent; border:0; border-top:1px solid var(--line-lt);
  border-radius:0; box-shadow:none; padding:28px 0 0;
}

/* ---- Trust bar: hairline separated ---- */
.trust__item{ border-left:1px solid rgba(255,255,255,.14); padding-left:18px; }
.trust__item strong{ font-weight:600; letter-spacing:-.01em; }

/* ---- Marquee: bigger, more presence ---- */
.marquee{ padding-block:24px; }
.marquee__group span{ font-size:14px; letter-spacing:.22em; }
.marquee__group i{ font-size:6px; opacity:.7; }

/* ---- Footer: editorial ---- */
.foot{ padding-block:84px 34px; }
.foot__grid{ padding-bottom:52px; border-bottom:1px solid var(--line); }
.foot__col h3{ letter-spacing:.2em; font-size:10.5px; opacity:.75; }
.foot__brand .brand__text{ font-size:24px !important; }

/* ---- CTA band ---- */
.cta{ padding-block:clamp(76px,9vw,120px); }
.cta .h2{ max-width:22ch; }
.cta .eyebrow{ justify-content:center; display:flex; align-items:center; gap:14px; padding-top:0; }
.cta .eyebrow::before{ content:""; width:44px; height:1px; background:currentColor; opacity:.5; position:static; transform:none; }

/* ---- Staggered reveal ---- */
.reveal{ transition-duration:.95s; }

/* ---- Banner (inner pages): bigger, quieter ---- */
.banner{ padding:clamp(150px,19vh,220px) 0 clamp(60px,8vw,96px); }
.banner .h1{ font-size:clamp(34px,5.4vw,66px); }
.banner p{ max-width:58ch; font-size:clamp(15px,1.6vw,18px); }
.crumbs{ letter-spacing:.14em; text-transform:uppercase; font-size:10.5px; }

/* ---- Copy blocks ---- */
.copy h2{ font-size:clamp(23px,2.9vw,33px) !important; padding-top:0; margin-top:52px; }
.copy h2::before{ display:none; }
.copy h2:first-child{ margin-top:0; }
.copy p{ font-size:16.5px; line-height:1.8; }

/* ---- Reviews: editorial cards ---- */
.rev__card{ padding:30px; }
.rev__card p{ font-size:15px; line-height:1.75; }
.score__num{ font-size:52px; }

/* ---- Focus + motion ---- */
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ---- Hero: let the photography carry the page ---- */
.hero2{ padding:clamp(52px,6vw,88px) 0 clamp(60px,7vw,96px); min-height:clamp(600px,88vh,900px);
  display:flex; align-items:center; }
.hero2__bg img{ opacity:.62; transform:scale(1.03); animation:heroKB 30s var(--ease) infinite alternate; }
@keyframes heroKB{ from{ transform:scale(1.03) } to{ transform:scale(1.12) } }
@media (prefers-reduced-motion: reduce){ .hero2__bg img{ animation:none } }
.hero2__bg::after{
  background:
    linear-gradient(100deg, rgba(5,27,46,.94) 0%, rgba(6,32,54,.86) 34%, rgba(7,38,63,.50) 62%, rgba(7,38,63,.34) 100%),
    linear-gradient(to top, rgba(5,27,46,.72), transparent 42%);
}
.hero2__slogan{ text-shadow:0 2px 34px rgba(5,27,46,.85), 0 0 60px rgba(31,111,168,.25); }
.hero2 h1{ text-shadow:0 2px 30px rgba(5,27,46,.6); }

/* Scroll cue */
.hero2__cue{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(238,247,251,.5);
}
.hero2__cue i{ display:block; width:1px; height:34px; background:linear-gradient(to bottom,var(--gold),transparent);
  animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }
@media (max-width:980px){ .hero2__cue{ display:none } }

/* Lead card: glass edge so it sits on the photo, not over it */
.leadcard{ border:1px solid rgba(255,255,255,.55); }

/* ---- Big editorial stat strip ---- */
.statstrip{ background:var(--ink); color:var(--on-dark); border-top:1px solid var(--line); }
.statstrip__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:760px){ .statstrip__grid{ grid-template-columns:repeat(2,1fr); } }
.statstrip__item{ padding:clamp(30px,4vw,54px) clamp(16px,2vw,30px); border-left:1px solid var(--line); }
.statstrip__item:first-child{ border-left:0; }
.statstrip__n{
  display:block; font-size:clamp(34px,4.4vw,56px); font-weight:600; line-height:1;
  letter-spacing:-.04em; color:var(--gold); margin-bottom:10px;
}
.statstrip__l{ font-size:13px; color:var(--on-dark-mute); line-height:1.5; }

/* Fix: sec-head inside flex rows was collapsing to one word per line */
.sec-head{ max-width:26ch; }
.reviews__head .sec-head{ flex:1 1 420px; min-width:min(420px,100%); max-width:32ch; }
.reviews__head .score{ flex:0 0 auto; }
.sec-head--row > div{ flex:1 1 440px; min-width:min(440px,100%); }
.sec-head--row .sec-head, .sec-head--row > div .h2{ max-width:none; }
.cta .h2{ max-width:22ch; margin-inline:auto; }

/* ============================================================
   V4 — new logo, no script face, full location listing
   ============================================================ */

/* ---- Logo ---- */
.brand{ gap:13px; }
.brand__mark{ width:40px !important; height:40px !important; color:var(--gold); }
.brand__text{
  display:flex; flex-direction:column; gap:3px; line-height:1;
  font-size:19px !important; font-weight:700 !important; letter-spacing:.12em !important;
  color:var(--on-dark); text-transform:uppercase;
}
.brand__text em{
  font-style:normal; font-weight:400; font-size:11px; letter-spacing:.26em;
  color:var(--on-dark-mute); text-transform:uppercase;
}
.brand__tag{
  font-family:var(--ff-disp) !important; font-style:normal !important;
  font-size:8.5px !important; letter-spacing:.3em !important; text-transform:uppercase !important;
  color:var(--gold) !important; margin-top:2px;
}
.brand:hover .brand__mark{ color:var(--gold-soft); }
.foot__brand .brand__text{ font-size:22px !important; margin-bottom:16px; }
.foot__brand .brand__text em{ color:var(--on-dark-mute); }
@media (max-width:520px){
  .brand__mark{ width:34px !important; height:34px !important; }
  .brand__text{ font-size:15px !important; }
  .brand__text em{ font-size:9px; }
}

/* ---- Script face removed everywhere ---- */
.shero__brandline, .brand__tag, .hero2__slogan{ font-family:var(--ff-disp) !important; }
.hero2__kicker{
  display:inline-flex; align-items:center; gap:12px; margin:0 0 18px;
  font-size:11.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold);
}
.hero2__kicker::before{ content:""; width:40px; height:1px; background:var(--gold); opacity:.7; }

/* ---- Full location listing ---- */
.loc{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,48px); }
@media (max-width:900px){ .loc{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .loc{ grid-template-columns:1fr; } }
.loc__col{ padding-top:24px; border-top:2px solid var(--ink); }
.loc__col h3{
  font-size:clamp(19px,2.1vw,24px) !important; font-weight:600 !important;
  letter-spacing:-.02em !important; margin:0 0 4px;
}
.loc__sub{ margin:0 0 18px; font-size:13px; color:var(--text-mute); }
.loc__list{ list-style:none; margin:0; padding:0; display:grid; gap:1px; }
.loc__list li{
  font-size:15px; color:var(--text-mute); padding:10px 0;
  border-bottom:1px solid var(--line-lt); display:flex; align-items:center; gap:9px;
}
.loc__list li::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none;
}
.loc__list a{
  color:var(--text); text-decoration:none; font-weight:600;
  border-bottom:1px solid rgba(31,111,168,.45); transition:.25s var(--ease);
}
.loc__list a:hover{ color:var(--gold); border-color:var(--gold); }

/* Section headings shouldn't wrap to a sliver on wide screens */
.sec-head{ max-width:min(760px,100%); }
.sec-head .h2{ max-width:16ch; }
.sec-head--row .h2{ max-width:20ch; }
#areas .sec-head, #reviews .sec-head{ max-width:none; }
#areas .sec-head .h2{ max-width:none; }
#areas .sec-head p{ max-width:62ch; }

/* ============================================================
   V5 — big slogan, big logo, always-on CTA bar
   ============================================================ */

/* ---- LOGO: noticeably larger ---- */
.brand__mark{ width:58px !important; height:58px !important; }
.brand__text{ font-size:26px !important; letter-spacing:.1em !important; }
.brand__text em{ font-size:12.5px; letter-spacing:.24em; }
.brand__tag{ font-size:10px !important; letter-spacing:.26em !important; }
.nav__inner{ height:96px; }
.nav__links{ gap:clamp(13px,1.7vw,24px); }
.nav__links a{ font-size:13px; }
@media (max-width:1150px) and (min-width:901px){ .nav__links a{ font-size:12px; } }
@media (max-width:900px){
  .nav__inner{ height:82px; }
  .brand__mark{ width:46px !important; height:46px !important; }
  .brand__text{ font-size:20px !important; }
  .nav__links{ inset:82px 0 auto 0; }
}
.foot__brand .brand__mark{ display:none; }
.foot__brand .brand__text{ font-size:30px !important; }

/* ---- HERO: big centred slogan over photography ---- */
.shero{
  position:relative; background:var(--ink); color:var(--on-dark); overflow:hidden; padding:0;
}
.shero__bg{ position:absolute; inset:0 0 auto 0; height:100%; }
.shero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.5;
  animation:heroKB 32s var(--ease) infinite alternate; }
.shero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(5,27,46,.88) 0%, rgba(6,32,54,.78) 45%, rgba(7,38,63,.9) 100%);
}
.shero__inner{ position:relative; padding:clamp(56px,7vw,92px) var(--pad) clamp(40px,5vw,64px); }

.shero__brandline{
  display:block !important; text-align:center;
  font-family:var(--ff-disp) !important; font-weight:700 !important;
  font-size:clamp(40px,6.4vw,104px) !important;
  line-height:1 !important; letter-spacing:-.035em !important;
  color:#fff !important; margin:0 auto clamp(22px,3vw,38px) !important;
  padding:0 !important; max-width:18ch;
  text-shadow:0 3px 40px rgba(5,27,46,.6);
}
.shero__brandline::before, .shero__brandline::after{ display:none !important; }
.shero__brandline .lit{
  background:linear-gradient(100deg,var(--gold),var(--sky));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.shero__head{ text-align:center; max-width:940px; margin-inline:auto; padding:0; }
.shero__head h1{
  font-size:clamp(23px,2.9vw,40px) !important; font-weight:500 !important;
  line-height:1.16 !important; letter-spacing:-.02em !important;
  color:rgba(255,255,255,.94) !important; margin:0 0 16px !important;
}
.shero__head h1 em{ color:var(--gold); font-style:normal; }
.rating--center{ margin:0 auto 22px; }
.shero__services{ justify-content:center; margin:0 0 18px; }
.shero__lede{ margin:0 auto 28px; max-width:62ch; }
.shero__cta{ justify-content:center; }
.btn--xl{ padding:19px 40px; font-size:15px; }
@media (max-width:620px){ .btn--xl{ padding:16px 26px; font-size:13.5px; width:100%; } }

/* ---- Lead band (form moved out of the hero) ---- */
.leadband{ background:var(--ink-2); color:var(--on-dark); padding-block:var(--sec); }
.leadband__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,70px); align-items:center; }
@media (max-width:920px){ .leadband__grid{ grid-template-columns:1fr; } }
.leadband .h2{ color:#fff !important; }
.leadband__lede{ color:var(--on-dark-mute); font-size:16.5px; line-height:1.75; margin:0 0 26px; max-width:52ch; }
.leadband .benefits{ margin:0; max-width:none; }

/* ---- ALWAYS-ON CTA BAR ---- */
.stickycta{
  position:fixed; left:0; right:0; bottom:0; z-index:96;
  background:rgba(5,27,46,.97); border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 -8px 34px rgba(0,0,0,.35);
  transform:translateY(100%); transition:transform .45s var(--ease);
}
body.past-hero .stickycta{ transform:none; }
.stickycta__inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding-block:13px calc(13px + env(safe-area-inset-bottom));
}
.stickycta__msg{ color:var(--on-dark-mute); font-size:14px; }
.stickycta__msg strong{ color:var(--gold-soft); font-weight:600; }
.stickycta__btns{ display:flex; gap:10px; align-items:center; flex:none; }
.stickycta__tel{ display:inline-flex; align-items:center; gap:8px; }
.stickycta__tel svg{ width:15px; height:15px; fill:currentColor; }
@media (max-width:760px){
  .stickycta__msg{ display:none; }
  .stickycta__inner{ justify-content:stretch; gap:8px; }
  .stickycta__btns{ width:100%; }
  .stickycta__btns .btn{ flex:1; justify-content:center; padding:13px 10px; font-size:12.5px; }
  .foot{ padding-bottom:96px; }
}
.callbar{ display:none !important; }
.estimate-fab{ bottom:82px; }
@media (max-width:760px){ .estimate-fab{ bottom:88px; } }

/* ---- Revert: lead-form hero restored; keep the larger logo + sticky CTA ---- */
.shero__bg, .shero__inner, .shero__brandline{ display:none !important; }
.hero2{ display:flex; align-items:center; }
.hero2__kicker{ font-size:13px; letter-spacing:.3em; }

/* ---- Service + city internal link grid (local SEO) ---- */
.areaslinks{ margin-top:clamp(36px,4vw,54px); padding-top:30px; border-top:1px solid var(--line-lt); }
.areaslinks h3{
  font-size:clamp(17px,1.9vw,21px) !important; font-weight:600 !important;
  letter-spacing:-.02em !important; margin:0 0 18px;
}
.areaslinks ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2px 24px;
}
.areaslinks li{ padding:9px 0; border-bottom:1px solid var(--line-lt); }
.areaslinks a{
  color:var(--text-mute); text-decoration:none; font-size:14.5px;
  display:inline-flex; align-items:center; gap:8px; transition:.25s var(--ease);
}
.areaslinks a::before{ content:"›"; color:var(--gold); font-size:17px; line-height:1; }
.areaslinks a:hover{ color:var(--gold); }


/* ============================================================
   RESTORE the version in the reference recording
   (no sticky CTA bar, moderate logo) — supersedes V5
   ============================================================ */
.stickycta{ display:none !important; }

.brand__mark{ width:44px !important; height:44px !important; }
.brand__text{ font-size:21px !important; letter-spacing:.11em !important; }
.brand__text em{ font-size:11px; letter-spacing:.25em; }
.brand__tag{ font-size:9px !important; letter-spacing:.27em !important; }
.nav__inner{ height:84px; }
.nav__links{ inset:84px 0 auto 0; }
@media (max-width:900px){
  .nav__inner{ height:76px; }
  .brand__mark{ width:38px !important; height:38px !important; }
  .brand__text{ font-size:17px !important; }
  .nav__links{ inset:76px 0 auto 0; }
}
.foot__brand .brand__text{ font-size:24px !important; }

/* Floating quick-estimate button returns to the corner */
.estimate-fab{ bottom:18px; }
@media (max-width:760px){ .estimate-fab{ bottom:18px; } .foot{ padding-bottom:34px; } }

/* ============================================================
   FINAL — matches the reference screenshot exactly
   Serif display · centred navy hero · square buttons · small logo
   ============================================================ */

:root{
  --ff-disp: "Cormorant Garamond", Georgia, serif;
  --ff-body: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Serif display everywhere */
.h1,.h2,.h3,.shero__head h1,.shero__brandline,.quad__body h2,.svc__body h3,
.promise__card h3,.step h3,.area h3,.copy h2,.copy h3,.prose h2,.faq summary,
.sticky-cta h3,.modal__box h2,.leadcard h2,.loc__col h3,.areaslinks h3,.brand__text{
  font-family:var(--ff-disp) !important; font-weight:600 !important; letter-spacing:-.005em !important;
}
.h1{ font-size:clamp(32px,4.6vw,56px) !important; line-height:1.08 !important; }
.h2{ font-size:clamp(28px,3.8vw,48px) !important; line-height:1.1 !important; }
.h1 em,.h2 em{ font-style:italic !important; color:var(--gold) !important; }

/* Square buttons, uppercase */
.btn{ border-radius:2px !important; text-transform:uppercase !important;
  letter-spacing:.09em !important; font-weight:600 !important; font-size:13px !important;
  padding:16px 32px !important; font-family:var(--ff-body) !important; }
.btn--sm{ padding:11px 20px !important; font-size:11.5px !important; }
.btn--gold{ background:var(--gold) !important; box-shadow:none !important; }
.btn--gold:hover{ background:var(--gold-soft) !important; }
.chip,.area li,.pill-row a,.pill-row span,.benefits li,.rating{ border-radius:100px; }
.leadcard,.svc__card,.rev__card,.quote,.promise__card,.modal__box,.score{ border-radius:3px !important; }
.gal__item,.gal__item::after{ border-radius:2px !important; }

/* Logo: small mark + serif wordmark */
.brand{ gap:11px; }
.brand__mark{ width:28px !important; height:28px !important; color:var(--gold); }
.brand__text{
  display:flex !important; flex-direction:column; gap:3px;
  font-size:19px !important; font-weight:600 !important; letter-spacing:.01em !important;
  text-transform:none !important; color:var(--on-dark); line-height:1;
}
.brand__text i{ font-style:normal; color:var(--gold); }
.brand__text em{ display:none !important; }
.brand__tag{
  font-family:var(--ff-body) !important; font-size:8.5px !important;
  letter-spacing:.24em !important; text-transform:uppercase !important;
  color:var(--on-dark-mute) !important; font-style:normal !important;
}
.nav__inner{ height:78px; }
.nav__links{ inset:78px 0 auto 0; }
@media (max-width:900px){ .nav__inner{ height:74px; } .nav__links{ inset:74px 0 auto 0; } }
.foot__brand .brand__text{ font-size:23px !important; }

/* HERO: centred, solid navy, no photo */
.hero2,.hero2__bg,.hero2__cue,.hero2__kicker{ display:none !important; }
.shero{ display:block !important; background:var(--ink); padding:0; position:relative; }
.shero__bg{ display:none !important; }
.shero__inner{ display:block !important; padding:clamp(70px,9vw,120px) var(--pad) clamp(52px,6vw,78px); }
.shero__brandline{
  display:block !important; text-align:center; margin:0 auto clamp(34px,4.5vw,58px) !important;
  padding:0 !important; max-width:none;
  font-size:clamp(30px,4.2vw,54px) !important; font-weight:500 !important;
  line-height:1.1 !important; letter-spacing:.005em !important;
  color:var(--gold-soft) !important; text-shadow:none !important;
}
.shero__brandline::before,.shero__brandline::after{ display:none !important; }
.shero__head{ text-align:center; max-width:1000px; margin-inline:auto; padding:0; }
.shero__head h1{
  font-size:clamp(29px,4.3vw,54px) !important; font-weight:500 !important;
  line-height:1.14 !important; color:#fff !important; margin:0 0 26px !important;
}
.shero__head h1 em{ font-style:italic !important; color:var(--gold) !important; }
.shero__services{
  justify-content:center; margin:0 0 24px; gap:0;
  font-size:11.5px; letter-spacing:.2em; color:var(--sky);
}
.shero__services span{ padding:0 16px; border-right:1px solid rgba(127,199,232,.3); }
.shero__services span:last-child{ border-right:0; }
.shero__lede{
  margin:0 auto 34px; max-width:72ch; font-size:clamp(14.5px,1.4vw,16.5px);
  line-height:1.75; color:rgba(238,247,251,.8); font-weight:300;
}
.shero__cta{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.shero__tel{ background:var(--ink-2); border-top:1px solid var(--line); }

/* Lead band + reviews keep the rest of the system */
.leadband .rating{ margin:0 0 22px; }
.stickycta{ display:none !important; }
.estimate-fab{ bottom:18px; right:18px; }
@media (max-width:760px){ .estimate-fab{ bottom:18px; } .foot{ padding-bottom:34px; } }
.sec-head .eyebrow::before{ background:var(--gold); }

/* Fix: wordmark must sit on one line with the tagline beneath */
.brand__text{ display:block !important; }
.brand__tag{ display:block; margin-top:5px; }

.areaslinks ul{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.areaslinks__more{
  margin:20px 0 0; font-size:14.5px; line-height:1.7; color:var(--text-mute); max-width:70ch;
}
.areaslinks__more a{
  color:var(--ink-2); font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(31,111,168,.5); white-space:nowrap;
}
.areaslinks__more a:hover{ color:var(--gold); border-color:var(--gold); }

/* ---- Comment 2: slogan bigger, script face ---- */
.shero__brandline{
  font-family:Georgia, serif !important;
  font-size:clamp(52px,7.6vw,118px) !important;
  font-weight:400 !important;
  line-height:1.02 !important;
  letter-spacing:0 !important;
  color:var(--gold-soft) !important;
  margin:0 auto clamp(26px,3.4vw,44px) !important;
  text-shadow:0 3px 40px rgba(5,27,46,.6);
}
.shero__head h1{ font-size:clamp(28px,4vw,50px) !important; }

/* ============================================================
   LOGO — bigger, script wordmark (matches the slogan)
   ============================================================ */
.brand{ gap:14px; }
.brand__mark{ width:52px !important; height:52px !important; color:var(--gold); }

.brand__text{
  font-family:Georgia, serif !important;
  font-size:38px !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
  line-height:1 !important;
  color:#fff !important;
  text-transform:none !important;
  padding-bottom:2px;
}
.brand__text i{ font-style:normal; color:var(--gold); padding:0 2px; }

.brand__tag{
  font-family:var(--ff-body) !important;
  font-size:9px !important; letter-spacing:.28em !important;
  text-transform:uppercase !important; color:var(--gold-soft) !important;
  margin-top:4px; display:block;
}

.nav__inner{ height:104px; }
.nav__links{ inset:104px 0 auto 0; }
.nav__links a{ font-size:13px; }
@media (max-width:1180px) and (min-width:901px){
  .nav__links{ gap:15px; } .nav__links a{ font-size:12px; }
  .nav__tel span{ display:none; }
}
@media (max-width:900px){
  .nav__inner{ height:88px; }
  .nav__links{ inset:88px 0 auto 0; }
  .brand__mark{ width:42px !important; height:42px !important; }
  .brand__text{ font-size:30px !important; }
  .brand__tag{ font-size:8px !important; letter-spacing:.24em !important; }
}
@media (max-width:480px){
  .brand__mark{ width:36px !important; height:36px !important; }
  .brand__text{ font-size:25px !important; }
}

.foot__brand .brand__text{ font-size:44px !important; margin-bottom:14px; }

/* ============================================================
   MOBILE FIXES — no horizontal overflow, larger tap targets
   ============================================================ */

/* Long CTA labels must wrap instead of forcing the page wide */
.btn{ white-space:normal !important; text-align:center; max-width:100%; }

/* Nothing may exceed the viewport */
html, body{ max-width:100%; overflow-x:hidden; }
img, svg, video, iframe, table{ max-width:100%; }
.copy, .copy p, .copy li, .copy h2, .copy h3, .prose, .prose p,
.h1, .h2, .h3, p, li, dd, dt, blockquote, .shero__lede, .leadband__lede,
.areaslinks__more, .faq__a{
  overflow-wrap:anywhere; word-break:normal; hyphens:auto; max-width:100%;
}
.wrap, .wrap--narrow, .twocol, .grid-2, .loc, .svc, .rev, .areas, .steps, .promise{
  max-width:100%; min-width:0;
}
.twocol > *, .grid-2 > *, .loc > *, .svc > *, .rev > *{ min-width:0; }

@media (max-width:620px){
  .btn{ width:100%; padding:16px 20px !important; font-size:12.5px !important; }
  .shero__cta, .cta__btns, .contact__btns, .hero__cta{ width:100%; }
  .shero__cta .btn, .cta__btns .btn, .contact__btns .btn{ width:100%; }
  .leadcard .btn, .sticky-cta .btn{ width:100%; }
  .field-row{ grid-template-columns:1fr !important; }
  .shero__services{ font-size:10px; }
  .shero__services span{ padding:0 8px; }
  .copy h2{ font-size:22px !important; }
  .banner .h1{ font-size:30px !important; }
  .areaslinks ul{ grid-template-columns:1fr !important; }
  .utility__inner{ font-size:11.5px; text-align:center; }
}

/* Tap targets: 44px minimum on anything clickable */
@media (max-width:900px){
  .nav__links a, .foot__col a, .foot__nav a, .contact__list a,
  .loc__list a, .areaslinks a, .pill-row a, .crumbs a{
    min-height:44px; display:flex; align-items:center;
  }
  .loc__list li, .areaslinks li{ padding:4px 0; }
  .chip{ min-height:42px; padding:11px 18px; }
  .faq summary{ padding-top:20px; padding-bottom:20px; }
  .foot__social a{ width:44px; height:44px; }
  .estimate-fab{ min-height:46px; }
}

/* Fix: headings must never hyphenate or break mid-word */
.h1, .h2, .h3, h1, h2, h3, h4,
.shero__brandline, .shero__head h1, .quad__body h2, .svc__body h3,
.promise__card h3, .step h3, .area h3, .loc__col h3, .areaslinks h3,
.copy h2, .copy h3, .prose h2, .faq summary, .leadcard h2, .modal__box h2,
.brand__text, .score__num, .rev__who strong{
  hyphens:none !important;
  -webkit-hyphens:none !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
}

/* No automatic hyphenation anywhere — it was breaking words mid-line */
*, *::before, *::after{ hyphens:none !important; -webkit-hyphens:none !important; }
p, li, dd, dt, blockquote, .copy p, .prose p, .shero__lede, .leadband__lede,
.cta p, .sec-head p, .faq__a, .areaslinks__more, .quad__body p, .svc__body p{
  overflow-wrap:break-word !important; word-break:normal !important;
}

/* Service areas: two counties only */
.loc{ grid-template-columns:repeat(2,1fr); max-width:900px; }
@media (max-width:700px){ .loc{ grid-template-columns:1fr; } }

/* ============================================================
   COMPACT LEAD STRIP — on every page, above the CTA band
   ============================================================ */
.leadstrip{ background:var(--ink-2); color:var(--on-dark); padding-block:clamp(42px,5vw,64px); }
.leadstrip__grid{
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(26px,3.6vw,56px); align-items:center;
}
@media (max-width:920px){ .leadstrip__grid{ grid-template-columns:1fr; gap:26px; } }

.leadstrip__copy h2{
  font-size:clamp(25px,3vw,36px) !important; font-weight:600 !important;
  line-height:1.1 !important; margin:0 0 12px; color:#fff !important;
}
.leadstrip__copy p{ margin:0 0 18px; color:var(--on-dark-mute); font-size:15px; line-height:1.65; max-width:46ch; }
.leadstrip__tel{
  display:inline-flex; align-items:center; gap:9px; color:var(--gold-soft);
  font-size:20px; font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(121,188,230,.4); padding-bottom:2px;
}
.leadstrip__tel svg{ width:17px; height:17px; fill:currentColor; }
.leadstrip__tel:hover{ color:#fff; border-color:#fff; }

.leadstrip__form{
  background:#fff; border-radius:4px; padding:clamp(20px,2.4vw,28px);
  display:grid; grid-template-columns:1fr 1fr; gap:12px; box-shadow:var(--shadow-lg);
}
@media (max-width:560px){ .leadstrip__form{ grid-template-columns:1fr; } }
.leadstrip__form .field{ margin:0; }
.leadstrip__form label{
  color:var(--text-mute); font-size:10.5px; letter-spacing:.1em; margin-bottom:5px; font-weight:500;
}
.leadstrip__form input, .leadstrip__form select{
  background:#f4f8fa; border:1px solid #dbe6ec; color:var(--text);
  border-radius:8px; padding:11px 13px; font-size:14.5px;
}
.leadstrip__form input:focus, .leadstrip__form select:focus{
  border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(31,111,168,.14);
}
.leadstrip__form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2354666d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat !important; background-position:right 12px center !important;
  background-size:11px 7px !important; padding-right:34px !important;
}
.leadstrip__form .btn{ grid-column:1 / -1; width:100%; margin-top:2px; }
.leadstrip__form .form__note{ grid-column:1 / -1; margin:0; color:var(--gold); }

/* ---- Logo without the mark; slogan larger ---- */
.brand__mark{ display:none !important; }
.brand{ gap:0; }
.brand__text{ font-size:42px !important; }
.brand__tag{ font-size:9.5px !important; letter-spacing:.3em !important; margin-top:5px; }
.nav__inner{ height:110px; }
.nav__links{ inset:110px 0 auto 0; }
@media (max-width:900px){
  .nav__inner{ height:90px; }
  .nav__links{ inset:90px 0 auto 0; }
  .brand__text{ font-size:32px !important; }
}
@media (max-width:480px){ .brand__text{ font-size:26px !important; } }
.foot__brand .brand__text{ font-size:52px !important; }

/* Slogan bigger again */
.shero__brandline{
  font-size:clamp(58px,8.6vw,134px) !important;
  margin:0 auto clamp(30px,3.8vw,50px) !important;
}
@media (max-width:900px){ .shero__brandline{ font-size:clamp(40px,10vw,64px) !important; } }


/* Screen-reader-only text (accessibility) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Footer service-area list (mirrors areas.html exactly) ───────────────── */
.foot__col .foot__area-h{
  display:block; margin-top:4px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--on-dark);
}
.foot__col .foot__area-h:first-child{ margin-top:0; }
.foot__col .foot__area-list{
  display:block; margin:-2px 0 4px; line-height:1.65;
  font-size:13px; color:var(--on-dark-mute);
}
.foot__col .foot__area-list a{ font-size:13px; }
.foot__col .foot__area-all{ margin-top:6px; color:var(--gold-soft); font-weight:500; }
.foot__col .foot__area-all:hover{ color:var(--gold); }

/* ── Centered section heading modifier ──────────────────────────────────── */
.sec-head--mid{ max-width:760px; margin-left:auto; margin-right:auto; text-align:center; }


/* ── Photographs inside the long copy column ─────────────────────────────── */
.copy__shot{ margin:34px 0 8px; }
.copy__shot img{
  width:100%; height:auto; display:block; border-radius:2px;
  box-shadow:0 14px 34px rgba(6,29,53,.14);
}
.copy__shot figcaption{
  margin-top:9px; font-size:13.5px; line-height:1.5;
  color:var(--text-mute); font-style:italic;
}

/* ── Brandline re-scaled for the serif ───────────────────────────────────────
   The previous sizing was tuned for a narrow script face. Cormorant sets much
   wider, so the slogan has to come down to stay on one line.               */
.shero__brandline{
  font-family:var(--ff-disp) !important;
  font-size:clamp(32px,5.2vw,76px) !important;
  font-weight:500 !important;
  line-height:1.08 !important;
  letter-spacing:.005em !important;
  color:var(--gold-soft) !important;
  margin:0 auto clamp(24px,3.2vw,42px) !important;
  max-width:22ch;
  text-shadow:0 3px 40px rgba(6,29,53,.55);
}
@media (max-width:900px){
  .shero__brandline{ font-size:clamp(28px,7.4vw,46px) !important; max-width:none; }
}

/* Button glow carried the old turquoise rgb */
.btn--gold{ box-shadow:0 8px 24px rgba(31,111,168,.30) !important; }
.shero__brandline::before, .shero__brandline::after{
  background:linear-gradient(to right, transparent, rgba(121,188,230,.55), transparent);
}

/* ── Scroll reveals: content is visible at rest ──────────────────────────────
   Previously .reveal sat at opacity:0 until an observer fired, so anything the
   observer missed (or JS failing) left whole sections invisible. Content now
   renders fully; the fade is a light enhancement layered on top.          */
.reveal{ opacity:1 !important; transform:none !important; }
.reveal.is-in{ opacity:1 !important; transform:none !important; }

/* Optional soft entrance — starts visible, never hides content. */
@media (prefers-reduced-motion: no-preference){
  .reveal{ animation:ae-settle .5s var(--ease) both; }
  @keyframes ae-settle{ from{ opacity:.82; transform:translateY(5px); } to{ opacity:1; transform:none; } }
}

/* ── Gallery: real grid, not CSS columns ─────────────────────────────────────
   Multi-column masonry read top-to-bottom per column, so similar photos landed
   stacked and looked repeated; tall items could also fragment across a column
   break and appear twice. A grid gives predictable left-to-right order and
   uniform tiles.                                                          */
.gal{
  column-count:unset !important; column-gap:unset !important;
  display:grid !important; grid-template-columns:repeat(3,1fr) !important;
  gap:16px !important;
}
.gal__item{ margin-bottom:0 !important; break-inside:auto; }
.gal__item img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
/* The pop-in must never leave a tile invisible if the animation is skipped. */
.gal__item{ animation:none !important; opacity:1 !important; }

@media (max-width:980px){ .gal{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:700px){
  .gal{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .gal__item img{ aspect-ratio:1/1; }
  .gal__cap{ padding:9px 10px !important; }
  .gal__cap span{ font-size:9.5px !important; letter-spacing:.12em !important; }
  .gal__cap strong{ font-size:11.5px !important; line-height:1.3 !important; }
}


/* ── Hero tiles: lift the photographs ────────────────────────────────────────
   The images were dimmed to .82 and sat under a near-opaque gradient, which
   buried the work. Brighten the photo and lighten the scrim, keeping just
   enough contrast at the foot of the tile for the caption to stay readable. */
.quad__cell img{ filter:saturate(1.06) brightness(1.02) !important; }
.quad__cell:hover img{ filter:saturate(1.12) brightness(1.08) !important; }
.quad__cell::after{
  background:linear-gradient(to top,
    rgba(4,22,38,.86) 0%, rgba(4,22,38,.55) 32%,
    rgba(4,22,38,.16) 62%, rgba(4,22,38,0) 100%) !important;
}
/* keep the caption legible now that the scrim is lighter */
.quad__body h2, .quad__body p, .quad__body .quad__go, .quad__body .quad__n{
  text-shadow:0 1px 14px rgba(3,16,28,.85);
}

/* ── EPA Lead-Safe Certified Firm mark ───────────────────────────────────────
   EPA rules: the logo may not be altered or distorted, and may not be shown
   smaller than 1in x 0.687in (96 x 66 CSS px). Rendered at 112px wide, its
   native 1.366:1 ratio intact, with no filter or overlay applied.        */
.foot__epa{
  display:flex; align-items:center; gap:13px;
  margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(168,196,220,.22);
}
.foot__epa img{
  width:112px; height:auto; flex:none;     /* 112 x 82 — above the EPA minimum */
  background:#fff; border-radius:3px; padding:5px;
}
.foot__epa span{
  font-size:12.5px; line-height:1.5; color:var(--on-dark-mute);
}
.foot__epa em{ font-style:normal; font-size:11.5px; opacity:.8; }
@media (max-width:600px){
  .foot__epa{ gap:11px; }
  .foot__epa img{ width:100px; }          /* still above the 96px minimum */
}

/* ── Form submission states ──────────────────────────────────────────────── */
.hp{
  position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.form__note{ min-height:1.2em; font-size:13.5px; line-height:1.5; margin-top:10px; }
.form__note.is-good{ color:var(--gold); }
.form__note.is-bad{ color:#ff9a9a; }
.section .form__note.is-good, .copy .form__note.is-good{ color:#17683f; }
.section .form__note.is-bad,  .copy .form__note.is-bad { color:#a8261f; }
button[type="submit"][disabled]{ opacity:.6; cursor:progress; }