/* =========================================
   DRIFTER DIGITAL — Light-First Design System
   DM Serif Display + Inter
   ========================================= */

/* Cross-document view transitions (progressive enhancement) */
@view-transition { navigation: auto; }

/* --- Design Tokens --- */
:root {
    /* Typography */
    --font-serif: 'DM Serif Display', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --text-display: clamp(3rem, 6vw, 5rem);
    --text-h2: clamp(2rem, 4vw, 3.2rem);
    --text-h3: clamp(1.4rem, 2.5vw, 1.8rem);
    --text-h4: 1.1rem;
    --text-h5: 1.2rem;
    --text-body: 1rem;
    --text-body-lg: 1.15rem;
    --text-sm: 0.875rem;
    --text-xs: 0.75rem;
    --text-2xs: 0.8rem;
    --text-logo: 1.35rem;
    --text-stat: 1.6rem;
    --text-h2-sm: clamp(1.6rem, 2.8vw, 2.2rem);
    --text-number: clamp(2rem, 4vw, 2.8rem);
    --text-quote: clamp(1.3rem, 2.5vw, 1.8rem);
    --text-quote-sm: clamp(1.2rem, 2.5vw, 1.6rem);
    --text-page-title: clamp(2.8rem, 5.5vw, 4.5rem);
    --text-h2-split: clamp(1.75rem, 2.5vw, 2.5rem);
    --text-footer-heading: 1.05rem;
    --text-step: 3rem;

    /* Colour palette — light default */
    --c-bg: #ffffff;
    --c-surface: #f5f6fa;
    --c-surface-2: #eef0f5;
    --c-border: rgba(0,0,0,0.06);
    --c-border-hover: rgba(0,0,0,0.12);
    --c-text: #4b5563;
    --c-text-muted: #9ca3af;
    --c-heading: #1a2744;
    --c-accent: #1E6BB8;
    --c-accent-hover: #175899;
    --c-accent-subtle: rgba(30,107,184,0.08);

    /* Warm palette (from decorative shapes) */
    --c-coral: #f4845f;
    --c-gold: #f0c75e;
    --c-green: #7ec8a0;
    --c-cyan: #a8dce0;
    --c-blue-soft: #7bafd4;

    /* Warm palette — dark variants (icons, text on light bg) */
    --c-coral-dark: #d06040;
    --c-green-dark: #3d8d5e;
    --c-blue-dark: #4a7fa8;
    --c-gold-dark: #a88520;
    --c-cyan-dark: #3a838b;
    --c-coral-price: #d6613e;
    --c-blue-price: #4a8ab5;
    --c-footer-text: #9ca3af;
    --c-footer-muted: #6b7280;
    --c-error: #e05252;
    --c-white: #ffffff;

    /* Section background washes */
    --c-wash-hero: #e0eef8;
    --c-wash-empathy: #edf4fb;
    --c-wash-personal: #fdf8ef;
    --c-wash-problem: #fef2ee;
    --c-wash-solution: #eef8f2;

    /* Glass & overlay */
    --c-glass-bg: rgba(255,255,255,0.65);
    --c-dropdown-bg: rgba(255,255,255,0.92);
    --c-btn-pulse: rgba(255,255,255,0.3);
    --c-text-on-dark: rgba(255,255,255,0.7);
    --c-outline-light: rgba(255,255,255,0.25);
    --c-outline-light-hover-bg: rgba(255,255,255,0.08);
    --c-outline-light-hover-border: rgba(255,255,255,0.45);
    --c-outline-dark: rgba(26,39,68,0.2);
    --c-outline-dark-hover-bg: rgba(26,39,68,0.05);
    --c-outline-dark-hover-border: rgba(26,39,68,0.4);
    --c-separator: var(--c-separator);
    --c-separator-light: var(--c-separator-light);

    /* Spacing & layout */
    --radius: 20px;
    --radius-btn: 10px;
    --radius-pill: 9999px;
    --max-w: 1200px;
    --pad-inline: 24px;
    --max-w-narrow: 720px;
    --shadow-card: 0 2px 12px rgba(0,0,0,0.04);
    --shadow-card-hover: 0 12px 32px rgba(30,107,184,0.1);
    --shadow-btn-hover: 0 8px 32px rgba(30,107,184,0.35);
    --shadow-btn-white-hover: 0 8px 24px rgba(0,0,0,0.2);
    --shadow-nav: 0 4px 24px rgba(0,0,0,0.06);
    --shadow-icon-coral: 0 4px 16px rgba(244, 132, 95, 0.3);
    --shadow-icon-green: 0 4px 16px rgba(126, 200, 160, 0.3);
    --shadow-card-elevated: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.03);
    --shadow-card-elevated-hover: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06), 0 20px 56px rgba(0,0,0,0.05);
    --shadow-focus: 0 0 0 3px var(--c-accent-subtle);
    --radius-icon-lg: 16px;
    --radius-section-md: 32px;
    --radius-section-sm: 24px;
    --radius-icon: 14px;
    --radius-section: 50px;
    --max-w-wide: 1440px;
    --max-w-mid: 800px;
    --max-w-prose: 560px;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* --- Accessibility --- */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}

.skip-link {
    position: absolute; top: -100%; left: 50%;
    transform: translateX(-50%);
    background: var(--c-accent); color: var(--c-white);
    padding: 12px 24px;
    border-radius: 0 0 var(--radius-btn) var(--radius-btn);
    font-weight: 600; z-index: 999;
    text-decoration: none;
}
.skip-link:focus { top: 0; }

/* --- Container --- */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--pad-inline);
}

/* =========================================
   NAVIGATION — unified across all pages
   ========================================= */
.site-nav {
    position: fixed; top: 16px; left: 24px; right: 24px;
    z-index: 100;
    padding: 16px 32px;
    display: flex; align-items: center; justify-content: space-between;
    border-radius: var(--radius-pill);
    transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
}

/* Transparent state on hero */
.site-nav:not(.scrolled) {
    background: transparent;
}

/* Frosted light glass on scroll */
.site-nav.scrolled {
    background: var(--c-glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--shadow-nav);
}

.site-nav__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: var(--text-logo);
    font-weight: 700;
    text-decoration: none;
    color: var(--c-heading);
    letter-spacing: -0.03em;
}
.site-nav__logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}
.site-nav__logo span { color: var(--c-accent); }

.site-nav__links {
    display: flex; align-items: center; gap: 32px;
    list-style: none;
}
@media (min-width: 769px) {
    .site-nav__links > li {
        display: flex;
        align-items: center;
    }
}
.site-nav__links a {
    text-decoration: none; font-size: var(--text-sm); font-weight: 500;
    color: var(--c-text); transition: color 0.2s;
}
.site-nav__links a:not(.site-nav__cta):not(.nav-dropdown__link) {
    background-image: linear-gradient(var(--c-accent), var(--c-accent));
    background-size: 0% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
    padding-bottom: 4px;
    transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
}
.site-nav__links a:hover,
.site-nav__links a[aria-current] { color: var(--c-heading); }
.site-nav__links a:not(.site-nav__cta):not(.nav-dropdown__link):hover,
.site-nav__links a:not(.site-nav__cta):not(.nav-dropdown__link)[aria-current] { background-size: 100% 2px; }

.site-nav__cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--c-accent); color: var(--c-white);
    padding: 8px 24px; border-radius: var(--radius-pill);
    font-weight: 600; font-size: var(--text-sm);
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.site-nav__cta:hover {
    background: var(--c-accent-hover);
    transform: translateY(-1px);
}

/* Burger */
.site-nav__burger {
    display: none;
    background: none; border: none; cursor: pointer;
    width: 32px; height: 24px;
    flex-direction: column; justify-content: space-between;
    padding: 0;
}
.site-nav__burger span {
    display: block; width: 100%; height: 2px;
    background: var(--c-heading); transition: background 0.4s, transform 0.4s;
    border-radius: 2px;
}
.site-nav__burger.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.site-nav__burger.open span:nth-child(2) { opacity: 0; }
.site-nav__burger.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

.nav-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 98; opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

/* Nav icons — mobile only */
.nav-icon { display: none; }

/* --- Services Dropdown (desktop) --- */
.nav-item--has-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0 2px 4px;
    cursor: pointer;
    color: var(--c-text);
    transition: color 0.2s;
}
.nav-dropdown__toggle:hover { color: var(--c-heading); }

.nav-dropdown__chevron {
    display: block;
    transition: transform 0.25s;
}
.nav-item--has-dropdown.is-open .nav-dropdown__chevron {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(32px);
    list-style: none;
    background: var(--c-dropdown-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card-hover);
    min-width: 176px;
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
    z-index: 101;
}
.nav-dropdown::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 36px;
}
.nav-item--has-dropdown.is-open > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(28px);
}

.nav-dropdown__link {
    display: block;
    padding: 12px 24px;
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--c-text);
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.nav-dropdown__link:hover {
    color: var(--c-accent);
}
.nav-dropdown__link[aria-current] {
    color: var(--c-heading);
    font-weight: 600;
}

/* =========================================
   TYPOGRAPHY
   ========================================= */
h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--c-heading);
    line-height: 1.1;
}

h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--text-h4);
    color: var(--c-heading);
}

.text-display {
    font-family: var(--font-serif);
    font-size: var(--text-display);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--c-heading);
    margin-bottom: 16px;
}
/* Word stagger animation for hero headings */
.text-display .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: wordReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--w, 0) * 0.06s + 0.2s);
}
@keyframes wordReveal {
    to { opacity: 1; transform: translateY(0); }
}

.kicker {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: 16px;
}

.kicker--pill {
    background: var(--c-accent);
    color: var(--c-white);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
}

.section-title {
    font-family: var(--font-serif);
    font-size: var(--text-h2);
    font-weight: 400;
    line-height: 1.1;
    color: var(--c-heading);
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: var(--text-body-lg);
    line-height: 1.7;
    color: var(--c-text);
    max-width: var(--max-w-prose);
}

