/* =====================================================================
   Arctic Shine Services — site theme
   Matches the H2OBros design system: palette, square corners, button
   styles, image overlays, shimmer/shine animations and section layouts.
   ===================================================================== */

:root {
    /* Brand palette (RGB triplets so alpha variants work) */
    --primary: 0, 90, 156;            /* #005A9C */
    --primary-darker: 0, 66, 115;     /* #004273 */
    --primary-lighter: 0, 114, 197;   /* #0072C5 */
    --secondary: 154, 185, 234;       /* #9AB9EA */
    --secondary-contrast: 13, 33, 64; /* #0D2140 */
    --d50: 243, 244, 247;
    --d100: 223, 226, 233;
    --d200: 208, 213, 220;
    --d400: 107, 124, 144;
    --d700: 49, 56, 63;
    --d900: 9, 20, 35;
    --fg: 2, 8, 23;
    --gray-300: 209, 213, 219;
    --gray-500: 107, 114, 128;
    --gray-600: 75, 85, 99;
    --gray-700: 55, 65, 81;
    --star: 250, 204, 21;             /* yellow-400 */
    --star-orange: 251, 146, 60;      /* orange-400 */

    --font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --max: 80rem;
    --radius: 0px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);
}

*, *::before, *::after { box-sizing: border-box; border: 0 solid rgb(226, 232, 240); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: rgb(var(--fg));
    background: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid rgb(var(--primary-lighter)); outline-offset: 2px; }
.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; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 1280px) { .container { padding: 0; } }

.star-row { display: inline-flex; gap: 2px; color: rgb(var(--star)); }
.star-row svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------------------------------------------------------------------
   Buttons — square, translate up on hover, press down on click
   --------------------------------------------------------------------- */
.btn-group { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 768px) { .btn-group { flex-direction: row; align-items: center; } }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    border-radius: var(--radius);
    font-size: 14px; font-weight: 500; line-height: 1.15;
    white-space: nowrap; text-align: center;
    padding: 8px 8px;
    box-shadow: var(--shadow);
    transition: all .2s ease-in-out;
}
@media (min-width: 640px) { .btn { font-size: 16px; } }
@media (min-width: 768px) { .btn { padding: 12px 16px; } .btn-group .btn:first-child { margin-right: 12px; } }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); background: rgb(var(--primary-darker)); color: #fff; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Navbar buttons */
.btn-solid { background: rgb(var(--primary)); color: #fff; }
.btn-outline { background: transparent; color: rgb(var(--primary)); border: 1px solid rgb(var(--primary)); }

/* Hero buttons */
.btn-hero {
    font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .025em;
    padding: 14px 32px !important;
}
.btn-hero-primary { background: rgb(var(--secondary)); color: rgb(var(--secondary-contrast)); box-shadow: 0 10px 15px -3px rgba(var(--secondary),.25), 0 4px 6px -4px rgba(var(--secondary),.25); }
.btn-hero-secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.btn-hero-secondary:hover { border-color: rgba(255,255,255,.6); }

/* CTA / section buttons (on blue or image backgrounds) */
.btn-cta-primary { background: rgb(var(--secondary)); color: rgb(var(--secondary-contrast)); font-size: 15px; }
.btn-cta-secondary { background: rgba(var(--d200), .2); color: rgb(var(--d200)); font-size: 15px; }
@media (min-width: 768px) { .btn-cta-secondary { padding: 16px 32px; } }

/* White button with blue text (service hero; about/contact/area endings) */
.btn-white { background: #fff; color: rgb(var(--primary)); font-size: 15px; line-height: 16px; }
@media (min-width: 768px) { .cta-shapes .btn-white { padding: 16px 32px; } }
/* Clear button with white outline (service hero) */
.btn-ghost { background: transparent; color: #fff; border: 1px solid #fff; font-size: 15px; line-height: 16px; }
/* Service page photo ending: large bold buttons */
.btn-photo-primary, .btn-photo-secondary { font-size: 20px !important; font-weight: 700; line-height: 28px; }
.btn-photo-primary { background: rgb(var(--secondary)); color: rgb(var(--secondary-contrast)); padding: 16px 48px !important; }
.btn-photo-secondary { background: transparent; color: #fff; border: 1px solid #fff; padding: 16px 32px !important; }
.cta-photo .btn-group { gap: 24px; }
.cta-photo .btn-group .btn:first-child { margin-right: 0; }

/* Review buttons */
.btn-review-solid, .btn-review-outline {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 28px; font-size: 18px; font-weight: 600; line-height: 1.55;
    border-radius: var(--radius); transition: background-color .15s, color .15s;
}
.btn-review-solid { background: rgb(var(--primary)); color: #fff; }
.btn-review-solid:hover { background: rgb(var(--primary-darker)); }
.btn-review-outline { border: 1px solid rgb(var(--primary)); color: rgb(var(--primary)); }
.btn-review-outline:hover { background: rgb(var(--primary)); color: #fff; }
.btn-review-outline img { width: 16px; height: 16px; margin-right: 12px; position: relative; top: -1px; }
.review-btns { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 640px) { .review-btns { flex-direction: row; } }

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 30; background: #fff; box-shadow: var(--shadow); }
@media (min-width: 768px) { .site-header { position: static; } }

.topbar { display: none; background: rgb(var(--primary)); color: #fff; padding: 16px 0; }
@media (min-width: 768px) { .topbar { display: block; } }
@media (min-width: 1024px) { .topbar { margin-bottom: -8px; } }
.topbar .container { display: flex; align-items: center; justify-content: space-between; }
.topbar-left { display: flex; align-items: center; gap: 40px; font-size: 14px; }
.topbar-hours, .topbar-rating { display: flex; align-items: center; gap: 8px; }
.topbar-hours svg { width: 16px; height: 16px; }
.topbar-rating .star-row { color: rgb(var(--star-orange)); gap: 4px; }
.topbar-rating:hover { opacity: .85; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-right a:hover, .lang-toggle:hover { opacity: .8; }
.topbar-right svg { width: 20px; height: 20px; }
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #fff; padding: 2px 10px; border: 1px solid rgba(255,255,255,.35); letter-spacing: .04em; margin-left: 8px; }
.lang-toggle svg { width: 14px; height: 14px; }

.nav-main { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; }
.nav-logo { display: flex; align-items: center; flex-shrink: 0; max-width: 65%; color: rgb(var(--primary-darker)); }
.nav-logo img { height: 4rem; width: auto; object-fit: contain; }
@media (min-width: 640px) { .nav-logo { max-width: none; } }
@media (min-width: 768px) { .nav-logo img { height: 5rem; } }
@media (min-width: 1440px) { .nav-logo img { height: 150px; max-height: 150px; } }

/* Same sizes as H2OBros: 20px links, 32px gaps. The full link row is shown when it fits
   (1440px+); below that the header uses H2OBros's tablet/phone layout. */
.nav-right { display: flex; flex: 1; flex-direction: column; align-items: flex-end; padding: 32px 0; }
@media (min-width: 1440px) { .nav-right { padding-bottom: 40px; } }
.nav-cta { display: none; gap: 12px; margin-bottom: 32px; }
.nav-cta .btn { padding: 12px 16px; }
@media (min-width: 1440px) { .nav-cta { display: flex; } }

.nav-links { display: none; align-items: center; justify-content: flex-end; gap: 32px; width: 100%; }
@media (min-width: 1440px) { .nav-links { display: flex; } }
.nav-link { font-size: 20px; font-weight: 500; line-height: 24px; color: rgb(var(--primary)); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: color .15s; }
.nav-link:hover, .nav-link[aria-current="page"] { color: rgb(var(--primary-darker)); }
.nav-link svg { width: 20px; height: 20px; color: rgb(var(--d400)); transition: transform .2s; }

/* Services dropdown */
.nav-dd { position: relative; }
.nav-dd-panel {
    position: absolute; right: 0; top: calc(100% + 12px); z-index: 40;
    min-width: 15rem; background: #fff; padding: 4px 0;
    box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,.05);
    opacity: 0; visibility: hidden; transform: scale(.95); transform-origin: top right;
    transition: opacity .1s ease-in, transform .1s ease-in, visibility .1s;
}
.nav-dd.open .nav-dd-panel { opacity: 1; visibility: visible; transform: scale(1); transition-duration: .1s; transition-timing-function: ease-out; }
.nav-dd.open > .nav-link svg { transform: rotate(180deg); }
.nav-dd-panel a { display: block; padding: 8px 16px; font-size: 14px; color: rgb(var(--d700)); }
.nav-dd-panel a:hover, .nav-dd-panel a:focus-visible { background: rgb(var(--d50)); color: rgb(var(--d900)); }

/* Tablet / phone header (H2OBros: 92px tall on phones, 28px menu icon) */
.nav-mobile { display: flex; align-items: center; gap: 16px; }
@media (min-width: 1440px) { .nav-mobile { display: none; } }
.nav-mobile .btn { display: none; }
@media (min-width: 768px) { .nav-mobile .btn { display: inline-flex; padding: 12px 16px; } }
.menu-btn { position: relative; color: rgb(var(--primary-darker)); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.menu-btn::before { content: ""; position: absolute; inset: -8px; }   /* bigger tap area, same look */
.menu-btn svg { width: 28px; height: 28px; }

/* Phone menu: full-screen white panel, close button only, plain links (H2OBros) */
.mobile-menu { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.mobile-menu.open { visibility: visible; }
.mobile-menu-backdrop { position: absolute; inset: 0; }
.mobile-menu-panel {
    position: absolute; inset: 0 0 0 auto; width: 100%;
    background: #fff; padding: 24px; overflow-y: auto;
    opacity: 0; transition: opacity .15s ease;
}
.mobile-menu.open .mobile-menu-panel { opacity: 1; }
.mobile-menu-head { display: flex; align-items: center; justify-content: flex-end; }
.mobile-menu-head .menu-btn { width: 24px; height: 24px; color: rgb(var(--fg)); }
.mobile-menu-head .menu-btn svg { width: 24px; height: 24px; }
.mobile-menu-links { margin-top: 24px; padding: 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.mobile-menu-links > a, .mobile-menu-links summary {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 -12px; padding: 8px 12px; font-size: 16px; font-weight: 600; line-height: 28px; color: rgb(var(--d900));
    cursor: pointer; list-style: none;
}
.mobile-menu-links summary { padding-right: 14px; }
.mobile-menu-links > a:hover, .mobile-menu-links summary:hover { background: rgb(var(--d50)); }
.mobile-menu-links summary::-webkit-details-marker { display: none; }
.mobile-menu-links summary svg { width: 20px; height: 20px; flex: none; transition: transform .2s; }
.mobile-menu-links details[open] summary svg { transform: rotate(180deg); }
.mobile-menu-links details { display: flex; flex-direction: column; }
.mobile-menu-links details a { display: block; margin: 0 -12px; padding: 8px 12px 8px 24px; font-size: 14px; font-weight: 600; line-height: 28px; color: rgb(var(--d900)); }
.mobile-menu-links details a:hover { background: rgb(var(--d50)); }
.mobile-menu .btn-group { flex-direction: column; gap: 8px; }
.mobile-menu .btn-group .btn { width: 100%; padding: 12px 16px; margin: 0 !important; }
.mobile-menu .lang-toggle { margin-top: 24px; color: rgb(var(--primary)); border-color: rgba(var(--primary), .35); padding: 6px 12px; }
/* Fixed header that slides in after scrolling (desktop) */
.fixed-nav {
    display: none; position: fixed; left: 0; right: 0; top: 0; z-index: 30;
    transform: translateY(-100%); transition: transform .3s ease-in-out;
    background: rgba(255,255,255,.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 4px 24px -1px rgba(0,0,0,.08), 0 2px 8px -1px rgba(0,0,0,.04);
}
@media (min-width: 768px) { .fixed-nav { display: block; } }
.fixed-nav.show { transform: translateY(0); }
.fixed-nav .nav-main { padding: 8px 0; gap: 24px; }
.fixed-nav .nav-logo img { height: 4rem; }
@media (min-width: 1440px) { .fixed-nav .nav-logo img { height: 6rem; max-height: 6rem; } }
.fixed-nav .nav-links { gap: 32px; }
.fixed-nav .nav-link { font-size: 16px; color: rgb(var(--d700)); }
.fixed-nav .nav-link:hover { color: rgb(var(--primary)); }
.fixed-nav .nav-cta { margin: 0; }
.fixed-nav .nav-cta .btn-group .btn:first-child { margin-right: 0; }
@media (min-width: 1440px) and (max-width: 1599px) { .fixed-nav .nav-links { gap: 24px; } }


/* ---------------------------------------------------------------------
   Home hero (image or video background)
   --------------------------------------------------------------------- */
.hero { position: relative; min-height: 90vh; overflow: hidden; background: rgb(var(--d900)); }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay-side { position: absolute; inset: 0; background: linear-gradient(to right, rgb(var(--d900)) 0%, rgba(var(--d900), .85) 50%, rgba(var(--d900), .4) 100%); }
.hero-overlay-bottom { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--d900), .8) 0%, transparent 50%, rgba(var(--d900), .3) 100%); }
.hero-hairline { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.06); z-index: 10; }
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 6rem; background: linear-gradient(to top, rgb(var(--d900)), transparent); }
.hero-content { position: relative; z-index: 10; max-width: var(--max); margin: 0 auto; min-height: 90vh; display: flex; align-items: center; padding: 96px 24px; }
@media (min-width: 640px) { .hero-content { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 768px) { .hero-content { padding-top: 128px; padding-bottom: 128px; } }
@media (min-width: 1024px) { .hero-content { padding-top: 160px; padding-bottom: 160px; } }
@media (min-width: 1280px) { .hero-content { padding-left: 16px; padding-right: 16px; } }
.hero-text { display: flex; flex-direction: column; gap: 32px; max-width: 42rem; }
.hero-rating {
    display: inline-flex; align-items: center; gap: 12px; width: fit-content;
    border-radius: 9999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.07);
    padding: 8px 16px; box-shadow: 0 10px 15px -3px rgba(var(--secondary), .1), 0 4px 6px -4px rgba(var(--secondary), .1);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.hero-rating .divider { width: 1px; height: 16px; background: rgba(255,255,255,.2); }
.hero-rating a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.9); transition: color .15s; }
.hero-rating a:hover { color: #fff; }
.hero-rating img { width: 16px; height: 16px; }
.hero-title { font-size: 48px; font-weight: 800; text-transform: uppercase; line-height: 1.05; letter-spacing: -.025em; color: #fff; }
.hero-title span { display: block; }
.hero-title .accent { color: rgb(var(--primary)); }
.blue-hero .hero-title .accent { color: rgb(var(--secondary)); }
@media (min-width: 640px) { .hero-title { font-size: 60px; } }
@media (min-width: 1024px) { .hero-title { font-size: 72px; } }
@media (min-width: 1280px) { .hero-title { font-size: 80px; } }
.hero-sub { max-width: 32rem; font-size: 18px; line-height: 1.625; color: rgba(255,255,255,.7); }
@media (min-width: 640px) { .hero-sub { font-size: 20px; } }
.hero-buttons { margin-top: 8px; }

/* Hero video controls (pause/play) */
.hero-video-ctrl {
    position: absolute; right: 24px; bottom: 32px; z-index: 12;
    display: inline-flex; gap: 4px; padding: 6px; background: rgba(var(--d900), .6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.hero-video-ctrl button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background .2s; }
.hero-video-ctrl button:hover { background: rgba(255,255,255,.1); }
.hero-video-ctrl svg { width: 20px; height: 20px; }

/* Protection banner */
.protect-banner { width: 100%; background: linear-gradient(135deg, rgb(var(--primary)) 0%, rgb(var(--secondary)) 100%); padding: 1rem 20px; text-align: center; position: relative; overflow: hidden; }
.protect-banner::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); animation: pb-shine 3s ease infinite; }
@keyframes pb-shine { 0% { left: -100%; } 100% { left: 100%; } }
.protect-banner p { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; font-size: 1.25rem; font-weight: 600; color: #fff; letter-spacing: .5px; text-shadow: 0 2px 4px rgba(0,0,0,.1); }
@media (max-width: 768px) { .protect-banner { padding: .875rem 20px; } .protect-banner p { font-size: 1rem; } }

/* ---------------------------------------------------------------------
   Services grid (image cards with color filter)
   --------------------------------------------------------------------- */
.services { background: #fff; padding: 64px 16px; }
@media (min-width: 768px) { .services { padding-left: 24px; padding-right: 24px; } }
.services-inner { max-width: var(--max); margin: 0 auto; }
.services-head { margin-bottom: 32px; display: flex; flex-direction: column; gap: 32px; }
.services-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.services-title { font-size: 30px; line-height: 1.2; font-weight: 600; text-align: center; }
@media (min-width: 768px) { .services-title { font-size: 36px; } }
@media (min-width: 1024px) { .services-title { font-size: 48px; line-height: 1; text-align: start; } }
.services-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.services-grid > * { grid-column: span 12; }
/* Same as H2OBros: first card full width on tablets, then two halves; three across on desktop */
@media (min-width: 640px) { .services-grid > * { grid-column: span 6; } .services-grid > :first-child { grid-column: span 12; } }
@media (min-width: 1024px) {
    .services-grid.cols-3 > * , .services-grid.cols-3 > :first-child { grid-column: span 4; }
}
/* Extra services are hidden until "View more services" is pressed */
.services-grid:not(.show-more) > .is-extra { display: none; }
.services-grid.show-more > .is-extra { animation: svc-reveal .35s var(--ease) both; }
@keyframes svc-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.services-more { display: flex; justify-content: center; margin-top: 32px; }
.services-more .btn { padding: 12px 24px; gap: 8px; }
.services-more svg { width: 20px; height: 20px; transition: transform .2s; }
.services-more [aria-expanded="true"] svg { transform: rotate(180deg); }
/* Extra services (beyond the first three) share a wide row underneath */
.services-grid > .is-extra { grid-column: span 12; }
@media (min-width: 640px) { .services-grid > .is-extra.extra-2 { grid-column: span 6; } }
@media (min-width: 1024px) {
    .services-grid > .is-extra.extra-1 { grid-column: span 12; }
    .services-grid > .is-extra.extra-2 { grid-column: span 6; }
    .services-grid > .is-extra.extra-3 { grid-column: span 4; }
    .services-grid > .is-extra .svc-card { height: 360px; }
}

.svc-card {
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    height: 500px; width: 100%; overflow: hidden; padding: 16px 28px 64px;
    border-radius: var(--radius); background: #fff; box-shadow: var(--shadow);
}
.svc-card::after {
    content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
    animation: shimmer 6s ease-in-out infinite; z-index: 15; pointer-events: none;
}
@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.svc-img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transition: transform .3s var(--ease); }
.svc-card:hover .svc-img, .svc-card:focus-visible .svc-img { transform: scale(1.1); }
.svc-dim { position: absolute; inset: 0; background: rgb(var(--d900)); opacity: .25; }
.svc-tint { position: absolute; inset: 0; z-index: 10; background: linear-gradient(to bottom, rgba(var(--primary), .1), rgba(var(--primary), .5)); }
.svc-head { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; color: rgb(var(--d900)); }
.svc-label { background: rgba(255,255,255,.9); padding: 4px 16px; font-size: 14px; border-radius: var(--radius); }
.svc-arrow { background: #fff; padding: 16px; display: flex; align-items: center; justify-content: center; transition: transform .15s var(--ease); border-radius: var(--radius); }
.svc-card:hover .svc-arrow { transform: scale(1.1); }
.svc-arrow svg { width: 24px; height: 24px; }
.svc-body { position: relative; z-index: 20; display: flex; flex-direction: column; gap: 16px; color: #fff; }
.svc-body h3 { font-size: 24px; line-height: 32px; font-weight: 500; }
.svc-body p { font-size: 14px; line-height: 20px; color: rgba(255,255,255,.9); }

/* ---------------------------------------------------------------------
   About split (blue panel + offset image)
   --------------------------------------------------------------------- */
.about { background: #fff; }
.about-container { max-width: var(--max); margin: 0 auto; padding: 48px 16px; }
@media (min-width: 640px) { .about-container { padding-left: 0; padding-right: 0; } }
@media (min-width: 768px) { .about-container { padding: 80px 12px; } }
@media (min-width: 1280px) { .about-container { padding-left: 0; padding-right: 0; } }
.about-wrap { display: flex; flex-direction: column; color: #fff; }
@media (min-width: 768px) { .about-wrap { flex-direction: row; } }
.about-panel { background: rgb(var(--primary)); padding: 48px 32px; order: 1; }
@media (min-width: 768px) { .about-panel { width: 60%; padding: 80px 80px 80px 48px; } }
.about-panel h2 { font-size: 30px; line-height: 36px; font-weight: 500; margin-bottom: 24px; }
@media (min-width: 768px) { .about-panel h2 { font-size: 36px; line-height: 40px; } }
.about-panel .prose p { line-height: 1.75; margin: 0 0 1.25em; }
.about-panel .prose p:last-child { margin-bottom: 0; }
.about-panel .prose ul { list-style: disc; padding-left: 1.5em; }
.about-panel .prose li { margin: .5em 0; }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.2); }
.about-stats li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.about-stats svg { width: 18px; height: 18px; color: rgb(var(--secondary)); flex-shrink: 0; }
.about-img-wrap { position: relative; order: 2; flex-grow: 1; }
@media (min-width: 768px) { .about-img-wrap { width: 40%; flex-basis: 0; } }
.about-img { width: 100%; height: 100%; object-fit: cover; box-shadow: var(--shadow-xl); position: relative; z-index: 10; }
@media (min-width: 768px) { .about-img { position: absolute; top: 16px; left: -24px; height: calc(100% - 32px); } }
.about-badge { position: absolute; z-index: 11; right: 16px; bottom: 16px; background: #fff; color: rgb(var(--primary)); font-size: 13px; font-weight: 800; letter-spacing: .14em; padding: 10px 16px; box-shadow: var(--shadow-lg); }
@media (min-width: 768px) { .about-badge { bottom: 40px; right: 0; } }

/* ---------------------------------------------------------------------
   "Why choose" benefits (custom code block on H2OBros)
   --------------------------------------------------------------------- */
.wcb { position: relative; padding: 80px 20px; background: linear-gradient(135deg, rgba(var(--primary), .03) 0%, rgba(var(--secondary), .05) 100%); overflow: hidden; }
.wcb::before { content: ""; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--d200), .15) 0%, transparent 70%); border-radius: 50%; animation: wcb-float 20s ease-in-out infinite; }
.wcb::after { content: ""; position: absolute; bottom: -30%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(var(--d400), .12) 0%, transparent 70%); border-radius: 50%; animation: wcb-float 25s ease-in-out infinite reverse; }
@keyframes wcb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 30px) scale(1.1); } }
.wcb-container { position: relative; max-width: 1200px; margin: 0 auto; z-index: 2; }
.wcb-header { text-align: center; margin-bottom: 60px; opacity: 0; transform: translateY(30px); animation: wcb-fadeInUp .8s ease forwards; }
@keyframes wcb-fadeInUp { 100% { opacity: 1; transform: translateY(0); } }
.wcb-header h2 { font-size: 2.5rem; line-height: 1.5; font-weight: 700; margin: 0 0 15px; background-image: linear-gradient(135deg, rgb(var(--primary)), rgb(var(--secondary))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wcb-header p { font-size: 1.1rem; line-height: 1.5; color: rgb(var(--d700)); max-width: 600px; margin: 0 auto; }
.wcb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 40px; }
.wcb-card { position: relative; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 20px; padding: 40px 30px; box-shadow: 0 10px 40px rgba(var(--d700), .08); transition: all .4s cubic-bezier(.175, .885, .32, 1.275); opacity: 0; transform: translateY(50px); border: 2px solid transparent; overflow: hidden; }
.wcb-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, rgb(var(--primary)), rgb(var(--secondary))); transform: scaleX(0); transform-origin: left center; transition: transform .5s; }
.wcb-card.is-visible { opacity: 1; transform: translateY(0); }
.wcb-card:nth-child(2) { transition-delay: .1s; }
.wcb-card:nth-child(3) { transition-delay: .2s; }
.wcb-card.is-visible:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 60px rgba(var(--primary), .15); border-color: rgba(var(--primary), .3); transition-delay: 0s; }
.wcb-card:hover::before { transform: scaleX(1); }
.wcb-icon { position: relative; width: 80px; height: 80px; margin: 0 auto 25px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, rgba(var(--primary), .1), rgba(var(--secondary), .15)); transition: all .4s; z-index: 1; }
.wcb-card:hover .wcb-icon { transform: rotate(360deg) scale(1.1); background: linear-gradient(135deg, rgba(var(--primary), .2), rgba(var(--secondary), .25)); }
.wcb-icon::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: linear-gradient(135deg, rgba(var(--primary), .3), rgba(var(--secondary), .3)); opacity: 0; transition: opacity .4s; animation: wcb-pulse 2s ease-in-out infinite; z-index: -1; }
@keyframes wcb-pulse { 0%, 100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.2); opacity: 0; } }
.wcb-card:hover .wcb-icon::before { opacity: 1; }
.wcb-icon i { font-size: 2.2rem; color: rgb(var(--primary)); position: relative; z-index: 10; }
.wcb-card h3 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: rgb(var(--d900)); margin: 0 0 15px; text-align: center; transition: color .3s; }
.wcb-card:hover h3 { color: rgb(var(--primary)); }
.wcb-card p { font-size: 1rem; line-height: 1.7; color: rgb(var(--d700)); text-align: center; }
.wcb-shine { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transition: left .6s; z-index: 0; pointer-events: none; }
.wcb-card:hover .wcb-shine { left: 100%; }
@media (max-width: 768px) {
    .wcb { padding: 60px 15px; }
    .wcb-header h2 { font-size: 2rem; }
    .wcb-header p { font-size: 1rem; }
    .wcb-grid { grid-template-columns: 1fr; gap: 30px; }
    .wcb-card { padding: 35px 25px; }
    .wcb-icon { width: 70px; height: 70px; }
    .wcb-icon i { font-size: 2rem; }
    .wcb-card h3 { font-size: 1.3rem; }
}
@media (max-width: 480px) { .wcb-header h2 { font-size: 1.75rem; } .wcb-card { padding: 30px 20px; } }

