/* ================================================================
   STYLE.CSS — DSK Media Group 2026 (Design System v2.0)
   Mobile-first. No build tools. Vanilla CSS custom properties.
================================================================ */

/* 1. VARIABLES */
:root {
    --brand-accent:             #FDB913;
    --brand-accent-hover:       #E5A600;
    --brand-accent-bright:      #FFC700;
    --brand-accent-soft-bg:     rgba(253,185,19,0.08);
    --brand-accent-soft-border: rgba(253,185,19,0.5);
    --brand-accent-fade:        #EEE0BF;
    --brand-accent-fade-dark:   #E9DCBB;

    --surface-0: #EAEAEA;
    --surface-1: #FFFFFF;
    --surface-2: #FAFAFA;
    --surface-3: #FFFFFF;

    --text-primary:   #0D0D0D;
    --text-secondary: #444444;
    --text-tertiary:  #666666;
    --text-disabled:  #BEBEBE;

    --border-subtle:  rgba(0,0,0,0.06);
    --border-default: rgba(0,0,0,0.12);
    --border-strong:  rgba(0,0,0,0.2);

    --signal-danger:        #E53935;
    --signal-danger-hover:  #C62828;
    --signal-success:       #25D366;
    --signal-success-hover: #1DA851;

    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-xl:  28px;
    --radius-pill: 999px;

    --space-1:   4px;  --space-2:  8px;  --space-3: 12px;
    --space-4:  16px;  --space-5: 20px;  --space-6: 24px;
    --space-8:  32px;  --space-10: 40px; --space-12: 48px;
    --space-16: 64px;  --space-20: 80px;

    --header-h-mobile:  60px;
    --header-h-desktop: 72px;
    --header-h-pro:     64px;
    --section-x: clamp(20px, 6vw, 12vw);
    --section-y: clamp(90px, 12vw, 200px);

    --font-ui:   'Montserrat', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --type-hero:    clamp(3.25rem, 5vw + 1rem, 8.5rem);
    --type-display: clamp(2.25rem, 3.5vw + 1rem, 6rem);
    --type-title:   clamp(1.4rem, 0.6vw + 1.2rem, 1.75rem);
    --type-body:    clamp(1rem, 0.15vw + 0.95rem, 1.15rem);
    --type-small:   clamp(0.85rem, 0.1vw + 0.82rem, 0.95rem);
    --type-label:   0.78rem;
    --type-micro:   0.65rem;
    --type-crew:    clamp(5rem, 24vw, 24vw);

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.1em;

    --leading-tight:   1.0;
    --leading-snug:    1.2;
    --leading-normal:  1.5;
    --leading-relaxed: 1.7;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.08), 0 24px 60px rgba(0,0,0,0.16);
    --shadow-canvas: 0 25px 50px -12px rgba(0,0,0,0.8);

    --shadow-sm-dark: 0 1px 2px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.4);
    --shadow-md-dark: 0 2px 4px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
    --shadow-lg-dark: 0 4px 8px rgba(0,0,0,0.5), 0 24px 60px rgba(0,0,0,0.7);

    --motion-fast: 150ms;
    --motion-base: 250ms;
    --motion-slow: 400ms;
    --motion-deliberate: 1000ms;
    --motion-stat: 1000ms;

    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --focus-ring:       0 0 0 3px rgba(253,185,19,0.25);
    --focus-ring-tight: 0 0 0 2px rgba(253,185,19,0.30);

    /* Backward-compat aliases */
    --color-bg:           var(--surface-0);
    --color-text:         var(--text-primary);
    --color-accent:       var(--brand-accent);
    --color-accent-dark:  var(--brand-accent-hover);
    --color-accent-fade:      var(--brand-accent-fade);
    --color-accent-dark-fade: var(--brand-accent-fade-dark);
    --color-text-fade:    var(--text-disabled);
    --color-white:        var(--surface-1);
    --color-angry:        var(--signal-danger);
    --color-whatsapp:     var(--signal-success);
    --color-whatsapp-dk:  var(--signal-success-hover);
    --color-muted:        var(--text-tertiary);
    --color-surface:      var(--surface-1);
    --header-height:      var(--header-h-mobile);
    --section-padding:    var(--section-x);
    --section-vertical-spacing: var(--section-y);
    --animation-ease:     var(--ease-out);
    --shadow-card:        var(--shadow-sm);
    --shadow-card-hover:  var(--shadow-md);
    --shadow-nav:         var(--shadow-sm);
    --transition:         all var(--motion-base) var(--ease-out);
}

@media (min-width: 768px) {
    :root { --header-height: var(--header-h-desktop); }
}

/* 2. RESET & BASE */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none !important;
}

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

body {
    font-family: var(--font-ui);
    background-color: var(--surface-0);
    color: var(--text-primary);
    overflow-x: hidden;
    height: 100vh;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior-y: contain;
}

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

p, .about-text, .crew-about, .solution-desc, .rate-card-features, .doc-desc {
    -webkit-user-select: text;
    user-select: text;
}

