/* ==========================================================================
   POWERWASH PROS — 2026 DESIGN SYSTEM  (pwp-2026.css)
   Hand-coded, reusable across all pages. Brand kept: teal palette, logo,
   Crillee wordmark (logo image), real photos/videos, white-glove personality.
   Goals: sharp + premium, flawless mobile, fast (CWV), local-SEO ready.
   Display font: Exo 2 (Crillee stand-in, matches the form system).
   Body font: Inter.
   ========================================================================== */

:root{
  /* Brand palette */
  --teal:#38817a;            /* brand teal (kept) */
  --teal-deep:#2c655f;       /* CTA bg — passes WCAG AA on white */
  --teal-deeper:#234f49;     /* hover / focus */
  --teal-tint:#eaf3f1;       /* soft teal wash for sections */
  --teal-line:#cfe0dd;
  --navy:#25527e;            /* brand blue (kept from original palette) */
  --navy-deep:#1d3e60;       /* deeper brand blue */
  --blue:#346473;            /* brand teal-blue (original palette-2) */
  --ink:#1b2625;             /* primary text */
  --ink-soft:#33433f;
  --muted:#5f6b68;           /* secondary text */
  --line:#e3e8e6;            /* hairlines / borders */
  --soft:#e7eaec;           /* soft light-grey neutral (no white blocks) */
  --grey:#eceff1;            /* page / section light grey */
  --white:#ffffff;
  --gold:#23EB00;            /* brand green — replaces the old yellow/gold accent (stars, badges) */
  --navy-hover:#1d3e60;      /* deep navy — nav/dropdown hover background (pairs with --gold text) */
  --link:var(--teal-deep);   /* in-content link color (dark sections flip this to neon green) */
  --link-hover:var(--teal-deeper);
  --shadow-sm:0 2px 8px rgba(27,38,37,.08);
  --shadow:0 10px 30px rgba(27,38,37,.12);
  --shadow-lg:0 24px 60px rgba(27,38,37,.18);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --container:1200px;
  --gutter:clamp(18px,4vw,40px);
  --section-y:clamp(38px,5vw,66px);
  --font-display:'Exo 2','Kanit',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ----- Reset ----- */
*,*::before,*::after{box-sizing:border-box;}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);background:var(--grey);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block;}
a{color:var(--link);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--link-hover);}
/* in-content links on dark backgrounds: neon green, hover white */
.section--blue,.ctaband,.bigblue,body[data-page="seal"]{--link:var(--gold);--link-hover:#fff;}
/* light tinted blocks on the seal page keep dark teal links */
body[data-page="seal"] .tint-white,
body[data-page="seal"] .tint-teal{--link:var(--teal-deep);--link-hover:var(--teal-deeper);}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;margin:0;color:var(--ink);font-weight:800;letter-spacing:.005em;}
p{margin:0;}
:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px;border-radius:4px;}

/* ----- Fluid type scale ----- */
.h-xxl{font-size:clamp(2.3rem,6vw,4.2rem);}
.h-xl{font-size:clamp(1.9rem,4.6vw,3rem);}
.h-lg{font-size:clamp(1.5rem,3.4vw,2.15rem);}
.h-xxl,.h-xl,.h-lg{text-transform:none;letter-spacing:.01em;}
.h-md{font-size:clamp(1.2rem,2.4vw,1.5rem);}
.eyebrow{font-family:var(--font-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:.78rem;color:var(--teal-deep);margin:0 0 .6rem;}
.lead{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--ink-soft);}
.muted{color:var(--muted);}

/* GLOBAL body copy: full-justified, last line centered, blocks centered within their box */
.section-head .lead,.card__body p,.review p,.split__body .lead,.about__body .lead,
.areas__body .lead,.areas .hoods,.faq details>p,.ctaband .lead,.section .lead{
  text-align:justify;text-align-last:center;}
.split__body,.about__body,.areas__body{text-align:center;}
.split__body .btn-row,.about__body .btn-row,.areas__body .btn-row{justify-content:center;}
.feature-list{width:fit-content;max-width:100%;margin-inline:auto;text-align:left;}

