/* ============================================
   ADZIO - Premium Marketing Agency Website
   ============================================ */

/* Custom display font — used for the ADZIO hero wordmark */
@font-face {
    font-family: 'Retro Floral';
    src: url('../assets/fonts/RetroFloral.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* CSS Variables */
:root {
    /* Surfaces — sleek deep navy-charcoal: dark, professional, cool depth */
    --bg-primary: #080B11;
    --bg-secondary: #0E1318;
    --bg-tertiary: #12181F;
    --bg-card: rgba(15, 20, 26, 0.92);
    --bg-glass: rgba(15, 20, 26, 0.6);
    /* New Global Palette */
    --dark-cyan: #119da4ff;
    --cerulean: #0c7489ff;
    --dark-teal: #13505bff;
    --dust-grey: #d7d9ceff;

    /* Adzio Cyan — the single interactive highlight */
    --accent-primary: #3BA5B5;
    --accent-secondary: #2B7A87;
    --accent-gradient: linear-gradient(135deg, #00b8d4 0%, #3BA5B5 100%);
    --accent-glow: rgba(0, 184, 212, 0.25);
    --cyan: #00b8d4;
    --cyan-soft: rgba(0, 184, 212, 0.1);
    --cyan-border: rgba(0, 184, 212, 0.35);

    /* Champagne gold — editorial markers, hairlines, luxury accents */
    --gold: #9CA3AF;
    --gold-bright: #F3F4F6;
    --gold-soft: rgba(255, 255, 255, 0.03);
    --gold-border: rgba(255, 255, 255, 0.08);

    /* Text — soft cream + warm slate, no harsh pure white */
    --text-primary: #F4F1EA;
    --text-secondary: #ffffff;
    --text-muted: #6E7681;

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.16);
    --hairline: rgba(244, 241, 234, 0.08);
    --hairline-gold: rgba(255, 255, 255, 0.08);
    --grid-line-color: rgba(124, 146, 166, 0.14);
    --grid-line-color-soft: rgba(124, 146, 166, 0.07);
    --grid-surface-top: #0C111A;
    --grid-surface-bottom: #06080D;
    /* Faint cool glows (cyan top-centre, blue lower-right) for premium depth */
    --grid-glow-primary: rgba(0, 184, 212, 0.07);
    --grid-glow-secondary: rgba(58, 123, 213, 0.07);

    /* Typography */
    --font-heading: 'DM Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    /* Spacing */
    --spacing-xs: 0.375rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1.125rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2.25rem;
    --spacing-2xl: 3.75rem;
    --spacing-3xl: 6rem;

    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 60px var(--accent-glow);
}

/* Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 14px;
    /* Sleek navy base behind everything (covers overscroll) */
    background-color: #080B11;
    /* Mobile guardrail: kill any horizontal scroll leak from transient
       transforms / oversized decorative layers without affecting vertical scroll */
    overflow-x: hidden;
    max-width: 100%;
    /* Custom scrollbar support (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 184, 212, 0.35) var(--bg-secondary);
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(circle at 52% 14%, var(--grid-glow-primary) 0%, transparent 38%),
        radial-gradient(ellipse 60% 55% at 82% 80%, var(--grid-glow-secondary) 0%, transparent 45%),
        linear-gradient(180deg, var(--grid-surface-top) 0%, var(--grid-surface-bottom) 100%);
    background-size: auto, auto, auto;
    background-position: center top, center bottom, center;
    background-attachment: fixed;
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Custom scrollbar support (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 184, 212, 0.35) var(--bg-secondary);
}

/* Selection */
::selection {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

/* Custom Premium Scrollbar (Webkit) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 184, 212, 0.25) 0%, rgba(59, 165, 181, 0.25) 100%);
    border: 3px solid var(--bg-secondary);
    border-radius: 9999px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(0, 184, 212, 0.7) 0%, rgba(59, 165, 181, 0.7) 100%);
    border: 3px solid var(--bg-secondary);
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: var(--bg-secondary);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}



/* ============================================
   Mobile Navigation (hamburger) — phones only
   ============================================ */
.m-nav,
.m-nav-panel {
    display: none;
}

@media (max-width: 768px) {
    /* Hide the desktop morphing pill on touch screens */
    #navWrap {
        display: none !important;
    }

    .m-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2000;
        height: 60px;
        padding: 0 16px;
        background-color: rgba(9, 13, 17, 0.85);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--hairline);
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .m-nav-brand {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 2001;
    }

    .m-nav-brand img {
        height: 42px;
        width: auto;
    }

    /* Hamburger — 48x48 touch target */
    .m-nav-toggle {
        width: 48px;
        height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-right: -8px;
        position: relative;
        z-index: 2001;
    }

    .m-nav-toggle span {
        display: block;
        width: 26px;
        height: 2px;
        border-radius: 2px;
        background: var(--text-primary);
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        transform-origin: center;
    }

    /* 2 lines → X (each line converges to center and rotates) */
    body.m-nav-open .m-nav-toggle span:nth-child(1) {
        transform: translateY(4.5px) rotate(45deg);
    }

    body.m-nav-open .m-nav-toggle span:nth-child(2) {
        transform: translateY(-4.5px) rotate(-45deg);
    }

    /* Make the top bar blend into the full-screen menu when open. The panel
       (see below) is a separate top-level element, so nothing filtered sits
       above it and its position:fixed resolves against the viewport. */
    body.m-nav-open .m-nav {
        background-color: transparent;
        border-bottom-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Full-screen takeover menu */
    .m-nav-panel {
        position: fixed;
        inset: 0;
        z-index: 1999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 88px 24px 96px;
        /* Match the site's warm-charcoal atmosphere instead of flat black */
        background-color: #0B0F13;
        background-image:
            radial-gradient(ellipse 90% 55% at 50% -8%, rgba(0, 184, 212, 0.1) 0%, transparent 60%),
            radial-gradient(ellipse 70% 50% at 85% 108%, rgba(197, 168, 128, 0.07) 0%, transparent 62%),
            linear-gradient(180deg, rgba(11, 15, 19, 0.98) 0%, rgba(9, 13, 17, 1) 100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, -10px, 0);
        /* Promote to its own compositor layer so the fade/slide is pure GPU work
           and the gradient background is painted once, not every frame. */
        will-change: opacity, transform;
        backface-visibility: hidden;
        contain: layout paint;
        /* Single unified duration + easing so the whole panel moves as one piece.
           visibility flips in instantly on open, out after the fade on close. */
        transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.34s;
    }

    body.m-nav-open .m-nav-panel {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
        pointer-events: auto;
        transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
    }

    .m-nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .m-nav-links a {
        display: block;
        padding: 10px 8px;
        font-family: 'Archivo', sans-serif;
        font-size: clamp(2.5rem, 11.5vw, 3.6rem);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.015em;
        color: var(--text-primary);
        text-decoration: none;
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        will-change: opacity, transform;
        transition: color 0.2s ease, opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    body.m-nav-open .m-nav-links a {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    body.m-nav-open .m-nav-links a:nth-child(1) { transition-delay: 0.06s; }
    body.m-nav-open .m-nav-links a:nth-child(2) { transition-delay: 0.10s; }
    body.m-nav-open .m-nav-links a:nth-child(3) { transition-delay: 0.14s; }
    body.m-nav-open .m-nav-links a:nth-child(4) { transition-delay: 0.18s; }

    .m-nav-links a.active,
    .m-nav-links a:active {
        color: var(--cyan);
    }

    .m-nav-cta {
        margin-top: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 0 24px;
        background: transparent;
        color: #06120F !important;
        font-family: 'Archivo', sans-serif;
        font-size: 0.85rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 8px;
        box-shadow: none;
        position: relative;
        isolation: isolate;
        overflow: visible;
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        will-change: opacity, transform;
        transition: opacity 0.4s ease 0.22s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.22s, filter 0.2s ease;
    }

    .m-nav-cta::before {
        content: '';
        position: absolute;
        inset: 0 7px;
        z-index: -1;
        border-radius: 7px;
        background: var(--cyan);
        transform: skewX(-10deg);
        transform-origin: center;
        transition: background 0.25s ease;
    }

    body.m-nav-open .m-nav-cta {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .m-nav-cta:hover,
    .m-nav-cta:active {
        transform: translate3d(3px, -3px, 0);
        filter: brightness(0.95);
    }

    .m-nav-foot {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 34px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        opacity: 0;
        transition: opacity 0.4s ease 0.34s;
    }

    body.m-nav-open .m-nav-foot {
        opacity: 1;
    }

    .m-nav-socials,
    .m-nav-contact {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(16px, 5vw, 28px);
        width: 100%;
    }

    .m-nav-foot a {
        font-family: 'Archivo', sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-secondary);
        text-decoration: none;
    }

    .m-nav-contact a {
        font-size: clamp(0.68rem, 2.7vw, 0.78rem);
        letter-spacing: 0.08em;
        text-transform: none;
        white-space: nowrap;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }

    .m-nav-socials a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
    }

    .m-nav-socials svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: color 0.2s ease, transform 0.2s ease;
    }

    .m-nav-socials a:active svg {
        color: var(--cyan);
        transform: translateY(-2px);
    }

    .m-nav-foot a:active {
        color: var(--cyan);
    }

    /* Prevent body scroll behind an open menu & hide picture-in-picture video */
    body.m-nav-open {
        overflow: hidden;
    }

    body.m-nav-open #vsl-main-element,
    body.m-nav-open .vsl-pip-active,
    body.m-nav-open .vsl-wrapper {
        display: none !important;
    }
}

.legal-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
    display: none !important;
}

.legal-modal.is-open {
    display: flex !important;
}

.legal-modal__backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.82) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.legal-modal__panel {  justify-content: center;
    background: #090D11;
    pointer-events: none;
    animation: pageVeilOut 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

/* ── Page load veil — content reveals from charcoal ── */
.page-veil {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #090D11;
    pointer-events: none;
    animation: pageVeilOut 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

@keyframes pageVeilOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* ── Page transition cover (fades in on leave; pairs with .page-veil reveal on arrive) ── */
.pt-veil {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #090D11;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.36s ease, visibility 0.36s ease;
}

.pt-veil.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.veil-logo {
    width: clamp(260px, 28vw, 380px);
    height: auto;
    animation: veilPulse 1.8s ease-in-out infinite;
    filter: none;
}

.veil-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes veilPulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.04); opacity: 1; }
}

.veil-loader {
    width: clamp(320px, 35vw, 480px);
    height: 12px;
    margin-top: 36px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 22, 30, 0.85);
    border: 1px solid rgba(0, 184, 212, 0.3);
    box-shadow: 0 0 16px rgba(0, 184, 212, 0.12), inset 0 0 10px rgba(0, 0, 0, 0.5);
    position: relative;
}

.veil-progress-fill {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #00b8d4 0%, #4285F4 50%, #0866FF 100%);
    box-shadow: 0 0 16px rgba(0, 184, 212, 0.8), 0 0 28px rgba(8, 102, 255, 0.6);
    position: relative;
    transition: width 0.15s ease-out;
}

.veil-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 14px;
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 0 12px #ffffff, 0 0 20px #00b8d4;
    opacity: 0.9;
}

.veil-percent {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.95);
    font-family: 'Archivo', sans-serif;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    background: rgba(0, 184, 212, 0.1);
    border: 1px solid rgba(0, 184, 212, 0.25);
    padding: 3px 12px;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(0, 184, 212, 0.2);
}

.veil-loading-text {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    font-family: 'Archivo', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    color: #00b8d4;
    text-transform: uppercase;
}

.veil-letter {
    display: inline-block;
    animation: veilLetterBounce 1.4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.12s);
}

@keyframes veilLetterBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.45;
        color: #00b8d4;
        text-shadow: none;
    }
    40% {
        transform: translateY(-9px);
        opacity: 1;
        color: #ffffff;
        text-shadow: 0 0 12px rgba(0, 184, 212, 0.9), 0 0 24px rgba(0, 184, 212, 0.6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pt-veil,
    .page-veil { transition-duration: 0.001s; animation-duration: 0.001s; }
    .veil-logo { animation: none; }
}



/* Pinned Header CTA (Fixed Top Right) */
.pinned-header-cta {
    --btn-bg: #00b8d4;
    --btn-ring: none;
    position: fixed;
    top: 20px;
    right: 28px;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
    padding: 10px 28px;
    border-radius: 8px;
    background: transparent;
    color: #070b10;
    font-family: 'Archivo', sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none;
    isolation: isolate;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, color 0.4s ease, padding 0.35s cubic-bezier(0.16, 1, 0.3, 1), gap 0.35s ease;
}

.pinned-header-cta::before {
    content: '';
    position: absolute;
    inset: 0 7px;
    z-index: -1;
    border-radius: 7px;
    background: var(--btn-bg);
    box-shadow: var(--btn-ring);
    transform: skewX(-10deg);
    transform-origin: center;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.pinned-header-cta .phone-ring-icon {
    width: 0;
    height: 16px;
    opacity: 0;
    transform: scale(0.4) rotate(0deg);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin 0.35s ease;
    flex-shrink: 0;
}

.pinned-header-cta:hover {
    --btn-bg: #005b73;
    color: #ffffff;
    transform: translate(3px, -3px);
    padding-left: 24px;
    padding-right: 28px;
    gap: 8px;
    box-shadow: none;
}

/* ============================================
   Editorial hero sizing — desktop only
   Keep the Services and About heroes vertically balanced and let the
   title/aside columns breathe at both laptop and wide-desktop widths.
   ============================================ */
@media (min-width: 1001px) {
    .abt-hero,
    .svc-hero {
        min-height: clamp(560px, 68vh, 760px);
        display: flex;
        align-items: stretch;
    }

    .abt-hero > .abt-shell,
    .svc-hero > .svc-shell {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .abt-hero .ed-hero,
    .svc-hero .ed-hero {
        width: 100%;
        margin-top: 0;
        padding: clamp(28px, 4vh, 56px) clamp(24px, 3vw, 48px) clamp(32px, 5vh, 64px) clamp(96px, 8vw, 144px);
    }

    .ed-hero-body {
        grid-template-columns: minmax(0, 1fr) clamp(260px, 22vw, 340px);
        align-items: center;
        gap: clamp(32px, 4vw, 72px);
        padding: clamp(34px, 5vh, 64px) 0 clamp(26px, 4vh, 52px);
    }

    .ed-hero-title {
        font-size: clamp(3rem, 4.4vw, 5.2rem);
    }

    .svc-hero .ed-hero-aside {
        margin-bottom: 0;
    }
}

@media (min-width: 1600px) {
    .abt-hero .abt-shell {
        max-width: min(1680px, 94vw);
    }
}

@media (min-width: 1400px) {
    .abt-hero .ed-hero-title {
        font-size: clamp(3.4rem, 5.1vw, 6.6rem);
    }
}

@media (min-width: 1001px) {
    .abt-hero .ed-hero {
        padding-top: clamp(48px, 7.5vh, 96px);
        padding-bottom: clamp(36px, 5vh, 64px);
    }

    .abt-hero .ed-hero-body {
        padding: clamp(28px, 4vh, 48px) 0 clamp(20px, 3vh, 36px);
    }
}

/* Give narrower desktop/laptop widths a little more usable title space and
   allow an intentional line to wrap before it collides with the aside. */
@media (min-width: 1001px) and (max-width: 1399px) {
    .abt-hero .ed-hero,
    .svc-hero .ed-hero {
        padding-left: clamp(72px, 7vw, 108px);
    }

    .ed-hero-body {
        grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 300px);
        gap: clamp(24px, 3vw, 42px);
    }

    .ed-hero-title {
        font-size: clamp(2.8rem, 4.1vw, 4rem);
    }

    .ed-hero-title .ed-line {
        white-space: normal;
    }
}

.pinned-header-cta:hover .phone-ring-icon {
    width: 16px;
    opacity: 1;
    transform: scale(1);
    animation: phoneRing 0.6s ease-in-out infinite alternate;
}

.footer-book-call.pinned-header-cta {
    position: relative;
    top: auto;
    right: auto;
    z-index: 1;
    align-self: flex-start;
    margin: 4px 0 0;
}

@keyframes phoneRing {
    0% { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(-16deg) scale(1.12); }
    40% { transform: rotate(16deg) scale(1.12); }
    60% { transform: rotate(-12deg) scale(1.08); }
    80% { transform: rotate(12deg) scale(1.08); }
    100% { transform: rotate(0deg) scale(1); }
}

@media (max-width: 768px) {
    .pinned-header-cta {
        display: none !important;
    }

    .footer-book-call.pinned-header-cta {
        display: inline-flex !important;
    }
}

/* ============================================
   Typography
   ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

h1 {
    font-size: clamp(2.25rem, 5vw, 4rem);
}

h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
}

h3 {
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
}

p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
    font-weight: 300;
}

.text-gradient {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: var(--cyan);
}

@media (min-width: 500px) {
    .home-about .section-title .text-gradient {
        white-space: nowrap;
    }
}

.ed-hero {
    position: relative;
    text-align: left;
    margin-top: 30px;
    padding: clamp(14px, 2.4vh, 30px) 0 clamp(18px, 3vh, 38px);
    padding-left: clamp(140px, 16vw, 250px);
}

.ed-hero-body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) clamp(240px, 22vw, 310px);
    align-items: end;
    gap: clamp(24px, 3vw, 56px);
    padding: clamp(16px, 2.8vh, 36px) 0 clamp(12px, 2vh, 26px);
}

.ed-hero-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
}

.d-mobile-only {
    display: none;
}

/* ── Editorial eyebrow label — the luxury brand marker ── */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Archivo', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1;
}

.eyebrow::before,
.eyebrow--center::after {
    display: none;
}

.eyebrow--cyan {
    color: var(--cyan);
}

.eyebrow--cyan::before,
.eyebrow--cyan::after {
    background: var(--cyan);
}

/* TextType - Typing Animation */
.text-type {
    display: inline;
}

.text-type__content {
    display: inline;
}

.text-type__cursor {
    display: inline-block;
    margin-left: 0.1rem;
    font-weight: 400;
    animation: none;
    transition: opacity 0.1s ease;
}

/* ============================================
   Buttons
   ============================================ */

.btn {
    --btn-bg: transparent;
    --btn-ring: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    position: relative;
    overflow: visible;
    isolation: isolate;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0 7px;
    z-index: -1;
    border-radius: 7px;
    background: var(--btn-bg);
    box-shadow: var(--btn-ring);
    transform: skewX(-10deg);
    transform-origin: center;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary {
    --btn-bg: var(--accent-gradient);
    --btn-ring: none;
    background: transparent;
    color: var(--bg-primary);
    box-shadow: none;
    border: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    --btn-bg: var(--bg-primary);
    --btn-ring: inset 0 0 0 2px var(--accent-primary);
    background: transparent;
    color: var(--accent-primary);
    box-shadow: none;
    transform: translate(3px, -3px);
}

.btn-primary::before {
    opacity: 1;
}

.btn-primary:hover::before {
    opacity: 1;
}

/* Primary conviction CTA — solid Adzio cyan, weight without neon */
.btn-glow {
    --btn-bg: var(--cyan);
    --btn-ring: none;
    background: transparent;
    border: none;
    color: #06120F;
    border-radius: 3px;
    box-shadow: none;
    overflow: visible;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.3s ease,
        color 0.3s ease;
}

.btn-glow::before {
    display: block;
}

.btn-glow::after {
    display: none;
}

.btn-glow:hover {
    --btn-bg: #2DF0D8;
    background: transparent;
    color: #06120F;
    transform: translate(3px, -3px);
    box-shadow: none;
}

.btn-glow:hover svg {
    stroke: #06120F;
}

.btn-glow:active {
    transform: translateY(-1px);
    box-shadow: none;
}

/* Quiet secondary — hairline border, cream text, cyan on hover */
.btn-ghost {
    --btn-bg: transparent;
    --btn-ring: inset 0 0 0 1px rgba(244, 241, 234, 0.22);
    background: transparent;
    color: var(--text-primary);
    border: none;
    box-shadow: none;
    transition: box-shadow 0.3s ease, color 0.3s ease, background 0.3s ease,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-ghost:hover {
    --btn-bg: var(--cyan-soft);
    --btn-ring: inset 0 0 0 1px var(--cyan-border);
    background: transparent;
    box-shadow: none;
    color: var(--cyan);
    transform: translate(3px, -3px);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-full {
    width: 100%;
}

.btn svg {
    transition: transform var(--transition-base);
}

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

/* Keep legacy per-section button overrides from painting a rectangular fill
   over the rounded skewed shape. Colors now flow through --btn-bg instead. */
a.btn,
button.btn,
input.btn {
    background: transparent !important;
}

/* ============================================
   Navigation - Animated Morphing Pill
   ============================================ */

:root {
    --nav-shift-from: 0px;
    --nav-shift-to: 0px;
}

/* JS sets --nav-from and --nav-to dynamically in index.html/main.js */

/* Slide the nav from centered → docked-left as the user scrolls.
   animation-timeline: scroll() ties this directly to the page scroll position
   on the GPU compositor thread - zero JS involvement, zero choppiness. */
@keyframes nav-slide {
    from {
        transform: translate3d(calc(-50% + var(--nav-shift-from, 0px)), 0, 0);
    }

    to {
        transform: translate3d(calc(-50% + var(--nav-shift-to, 0px)), 0, 0);
    }
}

.nav-wrap {
    position: fixed;
    top: 23px;
    left: 0;
    /* Anchor left edge to 0, translation does the rest */
    z-index: 1000;
    will-change: transform, width, height;
    animation: nav-slide linear forwards;
    animation-timeline: scroll(root);
    animation-range: 0px 150px;
    /* JS dynamic positioning */
    transform: translate3d(calc(var(--nav-shift-from, 0px) - 50%), 0, 0);
}

/* While hover-morphing: suspend the CSS animation so JS can control the
   transform directly (needed to keep centering correct as width changes). */
.nav-wrap.nav-morphing {
    animation: none;
}


.nav-svg-container {
    position: relative;
    /* Responsive size bump on bigger monitors (var set in main.js). Scales the
       whole pill uniformly from the top-centre so it stays anchored + centred. */
    transform: scale(var(--nav-scale, 1));
    transform-origin: top center;
    transition: filter 0.4s ease, transform 0.3s ease;
    will-change: transform, width, height;
}

.nav-wrap:hover .nav-svg-container {
    filter: none;
}

.nav-wrap.nav-vertical:hover .nav-svg-container {
    filter: none;
}

.nav-bg {
    display: block;
    overflow: visible;
}

#navFill {
    fill: #16252c !important;
}

#navStroke {
    stroke: rgba(255, 255, 255, 0.12) !important;
    stroke-width: 0.5px;
    vector-effect: non-scaling-stroke;
}

.nav-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Clip the nav items so they never poke past the pill edges while the SVG
       is still morphing open */
    overflow: hidden;
    border-radius: 14px;
}

.logo-row {
    width: 100%;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1), flex-basis 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-logo-img {
    height: 26px;
    width: auto;
    object-fit: contain;
    display: block;
    transform: translate3d(0, 0, 0);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.corner-dot {
    position: absolute;
    top: 23px;
    /* Fixed height so it stays in the pill even when expanded vertically */
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    pointer-events: none;
}

.corner-dot::before {
    content: ">";
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.35);
    transform: translate(-50%, -50%) rotate(90deg);
    transition: color 0.3s, filter 0.3s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
}

.nav-wrap:hover .corner-dot::before {
    color: #00d2c8;
    filter: drop-shadow(0 0 5px #00d2c8);
    transform: translate(-50%, -50%) rotate(-90deg);
}

.nav-links-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 14px 10px;
    opacity: 0;
    pointer-events: none;
    /* Hide instantly on close; reveal only once the pill has finished morphing */
    transition: opacity 0.2s ease 0s;
}

.nav-wrap:hover .nav-links-row {
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.25s ease 0.42s;
}

/* Fixed side navbar style overrides to disable scroll animations */
.nav-wrap[data-nav-fixed-side="true"] {
    animation: none !important;
    transform: translate3d(calc(var(--nav-shift-to, 0px) - 50%), 0, 0) !important;
}

/* Vertical Mode (Top Right Docked) */
.nav-wrap.nav-vertical {
    overflow: visible;
}

.nav-wrap.nav-vertical .nav-svg-container {
    overflow: visible;
}

.nav-wrap.nav-vertical .nav-content {
    align-items: center;
}

.nav-wrap.nav-vertical .logo-row {
    width: 100%;
    justify-content: center;
    padding: 0;
}

.nav-wrap.nav-vertical .nav-links-row {
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
    padding: 10px 8px 15px;
    height: calc(100% - 46px);
    box-sizing: border-box;
}

.nav-wrap.nav-vertical .nav-item {
    height: 34px;
    width: 100%;
    justify-content: center;
    overflow: hidden;
}

.nav-wrap.nav-vertical .slide-hover,
.nav-wrap.nav-vertical .slide-rest {
    width: 100%;
    height: 32px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Larger dot + label so the options fill more of the pill (pill size unchanged) */
.nav-wrap.nav-vertical .nav-dot {
    width: 7px;
    height: 7px;
}

.nav-wrap.nav-vertical .nav-item-inner {
    width: 100%;
    transform: translateY(-16px);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    will-change: transform;
}

.nav-wrap.nav-vertical .nav-item:hover .nav-item-inner {
    transform: translateY(16px);
}

.nav-wrap.nav-vertical .slide-rest {
    opacity: 1;
}

.nav-wrap.nav-vertical .nav-label {
    font-size: 0.72rem;
    letter-spacing: 0.13em;
}

.nav-wrap.nav-vertical .nav-label--stacked {
    white-space: nowrap !important;
}

.nav-wrap.nav-vertical .nav-label--stacked .stack-word {
    display: inline;
    line-height: 1;
}

.nav-wrap.nav-vertical .nav-label--stacked .stack-word:not(:last-child)::after {
    content: " ";
}

.nav-wrap.nav-vertical .slide-hover .nav-label {
    color: var(--accent-primary);
}

.nav-wrap.nav-vertical .slide-hover .nav-dot {
    background: var(--accent-primary);
}


.nav-item {
    cursor: pointer;
    flex: 1;
    overflow: hidden;
    height: 38px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.nav-item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-19px);
}

.slide-hover,
.slide-rest {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    height: 38px;
    justify-content: center;
}

/* REST state: white */
.slide-rest .nav-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
}

