/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #FFFFFF;
    --bg-alt: #F7F5F2;
    --dark: #14161A;
    --dark-alt: #1B1E25;
    --dark-card: #232833;
    --text: #16181D;
    --muted: #5F6672;
    /* ===== BRAND COLOR SYSTEM =====
       The ONLY brand inputs are the four injected colors below. Every tint, glow,
       ring, and soft background is derived from them with color-mix, and all
       neutrals are untinted greys - so any client palette (warm, cool, muted,
       saturated) re-themes the entire template with no other edits. Never
       hardcode an accent-derived color; add a derived token here instead. */
    --accent: #bc924e;
    --accent-dark: #8e6420;
    --accent-2: #000000;
    --accent-2-dark: #000000;
    --on-accent: #FFFFFF;                                               /* text/icons on accent surfaces */
    --accent-soft: color-mix(in srgb, var(--accent) 9%, transparent);   /* icon chips, subtle fills */
    --accent-ring: color-mix(in srgb, var(--accent) 15%, transparent);  /* focus rings */
    --accent-glow: color-mix(in srgb, var(--accent) 30%, transparent);  /* button glow shadows */
    --accent-line: color-mix(in srgb, var(--accent) 35%, transparent);  /* hover borders */
    --accent-on-dark: color-mix(in srgb, var(--accent) 55%, #ffffff);    /* accent legible on dark sections, any hue */
    --white: #FFFFFF;
    --card: #F1F1F1;   /* neutral surface for stat + form cards */
    --hero-overlay: linear-gradient(105deg, rgba(9,12,16,0.74) 0%, rgba(9,12,16,0.46) 44%, rgba(9,12,16,0.14) 76%, rgba(9,12,16,0.05) 100%),
                    linear-gradient(180deg, rgba(9,12,16,0.30) 0%, rgba(9,12,16,0) 26%, rgba(9,12,16,0.42) 100%);
    /* Dropdown glass while the nav is still transparent over the hero. Same family as the hero
       overlay and the proof bar, so a menu opened at the top of the page belongs to the photo
       behind it instead of punching a pale rectangle through it. */
    --menu-dark: rgba(14, 18, 24, 0.93);
    --border: rgba(16, 20, 28, 0.08);
    --shadow-xs: 0 1px 2px rgba(16,20,28,0.05), 0 2px 8px rgba(16,20,28,0.04);
    --shadow-sm: 0 2px 4px rgba(16,20,28,0.04), 0 10px 28px rgba(16,20,28,0.08);
    --shadow-md: 0 4px 10px rgba(16,20,28,0.05), 0 20px 48px rgba(16,20,28,0.12);
    --shadow-lg: 0 10px 24px rgba(16,20,28,0.10), 0 36px 90px rgba(16,20,28,0.20);
    --radius: 20px;
    --radius-sm: 14px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.35s var(--ease);

    /* The ranneyblair.com pairing (a reference site the operator loves): Noto Serif Display for
       headers, Lato for body + UI. High-contrast editorial serif (not the played-out Playfair),
       sturdy at 600 over a photo; Lato is warm and humanist. Lato ships only 400/700/900, so the
       browser maps any 500 request to 400 and any 600 to 700 - which is why UI labels read as a
       clean bold rather than a mid-weight. Two-font system, fully tokenized. */
    --font-display: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
    --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: var(--transition); }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }

.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.12;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent);
    font-size: 12px;
    margin-bottom: 12px;
}
.eyebrow::before {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--accent);
    flex-shrink: 0;
}
/* On dark/photo sections the accent may not have enough contrast - use a neutral. */
.hero .eyebrow, .page-hero .eyebrow, .final-cta .eyebrow,
.faq .eyebrow, .cta-band .eyebrow, .why .eyebrow, .services .eyebrow, .reviews .eyebrow { color: rgba(255,255,255,0.75); }

/* Lucide icon defaults - one library, one stroke weight everywhere */
[data-lucide], svg.lucide {
    width: 1em;
    height: 1em;
    stroke-width: 1.75;
    flex-shrink: 0;
}

.anim-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.anim-fade-up.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .anim-fade-up { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 32px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: 15.5px;
    line-height: 1.2;
    white-space: nowrap;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.btn--lg { padding: 17px 36px; font-size: 16.5px; }
.btn--primary {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 2px 8px var(--accent-glow), var(--shadow-xs);
}
.btn--primary:hover {
    background: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px var(--accent-glow), var(--shadow-sm);
}
.btn--white { background: var(--white); color: var(--dark); box-shadow: var(--shadow-sm); }
.btn--white:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--dark { background: var(--dark); color: var(--white); }
.btn--dark:hover { background: #000; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline-white {
    background: rgba(255,255,255,0.04);
    color: var(--white);
    border: 1.5px solid rgba(255,255,255,0.55);
    backdrop-filter: blur(4px);
}
.btn--outline-white:hover { background: rgba(255,255,255,0.14); border-color: var(--white); transform: translateY(-2px); }
.btn--outline-dark {
    background: var(--white);
    color: var(--dark);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-xs);
}
.btn--outline-dark:hover { border-color: var(--dark); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--block { width: 100%; }
/* On photo/dark backgrounds the primary CTA stays SOLID brand color (the elite-contractor
   convention: the reference sites all run solid CTAs on the hero photo). A frosted button
   reads as disabled against a busy image. */
.hero__actions .btn--primary,
.page-hero__actions .btn--primary,
.cta-band__actions .btn--primary {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.28), 0 2px 10px var(--accent-glow);
}
.hero__actions .btn--primary:hover,
.page-hero__actions .btn--primary:hover,
.cta-band__actions .btn--primary:hover {
    background: var(--accent-dark);
    box-shadow: 0 16px 40px rgba(0,0,0,0.32), 0 0 0 4px var(--accent-glow);
    transform: translateY(-2px);
}

