/*
 * Sparrow Contracting & Building LLC
 *
 * Design: Midnight & Copper - cinematic craftsmanship meets modern luxury
 * Fonts: Archivo (display/body/UI) + Outfit (numbers)
 * Palette: Deep midnight blue, warm cream, copper/gold accent
 * Animation: GSAP ScrollTrigger + SplitType line reveals
 * Approach: Mobile-first, min-width breakpoints, no frameworks
 */

/* ===========================
   DESIGN TOKENS
   =========================== */
:root {
    /* --- Colors: Midnight & Copper --- */
    --color-primary: #1B2A38;
    --color-primary-rgb: 27, 42, 56;
    --color-primary-light: #263B4D;
    --color-primary-light-rgb: 38, 59, 77;

    --color-warm: #F5F2ED;
    --color-warm-dark: #EBE7E0;

    --color-accent: #C4956A;
    --color-accent-hover: #B38458;
    --color-accent-light: #D4AD84;
    /* Darker copper for text/links on LIGHT backgrounds (>=4.5:1 on #FCFBF9).
       --color-accent itself stays bright for fills/decorative use. */
    --color-accent-ink: #8C5E33;
    --color-accent-rgb: 196, 149, 106;

    --color-neutral: #636B73;
    /* Darkened from #939BA3 (2.7:1) so helper/meta text passes WCAG AA on light. */
    --color-neutral-light: #5F6770;

    /* Text */
    --color-text: #1C1E22;
    --color-text-light: #636B73;
    --color-text-inverse: #F5F2ED;
    --color-text-on-dark: #A8B0B8;

    /* Backgrounds */
    --color-bg: #FCFBF9;
    --color-bg-alt: #F5F2ED;
    --color-bg-dark: #111820;

    /* UI */
    --color-border: #D8D5CE;
    --color-border-light: #ECEAE5;
    --color-success: #2D7D46;
    --color-error: #B8453A;

    /* --- Typography --- */
    --font-display: 'Archivo', system-ui, sans-serif;
    --font-body: 'Archivo', system-ui, sans-serif;
    --font-ui: 'Archivo', system-ui, sans-serif;
    --font-numbers: 'Outfit', system-ui, sans-serif;

    /* Fluid type scale */
    --font-size-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
    --font-size-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --font-size-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    --font-size-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --font-size-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
    --font-size-2xl: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);
    --font-size-3xl: clamp(1.875rem, 1.25rem + 2.5vw, 3.25rem);
    --font-size-4xl: clamp(2.125rem, 1.5rem + 2.5vw, 3.5rem);
    --font-size-hero: clamp(2.5rem, 1.5rem + 4vw, 5rem);

    --line-height-tight: 1.1;
    --line-height-snug: 1.15;
    --line-height-body: 1.7;
    --letter-spacing-tight: -0.03em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.06em;
    --letter-spacing-caps: 0.12em;

    /* --- Spacing --- */
    --space-3xs: clamp(0.125rem, 0.1rem + 0.1vw, 0.25rem);
    --space-2xs: clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);
    --space-xs: clamp(0.5rem, 0.4rem + 0.25vw, 0.75rem);
    --space-sm: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
    --space-md: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    --space-lg: clamp(2.5rem, 2rem + 2vw, 4rem);
    --space-xl: clamp(4rem, 3rem + 3vw, 6rem);
    --space-2xl: clamp(5rem, 4rem + 4vw, 8rem);
    --space-3xl: clamp(6rem, 4.5rem + 6vw, 12rem);
    --space-section: clamp(3rem, 2rem + 6vw, 12rem);

    /* --- Layout --- */
    --container-max: 1400px;
    --container-narrow: 900px;
    --container-wide: 1600px;
    --container-padding: clamp(1.25rem, 0.75rem + 2vw, 3rem);
    --header-height: 76px;

    /* --- Transitions --- */
    --transition-fast: 180ms ease;
    --transition-base: 350ms ease;
    --transition-slow: 600ms ease;
    --ease-out-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Borders & Shadows --- */
    --radius-sm: 0;
    --radius-md: 0;
    --shadow-sm: 0 1px 3px rgba(27, 42, 56, 0.06);
    --shadow-md: 0 4px 16px rgba(27, 42, 56, 0.08);
    --shadow-lg: 0 8px 32px rgba(27, 42, 56, 0.1);
}


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

/* Premium scrollbar - a slim copper bar replacing the default OS/browser bar.
   Squared to match the architectural design language. Applies site-wide and
   inside the mobile menu's scroll area. The transparent border + padding-box
   clip insets the thumb so it reads as a thin bar with breathing room. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 149, 106, 0.55) transparent;
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(196, 149, 106, 0.5);
    border: 3px solid transparent;
    background-clip: padding-box;
}
@media (hover: hover) {
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(196, 149, 106, 0.8);
        background-clip: padding-box;
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    -webkit-text-size-adjust: 100%;
}

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

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-optical-sizing: auto;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select {
    font: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-primary);
    text-wrap: balance;
    font-weight: 800;
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

p {
    text-wrap: pretty;
    max-width: 65ch;
}

a {
    color: var(--color-accent-ink);
    text-decoration-skip-ink: auto;
}

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

ul, ol {
    list-style: none;
}

address {
    font-style: normal;
}

::selection {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

::-moz-selection {
    background-color: var(--color-accent);
    color: var(--color-primary);
}


/* ===========================
   SKIP TO CONTENT
   =========================== */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: var(--container-padding);
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-accent);
    color: var(--color-primary);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: top var(--transition-fast);
}

.skip-to-content:focus {
    top: 0;
}


/* ===========================
   LAYOUT
   =========================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section {
    padding-block: var(--space-section);
}


/* ===========================
   BUTTONS
   =========================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9375rem 2.25rem;
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base) var(--ease-out-smooth);
    min-height: 48px;
    position: relative;
}

.btn--accent {
    background-color: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
    overflow: hidden;
}

/* Shimmer sweep on brass buttons */
.btn--accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.08) 70%,
        transparent 100%
    );
    transition: left 700ms var(--ease-out-expo);
    z-index: 1;
}

.btn--outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--outline-light {
    background-color: transparent;
    color: var(--color-text-inverse);
    border-color: rgba(245, 240, 232, 0.25);
}

.btn--ghost {
    background: none;
    border: none;
    color: var(--color-accent);
    padding-inline: 0;
    letter-spacing: var(--letter-spacing-wide);
    min-height: auto;
}

.btn--ghost::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background-color: currentColor;
    margin-left: 0.75rem;
    transition: width var(--transition-base) var(--ease-out-expo);
}

.btn--lg {
    padding: 1.125rem 3rem;
    font-size: var(--font-size-sm);
}

.btn--full {
    width: 100%;
}

@media (hover: hover) {
    .btn--accent:hover {
        background-color: var(--color-accent-hover);
        border-color: var(--color-accent-hover);
        transform: translateY(-2px);
        box-shadow:
            0 6px 24px rgba(196, 149, 106, 0.4),
            0 0 48px rgba(196, 149, 106, 0.12);
    }

    .btn--accent:hover::before {
        left: 100%;
    }

    .btn--outline:hover {
        background-color: var(--color-primary);
        color: var(--color-text-inverse);
        box-shadow: 0 4px 20px rgba(27, 42, 56, 0.15);
        transform: translateY(-1px);
    }

    .btn--outline-light:hover {
        background-color: rgba(245, 240, 232, 0.08);
        border-color: rgba(245, 240, 232, 0.45);
    }

    .btn--ghost:hover::after {
        width: 40px;
    }
}


/* ===========================
   SITE HEADER
   =========================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background:
        radial-gradient(ellipse at 15% 50%, rgba(27, 42, 56, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 50%, rgba(196, 149, 106, 0.04) 0%, transparent 45%),
        rgba(20, 32, 46, 0.94);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    backdrop-filter: blur(20px) saturate(1.3);
    transition: background 450ms var(--ease-out-smooth),
                box-shadow 450ms var(--ease-out-smooth);
}

.site-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(196, 149, 106, 0.3) 30%,
        rgba(196, 149, 106, 0.5) 50%,
        rgba(196, 149, 106, 0.3) 70%,
        transparent 95%
    );
    transition: opacity 450ms var(--ease-out-smooth);
}

.site-header.is-scrolled {
    background:
        radial-gradient(ellipse at 15% 50%, rgba(27, 42, 56, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 50%, rgba(196, 149, 106, 0.04) 0%, transparent 45%),
        rgba(17, 27, 40, 0.97);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3),
                0 0 40px rgba(60, 110, 160, 0.04);
}

.site-header.is-scrolled::after {
    opacity: 0.7;
}

.site-header--solid {
    background:
        radial-gradient(ellipse at 15% 50%, rgba(27, 42, 56, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 50%, rgba(196, 149, 106, 0.04) 0%, transparent 45%),
        rgba(20, 32, 46, 0.97);
}

.site-header--solid::after {
    opacity: 0.7;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* Logo - full PNG image, warm cream on dark */
.site-header__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.site-header__logo-img {
    height: 38px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1) sepia(0.06) saturate(0.5) hue-rotate(345deg) brightness(0.95);
    transition: filter 500ms var(--ease-out-smooth),
                transform 500ms var(--ease-out-smooth);
}

/* Logo always uses the same warm cream filter — no state changes */

@media (hover: hover) {
    .site-header__logo:hover .site-header__logo-img {
        transform: scale(1.03);
    }
}

@media (min-width: 640px) {
    .site-header__logo-img {
        height: 44px;
    }
}

@media (min-width: 1024px) {
    .site-header__logo-img {
        height: 50px;
    }
}

@media (min-width: 1280px) {
    .site-header__logo-img {
        height: 56px;
    }
}

/* Desktop nav */
.site-nav {
    display: none;
}

.nav-list {
    display: flex;
    gap: 0;
}

.nav-list a {
    display: block;
    padding: 0.5rem 1.125rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: color 300ms var(--ease-out-smooth);
    position: relative;
}

/* Animated underline on nav links */
.nav-list a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 400ms var(--ease-out-expo);
}

.nav-list a.is-active {
    color: var(--color-accent-light);
}

@media (hover: hover) {
    .nav-list a:hover {
        color: var(--color-accent-light);
    }

    .nav-list a:hover::after {
        transform: scaleX(1);
    }
}

/* Header actions */
.site-header__actions {
    display: none;
}

.site-header__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-numbers);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--color-text-inverse);
    text-decoration: none;
    white-space: nowrap;
    transition: color 300ms var(--ease-out-smooth);
}

@media (hover: hover) {
    .site-header__phone:hover {
        color: rgba(160, 205, 240, 0.95);
    }
}

.site-header__cta {
    padding: 0.625rem 1.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
    background-color: transparent;
    color: var(--color-text-inverse);
    border-color: rgba(245, 240, 232, 0.2);
}

@media (hover: hover) {
    .site-header__cta:hover {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-primary);
    }
}

/* Mobile actions wrapper */
.site-header__mobile-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
}

.site-header__mobile-phone {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    height: 44px;
    padding-inline: 0.25rem;
    color: var(--color-text-inverse);
    text-decoration: none;
    font-family: var(--font-numbers);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

/* Hamburger */
.site-header__menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}

.hamburger__line {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--color-text-inverse);
    transition: all var(--transition-base) var(--ease-out-expo);
    transform-origin: center;
    border-radius: 1px;
}

/* Header state when mobile menu is open */
.site-header.menu-open {
    background-color: var(--color-bg-dark) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.site-header.menu-open::after {
    opacity: 0;
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger__line {
    background-color: #F5F0E8;
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger__line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   MOBILE MENU - app-style full-screen takeover
   Numbered rows, accordion Services, quick-action tiles,
   contact badge, social row, sticky dock CTA. Squared geometry
   to match Sparrow's architectural Midnight & Copper language.
   ============================================================ */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-dark);
    background-image:
        radial-gradient(circle at 12% 88%, rgba(38, 59, 77, 0.55) 0%, transparent 42%),
        radial-gradient(circle at 88% 8%, rgba(196, 149, 106, 0.06) 0%, transparent 38%),
        linear-gradient(165deg, #0E1620 0%, #162230 42%, #1B2A38 62%, #0E1620 100%);
    /* Closed state. JS keeps the element in the DOM (class toggle) so both
       the open AND close transitions play; `hidden` is re-applied only after
       the close transition finishes. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 380ms var(--ease-out-expo),
                visibility 0s linear 380ms;
}

/* Copper hairline sweeps across the top as the panel opens (signature). */
.mobile-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 620ms var(--ease-out-expo);
    z-index: 4;
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 320ms var(--ease-out-expo),
                visibility 0s;
}

.mobile-menu.is-open::before {
    transform: scaleX(1);
}

.mobile-menu[hidden] {
    display: none;
}

/* Scroll region holds the nav list + quick actions. It starts below the real
   fixed header (which stays visible above the overlay) and the dock floats
   over the bottom of this region, so content fades out beneath it. */
.mobile-menu__scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: calc(var(--header-height) + var(--space-xs)) var(--container-padding)
             calc(132px + env(safe-area-inset-bottom, 0px));
}

/* ---- Numbered nav rows ---- */
.mobile-menu__list {
    display: flex;
    flex-direction: column;
}

.mobile-menu__item:not(:last-child) {
    border-bottom: 1px solid rgba(245, 240, 232, 0.07);
}

.mobile-menu__row {
    display: flex;
    align-items: stretch;
}

.mobile-menu__link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 54px;
    padding: 0.8rem 0;
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: color var(--transition-fast),
                padding-left var(--transition-base) var(--ease-out-expo);
}

.mobile-menu__index {
    font-family: var(--font-numbers);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    min-width: 1.75rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}

.mobile-menu__label {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1.05rem + 1.4vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.mobile-menu__link.is-active {
    color: var(--color-accent-light);
}

.mobile-menu__link.is-active .mobile-menu__index {
    opacity: 1;
}

@media (hover: hover) {
    .mobile-menu__link:hover {
        color: var(--color-accent-light);
        padding-left: 0.5rem;
    }
}

/* Accordion expander button (Services) */
.mobile-menu__expand {
    flex-shrink: 0;
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-left: 1px solid rgba(245, 240, 232, 0.07);
    color: var(--color-accent-light);
    cursor: pointer;
}

.mobile-menu__caret {
    transition: transform 320ms var(--ease-out-expo);
}

.mobile-menu__expand[aria-expanded="true"] .mobile-menu__caret {
    transform: rotate(180deg);
}

/* Accordion sub-list */
.mobile-menu__sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 440ms var(--ease-out-expo);
}

.mobile-menu__sub.is-expanded {
    max-height: 620px;
}

.mobile-menu__sub-list {
    display: flex;
    flex-direction: column;
    padding: 0.15rem 0 1rem calc(1.75rem + 1rem);
}

.mobile-menu__sub-list a {
    display: block;
    padding: 0.6rem 0 0.6rem 1rem;
    border-left: 1px solid rgba(196, 149, 106, 0.3);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-on-dark);
    text-decoration: none;
    transition: color var(--transition-fast),
                border-color var(--transition-fast);
}

@media (hover: hover) {
    .mobile-menu__sub-list a:hover {
        color: var(--color-accent-light);
        border-color: var(--color-accent);
    }
}

/* ---- Quick actions: tiles + contact + social ---- */
.mobile-menu__extras {
    margin-top: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.mobile-menu__tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
}

/* Tiles + contact row share a horizontal icon-left / text-right layout so
   everything stays compact and fits without scrolling. */
.mobile-menu__tile,
.mobile-menu__contact {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    background: rgba(245, 240, 232, 0.03);
    border: 1px solid rgba(196, 149, 106, 0.18);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: border-color 300ms var(--ease-out-smooth),
                background-color 300ms var(--ease-out-smooth);
}

@media (hover: hover) {
    .mobile-menu__tile:hover,
    .mobile-menu__contact:hover {
        border-color: rgba(196, 149, 106, 0.45);
        background-color: rgba(196, 149, 106, 0.07);
    }
}

.mobile-menu__tile-icon,
.mobile-menu__contact-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(196, 149, 106, 0.12);
    border: 1px solid rgba(196, 149, 106, 0.25);
    color: var(--color-accent-light);
    flex-shrink: 0;
}

.mobile-menu__tile-body,
.mobile-menu__contact-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.mobile-menu__tile-kicker,
.mobile-menu__contact-kicker {
    font-family: var(--font-numbers);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent);
}

.mobile-menu__tile-value,
.mobile-menu__contact-value {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-inverse);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Social row */
.mobile-menu__social {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-3xs);
}

.mobile-menu__social a {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 240, 232, 0.03);
    border: 1px solid rgba(196, 149, 106, 0.18);
    color: var(--color-accent-light);
    transition: border-color 300ms var(--ease-out-smooth),
                background-color 300ms var(--ease-out-smooth),
                color var(--transition-fast);
}

@media (hover: hover) {
    .mobile-menu__social a:hover {
        border-color: rgba(196, 149, 106, 0.45);
        background-color: rgba(196, 149, 106, 0.1);
        color: var(--color-accent);
    }
}

/* ---- Sticky bottom dock ---- */
/* Full-bleed: the CTA spans edge to edge and reaches the bottom of the tray.
   No horizontal/bottom padding on the dock itself; the safe-area inset lives
   inside the button so the label clears the home indicator. */