/* 3. TYPOGRAPHY */
.logo, .text-btn {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.logo {
    font-size: var(--type-title);
    font-weight: 800;
    color: var(--text-primary);
    -webkit-user-select: none;
    user-select: none;
}

.text-btn {
    font-size: var(--type-body);
}

.hero-title, .section-title, .mobile-nav a {
    text-transform: uppercase;
    font-weight: 300;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.hero-title {
    font-size: var(--type-hero);
    margin-bottom: 1.85rem;
}

.section-title {
    font-size: var(--type-display);
    color: var(--text-primary);
    font-weight: 800;
    line-height: var(--leading-snug);
    margin-bottom: 1.5rem;
}

.mobile-nav a {
    font-size: var(--type-display);
    color: var(--text-primary);
}

.crew-list-preview p, .contact-info, .about-text, .portfolio-intro-text {
    font-weight: 400;
    font-size: var(--type-body);
    line-height: var(--leading-relaxed);
}

/* ── Scroll text highlight (about section, desktop only) ───────── */
.hl-line {
    display: inline;
    transition: color var(--motion-slow) var(--ease-out);
}

@media (min-width: 768px) {
    .js-enabled .hl-line                    { color: var(--text-disabled); }
    .js-enabled .hl-line.lit               { color: var(--text-primary); }
    .js-enabled .hl-line strong            { color: inherit; }
    .js-enabled .hl-line.lit strong        { color: var(--brand-accent); }
    .js-enabled .hl-line .copy-link        { color: inherit; }
    .js-enabled .hl-line .copy-link:hover  { color: var(--brand-accent); }
    .js-enabled .hl-line .whatsapp-link:hover { color: var(--signal-success); }
}

/* ── Side-entrance for portfolio grid items ────────────────────── */
.grid-reveal {
    transform: translateX(var(--rx, -60px));
    transition: transform var(--motion-slow) var(--ease-out);
}
.grid-reveal.in {
    transform: none;
}

.portfolio-intro-text {
    max-width: 800px;
    margin-bottom: 2rem;
}

.text-accent {
    color: var(--brand-accent);
    font-weight: 800;
}

/* 4. LINKS & BUTTONS */
.mobile-nav a {
    text-decoration: none;
    display: block;
    padding: 0.5rem 0;
    transition: var(--transition);
}

.phone-link, .email-link, .whatsapp-link {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.mobile-nav a:hover, .phone-link:hover, .email-link:hover, .text-btn:hover {
    color: var(--brand-accent);
}

.whatsapp-link:hover {
    color: var(--signal-success);
}

.text-btn {
    font-family: inherit;
    color: var(--brand-accent);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    margin-top: 1.5rem;
    transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

.home-page .text-btn {
    color: var(--text-primary);
}

.text-btn:hover {
    opacity: 0.8;
}

.text-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* 5. LAYOUT & NAVIGATION */
.scroll-container {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--header-height) 0 2rem;
    scroll-padding-top: var(--header-height);
    position: relative;
    z-index: 1;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.section {
    min-height: 100dvh;
    scroll-margin-top: var(--header-height);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--section-y) var(--section-x);
}

.sub-page-section {
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.sub-page-section .section-title {
    margin-bottom: 0.5rem;
}

.content-wrapper {
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

@media (min-width: 1024px) {
    .content-wrapper {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1440px) {
    .content-wrapper {
        max-width: 1280px;
    }
}

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    height: var(--header-height);
    background-color: var(--surface-0);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--section-x);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--motion-base) var(--ease-out);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .app-header {
        padding-left:  max(var(--section-x), calc(50% - 550px));
        padding-right: max(var(--section-x), calc(50% - 550px));
    }
}

@media (min-width: 1440px) {
    .app-header {
        padding-left:  max(var(--section-x), calc(50% - 640px));
        padding-right: max(var(--section-x), calc(50% - 640px));
    }
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
    -webkit-user-select: none;
    user-select: none;
}

.menu-toggle:hover {
    background-color: var(--border-subtle);
    transform: scale(1.05);
}

.menu-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.mobile-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100dvh - var(--header-height));
    background: var(--surface-0);
    transform: translateX(-100%);
    transition: transform var(--motion-slow) var(--ease-out);
    z-index: 90;
    padding: 2rem var(--section-x);
    will-change: transform;
    touch-action: none;
    overscroll-behavior: none;
}

.mobile-nav[aria-hidden="false"] {
    transform: translateX(0);
}

.mobile-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

.mobile-nav li {
    margin-bottom: 1.5rem;
}

/* DesignPro button — desktop only */
.designpro-btn {
    display: none;
}

@media (min-width: 768px) {
    .mobile-nav, .menu-toggle { display: none; }

    .designpro-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-pill);
        border: 1.5px solid var(--brand-accent);
        font-family: inherit;
        font-size: var(--type-micro);
        font-weight: 700;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        text-decoration: none;
        color: var(--text-primary);
        position: relative;
        animation: dp-glow 2.8s ease-in-out infinite;
        transition: background var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
        white-space: nowrap;
    }

    .designpro-btn::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--brand-accent);
        flex-shrink: 0;
        animation: dp-dot 2.8s ease-in-out infinite;
    }

    @keyframes dp-glow {
        0%, 100% { box-shadow: 0 0 0 0 rgba(253,185,19,0); }
        50%       { box-shadow: 0 0 0 4px rgba(253,185,19,0.25); }
    }

    @keyframes dp-dot {
        0%, 100% { opacity: 1;   transform: scale(1); }
        50%       { opacity: 0.4; transform: scale(0.7); }
    }

    .designpro-btn:hover {
        background: var(--brand-accent);
        box-shadow: 0 4px 14px rgba(253,185,19,0.4);
        animation: none;
    }

    .designpro-btn:hover::before {
        animation: none;
        background: var(--text-primary);
    }

    .designpro-btn:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }
}

/* 6. ANIMATIONS & SCROLL STATES */