/* ===== HERO ENTRANCE (load-time, staggered; the rule draws in) ===== */
@keyframes heroRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroRule { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.hero__social-proof, .hero__eyebrow, .hero__headline, .hero__sub, .hero__actions {
    animation: heroRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero__rule { animation: heroRule 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }
.hero__social-proof { animation-delay: 0.05s; }
.hero__eyebrow { animation-delay: 0.15s; }
.hero__headline { animation-delay: 0.28s; }
.hero__sub { animation-delay: 0.62s; }
.hero__actions { animation-delay: 0.75s; }
@media (prefers-reduced-motion: reduce) {
    .hero__social-proof, .hero__eyebrow, .hero__headline, .hero__sub, .hero__actions, .hero__rule { animation: none; }
}

/* ===== NAVIGATION ===== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    height: 84px;
    /* Keep the bar clear of the notch / Dynamic Island on edge-to-edge iOS */
    height: calc(84px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.nav.is-scrolled {
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--border), 0 8px 30px rgba(16,20,28,0.08);
}
/* While the full-width services sheet is open the bar takes the sheet's tone and drops its lower
   edge, so the two are a single continuous surface. Which tone depends on where the page is: over
   the hero both are the dark glass the bar already sits in, and once scrolled both are pale. */
.nav.has-mega-open {
    box-shadow: none;
}
.nav.has-mega-open:not(.is-scrolled) {
    background: var(--menu-dark);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.nav.has-mega-open.is-scrolled {
    background: var(--bg-alt);
}
.nav__inner {
    max-width: 1320px;
    margin: 0 auto;
    height: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.nav__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(16px, 3.6vw, 21px);
    color: var(--white);
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
    transition: color 0.35s var(--ease), text-shadow 0.35s var(--ease);
}
.nav.is-scrolled .nav__logo { color: var(--dark); text-shadow: none; }
.nav__logo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__logo.has-image-logo .nav__logo-text { display: none; }
.nav__logo-badge {
    /* Per-site logo size (set in the factory). The bar's height is fixed independently, and the
       76px cap guarantees the logo can never overflow it - so the nav bar never changes size. */
    height: 76px;
    max-height: 76px;
    max-width: 300px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav__logo-badge img { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }
.nav__logo-badge span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--on-accent);
    font-size: 16px;
    background: var(--accent);
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    transition: box-shadow 0.35s var(--ease);
}
.nav.is-scrolled .nav__logo-badge span { box-shadow: none; }

.nav__links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
}
.nav__links > li { position: relative; }
.nav__links a,
.nav__links button.nav__link {
    font-size: 15px;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--white);
    font-weight: 500;
    font-size: 15px;
    padding: 10px 16px;
    border-radius: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
    transition: color 0.3s var(--ease), text-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.nav.is-scrolled .nav__links a,
.nav.is-scrolled .nav__links button.nav__link { color: var(--text); text-shadow: none; }
/* Hover = accent underline only; text keeps its color so it stays readable
   over both the transparent-dark and scrolled-white nav states. */
.nav__links > li > a,
.nav__links > li > button.nav__link { position: relative; }
.nav__links > li > a::after,
.nav__links > li > button.nav__link::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 5px;
    height: 2px;
    /* white over the transparent-dark hero state; accent once the nav turns white -
       a dark client accent would vanish against the hero photo */
    background: rgba(255,255,255,0.9);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
}
.nav.is-scrolled .nav__links > li > a::after,
.nav.is-scrolled .nav__links > li > button.nav__link::after { background: var(--accent); }
.nav__links > li > a:hover::after,
.nav__links > li > button.nav__link:hover::after { transform: scaleX(1); }

.nav__chevron { transition: transform 0.3s var(--ease); }
.has-dropdown.is-open .nav__chevron,
.has-dropdown:hover .nav__chevron { transform: rotate(180deg); }

/* Dropdown - fade + slide down, soft shadow, accent bar per item */
.dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    min-width: 230px;
    /* Warm off-white over a frosted blur rather than flat #FFF: pure white reads as a foreign
       rectangle punched into the hero photo, while this picks up what's behind it and matches the
       paper tone the rest of the template uses. */
    /* 96%, not lower: enough for the blur behind it to pick up the page's tone, opaque enough that
       text or card edges underneath never ghost through the menu labels. */
    background: color-mix(in srgb, var(--bg-alt) 96%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-radius: 0;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.dropdown::before {
    /* invisible hover bridge so the pointer can travel from trigger to panel */
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}
.has-dropdown.is-open .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.dropdown li a,
.nav.is-scrolled .dropdown li a {
    display: block;
    padding: 11px 16px;
    border-radius: 0;
    border-left: 2px solid transparent;
    color: var(--text);
    font-weight: 500;
    font-size: 14.5px;
    text-shadow: none;
}
.dropdown li a:hover,
.nav.is-scrolled .dropdown li a:hover {
    /* An accent tint, not --bg-alt: the panel itself is now that tone, so a grey hover would be
       invisible. */
    background: var(--accent-soft);
    border-left-color: var(--accent);
    color: var(--text);
}

/* ---- Mega menu ------------------------------------------------------------------------------
   A remodeler with a dozen services produced a single column tall enough to run off the bottom of
   the screen. Past a handful of services the generator promotes the panel to a full-bleed sheet
   under the bar - a grid of photo cards reading left-to-right, the way the big builder sites do it.
   The `is-mega` flag is set by the generator on BOTH the <li> and the <ul>: the li needs
   position:static so the panel can size itself against the fixed nav (i.e. the whole viewport)
   instead of against the narrow Services trigger. */
.nav__links > li.is-mega { position: static; }

.dropdown.is-mega {
    left: 0;
    right: 0;
    width: 100%;
    /* Pale by default (the scrolled state, where the page behind is white). The dark-glass variant
       for an unscrolled hero is further down, keyed off the nav. */
    background: var(--bg-alt);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Flush under the bar - no gap for the pointer to fall through, so no hover bridge needed. */
    top: 100%;
    display: grid;
    /* Six across keeps even a 15-service list to three shallow rows, so the sheet never eats the
       whole screen the way five larger cards did. */
    grid-template-columns: repeat(6, 1fr);
    gap: 14px 16px;
    /* Full-bleed panel, content held to the same 1320px rhythm as the nav bar above it. */
    padding: 22px max(32px, calc((100% - 1320px) / 2)) 18px;
    /* No side or top edges: the bar above is the same surface, so a top hairline would draw a line
       through the middle of it. */
    border-left: 0;
    border-right: 0;
    border-top: 0;
    /* Two rows, never more - the generator caps how many cards it renders, this is the backstop. */
    grid-auto-rows: minmax(0, auto);
    overflow: hidden;
    /* Smoother than the small dropdown: longer, and on a decelerating curve so it settles rather
       than snapping. */
    transform: translateY(-10px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.46s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.46s;
}
.has-dropdown.is-open .dropdown.is-mega { transform: translateY(0); }

.dropdown.is-mega > li { display: block; }
.dropdown.is-mega > li > a {
    display: block;
    padding: 0;
    border-left: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: transparent;
    /* Each card lifts slightly on hover - the same easing as the panel. */
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s var(--ease);
}
.dropdown.is-mega > li > a:hover {
    background: var(--accent-soft);
    border-left: 0;
    transform: translateY(-3px);
}
.dropdown__thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--card);
}
.dropdown__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease);
}
.dropdown.is-mega > li > a:hover .dropdown__thumb img { transform: scale(1.05); }
.dropdown__label { display: block; padding: 9px 10px 10px; font-size: 14px; line-height: 1.3; }

/* The small (few-services) dropdown keeps its plain text list - same markup, no photos. */
.dropdown:not(.is-mega) .dropdown__thumb { display: none; }
.dropdown:not(.is-mega) .dropdown__label { padding: 0; }

/* The last cell closes the grid. It mirrors a service card exactly - same thumb-sized block on top,
   same label underneath - so it sits in the rhythm rather than interrupting it as a dashed box did. */
.dropdown.is-mega .dropdown__all-tile > a {
    display: block;
    padding: 0;
    background: transparent;
}
.dropdown__all-art {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-alt));
    color: var(--accent);
    transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.dropdown__all-art svg { width: 26px; height: 26px; }
.dropdown.is-mega .dropdown__all-tile > a:hover .dropdown__all-art {
    background: var(--accent);
    color: var(--on-accent);
}
.dropdown.is-mega .dropdown__all-tile .dropdown__label { font-weight: 700; padding-bottom: 0; }
.dropdown.is-mega .dropdown__all-count {
    display: block;
    padding: 0 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
}

/* In the small (few-services) dropdown the tile collapses back to a plain text link. */
.dropdown:not(.is-mega) .dropdown__all-count,
.dropdown:not(.is-mega) .dropdown__all-art { display: none; }