.section-header--centred {
    text-align: center;
}
.section-header--centred .section-subtitle {
    margin: 0 auto;
}

/* =========================================
   BUTTONS
   ========================================= */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm);
    text-decoration: none; border-width: 2px; border-style: solid; border-color: transparent; cursor: pointer;
    border-radius: var(--radius-btn);
    padding: 16px 32px;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn iconify-icon {
    transition: transform 0.2s;
}
.btn:hover iconify-icon {
    transform: translateX(4px);
}

.btn--primary {
    background: var(--c-accent); color: var(--c-white);
    position: relative;
}
.btn--primary:hover {
    background: var(--c-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-btn-hover);
}

/* Subtle pulse behind hero CTA */
.hero-buttons .btn--primary::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: var(--radius-btn);
    background: var(--c-btn-pulse);
    opacity: 0; z-index: -1;
    filter: blur(12px);
    animation: btn-pulse 3.75s ease-in-out infinite;
}
@keyframes btn-pulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.06, 1.35); }
}

.btn--outline-light {
    background: transparent; color: var(--c-white);
    border-color: var(--c-outline-light);
}
.btn--outline-light:hover {
    background: var(--c-outline-light-hover-bg); color: var(--c-white);
    border-color: var(--c-outline-light-hover-border);
}

.btn--outline-dark {
    background: transparent;
    color: var(--c-heading);
    border-color: var(--c-outline-dark);
}
.btn--outline-dark:hover {
    background: var(--c-outline-dark-hover-bg);
    border-color: var(--c-outline-dark-hover-border);
    color: var(--c-heading);
}

.btn--white {
    background: var(--c-white); color: var(--c-heading);
}
.btn--white:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-btn-white-hover);
}

.btn--ghost {
    background: transparent; color: var(--c-text);
    border-color: var(--c-border);
}
.btn--ghost:hover {
    border-color: var(--c-heading); color: var(--c-heading);
}

/* =========================================
   SECTION HERO — Pale blue wash, floating shapes
   Used across ALL pages for consistent hero design.
   ========================================= */
.section-hero {
    position: relative;
    display: flex; align-items: center;
    padding: 160px 24px 96px;
    background: var(--c-wash-hero);
    overflow: hidden;
    isolation: isolate;
}
.section-hero .container {
    position: relative; z-index: 1;
    width: 100%;
}

.section-hero__subtitle {
    font-size: var(--text-body-lg);
    line-height: 1.7;
    color: var(--c-text);
    max-width: var(--max-w-prose);
    margin: 0 0 40px;
}

.hero-buttons {
    display: flex; align-items: center;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 48px;
}

.hero-stats {
    display: flex; align-items: center;
    gap: 32px; padding-top: 40px;
    border-top: 1px solid var(--c-border);
}
.hero-stat { display: flex; flex-direction: column; }
.hero-stat__value {
    font-family: var(--font-serif);
    font-size: var(--text-stat); font-weight: 400;
    color: var(--c-heading); line-height: 1;
}
.hero-stat__label {
    font-size: var(--text-xs);
    color: var(--c-heading);
    margin-top: 4px;
}
.hero-stat__divider {
    width: 1px; height: 32px;
    background: var(--c-border);
    flex-shrink: 0;
}

/* =========================================
   SECTION 2 — SERVICES (Icon card grid)
   ========================================= */
.section-services {
    background: var(--c-surface);
    padding: 96px 0;
}
.section-services .section-header {
    text-align: center;
    margin-bottom: 48px;
}
.section-services .section-subtitle {
    margin: 0 auto;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-icon-card {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 32px;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.service-icon-card:hover {
    transform: translateY(-4px);
    border-color: var(--c-border-hover);
    box-shadow: var(--shadow-card-hover);
}

.service-icon-card__icon {
    --icon-bg: var(--c-accent-subtle);
    --icon-color: var(--c-accent);
    width: 48px; height: 48px;
    background: var(--icon-bg);
    color: var(--icon-color);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    transition: transform 0.3s;
}
.service-icon-card__icon svg,
.service-icon-card__icon iconify-icon { color: var(--icon-color); fill: currentColor; }
.service-icon-card:hover .service-icon-card__icon { transform: scale(1.08); }

/* Warm colour cycling for service icon cards */
.service-icon-card:nth-child(6n+1) .service-icon-card__icon { --icon-bg: rgba(244,132,95,0.1); --icon-color: var(--c-coral-dark); }
.service-icon-card:nth-child(6n+2) .service-icon-card__icon { --icon-bg: rgba(126,200,160,0.12); --icon-color: var(--c-green-dark); }
.service-icon-card:nth-child(6n+3) .service-icon-card__icon { --icon-bg: rgba(123,175,212,0.12); --icon-color: var(--c-blue-dark); }
.service-icon-card:nth-child(6n+4) .service-icon-card__icon { --icon-bg: rgba(240,199,94,0.12); --icon-color: var(--c-gold-dark); }
.service-icon-card:nth-child(6n+5) .service-icon-card__icon { --icon-bg: rgba(168,220,224,0.15); --icon-color: var(--c-cyan-dark); }
.service-icon-card:nth-child(6n+6) .service-icon-card__icon { --icon-bg: rgba(244,132,95,0.08); --icon-color: var(--c-coral-dark); }

.service-icon-card h3 {
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    font-weight: 400;
    color: var(--c-heading);
    margin-bottom: 8px;
}
.service-icon-card p {
    font-size: var(--text-sm);
    color: var(--c-text);
    line-height: 1.6;
}

/* =========================================
   SECTION 3a — DUAL PANELS (index)
   ========================================= */
.dual-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
}
.dual-panel {
    position: relative;
    border-radius: var(--radius-section);
    padding: 56px 48px;
    overflow: hidden;
}
.dual-panel--problem {
    background: var(--c-wash-problem);
}
.dual-panel--solution {
    background: var(--c-wash-solution);
}
.dual-panel__heading {
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    font-weight: 400;
    color: var(--c-heading);
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}
.dual-panel__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}
.dual-panel__item:last-child { margin-bottom: 0; }
.dual-panel__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dual-panel__icon--coral { background: rgba(244,132,95,0.15); color: var(--c-coral-dark); }
.dual-panel__icon--green { background: rgba(126,200,160,0.15); color: var(--c-green-dark); }
.dual-panel__title { font-weight: 600; color: var(--c-heading); margin-bottom: 4px; }
.dual-panel__desc { font-size: var(--text-sm); line-height: 1.6; color: var(--c-text); }
.dual-panel__shape { position: absolute; pointer-events: none; }
/* Problem panel shapes */
.dual-panel__shape--p-ring { top: -28px; left: -24px; animation: floatSlow 18s ease-in-out infinite; }
.dual-panel__shape--p-tri { bottom: 20px; right: 24px; transform: rotate(15deg); animation: floatFast 9s ease-in-out infinite alternate; }
.dual-panel__shape--p-dot { top: 40%; right: 16px; animation: floatMed 11s ease-in-out infinite; }
/* Solution panel shapes */
.dual-panel__shape--s-half { top: -16px; right: -20px; animation: floatMed 14s ease-in-out infinite alternate; }
.dual-panel__shape--s-crescent { bottom: -24px; left: -20px; animation: floatSlow 20s ease-in-out infinite; }
.dual-panel__shape--s-dot { top: 24px; left: 32px; animation: floatFast 7s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
    .dual-panel__shape { animation: none; }
}

/* =========================================
   SECTION 3b — WEBSITE HEALTH CHECK
   ========================================= */
.section-health-check {
    background: var(--c-surface);
    padding: 120px 24px 96px;
}
.health-check__narrow {
    max-width: var(--max-w-narrow);
    margin: 0 auto;
}
.health-check__questions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}
.health-check__card {
    background: var(--c-bg);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 2px solid transparent;
    transition: box-shadow 0.3s, border-color 0.3s;
}
.health-check__card:hover {
    box-shadow: var(--shadow-card-hover);
}
.health-check__card.answered-yes {
    border-color: var(--c-green);
}
.health-check__card.answered-no {
    border-color: var(--c-coral);
}
.health-check__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
.health-check__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--c-surface);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--c-heading);
    transition: background 0.3s, color 0.3s;
}
.health-check__card.answered-yes .health-check__number {
    background: var(--c-green);
    color: var(--c-white);
}
.health-check__card.answered-no .health-check__number {
    background: var(--c-coral);
    color: var(--c-white);
}
.health-check__text {
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--c-heading);
    line-height: 1.5;
}
.health-check__buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.health-check__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 24px;
    border-radius: var(--radius-btn);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    border: 2px solid var(--c-surface-2);
    background: var(--c-bg);
    color: var(--c-text);
    transition: background 0.25s, border-color 0.25s, color 0.25s;
    user-select: none;
}
.health-check__btn:hover {
    border-color: var(--c-blue-soft);
    color: var(--c-heading);
}
.health-check__btn--yes.selected {
    background: var(--c-green);
    border-color: var(--c-green);
    color: var(--c-white);
}
.health-check__btn--yes.selected:hover {
    background: var(--c-green-dark);
    border-color: var(--c-green-dark);
}
.health-check__btn--no.selected {
    background: var(--c-coral);
    border-color: var(--c-coral);
    color: var(--c-white);
}
.health-check__btn--no.selected:hover {
    background: var(--c-error);
    border-color: var(--c-error);
}