/* ----- Layout ----- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--section-y);}
.section--tint{background:var(--teal-tint);}
.section--soft{background:var(--soft);}
.section--ink{background:var(--ink);color:#e9efed;}
.section--ink h2,.section--ink h3{color:#fff;}
/* Brand-blue section (original look: white cards on blue) */
.section--blue{background:var(--navy);color:#fff;}
.section--blue h2,.section--blue h3,.section--blue .eyebrow{color:#fff;}
.section--blue .eyebrow{color:#bcd6ec;}
.section--blue .lead,.section--blue .muted,.section--blue p{color:#d6e4f0;}
.section--teal{background:var(--teal);color:#fff;}
.section--teal h2,.section--teal h3{color:#fff;}
.section--teal .eyebrow{color:#dff0ed;}
.section--teal .lead,.section--teal .muted,.section--teal p{color:#eaf5f3;}
.center{text-align:center;}
.stack>*+*{margin-top:1rem;}
.section-head{max-width:760px;margin-inline:auto;margin-bottom:clamp(18px,2.6vw,32px);text-align:center;}
.section-head .lead{margin-top:.8rem;font-weight:600;}

/* ----- Buttons (uniform, big tap targets, WCAG contrast) ----- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1;
  min-height:54px;padding:0 28px;border-radius:999px;cursor:pointer;
  border:2px solid transparent;text-align:center;transition:all .16s ease;
  letter-spacing:.01em;
}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
.btn--primary{background:var(--teal-deep);color:#fff;box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--teal-deeper);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow);}
.btn--ghost{background:transparent;color:var(--teal-deeper);border-color:var(--teal-deep);}
.btn--ghost:hover{background:var(--teal-deep);color:#fff;border-color:var(--teal-deep);}
/* white ghost only on dark backgrounds */
.hero .btn--ghost,.page-hero .btn--ghost,.section--bg .btn--ghost,.section--wave .btn--ghost,.section--gradient .btn--ghost,.section--blue .btn--ghost,.ctaband .btn--ghost,.bigblue .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.75);}
.hero .btn--ghost:hover,.page-hero .btn--ghost:hover,.section--bg .btn--ghost:hover,.section--wave .btn--ghost:hover,.section--gradient .btn--ghost:hover,.section--blue .btn--ghost:hover,.ctaband .btn--ghost:hover,.bigblue .btn--ghost:hover{background:#fff;color:var(--teal-deeper);border-color:#fff;}
.btn--outline{background:transparent;color:var(--teal-deeper);border-color:var(--teal-deep);}
.btn--outline:hover{background:var(--teal-deep);color:#fff;}
.btn--lg{min-height:60px;padding:0 36px;font-size:1.06rem;}
.btn--block{width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;}
.btn-row--center{justify-content:center;}

/* ----- Header (centered logo · transparent over hero · shrink on scroll) ----- */
.site-header{position:sticky;top:0;z-index:60;background:#fff;
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);
  transition:background .28s ease,box-shadow .28s ease,border-color .28s ease;}
/* overlay mode (home): white bar fixed over the hero in every state */
.site-header--overlay{position:fixed;left:0;right:0;top:0;background:#fff;
  border-bottom-color:var(--line);backdrop-filter:saturate(140%) blur(8px);}
.site-header--overlay.scrolled{background:#fff;backdrop-filter:saturate(140%) blur(8px);
  border-bottom-color:var(--line);box-shadow:0 4px 18px rgba(0,0,0,.10);}

.header-inner{display:flex;align-items:center;gap:14px;min-height:108px;transition:min-height .28s ease;}
.scrolled .header-inner{min-height:96px;}

.brand{flex:none;display:flex;align-items:center;margin-right:auto;}
.brand img{height:88px;width:auto;transition:height .28s ease;}
.scrolled .brand img{height:74px;}

.nav{display:flex;align-items:center;gap:4px;}
.nav a.navlink{font-family:var(--font-display);font-weight:700;white-space:nowrap;color:var(--ink);
  letter-spacing:.02em;padding:10px 12px;border-radius:8px;font-size:1rem;transition:color .15s,background .15s;}
.nav a.navlink:hover{color:var(--gold);background:var(--navy-hover);}
/* white bar in every state (incl. over the hero) — links stay dark navy */
.site-header--overlay:not(.scrolled) .nav a.navlink,
.site-header--overlay:not(.scrolled) .header-phone{color:var(--ink);text-shadow:none;}
/* ...but on hover, deep-navy fill + neon-green text wins in every header state (declared last, higher specificity) */
.site-header--overlay:not(.scrolled) .nav a.navlink:hover,
.site-header--overlay.scrolled .nav a.navlink:hover{color:var(--gold);background:var(--navy-hover);}

.has-sub{position:relative;}
.submenu{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);min-width:248px;padding:8px;display:none;text-align:left;}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{display:block;}
.submenu a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink);font-weight:600;font-size:.92rem;text-shadow:none;white-space:nowrap;}
.submenu a:hover{background:var(--navy-hover);color:var(--gold);}

.header-phone{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink);
  font-family:var(--font-display);white-space:nowrap;padding:0 8px;}
.header-phone svg{width:18px;height:18px;fill:currentColor;}
.header-phone:hover{color:var(--gold);}
.site-header--overlay:not(.scrolled) .header-phone:hover,
.site-header--overlay.scrolled .header-phone:hover{color:var(--gold);}
.nav .btn{margin-left:6px;}

.nav-toggle{display:none;margin-left:auto;background:var(--teal-deep);border:0;color:#fff;
  width:48px;height:48px;border-radius:10px;cursor:pointer;align-items:center;justify-content:center;}
.nav-toggle svg{width:24px;height:24px;fill:#fff;}

/* ----- Hero (video background) ----- */
.hero{position:relative;min-height:clamp(560px,82vh,820px);display:flex;align-items:center;
  color:#fff;overflow:hidden;background:#0d1c1a;padding-top:120px;}
.hero__video,.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero__video{transform:scaleX(-1);} /* mirror so bubbles sit on the left */
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(13,40,66,.40) 0%,rgba(15,50,78,.20) 40%,rgba(11,32,54,.52) 100%);}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--container);
  margin-inline:auto;padding:clamp(40px,8vw,90px) var(--gutter);}
.hero__content{max-width:760px;}
.hero h1{color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.92),0 4px 26px rgba(0,0,0,.65);}
.hero .lead{color:#eaf2f0;margin-top:1.1rem;max-width:60ch;}
.hero .btn-row{margin-top:2rem;}
.hero__badges{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:2.2rem;align-items:center;}
.hero__badge{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.92rem;color:#fff;}
.hero__badge svg{width:20px;height:20px;flex:none;fill:var(--gold);}
.hero__badge .stars{color:var(--gold);letter-spacing:2px;}

/* ----- Interior page banner (sub-pages — simpler than the homepage video hero) ----- */
.page-hero{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:clamp(340px,46vh,460px);padding:132px 0 56px;overflow:hidden;background:#14506f;}
.page-hero .sec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;z-index:0;}
.page-hero .sec-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,26,44,.60),rgba(8,26,44,.74));}
.page-hero>.container{position:relative;z-index:2;max-width:880px;}
.page-hero,.page-hero .lead,.page-hero p{color:#eef8fb;}
.page-hero h1{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6);}
.page-hero .eyebrow{color:#d6eef6;}
.page-hero .lead{margin:1rem auto 0;max-width:700px;font-weight:600;}
.page-hero .btn-row{justify-content:center;margin-top:1.8rem;}
.breadcrumb{font-size:.85rem;color:#cfe3ea;margin-bottom:.7rem;}
.breadcrumb a{color:#cfe3ea;font-weight:600;}
.breadcrumb a:hover{color:var(--gold);}

/* ----- Photographic section backgrounds (immersive, brand-consistent) ----- */
.section--bg{position:relative;overflow:hidden;background:#0d1c1a;}
.section--bg .sec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.section--bg .sec-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(13,40,66,.70),rgba(11,32,54,.82));}
.section--bg>.container{position:relative;z-index:2;}
.section--bg,.section--bg .lead,.section--bg p{color:#e4eef4;}
.section--bg h2,.section--bg h3{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.7);}
.section--bg .eyebrow{color:#bfe0db;}
.section--bg .value__icon{background:rgba(255,255,255,.12);}
.section--bg .value__icon svg{fill:#bfe0db;}
.section--bg .value p{color:#cdd9d6;}

/* Light photographic texture behind white cards */
.section--photo{position:relative;overflow:hidden;}
.section--photo .sec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.section--photo .sec-scrim{position:absolute;inset:0;z-index:1;background:rgba(246,244,239,.92);}
.section--photo>.container{position:relative;z-index:2;}

/* Brand water-wave background (pwpbg.png) — signature blue look, white cards float on it */
.section--wave{position:relative;overflow:hidden;background:#14506f;}
.section--wave .sec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0;}
.section--wave .sec-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(18,52,84,.45) 0%,rgba(20,80,111,.20) 42%,rgba(20,86,118,.08) 100%);}
.section--wave>.container{position:relative;z-index:2;}
.section--wave,.section--wave .lead,.section--wave .muted,.section--wave p{color:#eef8fb;}
.section--wave h2,.section--wave h3{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.7);}
.section--wave .eyebrow{color:#d6eef6;}

/* ----- Trust strip ----- */
.trustbar{background:var(--navy-deep);color:#dfe8e6;}
.trustbar .container{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;
  padding-block:18px;text-align:center;}
.trustbar .ti{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;}
.trustbar svg{width:20px;height:20px;fill:var(--gold);flex:none;}

/* ----- Cards / service grid -----
   GLOBAL CARD STANDARD: card grids use the default grid stretch so cards are
   equal height WITHIN each row (do NOT use grid-auto-rows:1fr — it forces every
   row to the tallest row's height and leaves big empty space). One uniform gap
   value for both axes, cards fill the container width, minimal-but-safe inner
   padding (content never touches edges). */
.grid{display:grid;gap:clamp(18px,2.5vw,28px);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card__media{aspect-ratio:16/10;overflow:hidden;background:var(--teal-tint);}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.card:hover .card__media img{transform:scale(1.05);}
.card__body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1;text-align:center;}
.card__body h3{font-size:1.22rem;margin-bottom:.45rem;text-align:center;}
.card__body p{color:var(--muted);font-size:.96rem;text-align:justify;text-align-last:center;}
.card__link{align-self:center;}
.card__link{margin-top:auto;padding-top:16px;font-weight:700;color:var(--teal-deep);
  display:inline-flex;align-items:center;gap:6px;}
.card__link svg{width:16px;height:16px;fill:currentColor;transition:transform .15s ease;}
.card:hover .card__link svg{transform:translateX(4px);}
/* Cards are always light — keep their text dark even inside dark/wave sections */
.card .card__body h3{color:var(--ink);text-shadow:none;}
.card .card__body p{color:var(--muted);}
.card .card__link{color:var(--teal-deep);}
/* Dark "glass" card variant — for tiles sitting on the blue wave background */
.card--dark{background:rgba(13,40,66,.74);border-color:rgba(255,255,255,.20);backdrop-filter:blur(6px);}
.card--dark .card__body h3{color:#fff;text-shadow:none;}
.card--dark .card__body p{color:#d6e4ee;}
.card--dark .card__link{color:#bfe0db;}
.card--dark:hover{box-shadow:0 18px 44px rgba(0,0,0,.32);}

/* ----- Process / step icon badge ----- */
.step-ico{width:84px;height:84px;margin:2px auto 14px;border-radius:50%;
  background:var(--teal-tint);display:flex;align-items:center;justify-content:center;flex:none;}
.step-ico img{width:50px;height:50px;}
/* seal page: translucent-white process cards with deep-navy text */
body[data-page="seal"] .steps .card{background:rgba(255,255,255,.66);border-color:rgba(255,255,255,.6);}
body[data-page="seal"] .steps .card .card__body h3{color:var(--navy-deep);text-shadow:none;}
body[data-page="seal"] .steps .card .card__body p{color:#21456b;}
body[data-page="seal"] .steps .card .step-warn{color:#8a3b12;font-weight:600;}

/* ----- Split feature (flagship) ----- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
.split__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;
  aspect-ratio:4/3;object-fit:cover;}
.split__body .h-xl{margin-bottom:.4rem;}
.split__body .lead,.about__body .lead{text-align:justify;text-align-last:center;}
.feature-list{margin-top:1.4rem;display:grid;gap:12px;}
.feature-list li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;color:var(--ink-soft);}
.feature-list svg{width:22px;height:22px;flex:none;fill:var(--teal-deep);margin-top:2px;}

/* ----- Value props ----- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px);}
.value{text-align:center;}
.value__icon{width:64px;height:64px;border-radius:50%;background:var(--teal-tint);
  display:grid;place-items:center;margin:0 auto 16px;}
.value__icon svg{width:30px;height:30px;fill:var(--teal-deep);}
.value h3{font-size:1.18rem;margin-bottom:.4rem;}
.value p{color:var(--muted);font-size:.96rem;}

/* ----- Comparison table (seal maintenance options) — separated-tile style ----- */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px;}
.cmp{width:100%;max-width:940px;margin:0 auto;border-collapse:separate;border-spacing:8px;min-width:640px;}
.cmp th,.cmp td{padding:14px 16px;text-align:center;vertical-align:middle;border-radius:10px;}
/* blank top-left corner */
.cmp thead th:first-child{background:transparent;}
/* column header chips */
.cmp thead th{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;font-size:1.15rem;line-height:1.12;color:#1a8a12;}
.cmp thead th:nth-child(2){background:#cfe4ea;}                 /* light teal-blue */
.cmp thead th:nth-child(3){background:#e4e8ea;}                 /* light grey */
.cmp thead th.is-feature{background:#0f3a55;color:#2bdf00;}    /* deep navy + neon green */
.cmp thead th.is-feature span{display:inline;border:0;padding:0;}
/* row-label chips */
.cmp tbody th{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em;
  text-align:center;font-weight:800;font-size:1.05rem;line-height:1.15;color:var(--navy-deep);
  background:#d6e7e6;}
/* data tiles */
.cmp tbody td{background:rgba(255,255,255,.82);}
.cmp tbody td.is-feature{background:rgba(231,248,228,.86);}
/* icons */
.cmp .ico-yes,.cmp .ico-no{width:48px;height:48px;vertical-align:middle;}
.cmp .ico-yes{color:#2ca01c;}
.cmp .ico-no{color:#e23b2f;}
/* Good / Better / Best tier row */
.cmp .cmp-tier th{background:transparent;}
.cmp .cmp-tier td{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;font-size:1.2rem;color:var(--navy-deep);}
.cmp .cmp-tier td.is-feature{color:#0f8a07;}

/* ===== Seal page: one seal.png image behind the WHOLE page ===== */
body[data-page="seal"]{background:#0a2740 url(images/seal.jpg) center top/cover fixed no-repeat;color:#eef8fb;}
body[data-page="seal"]::before{content:"";position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,26,44,.34),rgba(8,26,44,.46));}
/* sections + their own photo layers go transparent so the page image shows through */
body[data-page="seal"] .section,
body[data-page="seal"] .section--soft,
body[data-page="seal"] .section--blue,
body[data-page="seal"] .section--bg,
body[data-page="seal"] .section--wave,
body[data-page="seal"] .page-hero,
body[data-page="seal"] .bigblue{background:transparent;}
body[data-page="seal"] .sec-bg,
body[data-page="seal"] .bigblue__bubbles,
body[data-page="seal"] .bigblue__tint{display:none;}
body[data-page="seal"] .sec-scrim{background:transparent;}
/* light, readable text everywhere on the image */
body[data-page="seal"] h2,
body[data-page="seal"] h3,
body[data-page="seal"] .h-xl,
body[data-page="seal"] .h-xxl{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55);}
body[data-page="seal"] .lead,
body[data-page="seal"] p,
body[data-page="seal"] .muted,
body[data-page="seal"] .feature-list li{color:#eaf3f5;}
body[data-page="seal"] .eyebrow{color:#bfe0db;}
/* keep the light cards + comparison table as solid readable panels floating on the image */
body[data-page="seal"] .card:not(.card--dark){background:rgba(255,255,255,.92);}

/* translucent block tints to differentiate sections + aid readability (seal page) */
body[data-page="seal"] .tint-navy{background:rgba(9,28,47,.60);}
body[data-page="seal"] .tint-teal{background:rgba(255,255,255,.58);}
body[data-page="seal"] .tint-blue{background:rgba(33,74,114,.55);}
body[data-page="seal"] .tint-white{background:rgba(255,255,255,.93);}
/* light tinted blocks (white + teal) need dark text */
body[data-page="seal"] .tint-white h2,
body[data-page="seal"] .tint-white h3,
body[data-page="seal"] .tint-white .h-xl,
body[data-page="seal"] .tint-white .h-xxl,
body[data-page="seal"] .tint-teal h2,
body[data-page="seal"] .tint-teal h3,
body[data-page="seal"] .tint-teal .h-xl,
body[data-page="seal"] .tint-teal .h-xxl{color:var(--ink);text-shadow:none;}
body[data-page="seal"] .tint-white .lead,
body[data-page="seal"] .tint-white p,
body[data-page="seal"] .tint-white .muted,
body[data-page="seal"] .tint-white .feature-list li,
body[data-page="seal"] .tint-teal .lead,
body[data-page="seal"] .tint-teal p,
body[data-page="seal"] .tint-teal .muted,
body[data-page="seal"] .tint-teal .feature-list li{color:var(--ink-soft);}
body[data-page="seal"] .tint-white .eyebrow,
body[data-page="seal"] .tint-teal .eyebrow{color:var(--teal-deep);}

/* ----- Areas we serve ----- */
.areas{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,60px);align-items:center;}
.city-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:1.4rem;}
.city{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  border-radius:10px;padding:13px 15px;font-weight:600;color:#fff;}
.city svg{width:18px;height:18px;fill:var(--gold);flex:none;}
.hoods{margin-top:1.2rem;color:#c8d6e4;font-size:.95rem;}
.areas__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;
  aspect-ratio:3/4;object-fit:cover;}

/* ----- Testimonials ----- */
/* .reviews uses the shared .grid .grid--3 classes for identical layout to the services grid */
.review{margin:0;background:rgba(9,28,47,.72);border:1px solid rgba(255,255,255,.2);border-radius:10px;
  padding:12px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;backdrop-filter:blur(4px);text-align:center;}
.review .stars{color:var(--gold);letter-spacing:2px;font-size:.95rem;margin-bottom:5px;}
.review blockquote{margin:0;}
.review p{font-size:.9rem;color:#eef4f6;font-style:italic;text-align:justify;text-align-last:center;}
.review cite{margin-top:8px;font-style:normal;font-weight:700;color:#fff;font-family:var(--font-display);font-size:.92rem;}
.review cite span{display:block;font-family:var(--font-body);font-weight:500;color:#c3d2cf;font-size:.8rem;}

/* ----- Owners / about strip ----- */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,60px);align-items:center;}
.about__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;
  aspect-ratio:1/1;object-fit:cover;}

/* ----- FAQ ----- */
.faq{max-width:600px;margin-inline:auto;}
.faq details{border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(11,33,54,.66);margin-bottom:8px;
  box-shadow:var(--shadow-sm);overflow:hidden;backdrop-filter:blur(4px);}
.faq summary{list-style:none;cursor:pointer;padding:12px 16px;font-family:var(--font-display);color:#fff;
  font-weight:700;font-size:.95rem;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:1.2rem;color:var(--gold);transition:transform .2s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details>p{padding:0 16px 14px;color:#eaf1ef;font-size:.9rem;}

/* ----- CTA band ----- */
.ctaband{position:relative;color:#fff;text-align:center;overflow:hidden;background:#0d2842;}
.ctaband__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0;}
.ctaband__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,40,66,.72),rgba(11,32,54,.82));z-index:1;}
.ctaband .container{position:relative;z-index:2;}
.ctaband h2{color:#fff;}
.ctaband .lead{color:#dceae7;margin:1rem auto 0;max-width:60ch;}

/* ----- Footer ----- */
.site-footer{position:relative;color:#fff;background:#112740;overflow:hidden;}
.site-footer__img{display:none;}
.site-footer .container{position:relative;z-index:2;padding-block:clamp(48px,7vw,80px);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(14px,2vw,24px);}
/* halved padding on both sides of every column + vertical divider lines (desktop 4-col only) */
@media (min-width:981px){
  .footer-grid>*{padding-inline:clamp(10px,1.5vw,22px);}
  .footer-grid>*+*{border-left:1px solid rgba(255,255,255,.14);}
}
/* menu columns: titles centered; link block centered in the column but link TEXT left-aligned */
.footer-grid>div:not(.footer-brand){text-align:center;}
.footer-grid>div:not(.footer-brand) ul{display:inline-block;text-align:left;margin-inline:auto;}
.site-footer h4{color:#fff;font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;}
.site-footer a{color:#fff;}
.site-footer a:hover{color:var(--gold);}
.footer-list li{margin-bottom:10px;}
.footer-brand{text-align:center;}
/* size by BOTH max dimensions with auto width+height so the true aspect ratio is never squished */
.footer-brand img{width:100%;height:auto;max-width:360px;margin:0 auto 2px;display:block;}
.footer-brand .footer-social{justify-content:center;}
.bigblue .footer-brand .footer-tag{color:#fff;text-align:justify;text-align-last:center;margin-inline:auto;max-width:32ch;font-size:.8rem;line-height:1.5;}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:.96rem;text-align:justify;text-align-last:left;}
.footer-contact svg{width:18px;height:18px;fill:var(--gold);flex:none;margin-top:3px;}
.footer-social{display:flex;gap:12px;margin-top:8px;}
.footer-social a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);
  display:grid;place-items:center;}
.footer-social a:hover{background:var(--teal-deep);}
.footer-social svg{width:20px;height:20px;fill:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;font-size:.86rem;color:#fff;}
.footer-sig{flex-basis:100%;text-align:center;margin-top:6px;opacity:.92;}
.footer-sig a{font-weight:700;}

/* ----- Unified closing block: FAQ + Got-Dirt CTA + Footer as one blue block ----- */
.bigblue{position:relative;overflow:hidden;
  background:#0c2e4a url(images/roofsbubbglong.jpg) top center/100% auto no-repeat;}
.bigblue__bubbles{display:none;}
.bigblue__tint{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,24,42,.5) 0%,rgba(7,24,42,.42) 50%,rgba(7,24,42,.55) 100%);}
.bigblue>section,.bigblue>footer{position:relative;z-index:2;background:transparent;}
.bigblue .site-footer{background:rgba(4,15,28,.58);}
.bigblue h2,.bigblue h3{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5);}
.bigblue .eyebrow{color:#bfe0db;}
.bigblue .lead,.bigblue p,.bigblue .muted{color:#dbe7ee;}

/* ----- Sticky mobile call/estimate bar ----- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.14);}
.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:58px;font-weight:700;font-family:var(--font-display);font-size:1rem;}
.mobile-bar svg{width:20px;height:20px;}
.mobile-bar .mb-call{background:#fff;color:var(--teal-deeper);}
.mobile-bar .mb-call svg{fill:var(--teal-deep);}
.mobile-bar .mb-est{background:var(--teal-deep);color:#fff;}
.mobile-bar .mb-est svg{fill:#fff;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .grid--3,.grid--4,.values,.reviews{grid-template-columns:repeat(2,1fr);}
  .split,.areas,.about{grid-template-columns:1fr;}
  .areas__media,.about__media{max-width:520px;margin-inline:auto;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
/* Mobile footer: stack everything, center links + bottom copyright/area/signature */
@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr;text-align:center;}
  .footer-grid>div:not(.footer-brand){align-items:center;}
  .footer-grid>div:not(.footer-brand)>*{text-align:center;}
  .footer-bottom{flex-direction:column;justify-content:center;text-align:center;gap:8px;}
}
/* Collapse the centered split-nav into a hamburger menu */
@media (max-width:1024px){
  .nav-toggle{display:inline-flex;order:2;}
  .header-inner{flex-wrap:wrap;min-height:80px;}
  .scrolled .header-inner{min-height:68px;}
  .brand{order:1;margin-right:auto;justify-content:flex-start;}
  .brand img,.scrolled .brand img{height:52px;}
  .nav{order:3;display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;}
  .nav--left,.nav--right{justify-content:flex-start;}
  .site-header.nav-open .nav{display:flex;}
  .site-header.nav-open{background:rgba(255,255,255,.99);box-shadow:0 8px 22px rgba(0,0,0,.12);}
  .nav a.navlink{padding:14px 6px;font-size:1.05rem;border-bottom:1px solid var(--line);border-radius:0;}
  .site-header--overlay.nav-open .nav a.navlink,
  .site-header--overlay.nav-open .header-phone{color:var(--ink);text-shadow:none;}
  .nav .btn{margin:10px 0 4px;width:100%;}
  .header-phone{padding:14px 6px;justify-content:flex-start;}
  .submenu{position:static;display:block;transform:none;border:0;box-shadow:none;padding:0 0 8px 16px;min-width:0;}
}
@media (max-width:1024px){
  .hero{padding-top:96px;}
}
@media (max-width:760px){
  .grid--3,.grid--4,.grid--2,.values,.reviews{grid-template-columns:1fr;}
  .city-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .mobile-bar{display:grid;}
  body{padding-bottom:58px;}
  .hero .btn-row{flex-direction:column;}
  .hero .btn-row .btn{width:100%;}
}
@media (max-width:380px){
  .city-grid{grid-template-columns:1fr;}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}


/* ----- Restoration: before/after pair + process video gallery ----- */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2.4vw,22px);max-width:760px;margin:0 auto 30px;}
.ba-item{position:relative;margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);}
.ba-item img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;}
.ba-tag{position:absolute;top:10px;left:10px;font-family:var(--font-display);font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;padding:5px 12px;border-radius:8px;
  background:rgba(9,28,47,.85);color:#fff;}
.ba-item--after .ba-tag{background:var(--gold);color:#0a2c06;}
.vidgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,18px);}
.vidcard{margin:0;border-radius:14px;overflow:hidden;background:#0a2740;box-shadow:var(--shadow);}
.vidcard video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:#0a2740;cursor:pointer;}
.vidcard figcaption{padding:10px 10px 12px;font-family:var(--font-display);font-weight:700;color:#fff;
  font-size:.9rem;text-align:center;background:rgba(9,28,47,.55);}
@media (max-width:760px){
  .vidgrid{grid-template-columns:1fr 1fr;}
  .ba-item img{aspect-ratio:3/4;}
}

/* 2-up landscape process videos */
.vidgrid--2{grid-template-columns:repeat(2,1fr);max-width:920px;margin-inline:auto;}
.vidcard--wide video{aspect-ratio:16/9;}
@media (max-width:760px){ .vidgrid--2{grid-template-columns:1fr;} }


/* ----- Oil-stain removal callout (restoration) ----- */
.oilnote{max-width:860px;margin:28px auto 0;background:rgba(9,28,47,.82);border-radius:14px;
  padding:clamp(18px,3vw,26px) clamp(20px,3.2vw,30px);box-shadow:var(--shadow);border-left:5px solid var(--gold);
  display:flex;gap:16px;align-items:flex-start;text-align:left;backdrop-filter:blur(4px);}
.oilnote svg{width:40px;height:40px;flex:none;fill:var(--gold);margin-top:2px;}
.oilnote h3{color:#fff;font-size:1.2rem;margin-bottom:.4rem;text-shadow:none;}
.oilnote p{color:#eaf3f5;font-size:.98rem;}


/* ----- Single feature video (e.g., white roof clip) ----- */
.videofeature{max-width:900px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#0a2740;}
.videofeature video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#0a2740;}

/* video used as a section/hero background */
.sec-bg video,video.sec-bg{pointer-events:none;}


/* ----- Roof page: video hero — lighter overlay, stronger title shadow ----- */
.page-hero video.sec-bg{pointer-events:none;}
body[data-page="roof"] .page-hero .sec-scrim{background:linear-gradient(180deg,rgba(8,26,44,.30),rgba(8,26,44,.46));}
body[data-page="roof"] .page-hero h1{text-shadow:0 2px 6px rgba(0,0,0,.9),0 3px 22px rgba(0,0,0,.55);}


/* ----- Light overlay on a card image (pairs with a dark-overlaid section of the same view) ----- */
.card__media--light{position:relative;}
.card__media--light::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(231,242,240,.16));}


/* ----- Compact section + lighter section--bg overlay (roof page) ----- */
.section--compact{padding-block:clamp(24px,3.2vw,40px);}
.section--compact .videofeature{max-width:600px;}
.section--bg.light-scrim .sec-scrim{background:linear-gradient(180deg,rgba(13,40,66,.40),rgba(11,32,54,.52));}


/* ----- HOA page: video hero — minimal overlay, strong title shadow ----- */
body[data-page="hoa"] .page-hero .sec-scrim{background:linear-gradient(180deg,rgba(8,26,44,.22),rgba(8,26,44,.40));}
body[data-page="hoa"] .page-hero h1{text-shadow:0 2px 6px rgba(0,0,0,.92),0 3px 22px rgba(0,0,0,.6);}


/* ----- Sign-up / booking form ----- */
.formwrap{max-width:780px;margin:0 auto;background:rgba(255,255,255,.97);border-radius:16px;box-shadow:var(--shadow);padding:clamp(20px,3.5vw,40px);text-align:left;}
.pform{display:grid;gap:16px;}
.pform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.pform label{display:block;font-weight:600;color:var(--navy-deep);font-size:.9rem;margin-bottom:5px;}
.pform input,.pform select,.pform textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;color:var(--ink);background:#fff;}
.pform input:focus,.pform select:focus,.pform textarea:focus{outline:3px solid var(--teal-tint);outline-offset:0;border-color:var(--teal-deep);}
.pform textarea{min-height:110px;resize:vertical;}
.pform fieldset{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0;}
.pform legend{font-weight:600;color:var(--navy-deep);font-size:.9rem;padding:0 6px;}
.checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;}
.checkgrid label,.radio-row label{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink-soft);margin:0;}
.checkgrid input,.radio-row input{width:auto;}
.radio-row{display:flex;flex-wrap:wrap;gap:14px 22px;}
.form-note{font-size:.84rem;color:var(--muted);margin-top:2px;}
@media (max-width:600px){.pform .row2,.checkgrid{grid-template-columns:1fr;}}

/* ----- HOA long block: services + planning + form over bubble bg ----- */
body[data-page="hoa"] .hoa-long .card h3{color:var(--navy-deep);text-shadow:none;}
body[data-page="hoa"] .hoa-long .card p{color:var(--ink-soft);text-shadow:none;}
body[data-page="hoa"] .hoa-long .card .card__link{color:var(--teal-deep);}
body[data-page="hoa"] .hoa-long .subhead{margin-top:clamp(44px,6vw,84px);}
body[data-page="hoa"] .hoa-long .step-ico{margin-bottom:14px;}
body[data-page="hoa"] .hoa-long .step-ico svg{display:block;}
body[data-page="hoa"] .hoa-long .formwrap h3{color:var(--navy-deep);text-shadow:none;}
body[data-page="hoa"] .hoa-long .formwrap p{color:var(--ink-soft);text-shadow:none;}
body[data-page="hoa"] .hoa-long .formwrap .form-note{color:var(--muted);}
.gf-thanks{display:none;text-align:center;padding:26px 12px;}
.gf-thanks p{margin-top:.5rem;}

/* ----- Estimate form extras ----- */
.formstatus{border-radius:10px;padding:16px 18px;font-size:1rem;margin-bottom:18px;}
.formstatus--ok{background:#eaf4f2;border:1px solid var(--teal-deep);color:#173f3a;}
.formstatus--ok strong{display:block;font-size:1.2rem;margin-bottom:4px;color:var(--navy-deep);}
.formstatus--err{background:#fdeceb;border:1px solid #d98b85;color:#7a241d;}
.inline-err{color:#a5302a;font-size:.85rem;margin:8px 0 0;font-weight:600;}
.photonote{display:flex;gap:10px;align-items:flex-start;background:var(--teal-tint);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:.9rem;color:var(--ink-soft);}
.photonote a{font-weight:600;}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--ink-soft);font-weight:500;}
.consent input{width:auto;margin-top:3px;}
.pform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ----- Touch-up: policy callout + stacked radio list ----- */
.policybox{background:var(--teal-tint);border:1px solid var(--line);border-left:4px solid var(--teal-deep);border-radius:10px;padding:18px 20px;margin-bottom:22px;font-size:.92rem;color:var(--ink-soft);}
.policybox h3{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);margin:0 0 10px;}
.policybox p{margin:0 0 10px;}
.policybox p:last-child{margin-bottom:0;}
.policybox strong{color:var(--navy-deep);}
.radiolist{display:flex;flex-direction:column;gap:8px;}
.radiolist label{display:flex;align-items:flex-start;gap:11px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-weight:500;color:var(--ink-soft);cursor:pointer;margin:0;}
.radiolist label:hover{border-color:var(--teal-deep);}
.radiolist input{width:auto;margin-top:3px;flex:none;}
.radiolist .hint{color:var(--muted);font-weight:400;font-size:.85rem;}
.radiolist .fee{color:var(--teal-deep);font-weight:600;}

.container--narrow{max-width:820px;}

/* ----- Before/After hover-reveal cards ----- */
.ba-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#0d1c1a;margin:0;cursor:pointer;}
.ba-card img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;}
.ba-card .ba-after{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;}
.ba-card:hover .ba-after,.ba-card:focus-within .ba-after{opacity:1;}
.ba-pill{position:absolute;top:12px;left:12px;z-index:4;background:rgba(13,40,66,.9);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;transition:background .3s;}
.ba-pill .on-after{display:none;}
.ba-card:hover .ba-pill .on-before,.ba-card:focus-within .ba-pill .on-before{display:none;}
.ba-card:hover .ba-pill .on-after,.ba-card:focus-within .ba-pill .on-after{display:inline;}
.ba-card:hover .ba-pill,.ba-card:focus-within .ba-pill{background:#1d3e60;color:var(--gold);}
.ba-cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:18px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.74));}
.ba-cap h3{color:#fff;margin:0;font-size:1.05rem;}
.ba-cap p{color:#e7eef2;margin:.15rem 0 0;font-size:.84rem;}


/* ----- Residential page: video hero overlay ----- */
body[data-page="residential"] .page-hero .sec-scrim{background:linear-gradient(180deg,rgba(6,20,38,.55),rgba(6,18,34,.74));}
body[data-page="residential"] .page-hero h1{text-shadow:0 2px 6px rgba(0,0,0,.9),0 3px 22px rgba(0,0,0,.55);}


/* square before/after video feature */
.ba-video{max-width:500px;margin:30px auto 0;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#0d1c1a;}
.ba-video video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;}
.ba-video figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.74));}
.ba-video figcaption h3{color:#fff;margin:0;font-size:1.05rem;}
.ba-video figcaption p{color:#e7eef2;margin:.15rem 0 0;font-size:.84rem;}


/* before/after extra row: portrait walkway card + square video */
.ba-extra{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px);max-width:860px;margin:26px auto 0;align-items:center;}
.ba-extra .ba-video{max-width:none;margin:0;}
.ba-card--portrait img{aspect-ratio:3/4;}
@media (max-width:640px){.ba-extra{grid-template-columns:1fr;}}


/* before/after video cards */
.ba-card video{display:block;width:100%;object-fit:cover;}
.ba-card--vid video{aspect-ratio:4/3;}
.ba-card--portraitvid video{aspect-ratio:9/16;}


/* extended before/after: side-by-side, sequential play */
.ba-sxs-cap{display:block;text-align:center;color:var(--navy-deep);font-weight:600;margin:0 auto 12px;font-size:.95rem;}
.ba-sxs{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:820px;margin:0 auto clamp(22px,3.4vw,38px);}
.ba-sxs figure{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#0d1c1a;}
.ba-sxs video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;transition:opacity .35s;}
.ba-sxs video.dim{opacity:.4;}
/* original square clip — true size, centered, last row */
.ba-solo{position:relative;max-width:520px;margin:clamp(22px,3.6vw,40px) auto 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#0d1c1a;}
.ba-solo video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;}
@media (max-width:560px){.ba-sxs{max-width:420px;}}

.ba-pill--after{background:#1d3e60;color:var(--gold);}

.vidgrid video{cursor:pointer;}

body[data-page="hoods"] .page-hero .sec-bg{object-position:center top;}

body[data-page="hoods"] .page-hero .sec-scrim{background:linear-gradient(180deg,rgba(8,26,44,.26),rgba(8,26,44,.44));}
body[data-page="hoods"] .page-hero h1{text-shadow:0 2px 6px rgba(0,0,0,.92),0 3px 22px rgba(0,0,0,.6);}


/* ----- Blue-green gradient section (variety vs. bubble bgs) ----- */
.section--gradient{position:relative;overflow:hidden;background:linear-gradient(135deg,#2f7a6e 0%,#236074 52%,#1d3e60 100%);}
.section--gradient>.container{position:relative;z-index:2;}
.section--gradient,.section--gradient .lead,.section--gradient p,.section--gradient .muted{color:#eef8fb;}
.section--gradient h2,.section--gradient h3{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.4);}
.section--gradient .eyebrow{color:#d6eef6;}
.section--gradient .value__icon{background:rgba(255,255,255,.12);}
.section--gradient .value__icon svg{fill:#bfe0db;}
.bigblue .section--gradient{background:linear-gradient(135deg,#2f7a6e 0%,#236074 52%,#1d3e60 100%);}


/* About: family photos trio under the main owner photo */
.about__trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;}
.about__trio img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block;box-shadow:var(--shadow-sm);position:relative;z-index:1;cursor:pointer;transition:transform .35s ease,box-shadow .35s ease;}
.about__trio img:hover,.about__trio img:focus{transform:scale(1.35);z-index:6;box-shadow:0 16px 40px rgba(0,0,0,.38);}
.about__trio{overflow:visible;}


/* About: justified body + owners signature */
.about__body p{text-align:justify;text-align-last:center;}
.about__sig{margin:1.8rem auto 0;text-align:center;}
.about__sig img{display:block;width:62%;max-width:240px;height:auto;margin:0 auto;}
.about__sig figcaption{margin-top:6px;font-weight:600;color:var(--navy-deep);font-size:.9rem;letter-spacing:.02em;}


/* ----- Instagram feed grid ----- */
.ig-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.ig-grid a{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:10px;box-shadow:var(--shadow-sm);}
.ig-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.ig-grid a:hover img{transform:scale(1.07);}
.ig-empty{text-align:center;color:var(--muted);margin-top:6px;}
@media (max-width:900px){.ig-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.ig-grid{grid-template-columns:repeat(2,1fr);}}


/* ----- Contact map ----- */
.contact-map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);}
.contact-map iframe{display:block;width:100%;height:420px;border:0;}
@media (max-width:640px){.contact-map iframe{height:320px;}}


/* ----- Before/after inside a standard card (matches gallery cards) ----- */
.ba-flip{cursor:pointer;}
.ba-flip .card__media{position:relative;}
.ba-flip .ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;}
.ba-flip:hover .ba-after,.ba-flip:focus-within .ba-after{opacity:1;}
.ba-flip .ba-pill{position:absolute;top:10px;left:10px;z-index:3;background:rgba(13,40,66,.9);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;}
.ba-flip .ba-pill .on-after{display:none;}
.ba-flip:hover .ba-pill .on-before,.ba-flip:focus-within .ba-pill .on-before{display:none;}
.ba-flip:hover .ba-pill .on-after,.ba-flip:focus-within .ba-pill .on-after{display:inline;}
.ba-flip:hover .ba-pill,.ba-flip:focus-within .ba-pill{background:#1d3e60;color:var(--gold);}

/* ----- Contact hero: darker scrim for readable copy ----- */
body[data-page="contact"] .page-hero .sec-scrim{background:linear-gradient(180deg,rgba(8,24,42,.55),rgba(8,22,38,.72));}
body[data-page="contact"] .page-hero h1{text-shadow:0 2px 8px rgba(0,0,0,.95),0 3px 22px rgba(0,0,0,.6);}


/* ----- Project gallery grid ----- */
.shotgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.shotgrid .shot{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:10px;box-shadow:var(--shadow-sm);}
.shotgrid .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.shotgrid .shot:hover img{transform:scale(1.06);}
@media (max-width:900px){.shotgrid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.shotgrid{grid-template-columns:repeat(2,1fr);}}


/* Dark translucent cards (e.g., Who We Serve) with bright white text */
.cards-dark .value{background:rgba(13,40,66,.74);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);padding:clamp(16px,2.2vw,24px);backdrop-filter:blur(6px);box-shadow:var(--shadow-sm);}
.cards-dark .value h3{color:#fff;text-shadow:none;}
.cards-dark .value p{color:#f3f9fc;}


/* Commercial dark cards — bright white body text */
body[data-page="commercial"] .card--dark .card__body h3{color:#fff;}
body[data-page="commercial"] .card--dark .card__body p{color:#f3f9fc;}