.mobile-menu__dock {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: var(--space-md) 0 0;
    background: linear-gradient(180deg,
        rgba(14, 22, 32, 0) 0%,
        rgba(14, 22, 32, 0.9) 42%,
        #0E1620 100%);
    pointer-events: none;
}

.mobile-menu__dock > * {
    pointer-events: auto;
}

.mobile-menu__dock-cta {
    width: 100%;
    justify-content: center;
    font-family: var(--font-numbers);
    letter-spacing: 0.04em;
    padding: 1.15rem 1.5rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 24px rgba(196, 149, 106, 0.18);
}

/* Premium reveal: nav rows cascade up on open, then the quick actions and
   dock settle in last (app-like). Motion lives only inside the no-preference
   guard; reduced-motion users get an instant menu. */
@media (prefers-reduced-motion: no-preference) {
    .mobile-menu__item,
    .mobile-menu__tiles,
    .mobile-menu__contact,
    .mobile-menu__social,
    .mobile-menu__dock {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity 520ms var(--ease-out-expo),
                    transform 600ms var(--ease-out-expo);
    }

    .mobile-menu.is-open .mobile-menu__item,
    .mobile-menu.is-open .mobile-menu__tiles,
    .mobile-menu.is-open .mobile-menu__contact,
    .mobile-menu.is-open .mobile-menu__social,
    .mobile-menu.is-open .mobile-menu__dock {
        opacity: 1;
        transform: none;
    }

    /* Nav rows cascade first, driven by the per-row --i index... */
    .mobile-menu.is-open .mobile-menu__item {
        transition-delay: calc(var(--i, 0) * 52ms + 120ms);
    }

    /* ...then the quick actions and dock settle in. */
    .mobile-menu.is-open .mobile-menu__tiles   { transition-delay: 540ms; }
    .mobile-menu.is-open .mobile-menu__contact { transition-delay: 588ms; }
    .mobile-menu.is-open .mobile-menu__social  { transition-delay: 636ms; }
    .mobile-menu.is-open .mobile-menu__dock    { transition-delay: 560ms; }

    /* Closing: collapse the cascade quickly so the exit feels snappy. */
    .mobile-menu:not(.is-open) .mobile-menu__item,
    .mobile-menu:not(.is-open) .mobile-menu__tiles,
    .mobile-menu:not(.is-open) .mobile-menu__contact,
    .mobile-menu:not(.is-open) .mobile-menu__social,
    .mobile-menu:not(.is-open) .mobile-menu__dock {
        transition-duration: 200ms;
        transition-delay: 0ms;
    }
}

/* Desktop dropdown menus */
.nav-item {
    position: relative;
}

.nav-chevron {
    display: inline-block;
    margin-left: 0.25rem;
    vertical-align: middle;
    transition: transform var(--transition-fast);
}

.nav-chevron {
    transition: transform 300ms var(--ease-out-expo);
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
}

@media (prefers-reduced-motion: no-preference) {
    .nav-dropdown {
        transition: opacity 300ms var(--ease-out-smooth),
                    visibility 300ms var(--ease-out-smooth);
    }

    .nav-dropdown__inner {
        transform: translateY(-10px) scale(0.97);
        transform-origin: top center;
        transition: transform 400ms var(--ease-out-expo);
    }

    .nav-item--has-dropdown:hover .nav-dropdown__inner,
    .nav-item--has-dropdown:focus-within .nav-dropdown__inner {
        transform: translateY(0) scale(1);
    }

    /* Staggered item reveals */
    .nav-dropdown__item {
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity 250ms var(--ease-out-smooth),
                    transform 300ms var(--ease-out-expo),
                    color 250ms var(--ease-out-smooth),
                    background-color 250ms var(--ease-out-smooth);
    }

    .nav-item--has-dropdown:hover .nav-dropdown__item,
    .nav-item--has-dropdown:focus-within .nav-dropdown__item {
        opacity: 1;
        transform: translateX(0);
    }

    .nav-item--has-dropdown:hover .nav-dropdown__item:nth-child(1),
    .nav-item--has-dropdown:focus-within .nav-dropdown__item:nth-child(1) { transition-delay: 60ms, 60ms, 0ms, 0ms; }
    .nav-item--has-dropdown:hover .nav-dropdown__item:nth-child(2),
    .nav-item--has-dropdown:focus-within .nav-dropdown__item:nth-child(2) { transition-delay: 120ms, 120ms, 0ms, 0ms; }
    .nav-item--has-dropdown:hover .nav-dropdown__item:nth-child(3),
    .nav-item--has-dropdown:focus-within .nav-dropdown__item:nth-child(3) { transition-delay: 180ms, 180ms, 0ms, 0ms; }
    .nav-item--has-dropdown:hover .nav-dropdown__item:nth-child(4),
    .nav-item--has-dropdown:focus-within .nav-dropdown__item:nth-child(4) { transition-delay: 240ms, 240ms, 0ms, 0ms; }
    .nav-item--has-dropdown:hover .nav-dropdown__item:nth-child(5),
    .nav-item--has-dropdown:focus-within .nav-dropdown__item:nth-child(5) { transition-delay: 300ms, 300ms, 0ms, 0ms; }
    .nav-item--has-dropdown:hover .nav-dropdown__item:nth-child(6),
    .nav-item--has-dropdown:focus-within .nav-dropdown__item:nth-child(6) { transition-delay: 360ms, 360ms, 0ms, 0ms; }
    .nav-item--has-dropdown:hover .nav-dropdown__item:nth-child(7),
    .nav-item--has-dropdown:focus-within .nav-dropdown__item:nth-child(7) { transition-delay: 420ms, 420ms, 0ms, 0ms; }
}

.nav-item--has-dropdown:hover .nav-dropdown,
.nav-item--has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nav-item--has-dropdown:hover .nav-chevron {
    transform: rotate(180deg);
}

.nav-dropdown__inner {
    background-color: rgba(14, 22, 32, 0.96);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid rgba(91, 141, 184, 0.1);
    border-radius: var(--radius-md);
    box-shadow:
        0 16px 56px rgba(0, 0, 0, 0.45),
        0 4px 12px rgba(0, 0, 0, 0.25),
        0 0 40px rgba(60, 110, 160, 0.08),
        inset 0 1px 0 rgba(91, 141, 184, 0.08);
    min-width: 250px;
    padding: 0.5rem 0;
    position: relative;
    overflow: hidden;
}

.nav-dropdown__inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 10%, rgba(120, 175, 225, 0.6) 50%, transparent 90%);
}

.nav-dropdown__item {
    display: block;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: rgba(245, 240, 232, 0.8);
    text-decoration: none;
    position: relative;
    transition: color 250ms var(--ease-out-smooth),
                background-color 250ms var(--ease-out-smooth),
                transform 300ms var(--ease-out-expo);
}

/* Blue left-edge indicator on hover */
.nav-dropdown__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 2px;
    background: rgba(120, 175, 225, 0.6);
    border-radius: 1px;
    transform: scaleY(0);
    transition: transform 300ms var(--ease-out-expo);
}

.nav-dropdown__item + .nav-dropdown__item {
    border-top: 1px solid rgba(91, 141, 184, 0.08);
}

@media (hover: hover) {
    .nav-dropdown__item:hover {
        color: rgba(160, 205, 240, 0.95);
        background-color: rgba(60, 110, 160, 0.12);
        transform: translateX(4px);
    }

    .nav-dropdown__item:hover::before {
        transform: scaleY(1);
    }
}

/* Dark dropdown style is now the default — no state overrides needed */

/* Dropdown hover states are now default dark — transparent overrides removed */

@media (min-width: 1024px) {
    .site-nav {
        display: block;
    }

    .nav-list a {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .site-header__actions {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
    }

    .site-header__mobile-actions {
        display: none;
    }

    .mobile-menu {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    .nav-list a {
        padding: 0.5rem 1.125rem;
        font-size: 0.875rem;
    }

    .site-header__actions {
        gap: var(--space-md);
    }
}


/* ===========================
   HOMEPAGE HERO
   Left text + right floating photo collage
   =========================== */

/* Scroll indicator line animation */
@keyframes scrollLineSlide {
    0%   { top: -100%; }
    100% { top: 100%; }
}

/* Marquee scroll - percentage-based for pixel-perfect looping */
@keyframes marquee-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

@keyframes marquee-down {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}

.hero {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-bg-dark);
}

/* Atmospheric background */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 75% 50%, rgba(196, 149, 106, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 20% 25%, rgba(38, 59, 77, 0.7) 0%, transparent 45%),
        radial-gradient(circle at 60% 80%, rgba(27, 42, 56, 0.4) 0%, transparent 40%),
        radial-gradient(ellipse at 0% 100%, rgba(6, 10, 16, 0.4) 0%, transparent 50%),
        linear-gradient(160deg, #080E16 0%, #122038 25%, #1B2A38 50%, #1A2D48 65%, #0E1620 100%);
    z-index: 0;
}

/* Grain texture */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.2;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 128px;
    mix-blend-mode: overlay;
}

/* --- Text side --- */
.hero__text {
    position: relative;
    z-index: 10;
    padding: calc(var(--header-height) + var(--space-lg)) var(--container-padding) var(--space-lg);
    display: flex;
    flex-direction: column;
}

.hero__location {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-accent-light);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero__location::before {
    content: '';
    width: 28px;
    height: 1px;
    background-color: var(--color-accent);
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 4.75rem);
    font-weight: 800;
    line-height: var(--line-height-tight);
    letter-spacing: -0.04em;
    color: var(--color-text-inverse);
    margin-bottom: var(--space-xs);
}

.hero__accent {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.02em;
    color: var(--color-accent);
    margin-bottom: var(--space-md);
}

.hero__subtitle {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    color: rgba(245, 240, 232, 0.5);
    max-width: 46ch;
    margin-bottom: var(--space-lg);
    line-height: var(--line-height-body);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-lg);
}

.hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-numbers);
    font-size: var(--font-size-xl);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(245, 240, 232, 0.8);
    text-decoration: none;
    transition: color var(--transition-base);
}

.hero__phone svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

@media (hover: hover) {
    .hero__phone:hover {
        color: var(--color-accent);
    }
}

/* Trust chips */
.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.hero__trust-chip {
    padding: 0.4rem 0.75rem;
    background: rgba(245, 240, 232, 0.04);
    border: 1px solid rgba(245, 240, 232, 0.08);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: rgba(245, 240, 232, 0.55);
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.hero__trust-chip svg {
    color: rgba(196, 149, 106, 0.6);
    flex-shrink: 0;
}

/* --- Marquee photo columns (auto-scrolling infinite loop) --- */

/* Hidden on mobile by default - shown via media query */
.hero__columns {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    padding: calc(var(--header-height) + var(--space-sm)) var(--space-md) var(--space-md);
    z-index: 2;
    overflow: hidden;
}

.hero__column {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, transparent 100%);
}

.hero__column-track {
    display: flex;
    flex-direction: column;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: relative;
}

@media (prefers-reduced-motion: no-preference) {
    .hero__column--up .hero__column-track {
        animation: marquee-up 40s linear infinite;
    }

    .hero__column--down .hero__column-track {
        animation: marquee-down 55s linear infinite;
    }
}

.hero__column-img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 3/4;
}

.hero__column-img-wrap {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: var(--space-md);
    border: 1px solid rgba(196, 149, 106, 0.15);
    box-shadow: inset 0 -6px 20px rgba(0, 0, 0, 0.35);
}

/* Glass shimmer overlay - wider than parent so it sweeps fully across */
.hero__column-img-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    width: 300%;
    z-index: 3;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.06) 42%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.06) 58%,
        transparent 70%
    );
    transform: translateX(-100%);
    pointer-events: none;
}

/* Shimmer only plays when .shimmer-active is added by JS */
@media (prefers-reduced-motion: no-preference) {
    .hero__column-img-wrap.shimmer-active::after {
        animation: card-shimmer 1.6s ease-in-out forwards;
    }
}

@keyframes card-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Photo caption overlays */
.collage-img__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
    background: rgba(11, 18, 26, 0.82);
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.92);
    z-index: 2;
}

.collage-img__caption span {
    font-weight: 400;
    color: rgba(245, 240, 232, 0.5);
}

.collage-img__caption span::before {
    content: '\00b7';
    margin: 0 0.35rem;
    color: rgba(196, 149, 106, 0.6);
}

/* Scroll indicator */
.hero__scroll-indicator {
    display: none;
}

/* --- md: 768px - Two-column hero, single photo column ---
   Promote .hero to a grid so the text gets its own track and can't
   collide with the absolutely-positioned photo column on the right.
   (Previously .hero stayed flex-column here, leaving .hero__text
   full-width and overlapping the cards at ~768-1023px.) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero {
        display: grid;
        grid-template-columns: 58% 42%;
        min-height: 86vh;
        min-height: 86dvh;
    }

    .hero__text {
        padding: calc(var(--header-height) + var(--space-lg)) var(--space-md) var(--space-lg) var(--container-padding);
        justify-content: center;
    }

    .hero__title {
        font-size: clamp(2.5rem, 5.4vw, 3.5rem);
    }

    .hero__columns {
        display: grid;
        grid-template-columns: 1fr;
        width: 42%;
        right: 0;
        padding: calc(var(--header-height) + var(--space-sm)) var(--space-md) var(--space-md) var(--space-sm);
    }

    .hero__columns .hero__column:nth-child(2) {
        display: none;
    }
}

/* --- lg: 1024px - Full split layout with animated marquee --- */
@media (min-width: 1024px) {
    .hero {
        display: grid;
        grid-template-columns: 48% 52%;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .hero__text {
        padding: calc(var(--header-height) + var(--space-xl)) var(--space-xl) var(--space-xl) var(--container-padding);
        justify-content: center;
    }

    .hero__title {
        font-size: clamp(3rem, 4.5vw, 4.75rem);
    }

    .hero__columns {
        display: grid;
        width: 52%;
        gap: var(--space-md);
        padding: calc(var(--header-height) + var(--space-sm)) var(--space-lg) var(--space-md);
    }

    /* Scroll indicator - bottom left of text column */
    .hero__scroll-indicator {
        display: flex;
        position: absolute;
        bottom: var(--space-md);
        left: var(--container-padding);
        z-index: 10;
        flex-direction: column;
        align-items: center;
        gap: var(--space-xs);
    }

    .hero__scroll-indicator span {
        font-family: var(--font-ui);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: var(--letter-spacing-caps);
        text-transform: uppercase;
        color: rgba(245, 240, 232, 0.35);
    }

    .hero__scroll-line {
        width: 1px;
        height: 36px;
        background: linear-gradient(180deg, rgba(196, 149, 106, 0.5), transparent);
        position: relative;
        overflow: hidden;
    }

    @media (prefers-reduced-motion: no-preference) {
        .hero__scroll-line::after {
            content: '';
            position: absolute;
            top: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, transparent, var(--color-accent-light), transparent);
            animation: scrollLineSlide 2s ease-in-out infinite;
        }
    }
}

/* --- xl: 1280px --- */
@media (min-width: 1280px) {
    .hero__text {
        padding-left: max(var(--container-padding), calc((100vw - var(--container-wide)) / 2));
        padding-right: var(--space-2xl);
    }

    .hero__title {
        font-size: 4.75rem;
    }

    .hero__accent {
        font-size: 2.5rem;
    }

    .hero__columns {
        width: 50%;
    }
}


/* ===========================
   BREADCRUMB
   =========================== */
.breadcrumb {
    padding-block: var(--space-sm);
    background-color: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border-light);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.breadcrumb__item + .breadcrumb__item::before {
    content: '/';
    color: var(--color-neutral-light);
    margin-right: 0.25rem;
}

.breadcrumb__item a {
    color: var(--color-neutral);
    text-decoration: none;
    transition: color var(--transition-fast);
}

@media (hover: hover) {
    .breadcrumb__item a:hover {
        color: var(--color-accent);
    }
}

.breadcrumb__item--current span {
    color: var(--color-text);
    font-weight: 600;
}


/* ===========================
   PAGE HERO (interior)
   =========================== */
.page-hero {
    padding-top: calc(var(--header-height) + var(--space-xl));
    padding-bottom: var(--space-lg);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

.page-hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-text-inverse);
    margin-bottom: var(--space-xs);
}

.page-hero__subtitle {
    font-family: var(--font-body);
    color: var(--color-text-on-dark);
    font-size: var(--font-size-lg);
    max-width: 55ch;
}


/* ===========================
   CTA BLOCK (reusable)
   =========================== */
.cta-block {
    padding-block: var(--space-xl);
    text-align: center;
}

.cta-block--dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-on-dark);
}

.cta-block--light {
    background:
        radial-gradient(ellipse at 30% 50%, rgba(196, 149, 106, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(27, 42, 56, 0.03) 0%, transparent 45%),
        var(--color-warm);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.cta-block__heading {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-sm);
}

.cta-block--dark .cta-block__heading {
    color: var(--color-text-inverse);
}

.cta-block__text {
    font-size: var(--font-size-lg);
    margin-inline: auto;
    margin-bottom: var(--space-md);
    max-width: 50ch;
}

.cta-block__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.cta-block__phone {
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.cta-block--dark .cta-block__phone {
    color: var(--color-text-on-dark);
}

@media (hover: hover) {
    .cta-block__phone:hover {
        color: var(--color-accent);
    }
}


/* ===========================
   PRE-FOOTER CTA
   =========================== */
.pre-footer-cta {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(196, 149, 106, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(27, 42, 56, 0.04) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 0%, rgba(196, 149, 106, 0.05) 0%, transparent 60%),
        linear-gradient(160deg, #F5F2ED 0%, #F2EEE8 40%, #F5F2ED 60%, #EFEBe5 100%);
    padding-block: var(--space-2xl);
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.pre-footer-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(196, 149, 106, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.pre-footer-cta__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.pre-footer-cta__rule {
    width: 40px;
    margin-inline: auto;
    margin-bottom: var(--space-lg);
    position: relative;
    height: 6px;
    display: none;
}

@media (min-width: 768px) {
    .pre-footer-cta__rule {
        display: block;
    }
}

.pre-footer-cta__rule::before,
.pre-footer-cta__rule::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--color-accent);
}

.pre-footer-cta__rule::before { top: 0; }
.pre-footer-cta__rule::after { bottom: 0; }

.pre-footer-cta__title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.pre-footer-cta__subheading {
    font-family: var(--font-body);
    font-size: var(--font-size-xl);
    font-weight: 500;
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
}

.pre-footer-cta__subtitle {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    margin-inline: auto;
    margin-bottom: var(--space-lg);
}

.pre-footer-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.pre-footer-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-numbers);
    font-size: var(--font-size-xl);
    font-weight: 400;
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.pre-footer-cta__phone svg {
    flex-shrink: 0;
    color: var(--color-accent);
}

@media (hover: hover) {
    .pre-footer-cta__phone:hover {
        color: var(--color-accent);
    }
}

.pre-footer-cta__divider {
    display: none;
}

@media (min-width: 768px) {
    .pre-footer-cta__actions {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .pre-footer-cta__divider {
        display: block;
        width: 1px;
        height: 32px;
        background-color: rgba(196, 149, 106, 0.3);
    }
}


/* ===========================
   SITE FOOTER
   =========================== */
.site-footer {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(30, 50, 70, 0.9) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(196, 149, 106, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(27, 42, 56, 0.5) 0%, transparent 70%),
        var(--color-bg-dark);
    color: var(--color-text-on-dark);
    padding-block: var(--space-xl) var(--space-md);
    border-top: 2px solid var(--color-accent);
}

.site-footer__grid {
    display: grid;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.site-footer__brand {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--space-sm);
    text-decoration: none;
}

.site-footer__logo-img {
    height: 44px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1) sepia(0.06) saturate(0.5) hue-rotate(345deg) brightness(0.95);
    transition: filter 300ms var(--ease-out-smooth);
}

.site-footer__address p {
    margin-bottom: var(--space-2xs);
    font-size: var(--font-size-sm);
}

.site-footer__address a {
    color: var(--color-text-on-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

@media (hover: hover) {
    .site-footer__address a:hover {
        color: var(--color-accent-light);
    }
}

.site-footer__heading {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-accent-light);
    margin-bottom: var(--space-sm);
}

.site-footer__nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.site-footer__nav a {
    display: inline-block;
    font-size: var(--font-size-sm);
    color: var(--color-text-on-dark);
    text-decoration: none;
    transition: color var(--transition-fast),
                transform 350ms var(--ease-out-expo);
}

@media (hover: hover) {
    .site-footer__nav a:hover {
        color: var(--color-accent-light);
        transform: translateX(4px);
    }
}

.site-footer__social-links {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.site-footer__social-links a {
    color: var(--color-text-on-dark);
    transition: color var(--transition-fast);
}

@media (hover: hover) {
    .site-footer__social-links a:hover {
        color: var(--color-accent-light);
    }
}

/* Licensed & Insured badge */
.site-footer__license {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-accent-light);
    margin-top: var(--space-sm);
}

/* Service Area column */
.site-footer__area-text {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-sm);
}

.site-footer__counties {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-bottom: var(--space-sm);
}

.site-footer__counties li {
    font-size: var(--font-size-sm);
    color: var(--color-text-on-dark);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.site-footer__counties li::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 0.4em;
}

.site-footer__communities {
    font-size: var(--font-size-xs);
    color: var(--color-accent-light);
    line-height: 1.6;
}

.site-footer__bottom {
    padding-top: var(--space-md);
    border-top: 1px solid rgba(245, 240, 232, 0.06);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
}

.footer-break {
    display: block;
}

@media (min-width: 768px) {
    .footer-break {
        display: none;
    }
}

.site-footer__bottom a:not(.insignia) {
    color: var(--color-text-on-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

@media (hover: hover) {
    .site-footer__bottom a:not(.insignia):hover {
        color: var(--color-accent-light);
    }
}

/* ── Ben Sayers Insignia ── */
.insignia {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.625rem;
    margin-top: var(--space-xs);
    padding: 0.3rem 1rem 0.3rem 0.875rem;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0.06) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
                border-color 0.45s ease,
                box-shadow 0.45s ease,
                color 0.3s ease;
}

.insignia__label {
    opacity: 0.6;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.insignia__divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.insignia__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    padding: 3px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.insignia__name {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.04em;
}

/* Shimmer overlay */
.insignia__shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.06) 35%,
        rgba(255, 255, 255, 0.13) 50%,
        rgba(255, 255, 255, 0.06) 65%,
        transparent 80%
    );
    transform: translateX(-101%);
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .insignia__shimmer {
        animation: insignia-shimmer 8s ease-in-out infinite;
    }
}

/* 2s sweep (25% of 8s), then 6s pause (75% of 8s) */
@keyframes insignia-shimmer {
    0% {
        transform: translateX(-101%);
    }
    25% {
        transform: translateX(101%);
    }
    100% {
        transform: translateX(101%);
    }
}

@media (hover: hover) {
    .insignia:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, 0.22);
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.25),
            0 0 0 1px rgba(255, 255, 255, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.95);
    }

    .insignia:hover .insignia__label {
        opacity: 0.85;
    }

    .insignia:hover .insignia__icon {
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
    }

    .insignia:hover .insignia__name {
        color: #fff;
    }
}