/* Results */
.health-check__results {
    display: none;
}
.health-check__results.visible {
    display: block;
}
.health-check__results-card {
    background: var(--c-bg);
    border-radius: var(--radius);
    padding: 40px 32px;
    box-shadow: var(--shadow-card);
    text-align: center;
    border: 2px solid transparent;
    transition: border-color 0.4s, box-shadow 0.4s;
}
.health-check__results-card.result-green { border-color: var(--c-green); }
.health-check__results-card.result-amber { border-color: var(--c-gold); }
.health-check__results-card.result-coral { border-color: var(--c-coral); }
.health-check__results-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    transition: background 0.4s;
}
.health-check__results-icon iconify-icon { color: var(--c-white); }
.result-green .health-check__results-icon { background: var(--c-green); }
.result-amber .health-check__results-icon { background: var(--c-gold); }
.result-coral .health-check__results-icon { background: var(--c-coral); }
.health-check__score {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--text-h4);
    color: var(--c-heading);
    margin-bottom: 8px;
}
.health-check__progress {
    background: var(--c-surface-2);
    border-radius: var(--radius-pill);
    height: 8px;
    max-width: 320px;
    margin: 0 auto 24px;
    overflow: hidden;
}
.health-check__progress-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    width: 0%;
    transition: width 0.4s, background 0.4s;
}
.result-green .health-check__progress-fill { background: var(--c-green); }
.result-amber .health-check__progress-fill { background: var(--c-gold); }
.result-coral .health-check__progress-fill { background: var(--c-coral); }
.health-check__message {
    font-size: var(--text-body-lg);
    line-height: 1.7;
    color: var(--c-text);
    max-width: 480px;
    margin: 0 auto 24px;
}

/* =========================================
   SECTION 3c — RECENT WORK (Spotlight)
   ========================================= */
.section-recent-work {
    padding: 96px 0;
    background: var(--c-bg);
    overflow: hidden;
}

.spotlight {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 48px;
}

.spotlight--reverse {
    grid-template-columns: 1fr 1.2fr;
}

.spotlight--reverse .spotlight__frame { order: 2; }
.spotlight--reverse .spotlight__info { order: 1; }

.spotlight + .spotlight {
    margin-top: 64px;
}

.spotlight__frame {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: var(--c-surface);
}

.spotlight__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

.spotlight__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-border);
}

.spotlight__url {
    flex: 1;
    margin-left: 8px;
    padding: 4px 12px;
    border-radius: var(--radius-btn);
    background: var(--c-bg);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotlight__viewport {
    position: relative;
    height: 420px;
    overflow: hidden;
}

.spotlight__viewport img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    will-change: transform;
}

.spotlight__info {
    padding: 16px 0;
}

.spotlight__kicker {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: 16px;
}

.spotlight__info h3 {
    font-family: var(--font-serif);
    font-size: var(--text-h2);
    font-weight: 400;
    color: var(--c-heading);
    line-height: 1.15;
    margin-bottom: 16px;
}

.spotlight__info p {
    font-family: var(--font-sans);
    font-size: var(--text-body-lg);
    color: var(--c-text);
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 440px;
}

.spotlight__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.spotlight__tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--c-surface);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--c-text);
}

/* =========================================
   SECTION 4 — PROCESS
   ========================================= */
.section-process {
    padding: 96px 24px;
    background: var(--c-bg);
}
.section-process .section-header {
    text-align: center;
    margin-bottom: 48px;
}
.section-process .section-subtitle { margin: 0 auto; }

.process-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: var(--max-w);
    margin: 0 auto;
    list-style: none;
    position: relative;
}
.process-step {
    text-align: center;
    position: relative;
    padding: 0 16px;
}

/* Connector line */
.process-step::after {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(50% + 36px);
    width: calc(100% - 72px + 24px);
    height: 2px;
    background: var(--c-separator);
}
.process-step:last-child::after { display: none; }

.process-step__icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--c-accent);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
    color: var(--c-white);
    transition: transform 0.3s;
    position: relative; z-index: 1;
}
.process-step__icon svg { display: block; }
.process-step:hover .process-step__icon { transform: scale(1.08); }

/* Warm colour cycling for process steps */
.process-step:nth-child(4n+1) .process-step__icon { background: var(--c-coral-dark); }
.process-step:nth-child(4n+2) .process-step__icon { background: var(--c-green-dark); }
.process-step:nth-child(4n+3) .process-step__icon { background: var(--c-blue-dark); }
.process-step:nth-child(4n+4) .process-step__icon { background: var(--c-gold-dark); }

.process-step__num {
    font-family: var(--font-sans);
    font-size: var(--text-2xs); font-weight: 700;
    color: var(--c-accent);
    line-height: 1; margin-bottom: 8px;
    letter-spacing: 0.05em;
}
.process-step__title {
    font-family: var(--font-serif);
    font-weight: 400; font-size: var(--text-h5);
    color: var(--c-heading);
    margin-bottom: 8px;
}
.process-step__desc {
    font-size: var(--text-sm);
    color: var(--c-text);
    line-height: 1.6;
}

.process-afterlaunch {
    text-align: center;
    max-width: var(--max-w-prose); margin: 0 auto;
    padding-top: 48px;
    border-top: 1px solid var(--c-border);
}
.process-afterlaunch__text {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    line-height: 1.7;
}
.process-afterlaunch__text a {
    color: var(--c-accent);
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    transition: color 0.3s;
}
.process-afterlaunch__text a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--c-accent);
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-afterlaunch__text a:hover { color: var(--c-heading); }
.process-afterlaunch__text a:hover::after { width: 100%; }

/* =========================================
   SECTION 6 — GUARANTEES
   ========================================= */
.section-guarantees {
    background: var(--c-surface);
    padding: 96px 24px;
}
.section-guarantees .section-header {
    text-align: center;
    margin-bottom: 48px;
}
.section-guarantees .section-subtitle { margin: 0 auto; }

.guarantees-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: var(--max-w);
    margin: 0 auto;
    list-style: none;
}
.guarantee-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 32px;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.guarantee-card:hover {
    transform: translateY(-4px);
    border-color: var(--c-border-hover);
    box-shadow: var(--shadow-card-hover);
}

.guarantee-card__icon {
    --icon-bg: var(--c-accent-subtle);
    --icon-color: var(--c-accent);
    width: 48px; height: 48px;
    background: var(--icon-bg);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    transition: transform 0.3s;
}
.guarantee-card__icon svg,
.guarantee-card__icon iconify-icon { color: var(--icon-color); fill: currentColor; }
.guarantee-card:hover .guarantee-card__icon { transform: scale(1.08); }

/* Warm colour cycling for guarantee cards */
.guarantee-card:nth-child(4n+1) .guarantee-card__icon { --icon-bg: rgba(244,132,95,0.1); --icon-color: var(--c-coral-dark); }
.guarantee-card:nth-child(4n+2) .guarantee-card__icon { --icon-bg: rgba(126,200,160,0.12); --icon-color: var(--c-green-dark); }
.guarantee-card:nth-child(4n+3) .guarantee-card__icon { --icon-bg: rgba(240,199,94,0.12); --icon-color: var(--c-gold-dark); }
.guarantee-card:nth-child(4n+4) .guarantee-card__icon { --icon-bg: rgba(123,175,212,0.12); --icon-color: var(--c-blue-dark); }

.guarantee-card__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--text-h4);
    color: var(--c-heading);
    margin-bottom: 8px;
}
.guarantee-card__desc {
    font-size: var(--text-sm);
    color: var(--c-text);
    line-height: 1.6;
}

/* =========================================
   PARTNER SECTION
   ========================================= */
.section-partner {
    position: relative;
    background: var(--c-bg);
    padding: 96px 24px;
    overflow: hidden;
}
.partner-card-wrap {
    position: relative;
    max-width: var(--max-w-mid);
    margin: 0 auto;
    overflow: hidden;
}
.partner-shape {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.partner-shape--arc {
    top: -32px;
    left: -24px;
    animation: vanlife-float 6s ease-in-out infinite;
}
.partner-shape--circle {
    bottom: -24px;
    right: -20px;
    animation: vanlife-float 7s ease-in-out 1s infinite;
}
.partner-shape--dot1 {
    top: 40%;
    left: -36px;
    animation: vanlife-float 5s ease-in-out 0.5s infinite;
}
.partner-shape--dot2 {
    bottom: 20%;
    right: -28px;
    animation: vanlife-float 5.5s ease-in-out 1.5s infinite;
}
.partner-card {
    position: relative;
    z-index: 1;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: grid;
    grid-template-columns: 240px 1fr;
}
.partner-card__img { overflow: hidden; }
.partner-card__img img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
}
.partner-card__content { padding: 48px; }
.partner-card__title {
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    font-weight: 400;
    line-height: 1.15;
    color: var(--c-heading);
    margin-bottom: 16px;
}
.partner-card__desc {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--c-text);
    margin-bottom: 24px;
    max-width: var(--max-w-prose);
}

/* =========================================
   CTA SECTION — inside rounded container
   ========================================= */
.section-cta {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 96px 24px;
    background: transparent;
    isolation: isolate;
}
.section-cta .container { max-width: var(--max-w-mid); }
.section-cta .section-subtitle {
    color: var(--c-text-muted);
    margin: 0 auto 32px;
}
.cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 32px;
}

/* Floating CTA (audit page) */
.floating-cta {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    box-shadow: var(--shadow-card-elevated);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.floating-cta.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.floating-cta:hover {
    box-shadow: var(--shadow-card-elevated-hover);
}

/* =========================================
   ROUNDED SECTION CONTAINERS
   ========================================= */
.rounded-section {
    width: calc(100% - 48px);
    max-width: var(--max-w-wide);
    margin: 32px auto;
    border-radius: var(--radius-section);
    overflow: hidden;
    position: relative;
}
.rounded-section--warm {
    background: var(--c-wash-empathy);
}
.rounded-section--motivation {
    background: var(--c-wash-personal);
}
.rounded-section--surface {
    background: var(--c-surface);
}
.rounded-section--cta {
    background: var(--c-heading);
}
.rounded-section--cta .kicker {
    color: var(--c-blue-soft);
}
.rounded-section--cta .section-title {
    color: var(--c-white);
}
.rounded-section--cta .section-subtitle {
    color: var(--c-text-on-dark);
    margin: 0 auto 32px;
}

/* Decorative CTA shapes */
.cta-shape {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}
.cta-shape--ring {
    bottom: -15%;
    left: 3%;
    animation: floatSlow 16s ease-in-out infinite alternate;
}
.cta-shape--half {
    top: -12%;
    left: 55%;
    transform: rotate(25deg);
    animation: floatMed 12s ease-in-out infinite alternate;
}
.cta-shape--crescent {
    top: 15%;
    right: -4%;
    animation: floatFast 9s ease-in-out infinite alternate;
}
.cta-shape--dot1 {
    bottom: 20%;
    right: 12%;
    animation: floatMed 13s ease-in-out infinite alternate;
}
.cta-shape--dot2 {
    top: 30%;
    left: 15%;
    animation: floatFast 8s ease-in-out infinite alternate;
}
.cta-shape--dot3 {
    top: 10%;
    left: 35%;
    animation: floatSlow 11s ease-in-out infinite alternate;
}

/* Decorative hero shapes (all page heroes) */
.hero-shape {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    transition: translate 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
}
.feature-list li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: var(--text-sm); color: var(--c-text);
}
.feature-list li svg,
.feature-list li iconify-icon {
    flex-shrink: 0; margin-top: 2px;
    color: var(--c-green-dark); fill: currentColor;
}