/* ---------------------------------------------------------------------
   Dark testimonials (home)
   --------------------------------------------------------------------- */
.testi-dark { position: relative; background: rgb(var(--d900)); padding: 80px 0; }
@media (min-width: 640px) { .testi-dark { padding: 112px 0; } }
.testi-dark-head { max-width: 42rem; margin: 0 auto 48px; text-align: center; }
@media (min-width: 640px) { .testi-dark-head { margin-bottom: 64px; } }
.eyebrow-primary { margin-bottom: 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: rgb(var(--primary)); }
.testi-dark-title { font-size: 30px; line-height: 1.25; font-weight: 800; text-transform: uppercase; letter-spacing: -.025em; }
@media (min-width: 768px) { .testi-dark-title { font-size: 36px; } }
@media (min-width: 1024px) { .testi-dark-title { font-size: 48px; } }
.testi-dark-title span { display: block; color: #fff; }
.testi-dark-title span.accent { color: rgb(var(--primary)); }
.testi-dark-sub { margin: 16px auto 0; max-width: 32rem; font-size: 16px; color: rgba(255,255,255,.5); }
@media (min-width: 768px) { .testi-dark-sub { font-size: 18px; } }
.testi-dark-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .testi-dark-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testi-dark-grid { grid-template-columns: repeat(3, 1fr); } }
.testi-dark-card { display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); padding: 28px; transition: all .3s; }
@media (min-width: 640px) { .testi-dark-card { padding: 32px; } }
.testi-dark-card:hover { border-color: rgba(var(--primary), .3); background: rgba(255,255,255,.06); }
.testi-dark-card .star-row { margin-bottom: 20px; gap: 4px; }
.testi-dark-card .star-row svg { width: 20px; height: 20px; }
.testi-dark-card blockquote { margin-bottom: 24px; line-height: 1.8; color: rgba(255,255,255,.6); }
.testi-dark-card figcaption { margin-top: auto; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; }
.testi-dark .review-btns { margin-top: 80px; justify-content: center; }
.testi-dark-line { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(var(--primary), .6), transparent); }
.testi-dark-glow { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, transparent, rgba(var(--primary), .2), transparent); filter: blur(4px); }

/* ---------------------------------------------------------------------
   Map + service areas
   --------------------------------------------------------------------- */
