/* Primary webfont pair loaded via HTML <head> links for better loading reliability */

/* Reset and Base Styles */
.public-progress-section {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background: var(--surface-2);
    color: var(--text-color);
}
.public-progress-section .section-intro h2 { max-width: 23ch; }
.progress-metrics {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    margin: clamp(2.5rem, 5vw, 4rem) 0 1.75rem;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}
.progress-metric { padding: 2rem clamp(1rem, 3vw, 2.5rem); }
.progress-metric + .progress-metric { border-left: 1px solid var(--border-soft); }
.progress-metric dt { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.progress-metric dd { margin: 0; }
.progress-metric dd > span {
    display: block;
    font-family: var(--heading-font);
    font-size: clamp(2.25rem, 4.5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.progress-metric-primary dd > span { color: var(--accent-orange); }
.progress-metric dd small { display: block; color: var(--secondary-text); font-size: 0.9rem; line-height: 1.5; margin-top: 0.85rem; }
.progress-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; font-size: 0.82rem; line-height: 1.6; }
.progress-footer p { max-width: 78ch; color: var(--secondary-text); }
.progress-footer a { color: var(--text-color); font-weight: 600; flex-shrink: 0; text-underline-offset: 4px; }
.progress-methods { margin-top: 1rem; font-size: 0.85rem; color: var(--secondary-text); }
.progress-methods summary { cursor: pointer; padding: 0.6rem 0; min-height: 44px; width: fit-content; }
.progress-methods p { max-width: 85ch; line-height: 1.7; padding-top: 0.4rem; }
.progress-unavailable .progress-metric-primary dd > span { color: var(--secondary-text); }
@media (max-width: 700px) {
    .progress-metrics { grid-template-columns: 1fr 1fr; }
    .progress-metric-primary { grid-column: 1 / -1; border-bottom: 1px solid var(--border-soft); }
    .progress-metric-primary + .progress-metric { border-left: none; }
    .progress-metric-primary dd > span { font-size: clamp(3rem, 12vw, 5rem); }
    .progress-metric { padding: 1.5rem 0.85rem; }
    .progress-footer { flex-direction: column; gap: 0.65rem; }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure [hidden] always wins over display:flex/grid declarations */
[hidden] { display: none !important; }

/* ── Page Loader ── */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
:root[data-theme="dark"] #page-loader {
    background: #0A0A0A;
}
#page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loader-logo {
    width: 52px;
    height: 52px;
    animation: loader-pulse 1.6s ease-in-out infinite;
}
@keyframes loader-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.4; transform: scale(0.88); }
}

:root {
    --app-vh: 1vh;
    --primary-color: #0A0A0A;
    --accent-color: #0A0A0A;
    --accent-orange: #E07A3A; /* demoted to rare accent */
    --secondary-color: #888888;

    /* Brand dark */
    --brand-dark: #0A0A0A;
    --brand-dark-2: #050505;

    /* Light mode (default) */
    --text-color: #0A0A0A;
    --secondary-text: #696765;
    --background-color: #FFFFFF;
    --primary-rgb: 10,10,10;
    --surface-0: #FFFFFF;
    --surface-1: #FFFFFF;
    --surface-2: #F9F8F7;
    --surface-3: #F0EFEE;
    --border-soft: rgba(0, 0, 0, 0.08);
    --elev-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --section-pad: clamp(4rem, 7vw, 7rem);
    --section-pad-top: clamp(2rem, 3.5vw, 3.5rem);

    /* Inter everywhere */
    --heading-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --body-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* Dark mode */
:root[data-theme="dark"] {
    --primary-color: #FFFFFF;
    --secondary-color: #AAAAAA;
    --accent-color: #FFFFFF;
    --accent-orange: #E07A3A;
    --primary-rgb: 255,255,255;
    --text-color: #F0EFEE;
    --secondary-text: #999490;
    --background-color: #0A0A0A;
    --brand-dark: #0A0A0A;
    --brand-dark-2: #050505;
    --surface-0: #0A0A0A;
    --surface-1: #141414;
    --surface-2: #1C1C1C;
    --surface-3: #252525;
    --border-soft: rgba(255, 255, 255, 0.10);
    --elev-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* Dark mode surface + component palette (custom, not inverted) */
:root[data-theme="dark"] body {
    background-color: var(--surface-0);
}

:root[data-theme="dark"] nav,
:root[data-theme="dark"] .navbar {
    background: rgba(18, 22, 27, 0.88);
    border-bottom: 1px solid var(--border-soft);
}

:root[data-theme="dark"] .navbar.scrolled,
:root[data-theme="dark"] .navbar.navbar--solid {
    background: rgba(13, 17, 21, 0.95);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
}

:root[data-theme="dark"] .nav-link {
    color: #D7D2CA;
}

:root[data-theme="dark"] .nav-link:hover {
    color: #FFFFFF;
    opacity: 0.75;
}

:root[data-theme="dark"] .nav-logo {
    opacity: 1 !important;
    filter: none;
}

:root[data-theme="dark"] .nav-menu.active {
    background: rgba(16, 20, 24, 0.96);
}

:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .language-btn-toggle,
:root[data-theme="dark"] .language-btn {
    background: transparent;
    border-color: transparent;
    color: var(--text-color);
}

:root[data-theme="dark"] .theme-toggle:hover,
:root[data-theme="dark"] .language-btn-toggle:hover,
:root[data-theme="dark"] .language-btn:hover {
    background: rgba(236, 231, 223, 0.08);
}

:root[data-theme="dark"] .waitlist-cta-button {
    background: var(--accent-orange, #E07A3A);
    color: white !important;
}

:root[data-theme="dark"] .waitlist-cta-button:hover {
    background: #c8622a;
}

:root[data-theme="dark"] .benefit-card,
:root[data-theme="dark"] .benefit-item,
:root[data-theme="dark"] .team-card,
:root[data-theme="dark"] #team .team-card,
:root[data-theme="dark"] .demo-map-sidebar,
:root[data-theme="dark"] .demo-map-list-item,
:root[data-theme="dark"] .case-desc-box,
:root[data-theme="dark"] .case-nav-item {
    background: var(--surface-1) !important;
    border-color: var(--border-soft) !important;
    box-shadow: var(--elev-shadow);
}

:root[data-theme="dark"] .faq-item:first-child,
:root[data-theme="dark"] .faq-item {
    border-color: var(--border-soft);
}

:root[data-theme="dark"] .faq-details.is-open .faq-summary-text {
    color: #D4953E;
}

:root[data-theme="dark"] .faq-summary-toggle {
    color: rgba(255, 255, 255, 0.4);
}

:root[data-theme="dark"] .faq-details.is-open .faq-summary-toggle {
    color: #D4953E;
}

:root[data-theme="dark"] .faq-answer {
    color: var(--secondary-text);
}


:root[data-theme="dark"] .demo-map-search {
    background: var(--surface-2);
    color: var(--text-color);
    border-color: var(--border-soft);
}

:root[data-theme="dark"] .footer {
    background: #0D1115;
    color: #E7E1D8;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    max-width: 100%;
}

/* Prevent iOS “rubber band” horizontal jiggle / accidental overflow.
   Using clip (not hidden) so position:sticky still works, overflow:hidden creates a
   scroll container which breaks sticky in Safari. */
html, body {
    max-width: 100%;
    overflow-x: clip;
}

body {
    font-family: var(--body-font);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    overflow-x: clip;
    transition: background-color 300ms ease, color 300ms ease;
}

/* Used by JS to prevent background scrolling (mobile nav, overlays) */
body.scroll-locked {
    overflow: hidden;
}

/* Safe-area aware gutters for notched devices (iOS Safari) */
:root {
    --gutter: 20px;
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: calc(var(--gutter) + var(--safe-left));
    padding-right: calc(var(--gutter) + var(--safe-right));
    width: 100%;
}

/* Make images/videos never overflow their containers */
img, video {
    max-width: 100%;
    height: auto;
}

/* Improved tap feedback for touch devices */
.waitlist-cta-button,
.nav-link,
.language-btn,
.demo-map-list-item,
.back-to-top {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
}

/* Apply heading font to all heading elements */
h1, h2, h3, h4, h5, h6,
.hero-title,
.hero-subtitle,
.section-header h2,
.benefit-card h3,
.step h3,
.team-card h3,
.cta-content h2,
.footer-brand h3 {
    font-family: var(--heading-font);
}

/* Ensure body text uses body font */
p, span, a, li, td, th,
.nav-link,
.hero-description,
.feature-content p,
.benefit-card p,
.step p,
.team-role,
.team-affiliation,
.cta-content p,
.footer-info p {
    font-family: var(--body-font);
}

/* Navigation Bar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    backdrop-filter: none;
    z-index: 1000;
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease,
                backdrop-filter 0.4s ease, transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slides navbar out of view when away from the hero section. */
.navbar--hidden {
    transform: translateY(-110%);
    pointer-events: none;
}

/* .navbar--solid: pages without a dark hero start in the scrolled look. */
.navbar.scrolled,
.navbar.navbar--solid {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

/* Mobile menu open, give navbar a solid background */
.navbar.navbar--menu-open {
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
}

/* Touch devices: the fixed navbar's backdrop-filter blur forces the GPU to
   re-blur the content scrolling behind it every frame — a major cause of
   scroll stutter on phones. The background is already ~96% opaque, so dropping
   the blur (and making it fully opaque) is visually negligible but much smoother. */
@media (hover: none) and (pointer: coarse) {
    .navbar.scrolled,
    .navbar.navbar--solid,
    .navbar.navbar--menu-open {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #ffffff;
    }
    :root[data-theme="dark"] .navbar.scrolled,
    :root[data-theme="dark"] .navbar.navbar--solid,
    :root[data-theme="dark"] .navbar.navbar--menu-open {
        background: rgb(13, 17, 21);
    }
}

/* Transparent navbar (at top, before scroll), light mode only */
:root:not([data-theme="dark"]) .navbar:not(.scrolled):not(.navbar--solid):not(.navbar--menu-open) .nav-link {
    color: rgba(255, 255, 255, 0.92);
}

:root:not([data-theme="dark"]) .navbar:not(.scrolled):not(.navbar--solid):not(.navbar--menu-open) .nav-link:hover {
    color: #ffffff;
}

:root:not([data-theme="dark"]) .navbar:not(.scrolled):not(.navbar--solid):not(.navbar--menu-open) .nav-link::after {
    background: rgba(255, 255, 255, 0.7);
}

:root:not([data-theme="dark"]) .navbar:not(.scrolled):not(.navbar--solid):not(.navbar--menu-open) .nav-toggle .bar {
    background: rgba(255, 255, 255, 0.95);
}

:root:not([data-theme="dark"]) .navbar:not(.scrolled):not(.navbar--solid):not(.navbar--menu-open) .theme-toggle,
:root:not([data-theme="dark"]) .navbar:not(.scrolled):not(.navbar--solid):not(.navbar--menu-open) .language-btn-toggle {
    color: rgba(255, 255, 255, 0.85);
}

:root:not([data-theme="dark"]) .navbar:not(.scrolled):not(.navbar--solid):not(.navbar--menu-open) .nav-logo {
    filter: brightness(0) invert(1);
}

.nav-container {
    max-width: 1440px;
    margin: 0 auto;
    gap: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}

/* On mobile, align nav container gutters with the global container gutters */
@media (max-width: 768px) {
    .nav-container {
        padding-left: calc(1rem + var(--safe-left));
        padding-right: calc(1rem + var(--safe-right));
        height: 60px;
    }

    .nav-logo {
        height: 42px;
        max-width: 140px;
    }
}

@media (max-width: 560px) {
    .nav-container {
        height: 56px;
    }

    .nav-logo {
        height: 48px;
        max-width: 150px;
    }
}

.nav-brand {
    display: flex;
    align-items: center;
    width: 52px;
    min-width: 52px;
    padding: 0.35rem 0;
    opacity: 0;
    animation: navBrandFadeIn 0.6s ease forwards;
    animation-delay: 4s;
}

@media (min-width: 769px) {
    .nav-brand {
        margin-left: 1rem;
    }
}

@keyframes navBrandFadeIn {
    to { opacity: 1; }
}

.nav-logo {
    height: 52px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.nav-brand h3 {
    margin: 0;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.5rem;
}

.nav-menu {
    display: flex;
    gap: 1.4rem;
    align-items: center;
}

.nav-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-left: 0.65rem;
    flex-shrink: 0;
}

.nav-controls .waitlist-cta-button {
    margin-left: 0;
}

.nav-link {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

/* Make nav links easier to tap on mobile */
@media (max-width: 768px) {
    .nav-link {
        font-size: 1.15rem;
        padding: 0.5rem 1rem;
    }
}

.nav-link:hover {
    color: #0A0A0A;
    opacity: 0.7;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: #0A0A0A;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.waitlist-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    background: var(--accent-orange, #E07A3A);
    color: white !important;
    text-decoration: none;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border: none;
    outline: none;
    min-width: 200px;
    white-space: nowrap;
    justify-content: center;
    letter-spacing: -0.01em;
}
.waitlist-cta-button i,
.waitlist-cta-button span {
    color: white !important;
}

.waitlist-cta-button:hover {
    background: #c8622a;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(224, 122, 58, 0.35);
}

.waitlist-cta-button:focus {
    outline: 2px solid var(--accent-orange, #E07A3A);
    outline-offset: 3px;
}

/* Keep nav spacing without affecting other waitlist placements */
.nav-menu .waitlist-cta-button {
    margin-left: 0;
    min-width: 210px;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    gap: 5px;
    /* Tap target */
    padding: 10px 12px;
    margin-right: -12px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    background: transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.nav-toggle:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb), 0.55);
    outline-offset: 2px;
}

.nav-toggle .bar {
    width: 22px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--text-color);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

/* Language Switcher - Single Toggle Button */
.language-switcher {
    display: flex;
    gap: 0;
    margin-left: 1rem;
    border-left: 1px solid rgba(60, 57, 56, 0.2);
    padding-left: 1rem;
}

.language-btn {
    padding: 0.4rem 0.8rem;
    background: transparent;
    border: 1px solid var(--secondary-text);
    color: var(--secondary-text);
    text-decoration: none;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.language-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.language-btn:last-child {
    border-radius: 0 4px 4px 0;
    border-left: none;
}

.language-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(244, 184, 96, 0.1);
}

.language-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Night Mode Toggle Button */
.theme-toggle {
    padding: 0.35rem 0;
    background: transparent;
    border: none;
    color: var(--secondary-text);
    text-decoration: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-left: 0;
    width: 40px;
    min-width: 40px;
}

.language-btn-toggle {
    padding: 0.35rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--secondary-text);
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-left: 0;
    width: auto;
    min-width: auto;
}

.theme-toggle:hover {
    color: var(--primary-color);
    background: rgba(244, 184, 96, 0.08);
}

.language-btn-toggle:hover {
    color: var(--primary-color);
    background: rgba(244, 184, 96, 0.08);
}

/* ── Backdrop overlay (desktop: invisible, mobile: dims page behind drawer) ── */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.45);
    z-index: 999; /* below navbar (1000), above page content */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.nav-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile Navigation */
@media (max-width: 768px) {
    /* ── Drawer slides in from the right ── */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        left: auto;
        width: min(88vw, 320px);
        height: 100vh;
        height: 100dvh;
        background: var(--background-color, #FCF9F4);
        box-shadow: -4px 0 32px rgba(0, 0, 0, 0.12);
        border-left: 1px solid rgba(0, 0, 0, 0.07);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
        gap: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1001; /* above navbar and backdrop */
        transition: right 0.34s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav-menu.active {
        right: 0;
    }

    /* ── Drawer header: logo + close area ── */
    .nav-menu::before {
        content: '';
        display: block;
        height: 64px;
        flex-shrink: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }

    /* ── Nav links: full-width tap targets ── */
    .nav-link {
        display: block;
        width: 100%;
        font-size: 1.05rem;
        font-weight: 500;
        padding: 0.9rem 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        border-left: 3px solid transparent;
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
        box-sizing: border-box;
    }

    .nav-link:hover,
    .nav-link:focus-visible {
        background: rgba(244, 184, 96, 0.08);
        border-left-color: var(--primary-color, #F4B860);
        color: var(--text-color, #3C3938);
    }

    /* remove the underline decoration used on desktop */
    .nav-link::after {
        display: none;
    }

    /* ── Controls block: CTA + language ── */
    .nav-controls {
        margin: 1.25rem 1.5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        width: auto;
    }

    .language-switcher {
        border-left: none;
        border-top: none;
        padding: 0;
        margin: 0;
        justify-content: flex-start;
    }

    .waitlist-cta-button {
        width: 100%;
        margin: 0;
        padding: 0.9rem 1.5rem;
        font-size: 0.95rem;
        min-width: unset;
        justify-content: center;
        text-align: center;
    }

    /* ── Hamburger toggle ── */
    .nav-toggle {
        display: flex;
        position: relative;
        z-index: 1002; /* always above drawer */
    }

    /* Animate bars → X */
    .nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .nav-toggle.active .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle.active .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

@media (max-width: 560px) {
    .navbar {
        left: 0;
        right: 0;
        border-radius: 0;
    }
}

/* Mobile navigation 560px breakpoint */
@media (max-width: 560px) {
    .nav-menu {
        width: 100vw;
    }

    .nav-link {
        font-size: 1rem;
        padding: 0.85rem 1.25rem;
    }

    .nav-menu .waitlist-cta-button {
        font-size: 0.9rem;
    }
}

/* Hero Section with Video */
.hero {
    min-height: 100vh;
    min-height: 600px;
    position: relative;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    background: white;
    /* Prevent horizontal overflow on mobile */
    width: 100%;
    max-width: 100vw;
}

/* Hero layout tuning tokens */
:root {
    --hero-top-padding: clamp(7.5rem, 12vh, 9.5rem);
    --hero-bottom-padding: clamp(2.25rem, 5vh, 3.5rem);
    --hero-grid-gap: clamp(1.5rem, 4vw, 3rem);
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: opacity 1.5s ease-out;
}

.hero-video-overlay.fade-out {
    opacity: 0;
}

.hero-video-fullscreen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-content-overlay {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.10) 40%, rgba(0, 0, 0, 0.35) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.58) 42%, rgba(0, 0, 0, 0.18) 75%, rgba(0, 0, 0, 0.05) 100%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1; /* visible from the start */
    transition: opacity 0.6s ease-in;
    color: white;
}

/* Remove warm color sheen from hero overlay */
.hero-content-overlay::after {
    display: none;
}

.hero-content-overlay::before {
    display: none;
}

.hero-container,
.hero-grid,
.hero-content,
.hero-visual {
    position: relative;
    z-index: 1;
}

/* Ensure hero text is white when overlayed on video */
.hero-content-overlay .hero-subtitle,
.hero-content-overlay .hero-description,
.hero-content-overlay .hero-title,
.hero-content-overlay .hero-logo-container img,
.hero-content-overlay .hero-content h1,
.hero-content-overlay .hero-content h2 {
    color: white !important;
}

.hero-content-overlay.fade-in {
    opacity: 1;
}

.hero-content-overlay .hero-title,
.hero-content-overlay .hero-subtitle {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}

.hero-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding:
        calc(var(--hero-top-padding) + var(--safe-top))
        calc(2rem + var(--safe-right))
        var(--hero-bottom-padding)
        calc(2rem + var(--safe-left)); /* keep content comfortably below fixed nav */
}

/* New hero layout (copy + visual) */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hero-grid-gap);
    align-items: center;
    max-width: 740px;
}

.hero-content {
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 640px;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(252, 249, 244, 0.14);
    border: 1px solid rgba(252, 249, 244, 0.24);
    backdrop-filter: blur(10px);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 1;
    transform: none;
}

.hero-logo-container {
    margin-bottom: 2rem;
    opacity: 1;
    transform: none;
}

.hero-logo {
    height: 120px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.hero-title {
    font-size: clamp(3rem, 6.5vw, 6.5rem);
    font-weight: 800;
    margin: 0.5rem 0 0.65rem 0;
    line-height: 0.95;
    letter-spacing: -0.04em;
    opacity: 1;
    transform: none;
}

.hero-title__line {
    display: block;
    white-space: nowrap;
}

.hero-title__line--reserved {
    min-height: 0.95em;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    font-weight: 400;
    margin-bottom: 1.05rem;
    opacity: 1;
    transform: none;
    white-space: pre-line; /* honor newline in translation */
    color: rgba(255, 255, 255, 0.75) !important;
}

.hero-description {
    display: none;
    font-size: 1.15rem;
    margin-bottom: 1.65rem;
    line-height: 1.65;
    max-width: 56ch;
    opacity: 1;
    transform: none;
}

.hero-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.6rem 0;
    padding: 0;
    opacity: 1;
    transform: none;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.85rem;
    border-radius: 999px;
    background: rgba(252, 249, 244, 0.16);
    border: 1px solid rgba(252, 249, 244, 0.22);
    backdrop-filter: blur(10px);
    font-weight: 600;
    font-size: 0.95rem;
}

.hero-chip i {
    color: rgba(252, 249, 244, 0.95);
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.95rem;
    opacity: 1;
    transform: none;
}

/* Make the primary CTA feel more deliberate in the hero */
.hero .waitlist-cta-button {
    background: var(--accent-orange, #E07A3A);
    color: white !important;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(224, 122, 58, 0.35);
    position: relative;
    overflow: hidden;
}

.hero .waitlist-cta-button i,
.hero .waitlist-cta-button span {
    color: white !important;
}

.hero .waitlist-cta-button:hover {
    background: #c8622a;
    box-shadow: 0 14px 40px rgba(224, 122, 58, 0.45);
}

/* Subtle “sheen” on the primary hero CTA */
.hero .waitlist-cta-button::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 45%;
    height: 220%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.22) 45%,
        rgba(255, 255, 255, 0) 80%
    );
    transform: rotate(18deg);
    opacity: 0;
    transition: opacity 220ms ease;
}