.insignia__icon {
    transition: filter 0.45s ease;
}

@media (min-width: 640px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__logo-img {
        height: 48px;
    }
}

@media (min-width: 768px) {
    .site-footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }

    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}


/* ===========================
   MOBILE CTA BAR
   =========================== */
.mobile-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    gap: 1px;
    background-color: #fff;
    border-top: 1px solid #fff;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    /* Clear the iOS home indicator so the buttons aren't overlapped/clipped
       on notched phones. Falls back to 0 where the env var is unsupported. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-cta-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem;
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    min-height: 56px;
    position: relative;
    overflow: hidden;
}

/* Shimmer sweep on sticky bar buttons */
.mobile-cta-bar a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 30%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.06) 70%,
        transparent 100%
    );
    animation: cta-shimmer 4s ease-in-out infinite;
    z-index: 1;
}

.mobile-cta-bar__quote::before {
    animation-delay: 2s !important;
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes cta-shimmer {
        0%, 100% { left: -100%; }
        50% { left: 100%; }
    }
}

.mobile-cta-bar__call {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1f3344 50%, var(--color-primary) 100%);
    color: var(--color-text-inverse);
    box-shadow: inset 0 1px 0 rgba(245, 240, 232, 0.06);
}

.mobile-cta-bar__quote {
    background: linear-gradient(135deg, var(--color-accent) 0%, #d4a87a 50%, var(--color-accent) 100%);
    color: var(--color-primary);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 -4px 16px rgba(196, 149, 106, 0.2);
}

body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
    .mobile-cta-bar {
        display: none;
    }

    body {
        padding-bottom: 0;
    }
}


/* ===========================
   LIGHTBOX (hidden by default)
   =========================== */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
}

.lightbox.is-active {
    display: flex;
}

.lightbox__backdrop {
    position: absolute;
    inset: 0;
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    z-index: 10;
    background: rgba(245, 240, 232, 0.08);
    border: 1px solid rgba(245, 240, 232, 0.12);
    color: var(--color-text-inverse);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__nav--prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.5rem; top: 50%; transform: translateY(-50%); }

@media (hover: hover) {
    .lightbox__close:hover,
    .lightbox__nav:hover {
        background: rgba(196, 149, 106, 0.15);
        border-color: rgba(196, 149, 106, 0.3);
    }
}

.lightbox__image-wrap {
    position: relative;
    z-index: 5;
    max-width: 90vw;
    max-height: 85vh;
    text-align: center;
}

.lightbox__image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.lightbox__caption {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: rgba(245, 240, 232, 0.7);
    margin-top: var(--space-sm);
}

.lightbox__counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-numbers);
    font-size: var(--font-size-sm);
    color: rgba(245, 240, 232, 0.5);
    z-index: 10;
}


/* ===========================
   BACK TO TOP
   =========================== */
.back-to-top {
    position: fixed;
    bottom: 5.5rem;
    right: var(--container-padding);
    z-index: 800;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-dark);
    border: 1px solid rgba(245, 240, 232, 0.1);
    border-radius: 50%;
    color: var(--color-text-on-dark);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 400ms var(--ease-out-smooth),
                visibility 400ms var(--ease-out-smooth),
                transform 400ms var(--ease-out-expo),
                background-color 300ms var(--ease-out-smooth),
                border-color 300ms var(--ease-out-smooth),
                box-shadow 300ms var(--ease-out-smooth);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top svg {
    transition: transform 300ms var(--ease-out-expo);
}

@media (hover: hover) {
    .back-to-top:hover {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-primary);
        box-shadow: 0 6px 24px rgba(196, 149, 106, 0.35),
                    0 0 40px rgba(196, 149, 106, 0.1);
    }

    .back-to-top:hover svg {
        transform: translateY(-2px);
    }
}

@media (min-width: 1024px) {
    .back-to-top {
        bottom: 2rem;
        transition: opacity 450ms var(--ease-out-expo),
                    visibility 450ms var(--ease-out-expo),
                    transform 450ms var(--ease-out-expo),
                    bottom 300ms var(--ease-out-smooth);
    }

    .back-to-top.is-above-footer {
        bottom: 4.5rem;
    }
}


/* ===========================
   GSAP ANIMATION UTILITIES
   =========================== */
/* Section scale transition targets */
.section-scale {
    will-change: transform, border-radius;
    transform-origin: center top;
}

/* SplitType heading reveal targets */
.split-reveal {
    visibility: hidden;
}

/* Clip-path image reveal targets */
.reveal-image {
    overflow: hidden;
}

/* Reduced motion: show everything immediately */
@media (prefers-reduced-motion: reduce) {
    .split-reveal {
        visibility: visible !important;
    }
}

/* Fallback: if GSAP fails to load */
.no-js .split-reveal {
    visibility: visible;
}


/* ===========================
   GRAIN TEXTURE OVERLAY
   Subtle noise for depth - applied via ::after
   =========================== */
.services,
.about,
.process,
.testimonial,
.cta {
    position: relative;
}

.about::after,
.cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-conic-gradient(
            rgba(0, 0, 0, 0.01) 0% 25%,
            transparent 0% 50%
        );
    background-size: 4px 4px;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: multiply;
}

.cta::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    mix-blend-mode: normal;
    opacity: 0.3;
}


/* ===========================
   SECTION UTILITIES
   =========================== */
.section-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-accent-ink);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.section-label::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background-color: var(--color-accent);
}

/* Light-surface copper for labels on DARK backgrounds: the explicit --light
   modifier (homepage dark bands, thank-you) and every hero eyebrow (which use
   data-animate="hero-label"). Class-doubled / attribute specificity so these
   beat the duplicate global .section-label rule further down the file that
   would otherwise re-assert the dark ink color and mute them. */
.section-label.section-label--light,
.section-label[data-animate="hero-label"] {
    color: var(--color-accent-light);
}

.section-label.section-label--light::before,
.section-label[data-animate="hero-label"]::before {
    background-color: var(--color-accent-light);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    transition: gap 400ms var(--ease-out-expo);
}

.link-arrow svg {
    transition: transform 400ms var(--ease-out-expo);
}

@media (hover: hover) {
    .link-arrow:hover {
        gap: 1rem;
    }
    .link-arrow:hover svg {
        transform: translateX(4px);
    }
}


/* ===========================
   SERVICES (homepage)
   Zigzag with clip-path image reveals
   =========================== */
.services {
    padding-top: var(--space-section);
    padding-bottom: 0;
    background: var(--color-warm);
    overflow: hidden;
    border-top: 1px solid var(--color-border-light);
}

.services__header {
    margin-bottom: var(--space-xl);
}

.services__header-content {
    margin-bottom: var(--space-md);
}

.services__header-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
    /* Glass card on mobile */
    background:
        linear-gradient(135deg, rgba(27, 42, 56, 0.06) 0%, rgba(27, 42, 56, 0.02) 100%);
    border: 1px solid rgba(27, 42, 56, 0.08);
    padding: var(--space-md);
}

.services__header-cta-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-light);
}

.services__header-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-numbers);
    font-size: var(--font-size-xl);
    font-weight: 400;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.services__header-phone svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

@media (hover: hover) {
    .services__header-phone:hover {
        color: var(--color-accent);
    }
}

/* Side-by-side from tablet up: title + CTA aside share a row instead of
   stacking. The glass-card aside treatment is mobile-only; from 768px the
   aside becomes the desktop divider/right-aligned column. */
@media (min-width: 768px) {
    .services__header {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--space-xl);
        align-items: start;
    }

    .services__header-content {
        margin-bottom: 0;
    }

    .services__header-aside {
        align-items: flex-end;
        text-align: right;
        /* Wide enough for the phone number + the "Ready to discuss" label to
           sit on single lines; the grid `gap` already separates the columns,
           so the divider only needs a modest inset (not a full --space-xl,
           which grows with viewport and squeezed the content on big screens). */
        max-width: 340px;
        padding: calc(var(--font-size-xs) + var(--space-xs) + 0.5rem) 0 0 var(--space-md);
        /* Reset glass card -> desktop divider */
        background: none;
        border: none;
        border-left: 1px solid var(--color-border);
        border-radius: 0;
    }

    .services__header-aside .btn {
        white-space: nowrap;
    }
}

@media (min-width: 1024px) {
    .services__header {
        gap: var(--space-2xl);
    }
}

.services__title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    max-width: 22ch;
    margin-bottom: var(--space-sm);
}

.services__intro {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    max-width: 52ch;
    line-height: var(--line-height-body);
    padding-top: var(--space-xs);
    border-top: 2px solid var(--color-accent);
    display: inline-block;
}

/* --- Service Row (shared with services page) --- */
.service-row {
    display: block;
    gap: 0;
    border-top: 1px solid var(--color-border-light);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    transition: background-color 600ms var(--ease-in-out-smooth);
}

.service-row__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 1400px;
    margin-inline: auto;
}

/* Accent left-edge indicator on hover */
.service-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-accent-light), var(--color-accent));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 700ms var(--ease-in-out-smooth);
    z-index: 5;
}

.service-row:last-of-type {
    border-bottom: 1px solid var(--color-border-light);
}

.service-row__image {
    overflow: hidden;
    position: relative;
    background-color: var(--color-bg-alt);
    /* Cap height on huge monitors so even tall portrait photos fit on screen */
    max-height: min(75vh, 720px);
    min-height: 280px;
}

.service-row__image img {
    display: block;
    width: 100%;
    height: 100%;
    /* Native aspect preserved — letterboxing on bg-alt when image aspect
     * differs from container. No cropping. */
    object-fit: contain;
    object-position: center;
    transition: transform 800ms var(--ease-in-out-smooth);
    will-change: transform;
}

.service-row__caption {
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem 0.4rem 0.625rem;
    background:
        linear-gradient(135deg, rgba(27, 42, 56, 0.85) 0%, rgba(17, 24, 32, 0.9) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(245, 240, 232, 0.08);
    border-left: 2px solid rgba(196, 149, 106, 0.7);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 3;
}

.service-row__caption-title {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.95);
}

.service-row__caption-detail {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--color-warm);
}

.service-row__caption-title + .service-row__caption-detail::before {
    content: '\00b7';
    margin-right: 0.5rem;
    color: rgba(196, 149, 106, 0.7);
}

.service-row__body {
    padding: var(--space-md) var(--container-padding) var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-row__number {
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
    display: block;
}

.service-row__name {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #243d54;
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-snug);
    transition: color 400ms var(--ease-out-smooth);
}

.service-row__desc {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-md);
    max-width: 45ch;
}

.service-row__arrow {
    display: inline-flex;
    align-items: center;
    color: var(--color-accent);
    transition: transform 600ms var(--ease-in-out-smooth),
                color 500ms var(--ease-in-out-smooth);
}

/* Image overlay for hover tinting */
.service-row__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(27, 42, 56, 0);
    transition: background-color 600ms var(--ease-in-out-smooth);
    z-index: 2;
}

@media (hover: hover) {
    .service-row:hover {
        background-color: rgba(196, 149, 106, 0.02);
    }

    .service-row:hover::before {
        transform: scaleY(1);
    }

    .service-row:hover .service-row__image img {
        transform: scale(1.025);
    }

    .service-row:hover .service-row__image::after {
        background-color: rgba(196, 149, 106, 0.06);
    }

    .service-row:hover .service-row__name {
        color: var(--color-accent);
    }

    .service-row:hover .service-row__arrow {
        transform: translateX(8px);
        color: var(--color-accent-hover);
    }
}

/* Desktop: zigzag layout inside the centered __inner wrapper. Image column
 * is sized to comfortably hold a portrait photo; text column gets the rest.
 * Row background extends edge-to-edge of the viewport. */
@media (min-width: 768px) {
    .service-row__inner {
        grid-template-columns: minmax(360px, 480px) 1fr;
        min-height: 360px;
    }

    .service-row__body {
        padding: var(--space-lg) var(--space-xl);
    }

    .service-row__image {
        height: 100%;
    }

    /* Even rows reverse: photo on right, text on left */
    .service-row:nth-child(even) .service-row__inner {
        grid-template-columns: 1fr minmax(360px, 480px);
    }

    .service-row:nth-child(even) .service-row__image {
        order: 2;
    }

    .service-row:nth-child(even) .service-row__body {
        order: 1;
    }
}

@media (min-width: 1024px) {
    .service-row__inner {
        grid-template-columns: minmax(380px, 540px) 1fr;
    }

    .service-row:nth-child(even) .service-row__inner {
        grid-template-columns: 1fr minmax(380px, 540px);
    }

    .service-row__body {
        padding: var(--space-xl) var(--space-2xl);
    }

    .service-row__name {
        font-size: var(--font-size-2xl);
    }

    .service-row__desc {
        max-width: 58ch;
    }
}

.services__footer {
    margin-top: 0;
    padding-block: var(--space-lg) var(--space-xl);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(27, 42, 56, 0.95) 0%, var(--color-bg-dark) 75%);
    text-align: center;
}

.services__footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.services__footer-text {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 400;
    font-style: italic;
    color: rgba(245, 240, 232, 0.6);
    max-width: 36ch;
    line-height: var(--line-height-body);
}

.services__footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.services__footer .btn svg {
    transition: transform 400ms var(--ease-out-expo);
}

@media (hover: hover) {
    .services__footer .btn:hover svg {
        transform: translateX(4px);
    }
}

@media (min-width: 768px) {
    .services__footer-inner {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--space-lg);
    }

    .services__footer-text {
        padding-right: var(--space-lg);
        border-right: 1px solid rgba(196, 149, 106, 0.25);
    }
}


/* ===========================
   ABOUT + STATS (homepage)
   Editorial layout, stats woven in
   =========================== */
.about {
    padding-top: var(--space-section);
    padding-bottom: 0;
    background: #fff;
}

.about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
}

.about__media {
    position: relative;
}

.about__image-wrap {
    overflow: hidden;
    position: relative;
}

.about__image-wrap {
    /* Fixed height container; image fills via object-fit: contain so the
     * native aspect ratio is preserved. */
    height: min(75vh, 720px);
    min-height: 320px;
}

.about__image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Content column */
.about__content {
    max-width: 55ch;
}

.about__title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.about__text {
    margin-bottom: var(--space-md);
}

.about__text p {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    margin-bottom: var(--space-sm);
}

.about__text p:last-child {
    margin-bottom: 0;
}

/* Values - clean modern list */
.about__values {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
}

.about__value {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.5;
}

.about__value::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 1px;
    background-color: var(--color-accent);
}

/* ---- Metrics band - full-width dark with glass cards ---- */
.about__metrics-band {
    margin-top: var(--space-lg);
    padding-block: var(--space-lg) var(--space-xl);
    background:
        radial-gradient(ellipse at 20% 30%, rgba(38, 59, 77, 0.7) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 70%, rgba(196, 149, 106, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(27, 42, 56, 0.6) 0%, transparent 60%),
        var(--color-bg-dark);
}

.about__metrics-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    text-align: center;
}

.about__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-md) var(--space-sm);
    background: linear-gradient(
        160deg,
        rgba(245, 240, 232, 0.06) 0%,
        rgba(245, 240, 232, 0.02) 100%
    );
    border: 1px solid rgba(245, 240, 232, 0.06);
    border-top: 1px solid rgba(60, 120, 190, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    transition: border-color 400ms var(--ease-out-smooth),
                box-shadow 400ms var(--ease-out-smooth);
}

/* Shimmer sweep across metric cards */
.about__metric::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(60, 120, 190, 0.04) 30%,
        rgba(60, 120, 190, 0.1) 50%,
        rgba(60, 120, 190, 0.04) 70%,
        transparent 100%
    );
    z-index: 0;
}

/* Staggered shimmer animation */
@media (prefers-reduced-motion: no-preference) {
    .about__metric:nth-child(1)::before { animation: metric-shimmer 6s 0.5s ease-in-out infinite; }
    .about__metric:nth-child(2)::before { animation: metric-shimmer 6s 1.5s ease-in-out infinite; }
    .about__metric:nth-child(3)::before { animation: metric-shimmer 6s 2.5s ease-in-out infinite; }
    .about__metric:nth-child(4)::before { animation: metric-shimmer 6s 3.5s ease-in-out infinite; }

    @keyframes metric-shimmer {
        0%, 100% { left: -100%; }
        40%, 60% { left: 100%; }
    }
}