/* =========================================
   FAQ ACCORDION
   ========================================= */
.section-faq {
    background: var(--c-surface);
    padding: 64px 0;
}
.section-faq .section-header {
    margin-bottom: 40px;
}

.faq-list { max-width: var(--max-w-narrow); }

.faq-item {
    border-bottom: 1px solid var(--c-border);
}
.faq-item:last-child { border-bottom: none; }

.faq-question {
    width: 100%; background: none; border: none;
    padding: 24px 0;
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; cursor: pointer;
    font-family: var(--font-sans); font-size: var(--text-body); font-weight: 600;
    color: var(--c-heading); text-align: left;
    transition: color 0.2s;
}
.faq-question:hover { color: var(--c-accent); }
.faq-question iconify-icon {
    flex-shrink: 0; color: var(--c-text-muted);
    transition: transform 0.3s, color 0.2s;
}
.faq-question:hover iconify-icon { color: var(--c-accent); }
.faq-item.active .faq-question iconify-icon { transform: rotate(45deg); }

.faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease;
}
.faq-item.active .faq-answer { max-height: 300px; }
.faq-answer__inner { padding-bottom: 24px; }
.faq-answer p {
    font-size: var(--text-sm);
    color: var(--c-text);
    line-height: 1.7;
}
.faq-answer a {
    color: var(--c-accent);
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    transition: color 0.3s;
}
.faq-answer a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--c-accent);
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-answer a:hover { color: var(--c-heading); }
.faq-answer a:hover::after { width: 100%; }

/* =========================================
   SERVICE PROPOSITIONS (Services gateway)
   ========================================= */
.section-services-props {
    padding: 64px 0;
}
.service-propositions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.service-proposition {
    background: var(--c-bg);
    border-radius: var(--radius);
    padding: 48px 40px 56px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card-elevated);
    transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-proposition:hover {
    box-shadow: var(--shadow-card-elevated-hover);
    transform: translateY(-4px);
}
.proposition-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-icon-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.proposition-icon--coral {
    background: linear-gradient(135deg, rgba(244,132,95,0.12), rgba(244,132,95,0.06));
    color: var(--c-coral);
}
.proposition-icon--green {
    background: linear-gradient(135deg, rgba(126,200,160,0.15), rgba(126,200,160,0.06));
    color: var(--c-green);
}
.price-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: 24px;
    align-self: flex-start;
}
.price-badge--coral {
    background: rgba(244,132,95,0.1);
    color: var(--c-coral-price);
}
.price-badge--green {
    background: rgba(126,200,160,0.12);
    color: var(--c-green-dark);
}
.proposition-divider {
    border: none;
    height: 1px;
    background: var(--c-border);
    margin: 0 0 32px;
}
.service-proposition h2 {
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    font-weight: 400;
    color: var(--c-heading);
    line-height: 1.25;
    margin-bottom: 16px;
}
.service-proposition p {
    font-size: var(--text-sm);
    color: var(--c-text);
    line-height: 1.7;
    margin-bottom: 32px;
}
.service-proposition .feature-list {
    flex: 1;
}
.service-proposition .feature-list li iconify-icon {
    color: var(--c-coral);
}
.service-proposition:last-child .feature-list li iconify-icon {
    color: var(--c-green);
}
.service-proposition .btn {
    align-self: flex-start;
}

/* =========================================
   UTILITY SECTIONS (alternating backgrounds)
   ========================================= */
.section-surface {
    background: var(--c-surface);
    padding: 96px 0;
}
.section-white {
    background: var(--c-bg);
    padding: 96px 0;
}
.section-surface .section-header,
.section-white .section-header {
    margin-bottom: 48px;
}
.section-surface .btn-center,
.section-white .btn-center {
    text-align: center;
    margin-top: 48px;
}
/* =========================================
   AREA ACCENT CARDS (Location pages)
   ========================================= */
.area-accent-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.area-accent-card {
    padding: 20px 24px;
    background: var(--c-bg);
    border-radius: var(--radius);
    border-left: 3px solid var(--c-accent);
    font-family: var(--font-serif);
    font-size: var(--text-h4);
    color: var(--c-heading);
    box-shadow: var(--shadow-sm);
}

/* =========================================
   NUMBER STRIP (Audit page)
   ========================================= */
.number-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
    padding: 48px 0;
}
.number-item .num {
    font-family: var(--font-serif);
    font-size: var(--text-number);
    color: var(--c-heading);
    line-height: 1;
    margin-bottom: 8px;
}
.number-item:nth-child(4n+1) .num { color: var(--c-coral-dark); }
.number-item:nth-child(4n+2) .num { color: var(--c-green-dark); }
.number-item:nth-child(4n+3) .num { color: var(--c-blue-dark); }
.number-item:nth-child(4n+4) .num { color: var(--c-gold-dark); }
.number-item .num-label {
    font-size: var(--text-sm);
    color: var(--c-text);
}

/* =========================================
   SECTION LIST WITH COUNTER (Audit page)
   ========================================= */