.hero .waitlist-cta-button:hover::after,
.hero .waitlist-cta-button:focus-visible::after {
    opacity: 1;
    animation: heroCtaSheen 850ms ease-out;
}

.hero-secondary-cta {
    position: relative;
}

.hero-secondary-cta::after {
    content: "";
    display: block;
    height: 2px;
    width: 0;
    background: rgba(252, 249, 244, 0.85);
    margin-top: 6px;
    transition: width 220ms ease;
}

.hero-secondary-cta:hover::after {
    width: 100%;
}

/* Scroll-reveal utility (used by JS) */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 650ms cubic-bezier(.2,.9,.2,1), transform 650ms cubic-bezier(.2,.9,.2,1);
    will-change: auto;
}

.reveal.is-inview {
    opacity: 1;
    transform: translateY(0);
}

.reveal.reveal-scale {
    transform: translateY(14px) scale(0.985);
}

.reveal.reveal-fade {
    transform: none;
}

.hero-secondary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.2rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: rgba(252, 249, 244, 0.98);
    background: rgba(252, 249, 244, 0.12);
    border: 1px solid rgba(252, 249, 244, 0.22);
    backdrop-filter: blur(10px);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.hero-live-cta {
    gap: 0.38rem;
    padding: 0.82rem 1.06rem;
}

.hero-live-cta::after {
    display: none;
}

.hero-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3CE07D;
    box-shadow: 0 0 0 0 rgba(60, 224, 125, 0.65);
    animation: hero-live-pulse 1.4s ease-out infinite;
}

.hero-live-count {
    font-weight: 800;
}

.hero-live-divider {
    opacity: 0.7;
}

.hero-live-cta:hover,
.hero-live-cta:focus-visible {
    transform: none;
    background: rgba(60, 224, 125, 0.22);
    border-color: rgba(60, 224, 125, 0.58);
    box-shadow: 0 0 0 6px rgba(60, 224, 125, 0.14);
}

.hero-live-cta:hover .hero-live-dot,
.hero-live-cta:focus-visible .hero-live-dot {
    animation-duration: 0.95s;
}

@keyframes hero-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(60, 224, 125, 0.65); }
    70%  { box-shadow: 0 0 0 8px rgba(60, 224, 125, 0); }
    100% { box-shadow: 0 0 0 0 rgba(60, 224, 125, 0); }
}

.hero-secondary-cta:hover {
    transform: translateY(-1px);
    background: rgba(252, 249, 244, 0.18);
    border-color: rgba(252, 249, 244, 0.34);
}

.hero-live-cta:hover {
    transform: none;
}

.hero-secondary-cta:focus {
    outline: 2px solid rgba(252, 249, 244, 0.9);
    outline-offset: 2px;
}

.hero-visual {
    z-index: 3;
    display: flex;
    justify-content: flex-end;
}

.hero-visual-card {
    width: min(420px, 100%);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    transform: none;
    opacity: 1;
    position: relative;
    transition: transform 260ms cubic-bezier(.16,1,.3,1), box-shadow 260ms cubic-bezier(.16,1,.3,1), border-color 260ms ease;
}

/* Gentle continuous float to make the visual feel “alive” */
.hero-visual-card {
    will-change: transform;
}

.hero-visual-card.hero-float {
    animation: heroFloat 10.5s ease-in-out 1.8s infinite;
}

/* Stable page-load animation: hide hero content until body.is-ready, then transition in */
body:not(.is-ready) .hero-content > *,
body:not(.is-ready) .hero-visual-card {
    opacity: 0;
    transform: translateY(10px);
}

body:not(.is-ready) .hero-visual-card {
    transform: translateY(14px) scale(0.99);
}

body.is-ready .hero-content > *,
body.is-ready .hero-visual-card {
    opacity: 1;
    transform: none;
    transition:
        opacity 900ms cubic-bezier(.16,1,.3,1),
        transform 900ms cubic-bezier(.16,1,.3,1);
}

/* Gentle stagger via transition-delay (more reliable than many keyframes) */
body.is-ready .hero-content .hero-kicker { transition-delay: 80ms; }
body.is-ready .hero-content .hero-title { transition-delay: 180ms; }
body.is-ready .hero-content .hero-subtitle { transition-delay: 280ms; }

/* ── Hero Typing Animation cursor ───────────────────────────────────── */
.hero-typing-cursor {
    display: inline-block;
    width: 0.055em;
    height: 0.85em;
    background: rgba(255, 255, 255, 0.85);
    vertical-align: -0.08em;
    margin-left: 0.06em;
    border-radius: 1px;
    animation: heroTypingCursorBlink 0.75s step-end infinite;
}

@keyframes heroTypingCursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}
body.is-ready .hero-content .hero-description { transition-delay: 380ms; }
body.is-ready .hero-content .hero-cta-row { transition-delay: 520ms; }
body.is-ready .hero-visual-card { transition-delay: 300ms; }

/* ── Hero intro-driven content reveal ───────────────────────────────── */
/* Subtitle and CTAs stay hidden until JS adds body.hero-revealed after  */
/* the first typing intro completes. Specificity 0,3,1 beats             */
/* body.is-ready .hero-content > * (0,2,1) so these rules safely win.    */
body:not(.hero-revealed) .hero-content .hero-subtitle,
body:not(.hero-revealed) .hero-content .hero-cta-row {
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: none;
}

body.hero-revealed .hero-content .hero-subtitle {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 750ms cubic-bezier(.16, 1, .3, 1),
                transform 750ms cubic-bezier(.16, 1, .3, 1);
    transition-delay: 60ms;
}

body.hero-revealed .hero-content .hero-cta-row {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 750ms cubic-bezier(.16, 1, .3, 1),
                transform 750ms cubic-bezier(.16, 1, .3, 1);
    transition-delay: 240ms;
}

/* Loop fade: hold transform at none so re-reveal is opacity-only (no repeated slide) */
body.hero-revealed.hero-looping .hero-content .hero-subtitle,
body.hero-revealed.hero-looping .hero-content .hero-cta-row {
    opacity: 0;
    transform: none;
    pointer-events: none;
    transition: opacity 450ms ease;
}

.hero-visual-card::before {
    display: none;
}

.hero-visual-card::after {
    display: none;
}

.hero-visual-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    filter: saturate(1.04) contrast(1.03);
    transform: scale(1);
    transition: transform 380ms cubic-bezier(.16,1,.3,1), filter 380ms cubic-bezier(.16,1,.3,1);
}

/* Hover/focus effect for the right hero card */
.hero-visual-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.38);
    border-color: rgba(252, 249, 244, 0.38);
}

.hero-visual-card:hover::before {
    opacity: 1;
}

.hero-visual-card:hover img {
    transform: scale(1.03);
    filter: saturate(1.08) contrast(1.05);
}

/* Keyboard accessibility: visible focus ring when any child receives focus */
.hero-visual-card:focus-within {
    outline: 3px solid rgba(var(--primary-rgb), 0.65);
    outline-offset: 4px;
}

.hero-visual-caption {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.9rem 1rem 1rem 1rem;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 100%);
}

.hero-visual-pill {
    display: inline-flex;
    width: fit-content;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.95);
}

.hero-visual-caption-text {
    font-size: 0.98rem;
    color: rgba(252, 249, 244, 0.92);
}

.hero-visual-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.hero-visual-feature {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 999px;
    background: rgba(252, 249, 244, 0.12);
    border: 1px solid rgba(252, 249, 244, 0.22);
    backdrop-filter: blur(10px);
    color: rgba(252, 249, 244, 0.94);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.1px;
    user-select: none;
}

.hero-visual-feature i {
    color: rgba(252, 249, 244, 0.95);
}

@media (max-width: 560px) {
    .hero-visual-feature {
        font-size: 0.86rem;
    }
}

.cta-button {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 0.75s forwards;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.4rem 3rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    min-width: 280px;
    white-space: nowrap;
    justify-content: center;
}

.replay-button {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 1001;
    background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
    color: white;
    border: none;
    border-radius: 50px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateY(20px);
}

.replay-button.show {
    opacity: 1;
    transform: translateY(0);
}

.replay-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(211, 109, 91, 0.4);
}