.slide-rest .nav-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

/* HOVER state: teal */
.slide-hover .nav-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    color: #00d2c8;
}

.slide-hover .nav-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00d2c8;
    flex-shrink: 0;
}

.nav-item:hover .nav-item-inner {
    transform: translateY(19px);
}

.nav-item:hover .slide-rest {
    opacity: 0;
}

.slide-rest {
    transition: opacity 0.2s ease;
}

/* Keep each item's hover layer fully hidden until the item is hovered, so a
   sliver of the (teal) hover content can never peek through the mask at rest —
   this is what showed as a faint mark above the taller "Book a Call" item. */
.slide-hover {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.nav-item:hover .slide-hover {
    opacity: 1;
}

/* CTA item - teal only on hover, white at rest like all other items */
.nav-item--cta .slide-hover .nav-label {
    color: #00d2c8;
}

/* Active state */
.nav-item.active .slide-rest .nav-label {
    color: #00d2c8;
    order: 0;
}

.nav-item.active .slide-rest .nav-dot {
    background: #00d2c8;
    order: 1;
}

/* Stacked label (e.x. "Book / a Call") */
.nav-label--stacked {
    white-space: nowrap !important;
}

.nav-label--stacked .stack-word:not(:last-child)::after {
    content: " ";
}

.nav-wrap.scrolled:hover .nav-label--stacked {
    text-align: center;
}

.nav-wrap.scrolled:hover .nav-label--stacked .stack-word {
    display: block;
    line-height: 1.1;
}

.nav-wrap.scrolled:hover .nav-label--stacked .stack-word::after {
    content: none;
}

.nav-wrap.scrolled.nav-vertical:hover .nav-label--stacked {
    text-align: center;
}

.nav-wrap.scrolled.nav-vertical:hover .nav-label--stacked .stack-word {
    display: inline;
    line-height: 1.1;
}

.nav-wrap.scrolled.nav-vertical:hover .nav-label--stacked .stack-word:first-child {
    display: block;
}

.nav-wrap.scrolled.nav-vertical:hover .nav-label--stacked .stack-word:first-child::after {
    content: none;
}

.nav-wrap.scrolled.nav-vertical:hover .nav-label--stacked .stack-word::after {
    content: " ";
}

.nav-wrap.scrolled.nav-vertical:hover .nav-label--stacked .stack-word:last-child::after {
    content: none;
}

/* ============================================
   Nav - Docked (scrolled) state overrides
   When docked top-left, content is a single horizontal row.
   ============================================ */

.nav-wrap.scrolled .nav-content {
    flex-direction: row;
    align-items: stretch;
}

.nav-wrap.scrolled .logo-row {
    width: auto;
    min-width: 88px;
    flex-shrink: 0;
    justify-content: flex-start;
    padding: 0 8px 0 12px;
}

.nav-wrap.scrolled .nav-links-row {
    flex: 1;
    padding: 0 84px 0 10px;
    height: auto;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

/* ── Docked hover: expand downward, stack vertically ── */
.nav-wrap.scrolled:hover .nav-content {
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
    height: 100% !important;
    /* ensure it fills SVG */
}

.nav-wrap.scrolled:hover .logo-row {
    width: 100% !important;
    height: 46px !important;
    min-width: 0 !important;
    flex: 0 0 46px !important;
    justify-content: flex-start !important;
    padding: 0 8px 0 12px !important;
}

.nav-wrap.scrolled:hover .nav-logo-img {
    transform: translate3d(10px, 0, 0);
}

.nav-wrap.scrolled:hover .corner-dot {
    transform: translate(-1px, -50%);
}

.nav-wrap.scrolled:hover .nav-links-row {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: calc(100% - 46px) !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    padding: 8px 8px 30px !important;
    gap: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

.nav-wrap.scrolled:hover .nav-item {
    display: flex !important;
    flex: 0 0 34px !important;
    height: 34px !important;
    width: 100% !important;
    justify-content: center !important;
    overflow: hidden !important;
}


/* ============================================
   Hero Section
   ============================================ */

.hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: clamp(88px, 10vh, 128px) 0 clamp(28px, 4vh, 56px);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 42% 54% at 14% 46%, rgba(0, 184, 212, 0.08) 0%, rgba(0, 184, 212, 0.025) 45%, transparent 72%),
        radial-gradient(ellipse 58% 48% at 68% 40%, rgba(86, 239, 255, 0.055) 0%, transparent 66%);
    z-index: 0;
}

.hero-content {
    width: 100%;
    /* High cap so the hero keeps scaling on 1920/2560 monitors instead of
       freezing into a fixed-size island; only ultrawides get centred. */
    max-width: 2600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 3.4vw, 110px);
    padding-left: clamp(25px, 3.5vw, 80px);
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.hero-split {
    display: grid;
    grid-template-columns: minmax(clamp(440px, 29vw, 600px), 0.86fr) minmax(0, 2.14fr);
    align-items: center;
    gap: clamp(18px, 2vw, 32px);
    width: 100%;
}

.hero-left-col {
    width: 100%;
    max-width: none;
    text-align: left;
    /* Drop the copy stack clear of the navbar. vh-based so the gap scales with
       the viewport instead of collapsing on short screens. */
    margin: clamp(28px, 5.5vh, 72px) 0 0;
    padding: 0;
    position: relative;
    top: 15px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.hero-left-hidden {
    transform: translateX(-120%);
    opacity: 0;
}

.hero-right-col {
    min-width: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
}

/* ── Eyebrow pill above the H1 — thin champagne border, live cyan dot ── */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    /* nudge the logo + headline group up 5px; the title adds it back below so
       the CTA row does not move */
    margin-top: -5px;
    margin-bottom: 1.2rem;
    border: none;
    border-radius: 0;
    background: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, min(3.6vw, 6.4vh), 6rem);
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-primary);
    line-height: 1;
    position: relative;
    top: 0;
}

/* Home hero wordmark uses the custom Retro Floral display font */
.hero .hero-eyebrow {
    font-family: 'Retro Floral', 'Cormorant Garamond', serif;
    font-weight: 400;
    letter-spacing: 0.14em;
    gap: 10px;
}

.hero-logo {
    height: clamp(2.25rem, min(3.9vw, 6.9vh), 6.4rem);
    width: auto;
    object-fit: contain;
    margin-right: -0.08em;
}

.hero-eyebrow-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 0 rgba(0, 184, 212, 0.5);
    animation: heroDotPulse 2.4s ease-out infinite;
}

@keyframes heroDotPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 184, 212, 0.45);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(0, 184, 212, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 184, 212, 0);
    }
}

/* ── Massive editorial H1 — staggered line treatments ── */
.hero-title {
    /* Bound by width AND viewport height so the four lines plus the CTA row
       always land inside the first screen without scrolling. The 8vw/14.2vh
       pair crosses over at exactly 16:9, so every standard monitor scales off
       width identically; only shorter-than-16:9 windows fall back to height. */
    font-size: clamp(3.4rem, min(8vw, 14.2vh), 13rem);
    margin-bottom: calc(clamp(0.6rem, 1.4vh, 1rem) + 5px);
    line-height: 1;
    font-weight: 800;
    font-family: var(--font-heading);
    letter-spacing: -0.03em;
    /* Crisp pure white against the Deep Void canvas */
    color: #ffffff;
}

.hero-title .title-line {
    font-size: 1em;
    margin-bottom: clamp(2px, 0.5vh, 5px);
}
.hero-title .title-line:last-child {
    margin-bottom: 0;
}

.hero-title .title-line--ghost {
    font-size: 0.72em;
    color: #ffffff;
    letter-spacing: -0.015em;
    margin-top: 0;
    white-space: nowrap;
}

.hero-subtitle {
    font-size: clamp(1.1rem, 1.4vw, 1.35rem);
    max-width: 640px;
    margin: 0 0 var(--spacing-xl);
    color: var(--text-secondary);
    line-height: 1.7;
    font-weight: 300;
    font-family: var(--font-body);
}

.hero-subtitle strong {
    color: var(--text-primary);
    font-weight: 500;
}

.hero-cta {
    display: flex;
    gap: clamp(0.85rem, 1vw, 1.15rem);
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    top: 0;
}

/* Containing layer for all hero atmosphere — clips grid/orbs even when
   body.vsl-active forces .hero { overflow: visible } for the PiP video */
.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Soft, smooth atmospheric haze concentrated at the TOP of the hero, masked so
   it dissolves into the clean navy background lower down — a professional misty
   accent, not a full-page texture. */
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 100% 58% at 50% -8%, rgba(140, 172, 205, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 62% 44% at 78% 6%, rgba(110, 140, 188, 0.09) 0%, transparent 55%),
        radial-gradient(ellipse 54% 40% at 16% 12%, rgba(120, 150, 190, 0.07) 0%, transparent 55%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 78%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 78%);
}

.hero-gradient {
    position: absolute;
    inset: 0;
    /* Deep Void: dropped the warm-gold haze + navy tint that muddied the top.
       Only a faint electric-cyan halo remains so the brand colour breathes. */
    background:
        radial-gradient(ellipse 75% 55% at 50% -15%, rgba(0, 184, 212, 0.07) 0%, transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 30%);
}

/* Aurora / liquid-mesh glow — slow-drifting blurred light, replaces the grid */
.hero-aurora {
    position: absolute;
    inset: -15%;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 92% 82% at 50% 42%, #000 32%, transparent 84%);
    mask-image: radial-gradient(ellipse 92% 82% at 50% 42%, #000 32%, transparent 84%);
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    mix-blend-mode: screen;
    /* Calmer so the hero reads as deep void like the VSL, not a lit aurora */
    opacity: 0.5;
    will-change: transform;
}

.aurora-blob-1 {
    width: 46vw;
    height: 46vw;
    top: -6%;
    left: 6%;
    /* VSL-matched cyan (the smoke tone), dialed well down from the old 0.45 wash */
    background: radial-gradient(circle, rgba(0, 184, 212, 0.20) 0%, rgba(0, 184, 212, 0) 70%);
    animation: auroraDrift1 26s ease-in-out infinite alternate;
}

.aurora-blob-2 {
    width: 40vw;
    height: 40vw;
    top: 16%;
    right: 2%;
    /* Azure blue echoing the VSL "AD" logo gradient */
    background: radial-gradient(circle, rgba(58, 123, 213, 0.20) 0%, rgba(58, 123, 213, 0) 70%);
    animation: auroraDrift2 32s ease-in-out infinite alternate;
}

.aurora-blob-3 {
    width: 38vw;
    height: 38vw;
    bottom: -12%;
    left: 28%;
    /* Was warm gold — the green-maker when screen-blended with cyan. Now a deep
       VSL blue so the hero stays in the blue→cyan family, never green. */
    background: radial-gradient(circle, rgba(40, 92, 180, 0.16) 0%, rgba(40, 92, 180, 0) 70%);
    animation: auroraDrift3 38s ease-in-out infinite alternate;
}

@keyframes auroraDrift1 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(6vw, 5vh, 0) scale(1.16); }
    100% { transform: translate3d(-4vw, 9vh, 0) scale(1.04); }
}

@keyframes auroraDrift2 {
    0%   { transform: translate3d(0, 0, 0) scale(1.05); }
    50%  { transform: translate3d(-7vw, 4vh, 0) scale(0.9); }
    100% { transform: translate3d(3vw, -6vh, 0) scale(1.12); }
}

@keyframes auroraDrift3 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(5vw, -5vh, 0) scale(1.18); }
    100% { transform: translate3d(-6vw, -2vh, 0) scale(0.96); }
}

@media (max-width: 768px) {
    .aurora-blob {
        filter: blur(46px);
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aurora-blob {
        animation: none;
    }
}

/* Orbs retired — a single warm under-glow remains for depth */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.hero-orb-1 {
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(0, 184, 212, 0.05) 0%, transparent 70%);
    top: -260px;
    right: -160px;
    opacity: 1;
}

.hero-orb-2 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(40, 92, 180, 0.05) 0%, transparent 70%);
    bottom: -180px;
    left: -160px;
    opacity: 1;
}

.hero-orb-3 {
    display: none;
}


.title-line {
    display: block;
}

.title-gradient {
    background: linear-gradient(120deg, #00b8d4 0%, #45c4cf 70%, #7adfd3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}


/* VSL Transition State: Kill Parent Stacking Contexts & Clipping */
body.vsl-active .hero,
body.vsl-active .hero-content,
body.vsl-active .hero-split,
body.vsl-active .hero-left-col,
body.vsl-active .hero-right-col,
body.vsl-active .hero-vsl {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
    overflow: visible !important;
    /* Also drop the position+z-index stacking contexts on these ancestors.
       The docked video is position:fixed; z-index:9000, but a positioned
       ancestor with a z-index (.hero-content:2, .hero-vsl:10) traps that 9000
       inside the hero's stacking context — so later sections (z-index:2, painted
       afterwards) render OVER the docked video. Neutralizing these lets the
       video's z-index live in the root context and stay in front while scrolling.
       Safe for hero layering: .hero-content still paints above .hero-bg by DOM
       order (both become auto-z positioned elements, content comes later). */
    z-index: auto !important;
}

/* VSL Transition Container */
.hero-eyebrow span {
    display: inline-block;
    position: relative;
    top: 5px;
    left: -3px;
    color: var(--cyan, #00b8d4);
}

.hero-vsl {
    /* Fill the right column, expanding diagonally to the left and downwards. */
    width: 100%;
    max-width: clamp(680px, 66vw, 1140px);
    position: relative;
    z-index: 10;
    margin-left: 0;
}

/* The actual video wrapper */
.vsl-wrapper {
    position: relative;
    /* Sizing context for the play button, so it scales with the frame as GSAP
       shrinks it into the corner dock. */
    container-type: inline-size;
    width: 100%;
    background: rgba(8, 14, 18, 0.48);
    border: none;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    left: 0;
    top: 0;
    transform: none;
    will-change: transform, width, height, left, top;
}

/* PIP Active State (Managed by GSAP) */
#vsl-main-element.vsl-pip-active {
    position: fixed;
    z-index: 9000;
    margin: 0;
    pointer-events: auto;
    background: rgba(8, 14, 18, 0.48);
    /* No frame outline. This rule wins over .vsl-wrapper via the id and the JS
       keeps the class on even in the hero state, so it has to be cleared here too. */
    border: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    max-width: none !important;
    border-radius: 12px;
    overflow: hidden;
    opacity: 1;
}

/* Remove inner wrapper border during PiP to avoid double borders */
#vsl-main-element.vsl-pip-active .vsl-thumbnail-video {
    border-radius: 0;
}

/* Keep the compact PiP play pill fully inside the thumbnail when its label
   opens on hover. The full-size hero keeps the wider interaction. */
#vsl-main-element.vsl-pip-active .vsl-play-btn {
    --btn-open: calc(var(--btn-w) + var(--size) * 0.98);
}



.vsl-glow {
    position: absolute;
    inset: -20px;
    background: var(--accent-gradient);
    border-radius: var(--radius-xl);
    opacity: 0.15;
    z-index: -1;
}

@keyframes vslGlow {
    0% {
        opacity: 0.2;
        transform: scale(0.98);
    }

    100% {
        opacity: 0.4;
        transform: scale(1.02);
    }
}

.vsl-frame {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}



.vsl-video {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}



.vsl-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vsl-thumbnail {
    position: absolute;
    inset: 0;
    background:
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><rect fill="%23111118"/><circle cx="960" cy="540" r="400" fill="%23181820"/><circle cx="960" cy="540" r="200" fill="%231a1a24"/></svg>');
    background-size: cover;
    background-position: center;
}

.vsl-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 15, 0.5) 100%);
}

.vsl-play-btn {
    position: relative;
    z-index: 10;
    width: 80px;
    height: 80px;
    /* Clean frosted-white disc, no color glow or pulse ring - reads clearly
       against any thumbnail without fighting its own colors. */
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.legal-link:hover {
    background-position: 0% 0;
    text-decoration-color: var(--accent-primary);
}

.legal-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.legal-modal.is-open {
    display: flex !important;
    pointer-events: all !important;
    opacity: 1 !important;
}

.legal-modal__backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.82) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.vsl-play-btn:hover {
    transform: scale(1.08);
    background: #fff;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
}

.vsl-play-btn svg {
    width: 40px;
    height: 40px;
    margin-left: 5px;
    color: #0a0c10;
}

.vsl-duration {
    position: absolute;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    padding: 0.375rem 0.75rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 10;
}

.vsl-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.vsl-badge svg {
    color: #22c55e;
    flex-shrink: 0;
}

/* Hero CTA */
.hero-cta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-md);
    margin-top: clamp(1rem, 2.2vh, 1.6rem);
    margin-bottom: 0;
    flex-wrap: nowrap;
}

.hero-cta .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Hero primary CTA — squarer footprint + a deeper, less neon teal */
.hero-cta .btn-glow.btn-lg {
    padding: 1.5rem 2rem;
    background: #00b8d4;
    border-color: #00b8d4;
}