/* ── Hero line stagger ─────────────────────────────────────────── */
.js-enabled .hero-title .hero-line {
    display: block;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.hero-title .hero-line:nth-child(1) { transition-delay: 0.06s; }
.hero-title .hero-line:nth-child(2) { transition-delay: 0.18s; }
.hero-title .hero-line:nth-child(3) { transition-delay: 0.30s; }
.hero-title .hero-line:nth-child(4) { transition-delay: 0.42s; }
.hero-title .hero-line:nth-child(5) { transition-delay: 0.54s; }
.hero-title .hero-line:nth-child(6) { transition-delay: 0.66s; }

.hero-title.visible .hero-line {
    opacity: 1;
    transform: none;
}

/* ── Scroll reveals ────────────────────────────────────────────── */
.js-enabled .section-title {
    color: var(--brand-accent);
}

.hw {
    display: inline-block;
}

.js-enabled .hw { color: var(--brand-accent-fade); will-change: color; }

.js-enabled .text-btn,
.js-enabled .grid-placeholder,
.js-enabled .crew-list-preview,
.js-enabled .contact-info,
.js-enabled .about-text,
.js-enabled .portfolio-intro-text {
    opacity: 0;
    transform: translateY(36px);
    will-change: transform, opacity;
}

@media (min-width: 768px) {
    .js-enabled .contact-info,
    .js-enabled .about-text {
        opacity: 1;
        transform: none;
        filter: none;
        will-change: color;
    }

    .js-enabled .grid-placeholder,
    .js-enabled .crew-list-preview {
        transform: translateY(52px);
        filter: blur(5px);
        will-change: transform, opacity, filter;
    }
}

.section-title {
    transition: opacity var(--motion-slow) var(--ease-out),
                color var(--motion-slow) var(--ease-out);
}

.grid-placeholder, .crew-list-preview, .contact-info,
.about-text, .portfolio-intro-text {
    transition: opacity var(--motion-slow) var(--ease-out),
                transform var(--motion-slow) var(--ease-out),
                filter var(--motion-slow) var(--ease-out),
                color var(--motion-slow) var(--ease-out);
}

.text-btn {
    transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.section-title.visible, .text-btn.visible,
.grid-placeholder.visible, .crew-list-preview.visible, .contact-info.visible,
.about-text.visible, .portfolio-intro-text.visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

.section-title.visible {
    color: var(--brand-accent);
}

.section-title.visible       { transition-delay: 0.1s; }
.grid-placeholder.visible,
.crew-list-preview.visible,
.contact-info.visible,
.about-text.visible,
.portfolio-intro-text.visible { transition-delay: 0.25s; }

/* 7. GRIDS — PORTFOLIO PREVIEW (homepage) */
.grid-placeholder {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: 0.15rem;
}

@media (min-width: 768px) {
    .grid-placeholder { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}

@media (min-width: 1920px) {
    .grid-placeholder { grid-template-columns: repeat(6, 1fr); gap: var(--space-8); }
}

@media (max-width: 1919px) {
    .grid-placeholder .grid-item:nth-child(n+5) { display: none; }
}

.grid-item {
    background: rgba(0,0,0,0.05);
    border: 2px dashed rgba(0,0,0,0.1);
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    transition: transform var(--motion-fast) var(--ease-out);
    will-change: transform;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

img.grid-item { border: none; background: none; }
.grid-item:hover { transform: scale(1.02); }

/* Portfolio full-page grid */
.portfolio-grid-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
}

@media (min-width: 640px) {
    .portfolio-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

@media (min-width: 1024px) {
    .portfolio-grid-3 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

@media (min-width: 1200px) {
    .portfolio-grid-3 { grid-template-columns: repeat(5, 1fr); gap: 20px; }
}

@media (min-width: 1920px) {
    .portfolio-grid-3 { grid-template-columns: repeat(6, 1fr); gap: 24px; }
}

.portfolio-item-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* 8. CREW CARDS */
.crew-list-preview {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 0.15rem;
}

.contact-info {
    margin-bottom: 2.5rem;
}

.crew-card {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--motion-slow) var(--ease-out),
                transform var(--motion-slow) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
    will-change: transform, opacity;
}

.crew-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.crew-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.crew-card-inner {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.crew-photo-wrap {
    flex-shrink: 0;
}

.crew-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(0,0,0,0.08);
    display: block;
}

.crew-photo-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.crew-card-body {
    flex: 1;
    min-width: 0;
}

.crew-card h3, .crew-name {
    font-size: var(--type-title);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    font-weight: 700;
}

.crew-about {
    font-size: var(--type-small);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    margin-bottom: 10px;
}

.crew-skills {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.skill-badge {
    background: var(--brand-accent);
    color: var(--text-primary);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--type-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* 9. SOLUTIONS */
.solutions-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 2.75rem;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.solutions-filters.visible {
    opacity: 1;
    transform: translateY(0);
}

.filter-btn {
    background: transparent;
    border: 1.5px solid var(--border-strong);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: var(--type-small);
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    -webkit-user-select: none;
    user-select: none;
}

.filter-btn:hover, .filter-btn.active {
    background: var(--text-primary);
    color: var(--surface-0);
}

.filter-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.solutions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

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

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

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

@media (min-width: 1920px) {
    .solutions-grid { grid-template-columns: repeat(5, 1fr); }
}

.solution-card {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--motion-slow) var(--ease-out),
                transform var(--motion-slow) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
    will-change: transform, opacity, box-shadow;
}

.solution-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.solution-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.solution-img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    background: rgba(0,0,0,0.05);
}

.solution-content {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.label-tag {
    font-size: var(--type-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-tertiary);
}

.solution-category {
    font-size: var(--type-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-tertiary);
    margin-bottom: 4px;
    font-weight: 700;
}

.solution-title {
    font-size: var(--type-title);
    font-weight: 700;
    margin-bottom: var(--space-2);
    line-height: var(--leading-snug);
}

.solution-price {
    font-weight: 800;
    color: var(--brand-accent);
    margin-bottom: var(--space-3);
    font-size: var(--type-small);
}

.solution-desc {
    font-size: var(--type-small);
    line-height: var(--leading-normal);
    color: var(--text-tertiary);
    margin-bottom: var(--space-5);
    flex-grow: 1;
}

.card-wa-btn {
    display: block;
    text-align: center;
    background-color: var(--signal-success);
    color: #FFFFFF;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 800;
    font-size: var(--type-small);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    transition: background-color var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
    -webkit-user-select: none;
    user-select: none;
}

.card-wa-btn:hover {
    background-color: var(--signal-success-hover);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.card-wa-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Desktop / mobile CTA visibility */
.card-cta-mobile  { display: block; }
.card-cta-desktop { display: none;  }

@media (min-width: 768px) {
    .card-cta-mobile  { display: none;  }
    .card-cta-desktop { display: block; }
}

.card-enquire-btn {
    width: 100%;
    text-align: center;
    background-color: var(--brand-accent);
    color: var(--text-primary);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-weight: 800;
    font-size: var(--type-small);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
    -webkit-user-select: none;
    user-select: none;
}

.card-enquire-btn:hover {
    background-color: var(--brand-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.card-enquire-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── CONTACT POPUP ─────────────────────────────────────────────── */
.sol-contact-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-out);
}

.sol-contact-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.sol-contact-card {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-8) var(--space-8);
    width: 90%;
    max-width: 380px;
    text-align: center;
    position: relative;
    animation: slideUp var(--motion-base) var(--ease-out);
}

.sol-contact-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 900;
    color: var(--text-tertiary);
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
    border-radius: var(--radius-xs);
    transition: color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}

.sol-contact-close:hover {
    color: var(--text-primary);
    background: var(--border-subtle);
}

.sol-contact-close:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-tight);
}

.sol-contact-eyebrow {
    font-size: var(--type-micro);
    font-weight: 800;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.sol-contact-title {
    font-size: var(--type-title);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    line-height: var(--leading-snug);
}

.sol-contact-sub {
    font-size: var(--type-small);
    color: var(--text-tertiary);
    margin-bottom: var(--space-6);
}

.sol-contact-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sol-contact-opt {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-weight: 800;
    font-size: var(--type-small);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: transform var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out),
                background var(--motion-fast) var(--ease-out);
    -webkit-user-select: none;
    user-select: none;
}

.sol-contact-opt:hover {
    transform: translateY(-1px);
}

.sol-contact-opt:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.sol-contact-opt-icon {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.sol-contact-opt-label {
    flex: 1;
    text-align: left;
}

.sol-contact-opt--wa {
    background-color: var(--signal-success);
    color: #FFFFFF;
}
.sol-contact-opt--wa:hover {
    background-color: var(--signal-success-hover);
    box-shadow: var(--shadow-md);
    color: #FFFFFF;
}

.sol-contact-opt--email {
    background-color: var(--brand-accent);
    color: var(--text-primary);
}
.sol-contact-opt--email:hover {
    background-color: var(--brand-accent-hover);
    box-shadow: var(--shadow-md);
}

.sol-contact-opt--call {
    background: transparent;
    color: var(--text-primary);
    border: 1.5px solid var(--border-default);
}
.sol-contact-opt--call:hover {
    background: var(--border-subtle);
    border-color: var(--border-strong);
}

.sol-contact-opt--rates {
    background: var(--text-primary);
    color: var(--surface-1);
    border: 1.5px solid transparent;
}
.sol-contact-opt--rates:hover {
    opacity: 0.85;
    box-shadow: var(--shadow-md);
    color: var(--surface-1);
}

/* 10. RATE CARDS */
.rate-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 2rem;
}

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

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

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

.rate-card {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    border: 2px solid transparent;
    transition: transform var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out);
    opacity: 0;
    transform: translateY(16px);
}

.rate-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.rate-card.highlighted {
    border-color: var(--brand-accent);
}

.rate-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.rate-card-category {
    font-size: var(--type-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-tertiary);
}

.rate-card-name {
    font-size: var(--type-title);
    font-weight: 800;
    text-transform: uppercase;
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

.rate-card-price {
    font-size: var(--type-display);
    font-weight: 800;
    color: var(--brand-accent);
    line-height: var(--leading-tight);
}

.rate-card-price-note {
    font-size: var(--type-label);
    color: var(--text-tertiary);
    font-weight: 600;
    margin-top: -6px;
}

.rate-card-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 2px 0;
}

.rate-card-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

.rate-card-features li {
    font-size: var(--type-small);
    color: var(--text-primary);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    line-height: var(--leading-normal);
}

.rate-card-features li::before {
    content: "✓";
    color: var(--brand-accent);
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
}

.rate-card-hidden {
    display: none !important;
}

.rate-card-badge {
    display: inline-block;
    background: var(--brand-accent);
    color: var(--text-primary);
    font-size: var(--type-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    margin-bottom: 4px;
}

/* 11. LOADING ANIMATION */
@keyframes pulseText {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.02); }
}