.replay-button i {
    font-size: 0.9rem;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes heroSheen {
    0%, 100% { transform: translate3d(-2%, -1%, 0); opacity: 0.65; }
    50% { transform: translate3d(2%, 1%, 0); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-content-overlay::after {
        animation: none !important;
    }

    .hero-kicker,
    .hero-title,
    .hero-subtitle,
    .hero-description,
    .hero-chips,
    .hero-cta-row,
    .hero-visual-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body:not(.is-ready) .hero-content > *,
    body:not(.is-ready) .hero-visual-card {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero .waitlist-cta-button::after {
        display: none !important;
    }

    .hero-visual-card,
    .hero-visual-card::before,
    .hero-visual-card img {
        transition: none !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width: 980px) {
    .hero-grid {
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
    }

    .hero-content {
        max-width: 720px;
        align-items: center;
        text-align: center;
        margin: 0 auto;
        display: contents; /* This makes children participate in parent flex layout */
    }

    .hero-kicker {
        order: 1;
    }

    .hero-title {
        order: 2;
    }

    .hero-subtitle {
        order: 3;
    }

    .hero-description {
        order: 4;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .hero-chips {
        order: 5;
        justify-content: center;
        align-self: center;
    }

    /* Visual card comes after main content */
    .hero-visual {
        order: 6;
        justify-content: center;
        align-self: center;
    }

    /* Position CTA buttons at the very bottom */
    .hero-cta-row {
        order: 7;
        margin-top: 1.5rem;
        align-self: center;
        width: 100%;
        max-width: 720px;
    }
}

@media (max-width: 560px) {
    .hero-container {
        padding:
            calc(clamp(5.4rem, 7.2vh, 6.2rem) + var(--safe-top))
            calc(1rem + var(--safe-right))
            calc(1.1rem + var(--safe-bottom))
            calc(1rem + var(--safe-left));
    }

    .hero-grid {
        gap: 1.25rem;
    }

    .hero-title {
        font-size: 1.85rem;
        line-height: 1.15;
        letter-spacing: -0.01em;
    }

    .hero-subtitle {
        font-size: 1.05rem;
        margin-bottom: 0.75rem;
    }

    .hero-description {
        font-size: 0.95rem;
        line-height: 1.55;
        margin-bottom: 1.25rem;
    }

    .hero-kicker {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    .hero-chip {
        font-size: 0.82rem;
        padding: 0.5rem 0.7rem;
    }

    .hero-chips {
        gap: 0.45rem;
        margin-bottom: 1.25rem;
    }

    .hero-cta-row {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
        order: 10;
        margin-top: 1.25rem;
    }

    .hero .waitlist-cta-button {
        min-width: unset;
        width: 100%;
        justify-content: center;
        padding: 0.85rem 1.25rem;
        font-size: 0.88rem;
    }

    .hero-secondary-cta {
        width: 100%;
        justify-content: center;
    }

    .hero-visual-card {
        width: 100%;
        border-radius: 16px;
    }

    .hero-visual-card img {
        height: 180px;
    }

    .hero-visual-caption {
        padding: 0.75rem 0.85rem 0.85rem;
    }

    .hero-visual-pill {
        font-size: 0.75rem;
        padding: 0.28rem 0.55rem;
    }

    .hero-visual-caption-text {
        font-size: 0.88rem;
    }

    .hero-visual-features {
        gap: 0.4rem;
        margin-top: 0.6rem;
    }

    .hero-visual-feature {
        font-size: 0.78rem;
        padding: 0.4rem 0.55rem;
        gap: 0.4rem;
    }

    .hero-visual-feature i {
        font-size: 0.75rem;
    }
}

/* Avoid iOS Safari zooming inputs on focus (requires >=16px font-size). */
@media (max-width: 560px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

/* Buttons */
.cta-button.primary {
    background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
    color: white;
}

.cta-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(211, 109, 91, 0.4);
}

.cta-button.primary:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.cta-button.secondary {
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.cta-button.secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 184, 96, 0.4);
    background: var(--primary-color);
    color: white;
}

.cta-button.secondary:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Sections */
.section {
    padding: var(--section-pad-top) 0 var(--section-pad);
}

/* Dark sections get a lighter separator line */
.section--dark {
    border-top-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 560px) {
    .section {
        padding: 3rem 0;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    .section-header h2 {
        font-size: 1.9rem;
        line-height: 1.1;
    }
}

/* Explicit section background utilities (replaces nth-of-type alternation) */
.section--white  { background: #FFFFFF; }
.section--off    { background: #F9F8F7; }
.section--dark   { background: #0A0A0A; color: #ffffff; }

/* Default section background, warm off-white, consistent with all light sections */
.section { background: #F9F8F7; }



.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* Uppercase kicker label above section headings, Cowboy/Eight Sleep pattern */
.section-kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary-text);
    margin-bottom: 0.75rem;
}
.section--dark .section-kicker {
    color: rgba(255,255,255,0.5);
}

.section-header h2 {
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 1rem;
    letter-spacing: -0.04em;
    line-height: 1;
    max-width: 23ch;
    margin-left: auto;
    margin-right: auto;
}

.section-divider {
    display: none;
}

/* =============================================
   SCROLL-DRIVEN ASSEMBLY REVEAL SECTION
   ============================================= */

/* Outer scroll container, 180 vh: scrub distance + small dwell margin on hotspot dots */
.scroll-assembly {
    position: relative;
    height: 180vh;
    background: #FFFFFF;
    --assembly-progress: 0;
    z-index: 20;
}

/* Sticky inner viewport */
.scroll-assembly__sticky {
    position: sticky;
    top: 100px;
    width: 100%;
    height: calc(100vh - 100px);
    height: calc(100dvh - 100px); /* dynamic viewport height for mobile browsers */
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1;
    z-index: 30;
    overflow: visible;
}

/* ── Intro label (normal flow, above video, styled like other sections) ── */
.scroll-assembly__intro {
    flex-shrink: 0;
    padding: clamp(2rem, 4.5vh, 3.5rem) clamp(1.5rem, 5vw, 5rem) clamp(1rem, 2vh, 1.5rem);
    text-align: center;
    opacity: 1;
    transform: none;
}

.scroll-assembly__kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary-text);
    margin-bottom: 0.75rem;
}

.scroll-assembly__title {
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text-color, #0A0A0A);
    margin: 0;
}

/* ── Media area: fills remaining height, holds video + hotspot dots ── */
.scroll-assembly__media {
    position: relative;
    flex: 1;
    min-height: 0;
    contain: layout style paint;
    will-change: transform;
    transform: translateZ(0) scale(calc(0.987 + (var(--assembly-progress) * 0.013)));
    visibility: visible;
    opacity: 1;
}

/* Canvas, always fully visible inside media area. Intrinsic bitmap = frame
   resolution; object-fit:contain letterboxes it exactly like the old video. */
.scroll-assembly__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    will-change: unset;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-transform: translate3d(0, 0, 0);
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
}

/* Static poster: covers the canvas until frames are drawn, and stays as the
   fallback for no-JS / load-failure / reduced-motion. Fades out once ready. */
.scroll-assembly__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease;
    z-index: 35;
}

.scroll-assembly.is-ready .scroll-assembly__poster {
    opacity: 0;
}

/* Hotspot overlay, covers exact same area as video */
.scroll-assembly__hotspots {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.2,.7,.2,1);
    will-change: opacity;
    transform: translateZ(0) scale(0.985);
    -webkit-transform: translate3d(0, 0, 0);
    overflow: visible;
    z-index: 40;
}

.scroll-assembly__hotspots.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateZ(0) scale(1);
}

/* progress bar removed */

/* ── Hotspot dots ────────────────────────────── */
.hotspot-dot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(224, 122, 58, 0.15);
    border: 2px solid var(--accent-orange, #E07A3A);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    outline: none;
}

.hotspot-dot:hover,
.hotspot-dot:focus-visible {
    background: rgba(224, 122, 58, 0.28);
    border-color: var(--accent-orange, #E07A3A);
    transform: translate(-50%, -50%) scale(1.15);
}

.hotspot-dot.is-active {
    background: rgba(224, 122, 58, 0.25);
    border-color: var(--accent-orange, #E07A3A);
}

/* Pulsing ring animation — all dots on desktop */
.hotspot-dot__pulse {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px solid rgba(224, 122, 58, 0.5);
    animation: hotspot-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

.hotspot-dot__ring {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 1px solid rgba(224, 122, 58, 0.25);
    animation: hotspot-pulse 2.4s ease-out 0.6s infinite;
    pointer-events: none;
}

@keyframes hotspot-pulse {
    0%   { opacity: 0.8; transform: scale(0.85); }
    60%  { opacity: 0;   transform: scale(1.4);  }
    100% { opacity: 0;   transform: scale(1.4);  }
}

/* Centre dot inner circle — orange on desktop */
.hotspot-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-orange, #E07A3A);
    flex-shrink: 0;
    transition: background 0.25s ease;
}

/* ── Hotspot tooltip ─────────────────────────── */
.hotspot-tooltip {
    position: absolute;
    z-index: 2000;
    background: rgba(10, 10, 10, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    max-width: 260px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    transition: opacity 0.22s ease, transform 0.22s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.hotspot-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.hotspot-tooltip__title {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
}

.hotspot-tooltip__desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin: 0;
}

/* Mobile feature strip — hidden on desktop, shown inside the 768px breakpoint */
.hotspot-feature-strip {
    display: none;
}

/* ── Responsive tweaks ───────────────────────── */
@media (max-width: 768px) {
    .scroll-assembly__sticky {
        top: 60px;
        height: auto; /* size to content so no empty space below the product */
        min-height: 0;
    }

    .scroll-assembly {
        height: calc(150vh + var(--assembly-tooltip-space, 0px));
        overflow: visible;
    }

    .scroll-assembly.has-tooltip-space {
        --assembly-tooltip-space: var(--tooltip-open-space, clamp(9rem, 30vw, 13rem));
    }

    .scroll-assembly__intro {
        padding: 0.75rem 1.25rem 0.75rem;
    }

    /* Square frames on mobile: keep them centred in the 1:1 well */
    .scroll-assembly__canvas,
    .scroll-assembly__poster {
        object-position: center center;
    }

    /* Mobile: smaller size, grey+inactive / orange+pulse-active */
    .hotspot-dot {
        width: 28px;
        height: 28px;
        background: rgba(120, 120, 120, 0.12);
        border-color: rgba(120, 120, 120, 0.5);
        transform: translate(-50%, -50%);
    }

    .hotspot-dot:hover,
    .hotspot-dot:focus-visible {
        transform: translate(-50%, -50%) scale(1.15);
    }

    .hotspot-dot::after {
        width: 6px;
        height: 6px;
        background: rgba(120, 120, 120, 0.6);
    }

    .hotspot-dot__pulse,
    .hotspot-dot__ring {
        animation: none;
        opacity: 0;
    }

    .hotspot-dot.is-active {
        background: rgba(224, 122, 58, 0.15);
        border-color: var(--accent-orange, #E07A3A);
    }

    .hotspot-dot.is-active::after {
        background: var(--accent-orange, #E07A3A);
    }

    .hotspot-dot.is-active .hotspot-dot__pulse {
        animation: hotspot-pulse 2.4s ease-out infinite;
        opacity: 1;
    }

    .hotspot-dot.is-active .hotspot-dot__ring {
        animation: hotspot-pulse 2.4s ease-out 0.6s infinite;
        opacity: 1;
    }

    /* Hide floating tooltip on mobile — feature strip replaces it */
    .hotspot-tooltip {
        display: none !important;
    }

    /* Default mobile state: full-width square well (matches the 1:1 square video). */
    .scroll-assembly__media {
        flex: none;
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        contain: style;
        overflow: visible;
        transition: padding-bottom 220ms ease;
    }

    /* Reserve space only while a mobile tooltip is open. */
    .scroll-assembly__media.has-tooltip-space {
        padding-bottom: 0; /* tooltip hidden on mobile; strip is in normal flow */
    }

    /* ── Mobile feature strip ───────────────────────────────────────────────── */
    .hotspot-feature-strip {
        display: block;
        width: 100%;
        padding: 0.6rem 1rem 0.25rem;
        box-sizing: border-box;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .hotspot-feature-strip.is-visible {
        opacity: 1;
    }

    .hotspot-feature-strip__card {
        background: rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        padding: 0.85rem 1.1rem;
        margin-bottom: 0.6rem;
        height: 5.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }

    .hotspot-feature-strip__title {
        display: block;
        font-size: 0.875rem;
        font-weight: 700;
        color: #0A0A0A;
        margin-bottom: 0.2rem;
    }

    .hotspot-feature-strip__desc {
        font-size: 0.8rem;
        color: rgba(0, 0, 0, 0.6);
        line-height: 1.5;
        margin: 0;
    }

    .hotspot-feature-strip__nav {
        display: flex;
        justify-content: center;
        gap: 0.55rem;
    }

    .hotspot-strip-pip {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.2);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background 0.25s, transform 0.25s;
        -webkit-tap-highlight-color: transparent;
    }

    .hotspot-strip-pip.is-active {
        background: var(--accent-orange, #E07A3A);
        transform: scale(1.35);
    }
}

@media (max-width: 560px) {
    .scroll-assembly {
        height: calc(120vh + var(--assembly-tooltip-space, 0px)); /* reduce scroll distance on small phones */
    }
}

@media (prefers-reduced-motion: reduce) {
    .hotspot-dot__pulse,
    .hotspot-dot__ring {
        animation: none;
        opacity: 0;
    }

    .scroll-assembly__canvas,
    .scroll-assembly__poster,
    .scroll-assembly__hotspots,
    .scroll-assembly__intro,
    .hotspot-tooltip {
        transition: none;
    }
}

/* =============================================
   STATS BAND
   ============================================= */
.stats-band {
    background: #0A0A0A;
    padding: clamp(3rem, 5vw, 5rem) 0;
}

.stats-band__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 1rem;
    justify-content: space-around;
    align-items: flex-start;
}

.stats-band__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 200px;
    max-width: 280px;
}

.stats-band__number {
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.6rem;
}

.stats-band__item--highlight .stats-band__number {
    color: #E07A3A;
}

.stats-band__label {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
    max-width: 18ch;
}

@media (max-width: 560px) {
    .stats-band__item {
        flex-basis: calc(50% - 1rem);
        max-width: none;
    }

    .stats-band__number {
        font-size: 2.25rem;
    }
}

/* What is Lumova */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 3rem;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(244, 184, 96, 0.3);
}

.feature-icon i {
    font-size: 3rem;
    color: white;
}

.feature-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--secondary-text);
}

/* Why It Matters */
.bright-bg {
    background: linear-gradient(135deg, var(--background-color), rgba(175, 195, 161, 0.1));
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.benefit-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 0;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    perspective: 1000px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.benefit-card:hover {
    transform: translateY(-10px) rotateY(5deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.benefit-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.benefit-card:hover .benefit-card-inner {
    transform: rotateX(10deg);
}

.benefit-card-front {
    position: relative;
    backface-visibility: hidden;
    transition: opacity 0.6s ease;
}

.benefit-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-card:hover .benefit-card-front {
    opacity: 0;
}

.benefit-card:hover .benefit-card-back {
    opacity: 1;
    transform: translateY(0);
}

.benefit-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: transform 0.3s ease;
}

.benefit-card:hover .benefit-icon {
    transform: scale(0.8);
}

/* Benefit icon colors */
.benefit-icon.wellbeing {
    background: #F0EFEE;
}

.benefit-icon.cognition {
    background: #EBEBEB;
}

.benefit-icon.joy {
    background: #F5F5F5;
}

.benefit-icon.personalized {
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
}

.benefit-icon i {
    font-size: 2rem;
    color: white;
}

/* Benefits List */
.benefits-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.benefit-item:hover {
    transform: translateY(-3px);
}

.benefit-icon-small {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-icon-small i {
    font-size: 1.2rem;
    color: white;
}

.benefit-item p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--secondary-text);
}

/* How It Works */
.steps-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.step {
    text-align: center;
    flex: 1;
    min-width: 250px;
    position: relative;
}

.step-number {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.step-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 25px rgba(175, 195, 161, 0.4);
}

.step-icon i {
    font-size: 2.5rem;
    color: white;
}

.step h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.step p {
    color: var(--secondary-text);
    line-height: 1.6;
}

.step-arrow {
    font-size: 2rem;
    color: var(--secondary-color);
}



/* Enhanced Team Section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
    justify-content: center;
    justify-items: center;
}

.team-card {
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 280px;
}

/* Ensure all text inside team cards is dark for readability */
#team .team-card,
#team .team-card * {
    color: var(--text-color) !important;
}

.team-card::before {
    display: none;
}

.team-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    overflow: hidden;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-avatar.placeholder {
    background: linear-gradient(135deg, #e9ecef, #dee2e6);
    color: #6c757d;
}

.team-avatar.placeholder i {
    font-size: 3rem;
}

.team-card h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 600;
}

.team-role {
    color: var(--secondary-color);
    font-weight: 500;
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.team-affiliation {
    color: var(--secondary-text);
    font-size: 0.9rem;
    margin: 0 0 1.5rem 0;
}

.linkedin-link, .linkedin-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: white; /* white LinkedIn button per request */
    color: var(--text-color);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.18s ease;
    border: 1px solid rgba(0,0,0,0.06);
}

.linkedin-link:hover {
    background: rgba(0,0,0,0.06);
    transform: scale(1.06);
}

.linkedin-placeholder {
    background: #f3f4f6;
    color: #6c757d;
}

:root[data-theme="dark"] .linkedin-link {
    background: #0A66C2;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}

:root[data-theme="dark"] .linkedin-link i {
    color: #fff;
}

:root[data-theme="dark"] .linkedin-link:hover {
    background: #0c77e8;
}

.team-card.coming-soon {
    background: linear-gradient(135deg, var(--background-color), #f0f0f0);
    border: 2px dashed #dee2e6;
}

/* Case Studies Section */
.case-studies-section {
    padding: var(--section-pad-top) 0 clamp(1.5rem, 2.5vw, 2.5rem);
    background: #fff;
    color: var(--text-color);
}

/* Outer container: keep it full-width but avoid centering children in a way that breaks the grid */
.case-studies-section .case-studies-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Horizontal, clean card grid (matches reference layout intent) */
.case-studies-section .case-feed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    align-items: start;
    width: 100%;
}

/* Each case becomes a “card” */
.case-studies-section .case-video {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* Video frame: consistent aspect ratio + rounded corners */
.case-studies-section .case-video .video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    background: #000;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
    position: relative; /* anchor overlay UI */
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.case-studies-section .case-video .video-wrapper video,
.case-studies-section .case-video .video-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    object-fit: cover;
    object-position: center center;
}

/* YouTube thumbnail image (shows before iframe is injected) */
.case-studies-section .case-video .case-video-thumb {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transform: scale(1);
    transition: transform 220ms ease, filter 220ms ease;
}

/* If/when we inject an iframe, it should cover the full frame */
.case-studies-section .case-video .video-wrapper iframe {
    position: absolute;
    inset: 0;
}

/* Overlay UI (play button + duration) */
.case-studies-section .case-video .case-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 0;
    background: var(--accent-orange, #E07A3A);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.case-studies-section .case-video .case-video-play::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 16px; /* triangle */
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;
}

.case-studies-section .case-video .case-video-duration {
    position: absolute;
    left: 84px;
    bottom: 26px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
    z-index: 2;
    transition: transform 180ms ease, opacity 180ms ease;
}

.case-studies-section .case-video.is-playing .case-video-play,
.case-studies-section .case-video.is-playing .case-video-duration {
    opacity: 0;
    pointer-events: none;
}

.case-studies-section .case-video.is-playing .case-video-thumb {
    opacity: 0;
    pointer-events: none;
}

/* Ensure iframe is visible and interactive when playing */
.case-studies-section .case-video.is-playing .video-wrapper iframe {
    z-index: 3;
}

/* Mobile-specific: ensure video wrapper maintains proper dimensions on touch devices */
@media (max-width: 768px) {
    .case-studies-section .case-video .video-wrapper {
        /* Ensure the wrapper doesn't collapse on mobile */
        min-height: 200px;
        /* Force GPU acceleration for smoother rendering */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    .case-studies-section .case-video .video-wrapper iframe {
        /* Ensure iframe covers full area on mobile */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
    
    /* Larger play button on mobile for easier tapping */
    .case-studies-section .case-video .case-video-play {
        width: 60px;
        height: 60px;
    }
    
    .case-studies-section .case-video .case-video-duration {
        left: 88px;
        bottom: 22px;
        font-size: 1.1rem;
    }
}

.case-studies-section .case-video .case-video-play:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb), 0.8);
    outline-offset: 3px;
}

/* Hover effects: subtle lift + richer shadow + slight thumbnail zoom */
.case-studies-section .case-video:hover .video-wrapper {
    transform: translateY(-6px);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.12);
}

.case-studies-section .case-video:hover .case-video-thumb {
    transform: scale(1.03);
    filter: saturate(1.05) contrast(1.02);
}

.case-studies-section .case-video:hover .case-video-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #c8622a;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.2);
}

.case-studies-section .case-video:hover .case-video-duration {
    transform: translateY(-1px);
}

/* Disable hover effects on touch devices for better mobile experience */
@media (hover: none) and (pointer: coarse) {
    .case-studies-section .case-video:hover .video-wrapper {
        transform: none;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
    }

    .case-studies-section .case-video:hover .case-video-thumb {
        transform: scale(1);
        filter: saturate(1.02) contrast(1.02);
    }

    .case-studies-section .case-video:hover .case-video-play {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    }

    .case-studies-section .case-video:hover .case-video-duration {
        transform: none;
    }
}

/* Caption (use current title text as the caption, below the video) */
.case-studies-section .case-caption {
    margin: 0;
    text-align: left;
}

.case-studies-section .case-caption-name {
    font-family: var(--heading-font);
    font-weight: 500; /* softer (no bold), per request */
    color: rgba(0, 0, 0, 0.88);
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: -0.2px;
    max-width: 30ch; /* wrap a bit earlier, closer to reference */
}

@media (max-width: 900px) {
    .case-studies-section .case-feed {
        gap: 1.5rem;
    }
    .case-studies-section .case-caption-name {
        font-size: 1.25rem;
    }
}

@media (max-width: 560px) {
    .case-studies-section .case-studies-container {
        padding: 1rem;
    }

    .case-studies-section .case-feed {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .case-studies-section .case-video .video-wrapper {
        border-radius: 12px;
        /* Ensure proper touch handling on mobile */
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .case-studies-section .case-video .video-wrapper iframe {
        /* Ensure iframe is properly positioned on mobile */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .case-studies-section .case-video .case-video-play {
        width: 62px;
        height: 62px;
        /* Better touch target on mobile */
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .case-studies-section .case-video .case-video-play::before {
        border-width: 10px 0 10px 16px; /* slightly larger triangle for mobile */
    }

    .case-studies-section .case-video .case-video-duration {
        left: 88px;
        bottom: 26px;
        font-size: 1.05rem;
    }

    .case-studies-section .case-caption-name {
        font-size: 1.15rem;
    }
}

/* Extra mobile support for very small screens */
@media (max-width: 400px) {
    .case-studies-section .case-video .case-video-play {
        width: 56px;
        height: 56px;
    }

    .case-studies-section .case-video .case-video-play::before {
        border-width: 8px 0 8px 13px;
    }

    .case-studies-section .case-video .case-video-duration {
        left: 78px;
        bottom: 22px;
        font-size: 1rem;
    }
}

/* Concept Summary styles */
.concept-section .concept-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.concept-section .concept-block {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.concept-section .concept-list {
    margin-left: 1rem;
    color: var(--secondary-text);
}

@media (max-width: 900px) {
    .concept-section .concept-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── FAQ styles ─────────────────────────────────────────────────────────── */
.faq-section {
    position: relative;
}

.faq-intro {
    text-align: center;
    margin-bottom: 2rem;
}
.faq-intro h2 {
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--text-color);
    margin: 0 auto 0.75rem;
}

/* Accordion list */
.faq-list {
    max-width: 720px;
    margin: 0 auto;
    display: block;
}

.faq-item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Remove native <details> triangle */
.faq-details > summary {
    list-style: none;
}
.faq-details > summary::-webkit-details-marker {
    display: none;
}

.faq-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 0;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.faq-summary-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
    transition: color 0.2s ease;
    flex: 1;
}

/* Only .is-open drives color — not [open] — so color fades on close immediately */
.faq-details.is-open .faq-summary-text {
    color: #B8722B;
}

/* The +/× toggle icon */
.faq-summary-toggle {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

.faq-details.is-open .faq-summary-toggle {
    transform: rotate(45deg);
    color: #B8722B;
}

/*
  Grid-row trick: transitions from exact 0 to exact content height in both
  directions — perfectly smooth, no max-height hack, no closing lag.
*/
.faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-details.is-open .faq-panel {
    grid-template-rows: 1fr;
}

.faq-panel-inner {
    overflow: hidden;
    min-height: 0;
}

.faq-answer {
    margin: 0;
    padding-bottom: 1rem;
    color: var(--secondary-text);
    font-size: 0.95rem;
    line-height: 1.78;
}

/* Inline CTA in last FAQ answer */
.faq-answer .waitlist-cta-button {
    margin-top: 0.85rem;
}

.faq-answer a.waitlist-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.faq-answer a {
    color: var(--text-color);
    font-weight: 600;
    text-decoration: underline;
}

.faq-answer a.waitlist-cta-button,
.faq-answer .waitlist-cta-button {
    color: white !important;
    text-decoration: none !important;
}

.faq-answer a.waitlist-cta-button:hover,
.faq-answer .waitlist-cta-button:hover {
    text-decoration: none !important;
}

.faq-answer a:hover {
    text-decoration: underline;
}

/* Keyboard focus */
.faq-summary:focus-visible {
    outline: 2px solid rgba(244, 184, 96, 0.7);
    outline-offset: 3px;
    border-radius: 3px;
}

@media (max-width: 560px) {
    .faq-summary {
        padding: 1rem 0;
        gap: 0.85rem;
    }

    .faq-summary-text {
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-summary-toggle,
    .faq-panel {
        transition: none;
    }
}


/* Case-text panel was removed from the page; legacy styles deleted. */

/* CTA Section */
.cta-section {
    /* Dark CTA block; buttons provide the orange accent */
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-dark-2) 100%);
    color: white;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: white;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-content .cta-button {
    margin: 0 1rem;
}

/* Footer */
.footer {
    background: var(--text-color);
    color: white;
    padding: 4rem 0 0 0;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

@media (max-width: 980px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 560px) {
    .footer {
        padding: 3rem 0 0 0;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-nav {
        grid-template-columns: 1fr;
        row-gap: 0.6rem;
    }

    .footer-contact-item a {
        white-space: normal;
        word-break: break-word;
    }
}

/* Improve the demo-map layout specifically on smaller screens */
@media (max-width: 900px) {
    .demo-map-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .demo-map {
        min-height: 300px;
    }
}

@media (max-width: 560px) {
    .demo-map {
        min-height: 320px;
    }

    .demo-map-search {
        width: 100%;
    }
}

.footer-brand {
    max-width: 300px;
}

.footer-logo {
    height: 50px;
    width: auto;
    max-width: 200px;
    margin-bottom: 1rem;
    object-fit: contain;
    object-position: left center;
}

.footer-brand p {
    opacity: 0.9;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.footer-description {
    opacity: 0.7;
    font-size: 0.9rem;
    line-height: 1.5;
}

.footer-links-section h4,
.footer-contact h4,
.footer-social h4 {
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-family: var(--heading-font);
}

.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Schnelllinks: render as 2 columns for better scanability */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 0.8rem;
}

.footer-nav li {
    margin-bottom: 0;
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    display: block;
}

.footer-nav a:hover {
    color: #FFFFFF;
    opacity: 0.75;
}

/* Footer waitlist button: white pill on dark footer */
.footer .waitlist-cta-button {
    margin-left: 0;
    background: var(--accent-orange, #E07A3A);
    color: white !important;
}

.footer .waitlist-cta-button:hover {
    background: #c8622a;
    box-shadow: 0 8px 24px rgba(224, 122, 58, 0.35);
}

.footer .waitlist-cta-button i,
.footer .waitlist-cta-button span {
    color: white !important;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.footer-contact-item i {
    color: rgba(255, 255, 255, 0.6);
    width: 16px;
    text-align: center;
    margin-top: 0.2em;
}

.footer-contact-item a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.footer-contact-item a:hover {
    color: #FFFFFF;
}

.footer-contact-item span {
    color: rgba(255, 255, 255, 0.8);
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.social-links a:first-child {
    background: #25D366;
    color: #fff;
}

.social-links a:first-child:hover {
    background: #1ebe57;
}

.social-links a:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem 0;
}

/* Waitlist form styles */
.waitlist-form-container {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 2rem 0;
}
.waitlist-form-container form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.waitlist-form-container input[type="email"] {
    padding: 0.75rem 1rem;
    border-radius: 30px;
    border: 1px solid rgba(0,0,0,0.08);
    min-width: 240px;
    font-size: 1rem;
}
.waitlist-submit {
    padding: 0.75rem 1.25rem;
    background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
}
.waitlist-submit:disabled {
    opacity: 0.6;
    cursor: default;
}
.waitlist-message {
    margin-left: 1rem;
    font-size: 0.95rem;
    color: var(--text-color);
}
.waitlist-message[data-kind="error"] {
    color: #b42318;
}
.waitlist-message[data-kind="success"] {
    color: #067647;
}
.waitlist-message[data-kind="info"] {
    color: var(--secondary-text);
}

/* Waitlist modal (email capture) */
.waitlist-modal[hidden] {
    display: none;
}
.waitlist-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}
.waitlist-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    animation: waitlistBackdropIn 200ms ease-out forwards;
}
.waitlist-modal[hidden] .waitlist-modal-dialog,
.waitlist-modal[hidden] .waitlist-modal-backdrop {
    animation: none;
}
.waitlist-modal-dialog {
    position: relative;
    width: min(480px, 100%);
    max-height: 90dvh; /* prevent overflow on landscape mobile */
    overflow-x: hidden;
    overflow-y: auto;
    background: #FFFFFF;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.13);
    z-index: 1;
    opacity: 0;
    transform: translateY(10px) scale(0.975);
    animation: waitlistModalIn 260ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes waitlistModalIn {
    from { opacity: 0; transform: translateY(14px) scale(0.970); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes waitlistModalOut {
    from { opacity: 1; transform: translateY(0)    scale(1); }
    to   { opacity: 0; transform: translateY(10px) scale(0.975); }
}
@keyframes waitlistBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes waitlistBackdropOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.waitlist-modal-closing .waitlist-modal-dialog {
    animation: waitlistModalOut 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.waitlist-modal-closing .waitlist-modal-backdrop {
    animation: waitlistBackdropOut 220ms ease-in forwards;
}

/* Close button */
.waitlist-modal-close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--surface-2);
    color: var(--secondary-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: background 150ms ease, color 150ms ease;
    z-index: 2;
}
.waitlist-modal-close:hover {
    background: var(--surface-3);
    color: var(--text-color);
}
.waitlist-modal-close:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
}

/* Content block */
.waitlist-modal-content {
    padding: 2rem 2rem 0 2rem;
}
.waitlist-modal-eyebrow {
    display: inline-block;
    font-family: var(--body-font);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent-orange);
    margin-bottom: 0.6rem;
}
.waitlist-modal-title {
    margin: 0 0 0.7rem 0;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-color);
    font-family: var(--heading-font);
    line-height: 1.1;
    letter-spacing: -0.035em;
    padding-right: 2.5rem;
}
.waitlist-modal-description {
    margin: 0;
    color: var(--secondary-text);
    font-size: 0.9rem;
    line-height: 1.65;
}

/* Form area */
.waitlist-modal-form-container {
    padding: 1.4rem 2rem 0 2rem;
}
.waitlist-modal-form-container form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.waitlist-modal-form-container input[type="email"] {
    width: 100%;
    padding: 0.82rem 1.1rem;
    border-radius: 12px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    background: var(--surface-1);
    color: var(--text-color);
    font-family: var(--body-font);
    font-size: 1rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-shadow: none;
}
.waitlist-modal-form-container input[type="email"]::placeholder {
    color: var(--secondary-text);
    opacity: 0.6;
}
.waitlist-modal-form-container input[type="email"]:focus {
    outline: none;
    border-color: rgba(224, 122, 58, 0.7);
    box-shadow: 0 0 0 3px rgba(224, 122, 58, 0.15);
}
.waitlist-modal-form-container .waitlist-submit {
    width: 100%;
    padding: 0.87rem 1.5rem;
    background: var(--text-color);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-family: var(--heading-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: opacity 150ms ease, transform 150ms ease;
    box-shadow: none;
}
.waitlist-modal-form-container .waitlist-submit:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}
.waitlist-modal-form-container .waitlist-submit:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
}
.waitlist-modal-form-container .waitlist-submit:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}
.waitlist-modal-form-container .waitlist-message {
    width: 100%;
    text-align: center;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    line-height: 1.5;
}
.waitlist-message:empty {
    display: none;
}
.waitlist-modal-form-container .waitlist-message[data-kind="error"] {
    background: rgba(180, 35, 24, 0.07);
    border: 1px solid rgba(180, 35, 24, 0.15);
    color: #b42318;
}
.waitlist-modal-form-container .waitlist-message[data-kind="success"] {
    background: rgba(6, 118, 71, 0.07);
    border: 1px solid rgba(6, 118, 71, 0.15);
    color: #067647;
}
.waitlist-modal-form-container .waitlist-message[data-kind="info"] {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    color: var(--secondary-text);
}

/* Trust row */
.waitlist-modal-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.45rem;
    padding: 1rem 2rem 0 2rem;
    font-size: 0.7rem;
    color: var(--secondary-text);
    font-family: var(--body-font);
}
.waitlist-modal-trust > span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}
.waitlist-modal-trust i {
    font-size: 0.58rem;
}
.waitlist-modal-trust-sep {
    opacity: 0.25;
}

/* Privacy line */
.waitlist-modal-privacy {
    margin: 0;
    padding: 0.45rem 2rem 1.75rem 2rem;
    font-size: 0.72rem;
    color: var(--secondary-text);
    text-align: center;
    line-height: 1.5;
    opacity: 0.6;
}
.waitlist-modal-privacy a {
    color: var(--secondary-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.waitlist-modal-privacy a:hover {
    color: var(--text-color);
    opacity: 1;
}

body.waitlist-modal-open {
    overflow: hidden;
}

/* Dark mode — slightly elevated surface */
:root[data-theme="dark"] .waitlist-modal-dialog {
    background: var(--surface-1);
    border-color: var(--border-soft);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] .waitlist-modal-form-container input[type="email"] {
    background: var(--surface-2);
    border-color: var(--border-soft);
    color: var(--text-color);
}

/* Back to top button (bottom-right with scroll progress) */
.back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(18, 18, 18, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 999;

    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
}

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

.back-to-top:focus-visible {
    outline: 3px solid rgba(244, 184, 96, 0.95);
    outline-offset: 3px;
}

.back-to-top-icon {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-1px);
}

.back-to-top-progress {
    position: absolute;
    inset: 0;
    width: 52px;
    height: 52px;
    transform: rotate(-90deg);
}

.back-to-top-track,
.back-to-top-bar {
    fill: none;
    stroke-width: 4;
}

.back-to-top-track {
    stroke: rgba(255, 255, 255, 0.18);
}

.back-to-top-bar {
    stroke: rgba(244, 184, 96, 0.95);
    stroke-linecap: round;
    /* JS will set dasharray + dashoffset */
    stroke-dasharray: 0 1000;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: none;
    }
    .back-to-top-bar {
        transition: none;
    }
}

/* Back to top mobile adjustments */
@media (max-width: 560px) {
    .back-to-top {
        right: 12px;
        bottom: calc(76px + var(--safe-bottom)); /* sit above the chat launcher */
        width: 44px;
        height: 44px;
    }

    .back-to-top-progress {
        width: 44px;
        height: 44px;
    }

    .back-to-top-icon {
        font-size: 15px;
    }
}


:root[data-theme="dark"] #case-studies {
    background: linear-gradient(180deg, rgba(7, 11, 15, 0.96) 0%, rgba(15, 21, 27, 0.84) 100%);
}

:root[data-theme="dark"] .demo-map {
    filter: saturate(1.14) contrast(1.03) brightness(1.1);
}

:root[data-theme="dark"] .leaflet-tile-pane {
    filter: brightness(1.14) contrast(1.04) saturate(1.16);
}

:root[data-theme="dark"] .leaflet-control-zoom a,
:root[data-theme="dark"] .leaflet-control-attribution {
    background: rgba(22, 28, 34, 0.95);
    color: #f0e9df;
    border-color: var(--border-soft);
}

:root[data-theme="dark"] .leaflet-control-attribution a {
    color: #f7f1e8;
}

:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip {
    background: var(--surface-2);
    color: var(--text-color);
}

:root[data-theme="dark"] .popup-title {
    color: var(--text-color);
}

:root[data-theme="dark"] .popup-address {
    color: var(--secondary-text);
}

/* Simple CTA row blocks */
.hero-cta-row {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
}
.section-cta-row {
    margin-top: 2.25rem;
    display: flex;
    justify-content: center;
}
/* All waitlist buttons share the same `.waitlist-cta-button` styles */

@media (max-width: 560px) {
    .waitlist-form-container input[type="email"] {
        min-width: 0;
        width: 100%;
    }
    .waitlist-modal-dialog {
        padding: 1.25rem 1.1rem 1rem 1.1rem;
        margin: 0.5rem;
    }
    .waitlist-modal-header {
        padding: 1rem 0.9rem 0.9rem 0.9rem;
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
    .waitlist-modal-icon {
        margin: 0 auto;
    }
    .waitlist-modal-title {
        font-size: 1.35rem;
    }
    .waitlist-modal-description {
        font-size: 0.92rem;
    }
    .waitlist-modal-form-container form {
        flex-direction: column;
        gap: 0.75rem;
    }
    .waitlist-modal-form-container input[type="email"] {
        width: 100%;
        text-align: center;
    }
    .waitlist-submit {
        width: 100%;
    }
    .waitlist-modal-privacy {
        font-size: 0.82rem;
    }
}
.visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom-left p {
    opacity: 0.7;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-bottom-right a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-bottom-right a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.footer-bottom-right span {
    color: rgba(255, 255, 255, 0.5);
}

/* Why Lumova - Merged Section Styles */
.why-subsection {
    margin-bottom: 4rem;
    padding: 3rem 0;
    position: relative;
}

.why-subsection:not(:last-child) {
    border-bottom: 1px solid rgba(175, 195, 161, 0.2);
}

.subsection-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 2.5rem;
    text-align: center;
    font-family: var(--heading-font);
    position: relative;
}

.subsection-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

/* Bright background for proven results subsection */
.bright-bg-inner {
    background: linear-gradient(135deg, var(--background-color), rgba(175, 195, 161, 0.1));
    border-radius: 20px;
    padding: 3rem 2rem;
    margin: 2rem 0;
}

/* Care Homes Content - Enhanced for merged section */
.care-homes-content {
    max-width: 1000px;
    margin: 0 auto;
}

.built-items-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.built-item {
    text-align: center;
    padding: 2rem 1.5rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.built-item:hover {
    transform: translateY(-5px);
}

.built-item i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.built-item p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--secondary-text);
    text-align: center;
}

/* Stakeholder Trust within Care Homes subsection */
.stakeholder-trust {
    background: white;
    border-radius: 20px;
    padding: 3rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.stakeholder-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 2rem;
    text-align: center;
    font-family: var(--heading-font);
}

.stakeholder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.stakeholder-trust-item {
    text-align: center;
    padding: 1.5rem;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--background-color), rgba(175, 195, 161, 0.05));
    transition: transform 0.3s ease;
}

.stakeholder-trust-item:hover {
    transform: translateY(-3px);
}

.stakeholder-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: white;
}