@media (max-width: 1240px) { .dropdown.is-mega { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1024px) { .dropdown.is-mega { grid-template-columns: repeat(4, 1fr); } }

/* ---- Dark skin: menus opened while the bar is still transparent over the hero ----------------
   A pale panel dropped out of a transparent bar was the jarring part: the bar read as part of the
   photo and the menu read as a separate white box stapled underneath. Over the hero both are now
   the same dark glass; the moment the page scrolls and the bar turns pale, so does the menu. */
.nav:not(.is-scrolled) .dropdown {
    background: var(--menu-dark);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 24px 60px rgba(6, 9, 13, 0.45);
}
.nav:not(.is-scrolled) .dropdown li a,
.nav:not(.is-scrolled) .dropdown .dropdown__label { color: var(--white); }
.nav:not(.is-scrolled) .dropdown li a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: var(--accent-on-dark);
    color: var(--white);
}
.nav:not(.is-scrolled) .dropdown.is-mega > li > a:hover { background: rgba(255, 255, 255, 0.08); }
.nav:not(.is-scrolled) .dropdown .dropdown__all-count { color: rgba(255, 255, 255, 0.55); }
.nav:not(.is-scrolled) .dropdown .dropdown__all-art {
    background: rgba(255, 255, 255, 0.09);
    color: var(--accent-on-dark);
}
.nav:not(.is-scrolled) .dropdown.is-mega .dropdown__all-tile > a:hover .dropdown__all-art {
    background: var(--accent);
    color: var(--on-accent);
}
.nav:not(.is-scrolled) .dropdown:not(.is-mega) .dropdown__all { border-top-color: rgba(255, 255, 255, 0.14); }
.nav:not(.is-scrolled) .dropdown__thumb { background: rgba(255, 255, 255, 0.06); }

.nav__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    background: transparent;
    color: var(--white);
    font-family: var(--font-sans);
    font-weight: 700;
    padding: 11px 6px;
    font-size: 15.5px;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
    border-bottom: 2px solid transparent;
    transition: color 0.35s var(--ease), border-color 0.25s var(--ease), text-shadow 0.35s var(--ease);
}
.nav__phone:hover { border-bottom-color: currentColor; }
.nav.is-scrolled .nav__phone { color: var(--dark); text-shadow: none; }
.nav__cta { padding: 11px 18px; font-size: 15px; }

.nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.nav__toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--white); transition: var(--transition), background-color 0.3s var(--ease); }
.nav.is-scrolled .nav__toggle span,
.nav__toggle.is-active span { background: var(--dark); }
.nav__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-active span:nth-child(2) { opacity: 0; }
.nav__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background: var(--white);
    z-index: 99;
    padding: 108px 30px 40px;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
}
.nav__mobile.is-open { transform: translateX(0); }
.nav__mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10,12,16,0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 98;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.nav__mobile-backdrop.is-open { opacity: 1; visibility: visible; }
.nav__mobile ul { display: flex; flex-direction: column; margin-bottom: 30px; }
.nav__mobile ul li {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.nav__mobile.is-open ul li { opacity: 1; transform: translateX(0); }
.nav__mobile.is-open ul li:nth-child(1) { transition-delay: 0.06s; }
.nav__mobile.is-open ul li:nth-child(2) { transition-delay: 0.11s; }
.nav__mobile.is-open ul li:nth-child(3) { transition-delay: 0.16s; }
.nav__mobile.is-open ul li:nth-child(4) { transition-delay: 0.21s; }
.nav__mobile.is-open ul li:nth-child(5) { transition-delay: 0.26s; }
.nav__mobile.is-open ul li:nth-child(6) { transition-delay: 0.31s; }
.nav__mobile.is-open ul li:nth-child(n+7) { transition-delay: 0.36s; }
.nav__mobile ul li a {
    display: block;
    padding: 15px 4px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 21px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.nav__mobile ul li a:hover { padding-left: 10px; }
.nav__mobile .btn { width: 100%; }

/* ===== HERO ===== */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh; /* fill the visible viewport on mobile without the URL-bar jump */
    display: flex;
    align-items: center;
    background: var(--dark);
    /* The Ken Burns pan scales .hero__bg up to 1.13, which without this spills the photo ~55px past
       the section on every side. The bottom spill was the visible one: it ran on underneath the
       trust bar, so the bar read as floating in the photo instead of sitting at its base. The
       closing scenic section clips its scaled background for the same reason. */
    overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: var(--hero-overlay); }
.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 168px;
    padding-bottom: 176px;
}
.hero__content { display: flex; flex-direction: column; align-items: center; }