.about__metric-number {
    font-family: var(--font-numbers);
    font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
    font-weight: 300;
    color: var(--color-accent-light);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 30px rgba(60, 120, 190, 0.35);
}

.about__metric-label {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(245, 240, 232, 0.7);
    text-align: center;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

@media (hover: hover) {
    .about__metric:hover {
        border-color: rgba(60, 120, 190, 0.3);
        box-shadow:
            0 0 24px rgba(60, 120, 190, 0.1),
            inset 0 0 20px rgba(60, 120, 190, 0.04);
    }

    .about__metric:hover .about__metric-number {
        text-shadow: 0 0 40px rgba(60, 120, 190, 0.5);
    }
}

@media (min-width: 768px) {
    .about__image-wrap {
        /* Desktop: tighter cap so the image sits comfortably in the
         * editorial column without dominating. */
        height: 640px;
    }

    .about__metrics-inner {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
    }

    .about__metric {
        padding: var(--space-lg) var(--space-md);
    }
}

@media (min-width: 1024px) {
    .about__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

    .about__metric {
        padding: var(--space-xl) var(--space-lg);
    }

    .about__metric-number {
        font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem);
    }
}


/* ===========================
   PROCESS / HOW WE WORK
   =========================== */
.process {
    padding-block: var(--space-section);
    background:
        radial-gradient(ellipse at 80% 20%, rgba(196, 149, 106, 0.04) 0%, transparent 50%),
        var(--color-warm);
    position: relative;
    border-top: 1px solid var(--color-border-light);
}

.about + .process {
    border-top: none;
    padding-top: var(--space-xl);
}

.process__header {
    margin-bottom: var(--space-xl);
}

.process__header-content {
    max-width: 50ch;
    margin-bottom: var(--space-md);
}

.process__header-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.process__header-cta-label {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-style: italic;
    color: var(--color-text-light);
    max-width: 28ch;
}

@media (min-width: 1024px) {
    .process__header {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--space-2xl);
        align-items: start;
    }

    .process__header-content {
        margin-bottom: 0;
    }

    .process__header-aside {
        align-items: flex-end;
        text-align: right;
        padding-left: var(--space-xl);
        border-left: 1px solid var(--color-border);
        padding-top: calc(var(--font-size-xs) + var(--space-xs) + 0.5rem);
    }
}

.process__title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
}

.process__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
}

/* Vertical timeline line */
.process__steps::before {
    content: '';
    position: absolute;
    left: 1.25ch;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border-light);
    z-index: 0;
}

/* Copper fill line (animated via GSAP) */
.process__steps::after {
    content: '';
    position: absolute;
    left: 1.25ch;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--color-accent), var(--color-accent-light));
    z-index: 1;
    transform-origin: top;
    transform: scaleY(var(--process-progress, 0));
}

.process__step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
    padding-block: var(--space-lg);
    padding-left: var(--space-2xs);
    align-items: start;
    position: relative;
    border: none;
}

.process__step + .process__step {
    border-top: 1px solid var(--color-border-light);
}

.process__step-number {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    letter-spacing: -0.02em;
    opacity: 0.2;
    min-width: 2.5ch;
    position: relative;
    z-index: 2;
    transition: opacity 600ms var(--ease-out-smooth),
                color 600ms var(--ease-out-smooth);
}

/* Active state when scrolled into view */
.process__step.is-active .process__step-number {
    opacity: 0.7;
}

.process__step-content {
    max-width: 55ch;
}

.process__step-title {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.process__step-desc {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
}

@media (hover: hover) {
    .process__step:hover .process__step-number {
        opacity: 0.7;
    }
}

@media (min-width: 768px) {
    .process__steps {
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--space-xl);
    }

    /* Hide vertical timeline on 2-column layout */
    .process__steps::before,
    .process__steps::after {
        display: none;
    }

    .process__step {
        gap: var(--space-lg);
        padding-block: var(--space-lg);
        padding-left: 0;
        border-top: 1px solid var(--color-border-light);
    }

    .process__step + .process__step {
        border-top: 1px solid var(--color-border-light);
    }

    .process__step:nth-child(2) {
        border-top: 1px solid var(--color-border-light);
    }
}

@media (min-width: 1024px) {
    .process__step-number {
        font-size: var(--font-size-3xl);
    }
}


/* ===========================
   FEATURED PROJECT
   Full-bleed photo interrupter (grid breaker)
   =========================== */
.featured-project {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Full-bleed dark background. The image+text grid lives in __inner so
     * the background extends edge-to-edge of the viewport while the content
     * stays in a centered max-width container. */
    background-color: var(--color-bg-dark);
}

.featured-project__inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
}

.featured-project__image-wrap {
    position: relative;
    overflow: hidden;
    background-color: #0b1218;
    min-height: 320px;
    /* Cap on huge monitors so the photo never exceeds viewport height */
    max-height: min(85vh, 820px);
}

.featured-project__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    will-change: transform;
}

/* Overlay no longer needed in side-by-side layout — image is contained
 * (no cropping), so there's no need for a scrim under text positioned over it.
 * Kept as a no-op for any inline references. */
.featured-project__overlay {
    display: none;
}

.featured-project__content {
    position: relative;
    z-index: 2;
    padding-block: var(--space-xl);
    color: var(--color-text-inverse);
}

.featured-project__title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-inverse);
    margin-bottom: var(--space-sm);
    max-width: 20ch;
}

.featured-project__detail {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.featured-project__location,
.featured-project__type {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-accent-light);
}

.featured-project__separator {
    width: 24px;
    height: 1px;
    background-color: rgba(196, 149, 106, 0.5);
}

@media (min-width: 768px) {
    .featured-project__image {
        aspect-ratio: 21 / 9;
    }

    .featured-project__title {
        font-size: var(--font-size-3xl);
    }

    .featured-project__content {
        padding-bottom: var(--space-2xl);
    }
}

@media (min-width: 768px) {
    .featured-project__inner {
        /* Centered inner grid: image column sized to the photo's 3:4 portrait
         * ratio so the photo fills the cell exactly (no crop, no letterbox);
         * text column gets the remainder of the contained row. Dark-blue
         * background of the parent section continues edge-to-edge of the
         * viewport beyond this centered block. */
        max-width: 1400px;
        margin-inline: auto;
        grid-template-columns: minmax(360px, 540px) 1fr;
        align-items: stretch;
    }

    .featured-project__image-wrap {
        aspect-ratio: 3 / 4;
        height: auto;
        max-height: min(80vh, 720px);
        min-height: 0;
    }

    .featured-project__content {
        padding-block: var(--space-2xl);
        padding-inline: var(--space-2xl);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* --break modifier: pure photo interrupter (no text column).
     * Used on the about page where the section is a visual rest beat,
     * not a project showcase. Single full-width column, taller image
     * cap, image uses cover instead of contain to fill cleanly. */
    .featured-project--break {
        grid-template-columns: 1fr;
    }
    .featured-project--break .featured-project__image-wrap {
        /* Full-bleed photo interrupter: the section is not a grid, so clear the
         * 3/4 aspect-ratio (which would otherwise derive width from the capped
         * height and strand the photo in a ~480px column with a dark void to
         * its right on tablet/desktop/TV). Let the block span full width. */
        width: 100%;
        aspect-ratio: auto;
        height: min(70vh, 640px);
        max-height: none;
    }
    .featured-project--break .featured-project__image {
        object-fit: cover;
    }
}


/* ===========================
   TESTIMONIAL CAROUSEL (homepage)
   Review carousel with platform logos
   =========================== */
.testimonial {
    padding-block: var(--space-section);
    background:
        radial-gradient(ellipse at 75% 20%, rgba(196, 149, 106, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 15% 80%, rgba(27, 42, 56, 0.03) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 100%, rgba(196, 149, 106, 0.05) 0%, transparent 55%),
        linear-gradient(170deg, #F5F2ED 0%, #F2EEE7 35%, #F5F2ED 65%, #F0ECE6 100%);
    border-top: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

/* Hairline copper accent across the top */
.testimonial::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(196, 149, 106, 0.5) 30%,
        rgba(196, 149, 106, 0.5) 70%,
        transparent 100%);
}

/* Header: label + nav arrows */
.testimonial__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.testimonial__header-lede {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.testimonial__eyebrow {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -0.01em;
    margin: 0;
}

.testimonial__nav {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.testimonial__nav-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.testimonial__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.3s var(--ease-out-smooth);
}

.testimonial__arrow:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(196, 149, 106, 0.5);
}

.testimonial__arrow:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Counter: large display digits, copper, divider hairline */
.testimonial__counter {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2xs);
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.testimonial__counter-current {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: -0.02em;
}

.testimonial__counter-divider {
    display: inline-block;
    width: 22px;
    height: 1px;
    background: rgba(27, 42, 56, 0.25);
    transform: rotate(-65deg);
    transform-origin: center;
    margin: 0 var(--space-3xs);
    align-self: center;
}

.testimonial__counter-total {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-light);
    letter-spacing: 0.04em;
}

/* Carousel container — anchors the decorative glyph */
.testimonial__carousel {
    position: relative;
    overflow: visible;
    padding-top: var(--space-md);
}

/* Decorative quote glyph: huge, copper, low opacity, anchored top-left */
.testimonial__glyph {
    position: absolute;
    top: -28px;
    left: -8px;
    width: 130px;
    height: 130px;
    color: var(--color-accent);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

.testimonial__track {
    position: relative;
    z-index: 1;
}

/* Slide */
.testimonial__slide {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.testimonial__slide.is-active {
    display: block;
    opacity: 1;
}

.testimonial__slide.is-exiting {
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* 5-star rating row in copper */
.testimonial__rating {
    display: flex;
    gap: 4px;
    margin-bottom: var(--space-sm);
}

.testimonial__star {
    width: 18px;
    height: 18px;
    color: rgba(196, 149, 106, 0.25);
    flex-shrink: 0;
}

.testimonial__star.is-filled {
    color: var(--color-accent);
}

/* Quote */
.testimonial__quote {
    border: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.testimonial__text {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 400;
    color: var(--color-primary);
    line-height: 1.6;
    letter-spacing: -0.005em;
    max-width: 60ch;
    margin: 0;
}

.testimonial__text::before {
    content: '\201C'; /* left double quotation */
    color: var(--color-accent);
    margin-right: 2px;
}

.testimonial__text::after {
    content: '\201D';
    color: var(--color-accent);
    margin-left: 2px;
}

/* Attribution band */
.testimonial__attribution {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(196, 149, 106, 0.3);
    position: relative;
}

/* Tiny copper marker that anchors the rule's start */
.testimonial__attribution::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 44px;
    height: 2px;
    background: var(--color-accent);
}

.testimonial__author-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.testimonial__author {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0;
    margin: 0;
}

.testimonial__meta {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    letter-spacing: 0.02em;
    margin: 0;
}

/* Source: chip with subtle bg + copper border on hover */
.testimonial__source {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(27, 42, 56, 0.08);
    border-radius: 999px;
    transition: border-color 350ms var(--ease-out-smooth),
                background 350ms var(--ease-out-smooth);
}

.testimonial__source:hover {
    border-color: rgba(196, 149, 106, 0.5);
    background: rgba(255, 255, 255, 0.85);
}

.testimonial__platform-icon {
    color: var(--color-primary);
    flex-shrink: 0;
    opacity: 0.7;
    width: 16px;
    height: 16px;
}

.testimonial__platform-name {
    font-family: var(--font-ui);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-primary);
}

.testimonial__source-suffix {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
    padding-left: var(--space-2xs);
    border-left: 1px solid rgba(27, 42, 56, 0.15);
    margin-left: var(--space-3xs);
}

/* When a source has a profile URL the badge becomes an outbound link */
a.testimonial__source {
    text-decoration: none;
    cursor: pointer;
}

.testimonial__source-ext {
    color: var(--color-accent);
    opacity: 0.5;
    margin-left: var(--space-3xs);
    flex-shrink: 0;
    transition: opacity 300ms var(--ease-out-smooth),
                transform 300ms var(--ease-out-smooth);
}

a.testimonial__source:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* "Read all reviews" button below the slider (uses .btn--outline) */
.testimonial__viewall {
    margin-top: var(--space-xl);
    text-align: center;
}

.testimonial__viewall-arrow {
    transition: transform 300ms var(--ease-out-smooth);
}

@media (hover: hover) {
    a.testimonial__source:hover .testimonial__source-ext {
        opacity: 1;
        transform: translate(2px, -2px);
    }

    .testimonial__viewall-link:hover .testimonial__viewall-arrow {
        transform: translateX(4px);
    }
}

@media (min-width: 640px) {
    .testimonial__eyebrow {
        font-size: var(--font-size-3xl);
    }

    .testimonial__glyph {
        top: -40px;
        left: -16px;
        width: 180px;
        height: 180px;
    }

    .testimonial__text {
        font-size: var(--font-size-xl);
        line-height: 1.5;
    }

    .testimonial__attribution {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xl);
    }

    .testimonial__counter-current {
        font-size: var(--font-size-2xl);
    }
}

@media (min-width: 1024px) {
    .testimonial__glyph {
        top: -56px;
        left: -28px;
        width: 240px;
        height: 240px;
    }

    .testimonial__text {
        font-size: var(--font-size-2xl);
        line-height: 1.45;
        max-width: 42ch;
    }

    .testimonial__inner {
        max-width: 1100px;
    }
}


/* ===========================
   REVIEWS PAGE (/reviews/)
   Dark cinematic hero + Midnight & Copper review-card wall.
   Reuses the homepage testimonial design language (copper stars,
   source chips, Archivo) at a reading scale for full verbatim quotes.
   =========================== */

/* Shared star glyph for hero stat + cards */
.reviews-star {
    width: 18px;
    height: 18px;
    color: rgba(196, 149, 106, 0.25);
    flex-shrink: 0;
}

.reviews-star.is-filled {
    color: var(--color-accent);
}

/* --- Hero --- */
.reviews-hero {
    position: relative;
    padding-top: calc(var(--header-height) + var(--space-2xl));
    padding-bottom: var(--space-xl);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    overflow: hidden;
}

.reviews-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(196, 149, 106, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(38, 59, 77, 0.4) 0%, transparent 50%);
    pointer-events: none;
}

/* Hero image - hidden on mobile, right-half on desktop (matches about/faq) */
.reviews-hero__image-col {
    display: none;
}

.reviews-hero__content {
    position: relative;
    z-index: 2;
    max-width: 48ch;
}

.reviews-hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: 800;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-md);
    /* Revealed by the hero SplitType timeline (main.js). Matches faq/about. */
    visibility: hidden;
}

.reviews-hero__intro {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    color: var(--color-text-on-dark);
    line-height: var(--line-height-body);
    max-width: 56ch;
    margin-bottom: var(--space-lg);
}

/* Aggregate rating stat: large copper score beside stars + count */
.reviews-hero__stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(196, 149, 106, 0.3);
    position: relative;
}

.reviews-hero__stat::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 44px;
    height: 2px;
    background: var(--color-accent);
}

.reviews-hero__stat-score {
    font-family: var(--font-numbers);
    font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent);
    letter-spacing: -0.02em;
}

.reviews-hero__stat-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.reviews-hero__stat-stars {
    display: inline-flex;
    gap: 3px;
}

.reviews-hero__stat-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-on-dark);
}

/* --- Review wall --- */
.reviews-body {
    padding-block: var(--space-xl);
    position: relative;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(196, 149, 106, 0.05) 0%, transparent 55%),
        linear-gradient(170deg, #F5F2ED 0%, #F2EEE7 40%, #F5F2ED 100%);
}

/* Hairline copper accent across the top, echoing the homepage band */
.reviews-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(196, 149, 106, 0.5) 30%,
        rgba(196, 149, 106, 0.5) 70%,
        transparent 100%);
}

/* Masonry pack so varying review lengths read as an editorial wall
   instead of a rigid equal-card row. */
.reviews-grid {
    column-gap: var(--space-md);
}

.review-card {
    break-inside: avoid;
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-top: 2px solid rgba(196, 149, 106, 0.35);
    box-shadow: var(--shadow-sm);
    transition: border-top-color 350ms var(--ease-out-smooth),
                box-shadow 350ms var(--ease-out-smooth),
                transform 350ms var(--ease-out-smooth);
}

.review-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.review-card__rating {
    display: flex;
    gap: 3px;
}

.review-card__rating .reviews-star {
    width: 16px;
    height: 16px;
}

/* Source chip, lighter sibling of the homepage testimonial source badge */
.review-card__source {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 5px 10px;
    background: rgba(196, 149, 106, 0.08);
    border: 1px solid rgba(196, 149, 106, 0.2);
    border-radius: 999px;
    flex-shrink: 0;
}

.review-card__source-icon {
    color: var(--color-accent-ink);
    flex-shrink: 0;
}

.review-card__source-name {
    font-family: var(--font-ui);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-accent-ink);
}

.review-card__quote {
    border: none;
    margin: 0;
    padding: 0;
}

.review-card__text {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-primary);
    margin: 0;
}

.review-card__attribution {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border-light);
}

.review-card__author {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-primary);
}

.review-card__meta {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    letter-spacing: 0.02em;
}

/* Source link to the verified Houzz profile */
.reviews-source {
    margin-top: var(--space-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.reviews-source__note {
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
}

/* Houzz CTA reuses the site's .btn--outline component (bordered, fills dark
   on hover). Copper is reserved for the quote CTA, so here the Houzz glyph
   keeps a copper pop while the arrow follows the label colour and slides. */
.reviews-source__link {
    gap: var(--space-xs);
}

.reviews-source__icon,
.reviews-source__arrow {
    position: relative;
    z-index: 2;
}

.reviews-source__icon {
    color: var(--color-accent);
}

.reviews-source__arrow {
    color: currentColor;
    transition: transform 300ms var(--ease-out-smooth);
}

.reviews-source__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

@media (hover: hover) {
    .review-card:hover {
        border-top-color: var(--color-accent);
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
    }

    .reviews-source__link:hover .reviews-source__arrow {
        transform: translateX(4px);
    }
}

@media (min-width: 768px) {
    .reviews-grid {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .reviews-hero {
        min-height: 70vh;
        max-height: 720px;
        display: flex;
        align-items: center;
    }

    .reviews-hero__image-col {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        z-index: 1;
        overflow: hidden;
    }

    .reviews-hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Copper-to-dark vertical seam between photo and text (matches about hero) */
    .reviews-hero__image-col::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: linear-gradient(to bottom, var(--color-accent) 0%, var(--color-primary-light) 50%, var(--color-bg-dark) 100%);
        z-index: 2;
    }

    .reviews-body__layout,
    .reviews-grid {
        max-width: 1100px;
        margin-inline: auto;
    }
}


/* ===========================
   CTA SECTION (homepage bottom)
   Dark section with glassy form card
   =========================== */
.cta {
    padding-block: var(--space-section);
    background-color: var(--color-bg-dark);
    position: relative;
    overflow: hidden;
}

.cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 0%, rgba(27, 42, 56, 0.8) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(17, 24, 32, 0.6) 0%, transparent 50%);
    z-index: 0;
}