.stakeholder-icon.management {
    background: linear-gradient(45deg, #2196F3, #1976D2);
}

.stakeholder-icon.staff {
    background: linear-gradient(45deg, #4CAF50, #2E7D32);
}

.stakeholder-icon.residents {
    background: linear-gradient(45deg, #FF9800, #F57C00);
}

.stakeholder-trust-item p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--secondary-text);
}

/* Benefits Row (single row layout) */
.benefits-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.benefits-row .benefit-item {
    flex: 1;
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.benefits-row .benefit-item:hover {
    transform: translateY(-5px);
}

/* Partners Conveyor Belt */
.partners-conveyor {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    margin-left: -50vw;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    padding: 2.5rem 0;
    touch-action: pan-y;
}

.partners-track {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    animation: conveyor 30s linear infinite;
    width: max-content;
    user-select: none;
}

.partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    padding: 2rem 1.75rem;
    width: 240px;
    min-height: 155px;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.partner-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.partner-card-logo {
    height: 66px;
    width: auto;
    max-width: 175px;
    object-fit: contain;
    flex-shrink: 0;
}

.partner-card-name {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.4);
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

/* Legacy partner-logo (kept for backwards compatibility) */
.partner-logo {
    height: 60px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    opacity: 0.9;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.partner-logo:hover {
    opacity: 1;
    transform: scale(1.1);
}

@keyframes conveyor {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause animation and show grab cursor on hover */
.partners-conveyor:hover {
    cursor: grab;
}
.partners-conveyor:active {
    cursor: grabbing;
}
.partners-conveyor:hover .partners-track {
    animation-play-state: paused;
}

/* Mobile footer adjustments */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .footer-brand {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 3rem 0 0 0;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }
    
    .footer-brand {
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-logo {
        height: 40px;
        max-width: 160px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-brand p,
    .footer-description {
        text-align: center;
    }

    .footer .waitlist-cta-button {
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Center all footer section titles */
    .footer-links-section h4,
    .footer-contact h4,
    .footer-social h4 {
        text-align: center;
    }

    /* Keep Schnelllinks readable when footer stacks vertically */
    .footer-nav {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    
    .footer-nav a {
        display: inline-block;
        text-align: center;
    }

    /* Center contact items */
    .footer-contact-item {
        justify-content: center;
        text-align: center;
    }

    .footer-contact-item a {
        text-align: center;
    }

    /* Center social links */
    .social-links {
        justify-content: center;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .footer-bottom-left,
    .footer-bottom-left p {
        text-align: center;
    }
    
    .footer-bottom-right {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 2rem 0 0 0;
    }
    
    .footer-content {
        gap: 2rem;
        text-align: center;
    }
    
    .footer-logo {
        height: 35px;
        max-width: 140px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .footer-nav {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .footer-nav a {
        text-align: center;
    }

    /* Ensure contact items stay centered on small screens */
    .footer-contact-item {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-contact-item a {
        white-space: normal;
        word-break: break-word;
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }

    .social-links a {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .footer-bottom-content,
    .footer-bottom-left,
    .footer-bottom-right {
        text-align: center;
    }

    .footer-bottom-left p {
        text-align: center;
    }
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .nav-toggle.active .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle.active .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Hero Mobile Adjustments */
    .hero {
        /* svh = viewport height with the browser UI shown. Unlike vh / --app-vh,
           it does NOT change when the mobile URL bar slides in/out during scroll,
           so the hero — and therefore the page height — stays constant. This stops
           the reflow/scrollbar glitch when reversing scroll direction. */
        min-height: 100vh;
        min-height: 100svh;
        height: 100vh;
        height: 100svh;
        max-height: 100vh;
        max-height: 100svh;
    }

    .hero-content-overlay {
        position: absolute;
        inset: 0;
        min-height: 100%;
        height: 100%;
        /* Copy spans most of the narrow viewport, so keep contrast across it. */
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 30%, rgba(0, 0, 0, 0.65) 75%, rgba(0, 0, 0, 0.4) 100%);
    }

    .hero-container {
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .hero-content {
        padding: 0;
        max-width: 100%;
    }

    .hero-logo {
        height: 70px;
    }
    
    .hero-title {
        font-size: clamp(2.45rem, 10vw, 3.15rem);
        line-height: 1.03;
    }
    
    .hero-subtitle {
        font-size: 1.15rem;
        margin-bottom: 1rem;
        white-space: normal; /* allow wrapping on small screens */
    }

    .hero-description {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }

    .hero-visual-card {
        width: 100%;
    }

    .hero-visual-card img {
        height: 200px;
    }

    /* Keep hero as a true one-screen section on mobile */
    .hero-visual {
        display: none;
    }

    .cta-button {
        padding: 1.2rem 2.5rem;
        font-size: 1.3rem;
        min-width: 240px;
    }
    
    /* Team Mobile */
    .team-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }

    /* General Mobile Adjustments */
    .nav-container {
        padding: 0 1rem;
    }

    .section {
        padding: 4rem 0;
    }

    .container {
        padding: 0 1rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Why Lumova merged section responsive */
    .subsection-title {
        font-size: 1.8rem;
    }
    
    .features-dual-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .built-items-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .stakeholder-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Benefits row responsive */
    .benefits-row {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    /* Partners responsive */
    .partner-logo {
        height: 50px;
        max-width: 150px;
    }

    .steps-container {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .step-arrow {
        transform: rotate(90deg);
    }

    .step-arrow i {
        font-size: 1.5rem;
    }

    .replay-button {
        bottom: 1rem;
        right: 1rem;
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 560px) {
    .hero-title {
        font-size: clamp(2.55rem, 11.5vw, 2.95rem);
        line-height: 1.02;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .hero {
        /* See note above: svh keeps the hero height stable across URL-bar toggles. */
        min-height: 100vh;
        min-height: 100svh;
        height: 100vh;
        height: 100svh;
        max-height: 100vh;
        max-height: 100svh;
    }

    .section {
        padding: 3rem 0;
    }

    .section-header h2 {
        font-size: 2rem;
    }
    
    .benefit-card {
        padding: 1.5rem;
    }

    /* Why Lumova merged section mobile responsive */
    .why-subsection {
        padding: 2rem 0;
        margin-bottom: 3rem;
    }
    
    .subsection-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .built-item {
        padding: 1.5rem 1rem;
    }
    
    .stakeholder-trust {
        padding: 2rem 1rem;
    }
    
    .stakeholder-trust-item {
        padding: 1rem;
    }
    
    /* Partners mobile responsive */
    .partners-conveyor {
        padding: 1.5rem 0;
    }
    
    .partners-track {
        gap: 0.75rem;
    }
    
    .partner-card {
        width: 190px;
        min-height: 160px;
        padding: 1.5rem 1.25rem 1.25rem;
    }
    
    .partner-card-logo {
        height: 50px;
        max-width: 130px;
    }
    
    /* Compact Why Lumova responsive */
    .benefits-grid-compact {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        margin-bottom: 1.5rem;
    }
    
    .benefit-card-compact {
        padding: 1rem;
    }
    
    .benefits-row-compact {
        flex-direction: column;
        gap: 0.8rem;
    }

    .footer-logo {
        height: 24px;
        max-width: 140px;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .footer-info {
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }

    .replay-button {
        padding: 0.7rem 1rem;
        font-size: 0.8rem;
    }
}

/* What is Lumova */
.lumova-description {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
}

.lumova-description p {
    font-size: 1.4rem;
    line-height: 1.8;
    color: var(--secondary-text);
    font-weight: 400;
}

.stakeholders-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    justify-items: center;
}

.stakeholder-item {
    text-align: center;
    transition: transform 0.3s ease;
    width: 100%;
    max-width: 200px;
}

.stakeholder-item:hover {
    transform: translateY(-5px);
}

.stakeholder-image {
    width: 240px;
    height: 240px;
    border-radius: 0;
    overflow: hidden;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 25px rgba(175, 195, 161, 0.2);
    transition: box-shadow 0.3s ease;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
}

.stakeholder-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
    background: transparent;
    position: relative;
    z-index: 1;
}

.stakeholder-item h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

/* Mobile adjustments for stakeholders */
@media (max-width: 1024px) {
    .stakeholders-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
        max-width: 700px;
    }
    
    .stakeholder-image {
        width: 220px;
        height: 220px;
        padding: 18px;
    }
    
    .stakeholder-item h3 {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .stakeholders-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        max-width: 560px;
    }
    
    .stakeholder-image {
        width: 200px;
        height: 200px;
        padding: 15px;
    }
    
    .stakeholder-item h3 {
        font-size: 1rem;
    }
    
    .lumova-description p {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .stakeholders-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        max-width: 420px;
    }
    
    .stakeholder-image {
        width: 180px;
        height: 180px;
        padding: 12px;
    }
    
    .stakeholder-item h3 {
        font-size: 0.9rem;
    }
}

/* Loading state for demo buttons */
.demo-button-loading {
    position: relative;
    pointer-events: none;
}

.demo-button-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Partner with us Section */
.partner-section {
    background: linear-gradient(135deg, var(--background-color), rgba(175, 195, 161, 0.08));
    padding: 4rem 0;
    overflow: hidden;
}

.partner-categories-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: transparent;
}

.partner-categories-track {
    display: flex;
    align-items: center;
    gap: 4rem;
    animation: scroll-right-to-left 40s linear infinite;
    width: fit-content;
    transform: translateX(0);
}

.partner-categories-marquee:hover .partner-categories-track {
    animation-play-state: paused;
}

.partner-category {
    text-align: center;
    transition: transform 0.3s ease;
    width: 280px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.partner-category:hover {
    transform: translateY(-10px);
}

.partner-category-image {
    width: 250px;
    height: 250px;
    border-radius: 0;
    overflow: hidden;
    margin: 0 auto 2rem;
    box-shadow: 0 15px 35px rgba(175, 195, 161, 0.2);
    transition: all 0.3s ease;
    position: relative;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(175, 195, 161, 0.15);
}

.partner-category-image img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
    filter: none;
    background: transparent;
}

/* Partners Section */
.partners-section {
    padding: 80px 0;
    background: linear-gradient(135deg, white, rgba(175, 195, 161, 0.05));
    overflow: hidden;
}

.partners-section .container {
    text-align: center;
}

.partners-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 3rem;
}

.partners-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: white;
}

.partners-marquee .partners-track {
    display: flex;
    align-items: center;
    gap: 4rem;
    animation: scroll-right-to-left 30s linear infinite;
    width: fit-content;
    transform: translateX(0);
}

.partners-marquee:hover .partners-track {
    animation-play-state: paused;
}

.partner-logo-item {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.7;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    min-width: 150px;
}

.partner-logo-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: rgba(175, 195, 161, 0.15);
    border-radius: 12px;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.partner-logo-item:hover {
    opacity: 1;
    transform: scale(1.1) translateY(-2px);
    z-index: 10;
}

.partner-logo-item:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.partner-logo-item img {
    height: 100%;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    transition: all 0.3s ease;
    display: block;
    opacity: 0.8;
    filter: grayscale(0.5);
}

.partner-logo-item:hover img {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.05);
}

/* Keyframes for scrolling animations */
@keyframes scroll-right-to-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Features Dual Grid */
.features-dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1000px;
    margin: 0 auto;
}

.feature-column {
    background: white;
    padding: 3rem 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    text-align: center;
}

.feature-column:hover {
    transform: translateY(-5px);
}

.feature-icon-container {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.feature-icon.residents,
.feature-icon.staff {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon.residents {
    background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
}

.feature-icon.staff {
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
}

.feature-icon i {
    font-size: 2rem;
    color: white;
}

.feature-content h3 {
    margin: 0 0 1.5rem 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.feature-list li {
    position: relative;
    padding: 0.8rem 0 0.8rem 2rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--secondary-text);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1rem;
}

.feature-list li:last-child {
    border-bottom: none;
}

/* Built for Homes */
.built-for-homes-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto 4rem;
}

.built-item {
    text-align: center;
    padding: 2rem 1.5rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.built-item:hover {
    transform: translateY(-5px);
}

.built-item p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--secondary-text);
}

/* Zurich Map */
.zurich-map-container {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.zurich-map-container:hover {
    transform: translateY(-5px);
}

.map-header {
    padding: 2rem 2rem 1rem;
    text-align: center;
    background: linear-gradient(135deg, var(--background-color), rgba(175, 195, 161, 0.1));
}

.map-header h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 0.5rem 0;
    font-family: var(--heading-font);
}

.map-header p {
    font-size: 1rem;
    color: var(--secondary-text);
    margin: 0;
    line-height: 1.5;
}

.zurich-map {
    height: 500px;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Custom Leaflet Popup Styles */
.leaflet-popup-content-wrapper {
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.leaflet-popup-content {
    margin: 12px 16px;
    font-family: var(--body-font);
}

.popup-title {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
    margin: 0 0 0.5rem 0;
}

.popup-address {
    font-size: 0.85rem;
    color: var(--secondary-text);
    margin: 0;
    line-height: 1.4;
}

.popup-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.75rem;
    font-weight: 700;
    color: #15803d;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.popup-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.55rem;
}

.popup-website-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-orange, #E07A3A);
    text-decoration: none;
}
.popup-website-link:hover {
    text-decoration: underline;
}

/* Website link in the sidebar list */
.demo-map-list-website {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--accent-orange, #E07A3A);
    background: rgba(224, 122, 58, 0.1);
    border: 1px solid rgba(224, 122, 58, 0.2);
    font-size: 0.7rem;
    text-decoration: none;
    flex-shrink: 0;
    align-self: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.demo-map-list-website:hover {
    background: rgba(224, 122, 58, 0.2);
    color: #c8622a;
}

/* Pilot Section */
.pilot-section {
    /* Dark section fill; keep orange reserved for accents/buttons */
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-dark-2) 100%);
    color: white;
    text-align: center;
}

.pilot-section .section-header h2,
.pilot-section .section-header h3 {
    color: white;
}

.pilot-section .section-header h3 {
    font-size: 1.4rem;
    margin-top: 0.5rem;
    opacity: 0.9;
}

.pilot-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto 3rem;
}

.pilot-feature {
    text-align: center;
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
}

.pilot-feature:hover {
    transform: translateY(-5px);
}

.pilot-feature i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: white;
}

.pilot-feature p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* Stakeholder Trust Grid */
.stakeholder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.stakeholder-trust-item {
    text-align: center;
    padding: 2.5rem 2rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.stakeholder-trust-item:hover {
    transform: translateY(-10px);
}

.stakeholder-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.stakeholder-icon.management {
    background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
}

.stakeholder-icon.staff {
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
}

.stakeholder-icon.residents {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
}

.stakeholder-icon i {
    font-size: 2rem;
    color: white;
}

.stakeholder-trust-item p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--secondary-text);
}

/* CTA Buttons Container */
.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile adjustments for map */
@media (max-width: 768px) {
    .zurich-map {
        height: 400px;
    }
    
    .map-header {
        padding: 1.5rem 1rem 0.5rem;
    }
    
    .map-header h3 {
        font-size: 1.5rem;
    }
    
    .built-for-homes-content {
        margin-bottom: 2rem;
    }
    
    .pilot-features {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .stakeholder-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .zurich-map {
        height: 350px;
    }
    
    .built-for-homes-content {
        margin-bottom: 2rem;
    }

    .pilot-features {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .stakeholder-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-button {
        min-width: 250px;
    }
}


/* Demo Map Styles */
.demo-map {
    height: var(--demo-map-height, 500px);
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.demo-map-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Demo Map + List Layout */
.demo-map-layout {
    /* Keep sidebar and map aligned to the exact same height; list scrolls inside sidebar. */
    --demo-map-height: 500px;
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

.demo-map-sidebar {
    height: var(--demo-map-height, 500px);
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
}

.demo-map-sidebar-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    text-align: left;
    font-family: var(--heading-font);
}

.demo-map-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.demo-map-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--secondary-text);
}

.demo-map-count-item {
    display: inline-flex;
    gap: 0.35rem;
    align-items: baseline;
}

.demo-map-count-sep {
    opacity: 0.7;
}

.demo-map-search {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-color);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.demo-map-search:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(211, 109, 91, 0.18);
}

.demo-map-empty {
    font-size: 0.95rem;
    color: var(--secondary-text);
    padding: 0.75rem 0.25rem;
}

.demo-map-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.demo-map-list-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    padding: 0.8rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(175, 195, 161, 0.08);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
    list-style: none;
}

.demo-map-list-item:hover {
    background: rgba(175, 195, 161, 0.14);
    transform: translateY(-1px);
}

.demo-map-list-item:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(211, 109, 91, 0.18);
}

.demo-map-list-name {
    font-weight: 700;
    color: var(--text-color);
    font-size: 0.98rem;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.demo-map-list-address {
    font-size: 0.9rem;
    color: var(--secondary-text);
    line-height: 1.25;
}

/* Group headers inside the location list */
.demo-map-group-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.5rem 0.25rem 0.25rem;
    color: var(--secondary-text);
    margin-top: 0.35rem;
}

.demo-map-group-header:first-child {
    margin-top: 0;
}

.demo-map-group-header--live {
    color: #15803d;
}

.demo-map-group-header--demo {
    color: var(--accent-orange, #E07A3A);
}

.demo-map-group-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

.demo-map-group-count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(0,0,0,0.07);
    border-radius: 20px;
    padding: 1px 7px;
    color: inherit;
}

.demo-map-group-header--live .demo-map-group-count {
    background: rgba(34, 197, 94, 0.16);
}

.demo-map-group-header--demo .demo-map-group-count {
    background: rgba(224, 122, 58, 0.14);
    color: var(--accent-orange, #E07A3A);
}

/* Live list items — subtle green tint */
.demo-map-list-item--live {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.08);
}

.demo-map-list-item--live:hover {
    background: rgba(34, 197, 94, 0.16);
}

/* Pilot list items — orange accent, not muted */
.demo-map-list-item--demo {
    border-color: rgba(224, 122, 58, 0.25);
    background: rgba(224, 122, 58, 0.06);
}

.demo-map-list-item--demo:hover {
    background: rgba(224, 122, 58, 0.12);
}

/* Benefits Stack Layout */
.benefits-stack-compact {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.benefit-stack-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.6rem 0.2rem;
    border-radius: 16px;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.benefit-stack-item:hover {
    transform: translateX(6px);
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
}

/* Keyboard focus: use our own ring instead of browser default (orange on macOS) */
.benefit-stack-item:focus {
    outline: none;
}

.benefit-stack-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.38);
    background: rgba(255, 255, 255, 0.55);
}

.benefit-stack-item p {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--secondary-text);
    flex: 1;
}

/* Uniform styling for all benefit icons */
.benefit-icon-uniform {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    /* beige to muted sage gradient */
    background: linear-gradient(135deg, var(--background-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.benefit-icon-uniform::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 999px;
    border: 2px solid rgba(var(--primary-rgb), 0);
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.benefit-icon-uniform i {
    font-size: 1.1rem;
    color: var(--text-color);
    transition: transform 220ms ease;
}

/* Staggered reveal (triggered by JS adding `.is-revealed` to `.benefits-stack-compact`) */
.benefits-stack-compact .benefit-stack-item {
    opacity: 0;
    transform: translateY(10px);
}

.benefits-stack-compact.is-revealed .benefit-stack-item {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 650ms cubic-bezier(.16,1,.3,1),
        transform 650ms cubic-bezier(.16,1,.3,1),
        background 220ms ease,
        box-shadow 220ms ease;
}

.benefits-stack-compact.is-revealed .benefit-stack-item:nth-child(1) { transition-delay: 80ms; }
.benefits-stack-compact.is-revealed .benefit-stack-item:nth-child(2) { transition-delay: 160ms; }
.benefits-stack-compact.is-revealed .benefit-stack-item:nth-child(3) { transition-delay: 240ms; }
.benefits-stack-compact.is-revealed .benefit-stack-item:nth-child(4) { transition-delay: 320ms; }
.benefits-stack-compact.is-revealed .benefit-stack-item:nth-child(5) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .benefit-stack-item,
    .benefit-icon-uniform,
    .benefit-icon-uniform::after,
    .benefit-icon-uniform i {
        transition: none !important;
        animation: none !important;
    }

    .benefits-stack-compact .benefit-stack-item {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Mobile Responsive for Demo Map */
@media (max-width: 1024px) {
    .gallery-demo-container {
        gap: 0;
    }
    
    .section-divider-vertical {
        min-height: 350px;
    }
    
    .demo-map {
        height: 320px;
    }

    .demo-map-sidebar {
        height: 320px;
    }

    .demo-map-layout {
        --demo-map-height: 320px;
    }
}

@media (max-width: 768px) {
    .gallery-demo-container {
        grid-template-columns: 1fr;
        gap: 0;
        height: auto;
    }
    
    .section-divider-vertical {
        display: none;
    }
    
    .gallery-subsection {
        height: auto;
        padding: 1rem 0 0;
    }
    
    .demo-map-subsection {
        padding: 1rem 0;
    }
    
    .gallery-frame {
        height: clamp(250px, 45vh, 360px);
        border-radius: 12px;
    }

    .demo-map {
        height: 280px;
    }

    .demo-map-layout {
        grid-template-columns: 1fr;
        --demo-map-height: 280px;
    }

    .demo-map-sidebar {
        height: 360px;
    }
    
    .gallery-nav {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }
    
    .gallery-nav.prev {
        left: 8px;
    }
    
    .gallery-nav.next {
        right: 8px;
    }
    
    .gallery-dots {
        bottom: 12px;
    }
    
    .gallery-dot {
        width: 9px;
        height: 9px;
    }

    /* Benefits stack mobile */
    .benefits-stack-compact {
        gap: 1rem;
    }

    .benefit-stack-item {
        gap: 1rem;
        padding: 0.5rem 0.15rem;
    }

    .benefit-stack-item p {
        font-size: 1.1rem;
    }

    .benefit-icon-uniform {
        width: 52px;
        height: 52px;
    }

    .benefit-icon-uniform i {
        font-size: 1rem;
    }

    /* Gallery thumbnails mobile */
    .gallery-filmstrip {
        gap: 0.5rem;
        margin-top: 0.7rem;
    }

    .gallery-thumb {
        width: 72px;
        height: 50px;
        border-radius: 8px;
    }

    /* Gallery topbar mobile */
    .gallery-topbar {
        top: 10px;
        left: 10px;
        right: 10px;
    }

    .gallery-action {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .gallery-subsection,
    .demo-map-subsection {
        padding: 0.75rem 0;
    }
    
    .gallery-frame {
        height: clamp(200px, 38vh, 300px);
        border-radius: 10px;
    }

    .demo-map {
        height: 260px;
    }

    .demo-map-layout {
        --demo-map-height: 260px;
    }

    .demo-map-sidebar {
        height: 320px;
    }
    
    .gallery-nav {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }
    
    .gallery-nav.prev {
        left: 6px;
    }
    
    .gallery-nav.next {
        right: 6px;
    }
    
    .gallery-dots {
        gap: 6px;
        bottom: 10px;
    }
    
    .gallery-dot {
        width: 7px;
        height: 7px;
    }

    /* Benefits stack compact mobile */
    .benefits-stack-compact {
        gap: 0.75rem;
    }

    .benefit-stack-item {
        gap: 0.85rem;
        padding: 0.4rem 0.1rem;
    }

    .benefit-stack-item p {
        font-size: 0.95rem;
        line-height: 1.35;
    }

    .benefit-icon-uniform {
        width: 44px;
        height: 44px;
    }

    .benefit-icon-uniform i {
        font-size: 0.9rem;
    }

    /* Gallery thumbnails compact mobile */
    .gallery-filmstrip {
        gap: 0.4rem;
        margin-top: 0.5rem;
        padding: 0.15rem 0.2rem 0.35rem 0.2rem;
    }

    .gallery-thumb {
        width: 60px;
        height: 42px;
        border-radius: 6px;
    }

    /* Gallery topbar compact */
    .gallery-topbar {
        top: 8px;
        left: 8px;
        right: 8px;
        gap: 0.5rem;
    }

    .gallery-action {
        width: 32px;
        height: 32px;
    }

    .gallery-action i {
        font-size: 0.8rem;
    }

    /* Section CTA row mobile */
    .section-cta-row {
        margin-top: 1.5rem;
    }

    .section-cta-row .waitlist-cta-button {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

/* Extra small devices (360px and below) */
@media (max-width: 360px) {
    /* Hero ultra-compact */
    .hero-container {
        padding:
            calc(6rem + var(--safe-top))
            calc(0.75rem + var(--safe-right))
            calc(1.25rem + var(--safe-bottom))
            calc(0.75rem + var(--safe-left));
    }

    .hero-title {
        font-size: clamp(2.55rem, 11.5vw, 2.95rem);
        line-height: 1.02;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .hero-description {
        font-size: 0.88rem;
    }

    .hero-kicker {
        font-size: 0.72rem;
    }

    .hero-chips {
        display: none; /* Hide chips on very small screens for cleaner layout */
    }

    .hero-visual-card img {
        height: 150px;
    }

    .hero-visual-feature {
        font-size: 0.72rem;
        padding: 0.35rem 0.45rem;
    }

    /* Gallery ultra-compact */
    .gallery-frame {
        height: 180px;
    }

    .gallery-nav {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .gallery-filmstrip {
        display: none; /* Hide filmstrip on very small screens */
    }

    /* Benefits ultra-compact */
    .benefit-stack-item p {
        font-size: 0.88rem;
    }

    .benefit-icon-uniform {
        width: 38px;
        height: 38px;
    }

    .benefit-icon-uniform i {
        font-size: 0.82rem;
    }

    /* Container ultra-compact */
    .container {
        padding-left: calc(0.75rem + var(--safe-left));
        padding-right: calc(0.75rem + var(--safe-right));
    }

    /* Section header ultra-compact */
    .section-header h2 {
        font-size: 1.6rem;
    }

    /* Navigation ultra-compact */
    .nav-logo {
        height: 48px;
        max-width: 140px;
    }

    .nav-container {
        height: 70px;
    }

    /* Waitlist button ultra-compact */
    .waitlist-cta-button {
        padding: 0.7rem 1rem;
        font-size: 0.82rem;
        min-width: unset;
    }

    /* Demo map ultra-compact */
    .demo-map {
        height: 220px;
    }

    .demo-map-sidebar {
        height: 280px;
    }

    /* Team cards ultra-compact */
    .team-card {
        padding: 1.5rem 1rem;
    }

    .team-avatar {
        width: 90px;
        height: 90px;
    }

    .team-card h3 {
        font-size: 1.2rem;
    }

    .team-role {
        font-size: 0.9rem;
    }

    /* Case studies ultra-compact */
    .case-studies-section .case-caption-name {
        font-size: 1rem;
    }

    .case-studies-section .case-video .case-video-play {
        width: 48px;
        height: 48px;
    }

    /* FAQ ultra-compact */
    .faq-summary {
        padding: 0.85rem 0;
    }

    .faq-summary-text {
        font-size: 0.9rem;
    }

    /* Footer ultra-compact */
    .footer-logo {
        height: 32px;
        max-width: 130px;
    }

    .social-links a {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }
}

/* ============================================================
   WHIMSY & PLAYFUL ANIMATIONS
   Simple · Entertaining · Premium
   ============================================================ */

/* ── B. Hero Staggered Entrance ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .hero-kicker,
    .hero-title,
    .hero-subtitle,
    .hero-description,
    .hero-cta-row,
    .hero-visual-card {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.7s ease,
                    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.is-ready .hero-kicker       { opacity: 1; transform: none; transition-delay: 0.10s; }
    body.is-ready .hero-title        { opacity: 1; transform: none; transition-delay: 0.32s; }
    body.is-ready .hero-subtitle     { opacity: 1; transform: none; transition-delay: 0.56s; }
    body.is-ready .hero-description  { opacity: 1; transform: none; transition-delay: 0.76s; }
    body.is-ready .hero-cta-row      { opacity: 1; transform: none; transition-delay: 0.96s; }
    body.is-ready .hero-visual-card  { opacity: 1; transform: none; transition-delay: 0.48s; }
}

/* ── C. Map Full-Bleed Layout ───────────────────────────────── */
.demo-map-section-fullbleed {
    padding-bottom: 0;
}

.demo-map-section-header {
    padding-bottom: 2.5rem;
    text-align: center;
}

.demo-map-section-header h2 {
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0.4rem 0 0;
}

.demo-map-section-fullbleed .demo-map-container {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

.demo-map-section-fullbleed .demo-map-layout {
    display: block;
    position: relative;
    height: clamp(480px, 70vh, 720px);
    width: 100%;
}

/* Map fills the entire layout area */
.demo-map-section-fullbleed #demo-map,
.demo-map-section-fullbleed .demo-map {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    z-index: 1;
}

/* Sidebar floats as a glass widget over the map */
.demo-map-section-fullbleed .demo-map-sidebar {
    position: absolute;
    top: auto;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 400;
    width: clamp(260px, 22vw, 360px);
    max-height: calc(100vh - 2.5rem);
    background: rgba(252, 249, 244, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.14),
        0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(60, 57, 56, 0.1);
    transition: box-shadow 0.2s ease;
    /* flex layout so inner list can scroll */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1.1rem 1.1rem 0;
    gap: 0.5rem;
}

.demo-map-section-fullbleed .demo-map-sidebar:hover {
    box-shadow:
        0 6px 32px rgba(0, 0, 0, 0.18),
        0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Sidebar inner elements: header and search stay fixed, list scrolls */
.demo-map-section-fullbleed .demo-map-sidebar .demo-map-sidebar-titlerow,
.demo-map-section-fullbleed .demo-map-sidebar .demo-map-controls,
.demo-map-section-fullbleed .demo-map-sidebar .demo-map-empty {
    flex-shrink: 0;
}

.demo-map-section-fullbleed .demo-map-sidebar #demoMapList {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(60,57,56,0.2) transparent;
    padding-bottom: 1.1rem;
    /* Fade mask at bottom */
    mask-image: linear-gradient(to bottom, black calc(100% - 44px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 44px), transparent 100%);
}

/* Leaflet zoom controls sit above the sidebar */
.leaflet-control-zoom {
    z-index: 500 !important;
}

/* Mobile: sidebar goes to bottom */
@media (max-width: 600px) {
    .demo-map-section-fullbleed .demo-map-sidebar {
        width: calc(100vw - 2rem);
        max-height: 42%;
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        border-radius: 14px;
    }
}

/* Sidebar title row: title + total count badge on the same line */
.demo-map-sidebar-titlerow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.25rem;
}

.demo-map-sidebar-titlerow .demo-map-sidebar-title {
    margin: 0;
    flex: 1;
}

.demo-map-total-badge {
    display: inline-flex;
    align-items: center;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 9px;
    white-space: nowrap;
    line-height: 1.4;
}

/* Addresses: single-line, no wrapping */
.demo-map-list-address {
    font-size: 0.88rem;
    color: #6f6a63;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

:root[data-theme="dark"] .demo-map-sidebar-title,
:root[data-theme="dark"] .demo-map-sidebar .demo-map-list-name,
:root[data-theme="dark"] .demo-map-total-badge {
    color: #f7f1e8;
}

:root[data-theme="dark"] .demo-map-sidebar .demo-map-list-address,
:root[data-theme="dark"] .demo-map-sidebar .demo-map-count,
:root[data-theme="dark"] .demo-map-sidebar .demo-map-empty,
:root[data-theme="dark"] .demo-map-sidebar .demo-map-group-count {
    color: #ddd5c8;
}

/* ── D. Partners "Thank You" Fireworks ──────────────────────── */
#partners {
    position: relative;
    overflow: hidden;
}

/* ── E. Team Slide-In from Left/Right + Handshake ───────────── */
#team .team-grid {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    max-width: 860px;
    margin: 0 auto;
}

.team-card--left {
    transform: translateX(-90px);
    opacity: 0;
    transition:
        transform 0.9s cubic-bezier(0.34, 1.46, 0.64, 1),
        opacity   0.7s ease;
}

.team-card--right {
    transform: translateX(90px);
    opacity: 0;
    transition:
        transform 0.9s cubic-bezier(0.34, 1.46, 0.64, 1),
        opacity   0.7s ease;
}

#team.team-slide-in .team-card--left,
#team.team-slide-in .team-card--right {
    transform: translateX(0);
    opacity: 1;
}

/* Handshake column between the two cards */
.team-handshake-col {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 3;
    padding: 0.5rem 0 0;
}

.team-handshake {
    display: inline-flex;
    align-items: center;
    gap: 0;
    position: relative;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.team-handshake.hs-playing {
    opacity: 1;
}

.hs-fist {
    font-size: 2.4rem;
    display: inline-block;
    line-height: 1;
    user-select: none;
}

.hs-right-fist {
    display: inline-block;
}

.team-handshake.hs-playing .hs-left-fist {
    animation: hs-bump-left 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

.team-handshake.hs-playing .hs-right-fist {
    animation: hs-bump-right 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

.hs-sparks {
    position: absolute;
    left: 50%;
    top: -0.25em;
    transform: translateX(-50%);
    font-size: 1.5rem;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

.team-handshake.hs-playing .hs-sparks {
    animation: hs-sparks 0.7s ease-out 0.44s both;
}

@keyframes hs-bump-left {
    0%   { transform: translateX(-28px); }
    65%  { transform: translateX(5px);   }
    100% { transform: translateX(0);     }
}

@keyframes hs-bump-right {
    0%   { transform: translateX(28px);  }
    65%  { transform: translateX(-5px); }
    100% { transform: translateX(0);    }
}

@keyframes hs-sparks {
    0%   { opacity: 0;   transform: translateX(-50%) scale(0.4);                }
    45%  { opacity: 1;   transform: translateX(-50%) scale(1.6);                }
    100% { opacity: 0;   transform: translateX(-50%) scale(1) translateY(-22px); }
}

/* Desktop: all three elements in a single row */
@media (min-width: 620px) {
    #team .team-grid {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0;
    }

    .team-card--left,
    .team-card--right {
        flex: 1;
        min-width: 0;
        max-width: 320px;
    }

    .team-handshake-col {
        width: auto;
        flex-shrink: 0;
        padding: 0 1.75rem;
        order: 2;
    }
}

/* Reduced motion: skip all whimsy */
@media (prefers-reduced-motion: reduce) {

    .hero-kicker,
    .hero-title,
    .hero-subtitle,
    .hero-description,
    .hero-cta-row,
    .hero-visual-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .team-card--left,
    .team-card--right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   F. CONTINUOUS SCROLL LAYOUT
   Sections flow naturally. Each section uses its own padding
   and content-based height. No viewport-locking.
   ============================================================ */

/* Hero: always full viewport height */
#hero {
    min-height: 100vh;
    height: 100vh;
}

/* Case studies: fixed aspect-ratio container so video is visible */
#case-studies {
    position: relative;
    background: #0A0A0A;
}

/* #case-studies::after gradient removed, section is now light */


/* Demo map: relative for any overlayers */
#demo-map-section {
    position: relative;
}

/* =============================================
   COWBOY-STYLE MAP SECTION
   Dark info panel (left) + full-height map (right)
   ============================================= */
.demo-map-section-cowboy {
    padding: 0 clamp(1rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
    background: linear-gradient(to bottom, #FFFFFF 0px, #f0ede8 140px);
}

.demo-map-section-intro {
    padding: clamp(2.5rem, 5vw, 4rem) 1.5rem clamp(1.25rem, 2.5vw, 2rem);
}

.demo-map-cowboy-layout {
    display: grid;
    grid-template-columns: clamp(300px, 32vw, 440px) 1fr;
    align-items: stretch;
    height: clamp(580px, 78vh, 820px);
    width: 100%;
    overflow: hidden;
    border-radius: clamp(10px, 1.2vw, 18px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.14);
}

.demo-map-info-panel {
    background: #0A0A0A;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* Header: kicker + title + live count */
.demo-map-panel-header {
    flex-shrink: 0;
    padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem) 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.demo-map-panel-header .section-kicker {
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0;
}

.demo-map-info-title {
    font-size: clamp(2.1rem, 2.8vw, 3.2rem);
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0;
    font-family: var(--heading-font);
}

.demo-map-live-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.88rem;
    font-weight: 500;
}

.demo-map-live-row-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: live-pulse 2s ease-in-out infinite;
}

/* Search input row */
.demo-map-panel-search {
    flex-shrink: 0;
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem) 0.75rem;
}

.demo-map-search--dark {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

.demo-map-search--dark::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.demo-map-search--dark:focus {
    border-color: rgba(255, 255, 255, 0.24) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05) !important;
    outline: none;
}

.demo-map-mobile-toggle {
    display: none;
}

/* Scrollable list */
.demo-map-list--dark {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    padding: 0 clamp(1.25rem, 2.5vw, 2rem);
    mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
}

/* Flat row items, no card boxes */
.demo-map-list--dark .demo-map-list-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    padding: 0.8rem 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    transition: background 0.15s ease, padding-left 0.15s ease;
    width: 100%;
    text-align: left;
}

.demo-map-list--dark .demo-map-list-item:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: none;
    border-color: rgba(255, 255, 255, 0.07);
    padding-left: 0.35rem;
}

/* Leading dot */
.demo-map-list--dark .demo-map-list-item::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.22);
    margin-top: 0.35rem;
}

.demo-map-list--dark .demo-map-list-item--live {
    background: transparent;
    border-bottom: 1px solid rgba(34, 197, 94, 0.12);
    border-top: none;
    border-left: none;
    border-right: none;
}

.demo-map-list--dark .demo-map-list-item--live:hover {
    background: rgba(34, 197, 94, 0.05);
}

.demo-map-list--dark .demo-map-list-item--live::before {
    background: #22c55e;
    animation: live-pulse 2s ease-in-out infinite;
}

.demo-map-list--dark .demo-map-list-item--demo {
    background: transparent;
    border-bottom: 1px solid rgba(224, 122, 58, 0.12);
    border-top: none;
    border-left: none;
    border-right: none;
}

.demo-map-list--dark .demo-map-list-item--demo:hover {
    background: rgba(224, 122, 58, 0.06);
}

.demo-map-list--dark .demo-map-list-item--demo::before {
    background: rgba(224, 122, 58, 0.65);
}

.demo-map-list--dark .demo-map-list-website {
    color: rgba(224, 122, 58, 0.8);
    background: rgba(224, 122, 58, 0.08);
    border-color: rgba(224, 122, 58, 0.15);
}

/* Item text column */
.demo-map-list--dark .demo-map-list-item > .demo-map-list-item-text {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.demo-map-list--dark .demo-map-list-name {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
}

.demo-map-list--dark .demo-map-list-street {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.78rem;
    line-height: 1.3;
}

.demo-map-list--dark .demo-map-list-city {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    line-height: 1.3;
    font-weight: 500;
}

.demo-map-list--dark .demo-map-group-header {
    color: rgba(255, 255, 255, 0.25);
    padding: 0.65rem 0 0.2rem;
    margin-top: 0.25rem;
}

.demo-map-list--dark .demo-map-group-header--demo {
    color: rgba(224, 122, 58, 0.7);
}

.demo-map-list--dark .demo-map-group-header--live {
    color: rgba(34, 197, 94, 0.65);
}

.demo-map-list--dark .demo-map-group-count {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.35);
}

.demo-map-list--dark .demo-map-group-header--live .demo-map-group-count {
    background: rgba(34, 197, 94, 0.12);
    color: rgba(34, 197, 94, 0.65);
}

.demo-map-empty--dark {
    color: rgba(255, 255, 255, 0.3);
    padding: 0.75rem 0;
    font-size: 0.88rem;
}

/* Map fills the right column with no rounding or gap */
.demo-map-section-cowboy #demo-map {
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Prevent Leaflet's grey default from creating a flash / gap */
.demo-map-section-cowboy .leaflet-container {
    background: #f0ede8;
}

/* Mobile: stack panel above map */
@media (max-width: 700px) {
    .demo-map-cowboy-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto clamp(300px, 50vh, 420px);
        height: auto;
    }

    .demo-map-panel-header {
        padding: 2rem 1.5rem 0.75rem;
    }

    .demo-map-panel-search {
        padding: 1.25rem 1.25rem 0.5rem;
    }

    .demo-map-mobile-toggle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
        padding: 0 1.25rem 0.75rem;
    }

    .demo-map-mobile-toggle-btn {
        appearance: none;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.7);
        border-radius: 999px;
        min-height: 2.15rem;
        padding: 0.35rem 0.85rem;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        cursor: pointer;
        transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }

    .demo-map-mobile-toggle-btn.is-active {
        border-color: rgba(255, 255, 255, 0.26);
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff;
    }

    .demo-map-cowboy-layout[data-mobile-view="map"] #demoMapList,
    .demo-map-cowboy-layout[data-mobile-view="map"] #demoMapEmpty {
        display: none;
    }

    .demo-map-cowboy-layout[data-mobile-view="list"] {
        grid-template-rows: auto;
    }

    .demo-map-cowboy-layout[data-mobile-view="list"] #demo-map {
        display: none;
    }

    .demo-map-cowboy-layout[data-mobile-view="list"] .demo-map-info-panel {
        overflow: visible;
    }

    .demo-map-cowboy-layout[data-mobile-view="list"] .demo-map-list--dark {
        flex: 0 1 auto;
        min-height: 220px;
        max-height: clamp(260px, 42vh, 380px);
        mask-image: none;
        -webkit-mask-image: none;
    }

    .demo-map-list--dark {
        padding: 0 1.25rem;
        max-height: clamp(200px, 35vh, 280px);
    }

    .demo-map-info-title {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }

    .demo-map-section-cowboy #demo-map {
        height: clamp(320px, 52vh, 460px) !important;
    }
}