/* Social proof: stars + a single legible rating line, centered. */
.hero__social-proof {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
    padding: 8px 18px 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero__avatars { display: inline-flex; }
.hero__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left: -9px;
    /* Stack front-to-back left-to-right: Google on top, then Facebook, Thumbtack at the back.
       Source order alone would paint it the other way round (later siblings win), burying Google -
       the badge that carries the rating - under the other two. */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 2px solid rgba(20,22,26,0.85);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.hero__avatars .hero__avatar:first-child { margin-left: 0; }
.hero__avatars .hero__avatar:nth-child(1) { z-index: 3; }
.hero__avatars .hero__avatar:nth-child(2) { z-index: 2; }
.hero__avatars .hero__avatar:nth-child(3) { z-index: 1; }
.hero__avatar--fb { background: #1877F2; }
.hero__avatar--tt { background: #009FD9; }
.hero__rating-block { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.hero__rating-top { display: inline-flex; align-items: center; gap: 6px; }
.hero__rating-stars { color: #FBBC05; font-size: 13px; letter-spacing: 1.5px; line-height: 1; }
.hero__rating-num { color: var(--white); font-weight: 700; font-size: 13.5px; line-height: 1; font-family: var(--font-sans); }
.hero__rating-meta { font-size: 12px; color: rgba(255,255,255,0.82); line-height: 1; }

.hero__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 13px;
    color: rgba(255,255,255,0.82);
    margin-bottom: 18px;
}
.hero__headline {
    color: var(--white);
    font-weight: 600;
    font-size: clamp(40px, 5.6vw, 70px);
    letter-spacing: -0.01em;
    line-height: 1.08;
    margin-bottom: 0;
    max-width: 16ch;
    text-wrap: balance;
    text-shadow: 0 2px 28px rgba(0,0,0,0.32);
}
/* The thin rule under the headline (the CGN signature) - centered, draws itself in from the middle. */
.hero__rule {
    width: 128px;
    height: 2px;
    background: rgba(255,255,255,0.7);
    margin: 28px auto 24px;
    transform-origin: center;
}
.hero__sub {
    color: rgba(255,255,255,0.94);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(17px, 1.9vw, 21px);
    max-width: 620px;
    margin: 0 auto 40px;
}
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ===== PROOF BAR - full-width auto-sliding marquee, seated in the base of the hero ===== */
.proof-stats {
    --proof-h: 90px;
    position: relative;
    z-index: 20;
    /* The band is seated in the base of the hero: pulled up by its full height so its bottom edge
       lands exactly on the hero's, and no negative bottom margin so it never floats over the section
       below. Same on every screen size - the hero is a plain full-viewport block, so its bottom edge
       is the photo's bottom edge on mobile too. */
    margin-top: calc(var(--proof-h) * -1);
    margin-bottom: 0;
}
.proof-bar {
    height: var(--proof-h);
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: rgba(16, 20, 26, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.14);
    /* No bottom border and the shadow casts upward: the band ends where the hero ends, so it sits ON
       the seam rather than over the section below - a lower hairline and a downward shadow would
       both read as it floating. */
    box-shadow: 0 -18px 46px rgba(10,14,20,0.28);
}
.proof-bar__track {
    display: flex;
    width: max-content;
    animation: proofSlide 48s linear infinite;
}
.proof-bar:hover .proof-bar__track { animation-play-state: paused; }
@keyframes proofSlide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) {
    .proof-bar__track { animation: none; }
}
.proof-bar__set { display: flex; align-items: center; flex-shrink: 0; }
.proof-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 34px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.82);
    white-space: nowrap;
}
.proof-bar__item strong { color: var(--white); font-weight: 700; }
.proof-bar__stars { color: #FBBC05; font-size: 12px; letter-spacing: 1px; }
.proof-bar__g { flex-shrink: 0; }
/* Diamond divider between items */
.proof-bar__sep {
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    transform: rotate(45deg);
    background: rgba(255,255,255,0.28);
}

/* ===== INTRO + MAP ===== */
.intro { padding: 100px 0; background: var(--bg); }
.intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.intro__content h2 {
    font-size: clamp(28px, 3.6vw, 42px);
    margin-bottom: 18px;
    color: var(--text);
}
.intro__content p { color: var(--muted); font-size: 16.5px; margin-bottom: 28px; }
.intro__content p strong { color: var(--text); }
.intro__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.intro__photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; }
.intro__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ===== SERVICES ===== */
.services { padding: 110px 0; background: var(--dark-alt); }
.section-header { text-align: center; max-width: 680px; margin: 0 auto 60px; }
.section-header h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 14px; color: var(--text); text-wrap: balance; }
.section-header p { color: var(--muted); font-size: 16.5px; }
.services__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 44px; }
.services__header h2 { font-size: clamp(30px, 4vw, 42px); color: var(--white); }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.service-card {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.service-card:hover img { transform: scale(1.06); }
.service-card__face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 22px;
    background: linear-gradient(to top, rgba(10,12,16,0.8) 0%, rgba(10,12,16,0.25) 45%, transparent 65%);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 19px;
    transition: opacity 0.35s var(--ease);
}
.service-card__back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    background: linear-gradient(160deg, rgba(17,19,24,0.96) 0%, rgba(17,19,24,0.86) 100%);
    color: var(--white);
    opacity: 0;
    transition: opacity 0.35s var(--ease);
}
.service-card:hover .service-card__face,
.service-card.is-flipped .service-card__face { opacity: 0; }
.service-card:hover .service-card__back,
.service-card.is-flipped .service-card__back { opacity: 1; }
.service-card__back h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
}
.service-card__back p { font-size: 14.5px; line-height: 1.55; opacity: 0.94; }
.service-card__arrow {
    width: 38px;
    height: 38px;
    border-radius: 0;
    background: var(--accent);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    transition: transform 0.35s var(--ease);
}
.service-card:hover .service-card__arrow { transform: translateX(3px); }
.service-card__back .service-card__arrow { background: var(--accent); box-shadow: none; }
.service-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--white);
}

/* ===== ABOUT / BEFORE-AFTER ===== */
.about { padding: 130px 0 110px; background: var(--bg); }
/* stretch, not center: the photo column matches the height of the text beside it so the two halves
   of the section square off instead of the image floating in the middle of a taller column. */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
.about__content { display: flex; flex-direction: column; }
.about__content h2 { font-size: clamp(30px, 3.8vw, 46px); margin-bottom: 18px; color: var(--text); text-wrap: balance; }
.about__content p { color: var(--muted); font-size: 16.5px; margin-bottom: 30px; }
.about__content p strong { color: var(--text); }
/* Side by side, always. At full width these two labels total just over the half-column they sit in,
   so the default flex-wrap dropped the second button onto its own line. Equal flex shares with
   tighter padding keeps them on one row without shortening the copy. */
.about__content .intro__actions { margin-top: auto; flex-wrap: nowrap; }
.about__content .intro__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-left: 18px;
    padding-right: 18px;
    white-space: nowrap;
}
.about__media { display: flex; }

/* Stats as one quiet inline strip divided by hairlines - no boxes. Smaller and calmer than four
   cards, which competed with the before/after image next to them. */
.about__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin-bottom: 32px;
    padding: 18px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.about-stat {
    /* min-width:0 so four stats stay on ONE line in a half-width column - the labels wrap inside
       their own cell instead of pushing a stat onto an orphan second row. */
    flex: 1 1 0;
    min-width: 0;
    padding: 2px 14px;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}
.about-stat:first-child { border-left: 0; padding-left: 0; }
.about-stat__value {
    display: block;
    font-family: var(--font-sans);
    font-weight: 800;
    letter-spacing: -0.02em;
    /* Every stat renders at exactly this size and line box, so "12+", "347+" and "4.9*" read as one
       set rather than three differently-weighted numbers. */
    font-size: 22px;
    color: var(--text);
    line-height: 1.2;
    height: 1.2em;
    margin-bottom: 6px;
}
.about-stat__label {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.3;
    /* Two lines reserved whether the label needs them or not - otherwise "GOOGLE RATING" sits on one
       line beside two-line neighbours and the strip reads ragged. */
    min-height: 2.6em;
}

.ba-slider {
    position: relative;
    width: 100%;
    /* Fills the column so it matches the text height (see .about__grid); the ratio is the floor for
       pages where it isn't in a two-column grid. */
    flex: 1;
    min-height: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    box-shadow: var(--shadow-lg);
}
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-slider__before { z-index: 1; }
.ba-slider__after { z-index: 2; clip-path: inset(0 50% 0 0); }
.ba-slider__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--white);
    box-shadow: 0 0 12px rgba(0,0,0,0.35);
    z-index: 3;
    transform: translateX(-50%);
}
.ba-slider__knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid rgba(16,20,28,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    box-shadow: var(--shadow-md);
    transition: transform 0.25s var(--ease);
}
.ba-slider:active .ba-slider__knob { transform: translate(-50%, -50%) scale(1.08); }
.ba-slider__label {
    position: absolute;
    top: 18px;
    z-index: 3;
    background: rgba(20,22,26,0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 7px 16px;
    border-radius: 0;
}
.ba-slider__label--before { right: 18px; }
.ba-slider__label--after { left: 18px; }

/* ===== WHY CHOOSE US ===== */
.why { padding: 110px 0; background: var(--dark); }
.why .section-header h2 { color: var(--white); }
.why .section-header p { color: rgba(255,255,255,0.65); }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-card {
    text-align: center;
    background: var(--dark-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius);
    padding: 34px 28px;
    transition: var(--transition);
}
.why-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.14); }
.why-icon {
    width: 60px;
    height: 60px;
    border-radius: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 26px;
    margin: 0 auto 18px;
}
.why-card h3 {
    color: var(--white);
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
}
.why-card p { color: rgba(255,255,255,0.62); font-size: 15px; }