.cta__inner {
    position: relative;
    z-index: 1;
}

.cta__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.cta__content {
    max-width: 50ch;
}

.cta__title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-inverse);
    margin-bottom: var(--space-md);
    line-height: var(--line-height-snug);
}

.cta__text {
    font-size: var(--font-size-base);
    color: var(--color-text-on-dark);
    margin-bottom: var(--space-lg);
    max-width: 50ch;
    line-height: var(--line-height-body);
}

.cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-numbers);
    font-size: var(--font-size-xl);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: color var(--transition-base);
}

.cta__phone svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

@media (hover: hover) {
    .cta__phone:hover {
        color: var(--color-accent);
    }
}

/* Trust signals */
.cta__trust {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(245, 240, 232, 0.08);
}

.cta__trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: rgba(245, 240, 232, 0.7);
}

.cta__trust-item svg {
    color: var(--color-accent);
    flex-shrink: 0;
    opacity: 0.7;
}

@media (min-width: 640px) {
    .cta__trust {
        flex-direction: row;
        gap: var(--space-md);
    }
}

/* Glassy form card on dark background */
.cta__form-wrap {
    padding: var(--space-lg) var(--space-md);
    background:
        linear-gradient(135deg, rgba(245, 240, 232, 0.04) 0%, rgba(245, 240, 232, 0.02) 100%);
    border: 1px solid rgba(245, 240, 232, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(245, 240, 232, 0.04);
    transition: border-color 500ms var(--ease-out-smooth);
}

.cta__form-wrap:focus-within {
    border-color: rgba(196, 149, 106, 0.15);
}

/* --- Contact Form --- */
.cta-form__heading {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-accent-light);
    margin-bottom: var(--space-sm);
}

.cta-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

.cta-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

.cta-form__field {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.cta-form__label {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: rgba(245, 240, 232, 0.55);
    margin-bottom: var(--space-3xs);
    transition: color 300ms var(--ease-out-smooth);
}

/* Label turns accent when field is focused */
.cta-form__field:focus-within .cta-form__label {
    color: var(--color-accent-light);
}

.cta-form__input {
    padding: 0.625rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(245, 240, 232, 0.12);
    border-radius: 0;
    color: var(--color-text-inverse);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    transition: border-color 300ms var(--ease-out-smooth),
                box-shadow 300ms var(--ease-out-smooth);
}

.cta-form__input::placeholder {
    color: rgba(245, 240, 232, 0.4);
    font-style: italic;
    font-size: var(--font-size-sm);
}

.cta-form__input:hover {
    border-bottom-color: rgba(245, 240, 232, 0.25);
}

.cta-form__input:focus {
    outline: none;
    color: #fff;
    border-bottom-color: var(--color-accent);
    box-shadow: 0 1px 0 0 var(--color-accent);
}

.cta-form__input--textarea {
    min-height: 90px;
    resize: vertical;
}

.cta-form .btn {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: var(--font-size-base);
}

.cta-form__note {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    color: rgba(245, 240, 232, 0.35);
    margin-top: var(--space-2xs);
    text-align: center;
}

@media (min-width: 640px) {
    .cta-form__row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .cta__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
        align-items: center;
    }

    .cta__form-wrap {
        padding: var(--space-lg) var(--space-lg);
    }

    .cta__phone {
        font-size: var(--font-size-2xl);
    }
}



/* ===========================
   ABOUT PAGE
   Design: Cinematic editorial storytelling, photography-first
   Refs: Eider (full-bleed hero, clip-path), DTRE (timeline, editorial),
         Wider SA (photography restraint, metrics), Lufte (section-scale)
   =========================== */

/* --- About Hero: Editorial split (text left, image right) --- */
/* --- About Hero: Dark cinematic, matches services landing --- */
.about-hero {
    position: relative;
    padding-top: calc(var(--header-height) + var(--space-2xl));
    padding-bottom: var(--space-xl);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    overflow: hidden;
}

.about-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(196, 149, 106, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(38, 59, 77, 0.4) 0%, transparent 50%);
    pointer-events: none;
}

.about-hero__content {
    position: relative;
    z-index: 2;
    max-width: 48ch;
}

.about-hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: 800;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-md);
    visibility: hidden;
}

.about-hero__subtitle {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    color: var(--color-text-on-dark);
    line-height: var(--line-height-body);
    max-width: 52ch;
    margin-bottom: var(--space-md);
}

.about-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

.about-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-numbers);
    font-size: var(--font-size-sm);
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--color-text-on-dark);
    text-decoration: none;
    transition: color 300ms var(--ease-out-smooth);
}

@media (hover: hover) {
    .about-hero__phone:hover {
        color: var(--color-accent-light);
    }
}

/* Hero image - hidden on mobile, atmospheric fade on desktop */
.about-hero__image-col {
    display: none;
}

@media (min-width: 1024px) {
    .about-hero {
        min-height: 70vh;
        max-height: 720px;
        display: flex;
        align-items: center;
    }

    .about-hero__image-col {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        z-index: 1;
        overflow: hidden;
    }

    .about-hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Gradient fade: strong left edge blends into dark bg, subtle top/bottom */
    /* Vertical gradient strip between text and photo */
    .about-hero__image-col::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: linear-gradient(to bottom, var(--color-accent) 0%, var(--color-primary-light) 50%, var(--color-bg-dark) 100%);
        z-index: 2;
    }
}


/* --- Story: Editorial two-column + inline stats (Wider SA-inspired) --- */
.about-story {
    padding-block: var(--space-section);
    background-color: var(--color-bg);
}

.about-story__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.about-story__content {
    display: flex;
    flex-direction: column;
}

.about-story__title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-lg);
    max-width: 20ch;
    visibility: hidden;
}

.about-story__lead {
    font-family: var(--font-body);
    font-size: var(--font-size-xl);
    font-weight: 300;
    line-height: 1.55;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    font-style: italic;
    max-width: 52ch;
}

.about-story__body {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: var(--line-height-body);
    max-width: 52ch;
    margin-bottom: var(--space-xl);
}

/* Inline stats - integrated into narrative, not a separate band */
.about-story__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

@media (min-width: 480px) {
    .about-story__stats {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
    }
}

.about-story__stat-number {
    font-family: var(--font-numbers);
    font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    display: block;
    letter-spacing: -0.03em;
}

.about-story__stat-label {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    display: block;
    margin-top: var(--space-2xs);
    line-height: 1.4;
}

/* Story image with clip-path reveal */
.about-story__image {
    position: relative;
    overflow: hidden;
}

.about-story__image {
    /* Fixed container height; image fills via contain to preserve aspect. */
    height: min(70vh, 640px);
    min-height: 320px;
}

.about-story__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

@media (min-width: 768px) {
    .about-story__inner {
        grid-template-columns: 55% 1fr;
        gap: var(--space-xl);
        align-items: start;
    }

    .about-story__image {
        position: sticky;
        top: calc(var(--header-height) + var(--space-md));
    }

    /* Sticky already set on .about-story__image above. Native aspect kept. */
}

@media (min-width: 1024px) {
    .about-story__inner {
        grid-template-columns: 55% 40%;
        gap: 5%;
    }
}


/* --- Timeline: Horizontal milestones (DTRE-inspired) --- */
.about-timeline {
    padding-block: var(--space-lg) var(--space-xl);
    background-color: var(--color-bg-alt);
    overflow: hidden;
}

.about-timeline__track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg) var(--space-md);
    position: relative;
    padding-block: var(--space-sm);
}

/* Horizontal connecting line - hidden on mobile */
.about-timeline__line {
    display: none;
}

.about-timeline__point {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    position: relative;
    z-index: 1;
    text-align: left;
    padding: var(--space-sm);
    background: var(--color-bg);
    border-left: 3px solid var(--color-border);
}

.about-timeline__point--now {
    border-left-color: var(--color-accent);
}

/* Dots hidden on mobile */
.about-timeline__dot {
    display: none;
}

.about-timeline__year {
    font-family: var(--font-numbers);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

.about-timeline__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    border: 2px solid var(--color-border);
    flex-shrink: 0;
    transition: border-color 600ms var(--ease-out-smooth),
                background 600ms var(--ease-out-smooth);
}

.about-timeline__point--now .about-timeline__dot {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(196, 149, 106, 0.15),
                0 0 12px rgba(196, 149, 106, 0.3);
}

.about-timeline__event {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    max-width: 18ch;
    line-height: 1.4;
}

/* Desktop timeline: horizontal 4-column layout */
@media (min-width: 500px) {
    .about-timeline__track {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .about-timeline__line {
        display: block;
        position: absolute;
        left: 12.5%;
        right: 12.5%;
        top: calc(var(--space-sm) + 1.5em + var(--space-xs) + 6px);
        height: 2px;
        background: linear-gradient(90deg,
            var(--color-border) 0%,
            var(--color-accent) 75%,
            var(--color-accent) 100%
        );
    }

    .about-timeline__point {
        align-items: center;
        text-align: center;
        padding: 0;
        background: none;
        border-left: none;
    }

    .about-timeline__point--now {
        border-left-color: transparent;
    }

    .about-timeline__dot {
        display: block;
    }
}


/* --- Values: Philosophy + Differentiators (combined dark section) --- */
.about-values {
    padding-block: var(--space-section);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}

/* Atmospheric gradient - same depth as homepage sections */
.about-values::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(38, 59, 77, 0.5) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 15%, rgba(196, 149, 106, 0.05) 0%, transparent 35%);
    pointer-events: none;
}

/* Copper accent line at top */
.about-values::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 10%,
        var(--color-accent) 40%,
        var(--color-accent-light) 60%,
        transparent 90%
    );
    opacity: 0.6;
}

.about-values__inner {
    position: relative;
    z-index: 1;
}

.about-values__title {
    font-family: var(--font-body);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-inverse);
    line-height: var(--line-height-snug);
    letter-spacing: -0.01em;
    max-width: 20ch;
    margin-bottom: var(--space-md);
    visibility: hidden;
}

.about-values__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

.about-values__left {
    display: flex;
    flex-direction: column;
}

.about-values__left .section-label {
    margin-bottom: var(--space-sm);
}

/* Philosophy blockquote - prominent pull-quote */
.about-values__quote {
    position: relative;
    padding-left: var(--space-md);
    border-left: 3px solid var(--color-accent);
}

.about-values__quote p {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 300;
    font-style: italic;
    line-height: 1.7;
    color: rgba(245, 240, 232, 0.75);
    max-width: 45ch;
}

/* Value items - compact editorial list */
.about-values__items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-values__item {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    padding-block: var(--space-md);
    border-top: 1px solid rgba(245, 240, 232, 0.08);
}

.about-values__item:last-child {
    border-bottom: 1px solid rgba(245, 240, 232, 0.08);
}

.about-values__item-number {
    font-family: var(--font-numbers);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-accent);
    letter-spacing: 0.02em;
    flex-shrink: 0;
    line-height: 1.8;
    min-width: 2ch;
}

.about-values__item-name {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-inverse);
    margin-bottom: var(--space-3xs);
    letter-spacing: var(--letter-spacing-tight);
}

.about-values__item-desc {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-on-dark);
    line-height: var(--line-height-body);
}

@media (min-width: 768px) {
    .about-values__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .about-values__grid {
        grid-template-columns: 40% 55%;
        gap: 5%;
    }

    .about-values__title {
        font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    }

    .about-values__quote p {
        font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
    }
}


/* --- Gallery: Asymmetric photo mosaic --- */
.about-gallery {
    padding-block: var(--space-section);
    background-color: var(--color-bg-alt);
}

.about-gallery__header {
    margin-bottom: var(--space-lg);
}

.about-gallery__title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    visibility: hidden;
}

.about-gallery__mosaic {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xs);
}

.about-gallery__item {
    position: relative;
    overflow: hidden;
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.about-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms var(--ease-out-smooth);
}

/* Dark overlay on hover for lightbox hint */
.about-gallery__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 32, 0);
    transition: background 400ms var(--ease-out-smooth);
    pointer-events: none;
}

@media (hover: hover) {
    .about-gallery__item:hover img {
        transform: scale(1.04);
    }

    .about-gallery__item:hover::after {
        background: rgba(17, 24, 32, 0.2);
    }
}

.about-gallery__cta {
    text-align: center;
    margin-top: var(--space-xl);
}

@media (min-width: 600px) {
    .about-gallery__mosaic {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xs);
    }

    /* First item spans full width for emphasis */
    .about-gallery__item:first-child {
        grid-column: 1 / -1;
    }

    .about-gallery__item:first-child img {
        aspect-ratio: 21 / 9;
    }

    .about-gallery__item:not(:first-child) img {
        aspect-ratio: 4 / 3;
    }
}

@media (min-width: 900px) {
    .about-gallery__mosaic {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xs);
    }

    /* Large feature image: 2 cols, 2 rows */
    .about-gallery__item:first-child {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    .about-gallery__item:first-child img {
        aspect-ratio: auto;
        height: 100%;
    }

    .about-gallery__item:not(:first-child) img {
        aspect-ratio: 4 / 3;
    }
}


/* ===========================
   SERVICES LISTING PAGE
   =========================== */

/* --- Services Hero --- */
.services-hero {
    position: relative;
    padding-top: calc(var(--header-height) + var(--space-2xl));
    padding-bottom: var(--space-xl);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    overflow: hidden;
}

.services-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(196, 149, 106, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(38, 59, 77, 0.4) 0%, transparent 50%);
    pointer-events: none;
}

.services-hero__content {
    position: relative;
    z-index: 2;
    max-width: 48ch;
}

.services-hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: 800;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-md);
}

.services-hero__intro {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    color: var(--color-text-on-dark);
    line-height: var(--line-height-body);
    max-width: 52ch;
}

/* Hero image - hidden on mobile, atmospheric fade on desktop */
.services-hero__image-col {
    display: none;
}

@media (min-width: 1024px) {
    .services-hero {
        min-height: 70vh;
        max-height: 720px;
        display: flex;
        align-items: center;
    }

    .services-hero__image-col {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        z-index: 1;
        overflow: hidden;
    }

    .services-hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Gradient fade: strong left edge blends into dark bg, subtle top/bottom */
    /* Vertical gradient strip between text and photo */
    .services-hero__image-col::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: linear-gradient(to bottom, var(--color-accent) 0%, var(--color-primary-light) 50%, var(--color-bg-dark) 100%);
        z-index: 2;
    }
}

/* --- Services Listing Section --- */
.services-listing {
    padding-top: var(--space-xl);
}

.services-listing__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
}

.services-listing__category-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-accent);
    display: inline-block;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-accent);
}

.services-listing__heading {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    max-width: 24ch;
    line-height: var(--line-height-snug);
}

.services-listing__header-aside {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.services-listing__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

@media (hover: hover) {
    .services-listing__phone:hover {
        color: var(--color-accent);
    }
}

@media (min-width: 768px) {
    .services-listing__header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }

    .services-listing__header-aside {
        flex-direction: column;
        align-items: flex-end;
    }
}


/* --- Commercial Section --- */
.services-commercial {
    padding-block: var(--space-xl);
    background:
        radial-gradient(ellipse at 30% 50%, rgba(196, 149, 106, 0.04) 0%, transparent 50%),
        var(--color-warm);
    border-top: 1px solid var(--color-border-light);
}

.services-commercial__header {
    max-width: 55ch;
    margin-bottom: var(--space-lg);
}

.services-commercial__heading {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: var(--line-height-snug);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.services-commercial__intro {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
}

.services-commercial__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .services-commercial__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .services-commercial__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Commercial Card --- */
.commercial-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg) var(--space-md);
    background: white;
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.commercial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms var(--ease-out-expo);
}

.commercial-card__icon {
    width: 36px;
    height: 36px;
    color: var(--color-accent);
    margin-bottom: var(--space-md);
}

.commercial-card__icon svg {
    width: 100%;
    height: 100%;
}

.commercial-card__title {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
    line-height: var(--line-height-snug);
}

.commercial-card__desc {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    margin-bottom: var(--space-md);
    flex: 1;
}

.commercial-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-accent);
    transition: gap var(--transition-base);
}

@media (hover: hover) {
    .commercial-card:hover {
        border-color: var(--color-accent-light);
        box-shadow: var(--shadow-md);
    }

    .commercial-card:hover::before {
        transform: scaleX(1);
    }

    .commercial-card:hover .commercial-card__link {
        gap: 0.625rem;
    }
}


/* ===========================
   COMMERCIAL PROJECTS LIST
   Sits below the capability cards on /services/. Project entries are
   editable via the commercial_projects repeater in admin.
   =========================== */
.commercial-projects {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(27, 42, 56, 0.08);
}

.commercial-projects__header {
    max-width: 720px;
    margin-bottom: var(--space-lg);
}

.commercial-projects__heading {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: var(--space-2xs) 0 var(--space-sm);
    line-height: var(--line-height-snug);
}

.commercial-projects__intro {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

.commercial-projects__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.commercial-projects__item {
    padding: var(--space-md) 0;
    border-top: 1px solid rgba(27, 42, 56, 0.08);
}

.commercial-projects__item:first-child {
    border-top: 1px solid rgba(27, 42, 56, 0.18);
}

.commercial-projects__name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-3xs);
}

.commercial-projects__name {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.commercial-projects__year {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-accent);
    flex-shrink: 0;
}

.commercial-projects__location {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-light);
    margin: 0 0 var(--space-2xs);
}

.commercial-projects__scope {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    margin: 0;
    max-width: 70ch;
}

@media (min-width: 768px) {
    .commercial-projects__list {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-2xl);
    }
    .commercial-projects__item {
        padding-block: var(--space-lg);
    }
    .commercial-projects__item:first-child,
    .commercial-projects__item:nth-child(2) {
        border-top: 1px solid rgba(27, 42, 56, 0.18);
    }
}


/* ===========================
   SERVICE DETAIL PAGE
   =========================== */

/* --- Service Hero (split layout) --- */
.service-hero {
    /* Full-width dark band; the inner wrapper holds the grid + max-width. */
    background-color: var(--color-bg-dark);
}

.service-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 50vh;
}

.service-hero__image-col {
    position: relative;
    overflow: hidden;
    background-color: #0b1218;
    min-height: 240px;
}

.service-hero__img {
    display: block;
    width: 100%;
    height: auto;
    /* Native aspect preserved — the IMG drives the column height. */
    max-height: min(85vh, 880px);
}

.service-hero__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(17, 24, 32, 0.15) 0%, rgba(17, 24, 32, 0.4) 100%);
    pointer-events: none;
}