/* Partners + Team: normal flex column, content-based height */
#partners-team {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.partners-half {
    padding: var(--section-pad-top) 0 clamp(1.5rem, 2.5vw, 2.5rem);
}

.team-half {
    padding: var(--section-pad-top) 0 0;
}

#team .section-header {
    margin-bottom: 1.5rem;
}

.partners-team-divider {
    display: none;
}

/* FAQ + Footer: normal flow */
#faq-footer {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.faq-half {
    padding: var(--section-pad-top) 0 clamp(1.5rem, 2.5vw, 2.5rem);
    background: #ffffff;
}

.footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

/* Case-viewer: fixed height (60vh) so video is readable */
.case-viewer {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 0;
    width: 100%;
    min-height: clamp(360px, 56vw, 680px);
    overflow: hidden;
    box-sizing: border-box;
}

.case-viewer-nav {
    grid-area: 1 / 1;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 1.1rem 1.2rem;
    height: 100%;
    pointer-events: none;
}




.case-section-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f6f0e7;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    margin: 0;
}

.case-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: max-content;
    max-width: min(92vw, 420px);
    pointer-events: auto;
}

.case-nav-item {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(10, 16, 22, 0.55);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    padding: 0.8rem 1rem;
    text-align: left;
    font-family: var(--heading-font);
    font-size: 1.05rem;
    font-weight: 700;
    color: #f7f1e8;
    white-space: nowrap;
}