/* ===== PROJECTS CAROUSEL (home) ===== */
.projects__track-wrap { overflow: hidden; padding: 8px 4px 20px; margin: -8px -4px -8px; }
.projects__track { display: flex; gap: 26px; transition: transform 0.55s var(--ease); }
.projects__track .project-card { flex: 0 0 calc(33.333% - 17.34px); }
.projects__dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.projects__dots:empty { display: none; }
.projects__dot { width: 8px; height: 8px; background: rgba(16,20,28,0.16); transition: var(--transition); }
.projects__dot.is-active { background: var(--accent); width: 24px; }

/* ===== PROJECTS GALLERY ===== */
.projects { padding: 110px 0; background: var(--bg-alt); }
.projects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.project-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.project-card:hover img { transform: scale(1.07); }
.project-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,12,16,0.85) 0%, rgba(10,12,16,0.2) 45%, transparent 62%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
}
.project-card__overlay h3 {
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    transform: translateY(0);
    transition: transform 0.4s var(--ease);
}
.project-card:hover .project-card__overlay h3 { transform: translateY(-2px); }
.project-card__overlay span { color: rgba(255,255,255,0.75); font-size: 13.5px; }

/* ===== PROCESS ===== */
.process { padding: 110px 0; background: var(--bg-alt); }
/* Wider than the default 680px header so the trade name doesn't push the headline to three lines. */
.process .section-header { max-width: 860px; }
/* auto-fit, so a four-step trade and a six-step one both lay out on one clean line rather than
   leaving an orphan card on a second row. */
.process__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 26px; }
.process-step {
    position: relative;
    padding: 26px 20px 22px 0;
    /* A rule across the top of each step reads as one continuous track through the sequence -
       lighter and more "steps" than four separate boxes. */
    border-top: 2px solid var(--border);
    transition: border-color 0.35s var(--ease);
}
.process-step:hover { border-top-color: var(--accent); }

/* ---- Four-step connected-track variant (home page) ----------------------------------------- */
/* No cards. One rule runs behind the whole row and each step's icon sits ON it, so the four read as
   one sequence rather than four separate boxes. The line is a pseudo-element on the grid (not a
   per-step border) so the grid gaps don't chop it into segments. */
.process__grid--simple {
    position: relative;
    --step-gap: 34px;
    --step-icon: 68px;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--step-gap);
}
.process__grid--simple::before {
    content: '';
    position: absolute;
    /* Sits on the icons' centre line. It starts at the first icon (which is flush with the
       container's left edge) and stops at the centre of the LAST icon - one column width minus half
       an icon - rather than dangling off to the right of the final step. */
    top: calc(var(--step-icon) / 2);
    left: 0;
    right: calc((100% - 3 * var(--step-gap)) / 4 - var(--step-icon) / 2);
    height: 2px;
    background: var(--border);
}
.process-step--line {
    position: relative;
    border-top: 0;
    padding: 0;
    text-align: left;
}
/* Icon disc - stroke inherits currentColor, so it re-tints with the client's accent automatically.
   Opaque fill (the same tone --accent-soft resolves to over this section) so it masks the track
   running behind it instead of letting the line cut through the icon. */
.process-step__icon {
    position: relative;
    width: var(--step-icon, 68px);
    height: var(--step-icon, 68px);
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-alt));
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 0 0 6px var(--bg-alt);
    transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.process-step__icon svg { width: 32px; height: 32px; }
.process-step--line:hover .process-step__icon { background: var(--accent); color: var(--on-accent); }
.process-step--line .process-step__num { font-size: 26px; margin-bottom: 8px; }
.process-step--line h3 { font-size: 18.5px; margin-bottom: 8px; }
.process-step--line p { font-size: 15px; line-height: 1.65; }

@media (max-width: 1024px) {
    .process__grid--simple { grid-template-columns: repeat(2, 1fr); gap: 40px 34px; }
    /* Two rows means only the first would sit on the track - drop it rather than half-draw it. */
    .process__grid--simple::before { display: none; }
}
@media (max-width: 640px) { .process__grid--simple { grid-template-columns: 1fr; } }
.process-step__num {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 30px;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 12px;
}
.process-step h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.process-step p { color: var(--muted); font-size: 15px; }

/* ===== REVIEWS ===== */
.reviews { padding: 110px 0; background: var(--dark-alt); overflow: hidden; }
.reviews__track-wrap { overflow: hidden; padding: 8px 4px 24px; margin: -8px -4px -8px; }
.reviews__track { display: flex; gap: 28px; transition: transform 0.55s var(--ease); }
.review-card {
    flex: 0 0 calc(33.333% - 19px);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    position: relative;
    box-shadow: var(--shadow-xs);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.review-card__google { position: absolute; top: 26px; right: 26px; }
.review-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.review-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    flex-shrink: 0;
}
.review-card__name { font-weight: 600; font-size: 15px; }
.review-card__sub { color: var(--muted); font-size: 13px; }
.review-card__rating { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.stars { color: #FBBC05; letter-spacing: 2px; }
.review-text { color: var(--muted); font-size: 15px; line-height: 1.65; }
.review-card.is-expanded .review-text { -webkit-line-clamp: unset; }
.review-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-card__more { color: var(--accent); font-weight: 600; font-size: 13.5px; margin-top: 10px; }
.review-card__more:hover { color: var(--accent-dark); }
.reviews__dots { display: none; justify-content: center; gap: 8px; margin-top: 32px; }
.reviews__dot { width: 8px; height: 8px; background: rgba(16,20,28,0.16); transition: var(--transition); }
.reviews__dot.is-active { background: var(--accent); width: 24px; }

/* Reviews on dark: cards, text, dots, and link recolored for the dark section.
   Scoped to .reviews (home) so the light .reviews-page grid is unaffected. */
.reviews .section-header h2 { color: var(--white); }
.reviews .review-card { background: var(--dark-card); border-color: rgba(255,255,255,0.08); box-shadow: none; }
.reviews .review-card:hover { border-color: rgba(255,255,255,0.16); box-shadow: none; }
.reviews .review-card__name { color: var(--white); }
.reviews .review-card__sub { color: rgba(255,255,255,0.55); }
.reviews .review-text { color: rgba(255,255,255,0.72); }
.reviews .review-card__more { color: var(--accent-on-dark); }
.reviews .review-card__more:hover { color: var(--white); }
.reviews .reviews__dot { background: rgba(255,255,255,0.25); }
.reviews .reviews__dot.is-active { background: var(--accent-on-dark); }

/* ===== RESOURCES ===== */
/* ===== FAQ ===== */
.faq { position: relative; padding: 120px 0 110px; background: var(--dark-alt); }
.faq::before {
    /* subtle diagonal transition from the light section above */
    content: '';
    position: absolute;
    top: -56px;
    left: 0;
    right: 0;
    height: 57px;
    background: var(--dark-alt);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    pointer-events: none;
}
.faq .section-header h2 { color: var(--white); }
.faq .section-header p { color: rgba(255,255,255,0.65); }
.faq__list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: var(--dark-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 0.3s var(--ease);
}
.faq-item.is-open { border-color: rgba(255,255,255,0.16); }
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    text-align: left;
    color: var(--white);
    font-weight: 500;
    font-size: 16.5px;
    transition: color 0.3s var(--ease);
}
.faq-q:hover { color: rgba(255,255,255,0.85); }
.faq-q__icon {
    width: 30px;
    height: 30px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-on-dark);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.faq-item.is-open .faq-q__icon { transform: rotate(45deg); background: var(--accent); color: var(--white); border-color: transparent; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-a p { color: rgba(255,255,255,0.62); padding: 0 24px 22px; font-size: 15px; }

/* ===== SERVICE AREAS ===== */
.areas { padding: 90px 0; background: var(--bg); }
.areas__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.area-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0;
    font-weight: 500;
    font-size: 14.5px;
    color: var(--text);
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}
.area-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--accent-line); }
.area-pill [data-lucide],
.area-pill svg.lucide { color: var(--accent); font-size: 15px; }
.areas__map {
    margin-top: 40px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.areas__map iframe { width: 100%; height: 100%; min-height: 460px; border: none; display: block; filter: saturate(0.9); }

/* Map + "how to reach us" side by side, the pair centered under a centered header. The map takes
   the larger share - it is the thing people actually scan for their own town. */
.areas__panel {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    gap: 28px;
    align-items: stretch;
    margin-top: 40px;
}
.areas__panel .areas__map { margin: 0; height: 100%; }
.areas__contact {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.areas__contact h3 { font-size: 23px; font-weight: 700; margin-bottom: 8px; }
.areas__contact > p { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.areas__contact-list { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
.areas__contact-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; color: var(--text); }
.areas__contact-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.areas__contact-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 1px;
}
.areas__contact-list a { color: var(--text); font-weight: 600; }
.areas__contact-list a:hover { color: var(--accent); }
.areas__contact-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.areas__contact-actions .btn { width: 100%; }

@media (max-width: 900px) {
    .areas__panel { grid-template-columns: 1fr; }
    .areas__map iframe { min-height: 340px; }
}

/* ===== SCENIC CTA ===== */
.final-cta {
    position: relative;
    padding: 120px 0;
    background: var(--dark);
    overflow: hidden;
}
.final-cta__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.final-cta__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(16,18,23,0.9) 0%, rgba(16,18,23,0.68) 52%, rgba(16,18,23,0.82) 100%);
}
.final-cta .container { position: relative; z-index: 1; }
.final-cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.55fr);
    gap: 56px;
    align-items: center;
}
.final-cta__copy { text-align: left; }
.final-cta h2 { color: var(--white); font-weight: 800; font-size: clamp(32px, 4.5vw, 56px); letter-spacing: -0.025em; margin-bottom: 16px; }
.final-cta p { color: rgba(255,255,255,0.88); font-size: 17px; margin-bottom: 30px; max-width: 540px; }
.contact-form {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 30px;
    display: grid;
    gap: 16px;
}
.contact-form label { display: grid; gap: 7px; }
.contact-form span {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 13px 15px;
    font: inherit;
    font-size: 15px;
    background: var(--white);
    color: var(--text);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.contact-form textarea { resize: vertical; min-height: 116px; }
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--accent);
    background: var(--white);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ===== FOOTER ===== */