.service-hero__text-col {
    display: flex;
    align-items: center;
    padding: var(--space-lg) var(--container-padding) var(--space-xl);
    background-color: var(--color-bg-dark);
}

.service-hero__text-inner {
    max-width: 480px;
}

.service-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-on-dark);
    text-decoration: none;
    margin-bottom: var(--space-md);
    transition: color var(--transition-fast);
}

@media (hover: hover) {
    .service-hero__back:hover {
        color: var(--color-accent-light);
    }
}

.service-hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 800;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-sm);
}

.service-hero__tagline {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    font-weight: 400;
    font-style: italic;
    color: var(--color-accent-light);
    margin-bottom: var(--space-sm);
    max-width: 36ch;
}

.service-hero__summary {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-on-dark);
    line-height: var(--line-height-body);
    max-width: 42ch;
    margin-bottom: var(--space-md);
}

.service-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.service-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-on-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

@media (hover: hover) {
    .service-hero__phone:hover {
        color: var(--color-accent-light);
    }
}

/* Desktop: side-by-side split. Image column sized so a portrait photo
 * fills it at native aspect; text column gets the rest. Row height
 * is determined by the photo height (no max-height clamp). */
@media (min-width: 1024px) {
    .service-hero__inner {
        /* Share the body content's max-width container (same --container-max
         * and --container-padding) so the hero image's left edge lines up with
         * the content area below it. The dark section background still bleeds
         * full-width behind this centered container. The image column is
         * capped so it never upscales; the text column fills the rest. */
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--container-padding);
        grid-template-columns: clamp(420px, 36vw, 560px) 1fr;
        min-height: 60vh;
    }

    .service-hero__text-col {
        padding: var(--space-2xl) var(--space-xl);
    }

    .service-hero__text-inner {
        max-width: 520px;
    }

    .service-hero__title {
        font-size: var(--font-size-4xl);
    }
}


/* --- Service Content (body + sidebar) --- */
.service-content {
    padding-block: var(--space-xl);
}

.service-content__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 1024px) {
    .service-content__grid {
        grid-template-columns: 1fr 380px;
        gap: var(--space-2xl);
        align-items: start;
    }

    .service-content__sidebar {
        position: sticky;
        top: calc(var(--header-height) + var(--space-md));
    }
}

/* Prose (body content) styling */
.service-content__body.prose {
    max-width: 65ch;
}

.service-content__body.prose p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    color: var(--color-text);
    margin-bottom: 1.5em;
}

.service-content__body.prose p:last-child {
    margin-bottom: 0;
}

.service-content__body.prose h2,
.service-content__body.prose h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 2em;
    margin-bottom: 0.75em;
    line-height: var(--line-height-snug);
}

.service-content__body.prose h2 {
    font-size: var(--font-size-xl);
}

.service-content__body.prose h3 {
    font-size: var(--font-size-lg);
}

.service-content__body.prose strong {
    font-weight: 600;
    color: var(--color-primary);
}

.service-content__body.prose a:not(.btn) {
    color: var(--color-accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(196, 149, 106, 0.3);
    transition: text-decoration-color var(--transition-fast);
}

@media (hover: hover) {
    .service-content__body.prose a:not(.btn):hover {
        text-decoration-color: var(--color-accent);
    }
}

/* Mid-page CTA within body content */
.prose__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-lg) 0;
    margin: var(--space-md) 0;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.prose__cta-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Process / numbered steps */
.prose__process {
    list-style: none;
    counter-reset: process-step;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-left: 0;
    margin-bottom: 1.5em;
}

.prose__process li {
    counter-increment: process-step;
    position: relative;
    padding-left: 3.25rem;
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    color: var(--color-text);
}

.prose__process li::before {
    content: counter(process-step);
    position: absolute;
    left: 0;
    top: 0.125rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-numbers);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    flex-shrink: 0;
}

.prose__process li strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.25em;
}

/* FAQ Accordion */
.prose__faq {
    margin-top: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.prose__faq-item {
    border-bottom: 1px solid var(--color-border-light);
}

.prose__faq-item:first-child {
    border-top: 1px solid var(--color-border-light);
}

.prose__faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
    transition: color var(--transition-fast);
}

.prose__faq-item summary::-webkit-details-marker {
    display: none;
}

.prose__faq-item summary::after {
    content: '+';
    font-family: var(--font-numbers);
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-accent);
    flex-shrink: 0;
    margin-left: var(--space-sm);
    transition: transform var(--transition-fast);
}

.prose__faq-item[open] summary::after {
    content: '\2212';
}

@media (hover: hover) {
    .prose__faq-item summary:hover {
        color: var(--color-accent);
    }
}

.prose__faq-item > div {
    padding-bottom: var(--space-md);
}

.prose__faq-item p {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: var(--line-height-body);
    margin-bottom: 0;
}


/* --- Service Features Sidebar --- */
.service-features {
    padding: var(--space-lg);
    background: var(--color-warm);
    border-left: 3px solid var(--color-accent);
    margin-bottom: var(--space-lg);
}

.service-features__title {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.service-features__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.service-features__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.5;
}

.service-features__check {
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 0.125rem;
}


/* --- Service Trust Sidebar --- */
.service-trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background-color: var(--color-bg-dark);
}

.service-trust__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.service-trust__number {
    font-family: var(--font-numbers);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
}

.service-trust__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-accent);
}

.service-trust__label {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-on-dark);
    font-weight: 500;
}


/* --- Service Gallery --- */
.service-gallery {
    padding-block: var(--space-xl);
    background: var(--color-warm);
    border-top: 1px solid var(--color-border-light);
}

.service-gallery__header {
    margin-bottom: var(--space-lg);
}

.service-gallery__title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.service-gallery__subtitle {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
}

.service-gallery__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

@media (min-width: 640px) {
    .service-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .service-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.service-gallery__item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
    position: relative;
    cursor: pointer;
    background-color: var(--color-bg-alt);
}

.service-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease-out-smooth);
}

.service-gallery__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(27, 42, 56, 0);
    transition: background var(--transition-base);
}

@media (hover: hover) {
    .service-gallery__item:hover img {
        transform: scale(1.04);
    }

    .service-gallery__item:hover::after {
        background: rgba(196, 149, 106, 0.08);
    }
}


/* --- Related Services --- */
.service-related {
    padding-block: var(--space-xl);
}

.service-related__title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}

.service-related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .service-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .service-related__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.related-card {
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.related-card__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--color-bg-alt);
}

.related-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease-out-smooth);
}

.related-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
}

.related-card__name {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

.related-card__arrow {
    color: var(--color-accent);
    display: flex;
    transition: transform var(--transition-base);
}

@media (hover: hover) {
    .related-card:hover {
        border-color: var(--color-accent-light);
        box-shadow: var(--shadow-md);
    }

    .related-card:hover .related-card__image img {
        transform: scale(1.04);
    }

    .related-card:hover .related-card__name {
        color: var(--color-accent);
    }

    .related-card:hover .related-card__arrow {
        transform: translateX(4px);
    }
}


/* ===========================
   UTILITY
   =========================== */
.text-center { text-align: center; }

.section-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-accent-ink);
    margin-bottom: var(--space-xs);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/* ===========================
   GALLERY PAGE
   =========================== */

/* --- Gallery Hero: Compact two-column --- */
.gallery-hero {
    position: relative;
    padding-top: calc(var(--header-height) + var(--space-lg));
    padding-bottom: var(--space-lg);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    overflow: hidden;
}

.gallery-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 70%, rgba(196, 149, 106, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(38, 59, 77, 0.35) 0%, transparent 50%);
    pointer-events: none;
}

.gallery-hero__inner {
    position: relative;
    z-index: 2;
}

.gallery-hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 800;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-inverse);
    visibility: hidden;
}

.gallery-hero__intro {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-on-dark);
    line-height: var(--line-height-body);
    max-width: 52ch;
}


/* --- Gallery Section --- */
.gallery-section {
    padding-block: var(--space-xl);
    background: var(--color-bg);
}


/* --- Category Filters --- */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
}

.gallery-filters__btn {
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-light);
    background: none;
    border: 1px solid transparent;
    padding: 0.6rem 1.2rem;
    min-height: 44px;
    cursor: pointer;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
    position: relative;
}

.gallery-filters__btn.is-active {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.04);
}

.gallery-filters__count {
    font-family: var(--font-numbers);
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--color-neutral-light);
    margin-left: 0.4em;
}

.gallery-filters__btn.is-active .gallery-filters__count {
    color: var(--color-accent);
}

@media (hover: hover) {
    .gallery-filters__btn:not(.is-active):hover {
        color: var(--color-primary);
        border-color: var(--color-border);
    }
}


/* --- Photo Grid (CSS columns masonry) --- */
.gallery-grid {
    columns: 1;
    column-gap: var(--space-sm);
}

.gallery-grid__item {
    display: block;
    break-inside: avoid;
    margin-bottom: var(--space-sm);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--color-bg-alt);
    transition: opacity 400ms var(--ease-out-smooth);
}

.gallery-grid__item.is-hidden {
    display: none;
}

.gallery-grid__item picture,
.service-gallery__item picture,
.related-card__image picture {
    display: block;
}

/* Fixed-aspect (square) containers: the picture must fill the box so the
   inner img's height:100% + object-fit:cover crop resolves correctly. */
.service-gallery__item picture,
.related-card__image picture {
    width: 100%;
    height: 100%;
}

.gallery-grid__item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 600ms var(--ease-out-smooth);
}

/* Hover overlay with category label + expand icon */
.gallery-grid__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: var(--space-sm);
    background: linear-gradient(
        to top,
        rgba(var(--color-primary-rgb), 0.7) 0%,
        rgba(var(--color-primary-rgb), 0.15) 40%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 350ms var(--ease-out-smooth);
}

.gallery-grid__category {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.9);
}

.gallery-grid__expand {
    color: rgba(245, 240, 232, 0.7);
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

@media (hover: hover) {
    .gallery-grid__item:hover img {
        transform: scale(1.04);
    }

    .gallery-grid__item:hover .gallery-grid__overlay {
        opacity: 1;
    }

    .gallery-grid__item:hover .gallery-grid__expand {
        color: var(--color-accent-light);
    }
}

/* Focus visible for keyboard */
.gallery-grid__item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.gallery-grid__item:focus-visible .gallery-grid__overlay {
    opacity: 1;
}


/* --- In-grid CTA tile (closes the masonry tail) --- */
.gallery-grid__cta {
    aspect-ratio: 3 / 4;
    background:
        linear-gradient(155deg, var(--color-primary) 0%, #15212d 60%, #0f1923 100%);
    border: 1px solid rgba(196, 149, 106, 0.35);
    color: var(--color-bg);
    overflow: hidden;
    position: relative;
}

.gallery-grid__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(196, 149, 106, 0.18), transparent 55%);
    pointer-events: none;
}

.gallery-grid__cta-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-2xs);
    padding: var(--space-md);
    z-index: 1;
}

.gallery-grid__cta-eyebrow {
    font-family: var(--font-ui);
    font-size: var(--font-size-2xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-accent-light);
    margin: 0;
}

.gallery-grid__cta-headline {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.05;
    color: var(--color-bg);
    margin: 0;
    letter-spacing: -0.01em;
}

.gallery-grid__cta-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-top: var(--space-xs);
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-accent-light);
    transition: gap 350ms var(--ease-out-smooth),
                color 350ms var(--ease-out-smooth);
}

.gallery-grid__cta-action svg {
    transition: transform 350ms var(--ease-out-smooth);
}

@media (hover: hover) {
    .gallery-grid__cta:hover .gallery-grid__cta-action {
        gap: var(--space-xs);
        color: var(--color-accent);
    }

    .gallery-grid__cta:hover .gallery-grid__cta-action svg {
        transform: translateX(4px);
    }
}


/* --- Empty State --- */
.gallery-empty {
    text-align: center;
    padding: var(--space-xl) 0;
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
}


/* --- Responsive: 2 columns at 640px --- */
@media (min-width: 640px) {
    .gallery-grid {
        columns: 2;
    }
}

/* --- Responsive: two-column hero at 768px --- */
@media (min-width: 768px) {
    .gallery-hero__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
        align-items: center;
    }

    .gallery-hero__right {
        border-left: 1px solid rgba(245, 240, 232, 0.1);
        padding-left: var(--space-lg);
    }
}

/* --- Responsive: 3 columns at 1024px --- */
@media (min-width: 1024px) {
    .gallery-grid {
        columns: 3;
    }

    .gallery-filters {
        gap: var(--space-sm);
    }
}


/* =============================================================
   CONTACT PAGE
   ============================================================= */

/* --- Contact Hero (mirrors gallery-hero compact pattern) --- */
.contact-hero {
    position: relative;
    padding-top: calc(var(--header-height) + var(--space-lg));
    padding-bottom: var(--space-lg);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    overflow: hidden;
}

.contact-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 70%, rgba(196, 149, 106, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(38, 59, 77, 0.35) 0%, transparent 50%);
    pointer-events: none;
}

.contact-hero__inner {
    position: relative;
    z-index: 2;
}

.contact-hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 800;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-inverse);
    visibility: hidden;
}

.contact-hero__intro {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-on-dark);
    line-height: var(--line-height-body);
    max-width: 52ch;
}


/* --- Contact Content --- */
.contact-content {
    padding-block: var(--space-xl);
    background: var(--color-bg-alt);
}

.contact-layout {
    display: grid;
    /* minmax(0,1fr) so the single column can't grow past the container to its
       content's min-content (otherwise the form/map overflow at tablet widths). */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
}


/* --- Contact Form: Elevated Glass Card --- */
.contact-form {
    background: var(--color-bg);
    padding: var(--space-lg) var(--space-md);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 12px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.7);
    position: relative;
}

/* Subtle top accent line */
.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light), transparent);
}

.contact-form__heading {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.contact-form__subtext {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: var(--line-height-body);
    margin-bottom: var(--space-lg);
}

:is(.contact-form__embed, .cta-form) {
    margin-bottom: var(--space-lg);
}

/* FormBuilder form styling - Premium editorial treatment */
:is(.contact-form__embed, .cta-form) .InputfieldForm,
.cta-form .InputfieldForm {
    font-family: var(--font-body);
}

/* Hide the honeypot field. FormBuilder renames the wrapper from
 * wrap_Inputfield_website to wrap_Inputfield- when spam filtering is
 * enabled and ships this rule in its own stylesheet, but we don't load
 * FormBuilder's CSS bundle (we use our own brand styling) - so without
 * this rule the honeypot stays visible to real users. */
.FormBuilder #wrap_Inputfield-,
.FormBuilder .wrap_Inputfield- {
    display: none !important;
}

/* Reset FormBuilder list markup; use CSS Grid for the field layout so the
 * message field and submit button can span both columns without fighting
 * FormBuilder's inline columnWidth styles. */
:is(.contact-form__embed, .cta-form) .Inputfields {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md) var(--space-lg);
}

:is(.contact-form__embed, .cta-form) .Inputfield {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    width: 100% !important;
    float: none !important;
    min-width: 0; /* prevent grid blow-out from long select option labels */
}

/* Two-per-row at desktop. Fields with columnWidth=100, the message field,
 * and the submit button span both columns. */
@media (min-width: 640px) {
    :is(.contact-form__embed, .cta-form) .Inputfields {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-md);
    }

    :is(.contact-form__embed, .cta-form) .Inputfield_message,
    :is(.contact-form__embed, .cta-form) .InputfieldSubmit,
    :is(.contact-form__embed, .cta-form) .Inputfield[data-colwidth="100"],
    :is(.contact-form__embed, .cta-form) .Inputfield[style*="width: 100"] {
        grid-column: 1 / -1;
    }
}

:is(.contact-form__embed, .cta-form) .InputfieldContent {
    padding: 0;
}

/* Labels with icons */
:is(.contact-form__embed, .cta-form) .InputfieldHeader {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text-light);
    margin-bottom: 0;
    padding-bottom: var(--space-3xs);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* Field icons via label ::before */
:is(.contact-form__embed, .cta-form) .InputfieldHeader::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.45;
}

/* User icon - Full Name */
:is(.contact-form__embed, .cta-form) .Inputfield_full_name .InputfieldHeader::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231B2A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* Phone icon */
:is(.contact-form__embed, .cta-form) .Inputfield_phone .InputfieldHeader::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231B2A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Mail icon - Email */
:is(.contact-form__embed, .cta-form) .Inputfield_email .InputfieldHeader::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231B2A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

/* Clipboard icon - Project Type */
:is(.contact-form__embed, .cta-form) .Inputfield_project_type .InputfieldHeader::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231B2A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3C/svg%3E");
}

/* Map pin icon - Location */
:is(.contact-form__embed, .cta-form) .Inputfield_project_location .InputfieldHeader::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231B2A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Calendar icon - Timeline */
:is(.contact-form__embed, .cta-form) .Inputfield_timeline .InputfieldHeader::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231B2A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* Message icon - Tell Us */
:is(.contact-form__embed, .cta-form) .Inputfield_message .InputfieldHeader::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231B2A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* Row spacing - space above each field row via margin on the field itself */
:is(.contact-form__embed, .cta-form) .Inputfield {
    margin-top: var(--space-md);
}

/* First row has no top margin */
:is(.contact-form__embed, .cta-form) .Inputfield:first-child,
:is(.contact-form__embed, .cta-form) .Inputfield:nth-child(2) {
    margin-top: 0;
}

:is(.contact-form__embed, .cta-form) .InputfieldHeader .pw-no-select {
    user-select: none;
}

/* Required field indicator - subtle dot */
:is(.contact-form__embed, .cta-form) .InputfieldStateRequired > .InputfieldHeader label::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
    margin-left: 0.4em;
    vertical-align: middle;
}

/* Field description (helper text) */
:is(.contact-form__embed, .cta-form) .description {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-light);
    margin-top: var(--space-3xs);
}

/* --- Inputs: bottom-border editorial style --- */
:is(.contact-form__embed, .cta-form) input[type="text"],
:is(.contact-form__embed, .cta-form) input[type="email"],
:is(.contact-form__embed, .cta-form) input[type="tel"],
:is(.contact-form__embed, .cta-form) textarea,
:is(.contact-form__embed, .cta-form) select {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding: 0.75rem 0;
    transition:
        border-color 350ms var(--ease-out-smooth),
        box-shadow 350ms var(--ease-out-smooth);
    appearance: none;
    -webkit-appearance: none;
}

:is(.contact-form__embed, .cta-form) input::placeholder,
:is(.contact-form__embed, .cta-form) textarea::placeholder {
    color: var(--color-neutral-light);
    font-weight: 300;
}

/* Focus: copper accent line grows from center */
:is(.contact-form__embed, .cta-form) input[type="text"]:focus,
:is(.contact-form__embed, .cta-form) input[type="email"]:focus,
:is(.contact-form__embed, .cta-form) input[type="tel"]:focus,
:is(.contact-form__embed, .cta-form) textarea:focus,
:is(.contact-form__embed, .cta-form) select:focus {
    outline: none;
    border-bottom-color: var(--color-accent);
    box-shadow: 0 1px 0 0 var(--color-accent);
}