.section-list {
    max-width: var(--max-w-narrow);
    margin: 0 auto;
    counter-reset: sections;
}
.section-list-item {
    counter-increment: sections;
    padding: 24px 0 24px 64px;
    border-bottom: 1px solid var(--c-border);
    position: relative;
}
.section-list-item:last-child { border-bottom: none; }
.section-list-item::before {
    content: counter(sections, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 24px;
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    color: var(--c-accent);
    width: 44px;
}
.section-list-item h3 { margin-bottom: 2px; }
.section-list-item p {
    font-size: var(--text-sm);
    color: var(--c-text);
    line-height: 1.6;
}

/* =========================================
   RESPONSIVE — New components
   ========================================= */
@media (max-width: 1024px) {
    .service-proposition { padding: 40px 32px; }
    .number-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .service-propositions { grid-template-columns: 1fr; }
    .service-proposition { padding: 32px 24px 40px; }
    .proposition-icon { width: 48px; height: 48px; border-radius: var(--radius-icon); margin-bottom: 16px; }
    .number-strip { grid-template-columns: 1fr; }
}

/* =========================================
   CONTACT FORM
   ========================================= */
.form-row { margin-bottom: 24px; }
.form-row label {
    display: block; font-weight: 600;
    font-size: var(--text-sm);
    color: var(--c-heading);
    margin-bottom: 8px;
}
.form-row .required {
    color: var(--c-accent); font-weight: 700; margin-left: 2px;
}
.form-row .optional-label {
    font-weight: 400; color: var(--c-text-muted); font-size: var(--text-2xs);
}

.form-row input,
.form-row textarea,
.form-row select {
    width: 100%; padding: 16px;
    border: 2px solid var(--c-border);
    border-radius: var(--radius-btn);
    font-family: var(--font-sans); font-size: var(--text-sm);
    color: var(--c-heading); background: var(--c-surface-2);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-row input::placeholder,
.form-row textarea::placeholder {
    color: var(--c-text-muted);
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: var(--shadow-focus);
}
.form-row textarea {
    resize: vertical; min-height: 120px;
}
.form-row select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* Contact sidebar */
.contact-link {
    display: flex; align-items: center; gap: 16px;
    text-decoration: none; color: var(--c-text);
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--text-sm); transition: color 0.2s;
}
.contact-link:last-of-type { border-bottom: none; }
.contact-link:hover { color: var(--c-heading); }
.contact-link svg { flex-shrink: 0; color: var(--c-accent); fill: currentColor; }

.contact-promise {
    display: flex; align-items: center; gap: 8px;
    margin-top: 24px; padding: 16px;
    background: var(--c-accent-subtle);
    border-radius: var(--radius-btn);
    font-size: var(--text-sm); color: var(--c-accent); font-weight: 500;
}
.contact-promise svg { flex-shrink: 0; color: currentColor; fill: currentColor; }

/* Form success */
.form-success {
    text-align: center; padding: 64px 24px;
}
.form-success__icon {
    width: 64px; height: 64px;
    background: var(--c-accent-subtle);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
}
.form-success__icon svg { color: var(--c-accent); fill: currentColor; }
.form-success h2 {
    font-family: var(--font-serif);
    font-size: var(--text-h3); color: var(--c-heading); margin-bottom: 8px;
}
.form-success p {
    color: var(--c-text); font-size: var(--text-sm); margin-bottom: 24px;
}

/* =========================================
   FOOTER — dark contour map with shapes
   ========================================= */
.site-footer {
    position: relative;
    background: var(--c-heading);
    overflow: hidden;
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Contour SVG layers */
.footer-contours {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.footer-contours svg {
    position: absolute;
    top: 0; left: 0;
    width: 200%; height: 100%;
}
.contour-layer-1 { animation: footer-drift 80s linear infinite; }
.contour-layer-2 { animation: footer-drift 65s linear infinite reverse; }
.contour-layer-3 { animation: footer-drift 50s linear infinite; }
@keyframes footer-drift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Scattered decorative shapes */
.footer-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.footer-shape {
    position: absolute;
    display: block;
    opacity: 0.06;
    transition: opacity 0.6s, transform 0.6s;
}
.footer-shape.revealed {
    opacity: 0.15;
    transform: scale(1.08);
}

/* Float animations */
@keyframes float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
@keyframes float-c { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes float-d { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes float-e { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes float-f { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes float-g { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes float-h { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }

.footer-shape--ring-1    { top: 12%; left: 8%;   animation: float-a 22s ease-in-out infinite; }
.footer-shape--dot-1     { top: 18%; right: 12%; animation: float-b 18s ease-in-out infinite; }
.footer-shape--half-1    { top: 52%; left: 15%;  animation: float-c 26s ease-in-out infinite; }
.footer-shape--crescent-1 { top: 62%; right: 8%; animation: float-d 20s ease-in-out infinite; }
.footer-shape--triangle-1 { top: 30%; left: 55%; animation: float-e 28s ease-in-out infinite; }
.footer-shape--zigzag-1  { top: 78%; left: 25%;  animation: float-f 24s ease-in-out infinite; }
.footer-shape--ring-2    { top: 22%; left: 38%;  animation: float-g 30s ease-in-out infinite; }
.footer-shape--dot-2     { top: 70%; right: 35%; animation: float-h 16s ease-in-out infinite; }

/* Footer content */
.site-footer__inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 96px 32px 0;
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr 1fr 1fr;
    gap: 48px;
}

.site-footer__brand { max-width: 320px; }
.site-footer__brand .site-nav__logo {
    color: var(--c-white);
    transition: color 0.4s, background 0.4s, -webkit-background-clip 0.4s, -webkit-text-fill-color 0.4s;
}
.site-footer__brand .site-nav__logo:hover {
    background: linear-gradient(135deg, var(--c-coral), var(--c-gold), var(--c-green), var(--c-blue-soft));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: footer-gradient 3s ease infinite;
}
@keyframes footer-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.site-footer__brand p {
    font-size: var(--text-sm); line-height: 1.6; margin-top: 16px;
    color: var(--c-footer-text);
}

.site-footer__heading {
    font-family: var(--font-serif);
    font-size: var(--text-footer-heading);
    font-weight: 400;
    color: var(--c-white);
    margin-bottom: 24px;
    letter-spacing: 0.01em;
}
.site-footer__col ul { list-style: none; }
.site-footer__col li { margin-bottom: 8px; }
.site-footer__col a {
    text-decoration: none; font-size: var(--text-sm);
    color: var(--c-footer-text);
    position: relative; display: inline-block; padding-bottom: 2px;
    transition: color 0.3s;
}
.site-footer__col a::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--c-coral);
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__col a:hover { color: var(--c-white); }
.site-footer__col a:hover::after { width: 100%; }

/* Email link — blue underline variant */
.site-footer__col a[href^="mailto"]::after { background: var(--c-blue-soft); }

.site-footer__bottom {
    position: relative; z-index: 2;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 32px;
}
.site-footer__bottom-inner {
    margin-top: 64px;
    padding: 24px 0 48px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    font-size: var(--text-xs);
    color: var(--c-footer-muted);
}

/* Staggered reveal for footer columns */
.site-footer .site-footer__col {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer.is-visible .site-footer__col:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.site-footer.is-visible .site-footer__col:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.site-footer.is-visible .site-footer__col:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.site-footer.is-visible .site-footer__col:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.site-footer.is-visible .site-footer__col:nth-child(5) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.site-footer .site-footer__bottom-inner {
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.65s,
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
}
.site-footer.is-visible .site-footer__bottom-inner {
    opacity: 1; transform: translateY(0);
}

/* =========================================
   SCROLL REVEAL ANIMATIONS
   ========================================= */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Slide from left variant */
.reveal--left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal--left.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Scale-up variant for cards */
.reveal--scale {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal--scale.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger children */
.reveal-stagger > .reveal:nth-child(1),
.reveal-stagger > .reveal--scale:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2),
.reveal-stagger > .reveal--scale:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger > .reveal:nth-child(3),
.reveal-stagger > .reveal--scale:nth-child(3) { transition-delay: 0.24s; }
.reveal-stagger > .reveal:nth-child(4),
.reveal-stagger > .reveal--scale:nth-child(4) { transition-delay: 0.36s; }
.reveal-stagger > .reveal:nth-child(5),
.reveal-stagger > .reveal--scale:nth-child(5) { transition-delay: 0.48s; }
.reveal-stagger > .reveal:nth-child(6),
.reveal-stagger > .reveal--scale:nth-child(6) { transition-delay: 0.6s; }
.reveal-stagger > .reveal:nth-child(7),
.reveal-stagger > .reveal--scale:nth-child(7) { transition-delay: 0.72s; }

/* =========================================
   FOCUS INDICATORS
   ========================================= */
.btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.site-nav__burger:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 4px; }
.site-nav__links a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 3px; }
.site-nav__cta:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.nav-dropdown__toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 3px; }
.nav-dropdown__link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; border-radius: 3px; }
.faq-question:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 3px; }
.site-footer__col a:focus-visible { outline: 2px solid var(--c-blue-soft); outline-offset: 4px; }
.contact-link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: var(--radius); }
.feature-list li a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }

/* =========================================
   RESPONSIVE — Tablet (max-width: 1024px)
   ========================================= */
@media (max-width: 1024px) {
    .feature-list { grid-template-columns: 1fr; }

    .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }

    .partner-card { grid-template-columns: 200px 1fr; }
    .partner-card__content { padding: 32px; }

    .section-hero { padding: 140px 24px 64px; }

    .section-white, .section-surface { padding: 64px 0; }

    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .area-accent-grid { grid-template-columns: repeat(3, 1fr); }

    .health-check__card { padding: 20px; }

    .process-timeline { grid-template-columns: repeat(2, 1fr); }
    .process-step::after { display: none; }
    .process-step {
        border-top: 2px solid var(--c-separator);
        padding-top: 24px;
    }

    .rounded-section {
        border-radius: var(--radius-section-md);
    }

    .guarantees-grid { grid-template-columns: repeat(2, 1fr); }

    .section-cta { padding: 80px 24px; }

    .section-recent-work { padding: 64px 0; }
    .spotlight__viewport { height: 360px; }
    .spotlight { gap: 32px; }

    .section-process,
    .section-guarantees { padding-top: 64px; padding-bottom: 64px; }
    .section-health-check { padding-top: 80px; padding-bottom: 64px; }
}

/* =========================================
   RESPONSIVE — Mobile (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {
    .site-nav { top: 16px; left: 16px; right: 16px; padding: 16px 24px; }
    .site-nav__links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 8px);
        left: 0; right: 0;
        background: var(--c-surface);
        padding: 24px;
        gap: 0;
        border-radius: var(--radius);
        box-shadow: var(--shadow-card-hover);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.4s, visibility 0.4s, transform 0.4s;
    }
    .site-nav__links.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    .site-nav__links li {
        border-bottom: 1px solid var(--c-border);
        list-style: none;
        text-align: center;
    }
    .site-nav__links li:last-child { border-bottom: none; }
    .site-nav__links a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px 0; background-image: none; }
    .nav-icon { display: inline-block; color: var(--c-accent); }
    .site-nav__links .site-nav__cta { text-align: center; display: block; padding: 16px 32px; }
    .site-nav__burger { display: flex; }

    /* Services dropdown — mobile: flat list, same style as other nav links */
    .nav-item--has-dropdown {
        display: block;
    }
    .nav-dropdown__toggle {
        display: none;
    }
    .nav-dropdown {
        display: none;
    }

    .feature-list { grid-template-columns: 1fr; }

    .site-footer__inner { grid-template-columns: 1fr; padding: 64px 24px 0; }
    .site-footer__bottom { padding: 0 24px; }
    .site-footer__bottom-inner {
        margin-top: 48px; padding: 24px 0 40px;
        flex-direction: column; align-items: flex-start; gap: 8px;
    }
    .footer-shapes { display: none; }

    /* Homepage mobile */
    .section-hero { padding: 120px var(--pad-inline) 48px; }
    .text-display { font-size: clamp(2.2rem, 10vw, 3.5rem); }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; justify-content: center; }
    .hero-stats { gap: 16px; justify-content: space-between; }
    .hero-stat__divider { display: none; }

    .section-white, .section-surface { padding: 48px 0; }
    .section-services { padding: 48px 0; }
    .services-grid { grid-template-columns: 1fr; }
    .area-accent-grid { grid-template-columns: repeat(2, 1fr); }

        .health-check__card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .health-check__buttons { width: 100%; }
    .health-check__btn { flex: 1; justify-content: center; }
    .health-check__results-card { padding: 32px 24px; }

    .process-timeline {
        grid-template-columns: 1fr;
        padding-left: 0;
        position: relative;
    }
    .process-timeline::before {
        display: none;
    }
    .process-step {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 0;
        padding: 0 0 32px;
        border-top: none;
    }
    .process-step:last-child { padding-bottom: 0; }
    .process-step::after { display: none; }
    .process-step__icon {
        width: 40px; height: 40px;
        margin: 0 0 16px; position: static;
    }
    .process-step__icon svg { width: 24px; height: 24px; }
    .process-step__num { margin-bottom: 4px; }
    .process-step__title { margin-bottom: 8px; }

    .guarantees-grid { grid-template-columns: 1fr; }

    .partner-card { grid-template-columns: 1fr; }
    .partner-card__img { height: 220px; }
    .partner-card__content { padding: 24px; }
    .section-partner { padding: 48px 0; }

    .section-cta { padding: 64px var(--pad-inline); }
    .cta-buttons { flex-direction: column; }
    .cta-buttons .btn { width: 100%; justify-content: center; }

    .floating-cta {
        right: 16px;
        left: 16px;
        bottom: 16px;
        justify-content: center;
    }

    .rounded-section {
        width: calc(100% - 24px);
        border-radius: var(--radius-section-sm);
        margin: 16px auto;
    }

    .section-recent-work { padding: 48px 0; }
    .spotlight,
    .spotlight--reverse {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .spotlight--reverse .spotlight__frame { order: 0; }
    .spotlight--reverse .spotlight__info { order: 0; }
    .spotlight__viewport { height: 280px; }
    .spotlight__info h3 { font-size: var(--text-h3); }
    .spotlight + .spotlight { margin-top: 48px; }

    .section-process,
    .section-guarantees { padding-top: 48px; padding-bottom: 48px; }
    .section-health-check { padding-top: 80px; padding-bottom: 96px; }
}