.case-nav-item.case-nav-item--active {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.case-desc-box {
    display: none !important;
}

.case-desc-box p {
    display: none;
}

.case-desc-box p.is-fading {
    opacity: 0;
}

/* Video panel on the right */
.case-viewer-video {
    grid-area: 1 / 1;
    height: 100%;
    display: flex;
    align-items: stretch;
    align-self: stretch;
    min-height: 0;
    width: 100%;
    flex: 1;
}

.case-viewer-video .video-wrapper,
.case-viewer-video #caseVideoWrapper {
    width: 100%;
    height: 100%;
    min-height: 100%;
    flex: 1;
    overflow: hidden;
    border-radius: 0;
    background: #000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    position: relative;
    cursor: pointer;
    opacity: 1;
    transition: opacity 280ms ease;
}

.case-viewer-video .video-wrapper::after,
.case-viewer-video #caseVideoWrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: clamp(120px, 18%, 220px);
    pointer-events: none;
    background: linear-gradient(90deg, rgba(9, 13, 18, 0.68) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 4;
}

.case-viewer-video .video-wrapper::before,
.case-viewer-video #caseVideoWrapper::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: clamp(120px, 18%, 220px);
    pointer-events: none;
    background: linear-gradient(270deg, rgba(9, 13, 18, 0.68) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 4;
}