/* Keyboard focus visible */
/* Keyboard focus: bottom-border style on text inputs, outline on buttons */
:is(.contact-form__embed, .cta-form) input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

:is(.contact-form__embed, .cta-form) textarea:focus-visible {
    outline: none;
    border-bottom-color: var(--color-accent);
    box-shadow: 0 1px 0 0 var(--color-accent);
}

/* --- Custom Select Dropdown Component --- */
.custom-select {
    position: relative;
}

.custom-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 0;
    cursor: pointer;
    text-align: left;
    transition: border-color 350ms var(--ease-out-smooth);
}

.custom-select__trigger:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

.custom-select.is-open .custom-select__trigger {
    border-bottom-color: var(--color-accent);
}

.custom-select__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select__placeholder {
    color: var(--color-neutral-light);
    font-weight: 300;
}

.custom-select__arrow {
    display: flex;
    align-items: center;
    color: var(--color-accent);
    transition: transform 250ms var(--ease-out-smooth);
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.custom-select.is-open .custom-select__arrow {
    transform: rotate(180deg);
}

/* Dropdown panel */
.custom-select__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.04);
    z-index: 50;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 300ms var(--ease-out-expo),
        opacity 200ms var(--ease-out-smooth);
    pointer-events: none;
}

.custom-select.is-open .custom-select__panel {
    max-height: 320px;
    overflow-y: auto;
    opacity: 1;
    pointer-events: auto;
}

.custom-select__option {
    padding: 0.7rem 1rem;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    cursor: pointer;
    transition:
        background 150ms ease,
        color 150ms ease;
}

.custom-select__option.is-selected {
    color: var(--color-primary);
    font-weight: 600;
    background: rgba(var(--color-accent-rgb), 0.08);
}

.custom-select__option.is-focused {
    background: var(--color-bg-alt);
    color: var(--color-primary);
}

@media (hover: hover) {
    .custom-select__option:hover {
        background: var(--color-bg-alt);
        color: var(--color-primary);
    }

    .custom-select__option.is-selected:hover {
        background: rgba(var(--color-accent-rgb), 0.12);
    }
}

/* Scrollbar styling for the panel */
.custom-select__panel::-webkit-scrollbar {
    width: 4px;
}

.custom-select__panel::-webkit-scrollbar-track {
    background: transparent;
}

.custom-select__panel::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
}

/* Hide native select styling (JS hides the element, this is fallback) */
:is(.contact-form__embed, .cta-form) select {
    cursor: pointer;
}

:is(.contact-form__embed, .cta-form) textarea {
    height: 4.5rem;
    min-height: 4.5rem;
    resize: none;
    overflow: hidden;
}

/* --- Submit button: full-width, premium CTA --- */
:is(.contact-form__embed, .cta-form) .InputfieldSubmit {
    padding-top: var(--space-sm);
}

:is(.contact-form__embed, .cta-form) .InputfieldSubmit button,
:is(.contact-form__embed, .cta-form) input[type="submit"] {
    display: block;
    width: 100%;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-accent);
    border: none;
    padding: 1.125rem 2rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        background 250ms var(--ease-out-smooth),
        transform 150ms var(--ease-out-smooth);
}

/* Shimmer hover effect */
:is(.contact-form__embed, .cta-form) .InputfieldSubmit button::after,
:is(.contact-form__embed, .cta-form) input[type="submit"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 600ms var(--ease-out-smooth);
}

@media (hover: hover) {
    :is(.contact-form__embed, .cta-form) .InputfieldSubmit button:hover,
    :is(.contact-form__embed, .cta-form) input[type="submit"]:hover {
        background: var(--color-accent-hover);
    }

    :is(.contact-form__embed, .cta-form) .InputfieldSubmit button:hover::after,
    :is(.contact-form__embed, .cta-form) input[type="submit"]:hover::after {
        left: 100%;
    }
}

:is(.contact-form__embed, .cta-form) .InputfieldSubmit button:active,
:is(.contact-form__embed, .cta-form) input[type="submit"]:active {
    transform: scale(0.985);
}

/* --- Error states --- */
:is(.contact-form__embed, .cta-form) .InputfieldStateError input,
:is(.contact-form__embed, .cta-form) .InputfieldStateError textarea,
:is(.contact-form__embed, .cta-form) .InputfieldStateError select {
    border-bottom-color: var(--color-error);
}

:is(.contact-form__embed, .cta-form) .InputfieldStateError .InputfieldHeader {
    color: var(--color-error);
}

:is(.contact-form__embed, .cta-form) .FormBuilderErrors {
    background: rgba(184, 69, 58, 0.06);
    border-left: 3px solid var(--color-error);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-error);
    line-height: var(--line-height-body);
}

/* --- Success message --- */
:is(.contact-form__embed, .cta-form) .FormBuilderMessage {
    background: var(--color-bg-alt);
    border-left: 3px solid var(--color-success);
    padding: var(--space-lg);
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-body);
}

/* Form placeholder (when FormBuilder not installed) */
.contact-form__placeholder {
    padding: var(--space-lg);
    background: var(--color-bg-alt);
    border: 1px dashed var(--color-border);
    text-align: center;
    color: var(--color-text-light);
}

.contact-form__placeholder a {
    color: var(--color-accent);
    font-weight: 600;
}

/* ===========================
   HOME CTA FORM - dark-background variant
   The shared rules above scope both .contact-form__embed and .cta-form
   identically (light-cream surface). The home page form lives in a
   midnight-navy CTA section, so override colors here to maintain legibility
   without duplicating layout/structure rules. Submit button stays the same
   (copper on dark reads great).
   =========================== */
.cta-form .InputfieldHeader {
    color: rgba(245, 240, 232, 0.78);
}

.cta-form .InputfieldHeader::before {
    /* Recolor the inline SVG icons from midnight (#1B2A38) to cream so they
     * read on the dark background. CSS Filters are the cheap path - the
     * data: URIs are baked with #1B2A38 above; invert + brightness mimics
     * a cream tint. */
    filter: invert(91%) sepia(11%) saturate(330%) hue-rotate(343deg) brightness(101%) contrast(92%);
    opacity: 0.65;
}

.cta-form input[type="text"],
.cta-form input[type="email"],
.cta-form input[type="tel"],
.cta-form textarea,
.cta-form select {
    color: var(--color-bg);
    border-bottom-color: rgba(245, 240, 232, 0.22);
}

.cta-form input::placeholder,
.cta-form textarea::placeholder {
    color: rgba(245, 240, 232, 0.4);
}

.cta-form input[type="text"]:focus,
.cta-form input[type="email"]:focus,
.cta-form input[type="tel"]:focus,
.cta-form textarea:focus,
.cta-form select:focus {
    border-bottom-color: var(--color-accent);
    box-shadow: 0 1px 0 0 var(--color-accent);
}

/* Browser autofill on dark backgrounds repaints the field white; pin it
 * with an inset shadow that matches the surrounding navy. */
.cta-form input:-webkit-autofill,
.cta-form input:-webkit-autofill:hover,
.cta-form input:-webkit-autofill:focus,
.cta-form input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--color-bg);
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: var(--color-bg);
}

/* Custom select component on the dark variant */
.cta-form .custom-select__trigger {
    color: var(--color-bg);
    border-bottom-color: rgba(245, 240, 232, 0.22);
}

.cta-form .custom-select__placeholder {
    color: rgba(245, 240, 232, 0.4);
}

.cta-form .custom-select__panel {
    background: #0E1721;
    border-color: rgba(245, 240, 232, 0.08);
}

.cta-form .custom-select__option {
    color: rgba(245, 240, 232, 0.85);
}

@media (hover: hover) {
    .cta-form .custom-select__option:hover {
        background: rgba(196, 149, 106, 0.12);
        color: var(--color-bg);
    }
}

.cta-form .custom-select__option.is-selected {
    color: var(--color-accent-light);
    background: rgba(196, 149, 106, 0.16);
}

.cta-form .custom-select__option.is-focused {
    background: rgba(245, 240, 232, 0.06);
    color: var(--color-bg);
}

.cta-form .description {
    color: rgba(245, 240, 232, 0.55);
}

/* Submit button keeps the copper treatment from the shared rule. */

.cta-form .FormBuilderMessage {
    background: rgba(245, 240, 232, 0.06);
    color: var(--color-bg);
}


/* --- Trust signals: horizontal divider above, minimal --- */
.contact-form__trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
}

@media (min-width: 640px) {
    .contact-form__trust {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-sm) var(--space-lg);
    }
}

.contact-form__trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    white-space: nowrap;
}

.contact-form__trust-item svg {
    color: var(--color-accent);
    flex-shrink: 0;
}


/* --- Contact Info Sidebar --- */
.contact-info__card {
    background: var(--color-bg-alt);
    padding: var(--space-lg);
    position: relative;
}

.contact-info__card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--color-accent) 0%, var(--color-primary-light) 60%, var(--color-bg-dark) 100%);
}

.contact-info__heading {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}

.contact-info__item {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.contact-info__item:last-child {
    margin-bottom: 0;
}

.contact-info__item svg {
    color: var(--color-accent);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.contact-info__label {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: var(--space-3xs);
}

.contact-info__value {
    font-size: var(--font-size-base);
    color: var(--color-text);
    text-decoration: none;
    line-height: var(--line-height-body);
}

a.contact-info__value {
    transition: color var(--transition-fast);
}

@media (hover: hover) {
    a.contact-info__value:hover {
        color: var(--color-accent);
    }
}

.contact-info__value--phone {
    font-family: var(--font-numbers);
    font-size: var(--font-size-lg);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.contact-info__address {
    font-style: normal;
}

/* Map */
.contact-map {
    margin-top: var(--space-lg);
}

.contact-map__heading {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.contact-map__embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border-light);
}

.contact-map__embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.contact-map__note {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: var(--space-xs);
}


/* --- Contact Responsive --- */
@media (min-width: 768px) {
    .contact-hero__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
        align-items: center;
    }

    .contact-hero__right {
        border-left: 1px solid rgba(245, 240, 232, 0.1);
        padding-left: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .contact-layout {
        /* minmax(0,...) lets the tracks shrink below their content's min-size;
           without it the form column's min-content forces the grid wider than
           the container and the sidebar overflows off-screen. */
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        gap: var(--space-2xl);
    }

    .contact-form {
        padding: var(--space-xl);
    }
}


/* =============================================================
   SERVICE AREA PAGE
   ============================================================= */

/* --- Area Hero (two-column with integrated map) --- */
.area-hero {
    position: relative;
    padding-top: calc(var(--header-height) + var(--space-lg));
    padding-bottom: var(--space-lg);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    overflow: hidden;
}

.area-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 70%, rgba(196, 149, 106, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(38, 59, 77, 0.35) 0%, transparent 50%);
    pointer-events: none;
}

.area-hero__inner {
    position: relative;
    z-index: 2;
}

.area-hero__left {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.area-hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 800;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-inverse);
    visibility: hidden;
}

.area-hero__intro {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-on-dark);
    line-height: var(--line-height-body);
    max-width: 48ch;
}

.area-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.area-hero__divider {
    width: 1px;
    height: 14px;
    background: rgba(245, 240, 232, 0.2);
}

/* Map in hero */
.area-map__leaflet {
    width: 100%;
    height: 360px;
    border-radius: 4px;
    overflow: hidden;
}

/* Override Leaflet defaults */
.leaflet-container {
    font-family: var(--font-ui);
    background: #1a1a2e;
}

.leaflet-control-zoom a {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-color: rgba(245, 240, 232, 0.15) !important;
}

.leaflet-control-zoom a:hover {
    background: rgba(var(--color-primary-rgb), 0.9) !important;
}

/* Custom popup styling */
.area-map-popup .leaflet-popup-content-wrapper {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.area-map-popup .leaflet-popup-tip {
    background: var(--color-primary);
}

.area-map-popup .leaflet-popup-content {
    margin: 10px 14px;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.area-map-popup__name {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: 2px;
}

.area-map-popup__badge {
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.area-map-popup__cities {
    margin-top: 6px;
    color: rgba(245, 240, 232, 0.7);
}

/* Custom marker styles */
.area-marker {
    background: none;
    border: none;
}

.area-marker__dot {
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.area-marker__dot--preferred {
    width: 12px;
    height: 12px;
    background: var(--color-accent);
}

.area-marker__label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    color: #f5f0e8;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8), -1px -1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.6);
}

.area-marker__label--preferred {
    font-weight: 700;
    font-size: 12px;
    color: var(--color-accent);
}

.area-map__legend {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.area-map__legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-on-dark);
}

.area-map__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.area-map__legend-item--preferred .area-map__legend-dot {
    background: var(--color-accent);
}

.area-map__legend-item--served .area-map__legend-dot {
    background: var(--color-primary);
}

.area-map__gmaps {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-on-dark);
    text-decoration: none;
    transition: color var(--transition-base);
}

@media (hover: hover) {
    .area-map__gmaps:hover {
        color: var(--color-accent);
    }
}


/* --- County Grid --- */
.area-counties {
    padding-block: var(--space-xl);
    background: var(--color-bg);
}

.area-counties__header {
    margin-bottom: var(--space-xl);
}

.area-counties__header-left {
    max-width: 55ch;
}

.area-counties__title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.area-counties__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: var(--line-height-body);
}

/* Stats column */
.area-counties__stats {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.area-stat {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--space-2xs);
    position: relative;
    padding-top: var(--space-sm);
    text-align: center;
}

.area-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--color-accent);
}

.area-stat__number {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
    letter-spacing: -0.03em;
}

.area-stat__suffix {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 300;
    color: var(--color-accent);
    line-height: 1;
}

.area-stat__label {
    width: 100%;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    margin-top: 2px;
}

.area-counties__grid {
    display: grid;
    gap: var(--space-md);
}

.area-county {
    background: var(--color-bg-alt);
    padding: var(--space-lg);
    position: relative;
    border-left: 3px solid var(--color-border-light);
    transition: border-color var(--transition-base);
}

@media (hover: hover) {
    .area-county:hover,
    .area-county.is-active {
        border-left-color: var(--color-accent);
    }
}

.area-county.is-active {
    border-left-color: var(--color-accent);
}

.area-county__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.area-county__name {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
}

.area-county__count {
    font-family: var(--font-numbers);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.area-county__cities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-bottom: var(--space-sm);
}

.area-county__city {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg);
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-border-light);
}

.area-county__city--preferred {
    color: var(--color-primary);
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.3);
    font-weight: 600;
}

.area-county__city--preferred svg {
    color: var(--color-accent);
}

.area-county__desc {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: var(--line-height-body);
}




/* --- Area Responsive --- */
@media (min-width: 768px) {
    .area-hero__inner {
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: var(--space-lg);
        align-items: stretch;
    }

    .area-hero__left {
        justify-content: center;
    }

    .area-map__leaflet {
        height: 100%;
        min-height: 400px;
        border-radius: 4px;
    }

    .area-counties__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .area-hero {
        padding-bottom: var(--space-xl);
    }

    .area-hero__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .area-map__leaflet {
        min-height: 460px;
    }

    .area-counties__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xl);
    }

    .area-counties__stats {
        margin-top: 0;
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    .area-stat {
        justify-content: flex-end;
        text-align: right;
    }

    .area-stat::before {
        left: auto;
        right: 0;
        transform: none;
    }
}

@media (min-width: 1280px) {
    .area-map__leaflet {
        min-height: 500px;
    }
}


/* ===========================
   LEGAL PAGES (Privacy Policy)
   =========================== */
.legal-hero {
    position: relative;
    padding-top: calc(var(--header-height) + var(--space-2xl));
    padding-bottom: var(--space-xl);
    overflow: hidden;
}

.legal-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 50%),
        linear-gradient(170deg, #0D1218 0%, var(--color-primary) 50%, #1a2e3f 100%);
    z-index: 0;
}

.legal-hero__content {
    position: relative;
    z-index: 1;
}

.legal-hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-text-inverse);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-xs);
}

.legal-hero__updated {
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

/* Legal body content - prose styling */
.legal-content {
    padding-block: var(--space-xl);
    background-color: var(--color-bg);
}

.legal-content__body h2 {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    letter-spacing: var(--letter-spacing-tight);
}

.legal-content__body h2:first-child {
    margin-top: 0;
}

.legal-content__body h3 {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

.legal-content__body p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    color: var(--color-text);
    margin-bottom: var(--space-sm);
    max-width: 70ch;
}

.legal-content__body ul {
    list-style: none;
    padding-left: var(--space-md);
    margin-bottom: var(--space-sm);
}

.legal-content__body ul li {
    position: relative;
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    color: var(--color-text);
    padding-left: var(--space-sm);
    margin-bottom: var(--space-2xs);
}

.legal-content__body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-accent);
}

.legal-content__body a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.legal-content__body a:hover {
    color: var(--color-accent-hover);
}

.legal-content__body a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.legal-content__contact {
    list-style: none;
    padding-left: 0;
    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-md);
    margin-top: var(--space-sm);
}

.legal-content__contact li {
    padding-left: 0;
}

.legal-content__contact li::before {
    display: none;
}


/* ===========================
   404 ERROR PAGE
   =========================== */
.error-hero {
    position: relative;
    padding-top: calc(var(--header-height) + var(--space-2xl));
    padding-bottom: var(--space-xl);
    overflow: hidden;
}

.error-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 50%),
        linear-gradient(170deg, #0D1218 0%, var(--color-primary) 50%, #1a2e3f 100%);
    z-index: 0;
}

.error-hero__image-col {
    display: none;
}

.error-hero__content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.error-hero__code {
    display: block;
    font-family: var(--font-numbers);
    font-size: clamp(4rem, 3rem + 5vw, 8rem);
    font-weight: 700;
    color: rgba(var(--color-accent-rgb), 0.25);
    line-height: 1;
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--space-xs);
}

.error-hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-text-inverse);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-sm);
}

.error-hero__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-on-dark);
    line-height: var(--line-height-body);
    margin-bottom: var(--space-md);
    max-width: 45ch;
}

.error-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

@media (min-width: 1024px) {
    .error-hero {
        min-height: 60vh;
        max-height: 680px;
        display: flex;
        align-items: center;
    }

    .error-hero__image-col {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        z-index: 1;
        overflow: hidden;
    }

    .error-hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .error-hero__image-col::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: linear-gradient(to bottom, var(--color-accent) 0%, var(--color-primary-light) 50%, var(--color-bg-dark) 100%);
        z-index: 2;
    }
}

/* Quick links grid */
.error-links {
    padding-block: var(--space-xl);
    background-color: var(--color-bg);
}

.error-links__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

.error-links__card {
    display: block;
    padding: var(--space-md);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.error-links__card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.error-links__card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.error-links__card svg {
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
}

.error-links__card-title {
    display: block;
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-3xs);
}