/* 12. BACKGROUND GRAIN */
#bg-grain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    background-repeat: repeat;
}

/* 13. COPYRIGHT */
.site-copyright {
    text-align: center;
    font-size: var(--type-label);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-tertiary);
    padding: 2rem 1rem 3rem;
    opacity: 0.5;
}

/* 14. COPY TO CLIPBOARD */
.copy-link {
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    display: inline-block;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}

.copy-link:hover {
    color: var(--brand-accent);
}

.whatsapp-link:hover,
.whatsapp-link:active {
    color: var(--signal-success);
}

.copy-link::after {
    content: "COPIED!";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 12px;
    background-color: var(--brand-accent);
    color: var(--text-primary);
    font-size: var(--type-micro);
    font-weight: 800;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
    white-space: nowrap;
}

.copy-link.copied::after {
    opacity: 1;
    transform: translateY(-50%) translateX(5px);
}

.whatsapp-link::after {
    background-color: var(--signal-success);
    color: #fff;
}

/* 15. LOADING SKELETONS & ERROR STATES */
@keyframes shimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position:  1000px 0; }
}

.skeleton-load {
    background: #e0e0e0;
    background-image: linear-gradient(90deg, #e0e0e0 0px, #f0f0f0 40px, #e0e0e0 80px);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    color: transparent !important;
}

.loading-text {
    text-align: center;
    font-weight: 700;
    color: var(--brand-accent);
    padding: 2rem;
    width: 100%;
    animation: pulseText 1.5s infinite ease-in-out;
}

.error-state {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 0, 0, 0.04);
    border: 1px dashed rgba(255, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    width: 100%;
    grid-column: 1 / -1;
}

.error-state p {
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.retry-btn {
    background: var(--brand-accent);
    color: var(--text-primary);
    border: none;
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition);
}

.retry-btn:hover {
    background: var(--text-primary);
    color: var(--surface-1);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.retry-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* 16. VAULT OVERLAY & LOCKED ITEMS */
.vault-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-slow) var(--ease-out);
}

.vault-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.vault-card {
    background: var(--surface-1);
    padding: var(--space-10) var(--space-8);
    border-radius: var(--radius-xl);
    text-align: center;
    max-width: 420px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    animation: slideUp var(--motion-slow) var(--ease-out);
}

@keyframes slideUp {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.vault-header h2 {
    font-size: var(--type-title);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-2);
}

.vault-step-desc {
    font-size: var(--type-small);
    color: var(--text-tertiary);
    margin-bottom: var(--space-6);
}

#access-token {
    width: 100%;
    padding: var(--space-4);
    margin: var(--space-5) 0 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-family: inherit;
    text-align: center;
    font-size: 1.1rem;
    letter-spacing: var(--tracking-wider);
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
    -webkit-user-select: text;
    user-select: text;
}

#access-token:focus {
    border-color: var(--brand-accent);
    box-shadow: var(--focus-ring-tight);
    outline: none;
}

#access-token.error {
    border-color: var(--signal-danger);
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60%  { transform: translateX(-6px); }
    40%, 80%  { transform: translateX(6px); }
}