.case-viewer-video #caseVideoWrapper.is-fading {
    opacity: 0.3;
}

.case-audio-indicator {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.7rem;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
    transition: opacity 220ms ease, transform 220ms ease, background 220ms ease;
    pointer-events: none;
    backdrop-filter: blur(4px);
}

.case-audio-indicator.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.case-audio-indicator.is-muted {
    background: rgba(0, 0, 0, 0.62);
}

.case-audio-indicator.is-unmuted {
    background: rgba(21, 114, 74, 0.78);
}

.case-audio-indicator i {
    font-size: 0.85rem;
}

.case-viewer-video .video-wrapper iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100vh;
    border: 0;
    z-index: 3;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1.08);
}

@media (max-width: 768px) {
    .case-viewer-nav {
        padding: 1rem 0.85rem;
    }

    .case-section-label {
        font-size: 0.72rem;
    }

    .case-nav-item {
        font-size: 0.95rem;
        padding: 0.68rem 0.88rem;
    }

    .case-viewer-video .video-wrapper::before,
    .case-viewer-video .video-wrapper::after,
    .case-viewer-video #caseVideoWrapper::before,
    .case-viewer-video #caseVideoWrapper::after {
        width: clamp(48px, 14%, 100px);
    }
}

/* Team animation geometry: cards centered with fist bump in the middle */
#team .team-grid {
    display: grid;
    grid-template-columns: minmax(200px, 280px) auto minmax(200px, 280px);
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 860px;
    margin: 0 auto;
}

#team .team-card {
    width: 100%;
    max-width: 280px;
}

.team-handshake-col {
    width: auto;
    order: 0;
    align-self: center;
    padding: 0;
    display: flex;
    justify-content: center;
}

.team-handshake {
    opacity: 0;
}

.hs-right-fist {
    transform: none;
}

#team .team-handshake.hs-playing .hs-left-fist {
    animation: hs-bump-left-center 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

#team .team-handshake.hs-playing .hs-right-fist {
    animation: hs-bump-right-center 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