.footer { background: var(--dark); padding: 76px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 54px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col h4 {
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}
.footer__col a { color: rgba(255,255,255,0.62); font-size: 14.5px; }
.footer__col a:hover { color: var(--white); padding-left: 3px; }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
/* Closes the truncated services list - see FOOTER_SERVICE_CAP in the generator. */
.footer__col a.footer__all-services { color: var(--accent-on-dark); font-weight: 600; }
.footer__col a.footer__all-services:hover { color: var(--white); }
/* Footer logo: mirrors the nav - client logo image when present, otherwise an
   initial badge + company name text (fallback driven by onerror in the markup). */
.footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 24px;
    color: var(--white);
    margin-bottom: 12px;
}
.footer__logo:hover { opacity: 0.85; }
.footer__logo-badge {
    /* Deliberately larger than the nav badge: the footer has the room, and the mark is the last
       thing on the page - it should read as a sign-off, not a repeat of the header at half size. */
    height: 78px;
    max-width: 280px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer__logo-badge img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.footer__logo-badge > span {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 24px;
    color: var(--accent);
    background: rgba(255,255,255,0.1);
}
.footer__logo.has-image-logo .footer__logo-text { display: none; }
.footer__logo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footer__tagline { color: rgba(255,255,255,0.55); font-size: 14.5px; max-width: 300px; }
.footer__note { color: rgba(255,255,255,0.55); font-size: 14.5px; padding: 4px 0; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 24px 0; }
.footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; color: rgba(255,255,255,0.45); font-size: 13.5px; }
.footer__powered a { color: rgba(255,255,255,0.7); font-weight: 600; }
.footer__powered a:hover { color: var(--white); }


/* =====================================================================
   INTERIOR PAGES (page-hero, hubs, detail pages, contact, CTA band)
   ===================================================================== */

/* ===== SECTION "VIEW MORE" ROW ===== */
.section-more { display: flex; justify-content: center; margin-top: 48px; }
.section-more--left { justify-content: flex-start; margin-top: 28px; }
.services__header-link { flex-shrink: 0; }

/* ===== PAGE HERO (interior pages) ===== */
.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 440px;
    padding: 170px 0 100px;
    background: var(--dark);
}
.page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__overlay { position: absolute; inset: 0; background: var(--hero-overlay); }
.page-hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.page-hero__content h1 {
    color: var(--white);
    font-weight: 800;
    font-size: clamp(34px, 5vw, 58px);
    letter-spacing: -0.025em;
    margin-bottom: 16px;
    text-wrap: balance;
}
.page-hero__content p {
    color: rgba(255,255,255,0.88);
    font-size: clamp(16px, 1.8vw, 18px);
    max-width: 620px;
    margin: 0 auto;
}
.page-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }

/* ===== CTA BAND (dark strip used on interior pages) ===== */
.cta-band { background: var(--dark-alt); padding: 90px 0; }
.cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.cta-band h2 { color: var(--white); font-weight: 800; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.02em; margin-bottom: 10px; }
.cta-band p { color: rgba(255,255,255,0.65); font-size: 16.5px; max-width: 520px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; flex-shrink: 0; }

/* ===== CHECK LIST (about / area pages) ===== */
.check-list { display: grid; gap: 12px; margin-bottom: 32px; }
.check-list li { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 15.5px; }
.check-list [data-lucide], .check-list svg.lucide {
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 0;
    padding: 4px;
    width: 24px;
    height: 24px;
}

/* ===== OWNER BIO (about page) ===== */
.owner-bio { padding: 120px 0 110px; background: var(--bg); }
.owner-bio__grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) 1.28fr;
    gap: 64px;
    align-items: center;
}
.owner-bio__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/5; }
.owner-bio__media img { width: 100%; height: 100%; object-fit: cover; }
.owner-bio__content h2 { font-size: clamp(30px, 3.8vw, 46px); margin-bottom: 18px; }
.owner-bio__content p { color: var(--muted); font-size: 16.5px; margin-bottom: 30px; }

/* ===== CREDENTIALS ===== */
.credentials { padding: 0 0 40px; background: var(--bg); }
.credentials__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.credentials__list--left { justify-content: flex-start; margin-bottom: 28px; }
.credential-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0;
    font-weight: 500;
    font-size: 14px;
    color: var(--text);
    box-shadow: var(--shadow-xs);
}
.credential-badge [data-lucide], .credential-badge svg.lucide { color: var(--accent); font-size: 16px; }