/* =========================================
   REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .hero-buttons .btn--primary::before { animation: none; }
    .hero-shape { animation: none; }
    .cta-shape { animation: none; }
    .floating-cta { transition: none; transform: none; }
    .floating-cta.is-visible { transform: none; }

    .reveal,
    .reveal--left,
    .reveal--scale {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .service-icon-card,
    .service-proposition,
    .guarantee-card,
    .process-step__icon,
    .service-icon-card__icon,
    .guarantee-card__icon {
        transition: none;
    }

    .service-proposition:hover {
        transform: none;
    }

    .text-display .word {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .site-nav__links a:not(.site-nav__cta) {
        transition: color 0.2s;
        background-image: none;
    }

    .nav-dropdown__chevron { transition-duration: 0.01ms; }
    .nav-dropdown { transition-duration: 0.01ms; }
    .vanlife-shape { animation: none; }
    .partner-shape { animation: none; }

    /* Footer */
    .site-footer { opacity: 1; transform: none; transition: none; }
    .site-footer .site-footer__col { opacity: 1; transform: none; transition: none; }
    .site-footer .site-footer__bottom-inner { opacity: 1; transform: none; transition: none; }
    .contour-layer-1, .contour-layer-2, .contour-layer-3 { animation: none; }
    .footer-shape { animation: none; opacity: 0.06; transition: none; }
    .site-footer__brand .site-nav__logo:hover { animation: none; }
}

/* =========================================
   REUSABLE PROSE & CARD UTILITIES
   ========================================= */
.prose-centred {
    max-width: var(--max-w-narrow);
    margin: 0 auto 32px;
    text-align: center;
}
.prose-centred--mid {
    max-width: var(--max-w-mid);
}
.prose-centred:last-child {
    margin-bottom: 0;
}
.prose-centred p {
    font-size: var(--text-body);
    color: var(--c-text);
    line-height: 1.7;
    margin-bottom: 16px;
}
.prose-centred p:last-child {
    margin-bottom: 0;
}
.prose-centred strong {
    color: var(--c-heading);
}

.section-hero .hero-buttons {
    margin-top: 32px;
}
.section-footnote {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--c-text);
    margin-top: 24px;
}

/* Problem split layout */
.problem-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.problem-split__heading {
    font-family: var(--font-serif);
    font-size: var(--text-h2);
    font-weight: 400;
    line-height: 1.15;
    color: var(--c-heading);
}
.problem-split__accent {
    position: relative;
    background: var(--c-wash-personal);
    border-radius: var(--radius-section);
    padding: 48px 40px;
    overflow: hidden;
}
.problem-split__accent p {
    position: relative;
    z-index: 1;
    font-size: var(--text-body);
    line-height: 1.7;
    color: var(--c-text);
    margin-bottom: 16px;
}
.problem-split__accent p:last-child {
    margin-bottom: 0;
}
.problem-split__accent strong {
    color: var(--c-heading);
}
.problem-split__accent-shape {
    position: absolute;
    pointer-events: none;
}
.problem-split__accent-shape--ring {
    top: -24px;
    right: -24px;
}
.problem-split__accent-shape--half {
    bottom: -16px;
    left: -16px;
}
.problem-split__accent-shape--dot1 {
    top: 24px;
    left: 20px;
}
.problem-split__accent-shape--dot2 {
    bottom: 32px;
    right: 24px;
}
@media (max-width: 768px) {
    .problem-split { grid-template-columns: 1fr; gap: 32px; }
    .problem-split__accent { padding: 32px 24px; }
}

/* Future Ready timeline */
.future-timeline {
    max-width: var(--max-w-narrow);
    margin: 40px auto 0;
    position: relative;
    padding-left: 48px;
}
.future-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--c-border);
}
.future-timeline__step {
    position: relative;
    margin-bottom: 32px;
}
.future-timeline__step:last-child {
    margin-bottom: 0;
}
.future-timeline__dot {
    position: absolute;
    left: -48px;
    top: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.future-timeline__dot iconify-icon {
    color: var(--c-white);
}
.future-timeline__step h3 {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--c-heading);
    margin-bottom: 4px;
}
.future-timeline__step p {
    font-size: var(--text-sm);
    color: var(--c-text);
    line-height: 1.6;
}

/* =========================================
   HOMEPAGE — Components specific to index.html
   Only overrides that differ from the base.
   ========================================= */

/* Homepage hero stat border overrides */
body.page-home .hero-stats {
    border-top-color: var(--c-separator-light);
}
body.page-home .hero-stat__divider {
    background: var(--c-separator-light);
}

/* Homepage hero shape positions */
body.page-home .hero-shape--arc {
    top: 8%;
    right: 4%;
    animation: floatSlow 14s ease-in-out infinite;
}
body.page-home .hero-shape--circle {
    bottom: 12%;
    right: 15%;
    animation: floatMed 10s ease-in-out infinite;
}
body.page-home .hero-shape--crescent {
    top: 18%;
    right: 28%;
    animation: floatSlow 16s ease-in-out infinite reverse;
}
body.page-home .hero-shape--half {
    bottom: 5%;
    left: 3%;
    animation: floatMed 12s ease-in-out infinite;
}
body.page-home .hero-shape--dot1 {
    top: 30%;
    right: 10%;
    animation: floatFast 8s ease-in-out infinite;
}
body.page-home .hero-shape--dot2 {
    bottom: 25%;
    left: 12%;
    animation: floatFast 9s ease-in-out infinite reverse;
}

@keyframes floatSlow {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-12px, 16px) rotate(4deg); }
}
@keyframes floatMed {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(10px, -14px); }
}
@keyframes floatFast {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-6px, 8px); }
}

/* About page hero shape positions */
body.page-about .hero-shape--ring   { top: 6%; right: 5%; animation: floatSlow 15s ease-in-out infinite; }
body.page-about .hero-shape--half   { bottom: 8%; left: 2%; animation: floatMed 11s ease-in-out infinite; }
body.page-about .hero-shape--diamond{ top: 25%; left: 8%; animation: floatFast 9s ease-in-out infinite; }
body.page-about .hero-shape--dot1   { bottom: 20%; right: 12%; animation: floatFast 7s ease-in-out infinite reverse; }
body.page-about .hero-shape--dot2   { top: 40%; right: 25%; animation: floatFast 8s ease-in-out infinite; }

/* Services page hero shape positions */
body.page-services .hero-shape--tri  { top: 10%; right: 6%; animation: floatSlow 13s ease-in-out infinite; }
body.page-services .hero-shape--wave { bottom: 12%; left: 0; animation: floatMed 11s ease-in-out infinite; }
body.page-services .hero-shape--ring { top: 30%; right: 20%; animation: floatMed 12s ease-in-out infinite reverse; }
body.page-services .hero-shape--dot1 { top: 15%; left: 10%; animation: floatFast 8s ease-in-out infinite; }
body.page-services .hero-shape--dot2 { bottom: 18%; right: 8%; animation: floatFast 9s ease-in-out infinite reverse; }

/* Websites page hero shape positions */
body.page-websites .hero-shape--square { top: 8%; right: 4%; animation: floatSlow 14s ease-in-out infinite; }
body.page-websites .hero-shape--zigzag{ bottom: 10%; left: 2%; animation: floatMed 10s ease-in-out infinite; }
body.page-websites .hero-shape--circle{ top: 20%; right: 25%; animation: floatSlow 16s ease-in-out infinite reverse; }
body.page-websites .hero-shape--dot1  { bottom: 25%; right: 10%; animation: floatFast 7s ease-in-out infinite; }
body.page-websites .hero-shape--dot2  { top: 35%; left: 8%; animation: floatFast 9s ease-in-out infinite reverse; }

/* Audit page hero shape positions */
body.page-audit .hero-shape--cross { top: 12%; right: 8%; animation: floatSlow 13s ease-in-out infinite reverse; }
body.page-audit .hero-shape--ring  { bottom: 6%; left: 4%; animation: floatMed 12s ease-in-out infinite; }
body.page-audit .hero-shape--tri   { top: 30%; right: 22%; animation: floatFast 9s ease-in-out infinite; }
body.page-audit .hero-shape--dot1  { bottom: 22%; right: 12%; animation: floatFast 8s ease-in-out infinite reverse; }
body.page-audit .hero-shape--dot2  { top: 18%; left: 10%; animation: floatFast 7s ease-in-out infinite; }

/* Audit success page hero shape positions */
body.page-audit-success .hero-shape--ring  { top: 8%; right: 6%; animation: floatSlow 14s ease-in-out infinite; }
body.page-audit-success .hero-shape--cross { bottom: 10%; left: 5%; animation: floatMed 11s ease-in-out infinite; }
body.page-audit-success .hero-shape--dot1  { bottom: 22%; right: 12%; animation: floatFast 8s ease-in-out infinite reverse; }
body.page-audit-success .hero-shape--dot2  { top: 20%; left: 10%; animation: floatFast 7s ease-in-out infinite; }

/* Contact page hero shape positions */
body.page-contact .hero-shape--ring { top: 8%; right: 6%; animation: floatSlow 14s ease-in-out infinite; }
body.page-contact .hero-shape--arc  { bottom: 10%; left: 3%; animation: floatMed 12s ease-in-out infinite; }
body.page-contact .hero-shape--half { top: 20%; right: 30%; animation: floatSlow 16s ease-in-out infinite reverse; }
body.page-contact .hero-shape--dot1 { bottom: 25%; right: 15%; animation: floatFast 8s ease-in-out infinite; }
body.page-contact .hero-shape--dot2 { top: 35%; left: 12%; animation: floatFast 9s ease-in-out infinite reverse; }

/* =========================================
   SERVICES — White bg, blue hover wash
   ========================================= */