.unlock-button {
    width: 100%;
    background: var(--brand-accent);
    color: var(--text-primary);
    border: none;
    padding: var(--space-4);
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    border-radius: var(--radius-md);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    transition: transform var(--motion-fast) var(--ease-out),
                background var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}

.unlock-button:hover {
    background: var(--brand-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.unlock-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.usage-disclaimer {
    margin-top: 22px;
    font-size: var(--type-micro);
    color: var(--text-tertiary);
    line-height: var(--leading-normal);
    border-top: 1px solid var(--border-subtle);
    padding-top: 14px;
}

.protected-item {
    position: relative;
    cursor: pointer;
}

.protected-item img,
.protected-item video {
    filter: blur(12px) grayscale(100%);
    pointer-events: none;
}

.protected-item::after {
    content: "REQUEST ACCESS";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.82);
    color: var(--brand-accent);
    padding: var(--space-2) var(--space-4);
    font-size: var(--type-micro);
    font-weight: 800;
    border-radius: var(--radius-xs);
    letter-spacing: var(--tracking-wide);
    pointer-events: none;
    white-space: nowrap;
}

.exit-vault {
    background: none;
    border: none;
    margin-top: 14px;
    font-size: var(--type-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    color: var(--text-disabled);
    transition: color var(--motion-fast) var(--ease-out);
    padding: 10px;
    font-family: inherit;
}

.exit-vault:hover {
    color: var(--text-primary);
}

.exit-vault:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* 17. VAULT GATE — NEW EMAIL REQUEST UI */

.vault-input {
    width: 100%;
    padding: var(--space-4);
    margin: var(--space-3) 0 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-family: inherit;
    text-align: center;
    font-size: 1rem;
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
    -webkit-user-select: text;
    user-select: text;
}

.vault-input:focus {
    border-color: var(--brand-accent);
    box-shadow: var(--focus-ring-tight);
    outline: none;
}

.vault-input.error {
    border-color: var(--signal-danger);
    animation: shake 0.4s ease;
}

.vault-newsletter-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--type-small);
    color: var(--text-tertiary);
    text-align: left;
    cursor: pointer;
    margin: var(--space-3) 0 0;
    line-height: 1.4;
}

.vault-newsletter-label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--brand-accent);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.vault-btns {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.vault-ghost-btn {
    background: none;
    border: 1px solid var(--border-default);
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-weight: 700;
    font-size: var(--type-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    width: 100%;
    transition: border-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out);
}

.vault-ghost-btn:hover:not(:disabled) {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.vault-ghost-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.vault-ghost-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.vault-msg {
    font-size: var(--type-small);
    color: var(--signal-danger);
    margin-top: var(--space-3);
    min-height: 1.2em;
    line-height: 1.4;
}

.vault-thanks-msg {
    font-size: var(--type-body);
    color: var(--text-secondary);
    margin: var(--space-5) 0 var(--space-6);
    line-height: var(--leading-normal);
}

/* 18. DOCUMENT CARDS (PDF downloads) */
.document-card {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    animation: fadeIn var(--motion-slow) var(--ease-out);
}

.doc-title {
    font-size: var(--type-title);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-primary);
}

.doc-desc {
    font-size: var(--type-small);
    color: var(--text-tertiary);
}

.doc-actions {
    display: flex;
    gap: 10px;
    margin-top: var(--space-2);
}

.btn-view, .btn-download {
    flex: 1;
    text-align: center;
    padding: 13px 10px;
    border-radius: var(--radius-md);
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--type-small);
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    border: none;
}

.btn-view {
    background: #111;
    color: var(--surface-1);
}

.btn-download {
    background: transparent;
    border: 2px solid #111;
    color: #111;
}

.btn-view:focus-visible,
.btn-download:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn-request-access {
    flex: 1;
    text-align: center;
    padding: 13px 18px;
    border-radius: var(--radius-md);
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--type-small);
    letter-spacing: 0.03em;
    cursor: pointer;
    font-family: inherit;
    background: var(--brand-accent);
    color: var(--text-primary);
    border: none;
    transition: var(--transition);
    white-space: nowrap;
}
.btn-request-access:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn-request-access:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (max-width: 480px) {
    .doc-actions { flex-direction: column; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 19. HOVER-ONLY EFFECTS (desktop pointer) */
@media (hover: hover) and (pointer: fine) {
    .btn-view:hover {
        background: var(--brand-accent);
        color: var(--text-primary);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .btn-download:hover {
        background: #111;
        color: var(--surface-1);
    }
}

/* 20. UTILITY CLASSES */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }

.text-muted { color: var(--text-tertiary); }

/* ================================================================
   HOMEPAGE — SCROLL MODEL & LOADER
================================================================ */

.home-page {
    height: auto;
    min-height: 100dvh;
    overflow-y: visible;
    overscroll-behavior-y: auto;
}

.home-page .scroll-container {
    height: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: auto;
    scrollbar-width: unset;
    padding-top: 0;
}

html::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }

/* ── LOADING SCREEN ─────────────────────────────────────────────── */
#dmg-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--surface-0);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    transition: opacity var(--motion-slow) var(--ease-out), visibility var(--motion-slow) var(--ease-out);
}

#dmg-loader.loader-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

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

.loader-brand {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 2.8rem;
    letter-spacing: 0.15em;
    color: var(--text-primary);
    text-transform: uppercase;
    animation: pulseText 1.4s ease-in-out infinite;
}

.loader-dots {
    display: flex;
    gap: 10px;
    align-items: center;
}

.loader-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand-accent);
    animation: dot-bounce 1.2s ease-in-out infinite;
}

.loader-dots span:nth-child(2) { animation-delay: 0.18s; }
.loader-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes dot-bounce {
    0%, 80%, 100% { transform: scale(0.55); opacity: 0.35; }
    40%            { transform: scale(1.1);  opacity: 1;    }
}

/* ================================================================
   HOMEPAGE — HERO, SPLIT SECTIONS
================================================================ */