.hero-cta .btn-glow.btn-lg:hover {
    --btn-bg: #00b8d4;
    background: #00b8d4;
    border-color: #00b8d4;
}

/* Home hero matches the Services CTA motion: its arrow is revealed only while
   the primary button lifts diagonally. The secondary button shares the lift. */
.hero-cta .btn-glow svg {
    width: 20px;
    height: 20px;
    max-width: 0;
    margin-left: -0.6rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: max-width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease;
}

.hero-cta .btn-glow:hover svg {
    max-width: 20px;
    margin-left: 0;
    opacity: 1;
    transform: translateX(0);
}

.hero-cta .btn-ghost svg {
    width: 20px;
    height: 20px;
    max-width: 0;
    margin-left: -0.6rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: max-width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease;
}

.hero-cta .btn-ghost:hover svg,
.hero-cta .btn-ghost:focus-visible svg {
    max-width: 20px;
    margin-left: 0;
    opacity: 1;
    transform: translateX(0);
}

.hero-cta .btn-ghost:hover {
    transform: translate(3px, -3px);
}

/* Desktop hero CTAs scale with the headline/video composition so the primary
   action remains the longest visual line at every desktop width. */
@media (min-width: 769px) {
    .hero-cta .btn.btn-lg {
        min-height: clamp(54px, 6.5vh, 66px);
        padding: clamp(1rem, 1.8vh, 1.35rem) clamp(2.5rem, 3.2vw, 3.8rem);
        font-size: clamp(0.95rem, 1.05vw, 1.15rem);
    }
}



.hero-vsl .vsl-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(8, 14, 18, 0.38);
}

/* Feather the VSL edges into the pitch-black page — a faint inner vignette so
   the rounded video reads as a window cut into the void, not a boxed panel. */
.hero-vsl .vsl-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 12px 1px rgba(0, 0, 0, 0.10);
    z-index: 2;
}

.hero-vsl .vsl-thumbnail-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 1;
    /* Darken + pull the neon out of the footage so the baked-in cyan rings /
       panel outlines read as deep blue, in line with the darker site. */
    filter: brightness(1.08) saturate(0.92);
    transition: opacity var(--transition-base);
}

.hero-vsl .vsl-wrapper:hover .vsl-thumbnail-video {
    opacity: 1;
}

.hero-vsl .vsl-play-btn {
    position: absolute;
    top: 50%;
    right: 50%;
    /* Sized off the video frame via container units, so the button rides the
       frame down as it docks into the corner. Prevents over-shrinking when docked. */
    /* Slightly more restrained than the original control so the mark behind
       it remains the focal point on the full hero video. */
    --size: clamp(54px, 13cqw, 80px);
    --btn-h: calc(var(--size) * 0.65);
    /* Width is narrower than the sizing base so the box stays compact without
       touching the height, which keys off --size directly. */
    --btn-w: calc(var(--size) * 0.88);
    --btn-icon: calc(var(--btn-h) * 0.48);
    /* How far the box opens is proportional too, so the label still fits the
       frame at the docked size. */
    --btn-open: calc(var(--btn-w) + var(--size) * 1.15);
    --btn-r: calc(var(--btn-h) * 0.17);
    transform: translate(calc(var(--btn-w) / 2), calc(-1 * var(--btn-h) / 2)) skewX(-14deg);
    z-index: 3;
    /* Laid out at its open width from the start and clipped back to the closed
       box. Hover animates the clip, not the width, so nothing relayouts and the
       corner radius is not recomputed each frame: that per-frame recalc on a
       skewed box is what made the edges tremble. */
    width: var(--btn-open);
    clip-path: inset(0 0 0 calc(var(--btn-open) - var(--btn-w)) round var(--btn-r));
    height: var(--btn-h);
    /* The right padding is exactly the rest-state gap on either side of the
       triangle, so pinning the content to the right edge still leaves the
       triangle optically centred while the box is closed. The left padding is
       only ever seen once the label has opened the box up. */
    padding: 0 calc((var(--btn-w) - var(--btn-icon)) / 2) 0 calc(var(--btn-h) * 0.2);
    /* Player-chrome corners: tight relative to the box, not a squircle */
    border-radius: var(--btn-r);
    border: none !important;
    outline: none !important;
    background: #ffffff;
    color: #0a0c10;
    cursor: pointer;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    /* Reversed row, so flex-start packs against the right edge: the triangle
       holds its position while the box opens leftward. */
    justify-content: flex-start;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: clip-path 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    /* drop-shadow tracks the clipped silhouette; a box-shadow would be cut away
       by the clip along with the hidden part of the box. */
    box-shadow: none;
    filter: drop-shadow(0 9px 16px rgba(0, 0, 0, 0.45));
}

/* Only the button itself opens up, not a hover anywhere on the video. The clip
   is what expands, and it also gates hit-testing, so the hidden part of the box
   is not hoverable while the button is closed. */
.hero-vsl .vsl-play-btn:hover {
    clip-path: inset(0 0 0 0 round var(--btn-r));
    background: #ffffff;
    border: none !important;
    outline: none !important;
}

.hero-vsl .vsl-play-btn svg {
    flex: 0 0 auto;
    width: var(--btn-icon);
    height: var(--btn-icon);
    transform: skewX(14deg);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Just a hint of travel, so the triangle reacts without sliding across the box */
.hero-vsl .vsl-play-btn:hover svg {
    transform: skewX(14deg) translateX(-3px);
}

/* The label keeps a fixed slot beside the triangle and flies in as one piece,
   travelling left to right into that slot while the box itself opens the other
   way. At rest it sits outside the closed box and is clipped away by the
   button's own overflow. */
.vsl-play-btn-label {
    display: inline-block;
    flex: 0 0 auto;
    /* Type and gap scale with the button so the word still fits once the frame
       docks into the corner. */
    margin-right: calc(var(--btn-h) * 0.2);
    white-space: nowrap;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: max(11px, calc(var(--btn-h) * 0.27));
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0a0c10;
    opacity: 0;
    transform: skewX(14deg) translateX(-32px);
    transition: opacity 0.26s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-vsl .vsl-play-btn:hover .vsl-play-btn-label {
    opacity: 1;
    transform: skewX(14deg) translateX(0);
    /* Let the box open first, then run the word across */
    transition-delay: 0.08s;
}

/* Modal Styles */
.vsl-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.nav-links-row {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vsl-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.vsl-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.vsl-modal-content {
    position: relative;
    width: min(94vw, calc(88vh * (16 / 9)));
    aspect-ratio: 16 / 9;
    max-height: 88vh;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 16px;
    overflow: hidden;
    transform: scale(0.92) translateY(10px);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.vsl-modal.is-open .vsl-modal-content {
    transform: scale(1) translateY(0);
}

/* Shared corner-button chip: glass circle, used by the close (X) and the
   fullscreen expand button so both read as one consistent control family. */
.vsl-corner-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(10, 12, 15, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: white;
    cursor: pointer;
    padding: 0;
    opacity: 0.88;
    transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.vsl-corner-btn:hover {
    opacity: 1;
    background: rgba(20, 24, 28, 0.75);
    transform: scale(1.08);
}

.vsl-corner-btn svg {
    width: 19px;
    height: 19px;
}

.vsl-modal-close {
    position: fixed;
    top: 20px;
    left: 24px;
    z-index: 10002;
}

.vsl-modal-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    border: none;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    background: transparent;
}

.vsl-modal-video-container video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
    cursor: pointer;
}

/* True fullscreen: let the container fill the whole screen and the video scale
   up to fill it (the default max-height would otherwise leave the video
   small + letterboxed inside a big black fullscreen frame). */
.vsl-modal-video-container:fullscreen,
.vsl-modal-video-container:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
}

.vsl-modal-video-container:fullscreen video,
.vsl-modal-video-container:-webkit-full-screen video {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

/* ── Custom VSL player controls ── */
.vsl-controls {
    position: absolute;
    inset: 0;
    padding: 18px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, transparent 24%, transparent 58%, rgba(0, 0, 0, 0.78) 100%);
    z-index: 4;
    opacity: 1;
    transition: opacity 0.35s ease;
    /* .vsl-modal is inert (pointer-events:none) while closed, but this modal
       stays in the DOM - without scoping to .is-open, auto here would punch
       a click-through hole over whatever sits behind the closed modal. */
    pointer-events: none;
}

.vsl-modal.is-open .vsl-controls {
    pointer-events: auto;
}

/* Fade the chrome out during uninterrupted playback (JS toggles this after a
   couple seconds of no pointer movement) so the video plays clean, same as
   the reference player - controls return instantly on any hover/move. */
.vsl-controls.is-idle {
    opacity: 0;
    pointer-events: none;
}

/* Custom VSL player controls - White Card/Pill aesthetic matching reference UI */

.vsl-corner-btn--close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 34px;
    height: 34px;
    background: #ffffff;
    color: #111111;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.vsl-corner-btn--close:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

.vsl-corner-btn--close svg {
    width: 15px;
    height: 15px;
    stroke: #111111;
}

.vsl-corner-btn--fs {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    background: #ffffff;
    color: #111111;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.vsl-corner-btn--fs:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

.vsl-corner-btn--fs svg {
    width: 16px;
    height: 16px;
    stroke: #111111;
}

.vsl-bottombar {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vsl-ctrl-btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #ffffff;
    border: none;
    color: #111111;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.vsl-ctrl-btn:hover {
    background: #f5f5f5;
    transform: scale(1.06);
}

.vsl-ctrl-btn svg {
    width: 20px;
    height: 20px;
    color: #111111;
    fill: #111111;
}

.vsl-ic-pause { display: none; }
.vsl-controls.is-playing .vsl-ic-play { display: none; }
.vsl-controls.is-playing .vsl-ic-pause { display: block; }

.vsl-speaker-slash { display: none; }
.vsl-controls.is-muted .vsl-speaker-slash { display: block; }

/* Double music note reads bigger than the old single note at the same box. */
.vsl-ic-music {
    width: 21px;
    height: 21px;
}

/* Mute state draws a diagonal bar across the note. The "cut" line is the white
   backing that separates the bar from the note strokes it crosses. */
.vsl-mute-slash,
.vsl-mute-slash-cut {
    display: none;
    fill: none;
    stroke-linecap: round;
}

.vsl-mute-slash-cut {
    stroke: #ffffff;
    stroke-width: 96;
}

.vsl-mute-slash {
    stroke: #111111;
    stroke-width: 46;
}

.vsl-controls.is-muted .vsl-mute-slash,
.vsl-controls.is-muted .vsl-mute-slash-cut {
    display: block;
}

.vsl-ctrl-btn:hover .vsl-mute-slash-cut { stroke: #f5f5f5; }

.vsl-progress {
    position: relative;
    flex: 1 1 auto;
    height: 34px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.vsl-progress-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

.vsl-progress-fill {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 999px;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

.vsl-progress-pill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    padding: 0 5px;
    border-radius: 4px;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Hero stacks to a single column on tablet/mobile screens: ADZIO eyebrow +
   VSL video share the top row, headline and CTAs sit below. */
@media (max-width: 768px) {
    .hero {
        /* Clears the fixed nav bar with real breathing room, so the video frame
           no longer sits right up against it. */
        padding-top: 84px;
        /* Hold the fold: at `auto` the hero ended mid-screen and the logo
           carousel was already visible on load. */
        min-height: 100svh;
        padding-bottom: clamp(48px, 8vh, 72px);
    }

    /* ribbit.dk-style mobile header: brand on the LEFT, video pinned top-RIGHT
       (which the scroll script then shrinks/docks into the corner). A 2-col grid
       puts brand + video on one top row, with the headline and CTAs below. */
    .hero-split {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "video video"
            "title title"
            "cta   cta";
        align-items: center;
        column-gap: 14px;
        row-gap: clamp(12px, 3.5vw, 18px);
        min-height: 0;
    }

    /* Dissolve the wrapper so eyebrow/title/CTA become direct grid items */
    .hero-left-col {
        display: contents;
    }
    /* The desktop scroll-away slide (translateX via JS) hides nothing useful on
       mobile and can't apply to a display:contents box — neutralize it. */
    .hero-left-col.hero-left-hidden {
        transform: none;
        opacity: 1;
    }

    /* Top-left: ADZIO brand, vertically centred against the video thumbnail */
    .hero .hero-eyebrow {
        display: none;
    }

    /* The logo PNG has built-in whitespace around the "AD" mark, so a plain
       gap:0 still leaves a visible break — pull "ZIO" in to close it, so
       AD + ZIO reads as one continuous wordmark. */
    .hero-eyebrow .hero-logo {
        margin-right: -0.3em;
    }

    .hero-eyebrow-dot {
        width: 12px;
        height: 12px;
    }

    /* Top-right: VSL video — starts here next to the brand, then the scroll
       script keeps it pinned and shrinks it toward the corner. */
    .hero-right-col {
        grid-area: video;
        justify-self: end;
        align-self: start;
        width: clamp(210px, 58vw, 280px);
        /* Sits lower and closer to the right edge, clear of the nav bar */
        margin: clamp(10px, 2vh, 20px) calc(-1 * clamp(6px, 2vw, 14px)) 0 0;
    }

    .hero-vsl {
        width: 100%;
        max-width: none;
        margin-left: 0;
    }

    /* Mobile video frame: less rounded, no outline. Applies to both the in-flow
       start state and the docked PiP. */
    .vsl-wrapper,
    #vsl-main-element.vsl-pip-active {
        border-radius: 12px;
        border: none;
    }

    /* Headline */
    .hero-title {
        grid-area: title;
        font-size: clamp(2.85rem, 12vw, 4.2rem);
        line-height: 0.98;
        margin: clamp(8px, 1.8vh, 16px) 0 0;
    }

    .hero-title .title-line {
        white-space: nowrap;
    }

    .hero-title .title-line--ghost {
        font-size: 0.85em;
    }

    /* CTA buttons side-by-side on mobile */
    .hero-cta {
        grid-area: cta;
        margin-top: clamp(0.75rem, 2vh, 1.25rem);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(6px, 1.8vw, 10px);
        width: 100%;
        max-width: 100%;
    }

    .hero-cta .btn {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .hero-cta .btn.btn-lg,
    .hero-cta .btn-glow.btn-lg,
    .hero-cta .btn-ghost.btn-lg {
        min-height: 50px;
        padding: 0.72rem clamp(0.7rem, 3vw, 1.3rem);
        font-size: clamp(0.74rem, 2.9vw, 0.92rem);
        letter-spacing: 0.02em;
    }

    .hero-cta .btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }
}

/* Narrowest phones: at the larger button size the two CTAs no longer fit on one
   line, so they stack full width instead of the second one running off screen. */
@media (max-width: 380px) {
    .hero-cta {
        flex-wrap: wrap;
    }

    .hero-cta .btn.btn-lg,
    .hero-cta .btn-glow.btn-lg,
    .hero-cta .btn-ghost.btn-lg {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Tablet-shaped viewports still use the stacked mobile hero, but a phone-sized
   video frame looks lost in that much width. Scale the frame with the viewport
   instead of holding it at the phone cap. */
@media (min-width: 600px) and (max-width: 768px) {
    .hero-right-col {
        width: clamp(330px, 56vw, 440px);
    }
}

/* Short desktop viewports: scale the left hero stack by available height and
   reclaim the generous vertical spacing so the full headline and CTA row remain
   inside the first viewport on wide laptop/desktop screens. */
@media (min-width: 769px) and (max-height: 980px) {
    .hero {
        padding-top: clamp(82px, 9.5vh, 104px);
        padding-bottom: clamp(18px, 2.5vh, 32px);
    }

    .hero-eyebrow {
        margin-bottom: clamp(0.75rem, 1.8vh, 1.35rem);
    }

    .hero-title .title-line--ghost {
        font-size: 0.66em;
    }

    .hero-cta .btn.btn-lg {
        padding: clamp(0.88rem, 1.45vh, 1.05rem) clamp(1.1rem, 1.7vw, 1.65rem);
        font-size: clamp(0.88rem, 0.95vw, 0.98rem);
    }

    /* Reclaim the height the trimmed padding freed up so the frame still fills
       the right column instead of leaving a side gap. */
    .hero-vsl {
        max-width: min(62vw, calc((100svh - 150px) * 16 / 9));
    }
}

.stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    text-align: center;
    min-width: 0;
    overflow: visible;
}

.stat-visual {
    position: relative;
    width: min(100%, 290px);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.stat-visual::before {
    content: '';
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 165, 181, 0.24) 0%, rgba(59, 165, 181, 0.08) 40%, transparent 74%);
    filter: blur(18px);
    animation: stat-core-breathe 4.5s ease-in-out infinite;
    z-index: 0;
}

.stat-visual::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 2px;
    height: 26px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, rgba(107, 242, 255, 0.9), transparent);
    box-shadow: 0 0 18px rgba(59, 165, 181, 0.6);
    z-index: 1;
}

.stat-core-glow {
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(112, 250, 255, 0.26), rgba(112, 250, 255, 0.05) 45%, transparent 74%);
    filter: blur(11px);
    z-index: 1;
    animation: stat-core-breathe 3.4s ease-in-out infinite reverse;
}

.stat-number-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.14em;
    z-index: 8;
}

.stat-number {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(3rem, 4.1vw, 4.65rem);
    font-weight: 900;
    color: var(--text-primary);
    line-height: 0.9;
    letter-spacing: -0.06em;
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.3), 0 0 40px rgba(59, 165, 181, 0.16);
}

.stat-suffix {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1.85rem, 2.6vw, 2.7rem);
    font-weight: 800;
    background: linear-gradient(135deg, #4beaff 0%, #1eaec8 60%, #ffe4a5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 0.9;
    text-shadow: none;
}

.stat-label {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-size: clamp(0.92rem, 1vw, 1.12rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.25;
    max-width: 300px;
    color: var(--dust-grey);
    text-shadow: 0 0 24px rgba(255, 255, 255, 0.18);
}

.stat-ring {
    position: absolute;
    left: 50%;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0.95;
}

.stat-ring::before,
.stat-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.stat-ring--top,
.stat-ring--bottom {
    width: 60%;
    height: 12%;
    border: 2px solid rgba(111, 244, 255, 0.85);
    box-shadow: 0 0 24px rgba(59, 165, 181, 0.45), inset 0 0 18px rgba(111, 244, 255, 0.12);
}

.stat-ring--top::before,
.stat-ring--bottom::before {
    inset: 5px 8px;
    border: 1px solid rgba(164, 255, 255, 0.55);
}

.stat-ring--top::after,
.stat-ring--bottom::after {
    inset: -8px 16px;
    border: 1px dashed rgba(111, 244, 255, 0.25);
}

.stat-ring--top {
    top: 19%;
    animation: stat-ellipse-spin 12s linear infinite;
}

.stat-ring--bottom {
    bottom: 20%;
    animation: stat-ellipse-spin 10s linear infinite reverse;
}

.stat-ring--halo {
    top: 24%;
    width: 52%;
    height: 52%;
    border: 1px solid rgba(170, 248, 255, 0.18);
    box-shadow: 0 0 32px rgba(59, 165, 181, 0.15);
    animation: stat-halo-pulse 4.8s ease-in-out infinite;
}

.stat-ring--halo::before {
    inset: 10px;
    border: 1px solid rgba(111, 244, 255, 0.12);
}

.stat-sphere {
    position: absolute;
    inset: 25%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 28%, rgba(201, 255, 255, 0.22), transparent 24%),
        radial-gradient(circle at 50% 50%, rgba(90, 215, 228, 0.16), rgba(14, 24, 30, 0.2) 60%, transparent 72%);
    box-shadow: inset 0 0 50px rgba(126, 246, 255, 0.08);
    z-index: 1;
}

.stat-sphere::before {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 1px solid rgba(186, 255, 255, 0.2);
    opacity: 0.7;
}

.stat-sphere::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image:
        radial-gradient(circle, rgba(192, 255, 255, 0.28) 1px, transparent 1.4px),
        radial-gradient(circle, rgba(192, 255, 255, 0.22) 1px, transparent 1.5px);
    background-size: 18px 18px, 22px 22px;
    background-position: 0 0, 8px 10px;
    opacity: 0.22;
    mask: radial-gradient(circle, rgba(0, 0, 0, 0.9) 62%, transparent 72%);
}

.stat-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.stat-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(185, 255, 255, 0.75);
    box-shadow: 0 0 14px rgba(111, 244, 255, 0.75);
    animation: stat-particle-drift 5s ease-in-out infinite;
}

.stat-particles span:nth-child(1) {
    top: 20%;
    left: 20%;
}

.stat-particles span:nth-child(2) {
    top: 26%;
    right: 24%;
    width: 4px;
    height: 4px;
    animation-delay: -1s;
}

.stat-particles span:nth-child(3) {
    bottom: 32%;
    left: 22%;
    width: 5px;
    height: 5px;
    animation-delay: -2s;
}

.stat-particles span:nth-child(4) {
    bottom: 28%;
    right: 18%;
    width: 4px;
    height: 4px;
    animation-delay: -2.8s;
}

.stat-particles span:nth-child(5) {
    top: 40%;
    left: 50%;
    width: 3px;
    height: 3px;
    animation-delay: -1.8s;
}

.stat-bars {
    position: absolute;
    left: 50%;
    bottom: 23%;
    width: 42%;
    height: 34%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 9px;
    transform: translateX(-50%);
    z-index: 4;
}