body.page-home .section-services {
    background: var(--c-bg);
}
body.page-home .service-icon-card {
    border-color: transparent;
}
body.page-home .service-icon-card:hover {
    background: var(--c-surface);
    border-color: var(--c-border-hover);
}
body.page-home .service-icon-card__icon {
    border-radius: var(--radius-icon);
}
body.page-home .service-icon-card:nth-child(3) .service-icon-card__icon {
    --icon-bg: rgba(240,199,94,0.12);
    --icon-color: var(--c-gold-dark);
}

/* =========================================
   CINEMA REEL PROCESS
   ========================================= */
body.page-home .section-process-filmstrip {
    background: var(--c-bg);
    padding: 96px 0;
}
body.page-home .section-process-filmstrip .section-header {
    text-align: center;
    margin-bottom: 64px;
}
body.page-home .section-process-filmstrip .section-subtitle {
    margin: 0 auto;
}
.filmstrip {
    display: flex;
    gap: 16px;
    width: 100%;
}
.film-panel {
    position: relative;
    flex: 1 1 0;
    min-height: 420px;
    background: var(--c-bg);
    border-radius: var(--radius);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    cursor: default;
    box-shadow: var(--shadow-card);
    transition: flex 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
    opacity: 0;
    transform: translateY(24px);
}
.film-panel.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: flex 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease,
                opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Top colour bar */
.film-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--panel-accent);
    border-radius: var(--radius) var(--radius) 0 0;
    opacity: 0.7;
    transition: opacity 0.4s ease, height 0.4s ease;
}
/* Subtle gradient overlay */
.film-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--panel-accent) 0%, transparent 70%);
    opacity: 0.04;
    pointer-events: none;
    transition: opacity 0.5s ease;
    border-radius: var(--radius);
}
/* Hover — expand active, contract siblings */
.filmstrip:hover .film-panel {
    flex: 0.85;
}
.filmstrip:hover .film-panel:hover {
    flex: 1.45;
    box-shadow: var(--shadow-card-hover);
}
.filmstrip:hover .film-panel:hover::before {
    opacity: 1;
    height: 4px;
}
.filmstrip:hover .film-panel:hover::after {
    opacity: 0.07;
}
/* Panel innards */
.panel-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    width: 100%;
}
.panel-step {
    font-family: var(--font-serif);
    font-size: var(--text-step);
    line-height: 1;
    color: var(--panel-accent);
    opacity: 0.2;
    margin-bottom: 24px;
    transition: opacity 0.4s ease;
}
.filmstrip:hover .film-panel:hover .panel-step {
    opacity: 0.35;
}
.panel-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    background: var(--panel-accent);
    opacity: 0.9;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.panel-icon iconify-icon {
    color: var(--c-white);
}
.filmstrip:hover .film-panel:hover .panel-icon {
    opacity: 1;
    transform: scale(1.06);
}
.panel-title {
    font-family: var(--font-serif);
    font-size: var(--text-h5);
    color: var(--c-heading);
    margin-bottom: 8px;
    line-height: 1.3;
}
.panel-desc {
    font-size: var(--text-sm);
    color: var(--c-text);
    line-height: 1.7;
    margin-top: auto;
    padding-top: 8px;
}
/* Sprocket holes */
.sprocket-track {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1;
}
.sprocket {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--panel-accent);
    opacity: 0.1;
    transition: opacity 0.4s ease;
}
.filmstrip:hover .film-panel:hover .sprocket {
    opacity: 0.18;
}

/* =========================================
   GUARANTEES — Inside rounded surface container
   ========================================= */
body.page-home .section-guarantees {
    background: transparent;
    padding: 96px 24px;
}
body.page-home .guarantee-card {
    background: var(--c-bg);
    border-color: transparent;
}
body.page-home .guarantee-card:hover {
    background: var(--c-surface);
    border-color: var(--c-border-hover);
}
body.page-home .guarantee-card__icon {
    border-radius: var(--radius-icon);
}

/* =========================================
   PARTNER — White bg
   ========================================= */
body.page-home .section-partner {
    background: var(--c-bg);
    padding-top: 64px;
}
body.page-home .partner-card {
    border-color: transparent;
}

/* =========================================
   RESPONSIVE — Mobile (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {
    /* Scale down decorative shapes on mobile */
    .hero-shape { transform: scale(0.5); }
    body.page-home .hero-shape--arc { top: 2%; right: -4%; }
    body.page-home .hero-shape--circle { bottom: 8%; right: 2%; }
    body.page-home .hero-shape--crescent { top: 10%; right: 60%; }
    body.page-home .hero-shape--half { bottom: 2%; left: -2%; }
    body.page-home .hero-shape--dot1 { top: 25%; right: 5%; }
    body.page-home .hero-shape--dot2 { bottom: 18%; left: 5%; }

    /* Filmstrip — stack on mobile */
    .filmstrip {
        flex-direction: column;
        gap: 16px;
    }
    .filmstrip .film-panel {
        min-height: auto;
        padding: 32px 28px;
        flex: none;
    }
    .filmstrip:hover .film-panel,
    .filmstrip:hover .film-panel:hover {
        flex: none;
    }
    .film-panel:hover {
        box-shadow: var(--shadow-card-hover);
    }
    .panel-step {
        font-size: 2.25rem;
        margin-bottom: 16px;
    }
    .panel-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-icon);
        margin-bottom: 24px;
    }
    .panel-title {
        font-size: var(--text-body);
    }
    .sprocket-track {
        display: none;
    }

    /* Dual panels — stack on mobile */
    .dual-panels { grid-template-columns: 1fr; }
    .dual-panel { padding: 40px 28px; border-radius: var(--radius-section-md); }
}

/* ── Filmstrip tablet tweaks ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .film-panel {
        padding: 32px 24px;
        min-height: 380px;
    }
    .panel-step {
        font-size: 2.5rem;
    }
}

/* =========================================
   REDUCED MOTION — Homepage shapes + filmstrip + split
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .film-panel,
    .film-panel::before,
    .film-panel::after,
    .panel-step,
    .panel-icon,
    .filmstrip:hover .film-panel,
    .filmstrip:hover .film-panel:hover {
        transition: none;
    }
    .film-panel {
        opacity: 1;
        transform: none;
    }
}

/* =========================================
   ABOUT PAGE — Components specific to about.html
   Only overrides that differ from the base.
   ========================================= */

/* =========================================
   ABOUT GRID — Two column text + photo
   ========================================= */
body.page-about .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
body.page-about .about-grid--reversed {
    direction: rtl;
}
body.page-about .about-grid--reversed > * {
    direction: ltr;
}
body.page-about .about-grid__text .section-title {
    margin-bottom: 24px;
}
body.page-about .about-grid__text p {
    font-size: var(--text-body);
    line-height: 1.7;
    color: var(--c-text);
    margin-bottom: 16px;
}
body.page-about .about-grid__text p:last-child {
    margin-bottom: 0;
}
body.page-about .about-grid__text a:not(.btn) {
    color: var(--c-accent);
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    transition: color 0.3s;
}
body.page-about .about-grid__text a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--c-accent);
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
body.page-about .about-grid__text a:not(.btn):hover {
    color: var(--c-heading);
}
body.page-about .about-grid__text a:not(.btn):hover::after { width: 100%; }
body.page-about .about-grid__photo {
    border-radius: var(--radius);
    overflow: hidden;
}
body.page-about .about-grid__photo--decorated {
    position: relative;
    overflow: visible;
}
body.page-about .about-grid__photo--decorated img {
    border-radius: var(--radius);
    position: relative;
    z-index: 1;
}
.vanlife-shape {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.vanlife-shape--arc {
    top: -32px;
    left: -24px;
    animation: vanlife-float 6s ease-in-out infinite;
}
.vanlife-shape--circle {
    bottom: -24px;
    right: -20px;
    animation: vanlife-float 7s ease-in-out 1s infinite;
}
.vanlife-shape--dot1 {
    top: 40%;
    left: -32px;
    animation: vanlife-float 5s ease-in-out 0.5s infinite;
}
.vanlife-shape--dot2 {
    bottom: 20%;
    right: -28px;
    animation: vanlife-float 5.5s ease-in-out 1.5s infinite;
}
@keyframes vanlife-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
body.page-about .about-grid__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   ABOUT SECTIONS — Alternating backgrounds
   ========================================= */
body.page-about .about-vanlife {
    padding: 96px 0;
}
body.page-about .about-motivation {
    padding: 64px 0;
}
body.page-about .about-personal {
    padding: 64px 0;
}

/* =========================================
   ABOUT CENTRED — Narrow text block
   ========================================= */
body.page-about .about-centred {
    max-width: var(--max-w-narrow);
    margin: 0 auto;
    text-align: center;
}
body.page-about .about-centred .section-title {
    margin-bottom: 24px;
}
body.page-about .about-centred p {
    font-size: var(--text-body);
    line-height: 1.7;
    color: var(--c-text);
    margin-bottom: 16px;
}
body.page-about .about-centred p:last-child {
    margin-bottom: 0;
}

/* =========================================
   ABOUT LINKS — Vanlife external links
   ========================================= */
body.page-about .about-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}
body.page-about .about-links .btn {
    flex: 1 1 0;
    text-align: center;
    justify-content: center;
    min-width: 0;
}

/* =========================================
   ABOUT GALLERY — 3 column photo grid
   ========================================= */
body.page-about .about-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
body.page-about .about-gallery__item {
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}
body.page-about .about-gallery__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}
body.page-about .about-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 3 / 4;
    display: block;
}
body.page-about .about-gallery__img--outdoors {
    object-position: center 70%;
}

/* Gallery dots — hidden on desktop, shown on mobile */
.about-gallery__dots {
    display: none;
}
.about-gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-heading);
    opacity: 0.2;
    transition: opacity 0.3s;
    border: none;
    padding: 8px;
    background-clip: content-box;
    cursor: pointer;
}
.about-gallery__dot.is-active {
    opacity: 0.6;
}

/* About-specific focus indicator */
body.page-about .about-grid__text a:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 4px;
}