/* ── HERO PHRASES ────────────────────────────────────────────────── */
.gsap-hero {
    position: relative;
    min-height: 100dvh;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-phrase-wrap {
    position: relative;
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-phrase {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
}

.hero-phrase-text {
    font-family: var(--font-ui);
    font-weight: 300;
    font-size: clamp(3.5rem, 14vw, 16vw);
    text-transform: uppercase;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-align: center;
    color: var(--text-primary);
    user-select: none;
    white-space: nowrap;
}

.hero-word {
    display: inline-block;
}

.hero-letter {
    display: inline-block;
    will-change: opacity;
}

/* ── BOTTOM SCROLL PROGRESS BAR ─────────────────────────────────── */
.home-page .scroll-bar-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(13, 13, 13, 0.12);
    z-index: 50;
    pointer-events: none;
    overflow: visible;
}

.scroll-bar-fill {
    height: 100%;
    width: 100%;
    background: var(--brand-accent);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* ── WALKING GIRL THUMB ──────────────────────────────────────────── */
.scroll-bar-thumb {
    position: absolute;
    bottom: 4px;
    left: 0;
    transform: translateX(-50%);
    will-change: left;
    pointer-events: none;
}

.girl-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.girl-head {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand-accent);
    position: relative;
    flex-shrink: 0;
}
.girl-head::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 0;
    width: 5px;
    height: 7px;
    background: var(--brand-accent);
    border-radius: 60% 40% 50% 50% / 40% 60% 60% 40%;
    transform: rotate(12deg);
}

.girl-torso {
    width: 7px;
    height: 7px;
    background: var(--brand-accent);
    border-radius: 1px;
    margin-top: 1px;
    position: relative;
    flex-shrink: 0;
}

.girl-arm {
    position: absolute;
    width: 2px;
    height: 7px;
    background: var(--brand-accent);
    border-radius: 1px;
    top: 0;
    transform-origin: top center;
}
.girl-arm--l {
    left: -3px;
    animation: girlArmL 0.44s ease-in-out infinite alternate;
}
.girl-arm--r {
    right: -3px;
    animation: girlArmR 0.44s ease-in-out infinite alternate;
}

.girl-skirt {
    width: 13px;
    height: 6px;
    background: var(--brand-accent);
    clip-path: polygon(0% 0%, 100% 0%, 84% 100%, 16% 100%);
    flex-shrink: 0;
}

.girl-legs {
    display: flex;
    gap: 3px;
    margin-top: 1px;
    flex-shrink: 0;
}
.girl-leg {
    width: 2px;
    height: 9px;
    background: var(--brand-accent);
    border-radius: 1px;
    position: relative;
    transform-origin: top center;
}
.girl-leg--l { animation: girlLegL 0.44s ease-in-out infinite alternate; }
.girl-leg--r { animation: girlLegR 0.44s ease-in-out infinite alternate; }

.girl-shoe {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 2px;
    background: var(--brand-accent);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

@keyframes girlLegL {
    from { transform: rotate(-26deg); }
    to   { transform: rotate(26deg); }
}
@keyframes girlLegR {
    from { transform: rotate(26deg); }
    to   { transform: rotate(-26deg); }
}
@keyframes girlArmL {
    from { transform: rotate(20deg); }
    to   { transform: rotate(-20deg); }
}
@keyframes girlArmR {
    from { transform: rotate(-20deg); }
    to   { transform: rotate(20deg); }
}

.scroll-bar-thumb.girl-stopped .girl-inner {
    animation: girlJump 0.55s linear infinite;
}
.scroll-bar-thumb.girl-stopped .girl-leg--l {
    animation: girlJumpLegL 0.55s linear infinite;
}
.scroll-bar-thumb.girl-stopped .girl-leg--r {
    animation: girlJumpLegR 0.55s linear infinite;
}
.scroll-bar-thumb.girl-stopped .girl-arm--l {
    animation: girlJumpArmL 0.55s linear infinite;
}
.scroll-bar-thumb.girl-stopped .girl-arm--r {
    animation: girlJumpArmR 0.55s linear infinite;
}

@keyframes girlJump {
    0%   { transform: translateY(0); }
    10%  { transform: translateY(-2px); }
    28%  { transform: translateY(-13px); }
    52%  { transform: translateY(-13px); }
    68%  { transform: translateY(0); }
    78%  { transform: translateY(-4px); }
    88%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}
@keyframes girlJumpLegL {
    0%, 68%, 100% { transform: rotate(0deg); }
    28%, 52%      { transform: rotate(-22deg); }
}
@keyframes girlJumpLegR {
    0%, 68%, 100% { transform: rotate(0deg); }
    28%, 52%      { transform: rotate(22deg); }
}
@keyframes girlJumpArmL {
    0%, 68%, 100% { transform: rotate(0deg); }
    28%, 52%      { transform: rotate(-50deg); }
}
@keyframes girlJumpArmR {
    0%, 68%, 100% { transform: rotate(0deg); }
    28%, 52%      { transform: rotate(50deg); }
}

/* ── GIRL ANGRY (idle auto-scroll triggered) ─────────────────── */
.scroll-bar-thumb.girl-angry .girl-head,
.scroll-bar-thumb.girl-angry .girl-head::after,
.scroll-bar-thumb.girl-angry .girl-torso,
.scroll-bar-thumb.girl-angry .girl-arm,
.scroll-bar-thumb.girl-angry .girl-skirt,
.scroll-bar-thumb.girl-angry .girl-leg,
.scroll-bar-thumb.girl-angry .girl-shoe {
    background: var(--signal-danger);
}

.scroll-bar-thumb.girl-angry .girl-inner {
    animation: girlAngryShake 0.11s ease-in-out infinite !important;
}
.scroll-bar-thumb.girl-angry .girl-arm--l {
    animation: girlAngryArmL 0.18s ease-in-out infinite alternate !important;
}
.scroll-bar-thumb.girl-angry .girl-arm--r {
    animation: girlAngryArmR 0.18s ease-in-out infinite alternate !important;
}
.scroll-bar-thumb.girl-angry .girl-leg--l {
    animation: girlAngryLegL 0.18s ease-in-out infinite alternate !important;
}
.scroll-bar-thumb.girl-angry .girl-leg--r {
    animation: girlAngryLegR 0.18s ease-in-out infinite alternate !important;
}

@keyframes girlAngryShake {
    0%, 100% { transform: scale(1.5) translateX(-2px); }
    50%       { transform: scale(1.5) translateX(2px);  }
}
@keyframes girlAngryArmL {
    from { transform: rotate(-75deg); }
    to   { transform: rotate(-95deg); }
}
@keyframes girlAngryArmR {
    from { transform: rotate(75deg);  }
    to   { transform: rotate(95deg);  }
}
@keyframes girlAngryLegL {
    from { transform: rotate(-32deg); }
    to   { transform: rotate(8deg);   }
}
@keyframes girlAngryLegR {
    from { transform: rotate(8deg);   }
    to   { transform: rotate(-32deg); }
}

.scroll-section-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-accent);
    opacity: 0.3;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}