/* ===== ACCEPTED PAYMENTS ===== */
.payments { padding: 40px 0; background: var(--bg-alt); border-top: 1px solid var(--border); }
.payments__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 26px;
}
.payments__label {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    color: var(--muted);
}
.payments__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0;
    font-weight: 500;
    font-size: 13.5px;
    color: var(--text);
    box-shadow: var(--shadow-xs);
}
/* ===== PROMO POPUP ===== */
.promo-popup { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.promo-popup[hidden] { display: none; }
.promo-popup__backdrop { position: absolute; inset: 0; background: rgba(10,12,16,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.3s var(--ease); }
.promo-popup.is-open .promo-popup__backdrop { opacity: 1; }
.promo-popup__card {
    position: relative;
    z-index: 1;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    max-width: 420px;
    width: 100%;
    padding: 40px 34px 34px;
    text-align: center;
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    transition: transform 0.32s var(--ease), opacity 0.32s var(--ease);
}
.promo-popup.is-open .promo-popup__card { transform: none; opacity: 1; }
.promo-popup__close {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    color: var(--muted); background: none; border: none; cursor: pointer;
}
.promo-popup__close:hover { color: var(--dark); }
.promo-popup__eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; color: var(--accent); margin-bottom: 12px; }
.promo-popup__title { font-family: var(--font-display); font-size: clamp(24px, 5vw, 30px); line-height: 1.1; margin-bottom: 12px; }
.promo-popup__message { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 22px; }

.form-success {
    padding: 28px 24px;
    text-align: center;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
}
.form-success strong { font-family: var(--font-display); font-size: 18px; }

.payment-badge__icon { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; }
.payment-badge__icon svg { width: 100%; height: 100%; display: block; }

/* ===== SERVICES HUB ===== */
.svc-hub { padding: 130px 0 110px; background: var(--bg); }
.svc-hub__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.svc-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--text);
    box-shadow: var(--shadow-xs);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.svc-card__media { aspect-ratio: 16/10; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.svc-card:hover .svc-card__media img { transform: scale(1.06); }
.svc-card__content { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.svc-card__content h3 { font-size: 21px; font-weight: 700; margin-bottom: 8px; }
.svc-card__content p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin-bottom: 20px; }
.svc-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    transition: gap 0.3s var(--ease);
}
.svc-card:hover .svc-card__link { gap: 12px; }

/* ===== WHAT'S INCLUDED (service detail) ===== */
.whats-included { padding: 120px 0 110px; background: var(--bg); }
.whats-included__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 880px;
    margin: 0 auto;
}
.whats-included__item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px 22px;
    font-weight: 500;
    font-size: 15.5px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}
.whats-included__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.whats-included__check {
    width: 30px;
    height: 30px;
    border-radius: 0;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* ===== DETAIL BEFORE/AFTER ===== */
/* ===== SERVICE INTRO (copy left, framed photo right) ===== */
.service-intro { padding: 100px 0; background: var(--bg-alt); }
.service-intro__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.service-intro__content h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.12;
    margin-top: 4px;
}
.service-intro__rule {
    display: block;
    width: 64px;
    height: 3px;
    background: var(--accent);
    margin: 22px 0 26px;
}
.service-intro__content p { color: var(--muted); font-size: 16.5px; margin-bottom: 20px; }
.service-intro__content p:last-of-type { margin-bottom: 30px; }
.service-intro__media img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    box-shadow: var(--shadow-md);
}

.detail-ba { padding: 110px 0; background: var(--bg); }
.detail-ba__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.detail-ba__content h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 16px; }
.detail-ba__content p { color: var(--muted); font-size: 16.5px; margin-bottom: 28px; }

/* ===== LEAD FORM (detail + contact pages) ===== */
.detail-form { padding: 110px 0; background: var(--bg-alt); }
.detail-form__inner { max-width: 680px; }
.lead-form {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 34px;
    display: grid;
    gap: 16px;
}
.lead-form label { display: grid; gap: 7px; }
.lead-form label > span {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.lead-form input,
.lead-form select,
.lead-form textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 13px 15px;
    font: inherit;
    font-size: 15px;
    background: var(--white);
    color: var(--text);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.lead-form textarea { resize: vertical; min-height: 110px; }
.lead-form select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6672' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 42px;
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
    border-color: var(--accent);
    background: var(--white);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.lead-form input[readonly] { color: var(--muted); }

/* ===== LOCAL INTRO (area detail) ===== */
.local-intro { padding: 120px 0 40px; background: var(--bg); }
.local-intro .section-header { margin-bottom: 0; max-width: 780px; }

/* ===== WHY CHOOSE US (area detail) ===== */
.why-local { padding: 90px 0 110px; background: var(--bg); }
.why-local__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; }
.why-local__media { position: relative; }
.why-local__media > img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.why-local__badge {
    position: absolute;
    bottom: -24px;
    right: -18px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 20px 26px;
    text-align: center;
}
.why-local__badge-num {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.why-local__badge-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.9;
}
.why-local__content h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 16px; }
.why-local__content > p { color: var(--muted); font-size: 16.5px; margin-bottom: 28px; }

/* ===== AREAS HUB ===== */
.areas-hub { padding: 130px 0 110px; background: var(--bg); }
.areas-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 56px;
}
.area-hub-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    color: var(--text);
    font-weight: 600;
    font-size: 15.5px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}
.area-hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--accent-line); }
.area-hub-card__pin {
    width: 38px;
    height: 38px;
    border-radius: 0;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: var(--transition);
}
.area-hub-card:hover .area-hub-card__pin { background: var(--accent); color: var(--on-accent); }
.area-hub-card__city { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-hub-card__arrow { color: var(--muted); transition: var(--transition); }
.area-hub-card:hover .area-hub-card__arrow { color: var(--accent); transform: translateX(3px); }

/* ===== PROJECTS HUB ===== */
.projects-hub { padding: 120px 0 110px; background: var(--bg); }
.project-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 44px; }
.project-filter {
    padding: 10px 22px;
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--muted);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}
.project-filter:hover { color: var(--text); border-color: var(--accent-line); transform: translateY(-1px); }
.project-filter.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 6px 18px var(--accent-glow);
}
.project-card.is-filtered-out { display: none; }