.error-links__card-desc {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: var(--line-height-body);
}

@media (min-width: 640px) {
    .error-links__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ===========================
   THANK YOU PAGE
   Post-conversion landing after a FormBuilder submission.
   =========================== */
.thanks-hero {
    position: relative;
    padding-top: calc(var(--header-height) + var(--space-2xl));
    padding-bottom: var(--space-2xl);
    overflow: hidden;
}

.thanks-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 75% 25%, rgba(var(--color-accent-rgb), 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 15% 85%, rgba(var(--color-accent-rgb), 0.06) 0%, transparent 50%),
        linear-gradient(170deg, #0D1218 0%, var(--color-primary) 50%, #1a2e3f 100%);
    z-index: 0;
}

/* Centered two-column layout - matches the home featured-project pattern.
 * Background extends full-bleed; content + image live inside the centered
 * max-width container. */
.thanks-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.thanks-hero__content {
    max-width: 56ch;
}

.thanks-hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-text-inverse);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    margin: var(--space-xs) 0 var(--space-md);
}

.thanks-hero__lede {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    color: rgba(245, 240, 232, 0.85);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-lg);
}

.thanks-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

/* Image column - 3:4 portrait aspect with a copper caption pill, mirrors
 * the featured-project and service-row caption treatment so the page
 * reads as part of the same product. */
.thanks-hero__image-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    max-height: min(70vh, 640px);
    overflow: hidden;
    background-color: #0b1218;
    /* Hidden on mobile - the hero already feels rich without it; the photo
     * column reappears at the 768px breakpoint where there's room. */
    display: none;
}

.thanks-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.thanks-hero__image-caption {
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem 0.4rem 0.625rem;
    background:
        linear-gradient(135deg, rgba(27, 42, 56, 0.85) 0%, rgba(17, 24, 32, 0.9) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(245, 240, 232, 0.08);
    border-left: 2px solid rgba(196, 149, 106, 0.7);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.thanks-hero__image-caption-title {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.95);
}

.thanks-hero__image-caption-detail {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--color-warm);
}

.thanks-hero__image-caption-title + .thanks-hero__image-caption-detail::before {
    content: '\00b7';
    margin-right: 0.5rem;
    color: rgba(196, 149, 106, 0.7);
}

@media (min-width: 768px) {
    .thanks-hero__title {
        font-size: var(--font-size-4xl);
    }
    .thanks-hero__inner {
        grid-template-columns: 1fr minmax(360px, 480px);
        gap: var(--space-2xl);
    }
    .thanks-hero__image-wrap {
        display: block;
    }
}

@media (min-width: 1024px) {
    .thanks-hero__inner {
        grid-template-columns: 1fr minmax(380px, 520px);
    }
}

.thanks-next {
    background-color: var(--color-bg);
    padding-block: var(--space-section);
}

.thanks-next__inner {
    max-width: 880px;
    margin-inline: auto;
}

.thanks-next__title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
    margin: var(--space-xs) 0 var(--space-xl);
}

@media (min-width: 768px) {
    .thanks-next__title {
        font-size: var(--font-size-3xl);
    }
}

.thanks-next__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-lg);
}

.thanks-next__step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: var(--space-md);
    align-items: start;
}

.thanks-next__num {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1;
    letter-spacing: -0.02em;
}

.thanks-next__step-title {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 var(--space-2xs);
    line-height: var(--line-height-snug);
}

.thanks-next__step-desc {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    margin: 0;
    max-width: 60ch;
}


/* ============================================================
   FAQ PAGE
   Hero (mirrors about-hero), sticky topic chips, accordion per
   service. Editorial typography, copper accent on active topic.
   ============================================================ */

.faq-hero {
    position: relative;
    padding-top: calc(var(--header-height) + var(--space-2xl));
    padding-bottom: var(--space-xl);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    overflow: hidden;
}

/* Match about-hero / services-hero proportions on desktop so the FAQ hero
   reads as part of the same family as the other dark editorial heroes. */

.faq-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 75% 25%, rgba(196, 149, 106, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 15% 90%, rgba(38, 59, 77, 0.45) 0%, transparent 55%);
    pointer-events: none;
}

.faq-hero__content {
    position: relative;
    z-index: 2;
    max-width: 48ch;
}

.faq-hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: 800;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-md);
    visibility: hidden;
}

.faq-hero__subtitle {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    color: var(--color-text-on-dark);
    line-height: var(--line-height-body);
    max-width: 56ch;
    margin-bottom: var(--space-md);
}

.faq-hero__meta {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-accent-light);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.faq-hero__image-col {
    display: none;
}

@media (min-width: 1024px) {
    .faq-hero {
        min-height: 70vh;
        max-height: 720px;
        display: flex;
        align-items: center;
    }

    .faq-hero__image-col {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        z-index: 1;
        overflow: hidden;
    }

    .faq-hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* Sticky topic nav */
.faq-nav {
    position: sticky;
    top: var(--header-height);
    z-index: 40;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: 0 1px 0 rgba(28, 30, 34, 0.04);
}

.faq-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
    overflow: hidden;
}

/* Mobile: show the styled <select>, hide the chip strip.
   Desktop (768+): hide the select wrapper, show chips. */
.faq-nav__select-wrap {
    flex: 1;
    min-width: 0;
}

.faq-nav__select {
    width: 100%;
}

.faq-nav__chips {
    display: none;
}

@media (min-width: 768px) {
    .faq-nav__select-wrap {
        display: none;
    }
    .faq-nav__chips {
        display: flex;
    }
}

/* Visually hidden helper for the select label (not already in the sheet) */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The .custom-select component on the FAQ nav uses the contact-form
   visual language. A few overrides keep it from inheriting the
   contact-form's underline-only style - we want it to read like a
   pill control inside the sticky bar. */
.faq-nav__select-wrap .custom-select__trigger {
    border: 1px solid var(--color-border-light);
    border-radius: 999px;
    padding: 0.65rem 1rem;
    background: var(--color-bg-alt);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
}

.faq-nav__select-wrap .custom-select.is-open .custom-select__trigger {
    border-color: var(--color-accent);
    background: var(--color-bg);
}

.faq-nav__select-wrap .custom-select__panel {
    border-radius: 4px;
}

.faq-nav__select-wrap .custom-select__option {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
}

.faq-nav__label {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.faq-nav__chips {
    display: none;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    padding-block: 4px;
}

/* Desktop: show chips, hide the select. Placed AFTER the base
   .faq-nav__chips rule so cascade order resolves it correctly. */
@media (min-width: 768px) {
    .faq-nav__chips {
        display: flex;
    }
    .faq-nav__select-wrap {
        display: none;
    }
}

.faq-nav__chips::-webkit-scrollbar {
    display: none;
}

.faq-nav__chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: var(--color-bg-alt);
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    scroll-margin-left: 1rem;
}

.faq-nav__chip-count {
    display: inline-flex;
    min-width: 1.5em;
    height: 1.5em;
    align-items: center;
    justify-content: center;
    padding: 0 0.4em;
    background: var(--color-bg);
    border-radius: 999px;
    font-family: var(--font-numbers);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-light);
}

@media (hover: hover) {
    .faq-nav__chip:hover {
        background: var(--color-bg);
        border-color: var(--color-accent);
        color: var(--color-accent-ink);
    }
    .faq-nav__chip:hover .faq-nav__chip-count {
        background: var(--color-accent);
        color: var(--color-primary);
    }
}

.faq-nav__chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.faq-nav__chip.is-active {
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

.faq-nav__chip.is-active .faq-nav__chip-count {
    background: var(--color-accent);
    color: var(--color-text-inverse);
}

/* FAQ body sections */
.faq-body {
    background-color: var(--color-bg);
    overflow-x: clip; /* contain the block ::before bands */
}

/* On desktop, layout splits into a main column (questions) and a sticky right
   rail (TOC). The TOC card floats over the alternating background bands.
   On mobile, the TOC is hidden and the existing top chip nav handles jumps. */
.faq-body__layout {
    position: relative;
}

@media (min-width: 1024px) {
    .faq-body__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--space-xl);
        /* NO align-items: start - we need the TOC column to stretch to the
           full row height so position: sticky inside it has room to scroll.
           A start-aligned column is only as tall as its content, and a
           sticky child inside an exactly-its-own-height parent never moves. */
    }
}

.faq-body__main {
    min-width: 0; /* prevent grid blowout from long question text */
}

/* Blocks render their alternating band via a ::before that breaks out of the
   constrained content column to span the full viewport width. The bands sit
   behind the content (z-index: -1) but still in front of the body background.

   The breakout trick: 100vw wide, positioned with left: 50% + margin-left: -50vw.
   Requires .faq-body { overflow-x: clip } to avoid horizontal scrollbars. */
.faq-block {
    position: relative;
    padding-block: var(--space-lg);
    scroll-margin-top: calc(var(--header-height) + 80px);
}

.faq-block::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    z-index: -1;
    pointer-events: none;
}

.faq-block:nth-child(even)::before {
    background-color: var(--color-bg-alt);
}

/* Sticky TOC - desktop only */
.faq-toc {
    display: none;
}

@media (min-width: 1024px) {
    .faq-toc {
        display: block;
        position: relative;
        z-index: 2;
        /* Align the card top with the first block's heading rather than the
           layout edge. var(--space-lg) matches .faq-block { padding-block }. */
        padding-top: var(--space-lg);
    }

    .faq-toc__sticky {
        position: sticky;
        top: calc(var(--header-height) + var(--space-md));
        background-color: var(--color-bg);
        border: 1px solid var(--color-border-light);
        border-radius: 4px;
        padding: var(--space-sm) var(--space-md);
        box-shadow: 0 1px 3px rgba(17, 24, 32, 0.05);
    }

    .faq-toc__label {
        font-family: var(--font-display);
        font-size: var(--font-size-xs);
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-accent);
        margin: 0 0 var(--space-sm);
    }

    .faq-toc__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .faq-toc__item {
        margin: 0;
    }

    .faq-toc__link {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: baseline;
        gap: 0.6rem;
        padding: 0.6rem 0;
        font-family: var(--font-display);
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--color-text-light);
        text-decoration: none;
        border-bottom: 1px solid var(--color-border-light);
        transition: color var(--transition-fast), border-color var(--transition-fast);
        white-space: nowrap;
    }

    .faq-toc__item:last-child .faq-toc__link {
        border-bottom: none;
    }

    .faq-toc__index {
        font-family: var(--font-numbers);
        font-size: var(--font-size-xs);
        color: var(--color-text-faint, var(--color-text-light));
        letter-spacing: 0.05em;
    }

    .faq-toc__name {
        min-width: 0;
    }

    .faq-toc__count {
        font-family: var(--font-numbers);
        font-size: var(--font-size-xs);
        color: var(--color-text-light);
        background-color: var(--color-bg-alt);
        padding: 0.15rem 0.5rem;
        border-radius: 999px;
        min-width: 1.5rem;
        text-align: center;
    }

    @media (hover: hover) {
        .faq-toc__link:hover {
            color: var(--color-text);
        }
    }

    .faq-toc__link:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: 2px;
    }

    .faq-toc__link.is-active {
        color: var(--color-accent);
    }

    .faq-toc__link.is-active .faq-toc__index,
    .faq-toc__link.is-active .faq-toc__count {
        color: var(--color-accent);
    }

    .faq-toc__link.is-active .faq-toc__count {
        background-color: rgba(196, 149, 106, 0.12);
    }

    /* Hide the top chip nav on desktop since the TOC covers it */
    .faq-nav {
        display: none;
    }
}

/* Smooth open/close: the answer block animates height via JS Web Animations.
   The CSS only needs to ensure the answer stays in the layout (no display:
   none transitions). The :open icon rotation already animates via transition. */
.faq-item__answer {
    overflow: hidden;
}

/* Header sits directly above the items - no extra divider, no big gap. The
   per-item borders below already create the visual rhythm. */
.faq-block__header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2xs) var(--space-md);
    align-items: center;
    margin-bottom: var(--space-sm);
}

.faq-block__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    font-family: var(--font-numbers);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.04em;
    background: rgba(196, 149, 106, 0.08);
    border: 1px solid rgba(196, 149, 106, 0.4);
    border-radius: 999px;
    line-height: 1;
}

@media (min-width: 768px) {
    .faq-block__index {
        width: 2.75rem;
        height: 2.75rem;
        font-size: var(--font-size-sm);
    }
}

.faq-block__heading-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.faq-block__heading {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--line-height-tight);
    margin: 0;
}

.faq-block__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition-fast), gap var(--transition-fast);
    align-self: flex-start;
    /* Prevent "Read full service overview" from wrapping awkwardly
       when the heading column gets tight at desktop. */
    white-space: nowrap;
    flex-shrink: 0;
}

@media (hover: hover) {
    .faq-block__link:hover {
        color: var(--color-accent);
        gap: 0.7rem;
    }
}

.faq-block__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    border-bottom: 1px solid var(--color-border-light);
}

/* No border-top on the first item: avoids stacking a divider directly under
   the section heading. The heading itself sits cleanly above the items. */

.faq-item__summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-md);
    cursor: pointer;
    list-style: none;
    transition: color var(--transition-fast);
}

.faq-item__summary::-webkit-details-marker {
    display: none;
}

.faq-item__q {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    line-height: var(--line-height-snug);
    flex: 1;
    min-width: 0;
}

.faq-item__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border-light);
    border-radius: 999px;
    color: var(--color-text-light);
    transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    margin-top: 0.15em;
}

@media (hover: hover) {
    .faq-item__summary:hover .faq-item__q {
        color: var(--color-accent);
    }
    .faq-item__summary:hover .faq-item__icon {
        color: var(--color-accent);
        border-color: var(--color-accent);
    }
}

.faq-item[open] .faq-item__icon {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-inverse);
    transform: rotate(45deg);
}

.faq-item[open] .faq-item__q {
    color: var(--color-accent);
}

.faq-item__summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.faq-item__answer {
    padding-bottom: var(--space-md);
    padding-right: var(--space-md);
    max-width: 70ch;
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: var(--line-height-body);
}

.faq-item__answer p {
    margin: 0 0 0.75em;
}

.faq-item__answer p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .faq-block__header {
        grid-template-columns: 4rem 1fr auto;
        align-items: center;
    }
    .faq-block__index {
        font-size: var(--font-size-base);
        padding-top: 0;
    }
    .faq-block__heading-group {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-md);
    }
}


/* ============================================================
   HOMEPAGE Q&A TEASER
   Rotating spotlight - chips on top, one large featured Q/A
   panel that auto-advances. Cross-fade transitions, copper
   progress bar. Editorial, not call-center.
   ============================================================ */

.home-qa {
    padding-block: var(--space-section);
    background-color: var(--color-bg);
}

.home-qa__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.home-qa__header {
    max-width: 52ch;
}

.home-qa__heading {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--space-sm);
    margin-top: var(--space-xs);
    max-width: 22ch;
    visibility: hidden;
}

.home-qa__lede {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    line-height: var(--line-height-body);
}

.home-qa__stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.home-qa__chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Full-bleed scroller: negative margin must match the container padding
       exactly (not --space-md) or the row overflows the viewport. */
    margin-inline: calc(-1 * var(--container-padding));
    padding-inline: var(--container-padding);
}

.home-qa__chips::-webkit-scrollbar {
    display: none;
}

.home-qa__chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.1rem;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-light);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.home-qa__chip-num {
    font-family: var(--font-numbers);
    font-weight: 500;
    color: var(--color-text-light);
    font-size: 0.75rem;
    opacity: 0.7;
}

@media (hover: hover) {
    .home-qa__chip:hover {
        border-color: var(--color-accent);
        color: var(--color-text);
    }
}

.home-qa__chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.home-qa__chip.is-active {
    background: var(--color-bg-dark);
    border-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

.home-qa__chip.is-active .home-qa__chip-num {
    color: var(--color-accent-light);
    opacity: 1;
}

.home-qa__panel {
    position: relative;
    background: var(--color-bg-alt);
    border-radius: 4px;
    overflow: hidden;
    min-height: 320px;
    display: grid;
}

.home-qa__progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(196, 149, 106, 0.15);
    overflow: hidden;
    z-index: 2;
}

.home-qa__progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--color-accent);
    transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
    .home-qa__progress-bar.is-running {
        animation: homeQaProgress linear forwards;
        /* JS sets --qa-interval from the data attribute; this fallback
           matches the current HTML default so the bar stays in sync if
           JS hasn't run yet (initial paint). */
        animation-duration: var(--qa-interval, 9s);
    }
}

@keyframes homeQaProgress {
    from { width: 0%; }
    to   { width: 100%; }
}

.home-qa__card {
    grid-area: 1 / 1;
    padding: var(--space-lg) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    /* No transition on inactive cards - they snap to hidden so they
       can't ghost behind the new card during rotation. */
}

.home-qa__card.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    /* Transition only on the active card means the new card fades in
       cleanly while the old one is already gone. No bleed. */
    transition: opacity 360ms ease, transform 360ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .home-qa__card {
        transition: none;
    }
}

.home-qa__card-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.home-qa__card-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(196, 149, 106, 0.10);
    border-radius: 999px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.home-qa__card-mark svg {
    width: 1.25rem;
    height: 1.25rem;
}

.home-qa__card-q {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text);
    line-height: var(--line-height-snug);
    margin: 0;
    max-width: 32ch;
}

.home-qa__card-a {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: var(--line-height-body);
    max-width: 56ch;
}

.home-qa__card-a p {
    margin: 0 0 0.6em;
}

.home-qa__card-a p:last-child {
    margin-bottom: 0;
}

.home-qa__card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: auto;
    padding-top: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
    transition: gap var(--transition-fast), color var(--transition-fast);
    align-self: flex-start;
}

@media (hover: hover) {
    .home-qa__card-link:hover {
        gap: 0.75rem;
        color: var(--color-accent-hover);
    }
}

.home-qa__footer {
    display: flex;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .home-qa__inner {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: var(--space-xl);
        align-items: start;
    }
    .home-qa__header {
        position: sticky;
        top: calc(var(--header-height) + var(--space-md));
    }
    .home-qa__chips {
        flex-wrap: wrap;
        overflow-x: visible;
        margin: 0;
        padding: 0;
    }
    .home-qa__panel {
        padding: 0;
        min-height: 360px;
    }
    .home-qa__card {
        padding: var(--space-xl) var(--space-lg);
    }
    /* Anchor the "See all answers" CTA under the panel column only.
       If it spans both columns it visually overlaps with the sticky
       header on the left once you scroll past the panel. */
    .home-qa__footer {
        grid-column: 2 / -1;
        margin-top: var(--space-md);
        justify-content: flex-end;
    }
}

@media (min-width: 1024px) {
    .home-qa__inner {
        grid-template-columns: 4fr 8fr;
        gap: var(--space-2xl);
    }
    .home-qa__card-q {
        font-size: var(--font-size-2xl);
    }
}