.stat-bars span {
    width: calc(25% - 8px);
    height: var(--bar-height);
    border-radius: 14px 14px 4px 4px;
    background: linear-gradient(180deg, rgba(224, 255, 255, 0.98) 0%, rgba(103, 236, 255, 0.78) 36%, rgba(50, 162, 185, 0.34) 100%);
    box-shadow: 0 0 24px rgba(59, 165, 181, 0.48);
    animation: stat-bar-rise 2.6s ease-in-out infinite;
    animation-delay: var(--delay);
    position: relative;
}

.stat-bars span::before {
    content: '';
    position: absolute;
    inset: 10% 18% auto;
    height: 28%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
    opacity: 0.7;
}

.stat-wire {
    position: absolute;
    inset: 18%;
    clip-path: polygon(50% 0%, 82% 10%, 100% 34%, 94% 72%, 72% 100%, 28% 100%, 6% 72%, 0% 34%, 18% 10%);
    border: 1px solid rgba(111, 244, 255, 0.54);
    box-shadow: 0 0 14px rgba(59, 165, 181, 0.26);
    z-index: 2;
    background: transparent;
}

.stat-wire--one {
    inset: 18%;
    border-color: rgba(111, 244, 255, 0.62);
    animation: stat-wire-spin 10s linear infinite;
}

.stat-wire--two {
    inset: 24%;
    border-color: rgba(255, 146, 233, 0.48);
    animation: stat-wire-spin 8s linear infinite reverse;
}

.stat-wire--three {
    inset: 30%;
    border-color: rgba(255, 214, 132, 0.46);
    animation: stat-wire-spin 6.8s linear infinite;
}

.stat-gauge,
.stat-gauge-halo {
    position: absolute;
    border-radius: 50%;
    z-index: 2;
}

/* ── Satisfaction: React-logo orbital atom ── */

/* Clear ALL pseudo-elements and old visuals */
.stat--satisfaction .stat-visual::before,
.stat--satisfaction .stat-visual::after {
    display: none;
}

/* Halos - wiped clean */
.stat--satisfaction .stat-gauge-halo--one,
.stat--satisfaction .stat-gauge-halo--two {
    background: none;
    border: none;
    box-shadow: none;
    animation: none;
}

/* Soft nucleus glow sitting behind the number */
.stat--satisfaction .stat-core-glow {
    display: block;
    inset: 38%;
    background: radial-gradient(circle, rgba(0, 184, 212, 0.60) 0%, rgba(0, 184, 212, 0.14) 45%, transparent 70%);
    filter: none;
    z-index: 3;
    animation: none;
}

/* ── Base orbital ring - all three share this ── */
.stat--satisfaction .stat-gauge {
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: none !important;
    inset: 6%;
    border-radius: 50%;
    border: 2px solid rgba(0, 184, 212, 0.92);
    box-shadow:
        0 0 7px rgba(0, 184, 212, 0.85),
        0 0 22px rgba(0, 184, 212, 0.40);
    z-index: 2;
}

/* Ring 1 - 0° start */
.stat--satisfaction .stat-gauge--outer {
    animation: react-orbit-A 10s linear infinite;
}

/* Ring 2 - 60° ahead (React logo even spacing) */
.stat--satisfaction .stat-gauge--middle {
    animation: react-orbit-B 10s linear infinite;
}

/* Ring 3 - 120° ahead */
.stat--satisfaction .stat-gauge--inner {
    animation: react-orbit-C 10s linear infinite;
}

/* Number above everything */
.stat--satisfaction .stat-number-wrapper {
    position: relative;
    z-index: 10;
}

/* Hide equalizer bars */
.stat-eq {
    display: none;
}

/* ── React-logo keyframes: rotate() THEN scaleY() so each ring is a tilted ellipse ── */
@keyframes react-orbit-A {
    from {
        transform: rotate(0deg) scaleY(0.27);
    }

    to {
        transform: rotate(360deg) scaleY(0.27);
    }
}

@keyframes react-orbit-B {
    from {
        transform: rotate(60deg) scaleY(0.27);
    }

    to {
        transform: rotate(420deg) scaleY(0.27);
    }
}

@keyframes react-orbit-C {
    from {
        transform: rotate(120deg) scaleY(0.27);
    }

    to {
        transform: rotate(480deg) scaleY(0.27);
    }
}

.stat-side-icon {
    position: absolute;
    width: 38px;
    height: 38px;
    color: rgba(195, 244, 255, 0.9);
    z-index: 7;
    opacity: 0.92;
    filter: drop-shadow(0 0 16px rgba(111, 244, 255, 0.24));
    animation: stat-icon-float 4.2s ease-in-out infinite;
}

.stat-side-icon svg {
    width: 100%;
    height: 100%;
}

.stat-side-icon--lead {
    right: 10%;
    bottom: 20%;
}

.stat-side-icon--roi {
    right: 12%;
    bottom: 17%;
    color: rgba(217, 232, 255, 0.86);
    animation-delay: -1s;
}

.stat-side-icon--satisfaction {
    right: 9%;
    bottom: 12%;
    color: rgba(225, 236, 243, 0.92);
    animation-delay: -2s;
}

.stat--roi .stat-visual::before {
    background: radial-gradient(circle, rgba(255, 136, 242, 0.14) 0%, rgba(111, 244, 255, 0.16) 46%, transparent 74%);
}

/* Bottom connector line from gauge to label */
.stat--satisfaction .stat-visual::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 18px;
    background: linear-gradient(180deg, rgba(103, 236, 255, 0.5), transparent);
    z-index: 10;
}