.scroll-section-dot.girl-nearby {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
}

@media (prefers-reduced-motion: reduce) {
    .girl-arm, .girl-leg {
        animation: none !important;
    }
}

/* ── SCROLL DOWN ARROW ───────────────────────────────────────────── */
.home-page .scroll-arrow {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    color: var(--text-primary);
    pointer-events: none;
    will-change: transform, opacity;
    animation: arrowBounce 1.8s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateX(-50%) translateY(0);    }
    50%       { transform: translateX(-50%) translateY(7px);  }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .scroll-arrow { animation: none; }
}

/* ── SCROLL PROGRESS INDICATOR ──────────────────────────────────── */
.home-page .scroll-indicator {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: none;
}

.scroll-track {
    width: 1.5px;
    height: 55vh;
    background: rgba(13, 13, 13, 0.10);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.scroll-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--brand-accent);
    border-radius: 2px;
    transform: scaleY(0);
    transform-origin: top center;
    will-change: transform;
}

/* ── SPLIT SECTIONS (50/50) ──────────────────────────────────────── */
.split-section {
    min-height: 100dvh;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.split-left,
.split-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50dvh;
    overflow: hidden;
    position: relative;
}

.split-content {
    padding: var(--section-x);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
}

.split-content--right {
    align-items: flex-start;
    text-align: left;
}

.split-title {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: var(--type-display);
    text-transform: uppercase;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

@media (min-width: 768px) {
    .split-section {
        flex-direction: row;
    }
    .split-left,
    .split-right {
        flex: 0 0 50%;
        width: 50%;
        min-height: 100dvh;
    }

    #portfolio-split-left  { flex: 0 0 60%; width: 60%; }
    #portfolio-split-right { flex: 0 0 40%; width: 40%; }

    #solutions-split-left  { flex: 0 0 40%; width: 40%; }
    #solutions-split-right { flex: 0 0 60%; width: 60%; }
}


/* ── BLINK GRID (portfolio right side) ───────────────────────────── */
.blink-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    height: 100%;
    min-height: 50dvh;
    padding: 6px;
}

@media (min-width: 768px) {
    .blink-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 8px;
        padding: 8px;
        min-height: 100dvh;
    }
}

.blink-cell {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.05);
    aspect-ratio: 4/5;
}

.blink-cell-inner {
    position: absolute;
    inset: 0;
    transition: opacity var(--motion-slow) var(--ease-out);
}

.blink-cell-inner img,
.blink-cell-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── SOLUTIONS CATEGORY STACK (left side) ────────────────────────── */
.solutions-category-stack {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    height: 100%;
    min-height: 50dvh;
    padding: 6px;
}

@media (min-width: 768px) {
    .solutions-category-stack {
        gap: 8px;
        padding: 8px;
        min-height: 100dvh;
    }
}

.cat-img-placeholder {
    border-radius: var(--radius-md);
    aspect-ratio: 4/5;
}

.cat-img-tile {
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4/5;
}

@media (min-width: 768px) {
    .cat-img-tile,
    .cat-img-placeholder { aspect-ratio: unset; }
}

.cat-img-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── GSAP-MANAGED INITIAL HIDDEN STATES ──────────────────────────── */
.js-enabled .split-title {
    color: var(--brand-accent);
}

.js-enabled #portfolio-explore-btn,
.js-enabled #solutions-browse-btn {
    opacity: 0;
}

#portfolio-explore-btn,
#solutions-browse-btn { margin-top: 0; }

/* ── REDUCED MOTION — Split Sections ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .blink-cell-inner { transition: none; }
    .js-enabled .split-title,
    .js-enabled #portfolio-split-right,
    .js-enabled #portfolio-explore-btn,
    .js-enabled #solutions-browse-btn { opacity: 1; }
}

/* ================================================================
   HOMEPAGE — CREW SECTION
================================================================ */

.crew-split-section {
    min-height: 100dvh;
    padding-top: 25dvh;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.crew-top {
    flex: 0 0 75%;
    height: 75dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.crew-headline {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: var(--type-crew);
    text-transform: uppercase;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-align: center;
    color: var(--text-primary);
    user-select: none;
    will-change: color;
}

.crew-bottom {
    flex: 0 0 25%;
    height: 25dvh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--section-x);
    gap: 2rem;
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    overflow: hidden;
}

.crew-names-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding-left: 2rem;
}

.crew-name-tag {
    font-family: var(--font-ui);
    font-size: var(--type-label);
    font-weight: 400;
    line-height: var(--leading-relaxed);
    color: var(--text-disabled);
    white-space: nowrap;
    transition: color var(--motion-slow) var(--ease-out);
}

.crew-name-tag.visible {
    color: var(--text-primary);
}

#crew-meet-btn {
    flex-shrink: 0;
    margin-top: 0;
}

/* ── CREW GSAP INITIAL HIDDEN STATE ─────────────────────────────── */
.js-enabled .crew-headline {
    color: var(--brand-accent);
}

.js-enabled #crew-meet-btn {
    opacity: 0;
}