.map-section { position: relative; border-top: 1px solid rgb(226,232,240); border-bottom: 1px solid rgb(226,232,240); background: #fff; }
@media (min-width: 768px) { .map-section { height: 90vh; min-height: 640px; } }
.map-canvas { height: 16rem; position: relative; z-index: 0; }
@media (min-width: 768px) { .map-canvas { position: absolute; inset: 0; height: 100%; width: 100%; } }
.map-wrap { position: relative; z-index: 10; height: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; pointer-events: none; }
@media (min-width: 640px) { .map-wrap { padding: 0; } }
.map-content { display: flex; height: 100%; width: 100%; align-items: center; }
@media (min-width: 768px) { .map-content { justify-content: flex-end; } }
.map-info { pointer-events: auto; display: flex; flex-direction: column; width: 100%; background: rgba(255,255,255,.7); padding: 48px 0; }
@media (min-width: 768px) { .map-info { width: 33.333%; height: 90%; padding: 32px 24px; backdrop-filter: blur(2px); } }
.map-info-inner { display: flex; flex-direction: column; gap: 16px; height: 100%; width: 100%; }
.map-info-head { position: sticky; top: 0; z-index: 10; }
@media (min-width: 768px) { .map-info-head { background: #fff; padding: 24px 12px; } }
.map-info-head h2 { font-size: 30px; line-height: 36px; font-weight: 700; color: rgb(var(--d900)); }
.map-scroll { flex-grow: 1; overflow-y: auto; }
.area-list { display: flex; flex-direction: column; gap: 8px; }
.area-list li { background: #fff; font-size: 18px; font-weight: 500; color: rgb(var(--d900)); }
.area-list a { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 20px 12px; transition: color .15s; }
.area-list a:hover { color: rgb(var(--primary)); }
.area-list .num { font-weight: 700; color: rgb(var(--primary)); margin-right: 4px; }
.area-list svg { width: 20px; height: 20px; color: rgb(var(--primary)); opacity: 0; transform: translateX(-6px); transition: all .2s; }
.area-list a:hover svg, .area-list a:focus-visible svg { opacity: 1; transform: translateX(0); }
.leaflet-container { font-family: var(--font); background: #aadaff; }
/* Google-style map controls */
.map-type { display: flex; margin: 10px 0 0 10px !important; background: #fff; box-shadow: 0 1px 4px -1px rgba(0,0,0,.3); border-radius: 2px; overflow: hidden; }
.map-type button { padding: 0 17px; height: 40px; font-size: 18px; color: rgb(86, 86, 86); background: #fff; }
.map-type button.active { color: #000; font-weight: 500; }
.map-type button:hover { background: #ebebeb; color: #000; }
.map-type button + button { border-left: 1px solid #e6e6e6; }
.map-full { position: absolute; top: 10px; right: 10px; z-index: 20; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #fff; color: rgb(102, 102, 102); border-radius: 2px; box-shadow: 0 1px 4px -1px rgba(0,0,0,.3); }
.map-full:hover { color: #333; }
.map-full svg { width: 18px; height: 18px; }
.sa-strip-map .map-type button { height: 32px; padding: 0 10px; font-size: 14px; }

/* ---------------------------------------------------------------------
   Featured quote band
   --------------------------------------------------------------------- */
.quote-band { position: relative; overflow: hidden; background: rgb(var(--primary-darker)); padding: 96px 24px; }
@media (min-width: 640px) { .quote-band { padding-left: 48px; padding-right: 48px; } }
@media (min-width: 1024px) { .quote-band { padding-top: 128px; padding-bottom: 128px; } }
.quote-band .container { padding: 0 16px; }
.quote-band blockquote { max-width: 48rem; position: relative; z-index: 10; font-size: 24px; line-height: 1.33; font-weight: 600; letter-spacing: -.025em; color: #fff; }
@media (min-width: 640px) { .quote-band blockquote { font-size: 30px; } }
@media (min-width: 768px) { .quote-band blockquote { font-size: 36px; line-height: 1.25; } }
.quote-band-meta { margin-top: 40px; display: flex; align-items: center; gap: 16px; }
.quote-band-meta .star-row { gap: 4px; }
.quote-band-meta .star-row svg { width: 20px; height: 20px; }
.quote-band-meta p { font-size: 20px; font-weight: 500; color: #fff; }

/* ---------------------------------------------------------------------
   CTA blocks
   --------------------------------------------------------------------- */
/* Home: blue with diagonal shimmer */
.cta-shimmer { position: relative; margin-top: 128px; overflow: hidden; background: rgb(var(--primary)); }
.cta-shimmer::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,.1) 50%, transparent 70%); animation: shimmer 8s ease-in-out infinite; z-index: 5; pointer-events: none; }
.cta-shimmer-inner { position: relative; padding: 80px 24px; }
@media (min-width: 768px) { .cta-shimmer-inner { padding-top: 128px; padding-bottom: 128px; } }
.cta-center { max-width: 42rem; margin: 0 auto; text-align: center; position: relative; z-index: 6; }
.cta-brand { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 20px; }
.cta-title { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; color: #fff; }
@media (min-width: 640px) { .cta-title { font-size: 48px; } }
@media (min-width: 1024px) { .cta-title { font-size: 72px; line-height: 1.05; } }
.cta-sub { margin: 32px auto 0; max-width: 28rem; font-size: 16px; line-height: 2; color: rgba(255,255,255,.8); }
@media (min-width: 768px) { .cta-sub { font-size: 18px; } }
.cta-phone { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 22px; font-weight: 700; color: #fff; }
.cta-phone svg { width: 22px; height: 22px; }
.cta-phone:hover { text-decoration: underline; text-underline-offset: 4px; }
.cta-buttons { margin-top: 32px; display: flex; justify-content: center; }

/* Interior pages: blue with soft shapes */
.cta-shapes { position: relative; overflow: hidden; background: rgb(var(--primary)); }
.cta-shapes > svg { position: absolute; pointer-events: none; }
.cta-shapes .s1 { right: -13rem; bottom: 7rem; width: 429px; height: 429px; }
.cta-shapes .s2 { left: -3.5rem; top: 9rem; width: 429px; height: 429px; }
.cta-shapes .s3 { top: -2.5rem; left: 1.5rem; width: 200px; height: 200px; }
@media (min-width: 640px) {
    .cta-shapes .s1 { bottom: -3rem; right: -12rem; }
    .cta-shapes .s2 { left: -12rem; top: -3rem; }
    .cta-shapes .s3 { top: -9rem; left: 8rem; width: 400px; height: 400px; }
}
.cta-shapes-inner { position: relative; max-width: var(--max); margin: 0 auto; padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; z-index: 5; }
.cta-shapes-text { max-width: 56rem; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.cta-shapes-text h2 { font-size: 24px; line-height: 1.33; font-weight: 800; letter-spacing: -.025em; color: #fff; }
@media (min-width: 768px) { .cta-shapes-text h2 { font-size: 36px; line-height: 1.1; } }
.cta-shapes-text p { line-height: 2; color: #fff; }
@media (min-width: 768px) { .cta-shapes-text p { font-size: 18px; } }

/* Service pages: fixed photo background with blue gradient */
.cta-photo { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 80vh; padding: 48px 16px; background-size: cover; background-position: center; background-attachment: fixed; }
@media (max-width: 1024px) { .cta-photo { background-attachment: scroll; } }
@media (min-width: 640px) { .cta-photo { padding: 0; } }
.cta-photo-grad { position: absolute; inset: 0; background: linear-gradient(rgba(var(--primary), .7) 0%, rgb(var(--primary)) 100%); }
.cta-photo-inner { position: relative; max-width: 56rem; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 0 16px; }
.cta-photo-inner strong { display: block; margin-bottom: 8px; font-size: 36px; line-height: 1.1; font-weight: 900; color: #fff; text-shadow: 0 0 30px rgba(0,0,0,.4); }
@media (min-width: 1024px) { .cta-photo-inner strong { line-height: 1; } }
@media (min-width: 640px) { .cta-photo-inner strong { font-size: 48px; } }
@media (min-width: 768px) { .cta-photo-inner strong { font-size: 60px; } }
@media (min-width: 1024px) { .cta-photo-inner strong { font-size: 72px; } }
.cta-photo-inner p { margin: 24px 0; font-size: 20px; line-height: 1.625; color: #fff; }
@media (min-width: 640px) { .cta-photo-inner p { font-size: 24px; } }
.cta-photo-inner .cta-buttons { margin-top: 40px; }

/* ---------------------------------------------------------------------
   Service page
   --------------------------------------------------------------------- */
.svc-hero { position: relative; height: 600px; padding: 0 16px; overflow: hidden; }
.svc-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-hero-dim { position: absolute; inset: 0; z-index: 1; background: rgb(var(--primary-darker)); opacity: .4; }
.svc-hero-dim2 { position: absolute; inset: 0; z-index: 1; background: rgba(var(--d900), .3); }
.svc-hero-inner { position: relative; z-index: 10; height: 100%; max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 16px; }
@media (min-width: 640px) { .svc-hero-inner { padding: 0; } }
.svc-hero h1 { max-width: 56rem; font-size: 36px; line-height: 1.1; font-weight: 700; color: #fff; }
@media (min-width: 640px) { .svc-hero h1 { font-size: 48px; } }
@media (min-width: 1024px) { .svc-hero h1 { font-size: 72px; line-height: 1; } }
.svc-hero p { margin-bottom: 32px; max-width: 48rem; font-size: 20px; line-height: 28px; color: #fff; }

.svc-details { max-width: var(--max); margin: 0 auto; padding: 64px 16px; }
@media (min-width: 640px) { .svc-details { padding: 96px 0; } }
.svc-details-row { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 0 16px; }
@media (min-width: 768px) { .svc-details-row { flex-direction: row; } }
.svc-side { min-width: 280px; }
@media (min-width: 768px) { .svc-side { order: 2; width: 450px; flex-shrink: 0; } }
.svc-side ul { position: sticky; top: 96px; display: flex; flex-direction: column; }
.svc-side a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgb(226, 232, 240); }
.svc-side a > span { display: flex; align-items: center; gap: 8px; padding-right: 40px; font-weight: 700; color: rgb(var(--d900)); }
.svc-side .dot { width: 8px; height: 8px; flex-shrink: 0; margin-right: 4px; border-radius: 9999px; background: rgb(var(--primary-lighter)); }
.svc-side svg { display: block; width: 20px; height: 20px; flex-shrink: 0; color: rgba(var(--primary-lighter), .4); transition: transform .15s var(--ease), color .15s; }
.svc-side a:hover svg { transform: translateY(4px); color: rgb(var(--primary)); }
.svc-main { flex-grow: 1; min-width: 0; }
@media (min-width: 768px) { .svc-main { order: 1; } }
.svc-main h2 { margin-bottom: 32px; font-size: 24px; line-height: 32px; font-weight: 700; }
.svc-main h2::first-letter { font-size: 36px; }
@media (min-width: 640px) { .svc-main h2 { font-size: 30px; line-height: 36px; } }

.prose { max-width: 56rem; color: rgb(var(--gray-700)); line-height: 1.75; }
.prose p { margin: 1.25em 0; }
.prose > :first-child { margin-top: 0; }
.prose strong { color: rgb(17, 24, 39); font-weight: 600; }
.prose a { color: rgb(17, 24, 39); }
.prose h3 { color: rgb(var(--d900)); font-size: 1.25em; font-weight: 600; margin: 1.6em 0 .6em; line-height: 1.6; }
.prose ul { list-style: disc; padding-left: 1.625em; margin: 1.25em 0; }
.prose li { margin: .5em 0; padding-left: .375em; }
.prose li::marker { color: rgb(209, 213, 219); }
.prose a { color: rgb(var(--primary)); text-decoration: underline; font-weight: 500; }
.prose-lg { font-size: 18px; line-height: 1.78; }

/* Features (what's included) */
.features { position: relative; display: flex; flex-direction: column; gap: 32px; overflow: hidden; background: rgb(var(--primary)); padding: 48px 24px; }
@media (min-width: 768px) { .features { padding: 64px 80px; } }
.features-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.features-bg::after { content: ""; position: absolute; inset: 0; background: rgba(var(--d900), .7); }
.features-head { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.features-head h2 { font-size: 24px; line-height: 32px; font-weight: 700; color: #fff; }
@media (min-width: 640px) { .features-head h2 { font-size: 36px; line-height: 40px; } }
.features-head p { max-width: 36rem; font-size: 18px; color: #fff; }
@media (min-width: 640px) { .features-head p { font-size: 20px; } }
.features-grid { position: relative; z-index: 10; max-width: var(--max); margin: 0 auto; display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .features-grid { grid-template-columns: repeat(4, 1fr); } }
.feature { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; overflow: hidden; padding: 32px; text-align: center; transition: all .3s; }
.feature:hover { background: rgba(255,255,255,.2); backdrop-filter: blur(4px); }
.feature-icon { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; color: #fff; }
.feature-icon svg { width: 100%; height: 100%; fill: currentColor; }
.feature h3 { font-size: 20px; line-height: 28px; font-weight: 400; color: #fff; }

/* Process */
.process { background: #fff; }
.process-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: 32px; padding: 64px 16px; }
@media (min-width: 768px) { .process-inner { gap: 64px; padding: 64px 24px; } }
.process-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.process-head h2 { font-size: 16px; line-height: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: -.025em; color: rgb(var(--d200)); }
@media (min-width: 768px) { .process-head h2 { font-size: 20px; line-height: 24px; } }
.process-head h3 { font-size: 30px; line-height: 40px; font-weight: 700; letter-spacing: -.05em; color: rgb(var(--d900)); }
@media (min-width: 768px) { .process-head h3 { font-size: 48px; line-height: 3.5rem; } }
.process-grid { display: grid; gap: 24px; grid-template-columns: 1fr; width: 100%; }
@media (min-width: 768px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(4, 1fr); } }
.process-step { position: relative; display: flex; flex-direction: column; gap: 80px; min-height: 208px; overflow: hidden; border-radius: 6px; background: rgb(var(--primary)); padding: 24px 32px; color: #fff; }
@media (min-width: 1024px) { .process-step { min-height: 280px; min-width: 240px; padding: 40px; } }
.process-step-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.process-step h4 { flex: 1; font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: -.025em; }
.process-step .n { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.05em; }
@media (min-width: 1024px) { .process-step .n { font-size: 60px; } }
.process-step p { font-size: 16px; line-height: 24px; letter-spacing: -.025em; }

/* FAQ v1 — sticky header + accordion */
.faq-v1 { position: relative; overflow: hidden; background: #fff; }
.faq-v1-deco { pointer-events: none; position: absolute; inset: 0; color: rgb(var(--primary)); }
.faq-v1-deco svg { position: absolute; bottom: 0; left: 0; display: none; }
@media (min-width: 1024px) { .faq-v1-deco svg { display: block; } }
.faq-v1-inner { position: relative; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; padding: 48px 16px; }
@media (min-width: 640px) { .faq-v1-inner { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 768px) { .faq-v1-inner { padding-top: 64px; padding-bottom: 64px; } }
@media (min-width: 1024px) { .faq-v1-inner { min-height: 52rem; } }
@media (min-width: 1280px) { .faq-v1-inner { padding-left: 0; padding-right: 0; } }
.faq-v1-wrap { display: flex; width: 100%; flex-direction: column; gap: 32px; }
@media (min-width: 1024px) { .faq-v1-wrap { flex-direction: row; align-items: center; gap: 40px; } }
.faq-v1-head { position: relative; flex: 1; }
@media (min-width: 1024px) { .faq-v1-head { position: sticky; top: 96px; width: 50%; align-self: flex-start; padding-top: 48px; } }
.faq-v1-head > div { position: relative; z-index: 10; display: flex; max-width: 36rem; flex-direction: column; gap: 16px; }
.faq-v1-over { padding-top: 48px; font-size: 16px; line-height: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: -.025em; color: rgb(var(--gray-500)); }
@media (min-width: 768px) { .faq-v1-over { padding-top: 0; } }
@media (min-width: 1024px) { .faq-v1-over { font-size: 20px; line-height: 24px; } }
.faq-v1-title { font-size: 30px; line-height: 40px; font-weight: 700; letter-spacing: -.025em; color: rgb(17, 24, 39); }
@media (min-width: 1024px) { .faq-v1-title { font-size: 48px; line-height: 3.5rem; } }
.faq-v1-desc { max-width: 28rem; font-size: 20px; line-height: 28px; letter-spacing: -.025em; color: rgb(var(--gray-600)); }
@media (min-width: 1024px) { .faq-v1-desc { font-size: 24px; line-height: 32px; } }
.faq-v1-list { flex: 1; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) { .faq-v1-list { width: 50%; } }
.faq-item { border-radius: 8px; border: 1px solid rgb(var(--gray-300)); background: #fff; transition: background-color .2s, border-color .2s; }
.faq-item:hover, .faq-item.open { border-color: transparent; background: rgb(229, 231, 235); }
.faq-item button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; text-align: left; border-radius: 6px; }
@media (min-width: 768px) { .faq-item button { padding: 20px 24px; } }
.faq-item .q { font-size: 20px; line-height: 32px; font-weight: 600; letter-spacing: -.025em; color: rgb(17, 24, 39); }
@media (min-width: 768px) { .faq-item .q { font-size: 24px; } }
.faq-item .ic { display: flex; width: 28px; height: 28px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: rgb(var(--primary)); padding: 8px; color: #fff; }
@media (min-width: 768px) { .faq-item .ic { width: 32px; height: 32px; } }
.faq-item .ic svg { width: 100%; height: 100%; transition: transform .2s; }
.faq-item.open .ic svg { transform: rotate(180deg); }
.faq-item .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease-out; }
.faq-item.open .a { grid-template-rows: 1fr; }
.faq-item .a > div { overflow: hidden; }
.faq-item .a p { padding: 0 24px 20px; font-size: 16px; line-height: 1.7; color: rgb(var(--gray-700)); }

/* FAQ numbered list */
.faq-num { background: #fff; }
.faq-num-inner { max-width: var(--max); margin: 0 auto; padding: 64px 16px; }
@media (min-width: 640px) { .faq-num-inner { padding: 96px 0; } }
.faq-num-head { max-width: 36rem; margin: 0 auto; text-align: center; }
.faq-num-intro { display: block; font-size: 14px; font-weight: 600; color: rgb(var(--primary)); margin-bottom: 8px; }
.faq-num-head h2 { margin-bottom: 8px; font-size: 24px; line-height: 32px; font-weight: 700; color: rgb(var(--primary-darker)); }
@media (min-width: 640px) { .faq-num-head h2 { font-size: 30px; line-height: 36px; } }
.faq-num-head p { font-size: 20px; color: rgb(var(--d700)); }
.faq-num-list { max-width: 42rem; margin: 0 auto; }
@media (min-width: 640px) { .faq-num-list { margin-top: 24px; } }
.faq-num-list li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgb(226,232,240); padding: 32px 0; }
@media (min-width: 640px) { .faq-num-list li { gap: 32px; } }
.faq-num-list .n { font-size: 30px; font-weight: 900; opacity: .1; letter-spacing: .1em; flex-shrink: 0; }
@media (min-width: 640px) { .faq-num-list .n { font-size: 60px; } }
.faq-num-list > li > div { flex-grow: 1; }
.faq-num-list strong { display: block; margin-bottom: 8px; font-size: 20px; line-height: 28px; letter-spacing: .025em; }
.faq-num-list p { color: rgb(var(--d700)); }

/* Light testimonial carousel */
.testi-light { border-bottom: 1px solid rgb(226,232,240); background: #fff; padding: 64px 0; }
.testi-light-head { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .testi-light-head { padding: 0; } }
.testi-light-head .deco { pointer-events: none; position: absolute; right: 0; top: 0; display: none; width: 136px; height: 136px; }
@media (min-width: 768px) { .testi-light-head .deco { display: block; } }
.testi-light-head > div { text-align: left; max-width: 48rem; }
.testi-light-head h2 { margin-bottom: 16px; font-size: 48px; line-height: 1.25; font-weight: 700; letter-spacing: -.05em; color: rgb(var(--d900)); }
@media (max-width: 640px) { .testi-light-head h2 { font-size: 36px; } }
.testi-light-head p { font-size: 20px; line-height: 1.625; letter-spacing: -.025em; color: rgb(var(--gray-600)); }
.carousel { width: 100%; max-width: var(--max); margin: 0 auto; padding: 32px 0; user-select: none; }
@media (min-width: 1024px) { .carousel { padding: 64px 0; } }
.carousel-viewport { overflow: hidden; cursor: grab; }
.carousel-viewport.dragging { cursor: grabbing; }
.carousel-track { display: flex; padding-left: 6px; will-change: transform; }
.carousel-slide { flex: 0 0 320px; min-width: 0; padding: 0 8px; }
@media (min-width: 768px) { .carousel-slide { flex-basis: 420px; padding: 0 12px; } }
.tcard { margin: 0 auto; display: flex; height: 320px; max-width: 435px; flex-direction: column; justify-content: space-between; padding: 24px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); border: 1px solid rgb(var(--d200)); background: #fff; transition: color .15s, background-color .15s; }
.tcard-top { position: relative; margin-bottom: 16px; }
.tcard-g { position: absolute; right: 0; top: 0; display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 9999px; border: 2px solid rgb(var(--primary)); background: #fff; }
.tcard-g img { width: 16px; height: 16px; }
.tcard .star-row { margin-bottom: 12px; gap: 4px; color: rgb(var(--primary)); }
.tcard .star-row svg { width: 20px; height: 20px; }
.tcard blockquote { margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; line-height: 24px; letter-spacing: -.025em; color: rgb(var(--d900)); }
.tcard figcaption { font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -.025em; color: rgb(var(--d900)); }
.testi-light.is-blue .tcard { background: rgb(var(--primary)); border-color: rgb(var(--primary)); }
.testi-light.is-blue .tcard .star-row { color: #fff; }
.testi-light.is-blue .tcard blockquote, .testi-light.is-blue .tcard figcaption { color: rgb(249, 250, 251); }
.testi-light .review-btns { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .testi-light .review-btns { padding: 0; } }

/* ---------------------------------------------------------------------
   Free-form text sections
   --------------------------------------------------------------------- */
.freeform { background: #fff; }
.freeform-inner { max-width: var(--max); margin: 0 auto; padding: 48px 16px; }
@media (min-width: 640px) { .freeform-inner { padding-left: 0; padding-right: 0; } }
@media (min-width: 768px) { .freeform-inner { padding-top: 80px; padding-bottom: 80px; } }
.freeform-content { max-width: 48rem; margin: 0 auto; }
.freeform h2 { margin-bottom: 40px; font-size: 24px; line-height: 32px; font-weight: 700; color: rgb(var(--d900)); }
@media (min-width: 640px) { .freeform h2 { font-size: 36px; line-height: 40px; } }
.freeform .prose { color: rgb(var(--d900)); }
.freeform + .freeform .freeform-inner { padding-top: 0; }

/* Page title strip (contact / faq) */
.page-title { padding: 2rem 1rem; text-align: center; }
.page-title h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; color: rgb(var(--primary)); }
.page-title p { margin-top: 10px; color: rgb(var(--d700)); font-size: 18px; }
@media (max-width: 480px) { .page-title { padding: 1.5rem 1rem; } }

/* ---------------------------------------------------------------------
   About page
   --------------------------------------------------------------------- */
.ab-hero { background: #fff; padding: 64px 24px; }
@media (min-width: 1280px) { .ab-hero { padding-left: 0; padding-right: 0; } }
.ab-hero-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) { .ab-hero-grid { grid-template-columns: repeat(2, 1fr); } }
.ab-hero-media { position: relative; order: 2; }
@media (min-width: 1024px) { .ab-hero-media { order: 1; } }
.ab-hero-media img { width: 100%; height: 100%; object-fit: cover; box-shadow: var(--shadow-2xl); outline: 1px solid rgba(var(--d900), .1); }
@media (min-width: 768px) { .ab-hero-media img { height: 700px; } }
.ab-hero-rating { position: absolute; z-index: 10; left: 28px; right: 28px; bottom: 28px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 10rem; background: rgba(255,255,255,.9); padding: 20px; backdrop-filter: blur(4px); }
@media (min-width: 1024px) { .ab-hero-rating { justify-content: center; padding: 12px; } }
.ab-hero-rating > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; }
@media (min-width: 1024px) { .ab-hero-rating > div { flex-direction: row; align-items: center; gap: 56px; } }
.ab-hero-rating .col { display: flex; flex-direction: column; gap: 6px; }
.ab-hero-rating a { font-weight: 600; line-height: 1.2; }
.ab-hero-rating .big { font-size: 24px; font-weight: 600; line-height: 1.1; }
.ab-hero-text { order: 1; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
@media (min-width: 1024px) { .ab-hero-text { order: 2; max-width: 36rem; } }
.ab-hero-text h1 { font-size: 36px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
@media (min-width: 640px) { .ab-hero-text h1 { font-size: 48px; } }
@media (min-width: 1024px) { .ab-hero-text h1 { font-size: 60px; } }
.ab-hero-text p { font-size: 18px; line-height: 1.5; }
.ab-hero-text .btn-hero-secondary { color: rgb(var(--primary)); border-color: rgb(var(--primary)); }

.creds { position: relative; z-index: 20; margin: -80px 0 48px; padding: 0 16px; }
.creds-box { position: relative; max-width: var(--max); margin: 0 auto; border-bottom: 4px solid rgb(var(--primary)); border-right: 4px solid rgb(var(--primary)); background: #fff; padding: 24px 20px; box-shadow: var(--shadow-xl); }
@media (min-width: 1024px) { .creds-box { padding: 40px 96px 40px 56px; } }
.creds-row { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 32px; }
@media (min-width: 1024px) { .creds-row { flex-direction: row; gap: 64px; } }
.creds-head { display: flex; width: 100%; flex-direction: column; gap: 4px; border-bottom: 2px solid rgb(var(--secondary)); padding-bottom: 16px; text-align: center; }
@media (min-width: 1024px) { .creds-head { max-width: 317px; border-bottom: 0; border-right: 2px solid rgb(var(--secondary)); padding: 0 32px 0 0; text-align: left; } }
.creds-head h2 { font-size: 30px; line-height: 36px; font-weight: 600; color: rgb(var(--d900)); }
.creds-head p { color: rgb(var(--d700)); }
.creds-grid { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 24px 56px; }
@media (min-width: 768px) { .creds-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .creds-grid { margin-left: auto; gap: 24px 72px; } }
.cred { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 14px; font-weight: 600; color: rgb(var(--d900)); }
.cred i { font-size: 34px; color: rgb(var(--primary)); }

/* ---------------------------------------------------------------------
   Blue hero with grid (maintenance plans / careers)
   --------------------------------------------------------------------- */
.blue-hero { position: relative; overflow: hidden; background: rgb(var(--primary)); color: #fff; padding: 80px 0; }
@media (min-width: 768px) { .blue-hero { padding: 64px 0; } }
@media (min-width: 1024px) { .blue-hero { padding: 128px 0 112px; } }
.blue-hero-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column-reverse; align-items: center; justify-content: space-between; gap: 80px; padding: 0 32px; }
@media (min-width: 1024px) { .blue-hero-inner { flex-direction: row; gap: 24px; padding-right: 96px; } }
@media (min-width: 1280px) { .blue-hero-inner { padding-left: 0; } }
.blue-hero-grid { position: absolute; left: 0; top: 0; width: 1000px; opacity: .5; display: none; color: rgba(255,255,255,.12); }
@media (min-width: 1024px) { .blue-hero-grid { display: block; } }
.blue-hero-text { position: relative; z-index: 10; display: flex; max-width: 32rem; flex-direction: column; gap: 32px; }
.blue-hero-text h1 { font-size: 36px; line-height: 1.1; font-weight: 700; }
@media (min-width: 768px) { .blue-hero-text h1 { font-size: 60px; } }
@media (min-width: 1024px) { .blue-hero-text h1 { font-size: 72px; line-height: 1.02; } }
.blue-hero-text p { font-size: 20px; letter-spacing: -.025em; opacity: .8; }
@media (min-width: 1024px) { .blue-hero-text p { font-size: 24px; } }
.blue-hero-media { position: relative; z-index: 10; width: 100%; }
@media (min-width: 640px) { .blue-hero-media { max-width: 75%; } }
@media (min-width: 1024px) { .blue-hero-media { height: 584px; width: 476px; } }
.blue-hero-media video, .blue-hero-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 476 / 584; }
.blue-hero-rating { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); display: flex; flex-direction: column; gap: 4px; background: #fff; padding: 16px; text-align: center; color: rgb(var(--d900)); white-space: nowrap; box-shadow: var(--shadow-lg); }
@media (min-width: 1024px) { .blue-hero-rating { left: auto; right: -80px; bottom: auto; top: 112px; transform: none; } }
.blue-hero-rating img { margin: 0 auto; width: 24px; height: 24px; }
.blue-hero-rating .star-row { margin: 0 auto; gap: 4px; }
.video-ctrl { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: inline-flex; gap: 16px; padding: 12px 20px; background: rgba(var(--d900), .6); backdrop-filter: blur(4px); }
.video-ctrl button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff; transition: background .2s; }
.video-ctrl button:hover { background: rgba(255,255,255,.1); }
.video-ctrl svg { width: 20px; height: 20px; }

/* Maintenance plans custom blocks */
.mp-container { max-width: 1400px; margin: 0 auto; padding: 60px 20px; }
.mp-title { text-align: center; font-size: 2.5rem; line-height: 1.2; font-weight: 700; margin-bottom: 1rem; color: rgb(var(--d900)); }
.mp-sub { text-align: center; font-size: 1.125rem; line-height: 1.6; color: rgb(var(--d700)); max-width: 700px; margin: 0 auto 3rem; }
.mp-how { background: rgb(var(--d50)); padding: 60px 0; }
.mp-how .mp-container { padding-top: 0; padding-bottom: 0; }
.mp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 3rem; }
.mp-step { background: #fff; padding: 2rem; box-shadow: 0 4px 6px rgba(0,0,0,.05); transition: transform .3s ease, box-shadow .3s ease; }
.mp-step:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.mp-step-icon { width: 80px; height: 80px; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; background: rgba(var(--primary), .08); color: rgb(var(--primary)); font-size: 34px; }
.mp-step h3 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: rgb(var(--d900)); margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 2px solid rgb(var(--d200)); }
.mp-step p { font-size: 1rem; line-height: 1.6; color: rgb(var(--d700)); }
.mp-guarantee { background: rgb(var(--primary)); padding: 60px 0; text-align: center; }
.mp-guarantee .mp-container { padding-top: 0; padding-bottom: 0; }
.mp-guarantee .mp-title { color: #fff; }
.mp-guarantee .mp-sub { color: rgba(255,255,255,.9); font-size: 1.25rem; margin-bottom: 0; }
.mp-pricing { padding: 60px 0; }
.mp-pricing .mp-container { padding-top: 0; padding-bottom: 0; }
.mp-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin: 3rem auto 0; max-width: 900px; }
.mp-price-card { background: #fff; border: 2px solid rgb(var(--d200)); padding: 2.5rem; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; display: flex; flex-direction: column; }
.mp-price-card:hover { transform: translateY(-8px); border-color: rgb(var(--primary)); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.mp-price-card h3 { font-size: 1.75rem; font-weight: 700; color: rgb(var(--d900)); margin-bottom: 2rem; text-align: center; }
.mp-price-list { margin: 0 0 2rem; flex-grow: 1; }
.mp-price-list li { padding: 1rem 0; border-bottom: 1px solid rgb(var(--d100)); color: rgb(var(--d700)); }
.mp-price-list li:last-child { border-bottom: 0; }
.mp-price-cta { display: block; width: 100%; padding: 1rem 2rem; background: rgb(var(--primary)); color: #fff; font-weight: 600; text-align: center; transition: background .3s ease, transform .2s ease; }
.mp-price-cta:hover { background: rgb(var(--secondary)); transform: scale(1.05); }
@media (max-width: 1200px) { .mp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .mp-title { font-size: 2rem; } .mp-container { padding: 40px 20px; } .mp-steps { grid-template-columns: 1fr; gap: 1.5rem; } .mp-price-grid { grid-template-columns: 1fr; } }

/* Contact block (image + form card) */
.contact-v2 { position: relative; overflow: hidden; }
.contact-v2-row { display: flex; flex-direction: column; align-items: stretch; }
@media (min-width: 1024px) { .contact-v2-row { flex-direction: row; max-width: var(--max); margin: 0 auto; } }
.contact-v2-left { position: relative; display: flex; min-height: 478px; flex-basis: 100%; flex-direction: column; padding: 32px 16px; }
@media (min-width: 1024px) { .contact-v2-left { min-height: 0; flex-basis: 60%; padding: 64px 48px 64px 32px; } }
@media (min-width: 1280px) { .contact-v2-left { padding: 80px 64px 80px 48px; } }
.contact-v2-left > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-v2-left::after { content: ""; position: absolute; inset: 0; background: rgba(71, 85, 105, .7); }
@media (min-width: 1024px) { .contact-v2-left > img, .contact-v2-left::after { left: -100vw; } }
.contact-v2-copy { position: relative; z-index: 10; display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 24px; }
@media (min-width: 1024px) { .contact-v2-copy { align-items: flex-start; text-align: left; gap: 16px; } }
.contact-v2-rating { display: flex; align-items: center; gap: 8px; }
@media (min-width: 1024px) { .contact-v2-rating { margin-bottom: 24px; } }
.contact-v2-rating img { width: 16px; height: 16px; }
.contact-v2-rating a { font-size: 14px; font-weight: 500; color: #fff; }
.contact-v2-copy h2 { padding-top: 32px; font-size: 36px; line-height: 1.25; font-weight: 800; letter-spacing: -.025em; color: #fff; }
@media (min-width: 1024px) { .contact-v2-copy h2 { padding-top: 0; font-size: 60px; letter-spacing: -.05em; } }
.contact-v2-copy p { max-width: 28rem; font-size: 20px; line-height: 28px; letter-spacing: -.025em; color: #fff; }
@media (min-width: 1024px) { .contact-v2-copy p { max-width: none; font-size: 24px; line-height: 32px; } }
.contact-v2-right { position: relative; flex-basis: 40%; }
@media (min-width: 1024px) { .contact-v2-right { max-width: 463px; } }
.contact-v2-right::before { content: ""; position: absolute; inset: 0; right: -100vw; background: rgb(var(--primary)); }
.contact-v2-card-wrap { position: relative; z-index: 20; padding: 32px 16px; }
@media (min-width: 1024px) { .contact-v2-card-wrap { margin-left: -64px; padding: 48px 32px; } }
@media (min-width: 1280px) { .contact-v2-card-wrap { margin-left: -112px; padding: 64px 48px; } }

.form-card { position: relative; background: #fff; padding: 24px; box-shadow: var(--shadow-xl); }
@media (min-width: 1280px) { .form-card { padding: 32px; } }
.form-card h3 { margin-bottom: 24px; font-size: 24px; font-weight: 700; color: rgb(var(--primary)); }
@media (min-width: 1024px) { .form-card h3 { font-size: 30px; } }
.field { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; }
.field label { font-size: 14px; color: rgb(var(--d900)); }
.field .req { margin-left: 2px; color: rgb(239, 68, 68); }
.field input, .field select, .field textarea {
    width: 100%; padding: 12px; border: 1px solid rgb(var(--gray-300)); background: #fff;
    border-radius: var(--radius); font-size: 16px; color: rgb(var(--d900));
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border: 2px solid rgb(17, 24, 39); padding: 11px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: rgb(239,68,68); }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.5; color: rgb(var(--d700)); padding-bottom: 12px; }
.consent input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: rgb(var(--primary)); }
.form-msg-box { display: none; padding: 12px 14px; font-size: 14px; margin-bottom: 12px; }
.form-msg-box.error { display: block; background: rgb(254, 242, 242); color: rgb(185, 28, 28); }
.form-msg-box.success { display: block; background: rgb(240, 253, 244); color: rgb(21, 128, 61); }
.form-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: rgb(var(--primary)); color: #fff; padding: 14px 20px; font-weight: 600; transition: background .2s, transform .2s; }
.form-submit:hover { background: rgb(var(--primary-darker)); transform: translateY(-2px); }
.form-submit:disabled { opacity: .6; transform: none; cursor: wait; }

/* ---------------------------------------------------------------------
   Service area (city) pages
   --------------------------------------------------------------------- */
.sa-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle, rgb(var(--primary-lighter)), rgb(var(--primary-darker))); }
@media (min-width: 768px) { .sa-hero { padding: 96px 0; } }
@media (min-width: 1024px) { .sa-hero { display: flex; height: 600px; align-items: center; padding: 0; } }
.sa-hero > img { position: relative; height: 12rem; width: 100%; object-fit: cover; }
@media (min-width: 768px) { .sa-hero > img { position: absolute; inset: 0 auto 0 0; height: 100%; width: 50%; } }
.sa-hero-container { max-width: var(--max); margin: 0 auto; display: flex; width: 100%; }
.sa-hero-spacer { display: none; }
@media (min-width: 768px) { .sa-hero-spacer { display: block; width: 50%; } }
.sa-hero-content { width: 100%; padding: 32px 16px; text-align: center; }
@media (min-width: 768px) { .sa-hero-content { width: 50%; padding: 0 16px 0 32px; text-align: left; } }
.sa-hero h1 { margin-bottom: 24px; font-size: 36px; line-height: 40px; font-weight: 800; }
@media (min-width: 768px) { .sa-hero h1 { font-size: 48px; line-height: 1; } }
.sa-hero p { margin-bottom: 64px; line-height: 24px; letter-spacing: -.025em; }
@media (min-width: 768px) { .sa-hero p { margin-bottom: 0; font-size: 20px; line-height: 28px; opacity: .8; } }
.sa-strip { position: relative; z-index: 10; margin-top: -48px; display: grid; max-width: 100%; overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); }
.sa-strip > * + * { border-top: 1px solid rgb(226,232,240); }
@media (min-width: 768px) {
    .sa-strip { margin-left: 16px; margin-right: 16px; height: 14rem; grid-template-columns: repeat(3, 1fr); box-shadow: var(--shadow-2xl); }
    .sa-strip > * + * { border-top: 0; border-left: 1px solid rgb(226,232,240); }
}
@media (min-width: 1024px) { .sa-strip { margin-left: 32px; margin-right: 32px; } }
@media (min-width: 1280px) { .sa-strip { margin: -48px auto 0; max-width: 72rem; } }
.sa-strip-item { display: flex; height: 12rem; flex-direction: column; align-items: center; justify-content: center; }
@media (min-width: 768px) { .sa-strip-item { height: auto; } }
.sa-strip-item svg { margin-bottom: 24px; width: 32px; height: 32px; color: rgb(var(--primary)); }
.sa-strip-item strong { margin-bottom: 4px; font-size: 18px; font-weight: 500; }
.sa-strip-item a, .sa-strip-item button { font-weight: 500; color: rgb(var(--primary)); }
.sa-strip-item a:hover, .sa-strip-item button:hover { text-decoration: underline; }
.sa-strip-map { height: 12rem; }
@media (min-width: 768px) { .sa-strip-map { height: 100%; } }

/* ---------------------------------------------------------------------
   Reviews page
   --------------------------------------------------------------------- */
.rv-page { position: relative; min-height: 100vh; overflow: hidden; background: #fff; }
.rv-glow1 { pointer-events: none; position: absolute; left: 0; right: 0; top: 0; height: 70%; background: linear-gradient(to bottom, rgba(var(--primary-lighter), .25), rgba(var(--primary-lighter), .08), transparent); }
.rv-glow2 { pointer-events: none; position: absolute; inset: 0; background: radial-gradient(700px 500px at 50% 10%, rgba(var(--primary), .06), transparent, transparent); }
.rv-head { position: relative; z-index: 10; padding: 80px 16px 48px; }
@media (min-width: 640px) { .rv-head { padding: 112px 0 64px; } }
.rv-head-inner { max-width: 48rem; margin: 0 auto; text-align: center; }
.rv-pill { display: inline-block; margin-bottom: 24px; border-radius: 9999px; border: 1px solid rgba(var(--primary), .2); background: rgba(var(--primary), .06); padding: 6px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: rgb(var(--primary)); }
.rv-head h1 { font-size: 36px; line-height: 1.25; font-weight: 800; letter-spacing: -.025em; color: rgb(var(--d900)); }
@media (min-width: 768px) { .rv-head h1 { font-size: 48px; } }
@media (min-width: 1024px) { .rv-head h1 { font-size: 60px; } }
.rv-stats { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }
@media (min-width: 640px) { .rv-stats { gap: 32px; } }
.rv-stats span { font-size: 16px; font-weight: 500; color: rgba(var(--d900), .4); }
.rv-stats .sep { width: 1px; height: 16px; background: rgba(var(--d900), .1); }
.rv-stats .item { display: flex; align-items: center; gap: 8px; }
.rv-head .review-btns { justify-content: center; margin-top: 32px; }
.rv-body { position: relative; z-index: 10; padding: 0 16px 96px; }
@media (min-width: 640px) { .rv-body { padding: 0 0 128px; } }
#reviewsGrid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { #reviewsGrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
    #reviewsGrid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    #reviewsGrid > .review-card:nth-child(6n+1), #reviewsGrid > .review-card:nth-child(6n) { grid-column: span 2; }
}
.review-card { display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,.06); background: #fff; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: all .3s; }
@media (min-width: 640px) { .review-card { padding: 28px; } }
.review-card:hover { border-color: rgba(var(--primary), .2); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.review-photo-wrapper { margin: -24px -24px 20px; aspect-ratio: 16 / 10; overflow: hidden; background: rgb(var(--d50)); }
@media (min-width: 640px) { .review-photo-wrapper { margin: -28px -28px 20px; } }
.review-photo { width: 100%; height: 100%; object-fit: cover; }
.review-stars { display: flex; gap: 2px; margin-bottom: 16px; color: rgb(var(--star)); font-size: 13px; }
.review-card blockquote { flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.625; color: rgba(var(--d900), .6); }
.review-card blockquote:not(:empty)::before { content: "\201C\00a0"; }
.review-card blockquote:not(:empty)::after { content: "\00a0\201D"; }
.review-divider { margin: 20px 0 16px; height: 1px; background: linear-gradient(to right, rgba(0,0,0,.06), rgba(0,0,0,.03), transparent); }
.review-author { display: flex; align-items: center; justify-content: space-between; }
.review-author-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.review-avatar { display: flex; width: 32px; height: 32px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(var(--primary), .08); font-size: 12px; font-weight: 700; text-transform: uppercase; color: rgb(var(--primary)); }
.review-name { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(var(--d900), .7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-google-logo img { width: 56px; height: auto; opacity: .5; transition: opacity .3s; }
.review-card:hover .review-google-logo img { opacity: .7; }

/* Leave a review */
.lr-card { max-width: 40rem; margin: 0 auto; border: 1px solid rgba(0,0,0,.06); background: #fff; padding: 32px 24px; box-shadow: var(--shadow-xl); }
@media (min-width: 640px) { .lr-card { padding: 40px; } }
.lr-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgb(var(--primary)); margin-bottom: 20px; }
.lr-back:hover { text-decoration: underline; }
.lr-form-header { text-align: center; margin-bottom: 24px; }
.lr-stars-display { display: inline-flex; gap: 6px; font-size: 22px; color: rgb(var(--star)); }
.lr-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.lr-field > label { font-size: 14px; font-weight: 600; color: rgb(var(--d900)); }
.lr-field input[type="text"] { width: 100%; padding: 12px; border: 1px solid rgb(var(--gray-300)); }
.lr-field input[type="text"]:focus { outline: none; border: 2px solid rgb(17,24,39); padding: 11px; }
.lr-rating-picker { display: flex; gap: 6px; }
.lr-star { width: 44px; height: 44px; font-size: 26px; color: rgb(var(--d200)); transition: transform .15s, color .15s; }
.lr-star.active, .lr-star.hovered { color: rgb(var(--star)); }
.lr-star:hover { transform: scale(1.12); }
.lr-rating-label { font-size: 14px; color: rgb(var(--d400)); }
.lr-rating-label.has-value { color: rgb(var(--primary)); font-weight: 600; }
.lr-rating-error { font-size: 14px; color: rgb(185, 28, 28); }
.lr-photo-area { position: relative; border: 2px dashed rgb(var(--d200)); background: rgb(var(--d50)); min-height: 140px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, background .2s; }
.lr-photo-area:hover, .lr-photo-area.dragover { border-color: rgb(var(--primary)); background: rgba(var(--primary), .04); }
.lr-photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgb(var(--d400)); font-size: 14px; }
.lr-photo-placeholder i { font-size: 28px; color: rgb(var(--primary)); }
.lr-photo-preview { position: relative; width: 100%; }
.lr-photo-preview img { width: 100%; max-height: 260px; object-fit: cover; }
.lr-photo-remove { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; background: rgba(var(--d900), .7); color: #fff; }
.lr-photo-hint { font-size: 12px; color: rgb(var(--d400)); }
.lr-submit-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: rgb(var(--primary)); color: #fff; padding: 14px 20px; font-weight: 600; transition: background .2s; }
.lr-submit-btn:hover:not(:disabled) { background: rgb(var(--primary-darker)); }
.lr-submit-btn:disabled { opacity: .6; cursor: wait; }
.lr-msg { display: none; margin-top: 16px; padding: 12px 14px; font-size: 14px; }
.lr-msg.error { display: block; background: rgb(254, 242, 242); color: rgb(185, 28, 28); }
.lr-msg.success { display: none; }
.lr-success { text-align: center; padding: 24px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lr-success i { font-size: 48px; color: rgb(22, 163, 74); }
.lr-success h3 { font-size: 28px; font-weight: 700; color: rgb(var(--d900)); }
.lr-back-btn { margin-top: 8px; display: inline-flex; padding: 12px 28px; background: rgb(var(--primary)); color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------------
   Gallery page
   --------------------------------------------------------------------- */
.gl-section { width: 100%; padding: 60px 20px; background: rgb(var(--d50)); }
.gl-section.is-white { background: #fff; }
.gl-container { max-width: 1200px; margin: 0 auto; }
.gl-header { text-align: center; margin-bottom: 40px; }
.gl-header h1, .gl-header h2 { font-size: 2.5rem; line-height: 1.2; font-weight: 700; color: rgb(var(--primary)); margin: 0; }
.gl-header p { margin: 12px auto 0; max-width: 36rem; font-size: 18px; color: rgb(var(--d700)); }
@media (max-width: 640px) { .gl-header h1, .gl-header h2 { font-size: 2rem; } }

/* Before/after (markup rendered by js/before-after.js) */
.ba-container { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .ba-container { grid-template-columns: repeat(2, 1fr); } }
.ba-item { background: #fff; box-shadow: var(--shadow); }
.ba-slider-wrapper { position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: ew-resize; user-select: none; touch-action: pan-y; background: rgb(var(--d100)); }
.ba-slider-wrapper img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-slider-label { position: absolute; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ba-label-before { left: 14px; background: rgba(var(--d900), .75); color: #fff; }
.ba-label-after { right: 14px; background: rgba(255,255,255,.92); color: rgb(var(--primary)); }
.ba-slider-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; padding: 6px 14px; font-size: 13px; color: #fff; background: rgba(var(--d900), .6); white-space: nowrap; transition: opacity .3s; pointer-events: none; }
.ba-slider-wrapper.initialized .ba-slider-hint { opacity: 0; }
.ba-slider-handle { position: absolute; top: 0; bottom: 0; z-index: 4; width: 0; pointer-events: none; }
.ba-slider-line { position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.35); }
.ba-slider-btn { position: absolute; top: 50%; width: 44px; height: 44px; margin-left: -22px; margin-top: -22px; border-radius: 9999px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.ba-handle .ba-slider-btn { left: 0 !important; }
.ba-slider-handle .ba-slider-btn { left: 0 !important; }
.ba-details { padding: 20px 24px; }
.ba-details h3 { font-size: 20px; font-weight: 700; color: rgb(var(--d900)); text-transform: capitalize; }
.ba-details p { margin-top: 6px; color: rgb(var(--d700)); line-height: 1.6; }

/* Photo marquee (markup rendered by js/gallery.js) */
.gallery-marquee-wrap { overflow: hidden; display: flex; flex-direction: column; gap: 16px; }
.gallery-marquee-track { display: flex; width: max-content; animation-timing-function: linear; animation-iteration-count: infinite; }
.gallery-marquee-track.paused { animation-play-state: paused; }
.gallery-marquee-track .gallery-item { flex-shrink: 0; width: 400px; height: 280px; margin-right: 16px; overflow: hidden; cursor: pointer; background: #fff; box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease; }
.gallery-marquee-track .gallery-item:hover { transform: scale(1.04); box-shadow: var(--shadow-xl); }
.gallery-img-wrap { position: relative; width: 100%; height: 100%; }
.gallery-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.gallery-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--primary), .45); opacity: 0; transition: opacity .3s ease; }
.gallery-item:hover .gallery-overlay, .gallery-item:focus-visible .gallery-overlay { opacity: 1; }
.gallery-overlay i { color: #fff; font-size: 24px; }
@keyframes marqueeLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marqueeRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@media (max-width: 768px) { .gallery-marquee-track .gallery-item { width: 320px; height: 225px; } }

/* Lightboxes */
.gallery-lightbox { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; flex-direction: column; background: rgba(var(--d900), .94); }
.gallery-lightbox img { max-width: 90%; max-height: 80vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,.1); font-size: 20px; transition: background .2s; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.2); }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-caption { margin-top: 16px; color: rgba(255,255,255,.85); font-size: 15px; text-align: center; padding: 0 20px; }

/* Work video (gallery page) */
.video-container { position: relative; max-width: 1000px; margin: 0 auto; background: #000; box-shadow: var(--shadow-2xl); overflow: hidden; }
.video-container video { width: 100%; max-height: 560px; display: block; object-fit: cover; }
.video-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); font-size: 14px; pointer-events: none; }
.video-controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); transition: opacity .3s; }
.video-progress-bar { height: 4px; background: rgba(255,255,255,.25); cursor: pointer; margin-bottom: 10px; }
.video-progress-filled { height: 100%; width: 0; background: rgb(var(--secondary)); }
.video-buttons { display: flex; align-items: center; gap: 12px; color: #fff; }
.video-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #fff; }
.video-btn:hover { background: rgba(255,255,255,.12); }
.video-time { font-size: 13px; flex-grow: 1; }
@media (max-width: 768px) { .video-container video { max-height: 320px; } }

/* ---------------------------------------------------------------------
   Contact page form (markup + ids used by js/contact.js)
   --------------------------------------------------------------------- */
.contact-page { background: rgb(var(--d50)); padding: 48px 16px 80px; }
.quote-form-card { max-width: 56rem; margin: 0 auto; background: #fff; padding: 24px; box-shadow: var(--shadow-xl); border-bottom: 4px solid rgb(var(--primary)); }
@media (min-width: 768px) { .quote-form-card { padding: 40px; } }
.quote-form-card > h2 { font-size: 30px; font-weight: 700; color: rgb(var(--primary)); margin-bottom: 24px; }
.qf-section { padding-bottom: 8px; margin-bottom: 16px; }
.qf-row { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
@media (min-width: 640px) { .qf-row { grid-template-columns: repeat(2, 1fr); } .qf-row > .qf-field:only-child, .qf-field-full { grid-column: 1 / -1; } }
.qf-field { display: flex; flex-direction: column; gap: 6px; }
.qf-field label { font-size: 14px; color: rgb(var(--d900)); }
.qf-required { color: rgb(239, 68, 68); }
.qf-input-wrap { position: relative; }
.qf-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgb(var(--d400)); font-size: 14px; pointer-events: none; }
.qf-input-wrap input, .qf-input-wrap select { width: 100%; padding: 12px 12px 12px 40px; border: 1px solid rgb(var(--gray-300)); background: #fff; font-size: 16px; appearance: none; -webkit-appearance: none; }
.qf-input-wrap input[readonly] { background: rgb(var(--d50)); color: rgb(var(--d700)); }
.qf-input-wrap input:focus, .qf-input-wrap select:focus { outline: none; border: 2px solid rgb(17,24,39); padding: 11px 11px 11px 39px; }
.qf-select-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: rgb(var(--d400)); pointer-events: none; }
.qf-input-wrap.qf-error input, .qf-input-wrap.qf-error select, .qf-error input, .qf-error select { border-color: rgb(239, 68, 68); }
.qf-service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .qf-service-grid { grid-template-columns: repeat(3, 1fr); } }
.qf-checkbox-card { position: relative; display: block; cursor: pointer; }
.qf-checkbox-card input { position: absolute; opacity: 0; pointer-events: none; }
.qf-checkbox-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; border: 1px solid rgb(var(--d200)); background: #fff; text-align: center; font-size: 14px; font-weight: 600; color: rgb(var(--d900)); transition: all .2s; }
.qf-checkbox-card:hover .qf-checkbox-inner { border-color: rgb(var(--primary)); }
.qf-checkbox-icon { font-size: 22px; color: rgb(var(--primary)); }
.qf-checkbox-mark { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; background: rgb(var(--primary)); opacity: 0; transition: opacity .2s; }
.qf-checkbox-card input:checked + .qf-checkbox-inner { border-color: rgb(var(--primary)); background: rgba(var(--primary), .05); box-shadow: inset 0 0 0 1px rgb(var(--primary)); }
.qf-checkbox-card input:checked + .qf-checkbox-inner .qf-checkbox-mark { opacity: 1; }
.qf-checkbox-card input:focus-visible + .qf-checkbox-inner { outline: 2px solid rgb(var(--primary-lighter)); outline-offset: 2px; }
.qf-consent-group { display: flex; flex-direction: column; gap: 12px; }
.qf-consent-check, .cm-consent-check { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 13px; line-height: 1.55; color: rgb(var(--d700)); }
.qf-consent-check input, .cm-consent-check input { position: absolute; opacity: 0; pointer-events: none; }
.qf-consent-box, .cm-consent-box { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; display: flex; align-items: center; justify-content: center; border: 1px solid rgb(var(--gray-300)); background: #fff; color: transparent; font-size: 11px; transition: all .15s; }
.qf-consent-check input:checked + .qf-consent-box, .cm-consent-check input:checked + .cm-consent-box { background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: #fff; }
.qf-consent-check input:focus-visible + .qf-consent-box, .cm-consent-check input:focus-visible + .cm-consent-box { outline: 2px solid rgb(var(--primary-lighter)); outline-offset: 2px; }
.qf-consent-check.qf-error .qf-consent-box { border-color: rgb(239,68,68); }
.qf-privacy-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 16px; background: rgb(var(--d50)); font-size: 13px; line-height: 1.55; color: rgb(var(--d700)); }
.qf-privacy-notice i { color: rgb(var(--primary)); margin-top: 3px; }
.qf-msg { display: none; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
.qf-msg.error { display: block; background: rgb(254,242,242); color: rgb(185,28,28); }
.qf-msg.success { display: block; background: rgb(240,253,244); color: rgb(21,128,61); }
.qf-submit-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: rgb(var(--primary)); color: #fff; padding: 16px 20px; font-size: 16px; font-weight: 600; transition: background .2s, transform .2s; }
.qf-submit-btn:hover:not(:disabled) { background: rgb(var(--primary-darker)); transform: translateY(-2px); }
.qf-submit-btn:disabled { opacity: .6; cursor: wait; }

/* Careers (markup + ids used by js/careers.js) */
.careers { background: #fff; padding: 64px 16px 96px; }
.careers-layout { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .careers-layout { grid-template-columns: 1fr 1fr; gap: 64px; } }
.careers-left h2 { margin-bottom: 24px; font-size: 30px; font-weight: 700; color: rgb(var(--d900)); }
.looking-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.looking-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; color: rgb(var(--d700)); }
.looking-list i { color: rgb(var(--primary)); margin-top: 5px; }
.position-card { border: 2px solid rgb(var(--d200)); padding: 32px; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.position-card:hover { transform: translateY(-5px); border-color: rgb(var(--primary)); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.position-badge { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgb(var(--primary)); margin-bottom: 10px; }
.position-card h3 { font-size: 24px; font-weight: 700; color: rgb(var(--d900)); margin-bottom: 16px; padding-bottom: 16px; border-bottom: 2px solid rgb(var(--d200)); }
.position-meta { display: flex; flex-wrap: wrap; gap: 20px; color: rgb(var(--d700)); }
.position-meta i { color: rgb(var(--primary)); margin-right: 6px; }
.career-form-light .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.career-form-light label { font-size: 14px; color: rgb(var(--d900)); }
.career-form-light label i { color: rgb(var(--primary)); margin-right: 4px; }
.career-form-light input[type="text"], .career-form-light input[type="tel"], .career-form-light input[type="email"] { width: 100%; padding: 12px; border: 1px solid rgb(var(--gray-300)); font-size: 16px; }
.career-form-light input:focus { outline: none; border: 2px solid rgb(17,24,39); padding: 11px; }
.file-drop-zone-light { position: relative; border: 2px dashed rgb(var(--d200)); background: rgb(var(--d50)); padding: 28px 16px; text-align: center; transition: all .2s; }
.file-drop-zone-light.drag-over, .file-drop-zone-light:hover { border-color: rgb(var(--primary)); background: rgba(var(--primary), .04); }
.file-drop-zone-light input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.drop-zone-content { display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgb(var(--d400)); font-size: 14px; pointer-events: none; }
.drop-zone-content i { font-size: 28px; color: rgb(var(--primary)); }
.file-selected-light { display: flex; align-items: center; justify-content: center; gap: 10px; color: rgb(var(--d900)); font-weight: 600; position: relative; z-index: 2; }
.file-selected-light i { color: rgb(var(--primary)); }
.file-remove-light { width: 28px; height: 28px; background: rgba(var(--d900), .08); }
.form-msg { display: none; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.form-msg.error { display: block; background: rgb(254,242,242); color: rgb(185,28,28); }
.form-msg.success { display: block; background: rgb(240,253,244); color: rgb(21,128,61); }
.btn-full { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: rgb(var(--primary)); color: #fff; padding: 14px 20px; font-weight: 600; transition: background .2s, transform .2s; }
.btn-full:hover:not(:disabled) { background: rgb(var(--primary-darker)); transform: translateY(-2px); }

/* Legal pages */
.legal { max-width: 48rem; margin: 0 auto; padding: 32px 16px 96px; }
.legal .updated { color: rgb(var(--d400)); font-size: 14px; margin-bottom: 24px; text-align: center; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer { background: linear-gradient(to bottom, rgb(var(--primary)), rgb(var(--primary-darker))); color: #fff; }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 64px 24px 32px; }
@media (min-width: 640px) { .footer-inner { padding-top: 96px; } }
@media (min-width: 1024px) { .footer-inner { padding-left: 32px; padding-right: 32px; } .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.footer-brand { display: flex; flex-direction: column; gap: 32px; }
.footer-logo { display: flex; align-items: center; gap: 14px; }
.footer-logo img { height: 56px; width: auto; background: #fff; padding: 6px; }
.footer-brand strong { font-size: 24px; line-height: 1.2; letter-spacing: .025em; }
.footer-desc { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.85); max-width: 22rem; }
.footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.footer-social a:hover { opacity: .8; }
.footer-social svg { width: 24px; height: 24px; }
.footer-contact { display: flex; flex-direction: column; gap: 16px; }
.footer-contact h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 24px; }
.footer-contact a, .footer-contact span { font-size: 14px; line-height: 24px; color: rgba(255,255,255,.9); }
.footer-contact a:hover { text-decoration: underline; }
.footer-cols { margin-top: 64px; display: grid; gap: 32px; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .footer-cols { grid-column: span 2; margin-top: 0; } }
.footer-cols h3 { font-size: 14px; font-weight: 600; line-height: 24px; }
.footer-cols ul { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.footer-cols a { font-size: 14px; line-height: 24px; }
.footer-cols a:hover { text-decoration: underline; }
.footer-bottom { margin-top: 64px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 32px; }
@media (min-width: 640px) { .footer-bottom { margin-top: 80px; flex-direction: row; } }
@media (min-width: 1024px) { .footer-bottom { margin-top: 96px; } }
.footer-bottom p { font-size: 12px; line-height: 20px; opacity: .75; }
.footer-bottom a:hover { text-decoration: underline; }
.footer-bottom .admin { display: inline-flex; align-items: center; gap: 6px; }
.footer-bottom .admin svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------------
   Contact modal (used by "Email us" on area pages)
   --------------------------------------------------------------------- */
.cm-overlay { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(55, 65, 81, .8); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.cm-overlay.active { opacity: 1; visibility: visible; }
body.cm-open { overflow: hidden; }
.cm-modal { position: relative; width: 100%; max-width: 28rem; max-height: 90vh; overflow: auto; background: #fff; padding: 32px 24px; transform: translateY(12px); transition: transform .2s; }
@media (min-width: 640px) { .cm-modal { padding: 32px 48px; } }
.cm-overlay.active .cm-modal { transform: translateY(0); }
.cm-close { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.cm-close svg { width: 24px; height: 24px; }
.cm-close-outer { position: absolute; top: 16px; right: 16px; color: #fff; display: none; }
.cm-close-inner { position: absolute; top: 24px; right: 24px; color: rgb(var(--gray-700)); }
@media (min-width: 640px) { .cm-close-outer { display: flex; } .cm-close-inner { display: none; } }
.cm-close::before { content: ""; position: absolute; inset: -10px; }
.cm-title { margin-bottom: 8px; text-align: center; font-size: 24px; line-height: 32px; font-weight: 600; color: rgb(var(--primary-darker)); }
.cm-body { display: flex; flex-direction: column; gap: 4px; }
.cm-field { position: relative; display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; }
.cm-field > label { font-size: 14px; line-height: 20px; color: rgb(var(--fg)); }
.cm-required { margin-left: 2px; color: rgb(239, 68, 68); }
.cm-input-wrap { position: relative; }
.cm-input-wrap input, .cm-input-wrap select, .cm-input-wrap textarea { width: 100%; padding: 12px; border: 1px solid rgb(var(--gray-500)); border-radius: 0; background: #fff; font-size: 16px; line-height: 24px; color: rgb(var(--fg)); appearance: none; -webkit-appearance: none; }
.cm-input-wrap select { border-color: rgb(17, 24, 39); padding-right: 36px; }
.cm-input-wrap select:invalid { color: rgb(var(--gray-500)); }
.cm-input-wrap ::placeholder { color: rgb(var(--gray-500)); }
.cm-input-wrap textarea { min-height: 122px; resize: vertical; display: block; }
.cm-input-wrap input:focus, .cm-input-wrap select:focus, .cm-input-wrap textarea:focus { outline: none; border: 2px solid rgb(17, 24, 39); padding: 11px; }
.cm-input-wrap select:focus { padding-right: 35px; }
.cm-input-wrap.qf-error input, .cm-input-wrap.qf-error select, .cm-input-wrap.qf-error textarea { border-color: rgb(239, 68, 68); }
.cm-select-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: rgb(var(--gray-500)); pointer-events: none; }
.cm-consent-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.cm-consent-check { display: flex; align-items: center; gap: 8px; padding: 12px; font-size: 16px; line-height: 24px; color: rgb(var(--fg)); cursor: pointer; }
.cm-consent-check input { flex-shrink: 0; width: 16px; height: 16px; margin: 0; accent-color: rgb(37, 99, 235); }
.cm-msg { display: none; padding: 12px 14px; font-size: 14px; }
.cm-msg.error { display: block; background: rgb(254,242,242); color: rgb(185,28,28); }
.cm-msg.success { display: block; background: rgb(240,253,244); color: rgb(21,128,61); }
.cm-submit { margin-top: 16px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; background: rgb(var(--primary)); color: #fff; font-size: 20px; line-height: 28px; font-weight: 700; transition: background .2s; }
.cm-submit:hover:not(:disabled) { background: rgb(var(--primary-darker)); }
.cm-submit:disabled { opacity: .6; }
.cm-terms { margin-top: 6px; text-align: center; font-size: 14px; line-height: 20px; color: rgb(var(--gray-500)); }
.cm-terms a { font-weight: 700; color: inherit; text-decoration: underline; transition: color .3s; }
.cm-terms a:hover { color: rgb(var(--primary)); }
/* Hero options preview page */
.option-label { background: rgb(var(--d900)); color: #fff; padding: 20px 16px; text-align: center; }
.option-label strong { display: block; font-size: 20px; }
.option-label span { font-size: 14px; color: rgba(255,255,255,.7); }

/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .svc-card::after, .cta-shimmer::before, .protect-banner::before { display: none; }
    .wcb-card, .wcb-header { opacity: 1; transform: none; }
}

/* "Our Work" photo strip: same header style as Our Home Services, same blue filter as the service cards */
.gl-section.is-work { background: #fff; padding: 64px 0; }
.gl-section.is-work .services-head { max-width: var(--max); margin: 0 auto 32px; padding: 0 16px; }
@media (min-width: 768px) { .gl-section.is-work .services-head { padding: 0 24px; } }
@media (min-width: 1280px) { .gl-section.is-work .services-head { padding: 0; } }
.gl-section.is-work .services-head p.services-sub { font-size: 16px; line-height: 1.6; color: rgb(var(--d700)); text-align: center; max-width: 42rem; }
@media (min-width: 1024px) { .gl-section.is-work .services-head p.services-sub { text-align: start; } }
.gallery-img-wrap::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(var(--primary), .1), rgba(var(--primary), .5)), rgba(var(--d900), .25); }
.gallery-overlay { z-index: 3; }

/* Gallery photos get the service-card motion: a slow light sweep across the picture, and the photo zooms on hover */
.gallery-img-wrap { overflow: hidden; }
.gallery-img-wrap::after {
    content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; z-index: 2; pointer-events: none;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
    animation: shimmer 6s ease-in-out infinite;
}
.gallery-marquee-track .gallery-item:nth-child(3n+2) .gallery-img-wrap::after { animation-delay: -2s; }   /* stagger so they don't all flash together */
.gallery-marquee-track .gallery-item:nth-child(3n) .gallery-img-wrap::after { animation-delay: -4s; }
.gallery-img-wrap img { transition: transform .3s var(--ease); }
.gallery-marquee-track .gallery-item:hover { transform: none; }
.gallery-item:hover .gallery-img-wrap img, .gallery-item:focus-visible .gallery-img-wrap img { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .gallery-img-wrap::after { display: none; } .gallery-item:hover .gallery-img-wrap img { transform: none; } }

/* Featured review band: big quote mark, bottom right */
.quote-band .quote-mark { position: absolute; right: 16px; bottom: -8px; z-index: 0; width: 96px; height: 96px; color: rgb(var(--primary)); opacity: .75; fill: currentColor; }
@media (min-width: 640px) { .quote-band .quote-mark { width: 128px; height: 128px; } }
.quote-band-meta .star-row svg { width: 16px; height: 16px; }

/* Home closing block: curved white top edge + soft glow (H2OBros) */
.cta-shimmer .cta-wave { position: absolute; left: 0; right: 0; top: 0; z-index: 10; width: 100%; height: 149px; }
.cta-shimmer .cta-glow { position: absolute; left: 0; top: 0; pointer-events: none; }
.cta-sub { line-height: 2; }
/* Photo credit on area pages (required by the photo licenses) */
.sa-hero { position: relative; }
.photo-credit { position: absolute; left: 8px; bottom: 6px; z-index: 5; max-width: calc(100% - 16px); padding: 2px 8px; font-size: 11px; line-height: 16px; color: rgba(255,255,255,.9); background: rgba(var(--d900), .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-credit:hover { text-decoration: underline; }
@media (min-width: 768px) { .photo-credit { max-width: calc(50% - 16px); } }
@media (max-width: 767px) { .photo-credit { top: calc(12rem - 22px); bottom: auto; } }

/* Town marker on area-page maps */
.town-pin span { display: block; width: 22px; height: 22px; background: rgb(var(--primary)); border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* =====================================================================
   Audit fixes (measured against h2obros.co at 1440px and 390px)
   ===================================================================== */
/* Line heights that match H2OBros's text sizes (14/20, 12/16, 18/28, 20/28) */
.topbar-hours span, .topbar-rating span, .hero-rating a, .svc-label { line-height: 20px; }
.services-label, .eyebrow-primary { line-height: 16px; }
.testi-dark-sub, .sa-strip-item strong, .area-list li, .area-list .num, .quote-band-meta p, .features-head p, .faq-num-head p { line-height: 28px; }
.testi-dark-card figcaption { line-height: 20px; }
.footer-brand strong { line-height: 24px; }

/* Buttons: 16/24 text on desktop, 14/20 and 8px padding on phones */
.btn { line-height: 20px; }
@media (min-width: 640px) { .btn { line-height: 24px; } }
.nav-mobile .btn { padding: 8px 8px; }
@media (min-width: 768px) { .nav-mobile .btn { padding: 12px 16px; } }
.btn-hero { line-height: 20px !important; font-size: 14px; }
@media (min-width: 640px) { .btn-hero { font-size: 15px; } }
.hero-buttons { display: flex; align-items: center; gap: 16px; }
.btn-review-solid, .btn-review-outline { text-align: center; }

/* Closing-section buttons: same row height, white outline, phone sizes */
.cta-buttons .btn-group, .cta-shapes .btn-group { align-items: stretch; }
.btn-cta-primary { font-size: 12px; line-height: 16px; }
.btn-cta-secondary { font-size: 16px; line-height: 24px; border-color: #fff; padding: 8px 16px; }
.cta-shapes .btn-white { font-size: 12px; line-height: 16px; border-color: #fff; padding: 8px 16px; }
@media (min-width: 640px) { .btn-cta-primary, .btn-cta-secondary, .cta-shapes .btn-white { font-size: 15px; } }
@media (min-width: 768px) { .btn-cta-primary { padding: 12px 16px; } .btn-cta-secondary, .cta-shapes .btn-white { padding: 16px 32px; } }

/* Service hero buttons: 12px on phones, 15px from 640px */
.svc-hero .btn-white, .svc-hero .btn-ghost { font-size: 12px; }
@media (min-width: 640px) { .svc-hero .btn-white, .svc-hero .btn-ghost { font-size: 15px; } }

/* Home hero */
@media (min-width: 1280px) { .hero-title { line-height: 1; } }
@media (min-width: 640px) { .hero-sub { line-height: 28px; } }

/* About text width (prose max 65ch) */
.about-panel .prose { max-width: 65ch; }
@media (max-width: 767px) { .about-img { height: auto; } }

/* Why-choose cards */
.wcb-card h3 { line-height: 1.5; }

/* Dark reviews title */
@media (min-width: 1024px) { .testi-dark-title { line-height: 1; } }

/* Featured quote */
.quote-band blockquote { line-height: 32px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 640px) { .quote-band blockquote { line-height: 36px; } }
@media (min-width: 768px) { .quote-band blockquote { line-height: 40px; } }

/* Home closing block */
.cta-title { line-height: 36px; }
@media (min-width: 640px) { .cta-title { line-height: 1; } }
.cta-sub { line-height: 32px; }
@media (min-width: 768px) { .cta-sub { line-height: 28px; } }

/* Service page */
.svc-side { flex-shrink: 1; }
.features-head p { max-width: 36rem; }
@media (min-width: 768px) { .process-head h3 { line-height: 48px; } }
.process-step h4 { line-height: 28px; }
@media (min-width: 768px) { .process-step h4 { line-height: 20px; } }
.process-step .n { line-height: 60px; }
.faq-item button { font-size: 14px; font-weight: 500; line-height: 20px; }
.testi-light-head h2 { font-size: 48px !important; line-height: 60px; }
@media (min-width: 640px) { .cta-photo-inner { padding: 0; } }
.cta-photo-inner p { line-height: 28px; }
@media (min-width: 640px) { .cta-photo-inner p { line-height: 32px; } }

/* Area pages */
.sa-hero { background: radial-gradient(rgb(var(--primary-lighter)), rgb(var(--primary-darker))); }
@media (min-width: 1024px) { .sa-hero { padding: 96px 0; } }
.faq-num-intro { display: inline; margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; color: rgb(var(--fg)); }
.faq-num-list .n { letter-spacing: normal; line-height: 36px; }
@media (min-width: 640px) { .faq-num-list .n { line-height: 60px; } }
.cta-shapes-text p { line-height: 32px; }
@media (min-width: 768px) { .cta-shapes-text p { line-height: 28px; } }

/* Phone/tablet menu panel: full width on phones, 384px side panel from 640px (H2OBros) */
@media (min-width: 640px) {
  .mobile-menu-panel { width: 100%; max-width: 24rem; box-shadow: 0 0 0 1px rgba(var(--d900), .1); }
}
.mobile-menu-links > a:hover, .mobile-menu-links summary:hover, .mobile-menu-links details a:hover { background: rgb(var(--d100)); }

/* Logo: cropped mark, same box as H2OBros (48px phone, 60px tablet, 150px desktop header) */
.nav-logo img { height: 48px; width: 48px; }
@media (min-width: 768px) { .nav-logo img { height: 60px; width: 60px; } }
@media (min-width: 1440px) { .site-header .nav-logo img { height: 150px; width: 150px; max-height: 150px; } }
.fixed-nav .nav-logo img { height: 72px; width: 72px; }
.footer-logo img { height: 56px; width: 56px; padding: 0; background: none; }

/* Moving mockup hero: close-up video in a floating phone frame */
.mock-wrap { position: relative; z-index: 10; display: flex; justify-content: center; width: 100%; padding-bottom: 48px; }
@media (min-width: 1024px) { .mock-wrap { width: 476px; padding-bottom: 0; } }
.phone-mock { position: relative; width: min(78vw, 300px); aspect-ratio: 9 / 18.5; border-radius: 44px; padding: 10px; background: #0b1220;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset, 0 40px 80px -20px rgba(0,0,0,.55), 0 18px 36px -18px rgba(0,0,0,.5);
  animation: mock-float 6s ease-in-out infinite; }
.phone-mock::before { content: ""; position: absolute; top: 18px; left: 50%; z-index: 2; width: 84px; height: 22px; margin-left: -42px; border-radius: 999px; background: #0b1220; }
.phone-mock video { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; display: block; background: #0b1220; }
@keyframes mock-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(-1deg); } }
.mock-rating { left: 50%; bottom: 0; transform: translate(-50%, 0); }
@media (min-width: 1024px) { .mock-rating { left: auto; right: -40px; top: 112px; bottom: auto; transform: none; } }
@media (prefers-reduced-motion: reduce) { .phone-mock { animation: none; } }

/* Framed-video hero: keep play/sound buttons clear of the rating card */
.blue-hero-media .video-ctrl { top: 16px; bottom: auto; left: 16px; transform: none; padding: 6px; gap: 4px; }

/* Final audit touch-ups */
.testi-dark-sub { line-height: 24px; }
@media (min-width: 768px) { .testi-dark-sub { line-height: 28px; } }
.svc-hero .btn { line-height: 16px; }
.cta-photo .btn { line-height: 28px; }
.cta-photo-inner p { line-height: 32.5px; }
@media (min-width: 640px) { .cta-photo-inner p { line-height: 32px; } }

/* Service sidebar arrows (H2OBros): down arrow on phones; right arrow from 640px, none on the current page */
.svc-side .arr-right { display: none; }
@media (min-width: 640px) { .svc-side .arr-down { display: none; } .svc-side .arr-right { display: block; } }
.svc-side a:hover .arr-down { transform: translateY(4px); color: rgb(var(--primary-lighter)); }
.svc-side a:hover .arr-right { transform: translateX(4px); color: rgb(var(--primary-lighter)); }
.svc-side a > span { padding-right: 0; }
.svc-side a > span { margin-right: 40px; }

.features-bg::after { content: none; }
.features-bg-dim { position: absolute; inset: 0; background: rgba(var(--d900), .7); }

/* Scrolled (fixed) header: keep container side padding; logo sized like H2OBros (5rem box at tablet, 6rem desktop) */
.fixed-nav .nav-main { padding: 8px 16px; }
@media (min-width: 1280px) { .fixed-nav .nav-main { padding: 8px 0; } }
.fixed-nav .nav-logo img { width: 60px; height: 60px; }
@media (min-width: 1024px) { .fixed-nav .nav-logo img { width: 72px; height: 72px; } }
.fixed-nav .nav-mobile .btn { padding: 12px 16px; }

/* FAQ answers (H2OBros: 16/24, grey-700, 20px padding, 24px from 768px) */
.faq-item .a p { font-size: 16px; line-height: 24px; color: rgb(var(--d700)); padding: 0 20px 20px; }
@media (min-width: 768px) { .faq-item .a p { padding: 0 24px 24px; } }

/* "What Neighbors Love About Us": one inline line like H2OBros (wraps only when narrow) */
.testi-dark-title span { display: inline; }
.testi-dark-title { line-height: 1.25; }
@media (min-width: 1024px) { .testi-dark-title { line-height: 1; } }
.testi-dark-head .eyebrow-primary { margin-bottom: 16px; }

/* Service FAQ: H2OBros stroked chevron + small-screen top-right shield */
.faq-item .ic svg { width: auto; height: auto; flex-shrink: 0; }
.faq-v1-deco svg.deco-sm { display: block; left: auto; right: 0; top: 0; bottom: auto; }
@media (min-width: 1024px) { .faq-v1-deco svg.deco-sm { display: none; } }

/* Review carousel: H2OBros step motion; centred card is solid blue */
.carousel-track { padding-left: 0; }
.tcard { cursor: pointer; transition: color .15s cubic-bezier(.4,0,.2,1), background-color .15s cubic-bezier(.4,0,.2,1), border-color .15s cubic-bezier(.4,0,.2,1); }
.tcard .star-row svg, .tcard blockquote, .tcard figcaption { transition: color .15s cubic-bezier(.4,0,.2,1); }
.tcard.is-active { background: rgb(var(--primary)); border-color: transparent; }
.tcard.is-active .star-row { color: #fff; }
.tcard.is-active blockquote { color: rgb(249, 250, 251); }
.tcard.is-active figcaption { color: #fff; }

/* Menu panel buttons like H2OBros: stacked full width on phones, side by side from 768px */
.mobile-menu .btn-group .btn { font-size: 16px; font-weight: 500; line-height: 24px; gap: 12px; }
.mobile-menu .btn-group .btn svg { width: 16px; height: 16px; }
@media (min-width: 768px) {
  .mobile-menu .btn-group { flex-direction: row; gap: 8px; }
  .mobile-menu .btn-group .btn { width: auto; margin: 8px 0 2px !important; }
  .mobile-menu .btn-group .btn:first-child { margin-right: 12px !important; }
}

/* Same compact header on every screen size: logo + Get in touch + Call us + menu (owner's choice) */
@media (min-width: 1440px) {
  .site-header .nav-logo img, .nav-logo img { height: 60px; width: 60px; max-height: 60px; }
  .nav-right { padding: 32px 0; }
  .nav-cta, .nav-links, .fixed-nav .nav-links { display: none; }
  .nav-mobile { display: flex; }
  .nav-mobile .btn { display: inline-flex; padding: 12px 16px; }
  .fixed-nav .nav-logo img { height: 72px; width: 72px; max-height: 72px; }
}

/* Service hero text and buttons measured against H2OBros (390 / 557 / 768 / 1440) */
.svc-hero h1 { line-height: 40px; }
@media (min-width: 640px) { .svc-hero h1 { line-height: 1; } }
@media (max-width: 639px) { .svc-hero { padding-left: 16px; padding-right: 16px; } }
.svc-hero .btn { line-height: 20px; margin-bottom: 2px; }
.svc-hero .btn-ghost { gap: 0; }
.svc-hero .btn-ghost svg { width: 16px; height: 16px; flex: none; }
.svc-hero .btn { line-height: 16px; margin-bottom: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.svc-hero .btn-white { min-height: 32px; }
.svc-hero .btn-ghost { min-height: 36px; }
.svc-hero .btn-ghost svg { margin-right: 4px; }
@media (min-width: 640px) { .svc-hero .btn { margin-bottom: 2px; } }
@media (min-width: 768px) { .svc-hero .btn-white, .svc-hero .btn-ghost { min-height: 44px; display: inline-flex; } }

/* Mockup hero on phones/tablets: headline and buttons first, smaller phone below */
@media (max-width: 1023px) {
  .mock-hero { padding: 48px 0 56px; }
  .mock-hero .blue-hero-inner { flex-direction: column; gap: 40px; padding: 0 24px; }
  .mock-hero .blue-hero-text { gap: 24px; max-width: 36rem; width: 100%; }
  .mock-hero .phone-mock { width: min(58vw, 240px); border-radius: 36px; padding: 8px; }
  .mock-hero .phone-mock::before { top: 14px; width: 70px; height: 18px; margin-left: -35px; }
  .mock-hero .phone-mock video { border-radius: 28px; }
  .mock-hero .mock-wrap { padding-bottom: 40px; }
}
@media (min-width: 640px) and (max-width: 1023px) { .mock-hero .phone-mock { width: 260px; } }
@media (prefers-reduced-motion: reduce) { .phone-mock { animation: none; } }

/* Process step: title row + text in one column (H2OBros: gap 16px inside, 80px outer gap unused) */
.process-step-body { position: relative; z-index: 10; display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 16px; }
.process-step-body .process-step-top { width: 100%; }

/* FAQ answers: H2OBros size and colour (14px/20px, near-black) */
.faq-item .a p { font-size: 14px; line-height: 20px; color: rgb(2, 8, 23); }

/* Contact page quote form — H2OBros (LeadConnector) layout */
.lc-form { max-width: 560px; margin: 0 auto; padding: 8px 16px 48px; color: #000; }
.lc-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; row-gap: 18px; }
.lc-full { grid-column: 1 / -1; }
@media (max-width: 480px) { .lc-grid { column-gap: 18px; } .lc-grid > .lc-field:nth-child(-n+4) { grid-column: 1 / -1; } }   /* H2OBros on phones: names, phone, email one per row; address pairs stay side by side */
.lc-field label, .lc-services legend { display: block; margin-bottom: 8px; font-size: 14px; line-height: 25px; font-weight: 400; color: #000; }
.lc-req { color: inherit; }
.lc-form input[type=text], .lc-form input[type=tel], .lc-form input[type=email], .lc-form select {
  display: block; width: 100%; height: 50px; padding: 15px; border: 1px solid #ccc; border-radius: 5px; background: #fff;
  font-size: 16px; line-height: 20px; color: #000; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
@media (min-width: 640px) { .lc-form input[type=text], .lc-form input[type=tel], .lc-form input[type=email], .lc-form select { font-size: 14px; } }
.lc-form input::placeholder { color: #555; font-weight: 300; opacity: 1; }
.lc-form input:focus, .lc-form select:focus { outline: none; border-color: rgb(var(--primary)); box-shadow: 0 0 0 3px rgba(var(--primary), .18); }
.lc-form .lc-invalid { border-color: #d93025 !important; box-shadow: 0 0 0 3px rgba(217, 48, 37, .15) !important; }
.lc-icon-wrap { position: relative; }
.lc-icon { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: #777; pointer-events: none; }
.lc-icon-wrap input { padding-left: 36px !important; }
.lc-search .lc-icon { left: 16px; width: 20px; height: 20px; margin-top: -10px; }
.lc-search input { padding-left: 45px !important; }
.lc-select { position: relative; }
.lc-select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.lc-select::after { content: ""; position: absolute; right: 18px; top: 50%; margin-top: -3px; border: 6px solid transparent; border-top: 7px solid #777; border-bottom: 0; pointer-events: none; }
.lc-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0; list-style: none; background: #fff;
  border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.2); max-height: 260px; overflow-y: auto; }
.lc-suggest li { padding: 10px 15px; font-size: 14px; line-height: 20px; cursor: pointer; }
.lc-suggest li:hover, .lc-suggest li.active { background: rgb(var(--d50)); }
.lc-suggest .lc-suggest-empty { color: #555; cursor: default; }
.lc-services { margin: 18px 0 0; padding: 0; border: 0; }
.lc-check { display: flex; align-items: flex-start; gap: 10px; min-height: 30px; padding: 3px 0; font-size: 14px; line-height: 24px; color: #000; cursor: pointer; }
.lc-check input { flex: none; width: 16px; height: 16px; margin: 4px 0 0; accent-color: rgb(var(--primary)); cursor: pointer; }
.lc-consent { margin-top: 16px; gap: 20px; font-size: 14px; line-height: 20px; }
.lc-consent input { margin-top: 2px; }
.lc-msg { display: none; margin-top: 18px; padding: 12px 14px; border-radius: 5px; font-size: 14px; line-height: 20px; }
.lc-msg.error { display: block; background: #fdecea; color: #a50e0e; }
.lc-msg.success { display: block; background: #e6f4ea; color: #137333; }
.lc-submit { display: block; width: 100%; height: 62px; margin-top: 24px; border: 0; border-radius: 5px; background: rgb(var(--primary)); color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: background-color .15s, transform .15s; }
.lc-submit:hover { background: rgb(var(--primary-darker)); }
.lc-submit:active { transform: translateY(1px); }
.lc-submit:disabled { opacity: .7; cursor: wait; }
.lc-submit:focus-visible { outline: 3px solid rgba(var(--primary), .4); outline-offset: 2px; }
.lc-legal { margin-top: 24px; text-align: center; font-size: 14px; line-height: 21px; color: #000; }
.lc-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Mockup hero buttons: H2OBros blue-hero pair (white solid + white outline), equal 44px height */
.mock-hero .btn-group { gap: 12px; flex-wrap: wrap; }
.mock-hero .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0 !important;
  padding: 12px 16px; font-size: 15px; line-height: 16px; font-weight: 500; border-radius: 0; box-sizing: border-box;
  transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.mock-hero .btn-white { background: #fff; color: rgb(var(--primary)); border: 0; }
.mock-hero .btn-white:hover { background: rgb(var(--d50)); transform: translateY(-2px); }
.mock-hero .btn-ghost { background: transparent; color: #fff; border: 1px solid #fff; }
.mock-hero .btn-ghost:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.mock-hero .btn:active { transform: translateY(1px); }
.mock-hero .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mock-hero .btn svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 639px) { .mock-hero .btn-group { flex-direction: column; align-items: stretch; gap: 8px; } .mock-hero .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .mock-hero .btn:hover { transform: none; } }

/* Review carousel runs the full screen width, like H2OBros */
.carousel { max-width: none; }

/* Closing photo section: photo stays pinned while the section scrolls over it (H2OBros fixed background),
   done with a layer the script keeps in place so it also works on iPhone, where fixed backgrounds are ignored */
.cta-photo { overflow: hidden; background: rgb(var(--primary)); }
.cta-photo-bg { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; background-size: cover; background-position: center;
  will-change: transform; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cta-photo-bg { height: 100%; transform: none !important; } }

/* Button motion, measured on H2OBros with a real mouse: lift 2px on hover over 200ms (Tailwind ease-in-out),
   press 2px down into dark blue with white text, focus ring on click, no resting shadow. Same on every button. */
.btn, .btn-review-solid, .btn-review-outline, .lc-submit, .btn-full {
  box-shadow: none; transition: all .2s cubic-bezier(.4, 0, .2, 1); }
.btn:hover, .btn-review-solid:hover, .btn-review-outline:hover, .lc-submit:hover:not(:disabled), .btn-full:hover:not(:disabled),
.mock-hero .btn-white:hover, .mock-hero .btn-ghost:hover { transform: translateY(-2px); }
.btn:active, .btn-review-solid:active, .btn-review-outline:active, .lc-submit:active, .btn-full:active, .mock-hero .btn:active {
  transform: translateY(2px); background: rgb(var(--primary-darker)); color: #fff; }
.btn:focus, .btn-review-solid:focus, .btn-review-outline:focus, .lc-submit:focus { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, .5); }
.btn:focus:not(:focus-visible):not(:active) { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active, .lc-submit:hover, .lc-submit:active { transform: none; } }

/* Text-and-list sections (H2OBros "free form", prose-lg): spacing and bold measured on their pressure page */
.freeform .prose p { margin: 24px 0; line-height: 32px; }
.freeform .prose p:first-child { margin-top: 0; }
.freeform .prose li { margin: 12px 0; padding-left: 8px; line-height: 32px; }
.freeform .prose strong { font-weight: 700; color: rgb(9, 20, 35); }

/* FAQ question wrapper: H2OBros h3 is 16px/24px regular (the question text itself is styled separately) */
.faq-item h3 { font-size: 16px; line-height: 24px; font-weight: 400; }

/* Blue closing section (cta-shapes): H2OBros title line height, button height, icon gap, spacing */
.cta-shapes-text h2 { line-height: 32px; }
@media (min-width: 768px) { .cta-shapes-text h2 { line-height: 40px; } }
.cta-shapes .btn { gap: 8px; }
@media (min-width: 640px) { .cta-shapes .btn { margin-bottom: 2px !important; } }
@media (min-width: 768px) { .cta-shapes .btn { min-height: 50px; } }
@media (max-width: 767px) { .cta-shapes .btn-white { padding-left: 8px; padding-right: 8px; gap: 4px; } }

/* Closing photo section (window / gutter pages): H2OBros title line height and button spacing */
.cta-photo-inner strong { line-height: 40px; }
@media (min-width: 640px) { .cta-photo-inner strong { line-height: 1; } }
@media (min-width: 640px) { .cta-photo .btn { margin-bottom: 2px !important; } .cta-photo .btn-group .btn:first-child { margin-right: 12px !important; } }

/* FAQ chevron keeps H2OBros's fixed 19x12 size at every width */
.faq-item .ic svg { width: 19px; height: 12px; flex: none; }

/* Service-area list (map): H2OBros arrow + hover. Phones/tablets: arrow always shown, slides 4px right on hover.
   768px+: arrow hidden until the row is hovered, then fades in (no slide). Text colour, no colour change. */
.area-list a { transition: none; }
.area-list a:hover { color: inherit; }
.area-list .num { margin-right: 0; }
.area-list svg { color: currentColor; opacity: 1; transform: none; transition: all .3s cubic-bezier(.4, 0, .2, 1); flex: none; }
.area-list a:hover svg, .area-list a:focus-visible svg { transform: translateX(4px); }
@media (min-width: 768px) {
  .area-list svg { opacity: 0; transition: opacity .3s cubic-bezier(.4, 0, .2, 1); }
  .area-list a:hover svg, .area-list a:focus-visible svg { opacity: 1; transform: none; }
}

/* Gallery page section headings use the home "Our Top Services" heading style */
.gl-head { margin: 0 auto 32px; padding: 0 16px; }
@media (min-width: 768px) { .gl-head { padding: 0 24px; } }
@media (min-width: 1280px) { .gl-head { padding: 0; } }
.gl-container .gl-head { padding-left: 0; padding-right: 0; }   /* the gallery container already has side padding: line up with the photos */
.gl-head p.services-sub { margin: 0; font-size: 16px; line-height: 1.6; color: rgb(var(--d700)); text-align: center; max-width: 42rem; align-self: center; }
@media (min-width: 1024px) { .gl-head p.services-sub { text-align: start; align-self: flex-start; } }

/* Reviews page boxes: consistent heights like H2OBros (their cards are 366px tall on desktop, 220px+ in two columns), no shadow */
#reviewsGrid > .review-card { box-shadow: none; }
@media (min-width: 640px) { #reviewsGrid > .review-card { min-height: 220px; } }
@media (min-width: 1024px) { #reviewsGrid > .review-card { min-height: 366px; } }

/* Scrolled (see-through) header: H2OBros slide-in easing and 76px height; phone header plain white with no shadow */
.fixed-nav { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
@media (min-width: 768px) and (max-width: 1023px) { .fixed-nav .nav-logo img { width: 59px; height: 59px; } }
@media (max-width: 767px) { .site-header { box-shadow: none; } }

/* Full H2OBros comparison fixes */
/* Every blue / photo closing section gets their slow light sweep (10% white, 8s) */
.cta-shapes, .cta-photo { position: relative; overflow: hidden; }
.cta-shapes::before, .cta-photo::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; z-index: 5; pointer-events: none;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,.1) 50%, transparent 70%); animation: shimmer 8s ease-in-out infinite; }
.cta-shapes-inner, .cta-photo-inner { position: relative; z-index: 6; }
@media (prefers-reduced-motion: reduce) { .cta-shapes::before, .cta-photo::before { display: none; } }
/* Page titles (FAQ, legal, contact…): H2OBros 1.5 line height */
.page-title h1 { line-height: 1.5; }
/* Reviews page title on phones/tablets: 1.25 line height */
@media (max-width: 1023px) { .rv-page .rv-head h1 { line-height: 1.25 !important; } }
/* About hero: title line height 1 on desktop, buttons solid blue + outline at 600 weight */
@media (min-width: 1024px) { .ab-hero-text h1 { line-height: 1; } }
.ab-hero .btn { font-weight: 600; }
/* Plans: guarantee and plan cards sit inside "How The Plan Works" */
.mp-guarantee-box { margin: 64px auto 0; max-width: 48rem; padding: 40px 24px; text-align: center; background: rgb(var(--primary)); color: #fff; }
.mp-guarantee-box .mp-title, .mp-guarantee-box .mp-sub { color: #fff; }
.mp-plans-title { margin-top: 64px; text-align: center; }
.mp-how .mp-price-grid { margin-top: 32px; }
.mp-how { background: #fff; }   /* H2OBros: plain white */
/* Plans hero (blue split, not the home mockup): H2OBros text spacing and white/outline buttons */
.blue-hero:not(.mock-hero) .blue-hero-text p { line-height: 28px; }
@media (min-width: 1024px) { .blue-hero:not(.mock-hero) .blue-hero-text p { line-height: 32px; } .blue-hero:not(.mock-hero) .blue-hero-text h1 { line-height: 1; } }
.blue-hero:not(.mock-hero) .btn { font-size: 12px; line-height: 16px; gap: 8px; }
@media (min-width: 640px) { .blue-hero:not(.mock-hero) .btn { font-size: 15px; } }
/* About hero buttons: 15px / 20px like H2OBros */
@media (min-width: 640px) { .ab-hero .btn { font-size: 15px; line-height: 20px; } }

/* Home hero: Johnny's video under the service-card treatment (25% navy, 10%→50% blue gradient, 6s light sweep) */
.hero-blue { background: rgb(var(--primary-darker)); }
.hero-blue .hero-dim { position: absolute; inset: 0; z-index: 1; background: rgb(var(--d900)); opacity: .25; }
.hero-blue .hero-tint { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(var(--primary), .1), rgba(var(--primary), .5)); }
.hero-blue::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; z-index: 3; pointer-events: none;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%); animation: shimmer 6s ease-in-out infinite; }
.hero-blue .hero-content { z-index: 10; }
.hero-blue .hero-title { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero-blue .hero-title .accent { color: rgb(var(--secondary)); }   /* light blue: stays readable over the blue-tinted video */
.hero-blue .hero-sub, .hero-blue .hero-text > p { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); color: rgba(255, 255, 255, .9); }
@media (prefers-reduced-motion: reduce) { .hero-blue::after { display: none; } }

/* H2OBros blue-hero background shapes (plans hero): tile grid top-left, light shapes bottom-right, desktop only */
.blue-hero { position: relative; overflow: hidden; }
.blue-hero-grid, .blue-hero-shapes { position: absolute; display: none; pointer-events: none; color: rgb(var(--primary)); }
.blue-hero-grid { left: 0; top: 0; width: 1000px; height: auto; opacity: .5; }
.blue-hero-shapes { right: 0; bottom: 0; width: 60%; height: auto; opacity: .2; }
@media (min-width: 1024px) { .blue-hero-grid, .blue-hero-shapes { display: block; } }
.blue-hero-inner { position: relative; z-index: 2; }

/* Contact page: the form sits straight on the white page like H2OBros (no grey band) */
.contact-page { background: #fff; padding: 0; }

/* Before/after photos never open full screen (the slider still works) */
#baLightbox { display: none !important; }

/* Contact page title: H2OBros line height (1.5) */
.page-title.is-contact h1 { line-height: 1.5; }

/* Dark review boxes: H2OBros 16px stars and box heights */
.testi-dark-card .star-row svg { width: 16px; height: 16px; }
@media (min-width: 640px) { .testi-dark-card { min-height: 265px; } }
@media (min-width: 1024px) { .testi-dark-card { min-height: 438px; } }

/* Reviews page cards: H2OBros /reviews layout */
.rv-head h1 { line-height: 1; }
.review-card { justify-content: space-between; }
.review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.review-top .review-stars { margin: 0; gap: 2px; }
.review-stars svg { width: 14px; height: 14px; fill: currentColor; }
.review-quote { width: 28px; height: 28px; color: rgba(var(--primary), .12); flex: none; }
.review-divider { height: 1px; margin: 20px 0 16px; border: 0; background: linear-gradient(to right, rgba(0,0,0,.06), rgba(0,0,0,.03), transparent); }
.review-author { display: flex; align-items: center; justify-content: space-between; }
.review-author-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
img.review-google-logo { width: 56px; height: auto; opacity: .5; transition: opacity .3s; }
.review-card:hover img.review-google-logo { opacity: .7; }

/* Service page hero: the photo layer is held in place while the page scrolls over it (same effect as the closing photo) */
.svc-hero > img.pin-layer { will-change: transform; }

/* Touch screens: service-card zoom plays when the card reaches the middle of the screen */
.svc-card.in-view .svc-img { transform: scale(1.1); }
.svc-card .svc-img { transition-duration: .6s; }
@media (hover: hover) { .svc-card .svc-img { transition-duration: .3s; } }

/* Blue page heroes (Maintenance Plans etc.): the grid and light shapes drift slowly and a soft light sweeps across */
.blue-hero-shapes { display: block; width: 90%; opacity: .14; }
@media (min-width: 1024px) { .blue-hero-shapes { width: 60%; opacity: .2; } }
.blue-hero-shapes { animation: bh-drift 14s ease-in-out infinite alternate; transform-origin: 100% 100%; }
.blue-hero-grid { animation: bh-grid 18s ease-in-out infinite alternate; }
@keyframes bh-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-28px, -18px) scale(1.05); } }
@keyframes bh-grid { from { transform: translate(0, 0); } to { transform: translate(14px, 10px); } }
.blue-hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .09), transparent); transform: skewX(-12deg);
  animation: bh-sweep 9s ease-in-out infinite; }
@keyframes bh-sweep { 0%, 15% { left: -60%; } 70%, 100% { left: 120%; } }
@media (prefers-reduced-motion: reduce) { .blue-hero-shapes, .blue-hero-grid, .blue-hero::after { animation: none; } }

/* About photo: square, crisp corners with a firm shadow so the edge reads against the white page */
.about-img { border-radius: 0; object-position: center; box-shadow: 0 25px 50px -12px rgba(2, 8, 23, .35), 0 0 0 1px rgba(2, 8, 23, .08); }

/* Footer: matches H2OBros (name, outline socials, Phone / Email with icons) with a slow moving light */
.footer-contact h4 svg { width: 16px; height: 16px; flex: none; }
.site-footer { position: relative; overflow: hidden; isolation: isolate; }
.site-footer::before, .site-footer::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(60px); }
.site-footer::before { width: 520px; height: 520px; left: -160px; top: -180px; background: rgba(255, 255, 255, .10); animation: ft-float-a 16s ease-in-out infinite alternate; }
.site-footer::after { width: 640px; height: 640px; right: -220px; bottom: -260px; background: rgba(120, 180, 230, .16); animation: ft-float-b 20s ease-in-out infinite alternate; }
@keyframes ft-float-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(140px, 120px) scale(1.15); } }
@keyframes ft-float-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(-160px, -140px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .site-footer::before, .site-footer::after { animation: none; } }

/* Pinned photos, done by the browser itself: the photo is a fixed layer and the section clips it (clip-path clips fixed
   children), so it moves in exact step with the scroll on every device, with no script lag */
.svc-hero, .cta-photo { clip-path: inset(0); }
.svc-hero > img.pin-layer, .cta-photo-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; transform: none !important; will-change: auto; }
.svc-hero > img.pin-layer { object-fit: cover; object-position: center; }

/* Service hero: keep the blue filter but let the photo's colour and brightness through (service-card style tint) */
.svc-hero > img { filter: saturate(1.15) brightness(1.06); }
.svc-hero-dim { background: rgb(var(--primary-darker)); opacity: .12; }
.svc-hero-dim2 { background: linear-gradient(to bottom, rgba(var(--primary), .10), rgba(var(--primary), .50)); }
.svc-hero h1, .svc-hero p { text-shadow: 0 2px 14px rgba(2, 8, 23, .35); }

/* Review carousel: the blue (active) card carries the same diagonal shine H2OBros runs on its blue service cards (6s, 30% white) */
.tcard { position: relative; overflow: hidden; }
.tcard > * { position: relative; z-index: 1; }
.tcard.is-active::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; z-index: 2; pointer-events: none;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%); animation: shimmer 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tcard.is-active::after { display: none; } }

/* Contact page: the form sits as a white card over a full-width photo, like the H2OBros form (548px card, 31px padding, photo anchored top) */
.contact-page { background: rgb(var(--primary)) url("../images/svc-water-view.jpg") 50% 0 / cover no-repeat; padding: 0; }
.contact-page .lc-form { width: min(548px, calc(100% - 32px)); max-width: none; margin: 0 auto; padding: 31px; background: #fff; box-sizing: border-box; }
@media (max-width: 480px) { .contact-page .lc-form { padding: 24px 20px; } }

/* Plans page "Start Your Plan Today": white Get in touch button with a round arrow badge (H2OBros) */
.btn-arrow-cta { display: inline-flex; align-items: center; gap: 16px; margin-top: 40px; padding: 12px 20px; background: #fff; color: rgb(var(--primary));
  border: 2px solid rgb(var(--primary)); font-size: 16px; font-weight: 500; line-height: 24px; transition: transform .2s cubic-bezier(.4,0,.2,1), background-color .2s; }
.btn-arrow-cta:hover { transform: translateY(-2px); }
.btn-arrow-cta:active { transform: translateY(2px); }
.btn-arrow-ic { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(var(--primary), .1); }
.btn-arrow-ic svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .btn-arrow-cta:hover, .btn-arrow-cta:active { transform: none; } }

/* Gallery: page title (H2OBros "Gallery" heading: brand blue, 40px bold, centred) */
.gl-page-title { margin: 0 0 32px; text-align: center; font-size: 40px; line-height: 60px; font-weight: 700; color: rgb(var(--primary)); }
@media (max-width: 480px) { .gl-page-title { font-size: 32px; line-height: 44px; } }

/* Quote card (H2OBros "Get a Free Quote!"): placeholders, gray-500 field borders, and on phones/tablets the card rides up over the photo */
.form-card .field input, .form-card .field select, .form-card .field textarea { border: 1px solid rgb(107, 114, 128); padding: 12px; font-size: 16px; }
.form-card .field input::placeholder, .form-card .field textarea::placeholder { color: rgb(107, 114, 128); }
.form-card .form-submit { font-size: 20px; font-weight: 700; padding: 12px 16px; margin-top: 16px; }
@media (max-width: 1023px) { .contact-v2-card-wrap { margin-top: -88px; padding-top: 0; } }

/* Process steps: four across only once they fit (4 x 240px + gaps + padding), two across before that, so 1024px tablets don't scroll sideways */
@media (min-width: 1024px) and (max-width: 1179px) { .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Gallery: before/after cards show only the slider (no title or description under them) */
.ba-details { display: none !important; }
.gl-page-title { margin: 8px 0 32px; }

/* Gallery photos are view-only in the moving rows: no zoom icon, no pointer, no full-size pop-up */
.gallery-marquee-track .gallery-item { cursor: default; }
.gallery-marquee-track .gallery-overlay { display: none !important; }

/* Plans "How The Plan Works" (H2OBros layout): grey band, white boxes, a big numeral where the icon was; ours are brand blue */
.mp-how { background: rgb(243, 244, 247); }
.mp-how .mp-container { padding: 40px 20px; }
@media (min-width: 1024px) { .mp-how .mp-container { padding: 60px 20px; } }
.mp-how .mp-title, .mp-guarantee .mp-title, .mp-pricing .mp-title { line-height: 48px; }
@media (min-width: 1024px) { .mp-how .mp-title, .mp-guarantee .mp-title, .mp-pricing .mp-title { line-height: 60px; } }
.mp-step-num { width: 80px; height: 80px; margin: 0 0 24px; display: flex; align-items: center; justify-content: flex-start;
  font-family: "Archivo Black", "Arial Black", Impact, sans-serif; font-size: 88px; line-height: 1; color: rgb(var(--primary)); }
.mp-step h3 { line-height: 36px; }
/* Guarantee: its own full-width blue band */
.mp-guarantee { background: rgb(var(--primary)); padding: 60px 0; }
.mp-guarantee .mp-container { padding: 40px 20px; }
.mp-guarantee .mp-title { color: #fff; margin-bottom: 16px; }
.mp-guarantee .mp-sub { color: #fff; margin-bottom: 0; }
.mp-pricing { padding: 60px 0; }

/* Plans "Start Your Plan Today": on desktop the photo stretches from the screen edge to the form (was pushed off-screen, leaving only the grey tint) */
@media (min-width: 1024px) { .contact-v2-left > img { left: calc(min(0px, (var(--max) - 100vw) / 2) - 16px); width: calc(100% + max(0px, (100vw - var(--max)) / 2) + 16px); max-width: none; object-position: 50% 40%; } }

/* Contact form submit + legal links, as on the H2OBros form */
.lc-submit { background: rgb(52, 152, 219); font-size: 20px; font-weight: 400; letter-spacing: .01em; }
.lc-submit:hover:not(:disabled) { background: rgb(41, 128, 185); }
.lc-legal { margin-top: 32px; text-align: center; font-size: 14px; line-height: 21px; color: rgb(37, 99, 235); }
.lc-legal a { color: rgb(37, 99, 235); text-decoration: underline; text-underline-offset: 2px; }

/* Header: no grey line/shadow under the header bar */
.site-header { box-shadow: none !important; border-bottom: 0 !important; }
/* Topbar stars, as H2OBros: 16px orange-400 stars, slightly overlapped, 12px before the text */
.topbar-rating { gap: 12px; }
.tb-stars { display: inline-flex; color: rgb(251, 146, 60); filter: brightness(.95); }
.tb-stars svg { width: 16px; height: 16px; }
.tb-stars svg + svg { margin-left: -2px; }
.tb-stars svg { margin-right: 4px; }
/* Reviews heading block width, as H2OBros (576px on tablets, 768px on desktop) */
@media (min-width: 768px) { .testi-light-head > div { max-width: 36rem; } }
@media (min-width: 1024px) { .testi-light-head > div { max-width: 48rem; } }
/* Contact page photo: our brush-on-wet-glass shot behind the form */
.contact-page { background-image: url("../images/svc-window-brush.jpg"); background-position: 50% 30%; }

/* Plans hero, below desktop width: phone first, then the heading and buttons (H2OBros column-reverse) */
@media (max-width: 1023px) { .mock-hero .blue-hero-inner { flex-direction: column-reverse; } }

/* Plans steps: H2OBros grid (each box at least 250px, so 1 / 2 / 4 across by screen width) */
.mp-steps { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; gap: 32px; }
@media (max-width: 640px) { .mp-steps { gap: 24px; } }
/* Guarantee band: H2OBros box size (60px band padding + 60px inner padding, 60px title line, 48px under the text) */
.mp-guarantee .mp-container { padding: 60px 20px; }
.mp-guarantee .mp-title { line-height: 60px; }
.mp-guarantee .mp-sub { margin-bottom: 48px; color: rgba(255, 255, 255, .9); }
.mp-pricing .mp-plans-title { margin-top: 0; }

/* Area heroes: our job photos with the service-card blue tint (primary 10% -> 50%) over the photo half */
.sa-hero-tint { position: absolute; left: 0; top: 0; width: 100%; height: 12rem; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--primary), .10), rgba(var(--primary), .50)); }
@media (min-width: 768px) { .sa-hero-tint { height: 100%; width: 50%; } }
.sa-hero > img { filter: saturate(1.1) brightness(1.03); }
.sa-hero-container { position: relative; z-index: 2; }
/* Photo licence credit (Montreal skyline), as a quiet line at the very end of the page */
.page-credit { max-width: var(--max); margin: 0 auto; padding: 12px 16px; font-size: 12px; line-height: 18px; color: rgb(var(--d700)); text-align: center; }
.page-credit a { text-decoration: underline; }

/* "Start Your Plan Today": copy block sits at the top of its column like H2OBros (20px down on phones, 44px on desktop), never floating mid-column */
.contact-v2-copy { justify-content: flex-start; }
.contact-v2-left { padding-top: 20px; }
@media (min-width: 1024px) { .contact-v2-left { padding-top: 44px; } .contact-v2-copy p { max-width: 56rem; } }

/* About hero (H2OBros): heading line-height 1 from 640px, taller buttons, and the rating box: rating + stars on the left,
   customer count on the right (24px/600 over a 16px line), stars 4px apart */
@media (min-width: 640px) { .ab-hero h1 { line-height: 1; } }
.ab-hero .btn { padding: 14px 20px; min-height: 48px; }
.ab-hero-rating .col:first-child { gap: 8px; }
.ab-hero-rating .col-count { gap: 4px; }
.ab-hero-rating .col-count .sub { font-size: 16px; font-weight: 400; line-height: 24px; }
.ab-hero-rating .star-row { gap: 4px; }

/* Phones: the service hero photo simply fills the hero (no pinned layer), so it always fits the screen */
/* Phones keep the pinned scroll effect too; each photo's focus point (--pos) keeps its subject in frame */

/* Map credit: OpenStreetMap's licence requires it to stay visible, so it is kept but made as small and quiet as possible */
.leaflet-control-attribution { font-size: 9px !important; line-height: 12px !important; padding: 0 4px !important; background: rgba(255, 255, 255, .55) !important; color: rgba(51, 51, 51, .7) !important; }
.leaflet-control-attribution a { color: inherit !important; }

/* Gutter Guards "What's Included": outline icons drawn with strokes (no fill) */
.feature-icon.is-line svg { fill: none; stroke: currentColor; }

/* Phones (touch): the old Arctic site's card movement, copied exactly: while a finger is on the card the photo eases in
   to 120% from its top edge over 0.4s, and eases back when the finger lifts */
@media (hover: none) {
  .svc-card .svc-img { transform-origin: center top; transition: transform .4s cubic-bezier(.25, .46, .45, .94); }
  .svc-card.in-view .svc-img { transform: scale(1.2); }
}
.svc-hero > img.pin-layer { object-position: var(--pos, 50% 50%); }

/* Home hero light sweep: same 6 s glide, then a 12 s rest before it plays again (18 s cycle) */
@keyframes hero-shine { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 33.333% { transform: translateX(100%) translateY(100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } }
.hero-blue::after { animation: hero-shine 18s ease-in-out infinite; }

/* Closing "Get in touch / Call us" buttons on the blue sections: a size up on every screen */
.cta-shapes .btn, .cta-buttons .btn-cta-primary { font-size: 15px; line-height: 20px; min-height: 48px; padding: 12px 22px !important; display: inline-flex; align-items: center; justify-content: center; }
.cta-shapes .btn svg { width: 18px; height: 18px; }
@media (min-width: 640px) { .cta-shapes .btn, .cta-buttons .btn-cta-primary { font-size: 16px; min-height: 52px; padding: 14px 28px !important; } }
@media (min-width: 768px) { .cta-shapes .btn, .cta-buttons .btn-cta-primary { font-size: 17px; min-height: 56px; padding: 16px 34px !important; } }

/* Sweeps on H2OBros's exact timers: home hero = their blue service-card sweep (6 s), plans hero = their blue section sweep (8 s) */
.hero-blue::after { animation: shimmer 6s ease-in-out infinite; }
.blue-hero::after { top: -50%; bottom: auto; left: -50%; width: 200%; height: 200%; transform: none;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, .1) 50%, transparent 70%); animation: shimmer 8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-blue::after, .blue-hero::after { animation: none; } }

/* Home hero: still pictures in a random order, each held 6 s, 1.2 s cross-fade (two stacked layers) */
.hero-slides { position: absolute; inset: 0; overflow: hidden; }
.hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .hero-slides img { transition: none; } }

/* Desktop hero (phones unchanged): deep navy on the left behind the words, the photo clear and bright on
   the right, like H2OBros; and the whole hero, buttons included, fits on one screen. */
@media (min-width: 1024px) {
  .hero-blue .hero-dim { opacity: 0; }
  .hero-blue .hero-tint { background:
      linear-gradient(90deg, rgba(var(--d900), .86) 0%, rgba(var(--d900), .7) 30%, rgba(var(--d900), .28) 58%, rgba(var(--d900), 0) 80%),
      linear-gradient(to bottom, rgba(var(--primary), .08), rgba(var(--primary), .22)); }
  .hero-blue .hero-content { min-height: max(620px, calc(100vh - 164px)); padding-top: 72px; padding-bottom: 72px; }
  .hero-blue .hero-title { font-size: clamp(60px, 8.2vh, 80px); }
  .hero-blue .hero-title .accent { color: rgb(125, 185, 245); }
}

/* Hero rating badge is now one link to the Google reviews */
a.hero-rating { text-decoration: none; color: inherit; width: fit-content; transition: background-color .2s, transform .2s cubic-bezier(.4,0,.2,1); }
a.hero-rating:hover { background-color: rgba(255, 255, 255, .14); transform: translateY(-1px); }
a.hero-rating span { color: #fff; }



/* Submit button: a slow water wave rolls along the bottom and a light sweep passes now and then */
.lc-submit { position: relative; overflow: hidden; isolation: isolate; }
.lc-submit > span { position: relative; z-index: 2; }
.lc-submit::before { content: ""; position: absolute; left: 0; right: -200px; bottom: -6px; height: 26px; z-index: 1; pointer-events: none; opacity: .35;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='26' viewBox='0 0 200 26'%3E%3Cpath d='M0 13 Q25 2 50 13 T100 13 T150 13 T200 13 V26 H0Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x 0 0 / 200px 26px;
  animation: lc-wave 4.5s linear infinite; }
.lc-submit::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); animation: lc-shine 6s ease-in-out infinite; }

@keyframes lc-wave { to { transform: translateX(-200px); } }
@keyframes lc-shine { 0%, 70% { left: -40%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .lc-submit::before, .lc-submit::after { animation: none; } .lc-submit::after { display: none; } }

/* Menu opens and closes instantly, like H2OBros (no fade, no movement) */
.mobile-menu-panel { transition: none !important; }
/* About hero rating box, as H2OBros: rating + stars, then the count over one line of text */
.ab-hero-rating .col-count .big { font-size: 24px; font-weight: 500; line-height: 26px; }
.ab-hero-rating .col-count .sub { font-size: 16px; font-weight: 400; line-height: 24px; }
.ab-hero-rating .col:first-child a { font-weight: 600; }

/* EN | FR toggle: the active language is bold; Google's translate bar and tooltips stay hidden */
.lang-toggle .l-en, .lang-toggle .l-fr { opacity: .55; transition: opacity .2s; }
html:not([data-lang="fr"]) .lang-toggle .l-en, html[data-lang="fr"] .lang-toggle .l-fr { opacity: 1; font-weight: 800; }
body { top: 0 !important; }
.skiptranslate iframe, iframe.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; visibility: hidden !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style] { background: none !important; box-shadow: none !important; }

/* optional field hint */
.field label .opt, .cm-field label .opt { font-weight: 400; color: rgb(100, 116, 139); font-size: .9em; }