/* =========================================
   RESPONSIVE — Tablet (max-width: 1024px)
   ========================================= */
@media (max-width: 1024px) {
    body.page-about .about-vanlife {
        padding: 64px 0;
    }
    body.page-about .about-motivation,
    body.page-about .about-personal {
        padding: 48px 0;
    }
    body.page-about .about-grid {
        gap: 32px;
    }
}

/* =========================================
   RESPONSIVE — Mobile (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {
    body.page-about .about-vanlife {
        padding: 48px 0;
    }
    body.page-about .about-motivation,
    body.page-about .about-personal {
        padding: 40px 0;
    }
    body.page-about .about-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    body.page-about .about-grid--reversed {
        direction: ltr;
    }
    body.page-about .about-links .btn iconify-icon {
        display: none;
    }
    body.page-about .about-grid__photo {
        order: -1;
    }
    body.page-about .about-gallery {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        margin-top: 32px;
        padding-bottom: 8px;
    }
    body.page-about .about-gallery::-webkit-scrollbar {
        display: none;
    }
    body.page-about .about-gallery__item {
        flex: 0 0 80%;
        scroll-snap-align: center;
    }
    body.page-about .about-gallery__item.reveal--scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
    body.page-about .about-gallery__dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
    }
}

/* =========================================
   REDUCED MOTION — About page
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    body.page-about .about-gallery__item {
        transition: none;
    }
}

/* =========================================
   LOCATION PAGES (Bridgend, Cardiff, etc.)
   ========================================= */
body.page-location .section-subtitle {
    max-width: var(--max-w-mid);
}

/* Location page hero shape positions */
body.page-location .hero-shape--square { top: 8%; right: 4%; animation: floatSlow 14s ease-in-out infinite; }
body.page-location .hero-shape--zigzag { bottom: 10%; left: 2%; animation: floatMed 10s ease-in-out infinite; }
body.page-location .hero-shape--circle { top: 20%; right: 25%; animation: floatSlow 16s ease-in-out infinite reverse; }
body.page-location .hero-shape--dot1   { bottom: 25%; right: 10%; animation: floatFast 7s ease-in-out infinite; }
body.page-location .hero-shape--dot2   { top: 35%; left: 8%; animation: floatFast 9s ease-in-out infinite reverse; }

/* =========================================
   CONTACT PAGE — Light theme layout
   ========================================= */
.section-contact-form {
    padding: 64px 0;
}
.contact-form__title {
    margin-bottom: 8px;
}
.contact-form__intro {
    color: var(--c-text);
    margin-bottom: 32px;
}

body.page-contact .contact-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: start;
}
body.page-contact .contact-sidebar {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 32px;
    position: sticky;
    top: 100px;
}
body.page-contact .contact-sidebar h3 {
    font-family: var(--font-serif);
    font-size: var(--text-h5);
    font-weight: 400;
    color: var(--c-heading);
    margin-bottom: 24px;
}
body.page-contact .form-row input,
body.page-contact .form-row textarea,
body.page-contact .form-row select {
    background: var(--c-bg);
}
@media (max-width: 768px) {
    body.page-contact .contact-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    body.page-contact .contact-sidebar {
        position: static;
    }
    .form-row input,
    .form-row textarea,
    .form-row select {
        font-size: 1rem;
    }
}

/* =========================================
   VA PARTNERS PAGE
   ========================================= */

/* --- Checklist layout --- */
.va-checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: var(--max-w);
    margin: 0 auto;
}
.va-checklist__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.va-checklist__item:hover {
    transform: translateY(-4px);
    border-color: var(--c-border-hover);
    box-shadow: var(--shadow-card-hover);
}
.va-checklist__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.va-checklist__icon iconify-icon { color: var(--c-green-dark); }
.va-checklist__item:nth-child(6n+1) .va-checklist__icon iconify-icon { color: var(--c-coral-dark); }
.va-checklist__item:nth-child(6n+2) .va-checklist__icon iconify-icon { color: var(--c-green-dark); }
.va-checklist__item:nth-child(6n+3) .va-checklist__icon iconify-icon { color: var(--c-blue-dark); }
.va-checklist__item:nth-child(6n+4) .va-checklist__icon iconify-icon { color: var(--c-gold-dark); }
.va-checklist__item:nth-child(6n+5) .va-checklist__icon iconify-icon { color: var(--c-cyan-dark); }
.va-checklist__item:nth-child(6n+6) .va-checklist__icon iconify-icon { color: var(--c-coral-dark); }
.va-checklist__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--text-h4);
    color: var(--c-heading);
    margin-bottom: 4px;
}
.va-checklist__desc {
    font-size: var(--text-sm);
    color: var(--c-text);
    line-height: 1.6;
}

/* --- Pricing card --- */
.va-pricing {
    max-width: 520px;
    margin: 0 auto;
}
.va-pricing__card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 48px;
    text-align: center;
    box-shadow: var(--shadow-card-elevated);
}
.va-pricing__price {
    font-family: var(--font-serif);
    font-size: var(--text-display);
    color: var(--c-heading);
    line-height: 1;
    margin-bottom: 4px;
}
.va-pricing__label {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    margin-bottom: 32px;
}
.va-pricing__list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    text-align: left;
}
.va-pricing__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: var(--text-body);
    color: var(--c-heading);
    border-bottom: 1px solid var(--c-border);
}
.va-pricing__list li:last-child { border-bottom: none; }
.va-pricing__list iconify-icon { color: var(--c-green-dark); flex-shrink: 0; }

/* --- Commission callout --- */
.va-commission {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    padding: 24px 32px;
    background: var(--c-wash-solution);
    border-radius: var(--radius);
    border: 1px solid rgba(126,200,160,0.2);
}
.va-commission__badge {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--c-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-card);
}
.va-commission__badge iconify-icon { color: var(--c-green-dark); }
.va-commission__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--text-h4);
    color: var(--c-heading);
    margin-bottom: 4px;
}
.va-commission__desc {
    font-size: var(--text-sm);
    color: var(--c-text);
    line-height: 1.6;
}

/* --- VA how it works: watermark cards --- */
.hiw-watermark {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.hiw-watermark__step {
    border-radius: var(--radius);
    padding: 40px 24px 32px;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}
.hiw-watermark__step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}
.hiw-watermark__step--coral { background: rgba(244,132,95,0.07); border-color: rgba(244,132,95,0.15); }
.hiw-watermark__step--green { background: rgba(126,200,160,0.07); border-color: rgba(126,200,160,0.15); }
.hiw-watermark__step--blue  { background: rgba(123,175,212,0.07); border-color: rgba(123,175,212,0.15); }
.hiw-watermark__step--gold  { background: rgba(240,199,94,0.07); border-color: rgba(240,199,94,0.18); }
.hiw-watermark__num {
    position: absolute;
    top: -8px;
    right: 8px;
    font-family: var(--font-serif);
    font-size: clamp(5rem, 8vw, 7rem);
    line-height: 1;
    opacity: 0.06;
    color: var(--c-heading);
    pointer-events: none;
    user-select: none;
}
.hiw-watermark__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.hiw-watermark__step--coral .hiw-watermark__icon { background: rgba(244,132,95,0.15); color: var(--c-coral-dark); }
.hiw-watermark__step--green .hiw-watermark__icon { background: rgba(126,200,160,0.15); color: var(--c-green-dark); }
.hiw-watermark__step--blue  .hiw-watermark__icon { background: rgba(123,175,212,0.15); color: var(--c-blue-dark); }
.hiw-watermark__step--gold  .hiw-watermark__icon { background: rgba(240,199,94,0.15); color: var(--c-gold-dark); }
.hiw-watermark__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--text-h4);
    color: var(--c-heading);
    margin-bottom: 8px;
    position: relative;
}
.hiw-watermark__desc {
    font-size: var(--text-sm);
    color: var(--c-text);
    line-height: 1.6;
    position: relative;
}

/* --- VA page layout --- */
body.page-va .section-subtitle {
    max-width: var(--max-w-mid);
}
body.page-va .section-partner {
    background: var(--c-surface);
}
body.page-va .partner-card {
    background: var(--c-bg);
}
body.page-va .partner-card-wrap {
    border-radius: var(--radius);
}

/* --- VA section corner shapes --- */
.section-shape {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.section-shape--tl { top: 24px; left: 24px; animation: floatSlow 14s ease-in-out infinite; }
.section-shape--tr { top: 32px; right: 32px; animation: floatMed 11s ease-in-out infinite; }
.section-shape--bl { bottom: 24px; left: 40px; animation: floatFast 9s ease-in-out infinite reverse; }
.section-shape--br { bottom: 40px; right: 48px; animation: floatFast 8s ease-in-out infinite; }

/* --- VA page hero shapes --- */
body.page-va .hero-shape--wave {
    position: absolute;
    top: 15%;
    left: -40px;
    opacity: 0.3;
}
body.page-va .hero-shape--diamond {
    position: absolute;
    bottom: 20%;
    right: 5%;
    opacity: 0.25;
}
body.page-va .hero-shape--arc {
    position: absolute;
    top: 25%;
    right: -30px;
    opacity: 0.3;
}
body.page-va .hero-shape--dot1 {
    position: absolute;
    top: 30%;
    left: 15%;
    opacity: 0.5;
}
body.page-va .hero-shape--dot2 {
    position: absolute;
    bottom: 25%;
    left: 8%;
    opacity: 0.45;
}

/* --- VA responsive --- */
@media (max-width: 1024px) {
    .va-checklist { grid-template-columns: repeat(2, 1fr); }
    .hiw-watermark { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .va-checklist { grid-template-columns: 1fr; }
    .va-pricing__card { padding: 32px 24px; }
    .va-commission { flex-direction: column; text-align: center; gap: 16px; padding: 24px; }
    .hiw-watermark { grid-template-columns: 1fr; }
}

/* --- VA reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .va-checklist__item,
    .hiw-watermark__step {
        transition: none;
    }
    .section-shape {
        animation: none;
    }
}