/* ── REDUCED MOTION — Crew ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .crew-name-tag { transition: none; opacity: 1; transform: none; }
    .js-enabled .crew-headline { color: var(--brand-accent); }
    .js-enabled #crew-meet-btn { opacity: 1; }
}

/* ================================================================
   TABLET  (768px – 1023px)
================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {

    #portfolio-split-left,
    #portfolio-split-right,
    #solutions-split-left,
    #solutions-split-right  { flex: 0 0 50%; width: 50%; }

    .crew-headline          { font-size: clamp(4rem, 14vw, 18vw); }

    .crew-names-row         { padding-left: 0; }
}

/* ================================================================
   MOBILE — LAYOUT OVERRIDES  (≤ 767px)
================================================================ */
@media (max-width: 767px) {

    html                { overflow-x: hidden; width: 100%; overscroll-behavior-x: none; }
    body                { overflow-x: hidden; width: 100%; overscroll-behavior-x: none; }
    .scroll-container   { overflow-x: hidden; width: 100%; }
    .section,
    .split-section,
    .split-left, .split-right,
    .gsap-hero, .hero-phrase-wrap,
    .crew-split-section         { overflow-x: hidden !important; max-width: 100%; }
    #section-contact            { max-width: 100%; }
    .hero-phrase-text   { white-space: normal; text-align: left; line-height: 0.88; }

    .js-enabled .split-title,
    .js-enabled .crew-headline,
    .js-enabled .section-title  { color: var(--brand-accent) !important; }
    .js-enabled .text-btn,
    .js-enabled #crew-meet-btn,
    .js-enabled #portfolio-explore-btn,
    .js-enabled #solutions-browse-btn { opacity: 1 !important; transform: none !important; }
    .js-enabled .contact-info,
    .js-enabled .about-text     { opacity: 1 !important; transform: none !important; filter: none !important; }

    .gsap-hero        { min-height: 100dvh; padding: 0; display: flex; align-items: center; justify-content: flex-start; }
    .hero-phrase-wrap { position: relative; width: 100%; height: 100dvh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.3rem; padding: calc(var(--header-height) + 1.5rem) var(--section-x) 5rem; overflow: hidden; }
    .hero-phrase      { position: relative; inset: auto; width: 100%; will-change: auto; align-items: flex-start; justify-content: flex-start; }

    .home-page .scroll-bar-bottom { display: none; }
    .home-page .scroll-arrow      { display: none; }
    .home-page .scroll-indicator  { display: none; }

    .skeleton-load {
        animation:        none;
        background:       rgba(0, 0, 0, 0.06);
        background-image: none;
    }

    .split-section  { flex-direction: column !important; min-height: auto !important; }
    #solutions-split-right { order: -1; }

    #section-services,
    #section-crew,
    #section-contact { border-top: 1px solid rgba(0, 0, 0, 0.1); }
    .split-left,
    .split-right    { min-height: auto !important; flex: none !important; width: 100% !important; overflow: hidden; }
    .split-content  { height: auto !important; padding: 2rem var(--section-x) 0.75rem !important; gap: 0.4rem !important; }

    .blink-grid,
    .solutions-category-stack {
        height: auto !important; min-height: auto !important;
        padding: 0 var(--section-x) 2rem !important; gap: 3px !important;
    }
    .blink-grid                { grid-template-rows: repeat(2, 1fr) !important; }
    .solutions-category-stack  { grid-template-rows: repeat(2, 1fr) !important; }
    .blink-grid .blink-cell:nth-child(n+5)                   { display: none; }
    .solutions-category-stack .cat-img-placeholder:nth-child(n+5),
    .solutions-category-stack .cat-img-tile:nth-child(n+5)   { display: none; }

    .crew-headline  { font-size: clamp(2.4rem, 10vw, 4rem) !important; letter-spacing: var(--tracking-tight) !important; line-height: 1 !important; text-align: left !important; }
    .crew-split-section { padding: 0 !important; min-height: auto !important; }
    .crew-top    { flex: none !important; height: auto !important; min-height: auto !important; overflow: visible !important; padding: 2rem var(--section-x) 0 !important; align-items: flex-start !important; justify-content: flex-start !important; }
    .crew-bottom { flex: none !important; height: auto !important; overflow: visible !important; border-top: none !important; flex-wrap: nowrap !important; flex-direction: column !important; align-items: flex-start !important; padding: 0.4rem var(--section-x) 2rem !important; gap: 1rem !important; }

    #crew-meet-btn  { order: -1 !important; margin-top: 0 !important; }

    .crew-names-row { flex: none !important; flex-direction: column !important; align-items: flex-start !important; padding-left: 0 !important; gap: 4px !important; }
    .crew-name-tag  { font-size: 0.85rem !important; color: var(--text-primary) !important; white-space: normal !important; }
    .crew-name-tag:nth-child(n+7) { display: none !important; }

    #section-contact {
        min-height:     auto !important;
        padding-top:    2rem;
        padding-bottom: 2rem;
    }
    #section-contact .section-title {
        font-size:      clamp(2.4rem, 10vw, 4rem);
        letter-spacing: var(--tracking-tight);
        line-height:    1;
        margin-bottom:  1rem;
    }
    .contact-info   { margin-bottom: 2rem; }
    .about-text     { font-size: 0.9rem; line-height: var(--leading-relaxed); }
    .about-extended { display: none; }

    .split-title    { font-size: clamp(2.4rem, 10vw, 4rem) !important; letter-spacing: var(--tracking-tight) !important; line-height: 1 !important; }
    .section-title, .split-title, .crew-headline,
    .split-content, .crew-top, .crew-bottom,
    .site-copyright { text-align: left !important; }
    .site-copyright { padding: 1.5rem var(--section-x) 2.5rem; }
    .text-btn       { padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── HQ ZOOM BUTTON ─────────────────────────────────────────────── */
.portfolio-hq-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0;
    line-height: 1;
}

.portfolio-hq-btn:hover {
    background: rgba(253, 185, 19, 0.9);
    color: #000;
    transform: scale(1.12);
}

.portfolio-hq-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── HQ LIGHTBOX ─────────────────────────────────────────────────── */
.portfolio-hq-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-out);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.portfolio-hq-lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.portfolio-hq-lightbox img {
    max-width: min(90vw, 600px);
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform: scale(0.94);
    transition: transform var(--motion-base) var(--ease-out);
    display: block;
}

.portfolio-hq-lightbox.active img {
    transform: scale(1);
}

.portfolio-hq-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--motion-fast) var(--ease-out);
    line-height: 1;
}

.portfolio-hq-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.portfolio-hq-lightbox-close:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── CONTEXT TRANSITION OVERLAY ──────────────────────────────────── */
#context-transition {
    position: fixed;
    inset: 0;
    background: #080808;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-slow) var(--ease-in-out);
}

#context-transition.active {
    opacity: 1;
    pointer-events: all;
}