/* ===== REVIEWS PAGE ===== */
.reviews-page { padding: 60px 0 110px; background: var(--bg); }
.reviews-page__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.review-card__service {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 0;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.review-card__service:empty { display: none; }

/* ===== CONTACT PAGE ===== */
.contact-section { padding: 120px 0 110px; background: var(--bg); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }
.contact-info h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 14px; }
.contact-info__lede { color: var(--muted); font-size: 16.5px; margin-bottom: 32px; }
.contact-info__rows { display: grid; gap: 14px; }
.contact-info__row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    color: var(--text);
    transition: var(--transition);
}
a.contact-info__row:hover { background: var(--white); box-shadow: var(--shadow-sm); transform: translateY(-2px); border-color: var(--accent-line); }
.contact-info__icon {
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.contact-info__row-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.contact-info__row-value { display: block; font-weight: 600; font-size: 15.5px; overflow-wrap: anywhere; }
.areas--contact { padding-top: 0; }

/* ===== FAQ PAGE VARIANT (light page-flow spacing) ===== */
.faq--page { padding-top: 130px; }

/* ===== NAV: MOBILE SUBMENUS + PHONE ===== */
.nav__mobile-parent { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nav__mobile-parent svg { transition: transform 0.3s var(--ease); }
.nav__mobile-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
    margin: 0 !important;
}
.nav__mobile-sub.is-open { max-height: 600px; }
.nav__mobile li:has(.nav__mobile-sub.is-open) .nav__mobile-parent svg { transform: rotate(180deg); }
.nav__mobile-sub li a {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15.5px !important;
    color: var(--muted);
    padding: 12px 4px 12px 18px !important;
    border-bottom: none !important;
}
.nav__mobile-sub li:last-child a { border-bottom: none; }
.nav__mobile-phone {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: var(--muted);
    font-weight: 500;
    font-size: 14.5px;
}
.nav__mobile-phone:hover { color: var(--text); }
/* Only in the small text dropdown, where it separates "All Services" from the list above it. In the
   mega sheet the link is a card of its own and a rule would cut across the grid. */
.dropdown:not(.is-mega) .dropdown__all { font-weight: 600; border-top: 1px solid var(--border); }
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .services__grid, .why__grid, .projects__grid, .process__grid,
    .svc-hub__grid, .reviews-page__grid, .whats-included__list { grid-template-columns: repeat(2, 1fr); }
    .final-cta__grid { grid-template-columns: 1fr; }
    .projects__track .project-card { flex-basis: calc(50% - 13px); }
    .review-card { flex-basis: calc(50% - 14px); }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .nav__links, .nav__phone { display: none; }
    .owner-bio__grid, .detail-ba__grid, .why-local__grid, .contact-grid,
    .service-intro__grid { grid-template-columns: 1fr; gap: 44px; }
    .service-intro__media { order: -1; }
    .owner-bio__media { max-width: 420px; }
    .why-local__badge { right: 12px; bottom: -18px; }
    .cta-band__inner { flex-direction: column; align-items: flex-start; }
    .page-hero { padding: 150px 0 90px; min-height: 0; }
    .nav__toggle { display: flex; }
    /* Let the logo shrink so the CTA + hamburger never push off-screen */
    .nav__logo { flex-shrink: 1; min-width: 0; }
    .nav__logo-badge { max-width: 150px; }
    .nav__inner { gap: 12px; }
    .intro__grid, .about__grid { grid-template-columns: 1fr; }
    .about__media { order: -1; }
    .hero__inner { padding-top: 138px; padding-bottom: 138px; }
}

@media (max-width: 720px) {
    .container { padding: 0 20px; }
    .nav__inner { padding: 0 20px; }
    /* Small phones: the slide-in menu already carries the quote CTA */
    .nav__cta { display: none; }
    .services__grid, .why__grid, .projects__grid, .process__grid,
    .svc-hub__grid, .reviews-page__grid, .whats-included__list { grid-template-columns: 1fr; }
    .areas-hub__grid { grid-template-columns: 1fr 1fr; }
    .page-hero { padding: 140px 0 80px; }
    .page-hero__actions .btn { width: 100%; }
    .cta-band__actions { width: 100%; }
    .cta-band__actions .btn { width: 100%; }
    .lead-form { padding: 26px; }
    .detail-form, .contact-section, .svc-hub, .areas-hub, .projects-hub, .whats-included, .owner-bio { padding-top: 90px; padding-bottom: 90px; }
    /* Stats stay a compact 2x2 card on phones (not a tall single stack) */

    .review-card { flex-basis: 100%; }
    .reviews__dots { display: flex; }
    .footer__grid { grid-template-columns: 1fr; }
    /* Hero: tighter vertical rhythm, headline scales with the viewport, form full-width */
    .hero__inner { padding-top: 116px; padding-bottom: 108px; gap: 34px; }
    .hero__eyebrow { font-size: 12px; letter-spacing: 0.16em; margin-bottom: 12px; }
    .hero__headline { font-size: clamp(34px, 8.6vw, 46px); margin-bottom: 16px; }
    .hero__sub { font-size: 16px; margin-bottom: 28px; }
    .hero__social-proof { margin-bottom: 22px; }
    .projects__track .project-card { flex-basis: 100%; }
    .hero__actions, .intro__actions { flex-direction: column; }
    .hero__actions .btn, .intro__actions .btn { width: 100%; }
    .faq::before { top: -36px; height: 37px; }
    .final-cta { padding: 90px 0; }
    .contact-form { padding: 24px; }
}

/* ============================================================================
   PREMIUM POLISH LAYER - cinematic depth + micro-interactions.
   Additive, accent-driven (uses the per-site --accent vars), reduced-motion
   aware. Layered over the base so it enhances components without changing their
   structure or the generator's placeholder markup.
   ============================================================================ */

html { scroll-behavior: smooth; }

/* 1 · Scroll progress bar (element injected by main.js) --------------------- */
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
    background: transparent; pointer-events: none;
}
.scroll-progress > span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
    box-shadow: 0 0 12px var(--accent-glow);
    transition: width 0.08s linear;
}

/* 2 · Hero Ken Burns - slow cinematic push-in ------------------------------ */
@keyframes heroKenBurns { from { transform: scale(1.03); } to { transform: scale(1.13); } }
.hero__bg { animation: heroKenBurns 22s ease-out both; will-change: transform; }

/* 3 · Aurora accent glow on the dark sections (depth) ---------------------- */
.services {
    position: relative;
    background:
        radial-gradient(1100px 540px at 84% -12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
        var(--dark-alt);
}
.reviews {
    background:
        radial-gradient(1000px 520px at 12% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 58%),
        var(--dark-alt);
}

/* 4 · Primary button shine sweep ------------------------------------------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
    content: ""; position: absolute; top: 0; left: -125%; width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.30), transparent);
    transform: skewX(-18deg); transition: left 0.6s var(--ease); pointer-events: none;
}
.btn--primary:hover::after { left: 135%; }

/* 5 · Accent-tinted hover glow on cards ------------------------------------ */
.service-card:hover, .project-card:hover {
    box-shadow: 0 20px 46px -22px color-mix(in srgb, var(--accent) 55%, rgba(16,20,28,0.55));
}

/* 6 · Subtle parallax on the scenic closing image -------------------------- */
.final-cta__bg {
    transform: translate3d(0, var(--parallax, 0px), 0) scale(1.14);
    transition: transform 0.15s ease-out; will-change: transform;
}

/* 7 · Sticky mobile action bar (injected by main.js) ----------------------- */
.mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(18, 20, 24, 0.92); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.10);
    transform: translateY(110%); transition: transform 0.38s var(--ease);
}
.mobile-cta.is-visible { transform: translateY(0); }
.mobile-cta .btn { flex: 1; justify-content: center; padding: 13px 14px; }
@media (max-width: 768px) {
    .mobile-cta { display: flex; }
    body.has-mobile-cta { padding-bottom: 70px; }
}

/* Reduced motion: drop the cinematic movement, keep everything legible. */
@media (prefers-reduced-motion: reduce) {
    .hero__bg { animation: none; }
    .final-cta__bg { transform: scale(1.14); }
    html { scroll-behavior: auto; }
}