@keyframes hs-bump-left-center {
    0%   { transform: translateX(-28px); }
    65%  { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

@keyframes hs-bump-right-center {
    0%   { transform: translateX(28px); }
    65%  { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

@media (max-width: 860px) {
    #team .team-grid {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .team-handshake-col {
        order: 2;
    }
}

/* ── Disable for reduced-motion users ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #hero,
    #case-studies,
    #demo-map-section,
    #partners-team,
    #faq-footer {
        height: auto;
        min-height: 0;
        overflow: visible;
        display: block;
    }

    #faq     { overflow: visible; }
    #hero    { min-height: 100vh; }
}

/* =============================================
   HOW IT WORKS, BENTO GRID SECTION
   Cowboy-inspired asymmetric feature grid
   ============================================= */
.how-it-works-section {
    background: linear-gradient(to bottom, #FFFFFF 0px, #f0ede8 140px);
    border-top: none;
    padding: var(--section-pad-top) 0 0;
}

.section-intro {
    text-align: center;
    margin-bottom: 1rem;
}
.section-intro h2 {
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--text-color);
    white-space: pre-line;
    max-width: 18ch;
    margin: 0 auto 0.75rem;
}
.section-intro .section-sub {
    font-size: 1.05rem;
    color: var(--secondary-text);
    max-width: 48ch;
    margin: 0 auto;
    line-height: 1.6;
}

/* =============================================
   HOW IT WORKS, Numbered steps
   Cowboy/Eight Sleep editorial layout
   ============================================= */

.hiw-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
    padding: clamp(4rem, 6vw, 5.5rem) 0;
}
.hiw-step + .hiw-step {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.hiw-step--reverse .hiw-step-text {
    order: 2;
}
.hiw-step--reverse .hiw-step-visual {
    order: 1;
}

/* Large ghost number */
.hiw-step-num {
    display: block;
    font-size: clamp(5rem, 10vw, 9rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.85;
    color: rgba(0, 0, 0, 0.055);
    margin-bottom: -0.5rem;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.hiw-step-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary-text);
    margin-bottom: 0.9rem;
}

.hiw-step-title {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--text-color);
    margin-bottom: 1.25rem;
}

.hiw-step-desc {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--secondary-text);
    max-width: 38ch;
}

/* Step text right-aligned (step 1 — text on left, image on right) */
.hiw-step-text--right {
    text-align: right;
}
.hiw-step-text--right .hiw-step-desc {
    margin-left: auto;
    margin-right: 0;
}

/* Image */
.hiw-step-visual {
    position: relative;
}

.hiw-step-img {
    width: 100%;
    border-radius: 20px;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.hiw-img-placeholder {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #EDEBE7;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

/* Subtle gradient lines decorations per variant */
.hiw-img-placeholder--motion { background: linear-gradient(135deg, #E8E4DD 0%, #D4CEC5 100%); }
.hiw-img-placeholder--game   { background: linear-gradient(135deg, #E0DDD5 0%, #C8C4BA 100%); }
.hiw-img-placeholder--nature { background: linear-gradient(135deg, #DDE3DC 0%, #C5CEBC 100%); }

/* Abstract decorative lines inside placeholder */
.hiw-img-lines {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 28px,
            rgba(255,255,255,0.18) 28px,
            rgba(255,255,255,0.18) 29px
        );
}

.hiw-img-label {
    position: relative;
    z-index: 1;
    margin: 1.25rem 1.5rem;
    font-size: 0.78rem;
    font-style: italic;
    color: rgba(0, 0, 0, 0.38);
    line-height: 1.4;
    max-width: 30ch;
}

/* Science quote strip */
.hiw-science-strip {
    background: #0A0A0A;
    padding: clamp(2.3rem, 3.3vw, 3.3rem) 0 clamp(1.5rem, 2.5vw, 2rem);
    margin-top: 0;
}

.hiw-science-header {
    text-align: center;
    margin-bottom: clamp(2rem, 3vw, 3rem);
}

.hiw-science-kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.hiw-science-title {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: #ffffff;
    margin: 0;
}

.hiw-science-quote {
    margin: 0 auto;
    max-width: 68ch;
    text-align: center;
    border: none;
    padding: 0;
}

.hiw-science-quote p {
    font-size: clamp(1.15rem, 2.2vw, 1.6rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: -0.015em;
    margin-bottom: 1.5rem;
}

.hiw-science-quote cite {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    font-style: normal;
    display: block;
}

/* CTA button override inside the dark science strip */
.hiw-science-strip .waitlist-cta-button {
    background: var(--accent-orange, #E07A3A);
}
.hiw-science-strip .waitlist-cta-button:hover {
    background: #c8622a;
    box-shadow: 0 8px 24px rgba(224, 122, 58, 0.35);
}
.hiw-science-strip .waitlist-cta-button:focus {
    outline-color: var(--accent-orange, #E07A3A);
}

/* Dark mode */
:root[data-theme="dark"] .hiw-step {
    border-top-color: rgba(255, 255, 255, 0.07);
}
:root[data-theme="dark"] .hiw-step-num {
    color: rgba(255, 255, 255, 0.055);
}
:root[data-theme="dark"] .hiw-img-placeholder {
    background: #1a1a1a;
}
:root[data-theme="dark"] .hiw-img-placeholder--motion { background: linear-gradient(135deg, #252220 0%, #1a1817 100%); }
:root[data-theme="dark"] .hiw-img-placeholder--game   { background: linear-gradient(135deg, #201f1c 0%, #181714 100%); }
:root[data-theme="dark"] .hiw-img-placeholder--nature { background: linear-gradient(135deg, #1e2219 0%, #161a13 100%); }
:root[data-theme="dark"] .hiw-img-lines {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 28px,
        rgba(255,255,255,0.04) 28px,
        rgba(255,255,255,0.04) 29px
    );
}
:root[data-theme="dark"] .hiw-img-label {
    color: rgba(255, 255, 255, 0.22);
}
:root[data-theme="dark"] .hiw-science-strip {
    background: #060606;
}

/* Responsive */
@media (max-width: 860px) {
    .hiw-step {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .hiw-step--reverse .hiw-step-text { order: 1; }
    .hiw-step--reverse .hiw-step-visual { order: 2; }
    .hiw-step-desc { max-width: 100%; }

    /* Step 01 is right-aligned on desktop; switch to left on mobile */
    .hiw-step-text--right {
        text-align: left;
    }
    .hiw-step-text--right .hiw-step-desc {
        margin-left: 0;
        margin-right: auto;
    }
}

@media (max-width: 560px) {
    .hiw-step {
        padding: 2.5rem 0; /* reduce excessive whitespace on small phones */
    }
}

/* Keep bento grid for potential reuse elsewhere */
.bento-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
}
.bento-card {
    background: #F9F8F7;
    border-radius: 20px;
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 200px;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.09);
}
.bento-card--wide { grid-column: span 2; min-height: 260px; }
.bento-card--tall { grid-row: span 2; }
.bento-card--dark { background: #0A0A0A; color: #ffffff; }
.bento-card--accent { background: #0A0A0A; color: #ffffff; }

.bento-icon { font-size: 2.25rem; margin-bottom: 1.25rem; line-height: 1; }
.bento-label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--secondary-text);
    margin-bottom: 0.5rem; display: block;
}
.bento-card--dark .bento-label, .bento-card--accent .bento-label { color: rgba(255,255,255,0.45); }
.bento-title { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 0.5rem; }
.bento-body { font-size: 0.95rem; color: var(--secondary-text); line-height: 1.55; }
.bento-card--dark .bento-body, .bento-card--accent .bento-body { color: rgba(255,255,255,0.6); }

@media (max-width: 900px) {
    .bento-grid { grid-template-columns: 1fr 1fr; }
    .bento-card--wide { grid-column: span 2; }
}
@media (max-width: 560px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-card--wide { grid-column: span 1; }
    .bento-card--tall { grid-row: span 1; }
}

/* =============================================
   TESTIMONIALS TICKER
   Cowboy-style infinite horizontal marquee
   ============================================= */
.testimonials-ticker {
    background: #F9F8F7;
    padding: 3.5rem 0;
    overflow: hidden;
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.ticker-wrapper {
    display: flex;
    gap: 0;
    width: max-content;
    animation: ticker-scroll 38s linear infinite;
}
.ticker-wrapper:hover {
    animation-play-state: paused;
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ticker-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0 3.5rem;
    border-right: 1px solid rgba(0,0,0,0.1);
    min-width: 340px;
    max-width: 400px;
    flex-shrink: 0;
}
.ticker-quote {
    flex: 1;
}
.ticker-quote p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-color);
    font-style: italic;
    margin-bottom: 0.4rem;
}
.ticker-quote cite {
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--secondary-text);
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .ticker-wrapper { animation: none; }
}

/* =============================================
   PERSONA / FOR WHOM TABS  –  Eight Sleep style
   ============================================= */
.persona-section {
    background: #FFFFFF;
    padding: var(--section-pad-top) 0 var(--section-pad);
}

.persona-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}
.persona-tab {
    padding: 0.65rem 1.35rem;
    border-radius: 9999px;
    border: 1.5px solid rgba(0,0,0,0.15);
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--heading-font);
    color: var(--secondary-text);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.persona-tab.is-active,
.persona-tab:hover {
    background: #0A0A0A;
    color: #ffffff;
    border-color: #0A0A0A;
}

.persona-panels {
    position: relative;
}
.persona-panel {
    display: none;
}
.persona-panel.is-active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.persona-text-col {}
.persona-text-col h3 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: var(--text-color);
}
.persona-text-col p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--secondary-text);
    margin-bottom: 1.5rem;
}
.persona-benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.persona-benefit-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-color);
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.persona-benefit-list li:last-child { border-bottom: none; }
.persona-benefit-list li i {
    color: #0A0A0A;
    margin-top: 0.15rem;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.persona-visual-col {
    border-radius: 20px;
    overflow: hidden;
    background: #F9F8F7;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.persona-visual-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.persona-visual-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--secondary-text);
    font-size: 3rem;
    opacity: 0.4;
    text-align: center;
    padding: 2rem;
}
.persona-visual-placeholder span {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .persona-panel.is-active {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .persona-visual-col {
        order: -1;
        aspect-ratio: 16/9;
    }
}

/* ================================================
   Combined Testimonials Section (Residents/Staff/Management)
   ================================================ */

/* Override the dark case-studies-section defaults, ID wins specificity */
#case-studies.testimonials-combined,
.case-studies-section.testimonials-combined {
    background: #fff;
    color: #111;
}

.testimonials-combined .testimonials-header {
    text-align: center;
    margin-bottom: 2rem;
}

.testimonials-combined .testimonials-header .section-kicker {
    color: var(--secondary-text);
}

.testimonials-combined .testimonials-header h2 {
    color: #111;
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0;
}

/* Tab pills */
.testimonial-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.testimonial-tab {
    padding: 0.65rem 1.5rem;
    border-radius: 9999px;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
    background: transparent;
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--heading-font, inherit);
    cursor: pointer;
    transition: all 0.18s ease;
}

.testimonial-tab:hover {
    border-color: rgba(0, 0, 0, 0.5);
    color: #111;
}

.testimonial-tab.is-active {
    background: #111;
    border-color: #111;
    color: #fff;
}

@media (max-width: 400px) {
    .testimonial-tab {
        font-size: 0.78rem;
        padding: 0.5rem 1rem;
    }
}

/* Panels */
.testimonial-panel {
    display: none;
    padding-top: 2.5rem;
}

.testimonial-panel--active {
    display: block;
    animation: fadeInPanel 0.3s ease forwards;
}

@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Residents: 2-column video grid */
.testimonial-video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}

.testimonial-video-quote {
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    font-style: italic;
    font-weight: 500;
    color: #111;
    line-height: 1.45;
    margin: 1.25rem 0 0.75rem;
    letter-spacing: -0.01em;
}

.testimonial-video-name {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(0, 0, 0, 0.8);
    display: block;
}

/* Staff / Management: photo + large quote */
.testimonial-photo-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 5rem;
    align-items: center;
    max-width: 880px;
    margin: 0 auto;
}

.testimonial-photo-card--quote-only {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 880px;
}

.testimonial-photo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.testimonial-photo-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    background: linear-gradient(160deg, #e8e6e1 0%, #dedad3 100%);
    border: 1px solid rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: rgba(0, 0, 0, 0.12);
}

.testimonial-photo-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    object-fit: cover;
    object-position: center;
}

.testimonial-coming-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: rgba(224, 122, 58, 0.1);
    border: 1.5px solid rgba(224, 122, 58, 0.4);
    color: var(--accent-orange, #E07A3A);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.testimonial-pull-quote {
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.45;
    color: #111;
    letter-spacing: -0.01em;
    margin: 0 0 1.75rem;
}

.testimonial-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.testimonial-meta-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.8);
    letter-spacing: 0.02em;
}

.testimonial-meta-sep {
    color: rgba(0, 0, 0, 0.2);
}

.testimonial-meta-role {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.4);
}

@media (max-width: 820px) {
    .testimonial-photo-card {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        max-width: 420px;
    }
    .testimonial-photo-placeholder {
        aspect-ratio: 4 / 3;
    }
    .testimonial-photo-img {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 600px) {
    .testimonial-video-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   NEWS / BLOG, Shared card, section, listing & post styles
   ═══════════════════════════════════════════════════════════ */

/* ── Tag badge ───────────────────────────────────────────── */
.news-tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.75em;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    line-height: 1.6;
    white-space: nowrap;
    color: #2F86C8;
    background: transparent;
}
.news-tag-badge--research  { color: #5A8A3E; }
.news-tag-badge--media     { color: #B85C00; }
.news-tag-badge--partnership { color: #865DBB; }

:root[data-theme="dark"] .news-tag-badge            { color: #5DB0F5; }
:root[data-theme="dark"] .news-tag-badge--research  { color: #7DC65C; }
:root[data-theme="dark"] .news-tag-badge--media     { color: #F09840; }
:root[data-theme="dark"] .news-tag-badge--partnership { color: #B88CF0; }
:root[data-theme="dark"] .news-page-hero { background: linear-gradient(to bottom, #0f0d0b 0%, #1a1714 100%); }
:root[data-theme="dark"] .news-filters-bar { background: var(--surface-1); }

/* ── News card ───────────────────────────────────────────── */
.news-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    cursor: pointer;
}
.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--elev-shadow);
    text-decoration: none;
    color: inherit;
}
.news-card:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

.news-card-body {
    padding: 1.25rem 1.4rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}

.news-card-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.news-card-date {
    font-size: 0.8rem;
    color: var(--secondary-text);
    font-weight: 400;
    white-space: nowrap;
}

.news-card-title {
    font-size: clamp(0.92rem, 2vw, 1.05rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-color);
    letter-spacing: -0.01em;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-img-wrap {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-top: auto;
}
.news-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.news-card:hover .news-card-img-wrap img {
    transform: scale(1.04);
}

/* ── Homepage news section ───────────────────────────────── */
.news-section {
    background: #f0ede8;
    padding: var(--section-pad-top) 0 clamp(1.5rem, 2.5vw, 2.5rem);
}

.news-section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    margin-bottom: 2.5rem;
}
.news-section-head h2 {
    margin: 0.25rem 0 0;
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--text-color);
}

.news-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    padding-bottom: 0.15rem;
    transition: opacity 0.18s;
}
.news-all-link:hover { opacity: 0.65; text-decoration: underline; color: var(--text-color); }

/* Carousel */
.news-carousel-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.news-carousel-viewport {
    flex: 1;
    overflow: hidden;
    border-radius: 14px;
    touch-action: pan-y;
}
.news-carousel-track {
    display: flex;
    gap: 1.25rem;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.news-carousel-track .news-card {
    flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
    min-width: 260px;
}

.news-carousel-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--border-soft);
    background: var(--surface-1);
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.18s, border-color 0.18s, opacity 0.18s;
}
.news-carousel-btn:hover:not(:disabled) {
    background: var(--surface-3);
    border-color: var(--text-color);
}
.news-carousel-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.news-carousel-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Dot indicators */
.news-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 1.25rem;
}
.news-carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border-soft);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.news-carousel-dot.is-active {
    background: var(--text-color);
    transform: scale(1.3);
}

/* ── News listing page ───────────────────────────────────── */
.news-page-hero {
    background: linear-gradient(to bottom, #c5bdb4 0%, #f0ede8 100%);
    padding: calc(64px + 3.5rem) 0 2.5rem;
}
.news-page-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-color);
    margin: 0.5rem 0 0;
}

.news-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--secondary-text);
    margin-bottom: 0.6rem;
}
.news-breadcrumb a {
    color: var(--secondary-text);
    text-decoration: none;
}
.news-breadcrumb a:hover {
    text-decoration: underline;
    color: var(--text-color);
}
.news-breadcrumb i {
    font-size: 0.6rem;
}

/* Filters bar */
.news-filters-bar {
    background: #F9F8F7;
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 62px;
    z-index: 90;
    padding: 0.9rem 0;
}
.news-filters-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.news-tag-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
}
.news-filter-btn {
    padding: 0.35em 1em;
    border-radius: 999px;
    border: 1.5px solid var(--border-soft);
    background: transparent;
    color: var(--secondary-text);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
    white-space: nowrap;
}
.news-filter-btn:hover {
    border-color: var(--text-color);
    color: var(--text-color);
}
.news-filter-btn.is-active {
    background: var(--text-color);
    border-color: var(--text-color);
    color: var(--background-color);
}
.news-filter-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Search */
.news-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.news-search-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--secondary-text);
    font-size: 0.8rem;
    pointer-events: none;
}
.news-search-input {
    padding: 0.45em 1em 0.45em 2.2rem;
    border-radius: 999px;
    border: 1.5px solid var(--border-soft);
    background: var(--surface-2);
    color: var(--text-color);
    font-size: 0.82rem;
    font-family: var(--body-font);
    min-width: 190px;
    transition: border-color 0.18s;
}
.news-search-input:focus {
    outline: none;
    border-color: var(--text-color);
}
.news-search-input::placeholder { color: var(--secondary-text); }

/* Grid */
.news-listing-main {
    padding: 3rem 0 5rem;
    min-height: 50vh;
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
@media (max-width: 1100px) {
    .news-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .news-grid { grid-template-columns: 1fr; }
}

/* Empty state */
.news-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 5rem 0;
    color: var(--secondary-text);
    text-align: center;
}
.news-empty i {
    font-size: 2.5rem;
    opacity: 0.4;
}
.news-empty p {
    font-size: 1rem;
    margin: 0;
}

/* ── Single post page ───────────────────────────────────── */
.post-main {
    min-height: 60vh;
}
.post-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}
.post-loading-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--border-soft);
    border-top-color: var(--text-color);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.post-not-found {
    padding: calc(64px + 4rem) 0 4rem;
    text-align: center;
}
.post-not-found h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
}
.post-not-found p {
    color: var(--secondary-text);
    margin-bottom: 2rem;
}

/* Hero, capped landscape banner, no gradient */
.post-hero {
    width: 100%;
    overflow: hidden;
    background: var(--surface-3);
}
.post-hero img {
    width: 100%;
    max-height: 380px;
    height: auto;
    object-fit: cover;
    object-position: center 55%;
    display: block;
}

/* Article, centered narrow reading column, fade-in */
@keyframes postFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
.post-article {
    padding-bottom: 5rem;
    animation: postFadeUp 0.45s ease both;
}
.post-article .container {
    max-width: 820px;
}

.post-breadcrumb {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.post-meta-date {
    font-size: 0.85rem;
    color: var(--secondary-text);
}

.post-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--text-color);
    margin: 0.5rem 0 2rem;
}

.post-content {
    font-size: clamp(0.98rem, 2vw, 1.08rem);
    line-height: 1.8;
    color: var(--text-color);
}
/* Lead paragraph, slightly larger */
.post-content > p:first-child {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--text-color);
}
.post-content p {
    margin-bottom: 1.25em;
}
.post-content h2,
.post-content h3 {
    font-weight: 700;
    margin: 2.25em 0 0.6em;
    letter-spacing: -0.02em;
    color: var(--text-color);
}
.post-content h2 { font-size: 1.5rem; }
.post-content h3 {
    font-size: 1.1rem;
    padding-left: 0.875rem;
    border-left: 3px solid var(--accent-orange);
}
.post-content ul, .post-content ol {
    margin: 0 0 1.25em 1.5rem;
}
.post-content li {
    margin-bottom: 0.55em;
    line-height: 1.65;
}
.post-content blockquote {
    border-left: 3px solid var(--border-soft);
    padding-left: 1.25rem;
    margin: 1.5em 0;
    color: var(--secondary-text);
    font-style: italic;
}
.post-content blockquote cite {
    display: block;
    margin-top: 0.6em;
    font-style: normal;
    font-size: 0.85em;
    color: var(--secondary-text);
}
.post-content a {
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--accent-orange);
}
.post-content a:hover {
    color: var(--accent-orange);
    opacity: 1;
}

.post-content .post-figure {
    margin: 2.5rem 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.07);
}
.post-content .post-figure img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 480px;
    object-fit: cover;
    object-position: center 25%;
}
.post-content .post-figure video {
    width: 100%;
    height: auto;
    display: block;
    max-height: 480px;
    object-fit: cover;
    object-position: center 25%;
    background: #000;
}

/* YouTube click-to-play embed inside post figures */
.post-content .post-figure .post-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.post-content .post-figure .post-video-embed > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}
.post-content .post-figure .post-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.post-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 0;
    background: var(--accent-orange, #E07A3A);
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: transform 180ms ease, background 180ms ease;
}
.post-video-play:hover {
    background: #c8622a;
    transform: translate(-50%, -50%) scale(1.08);
}
.post-video-play::before {
    content: "";
    display: block;
    width: 0; height: 0;
    border-style: solid;
    border-width: 9px 0 9px 16px;
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;
}

.post-content .post-figure figcaption {
    font-size: 0.82rem;
    color: var(--secondary-text);
    padding: 0.7rem 1.1rem;
    text-align: center;
    border-top: 1px solid var(--border-soft);
}

.post-content .post-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2.5rem 0;
}
.post-content .post-gallery-item {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.post-content .post-gallery-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    transition: transform 0.3s ease;
}
.post-content .post-gallery-item figcaption {
    font-size: 0.82rem;
    color: var(--secondary-text);
    padding: 0.7rem 1.1rem;
    text-align: center;
    border-top: 1px solid var(--border-soft);
}
.post-content .post-gallery-item-capture img {
    height: 300px;
    object-fit: cover;
    object-position: center center;
}
.post-content .post-gallery-item:hover img {
    transform: scale(1.04);
}
@media (max-width: 560px) {
    .post-content .post-gallery {
        grid-template-columns: 1fr;
    }
    .post-content .post-gallery-item img {
        height: 200px;
    }
    .post-content .post-gallery-item-capture img {
        height: 250px;
    }
}

/* ── Per-post "Ask a question" form ── */
.post-ask {
    margin-top: 3rem;
    padding: 1.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
}
.post-ask-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-color);
    margin: 0 0 0.4rem;
}
.post-ask-intro {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--secondary-text);
    margin: 0 0 1.25rem;
}
.post-ask-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.post-ask-field { flex: 1; min-width: 0; }
.post-ask-form input[type="text"],
.post-ask-form input[type="email"],
.post-ask-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: var(--surface-0);
    color: var(--text-color);
    font-size: 1rem;
    font-family: inherit;
}
.post-ask-form textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.6;
}
.post-ask-form input:focus,
.post-ask-form textarea:focus {
    outline: none;
    border-color: var(--accent-orange);
}
.post-ask-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}
.post-ask-submit {
    padding: 0.75rem 1.5rem;
    background: var(--text-color);
    color: var(--surface-0);
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: opacity 150ms ease, transform 150ms ease;
}
.post-ask-submit:hover { opacity: 0.88; transform: translateY(-1px); }
.post-ask-submit:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.post-ask-submit:disabled { opacity: 0.5; cursor: default; transform: none; }
.post-ask-message { font-size: 0.92rem; color: var(--secondary-text); }
.post-ask-message:empty { display: none; }
.post-ask-message[data-kind="error"]   { color: #b42318; }
.post-ask-message[data-kind="success"] { color: #067647; }
.post-ask-message[data-kind="info"]    { color: var(--secondary-text); }
.post-ask-privacy {
    margin: 0.9rem 0 0;
    font-size: 0.82rem;
    color: var(--secondary-text);
}
.post-ask-privacy a { color: var(--secondary-text); text-decoration: underline; }

@media (max-width: 560px) {
    .post-ask { padding: 1.35rem; }
    .post-ask-row { flex-direction: column; gap: 0.75rem; }
    .post-ask-submit { width: 100%; }
}

/* "Ask a question" below the homepage FAQ — centred, narrower than the page container */
.faq-ask-wrap {
    background: #ffffff;
    padding-bottom: clamp(1.5rem, 3vw, 3rem);
}
.faq-ask {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.post-footer-nav {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-soft);
}

.post-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
    border: 1.5px solid var(--border-soft);
    border-radius: 999px;
    padding: 0.5em 1.25em;
    transition: background 0.18s, border-color 0.18s;
}
.post-back-btn:hover {
    background: var(--surface-2);
    border-color: var(--text-color);
    text-decoration: none;
    color: var(--text-color);
    gap: 0.65rem;
}

/* Related posts */
.post-related {
    background: var(--surface-2);
    padding: 4rem 0 5rem;
}
.post-related-title {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}
.post-related-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ── News footer tweak ───────────────────────────────────── */
.news-footer {
    margin-top: 0;
}

/* ── Active nav state ────────────────────────────────────── */
.nav-link.is-active {
    font-weight: 600;
    opacity: 1;
}

/* ── Responsive: carousel on smaller screens ─────────────── */
@media (max-width: 860px) {
    .news-carousel-track .news-card {
        flex: 0 0 calc((100% - 1.25rem) / 2);
    }
    .post-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .news-section-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .news-carousel-track .news-card {
        flex: 0 0 calc(100% - 0.5rem);
    }
    .news-carousel-btn {
        display: none;
    }
    .post-related-grid {
        grid-template-columns: 1fr;
    }
    .news-filters-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .news-search-input {
        min-width: 0;
        width: 100%;
    }
}