@keyframes stat-core-breathe {

    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

@keyframes stat-ellipse-spin {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

@keyframes stat-bar-rise {

    0%,
    100% {
        transform: scaleY(0.88) translateY(2px);
        opacity: 0.72;
    }

    50% {
        transform: scaleY(1.08) translateY(-6px);
        opacity: 1;
    }
}

@keyframes stat-wire-spin {
    from {
        transform: rotate(0deg) scale(0.97);
    }

    50% {
        transform: rotate(180deg) scale(1.02);
    }

    to {
        transform: rotate(360deg) scale(0.97);
    }
}

@keyframes stat-gauge-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes stat-eq-pulse {

    0%,
    100% {
        transform: scaleY(0.75);
        opacity: 0.65;
    }

    50% {
        transform: scaleY(1.15);
        opacity: 1;
    }
}

@keyframes stat-halo-pulse {

    0%,
    100% {
        transform: translateX(-50%) scale(0.98);
        opacity: 0.55;
    }

    50% {
        transform: translateX(-50%) scale(1.03);
        opacity: 0.95;
    }
}

@keyframes stat-particle-drift {

    0%,
    100% {
        transform: translateY(0px) scale(0.9);
        opacity: 0.55;
    }

    50% {
        transform: translateY(-10px) scale(1.15);
        opacity: 1;
    }
}

@keyframes stat-icon-float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Hero Scroll Indicator */
.hero-scroll {
    position: absolute;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.scroll-indicator {
    width: 24px;
    height: 40px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.scroll-dot {
    width: 4px;
    height: 8px;
    background: var(--accent-primary);
    border-radius: var(--radius-full);
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {

    0%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(12px);
        opacity: 0.3;
    }
}

/* ============================================
   Logo Slider - Infinite Scroll Carousel
   ============================================ */

.logo-slider {
    padding: clamp(5.5rem, 11vh, 9.5rem) 0;
    background: transparent;
    overflow: hidden;
    position: relative;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.section-blend {
    display: none;
}

.logo-slider-shell {
    width: min(100%, 1800px);
    margin: 0 auto;
    padding: 0 clamp(20px, 2.5vw, 36px);
}

.slider-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem);
    text-align: center;
}

.slider-label {
    text-align: center;
    font-family: var(--font-heading);
    font-size: clamp(0.82rem, 1.9vw, 1.65rem);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0;
    letter-spacing: -0.01em;
    max-width: none;
    white-space: nowrap;
}

/* Let the trust heading wrap on phones instead of forcing one overflowing line */
@media (max-width: 640px) {
    .slider-label {
        white-space: normal;
        max-width: 22ch;
        margin-inline: auto;
        font-size: 1.3rem;
    }
}

.slider-label .slider-label-em {
    color: var(--cyan);
}

.text-glow,
.slider-label .text-gradient,
.cta-title .text-gradient {
    display: inline-block;
    vertical-align: baseline;
    text-shadow: none;
    filter: none;
}

.logo-slider-viewport {
    width: 100%;
    overflow: hidden;
    margin: 0 auto clamp(2.75rem, 4.8vw, 4.25rem);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.logo-slider-viewport:last-child {
    margin-bottom: 0;
}

.slide-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    margin-bottom: 0;
    will-change: transform;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.logo-slider:not(.is-ready) .slide-track {
    opacity: 0;
}

/* Top row - scrolls left */
.slide-track-top {
    animation: scrollLeft var(--carousel-duration, 20s) linear infinite;
}

/* Bottom row - scrolls right */
.slide-track-bottom {
    animation: scrollRight var(--carousel-duration, 15s) linear infinite;
}

/* Pause when off-screen (set by JS IntersectionObserver via class) */
.slide-track.is-paused-offscreen {
    animation-play-state: paused;
}

@keyframes scrollLeft {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(calc(-1 * var(--carousel-shift, 0px)), 0, 0);
    }
}

@keyframes scrollRight {
    0% {
        transform: translate3d(calc(-1 * var(--carousel-shift, 0px)), 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.slide {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: clamp(55px, 5.5vw, 85px);
    padding: 0.95rem 0;
    transition: transform 0.22s ease;
    transform-origin: center;
}

/* Scale up individual logo on hover */
.slide.is-hovered {
    transform: scale(1.07);
    z-index: 10;
}

.slide img {
    height: clamp(44px, 4.4vw, 78px);
    width: auto;
    max-width: 240px;
    object-fit: contain;
    filter: grayscale(1) brightness(1.7) contrast(0.9);
    opacity: 0.55;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.slide.is-hovered img {
    filter: none;
    opacity: 1;
}

/* Mobile: keep the trust logos large + legible (bigger, prominent carousel) */
@media (max-width: 768px) {
    .slide {
        margin-right: 32px;
        padding: 0.55rem 0;
    }

    .slide img {
        height: 38px;
        max-width: 130px;
    }
}

@media (max-width: 480px) {
    .slide {
        margin-right: 26px;
    }

    .slide img {
        height: 34px;
        max-width: 112px;
    }
}

/* ============================================
   Problem Section
   ============================================ */

.problem-section {
    padding: clamp(2rem, 4vh, 3.5rem) 0 6rem;
}

.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.section-tag {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(17, 157, 164, 0.15);
    border: 1px solid var(--dark-cyan);
    border-radius: var(--radius-full);
    color: var(--dark-cyan);
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 20px rgba(17, 157, 164, 0.5);
    backdrop-filter: blur(4px);
    text-align: center;
}

.hero-badge {
    display: inline-block;
    color: var(--accent-primary);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    text-align: center;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.section-tag {
    margin: 0 auto 2rem auto;
}

.section-title {
    margin-bottom: var(--spacing-md);
}

.section-subtitle {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

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

@media (max-width: 992px) {
    .problem-grid-spotlight {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.spotlight-card {
    position: relative;
}

.spotlight-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22rem;
    height: 22rem;
    opacity: 1;
    transition: none;
    pointer-events: none;
}

.spotlight-card[data-color="red"] .spotlight-bg {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.2) 0%, transparent 70%);
}

.spotlight-card[data-color="amber"] .spotlight-bg {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%);
}

.spotlight-card[data-color="cyan"] .spotlight-bg {
    background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, transparent 70%);
}

.spotlight-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.badge-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}

.badge-glow {
    position: absolute;
    inset: -2rem;
    opacity: 0.6;
    border-radius: 50%;
}

.spotlight-card[data-color="red"] .badge-glow {
    background: conic-gradient(from 0deg, #ef4444, #f97316, transparent, transparent, #ef4444);
}

.spotlight-card[data-color="amber"] .badge-glow {
    background: conic-gradient(from 0deg, #f59e0b, #eab308, transparent, transparent, #f59e0b);
}

.spotlight-card[data-color="cyan"] .badge-glow {
    background: conic-gradient(from 0deg, #06b6d4, #3b82f6, transparent, transparent, #06b6d4);
}



@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.badge-blur {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0.4;
}

.spotlight-card[data-color="red"] .badge-blur {
    background: linear-gradient(135deg, #ef4444, #f97316, #ef4444);
}

.spotlight-card[data-color="amber"] .badge-blur {
    background: linear-gradient(135deg, #f59e0b, #eab308, #f59e0b);
}

.spotlight-card[data-color="cyan"] .badge-blur {
    background: linear-gradient(135deg, #06b6d4, #3b82f6, #06b6d4);
}

.badge-icon {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.badge-icon.red {
    background: linear-gradient(135deg, #ef4444, #f97316, #ef4444);
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.6);
}

.badge-icon.amber {
    background: linear-gradient(135deg, #f59e0b, #eab308, #f59e0b);
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.6);
}

.badge-icon.cyan {
    background: linear-gradient(135deg, #06b6d4, #3b82f6, #06b6d4);
    box-shadow: 0 0 40px rgba(6, 182, 212, 0.6);
}

.badge-icon svg {
    width: 3.5rem;
    height: 3.5rem;
    stroke: white;
}

.connecting-line {
    width: 4px;
    height: 5rem;
    margin-bottom: 2rem;
    opacity: 0.6;
    transition: none;
}



.connecting-line.red {
    background: linear-gradient(to bottom, #ef4444, #f97316);
}

.connecting-line.amber {
    background: linear-gradient(to bottom, #f59e0b, #eab308);
}

.connecting-line.cyan {
    background: linear-gradient(to bottom, #06b6d4, #3b82f6);
}

.spotlight-content h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.25rem;
    max-width: 350px;
}

.spotlight-content p {
    color: #ffffff;
    line-height: 1.7;
    font-size: 1.1rem;
    max-width: 340px;
}

.text-red {
    color: #ef4444;
}

.invisible-fade {
    animation: invisible-pulse 5s ease-in-out infinite;
    animation-play-state: paused;
    display: inline;
    font-weight: inherit;
    font-size: inherit;
}

.typing-complete .invisible-fade {
    animation-play-state: running;
}

@keyframes invisible-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.15;
    }
}

/* ============================================
   Services Section
   ============================================ */

.services-section {
    padding: clamp(26px, 4vh, 72px) 0;
}

@media (min-width: 769px) {
    .services-section {
        min-height: 100svh;
        display: flex;
        align-items: center;
    }
}

/* Header Section */
/* Single left-aligned title sitting directly above the card row. Both this and
   .services-grid are children of the same .container, so the heading's left
   edge lands flush with the first card's left edge at every width. */
.services-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-bottom: clamp(18px, 2.6vh, 46px);
    gap: clamp(0.4rem, 0.9vh, 0.9rem);
}

.services-header h2 {
    font-size: clamp(2.75rem, 3.25vw, 4.5rem);
    font-weight: 800;
    font-family: var(--font-heading);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 0;
    color: var(--text-primary);
    text-align: left;
    max-width: none;
}

.red-text {
    color: #ff4444;
}

.services-subtitle {
    font-size: clamp(1.05rem, 1.25vw, 1.25rem);
    font-weight: 300;
    color: var(--text-secondary);
    max-width: 660px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Services Grid — 4 premium product cards in one row */
/* Symmetric even margins (110px left / 110px right minimum) so cards stay wide & roomy
   while leaving 100% clean clearance for the extended navbar on all monitors */
.services-section .container {
    width: 100%;
    max-width: min(1680px, calc(100vw - clamp(176px, 11.5vw, 220px)));
    margin-inline: auto;
    padding-inline: clamp(16px, 1.5vw, 28px);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.5vw, 28px);
    margin-top: 0;
    max-width: 100%;
    margin-inline: auto;
}

.service-card {
    text-align: center;
    position: relative;
    background: rgba(15, 20, 26, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: clamp(11px, 0.72vw, 14px);
    padding: clamp(18px, 2.7vh, 40px) clamp(14px, 1.35vw, 28px) clamp(17px, 2.3vh, 34px);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Re-arm transitions after the scroll-reveal (JS nulls inline transition) */
.services-section .service-card.visible {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        box-shadow 0.45s ease !important;
}

/* Top accent line draws in on hover */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--orb-color) 0%, color-mix(in srgb, var(--orb-color) 20%, transparent) 75%, transparent 100%);
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
}

.service-card:hover::before {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--orb-color) 30%, transparent);
    box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.7);
}

/* Color variants */
.service-card:nth-child(1),
.service-card--teal {
    --orb-color: #00b8d4; /* Adzio cyan */
    --orb-shadow: rgba(0, 184, 212, 0.12);
}

.service-card:nth-child(2),
.service-card--blue {
    --orb-color: #4285F4; /* Google blue */
    --orb-shadow: rgba(66, 133, 244, 0.12);
}

.service-card:nth-child(3),
.service-card--cyan {
    --orb-color: #0866FF; /* Meta blue */
    --orb-shadow: rgba(8, 102, 255, 0.12);
}

.service-card:nth-child(4),
.service-card--purple {
    --orb-color: #0866FF; /* Royal blue */
    --orb-shadow: rgba(8, 102, 255, 0.12);
}

/* Exclusive indicator, not a sticker */
.popular-badge {
    position: absolute;
    top: clamp(10px, 0.63vw, 12px);
    right: clamp(10px, 0.63vw, 12px);
    padding: clamp(3px, 0.21vw, 4px) clamp(7px, 0.52vw, 10px);
    background: rgba(197, 168, 128, 0.06);
    box-shadow: none;
    color: var(--gold-bright);
    font-family: 'Archivo', sans-serif;
    font-size: clamp(0.5rem, 0.5vw, 0.6rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-radius: clamp(5px, 0.31vw, 6px);
    border: 1px solid var(--gold-border);
    z-index: 2;
}

/* Redundant selector removed to ensure Card 1 padding aligns with other cards */

/* Keep badge clear of the icon */
/* Reserve badge clearance on ALL cards so the centered top rows stay aligned */
.service-card-top {
    margin-top: clamp(20px, 1.36vw, 26px);
}

/* Number + icon row — number top-left, icon centered */
.service-card-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.55rem, 0.5vw, 0.7rem);
    margin-bottom: clamp(0.78rem, 0.73vw, 1rem);
}

.service-card-top .service-number {
    position: absolute;
    top: clamp(15px, 1.4vw, 22px);
    left: clamp(15px, 1.35vw, 22px);
}

.services-section .service-number {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1.8rem, 2.05vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.85);
    -webkit-text-fill-color: transparent;
    background: none;
    margin-bottom: 0;
    opacity: 1;
    transition: -webkit-text-stroke-color 0.35s ease;
}

.service-card:hover .service-number {
    -webkit-text-stroke-color: color-mix(in srgb, var(--orb-color) 65%, transparent);
}

.services-section .service-number::after {
    content: '.';
}

/* Crisp geometric icon frame — no orbs, no gradients */
.services-section .service-icon {
    position: relative;
    z-index: 2;
    width: clamp(48px, 3.45vw, 66px);
    height: clamp(48px, 3.45vw, 66px);
    background: transparent;
    border: 1px solid rgba(244, 241, 234, 0.14);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
    margin: 0;
}

.service-card:hover .service-icon {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--orb-color) 45%, transparent);
    background: color-mix(in srgb, var(--orb-color) 7%, transparent);
}

.services-section .service-icon svg {
    width: clamp(21px, 1.5vw, 29px);
    height: clamp(21px, 1.5vw, 29px);
    stroke: var(--orb-color);
    stroke-width: 1.6;
    fill: none;
}

/* ── Brand colours on the service-card logos ── */
/* Meta — single filled glyph, brand blue */
.services-section .service-card--teal .service-icon svg path {
    fill: var(--orb-color);
    stroke: none;
}

/* Google — the real four-colour mark (paths are blue, green, yellow, red) */
.services-section .service-card--blue .service-icon svg path {
    stroke: none;
}
.services-section .service-card--blue .service-icon svg path:nth-of-type(1) { fill: #4285F4; }
.services-section .service-card--blue .service-icon svg path:nth-of-type(2) { fill: #34A853; }
.services-section .service-card--blue .service-icon svg path:nth-of-type(3) { fill: #FBBC05; }
.services-section .service-card--blue .service-icon svg path:nth-of-type(4) { fill: #EA4335; }

/* Social — Instagram authentic gradient, Facebook blue, X white */
.services-section .service-card--purple .service-icon svg g:nth-of-type(1) {
    stroke: url(#instaGradient);
}
.services-section .service-card--purple .service-icon svg g:nth-of-type(1) circle[stroke="none"] {
    fill: url(#instaGradient);
}
.services-section .service-card--purple .service-icon svg g:nth-of-type(2) path {
    fill: #1877F2;
    stroke: none;
}
.services-section .service-card--purple .service-icon svg g:nth-of-type(3) path {
    fill: #FFFFFF;
    stroke: none;
}

.services-section .service-title {
    font-size: clamp(1.05rem, 1.15vw, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.8rem;
    color: var(--text-primary);
    min-height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    letter-spacing: -0.02em;
    font-family: var(--font-body), sans-serif;
    column-gap: 0.28em;
}

.service-title .highlight {
    color: var(--orb-color);
}

.service-description {
    font-size: clamp(0.8rem, 0.82vw, 1.08rem);
    font-weight: 300;
    color: #FFFFFF;
    line-height: 1.62;
    margin-bottom: clamp(0.6rem, 1.3vh, 1.3rem);
    /* Equalize so feature lists begin at the same y across all 4 cards */
    min-height: 6.2em;
}

/* Service Features — centered block, bullets aligned */
.services-section .service-features {
    list-style: none;
    text-align: left;
    margin-bottom: clamp(0.6rem, 1.4vh, 1.4rem);
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.services-section .service-features li {
    padding: clamp(6px, 1.1vh, 11px) 0;
    padding-left: 20px;
    position: relative;
    font-size: clamp(0.78rem, 0.8vw, 1.05rem);
    font-weight: 300;
    color: #ffffff;
    border-bottom: 1px solid rgba(244, 241, 234, 0.05);
    min-height: unset;
    display: flex;
    align-items: center;
}

.services-section .service-features li:last-child {
    border-bottom: none;
}

.services-section .service-features li::before {
    content: '-';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--orb-color);
    font-weight: 700;
    line-height: 1;
    opacity: 0.85;
}

/* CTA — editorial text link with arrow draw */
.service-cta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(9px, 0.63vw, 12px);
    padding: 0.4rem 0;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: 'Archivo', sans-serif;
    font-size: clamp(0.72rem, 0.75vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    transition: color 0.3s ease;
    margin-left: 0;
    margin-right: auto;
    width: fit-content;
    margin-top: auto;
    position: relative;
}

.service-cta::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--orb-color);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-cta:hover {
    background: transparent;
    color: var(--orb-color);
    box-shadow: none;
}

.service-cta:hover::after {
    transform: scaleX(1);
}

.service-cta-icon {
    width: clamp(14px, 0.94vw, 18px);
    height: clamp(14px, 0.94vw, 18px);
    flex: 0 0 clamp(14px, 0.94vw, 18px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transition: transform 0.35s ease;
}

.service-cta-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.service-cta:hover .service-cta-icon {
    transform: translateX(4px);
}

/* Fluid Desktop Responsive Sizing down to tablet */
@media (max-width: 1280px) {
    .services-section .container {
        padding-inline: clamp(12px, 1.2vw, 22px);
    }

    .services-grid {
        gap: clamp(12px, 1.4vw, 24px);
    }

    .service-card {
        padding: clamp(20px, 2.8vh, 36px) clamp(16px, 1.8vw, 26px) clamp(18px, 2.4vh, 32px);
    }

    .services-section .service-title {
        font-size: clamp(1.1rem, 1.3vw, 1.4rem);
    }

    .service-description {
        font-size: clamp(0.85rem, 0.96vw, 1rem);
        min-height: 5.8em;
    }

    .services-section .service-features li {
        font-size: clamp(0.82rem, 0.92vw, 0.96rem);
        padding: clamp(5px, 1vh, 9px) 0;
        padding-left: 18px;
    }

    .services-section .service-icon {
        width: clamp(48px, 3.6vw, 58px);
        height: clamp(48px, 3.6vw, 58px);
        border-radius: 12px;
    }

    .services-section .service-icon svg {
        width: clamp(20px, 1.5vw, 25px);
        height: clamp(20px, 1.5vw, 25px);
    }
}

/* Tablet: 2 columns */
@media (max-width: 768px) {
    .services-section .container {
        padding-left: clamp(20px, 4vw, 32px);
        padding-right: clamp(20px, 4vw, 32px);
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .service-card {
        padding: clamp(20px, 2.5vw, 28px) clamp(16px, 2vw, 22px);
        border-radius: 14px;
        min-height: auto;
    }

    .services-section .service-title {
        font-size: 1.05rem;
        min-height: auto;
    }

    .service-description {
        font-size: 0.86rem;
        min-height: auto;
    }

    .services-section .service-features li {
        font-size: 0.8rem;
        padding: 7px 0;
        padding-left: 20px;
    }

    .service-cta {
        font-size: 0.76rem;
        margin-left: auto;
        margin-right: 0;
        align-self: flex-end;
        margin-top: 1.2rem;
    }

    .service-cta-icon {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }

    .services-section .service-icon {
        width: 48px;
        height: 48px;
    }

    .services-section .service-icon svg {
        width: 20px;
        height: 20px;
    }

    .services-section .service-number {
        font-size: 1.8rem;
    }
}

/* Mobile: 1 column */
@media (max-width: 500px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: auto;
        justify-content: flex-start;
        padding: 24px 20px;
    }

    .service-cta {
        margin-left: auto;
        margin-right: 0;
        align-self: flex-end;
        margin-top: 1.4rem;
    }
}

/* Brand-logo icons keep their native fills */
.services-section .service-icon--brand svg {
    stroke: none;
    width: clamp(21px, 1.35vw, 26px);
    height: clamp(21px, 1.35vw, 26px);
    color: #9ca3af;
    transition: color 0.35s ease;
}

.service-card:hover .service-icon--brand svg {
    color: #ffffff;
}

@keyframes service-cta-arrow-idle {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(4px);
    }
}

.service-link svg {
    transition: transform var(--transition-base);
}

.service-link:hover svg {
    transform: translateX(4px);
    stroke: var(--accent-primary);
}

/* ============================================
   Results Section
   ============================================ */

.results {
    padding: var(--spacing-3xl) 0;
}

.results-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.result-card {
    padding: var(--spacing-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
}

.result-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-4px);
}

.result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.result-industry {
    padding: 0.375rem 0.75rem;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.result-location {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.result-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-md);
}

.result-stat {
    text-align: center;
}

.result-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.result-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.result-quote {
    font-size: 1rem;
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.result-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.author-avatar {
    width: 48px;
    height: 48px;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--bg-primary);
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.author-role {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ============================================
   Process Section
   ============================================ */

.process {
    padding: var(--spacing-3xl) 0;
    background: transparent;
}

.process-timeline {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

/* Gradient energy line - hidden, centered layout uses connectors */
.process-line {
    display: none;
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.process-step:last-child {
    margin-bottom: 0;
}

/* ---- Glowing Node ---- */
.step-node {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    z-index: 2;
}

.step-node-glow {
    position: absolute;
    inset: -1.5rem;
    border-radius: 50%;
    opacity: 0.5;
}

.step-node-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    opacity: 0.3;
}

.step-node-core {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.5);
}

.step-node-core svg {
    width: 2rem;
    height: 2rem;
    stroke: white;
}

/* ---- Step Color: ORANGE ---- */
[data-step-color="orange"] .step-node-glow {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%);
}

[data-step-color="orange"] .step-node-ring {
    background: linear-gradient(135deg, #ef4444, #f97316);
}

[data-step-color="orange"] .step-node-core {
    background: linear-gradient(135deg, #ef4444, #f97316);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
}

[data-step-color="orange"] .step-connector {
    background: linear-gradient(to bottom, #ef4444, #f97316);
}

[data-step-color="orange"] .step-card {
    border-color: rgba(239, 68, 68, 0.15);
}

[data-step-color="orange"] .step-label {
    color: #ef4444;
}

/* ---- Step Color: GOLD ---- */
[data-step-color="gold"] .step-node-glow {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, transparent 70%);
}

[data-step-color="gold"] .step-node-ring {
    background: linear-gradient(135deg, #f59e0b, #eab308);
}

[data-step-color="gold"] .step-node-core {
    background: linear-gradient(135deg, #f59e0b, #eab308);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
}

[data-step-color="gold"] .step-connector {
    background: linear-gradient(to bottom, #f59e0b, #eab308);
}

[data-step-color="gold"] .step-card {
    border-color: rgba(245, 158, 11, 0.15);
}

[data-step-color="gold"] .step-label {
    color: #f59e0b;
}

/* ---- Step Color: CYAN ---- */
[data-step-color="cyan"] .step-node-glow {
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, transparent 70%);
}

[data-step-color="cyan"] .step-node-ring {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
}

[data-step-color="cyan"] .step-node-core {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.5);
}

[data-step-color="cyan"] .step-connector {
    background: linear-gradient(to bottom, #06b6d4, #3b82f6);
}

[data-step-color="cyan"] .step-card {
    border-color: rgba(6, 182, 212, 0.15);
}

[data-step-color="cyan"] .step-label {
    color: #06b6d4;
}

/* ---- Step Color: EMERALD ---- */
[data-step-color="emerald"] .step-node-glow {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%);
}

[data-step-color="emerald"] .step-node-ring {
    background: linear-gradient(135deg, #10b981, #059669);
}

[data-step-color="emerald"] .step-node-core {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
}

[data-step-color="emerald"] .step-connector {
    background: linear-gradient(to bottom, #10b981, #059669);
}

[data-step-color="emerald"] .step-card {
    border-color: rgba(16, 185, 129, 0.15);
}

[data-step-color="emerald"] .step-label {
    color: #10b981;
}

/* ---- Connector Line between node and card ---- */
.step-connector {
    width: 3px;
    height: 2.5rem;
    opacity: 0.5;
    border-radius: 2px;
}

/* ---- Glass Card ---- */
.step-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    max-width: 420px;
    width: 100%;
}

.step-label {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.step-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
}

.step-card p {
    font-size: 0.95rem;
    color: #ffffff;
    line-height: 1.7;
}

/* ============================================
   About Section
   ============================================ */

.about {
    padding: var(--spacing-3xl) 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.about-content {
    max-width: 100%;
}

.about-content .section-tag {
    margin-bottom: var(--spacing-md);
}

.about-content .section-title {
    text-align: left;
    margin-bottom: var(--spacing-lg);
}

.about-text {
    margin-bottom: var(--spacing-md);
}

.about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.about-feature svg {
    width: 20px;
    height: 20px;
    stroke: var(--accent-primary);
    flex-shrink: 0;
}

.about-visual {
    position: relative;
}

.about-image {
    position: relative;
    aspect-ratio: 1;
    max-width: 420px;
    margin: 0 auto;
}

.about-pattern {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(0, 212, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(124, 58, 237, 0.2) 0%, transparent 50%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.about-stats-card {
    position: absolute;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    left: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.stats-header {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.stats-number {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-md);
}

.stats-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 60px;
}

.chart-bar {
    flex: 1;
    height: var(--height);
    background: var(--accent-gradient);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    opacity: 0.8;
}

/* ============================================
   CTA Section
   ============================================ */

.cta {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Vertical padding shrinks on shorter monitors so the whole block
       (title + card + Next button) always fits in one viewport. */
    padding: clamp(24px, 4vh, 64px) 0;
    overflow: hidden;
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(circle at 52% 14%, var(--grid-glow-primary) 0%, transparent 38%),
        radial-gradient(ellipse 60% 55% at 82% 80%, var(--grid-glow-secondary) 0%, transparent 45%),
        linear-gradient(180deg, var(--grid-surface-top) 0%, var(--grid-surface-bottom) 100%);
    background-size: auto, auto, auto;
    background-position: center top, center bottom, center;
    background-attachment: fixed;
}

.cta-bg {
    display: none;
}

.cta-gradient {
    position: absolute;
    inset: 0;
    /* Deep Void: swapped the murky teal wash for a faint electric-cyan glow */
    background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0, 184, 212, 0.05) 0%, transparent 65%);
    pointer-events: none;
}

.cta-pattern {
    display: none;
}

.cta-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    margin-top: 0;
}

.cta-eyebrow {
    display: inline-flex;
    margin-bottom: clamp(0.5rem, 1.2vh, 0.9rem);
    color: #ffffff !important;
}

.cta-eyebrow::before,
.cta-eyebrow::after {
    background: #ffffff !important;
}

.cta-title {
    margin-bottom: var(--spacing-sm);
    /* Capped by both width (vw) and height (vh) so it shrinks on short or
       narrow screens. */
    font-size: min(clamp(2.4rem, 3.6vw, 3.4rem), 5.5vh);
    font-weight: 800;
    font-family: var(--font-heading);
    letter-spacing: -0.03em;
    line-height: 1.06;
}

.cta-subtitle {
    font-size: min(clamp(0.95rem, 1.2vw, 1.05rem), 2.1vh);
    line-height: 1.6;
    font-weight: 300;
    max-width: 560px;
    margin-inline: auto;
    margin-bottom: clamp(0.8rem, 2.5vh, 1.6rem);
    color: var(--text-secondary);
    text-align: justify;
    text-align-last: center;
}

.contact-form {
    background: rgba(10, 20, 26, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(59, 165, 181, 0.18);
    border-radius: 16px;
    padding: 1.75rem;
    text-align: left;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.form-group {
    margin-bottom: 0.75rem;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.label-required {
    color: #ff6b6b;
    font-weight: 700;
}

.label-optional {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-left: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: rgba(20, 20, 25, 0.9);
    border: 1px solid rgba(59, 165, 181, 0.1);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: rgba(15, 15, 20, 1);
    box-shadow: 0 0 0 3px rgba(59, 165, 181, 0.1);
}

.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0px 1000px rgb(20, 20, 25) inset;
    box-shadow: 0 0 0px 1000px rgb(20, 20, 25) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.field-invalid {
    border-color: rgba(255, 80, 80, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(255, 80, 80, 0.1) !important;
}

.form-field-error {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 0.75rem;
    font-family: var(--font-body);
    color: #ff6b6b;
    animation: errorFadeIn 0.2s ease;
}

.form-field-error::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

@keyframes errorFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* Custom Select */
.custom-select {
    position: relative;
    width: 100%;
}

.custom-select.is-open {
    z-index: 300;
}

.custom-select-trigger {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: rgba(20, 20, 25, 0.9);
    border: 1px solid rgba(59, 165, 181, 0.1);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease, border-radius 0.15s ease;
}

.custom-select-trigger.is-placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.custom-select-chevron {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.35);
    transition: transform 0.2s ease;
}

.custom-select.is-open .custom-select-trigger {
    border-radius: 10px 10px 0 0;
    border-color: var(--accent-primary);
    border-bottom-color: transparent;
    background: rgba(15, 15, 20, 1);
    outline: none;
}

.custom-select.is-open .custom-select-chevron {
    transform: rotate(180deg);
}

.custom-select-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    margin: 0;
    padding: 4px 0 6px;
    list-style: none;
    background: rgba(15, 15, 20, 1);
    border: 1px solid var(--accent-primary);
    border-top: none;
    border-radius: 0 0 10px 10px;
    max-height: 150px;
    overflow-y: auto;
    /* Stop the page from taking over once the list hits its top/bottom */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 165, 181, 0.25) transparent;
}

.custom-select.is-open .custom-select-list {
    display: block;
    animation: errorFadeIn 0.15s ease;
}

.custom-select-item {
    padding: 0.6rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    list-style: none;
}

.custom-select-item.is-placeholder {
    color: rgba(255, 255, 255, 0.2);
    cursor: default;
    pointer-events: none;
}

.custom-select-item:not(.is-placeholder):hover {
    background: rgba(62, 207, 207, 0.1);
    color: #3ecfcf;
}

.custom-select-item.is-ineligible {
    color: rgba(239, 68, 68, 0.75);
}

.custom-select-item.is-ineligible:hover {
    background: rgba(239, 68, 68, 0.08);
    color: rgba(239, 68, 68, 0.95);
}

.custom-select-item.is-selected {
    color: var(--accent-primary);
}

.custom-select-item.is-selected.is-ineligible {
    color: rgba(239, 68, 68, 0.9);
}


.form-group:has(.form-field-error) .custom-select-trigger {
    border-color: rgba(255, 80, 80, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(255, 80, 80, 0.1) !important;
}

/* Smart textarea - auto-expands with content */
.form-group textarea {
    resize: none;
    min-height: 80px;
    max-height: 400px;
    overflow-y: hidden;
    line-height: 1.5;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23a1a1aa" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
}

.form-group select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Submit button override for contact form */
.contact-form .btn-primary {
    width: 100%;
    padding: 0.85rem;
    font-size: 0.95rem;
    border-radius: 3px;
    margin-top: 0.25rem;
}

.form-note {
    display: block;
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
}

.form-note svg {
    flex-shrink: 0;
}

/* ============================================
   Footer
   ============================================ */

.footer {
    background: #090D11;
    border-top: 1px solid var(--hairline);
    position: relative;
    overflow: hidden;
}

/* Subtle glow effect at top */
.footer::before {
    content: none;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(36px, 6vh, 60px) 40px 18px;
    position: relative;
    z-index: 1;
}

/* ── Bottom CTA row ── */
.footer-bottom-cta {
    display: flex;
    justify-content: center;
    padding: 10px 0 16px;
}

/* Main Horizontal Layout */
.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Brand Section */
.footer-brand {
    flex: 0 0 auto;
    max-width: 280px;
    border-right: 1px solid var(--hairline);
    padding-right: 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo {
    display: inline-block;
    border-radius: 14px;
    filter: none;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.footer-logo:hover {
    transform: scale(1.06);
    filter: drop-shadow(0 0 14px rgba(0, 184, 212, 0.25));
}

.footer-logo img {
    height: 60px;
    width: auto;
    margin-top: 14px;
    margin-bottom: 6px;
}

.footer-tagline {
    font-size: 0.92rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-top: 10px;
}

/* Footer Navigation */
.footer-nav {
    display: flex;
    gap: 72px;
    justify-content: center;
    flex: 1;
    padding-left: 48px;
}

@media (min-width: 901px) {
    .footer-nav .footer-column:nth-child(1) {
        position: relative;
        left: -20px;
    }
    .footer-nav .footer-column:nth-child(2) {
        position: relative;
        left: 10px;
    }
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.footer-column h4 {
    font-family: 'Archivo', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--gold);
    margin-bottom: 20px;
    text-align: left;
}

/* Let's talk CTA button */
/* Uiverse-style text-reveal button (adapted to site cyan) with lift, scale, glow, and underline */
.footer-lets-talk {
    --border-right: 3px;
    --text-stroke-color: #ffffff;
    --animation-color: #00b8d4;
    --fs-size: 2.6em;

    display: inline-block;
    align-self: flex-start;
    flex-shrink: 0;
    margin: 18px 0 0;
    padding: 0 0 6px 0;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;

    position: relative;
    line-height: 1;
    letter-spacing: clamp(6px, 0.22em, 10px);
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--fs-size);
    font-weight: 800;
    font-family: 'Archivo', sans-serif;
    color: transparent;
    -webkit-text-stroke: 0.5px #ffffff;
    -webkit-text-fill-color: transparent;
    transform-origin: left center;
    transform: scaleY(1.22);

    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.footer-lets-talk:hover {
    transform: translateY(-5px) scaleY(1.22) scaleX(1.02);
    filter: none;
}

/* The colored text that wipes in on hover, with a trailing cursor bar */
.footer-lets-talk .hover-text {
    position: absolute;
    box-sizing: border-box;
    inset: 0;
    width: 0%;
    color: var(--animation-color);
    border-right: var(--border-right) solid var(--animation-color);
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-text-stroke: 0.5px var(--animation-color);
    -webkit-text-fill-color: var(--animation-color);
}

/* Cyan animated underline that draws out with the text fill */
.footer-lets-talk .hover-text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--animation-color);
    border-radius: 2px;
    box-shadow: none;
}

.footer-lets-talk:hover .hover-text {
    width: 100%;
}

.footer-lets-talk-spacer {
    display: block;
    flex-shrink: 0;
    width: 1px;
    height: calc(2.6em + 6px);
    margin: 18px 0 0;
    padding: 0;
    pointer-events: none;
}

.footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    text-align: left;
    width: 100%;
}

.footer .footer-links li {
    text-align: left;
    width: 100%;
}

.footer .footer-links li a {
    font-size: 1.05rem;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    text-align: left;
    position: relative;
    background-image: linear-gradient(to right, var(--cyan) 50%, #8E95A0 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer .footer-links li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s ease;
}

.footer .footer-links li a:hover {
    background-position: 0% 0;
    transform: translateX(7px);
}

.footer .footer-links li a:hover::after {
    transform: scaleX(1);
}

/* Contact Section */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.contact-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.18rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast), transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.contact-item:hover {
    color: var(--cyan);
    text-shadow: none;
    transform: translateY(-3px);
}

/* Same wipe-in underline the footer nav links use, scoped to the label so it
   does not run under the icon (and not under the hover tooltip, which is
   also a span but positioned/animated on its own terms). */
.contact-item > span:not(.social-tip) {
    position: relative;
    display: inline-block;
}

.contact-item > span:not(.social-tip)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s ease;
}

.contact-item:hover > span:not(.social-tip)::after {
    transform: scaleX(1);
}

.contact-item:hover .contact-icon {
    background: var(--cyan-soft);
    border-color: var(--cyan-border);
    transform: scale(1.08);
    box-shadow: none;
}

.contact-icon {
    width: 42px;
    height: 42px;
    background: transparent;
    border: 1px solid rgba(244, 241, 234, 0.14);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    overflow: hidden;
    /* Ensure animation doesn't bleed out */
}

#lottie-inbox svg,
#lottie-phone svg {
    width: 26px !important;
    height: 26px !important;
}

/* Force the Lottie glyph paths to white to match the social media icons.
   Lottie's SVG renderer sets fill/stroke as inline styles on each path, so
   these need !important to win. */
#lottie-inbox svg path,
#lottie-inbox svg rect,
#lottie-inbox svg circle,
#lottie-inbox svg polygon,
#lottie-inbox svg line,
#lottie-phone svg path,
#lottie-phone svg rect,
#lottie-phone svg circle,
#lottie-phone svg polygon,
#lottie-phone svg line {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}


.contact-icon svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
    stroke-width: 1.5;
}

.footer-founders {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 1.5rem;
}

.founders-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 4px;
}

.contact-names {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-optical-sizing: auto;
    font-size: 17px;
    font-weight: 500;
    color: #d7dde4;
    line-height: 1.3;
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0 6px;
    margin-top: clamp(14px, 2vh, 22px);
    border-top: 1px solid var(--hairline);
}

.footer-copyright {
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--text-muted);
}

.footer-legal {
    display: flex;
    gap: 25px;
}

.footer-legal a {
    font-size: 0.8rem;
    text-decoration: none;
    display: inline-block;
    position: relative;
    background-image: linear-gradient(to right, var(--cyan) 50%, #6E7681 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position 0.35s ease;
}

.footer-legal a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
}

.footer-legal a:hover {
    background-position: 0% 0;
}

.footer-legal a:hover::after {
    transform: scaleX(1);
}

/* Social Links */
.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 1.1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(244, 241, 234, 0.14);
    border-radius: 10px;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    position: relative;
}

.social-link:hover {
    background: var(--cyan-soft);
    border-color: var(--cyan-border);
    transform: translateY(-2px);
    color: #ffffff;
    box-shadow: none;
}

.social-link svg {
    width: 19px;
    height: 19px;
    stroke-width: 1.5;
}

@media (min-width: 901px) {
    .footer-content {
        padding-top: clamp(18px, 3.2vh, 34px);
        padding-bottom: 8px;
    }

    .footer-main {
        gap: 34px;
    }

    .footer-brand {
        padding-right: 34px;
    }

    .footer-logo img {
        height: 50px;
        margin-top: 4px;
        margin-bottom: 0;
    }

    .footer-social {
        margin-top: 18px;
    }

    .footer-nav {
        gap: 52px;
        padding-left: 34px;
    }

    .footer-column h4 {
        margin-bottom: 11px;
    }

    .footer .footer-links {
        gap: 6px;
    }

    .footer-contact {
        gap: 8px;
    }

    .contact-icon {
        width: 36px;
        height: 36px;
    }

    #lottie-inbox svg,
    #lottie-phone svg {
        width: 22px !important;
        height: 22px !important;
    }

    .contact-item {
        gap: 12px;
        font-size: 1.04rem;
    }

    .footer-lets-talk-spacer {
        height: 12px;
        margin-top: 4px;
    }

    .footer-founders {
        margin-top: 0.6rem;
    }

    .footer-bottom {
        margin-top: 8px;
        padding: 9px 0 3px;
    }
}

/* Footer responsive */
@media (max-width: 900px) {
    .footer-main {
        flex-direction: column;
        gap: 40px;
    }

    .footer-brand {
        border-right: none;
        padding-right: 0;
        max-width: none;
    }

    .footer-nav {
        padding-left: 0;
        justify-content: flex-start;
        gap: clamp(24px, 6vw, 48px);
        flex-wrap: nowrap;
        text-align: left;
    }

    .footer-column {
        align-items: flex-start;
        text-align: left;
    }

    .footer-content {
        padding: 0 24px 18px;
    }
}


/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 1024px) {
    .logo-slider-shell {
        width: min(100%, 1600px);
    }

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

    .about-content {
        max-width: none;
        text-align: left;
    }

    .about-content .section-title {
        text-align: center;
    }

    .about-features {
        justify-content: center;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

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

    .footer-tagline {
        max-width: none;
    }

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

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    .logo-slider-shell {
        padding: 0 18px;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--bg-primary);
        flex-direction: column;
        justify-content: center;
        gap: var(--spacing-lg);
        transition: right var(--transition-base);
    }

    .nav-links.open {
        right: 0;
    }

    .nav-link {
        font-size: 1.5rem;
    }

    .nav-toggle {
        display: flex;
        z-index: 1001;
    }

    .nav-toggle.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-toggle.open span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .nav-cta {
        display: none;
    }

    .hero-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .stat-visual {
        width: min(100%, 280px);
    }

    .hero-cta {
        flex-direction: row;
        align-items: center;
    }

    .hero-cta .btn {
        width: fit-content;
        max-width: 100%;
    }

    .social-proof .container {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .proof-logos {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-md);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .process-line {
        display: none;
    }

    .step-node {
        width: 60px;
        height: 60px;
    }

    .step-card {
        padding: 1.25rem 1.5rem;
    }

    .footer-nav {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        gap: clamp(20px, 6vw, 40px);
        text-align: left;
        width: 100%;
    }

    .footer .footer-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm, 12px);
        text-align: left;
        order: 2;
    }

    .footer-copyright,
    .footer-legal {
        text-align: left;
    }

    .footer-bottom-cta {
        order: 1;
    }

    .footer-content {
        display: flex;
        flex-direction: column;
        padding-top: 44px;
    }

    .footer-main {
        order: 0;
    }

    .footer-brand,
    .footer-nav,
    .footer-contact > .contact-item {
        transform: translateY(54px);
    }


    .results-showcase {
        grid-template-columns: 1fr;
    }

    .about-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    .vsl-play-btn {
        width: 70px;
        height: 70px;
    }

    .vsl-play-btn svg {
        width: 28px;
        height: 28px;
    }

    .footer-links {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .problem-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   LEGAL MODALS
   ============================================ */

.legal-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    /* Gradient wipe: right half = white (default), left half = teal (hover) */
    background-image: linear-gradient(to right, var(--accent-primary) 50%, var(--text-primary) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    transition: background-position 0.4s ease, text-decoration-color 0.3s;
}

.legal-link:hover {
    background-position: 0% 0;
    text-decoration-color: var(--accent-primary);
}

.legal-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.legal-modal.is-open {
    pointer-events: all;
    opacity: 1;
}

.legal-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.legal-modal__panel {
    position: relative;
    z-index: 1;
    width: min(720px, 92vw);
    max-height: 80vh;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(59, 165, 181, 0.08);
    display: flex;
    flex-direction: column;
    transform: translateY(18px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.legal-modal.is-open .legal-modal__panel {
    transform: translateY(0) scale(1);
}

/* ── Disclaimer / Eligibility Modal Specific ── */
.disclaimer-modal__panel {
    width: min(640px, 92vw);
    max-height: 92svh;
    max-width: 640px;
    /* Establish a container so the title can size to the PANEL width (cqi)
       and stay on one line at every screen size. */
    container-type: inline-size;
    background: #0d1a1f;
    border: 1px solid var(--cyan-border);
    border-radius: 20px;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: visible;
}

.disclaimer-modal__body {
    overflow: hidden;
    /* Padding scales with viewport so the whole notice fits without scrolling
       on shorter screens. */
    padding: clamp(1.75rem, 4.5vh, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    scrollbar-width: none;
}

/* Beat the base .legal-modal__body rule (same element carries both classes,
   and that rule re-enables a visible scrollbar later in the file). Content
   stays scrollable as a fallback on tiny screens, but the bar is hidden. */
.disclaimer-modal__body.legal-modal__body {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.disclaimer-modal__body::-webkit-scrollbar,
.disclaimer-modal__body.legal-modal__body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}


.legal-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    z-index: 2;
}

.legal-modal__close:hover {
    background: rgba(59, 165, 181, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.legal-modal__body {
    overflow-y: auto;
    padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 48px);
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 165, 181, 0.3) transparent;
}

.legal-modal__body::-webkit-scrollbar {
    width: 5px;
}

.legal-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

.legal-modal__body::-webkit-scrollbar-thumb {
    background: rgba(59, 165, 181, 0.3);
    border-radius: 99px;
}

.legal-modal__label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin: 0 0 10px;
}

.legal-modal__title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 6px;
    padding-right: 40px;
    line-height: 1.15;
}

.legal-modal__date {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0 0 32px;
}

/* Eligibility title: sized to the panel width (cqi) and kept on one line at
   every screen size. */
#disclaimer-title {
    font-size: min(4cqi, 1.7rem);
    white-space: nowrap;
    line-height: 1.15;
}

.legal-modal__body h3 {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin: 28px 0 8px;
}

.legal-modal__body h3:first-of-type {
    margin-top: 0;
}

.legal-modal__body p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 12px;
}

.legal-modal__body strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* ============================================
   Silk Background (js/silk-bg.js)
   Everything here is scoped under html.silk-active, which the script adds
   only once the WebGL layer is alive. No WebGL / reduced-motion / context
   loss => class absent => the original static background above still rules.
   ============================================ */

/* The body's opaque gradient would paint over the fixed z-index:-1 canvas. */
html.silk-active body {
    background-color: transparent;
    background-image: none;
}

/* .cta repaints the full body gradient opaquely mid-page — let silk through.
   Its .cta-gradient child stays: subtle additive glow, layers fine on silk. */
html.silk-active .cta {
    background-color: transparent;
    background-image: none;
}

/* Scrim instead of full transparency: silk stays faintly visible behind the
   footer while text contrast holds. No backdrop-filter — too costly over a
   live WebGL layer on mobile. */
html.silk-active .footer {
    background: rgba(9, 13, 17, 0.85);
}

/* Old hero decorations (gradient halo, aurora, orbs) fight the silk look.
   Hidden only while silk runs — they remain part of the static fallback. */
html.silk-active .hero-bg {
    display: none;
}

/* ============================================
   Quiz Intro Card Styles
   ============================================ */
.quiz-intro-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 3.5rem 3rem;
    border-radius: 24px;
    background: rgba(10, 20, 26, 0.45);
    border: 1px solid rgba(59, 165, 181, 0.25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.quiz-intro-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
    background: linear-gradient(135deg, #ffffff 0%, #a5f3fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quiz-intro-desc {
    font-size: 1.15rem;
    line-height: 1.75;
    margin-bottom: 2.5rem;
    color: var(--text-secondary);
}

.quiz-intro-note {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 1.25rem;
}

/* ============================================
   Quiz Fullscreen Modal Styles
   ============================================ */
.quiz-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.quiz-modal.is-open {
    pointer-events: all;
    opacity: 1;
}

.quiz-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 10, 13, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.quiz-modal-container {
    position: relative;
    z-index: 1;
    width: min(1300px, 92vw);
    max-height: 90vh;
    background: rgba(13, 26, 31, 0.85);
    border: 1px solid rgba(59, 165, 181, 0.2);
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(59, 165, 181, 0.08);
    display: flex;
    flex-direction: column;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    padding: 3.5rem 3rem;
    scrollbar-width: none;
    /* Hide scrollbars in Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbars in IE/Edge */
}

.quiz-modal-container::-webkit-scrollbar {
    display: none;
    /* Hide scrollbars in Chrome/Safari */
}


.quiz-modal.is-open .quiz-modal-container {
    transform: translateY(0) scale(1);
}

.quiz-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.quiz-modal-close:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
    transform: rotate(90deg);
}

.quiz-modal-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    /* Hide scrollbars in Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbars in IE/Edge */
}

.quiz-modal-content::-webkit-scrollbar {
    display: none;
    /* Hide scrollbars in Chrome/Safari */
}

/* Progress Indicator */
.quiz-progress-wrapper {
    margin-bottom: clamp(1.1rem, 4.5vh, 2.5rem);
}

.quiz-progress-text {
    font-family: 'Archivo', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    margin-bottom: 0.7rem;
}

.quiz-progress-track {
    height: 2px;
    background: rgba(244, 241, 234, 0.08);
    border-radius: 99px;
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    background: var(--cyan);
    border-radius: 99px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Quiz Steps */
.quiz-step {
    display: none;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.quiz-step.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    position: relative;
    z-index: 5;
}

.quiz-step-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
    background: linear-gradient(135deg, #ffffff 0%, #a5f3fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quiz-step-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

/* Inline Quiz Card — private application, not a contact form */
.quiz-inline-card {
    width: 100%;
    max-width: 1040px;
    min-height: min(340px, 42vh);
    margin: 0 auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: none;
    padding: clamp(1.25rem, 3.5vh, 2.4rem) clamp(1.75rem, 3vw, 3.25rem) clamp(1.25rem, 3vh, 2.2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left; /* Override text centering from parent .cta-content */
    position: relative;
    overflow: hidden;
}

/* Keep the homepage and About Us application cards aligned with the
   full-width Services form on desktop. */
.cta > .container:has(.cta-content--wide-form) {
    width: 100%;
}

.cta-content--wide-form .quiz-inline-card {
    max-width: 1040px;
}

/* Champagne hairline across the card's crown */
.quiz-inline-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
    opacity: 0.55;
}

.quiz-inline-card>form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

/* Navigation Buttons */
.quiz-nav-buttons {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: clamp(1rem, 3vh, 1.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: clamp(1rem, 3vh, 1.5rem);
    padding-bottom: clamp(0.5rem, 1.5vh, 1rem);
}

.quiz-nav-buttons button {
    flex: 1;
}

/* Step 1 desktop: the nav buttons get relocated into this slot (see showStep in
   main.js) so Next lines up with the website field. Bottom-aligned so the button
   baseline matches the input, and the divider/spacing of the standalone row is
   dropped since it is no longer its own row. */
.quiz-nav-slot {
    display: flex;
    align-items: flex-end;
}

/* Kill the field's bottom margin in that row so the button and the input share
   the same baseline. */
.form-row:has(> .quiz-nav-slot) > .form-group {
    margin-bottom: 0;
}

.quiz-nav-slot .quiz-nav-buttons {
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
}

.quiz-form-terms-note {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 1.5rem;
    line-height: 1.6;
    text-align: center;
}

.quiz-form-terms-note .legal-link {
    border: none;
    cursor: pointer;
    font-size: inherit;
    font-weight: 500;
    padding: 0;
    /* Base colour — shown through the gradient's right (unfilled) half. */
    color: rgba(255, 255, 255, 0.5);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    /* Left-to-right blue fill on hover: a 2-colour gradient (cyan | base text
       colour) sized 200% and clipped to the text. Sliding the background from
       the right to the left wipes the cyan in from the left edge. */
    background-image: linear-gradient(to right,
            var(--cyan) 0%, var(--cyan) 50%,
            currentColor 50%, currentColor 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        text-decoration-color 0.45s ease;
}

.quiz-form-terms-note .legal-link:hover,
.quiz-form-terms-note .legal-link:focus-visible {
    background-position: 0 0;
    text-decoration-color: var(--cyan);
}

/* Quiz layout sizing updates - bigger elements to fill space beautifully */
.quiz-inline-card .quiz-step-title {
    font-family: var(--font-heading);
    font-size: min(clamp(1.7rem, 2.4vw, 2.3rem), 5.5vh);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin-bottom: clamp(0.5rem, 1.4vh, 0.8rem);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: var(--text-primary);
    color: var(--text-primary);
}

.quiz-inline-card .quiz-step-subtitle {
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    margin-bottom: clamp(0.9rem, 2.5vh, 1.3rem);
    color: var(--text-secondary);
}

.quiz-inline-card .form-group label {
    font-family: 'Archivo', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: white;
    margin-bottom: 0.65rem;
    display: block;
    text-align: left;
}

.quiz-inline-card .label-required {
    color: var(--cyan) !important;
    font-weight: 600;
    margin-left: 2px;
}

.quiz-inline-card .form-group input,
.quiz-inline-card .custom-select-trigger,
.quiz-inline-card .form-group textarea {
    padding: clamp(0.95rem, 1.3vw, 1.15rem) clamp(1.1rem, 1.5vw, 1.4rem);
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.quiz-inline-card .form-group input:hover,
.quiz-inline-card .custom-select-trigger:hover,
.quiz-inline-card .form-group textarea:hover {
    border-color: rgba(255, 255, 255, 0.35);
}

.quiz-inline-card .form-group input:focus,
.quiz-inline-card .custom-select.is-open .custom-select-trigger,
.quiz-inline-card .form-group textarea:focus {
    border-color: var(--cyan);
    background: transparent;
    box-shadow: 0 0 0 3px rgba(0, 184, 212, 0.12);
    outline: none;
}

.quiz-inline-card .custom-select-trigger {
    height: auto;
    min-height: clamp(48px, 3.6vw, 56px);
}

/* Unselected state reads as placeholder text, same grey as the inputs */
.quiz-inline-card .custom-select-trigger.is-placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.quiz-inline-card .custom-select.is-open .custom-select-trigger {
    border-radius: 8px 8px 0 0;
}

.quiz-inline-card .custom-select-list {
    border-radius: 0 0 8px 8px;
    background: #090e12;
    border: 1px solid rgba(59, 165, 181, 0.8);
    border-top: none;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
    padding: 6px 0;
}

.quiz-inline-card .custom-select-item {
    padding: clamp(0.8rem, 1.1vw, 0.95rem) clamp(1.1rem, 1.5vw, 1.4rem);
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    color: rgba(255, 255, 255, 0.75);
    transition: background 0.2s ease, color 0.2s ease;
}

.quiz-inline-card .custom-select-item:not(.is-placeholder):hover {
    background: rgba(59, 165, 181, 0.15);
    color: #fff;
}

.quiz-inline-card .custom-select-item.is-selected {
    color: var(--accent-primary);
    font-weight: 600;
    background: rgba(59, 165, 181, 0.05);
}

.quiz-inline-card .custom-select-chevron {
    width: 16px !important;
    height: 16px !important;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease, color 0.3s ease;
}

.quiz-inline-card .custom-select.is-open .custom-select-chevron {
    color: var(--accent-primary);
}

/* ── Multiple Services checkbox group ── */
.multi-service-group[hidden] {
    display: none;
}

.multi-service-group {
    margin-top: clamp(1rem, 2.5vh, 1.5rem);
    animation: errorFadeIn 0.25s ease;
}

.multi-service-hint {
    margin-left: 8px;
    color: var(--text-muted) !important;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.multi-service-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.multi-service-option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: clamp(0.7rem, 1vw, 0.9rem) clamp(0.8rem, 1.1vw, 1.1rem);
    border: 1px solid rgba(244, 241, 234, 0.09);
    border-radius: 8px;
    background: rgba(6, 9, 13, 0.55);
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 0 !important;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.multi-service-option:hover {
    border-color: var(--cyan-border);
    color: var(--text-primary) !important;
}

.multi-service-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.multi-service-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid rgba(244, 241, 234, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.multi-service-check::after {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: #06120F;
    transform: scale(0);
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.multi-service-option input:checked ~ .multi-service-check {
    background: var(--cyan);
    border-color: var(--cyan);
}

.multi-service-option input:checked ~ .multi-service-check::after {
    transform: scale(1);
}

.multi-service-option:has(input:checked) {
    border-color: var(--cyan-border);
    background: var(--cyan-soft);
    color: var(--text-primary) !important;
}

.multi-service-option input:focus-visible ~ .multi-service-check {
    outline: 2px solid var(--cyan-border);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .multi-service-options {
        grid-template-columns: 1fr;
    }
}

/* Make the Back and Next buttons taller vertically */
.quiz-nav-buttons .btn {
    padding: clamp(0.8rem, 1.6vh, 1.15rem) clamp(1.75rem, 2.6vw, 2.5rem);
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    font-weight: 600;
    border-radius: 3px;
    height: auto;
    min-height: clamp(46px, 5.6vh, 56px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.quiz-nav-buttons .btn svg {
    width: 20px !important;
    height: 20px !important;
}

.quiz-nav-buttons .btn-primary {
    --btn-bg: var(--cyan);
    background: transparent;
    color: #06120F;
    box-shadow: none;
    border: none;
}

/* Inverted hover: button goes dark, label takes the accent color. The inset
   ring (not a border) keeps the shape defined without a 1px layout shift. */
.quiz-nav-buttons .btn-primary:hover {
    --btn-bg: #06120F;
    --btn-ring: inset 0 0 0 1px var(--cyan);
    background: transparent;
    color: var(--cyan);
    box-shadow: none;
    transform: translateY(-2px);
}

.quiz-nav-buttons .btn-secondary {
    --btn-bg: transparent;
    --btn-ring: inset 0 0 0 1px rgba(244, 241, 234, 0.14);
    background: transparent;
    border: none !important;
    color: rgba(244, 241, 234, 0.65);
}

.quiz-nav-buttons .btn-secondary:hover {
    --btn-bg: rgba(244, 241, 234, 0.04);
    --btn-ring: inset 0 0 0 1px rgba(244, 241, 234, 0.26);
    background: transparent;
    color: var(--text-primary);
    transform: translateY(-2px);
}

/* ── Short desktop viewports: compress the application form so the whole CTA
   block (eyebrow → title → card → submit) fits in one frame, nothing clipped.
   The heading/subtitle were already vh-scaled; these rules shrink the form
   fields, gaps and paddings that were still fixed/width-based. vh-driven so it
   self-scales; values meet the base design near 900px tall, so taller monitors
   are effectively untouched. ── */
@media (min-width: 769px) and (max-height: 900px) {
    .cta {
        padding-block: clamp(12px, 2.4vh, 64px);
    }

    .cta-eyebrow {
        margin-bottom: clamp(0.3rem, 0.9vh, 0.9rem);
    }

    .cta-subtitle {
        margin-bottom: clamp(0.6rem, 1.8vh, 1.6rem);
    }

    .quiz-progress-wrapper {
        margin-bottom: clamp(0.7rem, 2.8vh, 2.5rem);
    }

    .quiz-inline-card {
        min-height: 0;
        padding: clamp(1rem, 3.2vh, 3.5rem) clamp(1.75rem, 3.5vw, 3.5rem) clamp(1rem, 2.8vh, 3rem);
    }

    .quiz-inline-card .quiz-step-title {
        margin-bottom: clamp(0.3rem, 1vh, 0.8rem);
    }

    .quiz-inline-card .quiz-step-subtitle {
        margin-bottom: clamp(0.7rem, 2.4vh, 1.8rem);
    }

    .quiz-inline-card .form-group label {
        margin-bottom: clamp(0.25rem, 1.15vh, 0.65rem);
    }

    .quiz-inline-card .form-group input,
    .quiz-inline-card .custom-select-trigger,
    .quiz-inline-card .form-group textarea {
        padding-top: clamp(0.5rem, 2vh, 1.15rem);
        padding-bottom: clamp(0.5rem, 2vh, 1.15rem);
    }

    .quiz-inline-card .custom-select-trigger {
        min-height: clamp(40px, 5vh, 56px);
    }

    .form-group {
        margin-bottom: clamp(0.35rem, 1.3vh, 0.75rem);
    }

    .quiz-nav-buttons {
        margin-top: clamp(0.5rem, 1.8vh, 1.5rem);
        padding-top: clamp(0.5rem, 1.8vh, 1.5rem);
        padding-bottom: clamp(0.3rem, 1vh, 1rem);
    }
}

/* Form Success State Redesign */
.quiz-inline-card .form-success {
    text-align: center;
    padding: 2rem 0;
}

.quiz-inline-card .success-icon {
    width: 64px;
    height: 64px;
    background: rgba(59, 165, 181, 0.1);
    color: var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 0 20px rgba(59, 165, 181, 0.1);
}

.quiz-inline-card .success-icon svg {
    width: 32px;
    height: 32px;
}

.quiz-inline-card .success-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.quiz-inline-card .success-icon {
    background: var(--cyan-soft);
    color: var(--cyan);
    border: 1px solid var(--cyan-border);
}

.quiz-inline-card .success-subtitle {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-bottom: 2rem;
}

.quiz-inline-card .success-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 440px;
    margin: 0 auto 2rem;
}

.quiz-inline-card .success-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.quiz-inline-card .success-detail-item svg {
    width: 18px;
    height: 18px;
    color: var(--accent-primary);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .quiz-inline-card .quiz-form-grid > .form-row:first-child {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .quiz-inline-card .quiz-form-grid > .form-row:first-child .form-group {
        min-width: 0;
        margin-bottom: 0.55rem;
    }

    .quiz-inline-card .quiz-form-grid > .form-row:first-child label {
        font-size: 0.56rem;
        letter-spacing: 0.12em;
        margin-bottom: 0.45rem;
        white-space: nowrap;
    }

    .quiz-inline-card .quiz-form-grid > .form-row:first-child input {
        padding: 0.78rem 0.8rem;
        min-height: 44px;
    }

    .cta-title {
        font-size: 2.4rem;
    }

    .quiz-intro-card {
        padding: 2.5rem 1.75rem;
    }

    .quiz-intro-title {
        font-size: 1.8rem;
    }

    .quiz-modal-container {
        padding: 2.5rem 1.75rem;
        height: 100%;
        max-height: 100%;
        width: 100%;
        border-radius: 0;
        border: none;
    }

    .quiz-modal-close {
        top: 16px;
        right: 16px;
    }

    .quiz-step-title {
        font-size: 1.6rem;
    }

    .quiz-inline-card {
        padding: 2rem 1.5rem 1.75rem;
        min-height: auto;
    }

    .quiz-inline-card .quiz-step-title {
        font-size: 1.8rem;
        margin-bottom: 0.6rem;
    }

    .quiz-inline-card .quiz-step-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .quiz-inline-card .form-group input,
    .quiz-inline-card .custom-select-trigger,
    .quiz-inline-card .form-group textarea {
        padding: 0.9rem 1.1rem;
        font-size: 1rem;
    }

    .quiz-inline-card .custom-select-trigger {
        min-height: 48px;
    }

    .quiz-inline-card .custom-select-item {
        padding: 0.75rem 1.1rem;
        font-size: 0.95rem;
    }

    .quiz-nav-buttons .btn {
        padding: 0.95rem 1.75rem;
        font-size: 1rem;
        min-height: 48px;
    }

    /* Disclaimer Modal mobile responsiveness */
    .disclaimer-modal__panel {
        border-radius: 16px;
    }

    .disclaimer-modal__body {
        padding: 2.25rem 1.5rem;
        /* Allow scrollable content only when screen is very short, but hide scrollbar completely */
        overflow-y: auto;
        max-height: 85vh;
    }

    .disclaimer-modal__body>div[style*="width: 72px"] {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 1.25rem !important;
    }

    .disclaimer-modal__body>div[style*="width: 72px"] svg {
        width: 24px !important;
        height: 24px !important;
    }

    #disclaimer-title {
        /* font-size handled by the cqi rule so it stays one line; just tighten
           the spacing on small screens. */
        margin-bottom: 1rem !important;
    }

    .disclaimer-modal__body p {
        font-size: 0.92rem !important;
        line-height: 1.65 !important;
        margin-bottom: 1rem !important;
    }

    .disclaimer-modal__body div[style*="height: 1px"] {
        margin-bottom: 1.5rem !important;
    }

    #disclaimerHomeBtn {
        min-width: 220px !important;
        padding: 0.95rem 2rem !important;
        font-size: 1rem !important;
    }

    .disclaimer-modal__note {
        font-size: 0.74rem !important;
        margin-top: 2.25rem !important;
        line-height: 1.55 !important;
    }
}

/* ============================================
   Home — About Teaser
   ============================================ */

/* ============================================
   Home — About Teaser
   ============================================ */

.home-about {
    padding: calc(clamp(110px, 13vh, 180px) + 30px) 0 clamp(50px, 8vh, 100px);
}

/* Wider container + bigger gap so the section fills the screen */
.home-about .container {
    max-width: 1750px;
}

.home-about .about-grid {
    gap: clamp(3rem, 6.5vw, 7.5rem);
    align-items: center;
}

/* ============================================
   Home About Section — Styled like "The Way We Work"
   ============================================ */

.home-about {
    padding: clamp(4.5rem, 8vh, 7.5rem) 0;
}

.home-about .about-header {
    text-align: center;
    max-width: 1140px;
    margin: 0 auto clamp(2.8rem, 4.5vh, 4.2rem);
}

.home-about .about-header .home-about-eyebrow {
    justify-content: center;
    margin-bottom: 1.2rem;
    font-size: clamp(0.85rem, 1.1vw, 0.98rem);
    letter-spacing: 0.25em;
}

.home-about .about-header .section-title {
    font-size: clamp(2.8rem, 4.8vw, 5.2rem);
    line-height: 1.08;
    margin-bottom: 1.5rem;
    text-align: center;
}

.home-about .about-header .section-title .title-line-1 {
    display: block;
    white-space: nowrap;
}

.home-about .about-header .section-title .title-line-2 {
    display: block;
    white-space: nowrap;
}

.home-about .about-header .about-text {
    margin: 0 auto;
    text-align: center;
    max-width: 960px;
    font-size: clamp(1.22rem, 1.5vw, 1.55rem);
    line-height: 1.75;
    color: var(--text-secondary);
}


/* ============================================
   About Section — Interactive Accordion Menu
   ============================================ */

.about-accordion {
    margin-top: 2.2rem;
    margin-bottom: 2.8rem;
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--hairline);
    border-radius: 0;
    background: rgba(15, 20, 26, 0.45);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.accordion-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    position: relative;
    transition: background 0.35s ease;
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--cyan);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.accordion-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.accordion-item.is-open {
    background: color-mix(in srgb, var(--cyan) 6%, rgba(15, 20, 26, 0.65));
}

.accordion-item.is-open::before {
    opacity: 1;
}

.accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.35rem 1.8rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.accordion-header .feature-marker {
    display: inline-block;
    width: 14px;
    height: 2px;
    background: var(--cyan);
    border-radius: 1px;
    flex-shrink: 0;
    transform: none;
    transition: background 0.35s ease;
}

.accordion-item.is-open .accordion-header .feature-marker {
    background: #2DF0D8;
    transform: none;
}

.accordion-title {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1.15rem, 1.35vw, 1.35rem);
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    letter-spacing: -0.01em;
}

.accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
    flex-shrink: 0;
}

.accordion-item.is-open .accordion-icon {
    transform: rotate(45deg);
    color: #2DF0D8;
}

.accordion-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease, padding 0.35s ease;
    padding: 0 1.6rem;
}

.accordion-item.is-open .accordion-body {
    max-height: 220px;
    opacity: 1;
    padding: 0 1.6rem 1.4rem 3.5rem;
}

.accordion-content {
    font-size: clamp(1.02rem, 1.2vw, 1.18rem);
    line-height: 1.65;
    color: var(--text-secondary);
    font-weight: 300;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    padding-top: 1rem;
}

/* Growth Partner accordion — an editorial, full-width treatment that mirrors
   the numbered rows on the About page while keeping the detail expandable. */
.home-about-accordion {
    max-width: min(1280px, 94vw);
    width: 100%;
    margin: 0 auto;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    overflow: visible;
}

.home-about-accordion .accordion-item {
    --row-accent: var(--cyan);
    border-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    background: transparent;
}

.home-about-accordion .accordion-item:nth-child(2) { --row-accent: #4285F4; }
.home-about-accordion .accordion-item:nth-child(3) { --row-accent: #0866FF; }
.home-about-accordion .accordion-item:nth-child(4) { --row-accent: #0A2FA0; }

.home-about-accordion .accordion-item::before {
    top: -1px;
    bottom: auto;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--row-accent), transparent);
    opacity: 1;
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-about-accordion .accordion-item:hover::before,
.home-about-accordion .accordion-item.is-open::before {
    width: 100%;
}

.home-about-accordion .accordion-item:hover,
.home-about-accordion .accordion-item.is-open {
    background: transparent;
}

.home-about-accordion .accordion-header {
    display: grid;
    grid-template-columns: clamp(64px, 7vw, 110px) minmax(0, 1fr) 30px;
    align-items: start;
    gap: clamp(18px, 3vw, 52px);
    padding: clamp(30px, 4.5vh, 48px) clamp(4px, 1vw, 12px);
}

.home-about-accordion .accordion-num {
    padding-top: 0.35em;
    color: var(--row-accent);
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    font-weight: 800;
    letter-spacing: 0.12em;
}

.home-about-accordion .accordion-title {
    color: #F8F4EC;
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1.9rem, 3.1vw, 3.1rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.04;
    transition: color 0.35s ease;
}

.home-about-accordion .accordion-title .val-accent {
    color: var(--row-accent);
}

.home-about-accordion .accordion-item:hover .accordion-title,
.home-about-accordion .accordion-item.is-open .accordion-title {
    color: var(--row-accent);
}

.home-about-accordion .accordion-icon {
    padding-top: 0.08em;
    color: var(--row-accent);
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
}

.home-about-accordion .accordion-item.is-open .accordion-icon {
    color: var(--row-accent);
}

.home-about-accordion .accordion-body {
    padding: 0;
    margin-left: calc(clamp(64px, 7vw, 110px) + clamp(18px, 3vw, 52px));
    margin-right: clamp(38px, 5vw, 82px);
}

.home-about-accordion .accordion-item.is-open .accordion-body {
    max-height: 360px;
    padding: 0 0 clamp(30px, 4.5vh, 48px);
}

.home-about-accordion .accordion-content {
    max-width: 62ch;
    border-top: 0;
    padding: 0;
    color: rgba(244, 241, 234, 0.82);
    font-size: clamp(0.98rem, 1.1vw, 1.1rem);
    font-weight: 600;
    line-height: 1.65;
}

.home-about-accordion .accordion-header:focus-visible {
    outline: 1px solid var(--row-accent);
    outline-offset: -1px;
}

/* Short desktop/laptop viewports: keep the full growth-partner section inside
   the screen instead of letting the open accordion row push item 4 below the fold. */
@media (min-width: 769px) and (max-height: 850px) {
    .home-about {
        padding: clamp(36px, 5vh, 56px) 0;
    }

    .home-about .about-header {
        max-width: 1060px;
        margin-bottom: clamp(24px, 3vh, 34px);
    }

    .home-about .about-header .home-about-eyebrow {
        margin-bottom: 0.8rem;
        font-size: clamp(0.78rem, 0.95vw, 0.88rem);
    }

    .home-about .about-header .section-title {
        font-size: clamp(2.7rem, 4.2vw, 4.6rem);
        line-height: 1.04;
        margin-bottom: 1.1rem;
    }

    .home-about .about-header .about-text {
        max-width: 900px;
        font-size: clamp(1.12rem, 1.3vw, 1.35rem);
        line-height: 1.6;
    }

    .home-about-accordion {
        max-width: min(1220px, 92vw);
    }

    .home-about-accordion .accordion-header {
        grid-template-columns: clamp(56px, 6vw, 92px) minmax(0, 1fr) 28px;
        gap: clamp(18px, 2.5vw, 42px);
        padding: clamp(26px, 3.8vh, 40px) clamp(4px, 1vw, 12px);
    }

    .home-about-accordion .accordion-num {
        font-size: clamp(1.02rem, 1.25vw, 1.25rem);
        padding-top: 0.3em;
    }

    .home-about-accordion .accordion-title {
        font-size: clamp(1.8rem, 2.7vw, 2.7rem);
        line-height: 1.04;
    }

    .home-about-accordion .accordion-icon {
        font-size: 1.95rem;
    }

    .home-about-accordion .accordion-body {
        margin-left: calc(clamp(56px, 6vw, 92px) + clamp(18px, 2.5vw, 42px));
        margin-right: clamp(30px, 4vw, 62px);
    }

    .home-about-accordion .accordion-item.is-open .accordion-body {
        max-height: 280px;
        padding-bottom: clamp(22px, 3.2vh, 32px);
    }

    .home-about-accordion .accordion-content {
        max-width: 68ch;
        font-size: clamp(1.02rem, 1.15vw, 1.18rem);
        line-height: 1.6;
    }
}

@media (max-width: 768px) {
    .home-about {
        padding-bottom: 44px;
    }

    .home-about .about-header .section-title {
        font-size: clamp(1.6rem, 5.6vw, 2.4rem);
        line-height: 1.12;
    }

    .home-about .about-header .section-title .title-line-1,
    .home-about .about-header .section-title .title-line-2 {
        white-space: nowrap;
    }

    .home-about-lower {
        width: min(100%, 92vw);
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .home-about .about-cta-wrap {
        justify-content: flex-start;
        margin: 0;
    }

    .home-about-accordion .accordion-header {
        grid-template-columns: 42px minmax(0, 1fr) 24px;
        gap: 12px;
        padding: 26px 2px;
    }

    .home-about-accordion .accordion-title {
        font-size: clamp(1.45rem, 7vw, 2rem);
    line-height: 1.08;
}

    .home-about-accordion .accordion-body {
        margin-left: 54px;
        margin-right: 24px;
    }

    .home-about-accordion .accordion-item.is-open .accordion-body {
        padding-bottom: 28px;
    }
}

.home-about-accordion .accordion-item.is-open {
    background: transparent;
}

.ed-hero-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 4.2vw, 5.2rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin: 0;
    color: #F8F4EC;
    text-align: left;
}

.ed-hero-title .ed-line {
    display: block;
    white-space: nowrap;
}

.ed-hero-title .ed-line--accent {
    color: var(--cyan);
}

.d-mobile-only {
    display: none;
}

.home-about-accordion .accordion-header {
    display: grid;
    grid-template-columns: clamp(64px, 7vw, 110px) minmax(0, 1fr) 30px;
    align-items: start;
    gap: clamp(18px, 3vw, 52px);
    padding: clamp(30px, 4.5vh, 48px) clamp(4px, 1vw, 12px);
}

.home-about-accordion .accordion-num {
    padding-top: 0.35em;
    color: var(--row-accent);
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    font-weight: 800;
    letter-spacing: 0.12em;
}

.home-about-accordion .accordion-title {
    color: #F8F4EC;
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1.9rem, 3.1vw, 3.1rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.04;
    transition: color 0.35s ease;
}

.home-about-accordion .accordion-title .val-accent {
    color: var(--row-accent);
}

.home-about-accordion .accordion-item:hover .accordion-title,
.home-about-accordion .accordion-item.is-open .accordion-title {
    color: var(--row-accent);
}

.home-about-accordion .accordion-icon {
    padding-top: 0.08em;
    color: var(--row-accent);
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
}

.home-about-accordion .accordion-item.is-open .accordion-icon {
    color: var(--row-accent);
}

.home-about-accordion .accordion-body {
    padding: 0;
    margin-left: calc(clamp(64px, 7vw, 110px) + clamp(18px, 3vw, 52px));
    margin-right: clamp(38px, 5vw, 82px);
}

.home-about-accordion .accordion-item.is-open .accordion-body {
    max-height: 360px;
    padding: 0 0 clamp(30px, 4.5vh, 48px);
}

.home-about-accordion .accordion-content {
    max-width: 62ch;
    border-top: 0;
    padding: 0;
    color: rgba(244, 241, 234, 0.82);
    font-size: clamp(0.98rem, 1.1vw, 1.1rem);
    font-weight: 600;
    line-height: 1.65;
}

.home-about-accordion .accordion-header:focus-visible {
    outline: 1px solid var(--row-accent);
    outline-offset: -1px;
}

/* Short desktop/laptop viewports: keep the full growth-partner section inside
   the screen instead of letting the open accordion row push item 4 below the fold. */
@media (min-width: 769px) and (max-height: 850px) {
    .home-about {
        padding: clamp(36px, 5vh, 56px) 0;
    }

    .home-about .about-header {
        max-width: 1060px;
        margin-bottom: clamp(24px, 3vh, 34px);
    }

    .home-about .about-header .home-about-eyebrow {
        margin-bottom: 0.8rem;
        font-size: clamp(0.78rem, 0.95vw, 0.88rem);
    }

    .home-about .about-header .section-title {
        font-size: clamp(2.7rem, 4.2vw, 4.6rem);
        line-height: 1.04;
        margin-bottom: 1.1rem;
    }

    .home-about .about-header .about-text {
        max-width: 900px;
        font-size: clamp(1.12rem, 1.3vw, 1.35rem);
        line-height: 1.6;
    }

    .home-about-accordion {
        max-width: min(1220px, 92vw);
    }

    .home-about-accordion .accordion-header {
        grid-template-columns: clamp(56px, 6vw, 92px) minmax(0, 1fr) 28px;
        gap: clamp(18px, 2.5vw, 42px);
        padding: clamp(26px, 3.8vh, 40px) clamp(4px, 1vw, 12px);
    }

    .home-about-accordion .accordion-num {
        font-size: clamp(1.02rem, 1.25vw, 1.25rem);
        padding-top: 0.3em;
    }

    .home-about-accordion .accordion-title {
        font-size: clamp(1.8rem, 2.7vw, 2.7rem);
        line-height: 1.04;
    }

    .home-about-accordion .accordion-icon {
        font-size: 1.95rem;
    }

    .home-about-accordion .accordion-body {
        margin-left: calc(clamp(56px, 6vw, 92px) + clamp(18px, 2.5vw, 42px));
        margin-right: clamp(30px, 4vw, 62px);
    }

    .home-about-accordion .accordion-item.is-open .accordion-body {
        max-height: 280px;
        padding-bottom: clamp(22px, 3.2vh, 32px);
    }

    .home-about-accordion .accordion-content {
        max-width: 68ch;
        font-size: clamp(1.02rem, 1.15vw, 1.18rem);
        line-height: 1.6;
    }
}

@media (max-width: 768px) {
    .home-about {
        padding-bottom: 44px;
    }

    .home-about .about-header .section-title {
        font-size: clamp(1.6rem, 5.6vw, 2.4rem);
        line-height: 1.12;
    }

    .home-about .about-header .section-title .title-line-1,
    .home-about .about-header .section-title .title-line-2 {
        white-space: nowrap;
    }

    .home-about-lower {
        width: min(100%, 92vw);
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .home-about .about-cta-wrap {
        justify-content: flex-start;
        margin: 0;
    }

    .home-about-accordion .accordion-header {
        grid-template-columns: 42px minmax(0, 1fr) 24px;
        gap: 12px;
        padding: 26px 2px;
    }

    .home-about-accordion .accordion-title {
        font-size: clamp(1.45rem, 7vw, 2rem);
    line-height: 1.08;
}

    .home-about-accordion .accordion-body {
        margin-left: 54px;
        margin-right: 24px;
    }

    .home-about-accordion .accordion-item.is-open .accordion-body {
        padding-bottom: 28px;
    }
}

.home-about-btn {
    min-width: 270px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1.3rem 2.6rem;
    background: var(--cyan);
    border: 1px solid var(--cyan);
    color: #06120F;
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.3s ease,
        color 0.3s ease;
}

.home-about-btn span {
    color: #06120F;
}

.ed-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px !important;
}

.ed-hero-cta .btn {
    margin-bottom: 0 !important;
}

.ed-hero-cta .btn svg {
    width: 20px;
    height: 20px;
    max-width: 0;
    margin-left: -0.6rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: max-width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease;
}

.ed-hero-cta .btn:hover svg,
.ed-hero-cta .btn:focus-visible svg {
    max-width: 20px;
    margin-left: 0;
    opacity: 1;
    transform: translateX(0);
}

    .abt-hero .ed-hero-aside {
        position: absolute;
        right: calc(clamp(72px, 7vw, 132px) - 100px);
        bottom: calc(clamp(42px, 6.5vh, 82px) - 75px);
        width: clamp(220px, 17vw, 300px);
        padding-left: clamp(20px, 2vw, 34px);
        z-index: 2;
    }

    .abt-hero .ed-hero-cta .btn {
        min-width: 0;
        min-height: clamp(52px, 6.6vh, 62px);
        padding-inline: clamp(20px, 1.9vw, 32px);
        font-size: clamp(0.82rem, 0.95vw, 0.95rem);
    }

    .abt-hero .ed-masthead {
        padding-bottom: clamp(16px, 2vh, 28px);
    }

    .abt-hero .ed-masthead-brand {
        position: relative;
        display: inline-block;
        font-family: 'Cormorant Garamond', 'Bodoni Moda', serif;
        font-size: clamp(3.1rem, 4.2vw, 5.35rem);
        font-weight: 700;
        line-height: 0.92;
        letter-spacing: -0.03em;
        color: #F8F4EC;
        text-shadow: 0 10px 30px rgba(0, 184, 212, 0.12);
    }

    .abt-hero .ed-masthead-brand::after {
        content: '';
        position: absolute;
        left: 0.08em;
        right: -0.12em;
        bottom: -0.16em;
        height: clamp(9px, 0.75vw, 14px);
        background:
            radial-gradient(ellipse at 15% 50%, rgba(248, 244, 236, 0.85) 0 2px, transparent 3px),
            linear-gradient(90deg, rgba(0, 184, 212, 0), rgba(0, 184, 212, 0.95) 18%, rgba(248, 244, 236, 0.72) 48%, rgba(0, 184, 212, 0.8) 78%, rgba(0, 184, 212, 0));
        background-size: 100% 100%, 220% 100%;
        clip-path: polygon(0 58%, 12% 34%, 28% 48%, 45% 28%, 63% 46%, 81% 32%, 100% 55%, 100% 74%, 80% 50%, 63% 64%, 45% 44%, 28% 66%, 12% 50%, 0 76%);
        opacity: 0.9;
        filter: drop-shadow(0 8px 14px rgba(0, 184, 212, 0.2));
        animation: adzioUnderlineWave 3.2s ease-in-out infinite;
        pointer-events: none;
    }

    @keyframes adzioUnderlineWave {
        0%,
        100% {
            background-position: 0 0, 0% 0;
            clip-path: polygon(0 58%, 12% 34%, 28% 48%, 45% 28%, 63% 46%, 81% 32%, 100% 55%, 100% 74%, 80% 50%, 63% 64%, 45% 44%, 28% 66%, 12% 50%, 0 76%);
            transform: translateY(0);
        }

        50% {
            background-position: 0 0, 100% 0;
            clip-path: polygon(0 50%, 12% 58%, 28% 38%, 45% 54%, 63% 34%, 81% 56%, 100% 44%, 100% 66%, 80% 74%, 63% 52%, 45% 72%, 28% 56%, 12% 76%, 0 62%);
            transform: translateY(1px);
        }
    }

    .abt-hero .ed-hero-aside::before,
    .svc-hero .ed-hero-aside::before {
        top: -12rem;
        bottom: -2rem;
    }

    .abt-hero .ed-hero-aside::before {
        top: -18px;
        bottom: -18px;
    }

/* ── Closing meta strip: the agency's own facts, hairline separated ── */
.ed-hero-meta {
    list-style: none;
    margin: 0;
    padding: clamp(16px, 2.4vh, 26px) 0 0;
    border-top: 1px solid rgba(244, 241, 234, 0.14);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 34px);
}

.ed-hero-meta li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    padding-left: clamp(14px, 1.5vw, 26px);
}

.ed-hero-meta li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15rem;
    bottom: 0.15rem;
    width: 1px;
    background: rgba(244, 241, 234, 0.12);
}

.ed-hero-meta li:first-child::before {
    background: var(--cyan);
}

.ed-hero-meta b {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(1.25rem, min(1.9vw, 3.2vh), 2rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: #F8F4EC;
}

.ed-hero-meta span {
    font-size: clamp(0.7rem, 0.8vw, 0.82rem);
    line-height: 1.4;
    color: rgba(244, 241, 234, 0.5);
}

/* The two-part platform label is an inline-flex row with a gap, which breaks
   into a lopsided two-line block on phones. Inline flow wraps it as one
   sentence instead. */
@media (max-width: 620px) {
    .svc-platform-heading {
        display: inline;
        text-align: center;
    }
}

/* ── Responsive ── */
@media (max-width: 1000px) {
    /* The desktop composition indents the hero by a 140px minimum, which eats
       more than a third of a phone's width and pushed the headline and buttons
       off screen. Below the two-column layout the shell's own gutter is the
       only indent needed. */
    .ed-hero {
        margin-top: 14px;
        padding-left: 0;
        padding-right: 0;
    }

    .d-desktop-only {
        display: none !important;
    }
    .d-mobile-only {
        display: block !important;
    }

    .ed-hero-title .ed-line {
        white-space: normal;
    }

    .ed-hero-body {
        grid-template-columns: 1fr;
        align-items: start;
        gap: clamp(22px, 3vh, 32px);
    }

    .ed-hero-aside {
        padding-left: 0;
        padding-top: clamp(18px, 2.6vh, 26px);
    }

    /* Hairline flips from vertical to horizontal once stacked */
    .ed-hero-aside::before {
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg,
            rgba(0, 184, 212, 0.5) 0%,
            rgba(244, 241, 234, 0.16) 46%,
            transparent 100%);
    }

    .ed-hero-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(14px, 2.4vh, 22px) 18px;
    }
}

@media (max-width: 600px) {
    .ed-masthead-brand {
        letter-spacing: 0.24em;
    }

    .ed-hero-title {
        font-size: clamp(2.05rem, 9.2vw, 3.1rem);
        line-height: 1;
    }

    .ed-hero-cta .btn {
        flex: 0 0 66%;
    }
}


/* ============================================
   MOBILE PASS - tap targets, input zoom, modal title
   Everything below is scoped to (max-width: 768px). Desktop base rules are
   untouched, so desktop rendering cannot change.
   ============================================ */
@media (max-width: 768px) {

    /* ── 1. iOS zoom-on-focus ──
       Safari zooms the whole page when a focused field is under 16px. The root
       font-size is 15px here, so `1rem` was landing at 15px and tripping it on
       every step of the quiz. Pinned in px so it can't drift with the root. */
    .quiz-inline-card .form-group input,
    .quiz-inline-card .form-group textarea,
    .quiz-inline-card .form-group select,
    .quiz-inline-card .custom-select-trigger,
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px;
    }

    /* ── 2. Tap targets ──
       Two techniques. Where an element has room around it, an invisible
       ::before grows the touch region to 44px without moving a single pixel of
       the visual box. Where neighbours sit too close for that (the expansions
       would overlap and steal each other's taps), the box itself grows. */

    /* 2a. Hit-area expansion - no visual change.
       Each of these already establishes a containing block, or gets one below,
       and none of them use ::before for anything. */
    .footer-legal a::before,
    .m-nav-foot a::before,
    .service-cta::before,
    .social-link::before,
    .vsl-corner-btn--close::before,
    .vsl-corner-btn--fs::before,
    .vsl-ctrl-btn::before,
    .legal-modal__close::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: max(100%, 44px);
        height: max(100%, 44px);
        transform: translate(-50%, -50%);
        /* Hit area only - never painted. */
        background: transparent;
        pointer-events: auto;
    }

    /* These two are statically positioned, so the pseudo needs an anchor.
       The corner/close buttons are already absolute - deliberately not
       re-positioned here, that would break where they sit. */
    .m-nav-foot a,
    .vsl-ctrl-btn {
        position: relative;
    }

    /* 2b. Real sizing, where a pseudo overlay would collide with a sibling.
       Footer link column: rows were 25px tall on a 38px pitch, so a centred
       44px hit area would have overlapped its neighbour inside the 13px gap.
       Growing the row and tightening the gap keeps the block's rhythm close to
       what it was while making each row unambiguously tappable. */
    .footer .footer-links {
        gap: 0;
    }

    /* Padding rather than min-height + flex: these links paint their text with
       -webkit-background-clip: text over a transparent color, and that pairing
       is quirky on flex containers. Leaving `display` alone keeps the gradient
       text rendering exactly as it does today. The hover underline sits at
       bottom: -2px and so rides down with the padding, but it only ever appears
       on :hover, which never fires on touch. */
    .footer .footer-links li a {
        padding: 10px 0;
        /* "Home" is only 43px of text. The box extends invisibly to the right in
           a left-aligned column, so nothing moves. */
        min-width: 44px;
    }

    /* Logo lockup was 42px - the image size is left alone, the link grows. */
    .m-nav-brand {
        min-height: 44px;
    }

    /* Footer email/phone rows were 42px. Already centred flex rows with a 14px
       gap, so 2px of extra height costs nothing visually. */
    .contact-item {
        min-height: 44px;
    }

    /* Hero play button: height is derived from --btn-h, and the element's
       clip-path would have cropped any pseudo overlay, so the variable is
       overridden instead. Width and open-state geometry still key off --size,
       which is unchanged; the icon scales with the height, which also fixes a
       12px triangle that was too small to read. */
    .hero-vsl .vsl-play-btn {
        --btn-h: 44px;
    }

    /* ── 3. Disclaimer modal title ──
       `min(4cqi, 1.7rem)` with nowrap resolved against a 92vw panel, so the
       heading came out at 14.3px on a 390px screen and 11.7px at 320px -
       smaller than the body copy under it, and clipped vertically by the
       nowrap. Letting it wrap is what makes a readable size possible. The
       desktop panel is 640px wide, where the cqi rule already caps at 1.7rem,
       so this is invisible above 768px. */
    #disclaimer-title {
        font-size: 1.35rem;
        white-space: normal;
        line-height: 1.25;
    }
}


/* ============================================
   MOBILE PASS 2 - typography + section rhythm
   Also scoped entirely to (max-width: 768px). Kept as a separate block from the
   tap-target pass above so either can be reviewed or reverted on its own.
   ============================================ */
@media (max-width: 768px) {

    /* ── Body copy to a 16px floor ──
       Only text a visitor reads as prose. Deliberate micro-type is left alone:
       uppercase eyebrows, form labels, .footer-copyright, the dashboard
       captions, and the phone/site mockup text (which is meant to look like
       tiny screenshot copy). Sizes are px, not rem, so the 15px root cannot
       pull them back under the floor. */
    .service-description,
    .services-section .service-features li,
    /* .home-about .about-feature (specificity 0,2,0) sets this at mobile, so a
       bare .about-feature would lose. The inner .feature-marker span has no
       size of its own and inherits from here. */
    .home-about .about-feature,
    .cta-subtitle,
    .footer-tagline,
    .ed-hero-lead,
    .quiz-inline-card .quiz-step-subtitle,
    .quiz-inline-card .custom-select-item,
    /* Two success panels exist: #quizSuccess sits inside .quiz-inline-card,
       #formSuccess does not, so scoping to .form-success covers both. */
    .form-success .success-subtitle,
    .form-success .success-detail-item,
    .legal-modal__body p,
    .legal-modal__date {
        font-size: 16px;
    }

    /* The card title was 15px - the same size as body copy, and about to be
       smaller than its own description. 1.2rem puts it back above the text it
       heads. min-height on this rule is in em, so it scales with this. */
    .services-section .service-title {
        font-size: 1.2rem;
    }

    /* Was 13.2px uppercase, i.e. smaller than the paragraphs underneath it.
       Caps plus weight 700 still read as a heading at 16px. */
    .legal-modal__body h3 {
        font-size: 16px;
    }

    /* The base .multi-service-option rule declares font-size !important, so the
       checkbox label text (a span that inherits from it) stays at 13.5px unless
       this matches that priority. */
    .multi-service-option {
        font-size: 16px !important;
    }

    /* The existing mobile rule for this one is itself !important
       (.disclaimer-modal__body p, 0.92rem), so matching it is the only way to
       win without raising specificity for no reason. Covers the fine-print
       note in the same panel, which is also a p. */
    .disclaimer-modal__body p {
        font-size: 16px !important;
    }

    /* ── Multi-line heading line-height ──
       These were 1.0 to 1.08. On a headline that wraps to 3-4 lines at phone
       widths that reads as one solid block. The hero grows ~20px taller as a
       result, which is the accepted cost. */
    .hero-title {
        line-height: 1.14;
    }

    .cta-title {
        line-height: 1.14;
    }

    .services-header h2 {
        line-height: 1.16;
    }

    /* ── Section rhythm ──
       Outlier only. This section was padding: clamp(5.5rem, 11vh, 9.5rem),
       resolving to 92.8px top AND bottom against a 2.25rem house unit, which
       put ~120px of dead space around one logo strip. Neighbouring sections are
       deliberately left as they are. */
    .logo-slider {
        padding: 2.25rem 0;
    }
}


/* ============================================
   MOBILE PASS 3 - layout + spacing
   Scoped to (max-width: 768px). Desktop base rules untouched.
   ============================================ */
@media (max-width: 768px) {

    /* The 88vw desktop inset leaves roughly double the side gutter of the
       neighbouring sections at phone widths (43px vs 22.5px), so the services
       block looked inset from everything above and below it. Match the site's
       standard section gutter instead. */
    .services-section .container {
        max-width: 100%;
        padding-inline: var(--spacing-lg);
    }
}


/* ============================================
   Social icon hover tooltip
   Types the label out left to right with a caret that trails the text.
   Pointer-hover only: on touch, :hover sticks after a tap and would strand
   the panel over the footer, so both this block and the JS opt out.
   ============================================ */

/* Hidden by default, for every device. Everything that positions and hides this
   panel used to live inside the hover block below, so on a touch device - where
   that block never matches - the labels rendered as plain text stacked under
   the icons. Desktop mobile emulation still reports a fine pointer, which is
   why it only showed up on a real phone. */
.social-tip {
    display: none;
}

@media (hover: hover) and (pointer: fine) {

    /* Lift the hovered icon above its neighbours so the panel is never
       painted over by a later sibling (they are all position: relative with
       no z-index, so DOM order would otherwise win). */
    .social-link:hover,
    .social-link:focus-visible,
    .contact-item:hover,
    .contact-item:focus-visible {
        z-index: 10;
    }

    .social-tip {
        position: absolute;
        top: calc(100% + 10px);
        bottom: auto;
        /* Anchored to the icon's left edge, not centred on it. These icons sit
           hard against the left edge of the footer column, so a centred panel
           ran off the viewport and clipped the first word. Growing rightward
           keeps all three in bounds. */
        left: 0;
        transform: translateY(-3px);
        /* Grid stacking: the hidden sizer holds the final width so the box is
           laid out once, and the typed line fills that same cell. Without it
           the panel would widen per character and drift as you read. */
        display: inline-grid;
        align-items: center;
        padding: 7px 10px;
        /* A box, not a pill. */
        border-radius: 6px;
        background: rgba(11, 15, 19, 0.97);
        border: 1px solid var(--hairline);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
        font-family: 'Archivo', sans-serif;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        line-height: 1.2;
        color: var(--text-primary);
        white-space: nowrap;
        /* .footer-brand switches to text-align: center below 1024px, and the
           panel would inherit it — the line would then centre itself inside the
           reserved box and creep outward instead of typing left to right. */
        text-align: left;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    }

    .social-tip-sizer,
    .social-tip-text {
        grid-area: 1 / 1;
    }

    /* Reserves the width only; never read by AT or the eye. */
    .social-tip-sizer {
        visibility: hidden;
    }

    /* Trailing caret. Sits immediately after the last typed character, so it
       walks left to right as the text lands. */
    .social-tip-text::after {
        content: '';
        display: inline-block;
        width: 2px;
        height: 0.95em;
        margin-left: 2px;
        vertical-align: text-bottom;
        background: var(--cyan);
        animation: social-tip-caret 1s steps(1, end) infinite;
    }

    /* Solid while characters are still landing, blinking once it settles. */
    .social-tip.is-typing .social-tip-text::after {
        animation: none;
        opacity: 1;
    }

    .social-link:hover .social-tip,
    .social-link:focus-visible .social-tip,
    .contact-item:hover .social-tip,
    .contact-item:focus-visible .social-tip {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
    }

    /* Email's tip sits above the icon row instead of below, so it doesn't
       collide with the phone row directly beneath it. */
    .contact-tip-above {
        top: auto;
        bottom: calc(100% + 10px);
        transform: translateY(3px);
    }

    .contact-item:hover .contact-tip-above,
    .contact-item:focus-visible .contact-tip-above {
        transform: translateY(0);
    }

    @keyframes social-tip-caret {
        0%, 49% { opacity: 1; }
        50%, 100% { opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
        .social-tip {
            transition: none;
        }

        .social-tip-text::after {
            animation: none;
            opacity: 1;
        }
    }
}


/* ============================================
   Growth-partner section: mid-height desktops
   There was a compact treatment for max-height: 850px and the base sizing for
   very tall screens, but nothing in between. In that gap the type sits at its
   width-driven caps while the viewport is not tall enough to hold it, so the
   section measured 1024px at 900px tall and 1120px at 1080px tall and pushed
   the last accordion row off screen. This band scales the same pieces off vh so
   the whole section lands inside the viewport at every desktop height.
   ============================================ */
@media (min-width: 769px) and (min-height: 851px) and (max-height: 1400px) {

    .home-about {
        padding: clamp(40px, 5vh, 76px) 0;
    }

    .home-about .about-header {
        margin-bottom: clamp(22px, 3vh, 40px);
    }

    .home-about .about-header .section-title {
        font-size: clamp(2.6rem, min(3.4vw, 6.2vh), 4rem);
        line-height: 1.04;
        margin-bottom: 0.8rem;
    }

    .home-about .about-header .about-text {
        font-size: clamp(1rem, 1.05vw, 1.16rem);
        line-height: 1.55;
    }

    .home-about-accordion .accordion-header {
        padding: clamp(20px, 3vh, 34px) clamp(4px, 1vw, 12px);
    }

    .home-about-accordion .accordion-title {
        font-size: clamp(1.6rem, min(2.3vw, 4vh), 2.35rem);
        line-height: 1.04;
    }

    .home-about-accordion .accordion-item.is-open .accordion-body {
        max-height: 200px;
        padding-bottom: clamp(16px, 2.4vh, 24px);
    }
}


/* ============================================
   "Book a Call" typewriter link on an expanded accordion row
   Mirrors the About page's .row-book-call on the way-we-work rows, with one
   difference: those reveal on :hover, these key off .is-open because this
   component expands rather than reveals. The underline picks up --row-accent,
   which .home-about-accordion already sets per row, so each row underlines in
   its own colour exactly like the reference.
   The link is a sibling of .accordion-body, not a child: that element is
   overflow: hidden for the expand animation and would clip an absolutely
   positioned descendant.
   ============================================ */
.accordion-item {
    position: relative;
}

.accordion-book-call {
    position: absolute;
    right: clamp(12px, 1.8vw, 24px);
    bottom: clamp(14px, 2.2vh, 24px);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-family: 'Archivo', sans-serif;
    font-size: clamp(0.72rem, 0.85vw, 0.84rem);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
}

.accordion-book-call:hover {
    color: var(--row-accent, var(--cyan));
}

.accordion-book-call .type-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
}

.accordion-item.is-open .accordion-book-call {
    opacity: 1;
    pointer-events: auto;
}

.accordion-item.is-open .accordion-book-call .type-text {
    animation: accordionTypeOut 0.45s steps(14, end) forwards;
}

/* Named separately from the About page's typeOutWord so the two cannot collide
   on pages that load both stylesheets. */
@keyframes accordionTypeOut {
    from { width: 0; }
    to { width: 100%; }
}

/* Underline in the row's accent colour, drawn only when the link itself is
   hovered — same as the reference. */
.accordion-book-call::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: var(--row-accent, var(--cyan));
    border-radius: 1px;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-book-call:hover::after {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .accordion-item.is-open .accordion-book-call .type-text {
        animation: none;
        width: 100%;
    }
}


/* On phones the absolute bottom-right placement would sit on top of the body
   copy. The About page reference never hits this because it reveals on :hover,
   which never fires on touch — this one keys off .is-open, so it is always
   visible on an expanded row and has to take part in normal flow instead.
   display: none while closed keeps collapsed rows at their current height. */
@media (max-width: 768px) {
    .accordion-book-call {
        position: static;
        display: none;
    }

    .accordion-item.is-open .accordion-book-call {
        display: flex;
        width: max-content;
        margin: 0 1.6rem 1.25rem auto;
        opacity: 1;
    }
}

/* Compact the home-page value menu so its three choices remain scannable
   together on phones while retaining a comfortable touch target. */
@media (max-width: 768px) {
    .home-about-accordion .accordion-header {
        grid-template-columns: 34px minmax(0, 1fr) 22px;
        gap: 10px;
        min-height: 44px;
        padding: 14px 0;
    }

    .home-about-accordion .accordion-num {
        font-size: 1rem;
        padding-top: 0.2em;
    }

    .home-about-accordion .accordion-title {
        font-size: clamp(1.15rem, 5.3vw, 1.5rem);
        line-height: 1.05;
    }

    .home-about-accordion .accordion-icon {
        font-size: 1.65rem;
    }
}

/* Enlarge the mobile-menu social marks without changing their layout slots. */
@media (max-width: 768px) {
    .m-nav-socials svg {
        transform: scale(1.55);
        transform-origin: center;
    }

    .m-nav-socials a:active svg {
        transform: translateY(-2px) scale(1.55);
    }
}

/* Match the top-right call CTA's phone reveal inside the mobile menu. */
@media (max-width: 768px) {
    .m-nav-cta {
        gap: 0;
        transition: opacity 0.4s ease 0.22s,
            transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.22s,
            filter 0.2s ease,
            gap 0.35s ease,
            color 0.3s ease;
    }

    .m-nav-cta .phone-ring-icon {
        width: 0;
        height: 16px;
        opacity: 0;
        flex-shrink: 0;
        transform: scale(0.4) rotate(0deg);
        transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.3s ease,
            transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .m-nav-cta:hover,
    .m-nav-cta:focus-visible {
        color: #ffffff !important;
        gap: 8px;
    }

    .m-nav-cta:hover::before,
    .m-nav-cta:focus-visible::before {
        background: #005b73;
    }

    .m-nav-cta:hover .phone-ring-icon,
    .m-nav-cta:focus-visible .phone-ring-icon {
        width: 16px;
        opacity: 1;
        transform: scale(1);
        animation: phoneRing 0.6s ease-in-out infinite alternate;
    }
}