/* ============================================================
   NEXIANECT — SHARED MOBILE RESPONSIVE SYSTEM
   /static/css/responsive-mobile.css
   ------------------------------------------------------------
   Target: 100% coverage of real-world mobile resolutions

   Breakpoints
   320px  → 359px   Ultra-small phones
   360px  → 479px   Standard phones
   480px  → 767px   Large phones / intermediate
   768px  → 1023px  Tablets / small landscape
   1024px+          Desktop (page-specific base styles)

   Also accounts for:
   - Short phone heights
   - Landscape phones
   - Safe-area insets (notch / home indicator)
   - Touch devices (no hover transforms)
   - Internal panel scrolling
   - Right-side navigation rings
   ============================================================ */


/* ============================================================
   PRELOADER — no horizontal overflow on 320–360px
   ============================================================ */

#preloader {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
}

#preloader .loader-logo {
    /* Shrink-wrap text so laser left% ends on last letter */
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(2rem, 12vw, 5rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#preloader .logo-text {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
}

#preloader .logo-laser {
    left: calc(var(--reveal, 0) * 1%) !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
}

#preloader .loader-text {
    font-size: clamp(0.8rem, 3.5vw, 1.1rem) !important;
    letter-spacing: 0.08em !important;
    max-width: 100% !important;
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
}

#preloader .progress-container {
    width: min(380px, 100%) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* ============================================================
   PANEL NAV RINGS — clickable + label on hover (all viewports)
   ============================================================ */

#platform-navigation {
    pointer-events: none; /* container ignores; items opt-in */
}

#platform-navigation .nav-item {
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#platform-navigation .nav-item .nav-label {
    pointer-events: none;
}

#platform-navigation .nav-item:hover .nav-label,
#platform-navigation .nav-item:focus-visible .nav-label {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

#platform-navigation .nav-item:hover .nav-track,
#platform-navigation .nav-item:focus-visible .nav-track {
    opacity: 0.55;
}

#platform-navigation .nav-item:hover .nav-dot,
#platform-navigation .nav-item:focus-visible .nav-dot {
    fill: var(--brand-neon, #a0f818);
}

#platform-navigation .nav-item:focus-visible {
    outline: 2px solid rgba(160, 248, 24, 0.65);
    outline-offset: 4px;
    border-radius: 999px;
}


/* ============================================================
   GLOBAL SCROLL POLICY
   Vertical scroll enabled — scrollbars always hidden
   ============================================================ */

html,
body {
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* Legacy Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}


/* ============================================================
   iOS SAFARI + MOBILE MENU HARDENING
   ============================================================ */

/* Prefer dynamic viewport units where supported */
@supports (height: 100dvh) {
    html {
        height: 100%;
    }
}

/* Prevent iOS rubber-band from exposing off-canvas gaps */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    min-height: 100%;
    min-height: -webkit-fill-available;
}

/* Fixed nav — stable on iOS (no 100vw) */
#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    z-index: 500;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Keep nav above iOS Safari URL bar reflow */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

#main-nav .w-full.h-20 {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    box-sizing: border-box;
}

/* Hamburger — solid 44px+ touch target (mobile/tablet only).
   Do NOT set display here globally — it overrides Tailwind lg:hidden on desktop. */
#menuButton {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
@media (max-width: 1023px) {
    #menuButton {
        display: inline-flex;
    }
}
@media (min-width: 1024px) {
    #menuButton {
        display: none !important;
    }
    #mobileMenu {
        display: none !important;
    }
}

/* Drawer panel */
#mobileMenu {
    position: relative;
    z-index: 499;
    width: 100%;
    max-width: 100%;
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0.25s ease;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#mobileMenu.is-open,
#mobileMenu.open {
    /* Allow internal scroll if many links / large text */
    overflow-y: auto;
    max-height: min(70dvh, 420px);
}

#mobileMenu a {
    display: block;
    min-height: 48px;
    padding: 14px max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));
    font-size: 1rem;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#mobileMenu a:active {
    background: rgba(160, 248, 24, 0.08);
    color: #a0f818;
}

/* Body scroll lock while drawer open (paired with navbar.js) */
html.menu-open,
body.menu-open {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}

body.menu-open {
    /* width/position set inline by JS for iOS scroll restore */
    max-width: 100%;
}

/* Keep nav + drawer interactive while page is frozen */
body.menu-open #main-nav,
body.menu-open #mobileMenu {
    touch-action: pan-y;
    pointer-events: auto;
}

/* When menu open on panel pages, also freeze panel scrolling */
body.menu-open .panel {
    overflow: hidden !important;
    touch-action: none;
}

/* Inputs: stop iOS zoom on focus (font-size >= 16px) — global safety */
@media (max-width: 1023px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Reduce motion for drawer if requested */
@media (prefers-reduced-motion: reduce) {
    #mobileMenu {
        transition: none;
    }
}


/* ============================================================
   BASE MOBILE / TOUCH BEHAVIOUR
   Applies below 1024px
   ============================================================ */

@media (max-width: 1023px) {

    /* ============================================================
       SCROLL POLICY (all mobile pages)
       - Vertical scroll ENABLED
       - Scrollbars ALWAYS HIDDEN
       ============================================================ */
    html,
    body,
    .panel,
    .panel-container,
    .page-scroll,
    .section,
    #contact-form,
    #services,
    main,
    footer {
        scrollbar-width: none !important;          /* Firefox */
        -ms-overflow-style: none !important;       /* Legacy Edge */
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .panel::-webkit-scrollbar,
    .panel-container::-webkit-scrollbar,
    .page-scroll::-webkit-scrollbar,
    .section::-webkit-scrollbar,
    #contact-form::-webkit-scrollbar,
    #services::-webkit-scrollbar,
    main::-webkit-scrollbar,
    footer::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }

    /* Lock document scroll only on immersive panel shells
       (about / platform / index). Partner also uses .panel-container
       but keeps panels in normal document flow — do NOT lock it. */
    html:has(.panel-container):not(:has(#partner-background)) {
        scroll-snap-type: none !important;
        overflow: hidden;
    }

    body:has(.panel-container):not(:has(#partner-background)) {
        overflow: hidden;
        height: 100%;
    }

    /* Non-panel pages + partner page: normal document scroll */
    body:not(:has(.panel-container)),
    html:has(#partner-background),
    body:has(#partner-background) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
    }

    /* Immersive panel pages (about / platform / index) — panels are the scroll root.
       IMPORTANT: do NOT set height: 100dvh — absolute inset:0 fills the fixed
       panel-container. Forcing 100dvh breaks overflow on many Androids. */
    body:not(:has(#partner-background)) .panel {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        padding-top: max(16px, env(safe-area-inset-top)) !important;
        padding-right: max(48px, calc(42px + env(safe-area-inset-right))) !important;
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;

        box-sizing: border-box;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;

        scrollbar-width: none;
        -ms-overflow-style: none;

        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    body:not(:has(#partner-background)) .panel::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    body:not(:has(#partner-background)) .panel-container {
        overflow: hidden !important;
    }

    /* Partner page: panels stay in normal document flow (body scrolls) */
    body:has(#partner-background) .panel-container {
        position: relative !important;
        overflow: visible !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body:has(#partner-background) .panel {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .panel-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .about-grid {
        width: 100%;
        max-width: 100%;
        gap: 16px;
    }

    .about-copy {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .about-visual {
        display: none; /* visual column not needed on mobile panels */
    }


    /* --------------------------------------------------------
       UNIVERSAL MOBILE TYPOGRAPHY
       Fluid rather than device-specific
       -------------------------------------------------------- */

    .hero-title {
        font-size: clamp(2.4rem, 10vw, 4rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.045em !important;
        margin-bottom: clamp(12px, 2vw, 20px) !important;

        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .hero-subtitle {
        font-size: clamp(0.95rem, 2.8vw, 1.2rem) !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
    }

    .section-title {
        font-size: clamp(1.85rem, 6.5vw, 2.8rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.035em !important;
        margin-bottom: clamp(12px, 2vw, 18px) !important;

        max-width: 100%;
        overflow-wrap: break-word;
    }

    .panel-content p,
    .panel-content li,
    .section-text {
        font-size: clamp(0.88rem, 2vw, 1rem) !important;
        line-height: 1.5 !important;
    }

    /* Small uppercase labels (NEXIANECT / THE COMPANY etc.) */
    .panel-content .uppercase.tracking-\[0\.35em\],
    .panel-content p.uppercase {
        font-size: 0.7rem !important;
        letter-spacing: 0.25em !important;
        margin-bottom: 0.75rem !important;
    }


    /* --------------------------------------------------------
       GLASS CARDS
       -------------------------------------------------------- */

    .glass-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

        padding: clamp(12px, 2.5vw, 18px) !important;
        border-radius: clamp(14px, 3vw, 18px) !important;
    }

    .glass-card:hover {
        transform: none !important;
    }

    .glass-card h3 {
        font-size: clamp(0.95rem, 2.3vw, 1.1rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 0.5rem !important;
    }

    .glass-card .text-xl {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
    }

    .glass-card .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.15 !important;
    }


    /* --------------------------------------------------------
       GRIDS — force single column by default on mobile
       -------------------------------------------------------- */

    .panel-content .grid,
    .panel-content .grid.sm\:grid-cols-2,
    .panel-content .grid.md\:grid-cols-2,
    .panel-content .grid.lg\:grid-cols-3,
    .panel-content .grid.sm\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }


    /* --------------------------------------------------------
       SECTION-SPECIFIC — About page
       -------------------------------------------------------- */

    .panel[data-title="Hero"],
    .panel[data-title="Who We Are"],
    .panel[data-title="Testimony"],
    .panel[data-title="Journey"],
    .panel[data-title="Leadership"],
    .panel[data-title="Values"] {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    /* Testimony */
    .panel[data-title="Testimony"] .grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Journey */
    .panel[data-title="Journey"] .grid {
        grid-template-columns: 1fr !important;
        gap: 0.7rem !important;
    }

    /* Values */
    .panel[data-title="Values"] .grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Leadership — bio cards single column; metrics stay 3-col */
    .panel[data-title="Leadership"] .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .panel[data-title="Leadership"] .grid.grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.45rem !important;
        margin-top: 0.9rem !important;
    }

    .panel[data-title="Leadership"] .grid.grid-cols-3 .glass-card {
        padding: 12px 6px !important;
    }

    .metric {
        font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
        line-height: 1 !important;
        margin-bottom: 0.35rem !important;
    }

    .panel[data-title="Leadership"] .grid.grid-cols-3 .section-text {
        font-size: 0.65rem !important;
        line-height: 1.25 !important;
    }


    /* --------------------------------------------------------
       SECTION-SPECIFIC — Platform page
       -------------------------------------------------------- */

    .panel[data-title="Overview"],
    .panel[data-title="Summary"],
    .panel[data-title="FRUX"],
    .panel[data-title="CRES"],
    .panel[data-title="Difference"],
    .panel[data-title="The Shift"] {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .panel[data-title="FRUX"] .grid,
    .panel[data-title="CRES"] .grid,
    .panel[data-title="Difference"] .grid,
    .panel[data-title="The Shift"] .grid,
    .panel[data-title="Summary"] .grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }


    /* --------------------------------------------------------
       SECTION-SPECIFIC — Index (home) page
       -------------------------------------------------------- */

    .panel[data-title="intro"],
    .panel[data-title="The Problem"],
    .panel[data-title="Why It Fails"],
    .panel[data-title="CIBYR OS"],
    .panel[data-title="Connect"] {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .panel[data-title="The Problem"] .grid,
    .panel[data-title="Why It Fails"] .grid,
    .panel[data-title="CIBYR OS"] .grid,
    .panel[data-title="Connect"] .grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }


    /* --------------------------------------------------------
       SECTION-SPECIFIC — Services page (non-panel, normal scroll)
       -------------------------------------------------------- */

    #services.section,
    .section#services {
        padding-top: max(88px, calc(72px + env(safe-area-inset-top))) !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
        padding-bottom: max(40px, env(safe-area-inset-bottom)) !important;
    }

    .service-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .service-card h3 {
        font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
    }

    .service-description {
        font-size: clamp(0.9rem, 2.5vw, 0.95rem) !important;
        line-height: 1.5 !important;
    }


    /* --------------------------------------------------------
       SECTION-SPECIFIC — Contact page (non-panel, normal scroll)
       Kill horizontal scroll: no 100vw, clamp paddings, min-width:0
       -------------------------------------------------------- */

    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .page-scroll,
    #hero,
    #contact-form,
    footer,
    #contact-background {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    #contact-background {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    #hero {
        min-height: 100dvh;
        width: 100%;
        max-width: 100%;
        /* Never let content enter the fixed navbar zone */
        padding-top: max(80px, calc(64px + env(safe-area-inset-top))) !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
        box-sizing: border-box;
        overflow-x: hidden;
        margin-top: 0 !important;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        align-items: flex-start !important;
        padding-top: clamp(8px, 2vh, 24px) !important;
        padding-bottom: 24px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden;
    }

    .hero-content .text-center {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 0 !important;
        padding-right: 0 !important;
        min-width: 0;
    }

    /* Eyebrow / uppercase labels — tracking causes overflow on 320px */
    #hero p.uppercase,
    #hero .uppercase,
    #contact-form p.uppercase,
    .section-header p.uppercase {
        font-size: clamp(0.65rem, 2.8vw, 0.85rem) !important;
        letter-spacing: 0.18em !important;
        max-width: 100% !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal !important;
        line-height: 1.4 !important;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-title {
        font-size: clamp(2.1rem, 10vw, 3.4rem) !important;
        max-width: 100% !important;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: manual;
    }

    .section-header h1,
    #contact-form h1 {
        font-size: clamp(2rem, 9vw, 3.5rem) !important;
        max-width: 100% !important;
        overflow-wrap: break-word;
        line-height: 1.05 !important;
    }

    /* Override Tailwind px-8 on small screens */
    #hero .px-8,
    .section-spacing .px-8,
    .max-w-7xl.px-8,
    footer .px-6 {
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
    }

    .hero-description {
        font-size: clamp(0.95rem, 2.8vw, 1.2rem) !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
    }

    .hero-button,
    .hero-secondary {
        min-height: 48px;
        max-width: 100%;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        box-sizing: border-box;
    }

    .section-spacing {
        padding-top: clamp(3rem, 8vw, 6rem) !important;
        padding-bottom: clamp(3rem, 8vw, 6rem) !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .max-w-7xl,
    .max-w-4xl {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        min-width: 0;
    }

    /* Contact info column + form column — never exceed viewport */
    .contact-info,
    .contact-form-col,
    .section-grid > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Email address — long unbroken strings must wrap */
    .email {
        font-size: clamp(1.05rem, 5vw, 1.75rem) !important;
        font-weight: 600;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-all !important;
        line-height: 1.3 !important;
    }

    /* Office / Looking For labels */
    .office,
    .looking {
        font-size: 0.75rem !important;
        letter-spacing: 0.14em !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    .looking-list {
        font-size: 0.95rem !important;
        max-width: 100% !important;
    }

    .looking-list li {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }

    /* Form — tight padding on small screens so fields fit 320px */
    #contactForm,
    form#contactForm {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        padding: 14px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    #contactForm > * {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #contactForm input,
    #contactForm select,
    #contactForm textarea,
    #contactForm button,
    #contactForm [class*="w-full"],
    #contactForm .relative {
        font-size: 16px !important;
        min-height: 48px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        min-width: 0 !important;
    }

    #contactForm textarea {
        min-height: 140px;
    }

    #contactForm label {
        font-size: 0.75rem !important;
        letter-spacing: 0.12em !important;
        max-width: 100% !important;
    }

    /* Custom dropdown panels must not widen the page */
    #country-dropdown,
    #interest-dropdown,
    .country-scroll,
    .interest-scroll {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Kill Tailwind px-8 on contact wrappers */
    #contact-form .max-w-7xl,
    #contact-form .max-w-4xl,
    #contact-form .px-8,
    #hero .text-center.px-8 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
        box-sizing: border-box !important;
    }

    .section-grid,
    .grid.lg\:grid-cols-2.section-grid,
    footer .grid,
    footer .grid.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    footer {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }

    /* Long tracked uppercase text must wrap */
    p.uppercase,
    .uppercase,
    [class*="tracking-"] {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    /* Scroll indicator must not extend page width */
    #scroll-indicator {
        right: max(4px, env(safe-area-inset-right)) !important;
        max-width: 24px;
    }


    /* --------------------------------------------------------
       SECTION-SPECIFIC — Partner page (panel-based)
       -------------------------------------------------------- */

    #partner-background {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    #partner-hero,
    #opportunities,
    #pilot-benefits,
    #investor-benefits,
    #current-partners,
    #partner-cta {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .partner-copy,
    .partner-visual {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .section-label {
        font-size: clamp(0.65rem, 2.8vw, 0.8rem) !important;
        letter-spacing: 0.16em !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    .section-title {
        font-size: clamp(1.45rem, 6.5vw, 2.4rem) !important;
        line-height: 1.15 !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        margin-bottom: 0.85rem !important;
    }

    .section-text {
        font-size: clamp(0.9rem, 3vw, 1.05rem) !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
    }

    .glass-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 1rem 1.1rem !important;
        min-width: 0 !important;
    }

    .glass-card:hover {
        transform: none !important;
    }

    .cta-button {
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: 48px;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        justify-items: center !important;
        text-align: center;
    }
    .partners-button {
        justify-items: center !important;
    }

    #opportunities .grid,
    #pilot-benefits .grid,
    #investor-benefits .grid,
    #current-partners .grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }


    /* --------------------------------------------------------
       SECTION-SPECIFIC — Terms + Privacy (legal pages)
       Non-panel, normal document scroll
       -------------------------------------------------------- */

    .page,
    .terms-section,
    .privacy-section,
    .terms-container,
    .privacy-container,
    .hero,
    .hero-inner {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .hero {
        padding-top: max(90px, calc(72px + env(safe-area-inset-top))) !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
        padding-bottom: clamp(40px, 8vh, 70px) !important;
        min-height: auto !important;
    }

    .hero-title {
        font-size: clamp(2rem, 10vw, 3.5rem) !important;
        line-height: 1.05 !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }

    .hero-description {
        font-size: clamp(0.95rem, 3.2vw, 1.1rem) !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
    }

    .terms-container,
    .privacy-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
        box-sizing: border-box !important;
    }

    .terms-section,
    .privacy-section {
        padding-top: clamp(2.5rem, 6vw, 4rem) !important;
        padding-bottom: clamp(2.5rem, 6vw, 4rem) !important;
    }

    .intro-card,
    .terms-card,
    .privacy-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 18px 16px !important;
        border-radius: 18px !important;
        min-width: 0 !important;
    }

    .intro-card:hover,
    .terms-card:hover,
    .privacy-card:hover {
        transform: none !important;
    }

    .terms-card p,
    .terms-card li,
    .privacy-card p,
    .privacy-card li,
    .intro-card p {
        font-size: clamp(0.9rem, 3vw, 0.98rem) !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }

    .section-number {
        font-size: clamp(0.7rem, 2.5vw, 0.85rem) !important;
        letter-spacing: 0.14em !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .terms-card h2,
    .privacy-card h2 {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }

    /* Privacy security table — allow internal scroll only, hide bar */
    .security-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
    }

    .security-table::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .security-table table {
        width: 100% !important;
        min-width: 0 !important;
    }

    .footer-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
        box-sizing: border-box !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    .footer-legal {
        flex-wrap: wrap !important;
        gap: 12px 20px !important;
        max-width: 100% !important;
    }

    #backToTop {
        right: max(14px, env(safe-area-inset-right)) !important;
        bottom: max(14px, env(safe-area-inset-bottom)) !important;
    }


    /* --------------------------------------------------------
       NAVIGATION RINGS
       -------------------------------------------------------- */

    #platform-navigation {
        right: max(15px, env(safe-area-inset-right));
        top: 50%;
        transform: translateY(-50%);

        gap: clamp(10px, 2vw, 14px);

        width: auto;
        max-width: none;
        overflow: visible;
        z-index: 600;
        pointer-events: none;
    }

    #platform-navigation.scroll-hidden {
        transform: translateY(-50%) translateX(12px);
    }

    #platform-navigation .nav-item {
        width: 44px;
        height: 44px;
        justify-content: center;
        gap: 0;
        pointer-events: auto;
    }

    /* Labels hidden on small screens (rings only); title attr still works */
    #platform-navigation .nav-label {
        display: none !important;
    }

    .nav-indicator,
    .nav-ring {
        width: 28px;
        height: 28px;
        overflow: visible;
    }

    /* Show all track rings so the stack is readable */
    .nav-track {
        opacity: 0.45 !important;
        stroke: rgba(255, 255, 255, 0.35);
    }

    .nav-item.active .nav-track {
        opacity: 1 !important;
        stroke: rgba(255, 255, 255, 0.5);
    }

    .nav-dot {
        fill: rgba(255, 255, 255, 0.85);
    }

    .nav-item.active .nav-dot {
        fill: var(--brand-neon, #a0f818);
    }


    /* --------------------------------------------------------
       SCROLL INDICATOR
       -------------------------------------------------------- */

    #scroll-indicator {
        right: max(3px, env(safe-area-inset-right));
        top: 48%;
        transform: translateY(-50%);
        bottom: auto;
    }

    .scroll-text {
        font-size: 7px;
        letter-spacing: 0.2em;
    }

    .scroll-arrow span {
        width: 10px;
        height: 10px;
    }


    /* --------------------------------------------------------
       NAVBAR (shared)
       -------------------------------------------------------- */

    #main-nav .logo {
        width: 120px;
    }

    #main-nav .logo img {
        width: 100%;
        max-width: 110px;
    }

    #menuButton {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* ============================================================
   768px → 1023px
   TABLET / SMALL LANDSCAPE
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    .panel {
        padding-top: clamp(24px, 4vh, 48px) !important;
        padding-right: clamp(60px, 7vw, 90px) !important;
        padding-bottom: clamp(32px, 5vh, 56px) !important;
        padding-left: clamp(28px, 6vw, 72px) !important;
    }

    .panel-content {
        width: min(100%, 850px);
        margin-left: auto;
        margin-right: auto;
    }

    .hero-title {
        font-size: clamp(3.2rem, 7vw, 5rem) !important;
    }

    .hero-subtitle {
        font-size: clamp(1.05rem, 2vw, 1.3rem) !important;
        max-width: 760px !important;
    }

    .section-title {
        font-size: clamp(2.3rem, 5vw, 3.2rem) !important;
    }

    .panel-content p,
    .panel-content li,
    .section-text {
        font-size: clamp(0.95rem, 1.5vw, 1.1rem) !important;
        line-height: 1.55 !important;
    }

    .glass-card {
        padding: clamp(18px, 2.5vw, 26px) !important;
    }

    /* Allow two columns again on tablet */
    .panel[data-title="Testimony"] .grid,
    .panel[data-title="Journey"] .grid,
    .panel[data-title="Values"] .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: clamp(12px, 2vw, 20px) !important;
    }

    .panel[data-title="Leadership"] .grid.md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: clamp(14px, 2vw, 24px) !important;
    }

    .panel[data-title="Leadership"] .grid.grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .metric {
        font-size: clamp(2rem, 4vw, 3rem) !important;
    }

    .nav-item {
        width: 30px;
        height: 30px;
    }

    .nav-indicator,
    .nav-ring {
        width: 30px;
        height: 30px;
    }
}
/* ============================================================
   INDEX INTRO PANEL ONLY
   Keep glass overlay (.panel::before) full-viewport on mobile
   when hero copy is shorter than the screen
   ============================================================ */

@media (max-width: 1023px) {

    /* Prefer id — most specific to this panel */
    body:not(:has(#partner-background)) .panel#hero,
    body:not(:has(#partner-background)) .panel[data-title="intro"] {
        /* Fill the panel-container (area under the navbar) */
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        /* Override the shared mobile "height: auto" collapse */
        height: auto !important;          /* keep for cascade safety */
        min-height: 100% !important;      /* stretch to container */
        max-height: none !important;

        /* Content stays top-aligned; overlay still covers full panel */
        align-items: flex-start !important;
        justify-content: flex-start !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    /* Ensure the glass layer still paints edge-to-edge on this panel */
    body:not(:has(#partner-background)) .panel#hero::before,
    body:not(:has(#partner-background)) .panel[data-title="intro"]::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
    }
}


/* ============================================================
   480px → 767px
   LARGE PHONE / INTERMEDIATE
   ============================================================ */

@media (min-width: 480px) and (max-width: 767px) {

    .panel {
        padding-top: clamp(18px, 3vh, 28px) !important;
        padding-right: clamp(48px, 8vw, 64px) !important;
        padding-bottom: clamp(24px, 4vh, 36px) !important;
        padding-left: clamp(18px, 5vw, 32px) !important;
    }

    .panel-content {
        width: 100%;
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-title {
        font-size: clamp(2.8rem, 9vw, 4rem) !important;
    }

    .hero-subtitle {
        font-size: clamp(1rem, 3vw, 1.15rem) !important;
        max-width: 600px !important;
    }

    .section-title {
        font-size: clamp(2rem, 7vw, 2.7rem) !important;
    }

    .panel-content p,
    .panel-content li,
    .section-text {
        font-size: clamp(0.9rem, 2.2vw, 1rem) !important;
        line-height: 1.5 !important;
    }

    /* Keep single column until 768px */
    .panel-content .grid,
    .panel[data-title="Testimony"] .grid,
    .panel[data-title="Journey"] .grid,
    .panel[data-title="Values"] .grid,
    .panel[data-title="Leadership"] .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .panel[data-title="Leadership"] .grid.grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: clamp(6px, 2vw, 12px) !important;
    }

    .metric {
        font-size: clamp(1.7rem, 6vw, 2.5rem) !important;
    }
}


/* ============================================================
   360px → 479px
   STANDARD PHONE
   ============================================================ */

@media (min-width: 360px) and (max-width: 479px) {

    .panel {
        padding-top: 14px !important;
        padding-right: 44px !important;
        padding-bottom: 20px !important;
        padding-left: 14px !important;
    }

    .hero-title {
        font-size: clamp(2.4rem, 12vw, 3.5rem) !important;
    }

    .hero-subtitle {
        font-size: clamp(0.92rem, 3.7vw, 1.05rem) !important;
    }

    .section-title {
        font-size: clamp(1.85rem, 8vw, 2.4rem) !important;
    }

    .panel-content p,
    .panel-content li,
    .section-text {
        font-size: 0.92rem !important;
        line-height: 1.48 !important;
    }

    .glass-card {
        padding: 14px !important;
    }

    .glass-card h3 {
        font-size: 1rem !important;
    }

    .panel[data-title="Leadership"] .grid.grid-cols-3 {
        gap: 6px !important;
    }

    .metric {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    }

    .panel[data-title="Leadership"] .grid.grid-cols-3 .section-text {
        font-size: 0.62rem !important;
    }
}


/* ============================================================
   ≤359px
   ULTRA-SMALL PHONE
   ============================================================ */

@media (max-width: 359px) {

    .panel {
        padding-top: 10px !important;
        padding-right: 40px !important;
        padding-bottom: 14px !important;
        padding-left: 10px !important;
    }

    .hero-title {
        font-size: clamp(2.15rem, 13vw, 3rem) !important;
        line-height: 0.98 !important;
    }

    .hero-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.42 !important;
    }

    .section-title {
        font-size: clamp(1.7rem, 8vw, 2.15rem) !important;
    }

    .panel-content p,
    .panel-content li,
    .section-text {
        font-size: 0.87rem !important;
        line-height: 1.42 !important;
    }

    .glass-card {
        padding: 11px !important;
        border-radius: 14px !important;
    }

    .glass-card h3 {
        font-size: 0.92rem !important;
    }

    .panel[data-title="Leadership"] .grid.grid-cols-3 {
        gap: 4px !important;
    }

    .metric {
        font-size: 1.55rem !important;
    }

    .panel[data-title="Leadership"] .grid.grid-cols-3 .section-text {
        font-size: 0.58rem !important;
        line-height: 1.2 !important;
    }

    .nav-item,
    .nav-indicator,
    .nav-ring {
        width: 25px;
        height: 25px;
    }

    #main-nav .logo {
        width: 100px;
    }

    #main-nav .logo img {
        max-width: 95px;
    }
}


/* ============================================================
   SHORT SCREENS
   Prevent vertical spacing from creating dead space
   ============================================================ */

@media (max-width: 767px) and (max-height: 700px) {

    .panel {
        padding-top: 10px !important;
        padding-bottom: 12px !important;
    }

    .hero-title {
        margin-bottom: 10px !important;
    }

    .section-title {
        margin-bottom: 8px !important;
    }

    .about-grid {
        gap: 10px !important;
    }

    .glass-card {
        padding-top: 11px !important;
        padding-bottom: 11px !important;
    }

    .panel-content p,
    .panel-content li,
    .section-text {
        line-height: 1.4 !important;
    }
}


/* ============================================================
   VERY SHORT PHONES
   Example: 320 × 568
   ============================================================ */

@media (max-width: 479px) and (max-height: 620px) {

    .hero-title {
        font-size: clamp(2rem, 11vw, 2.7rem) !important;
    }

    .hero-subtitle {
        font-size: 0.86rem !important;
    }

    .section-title {
        font-size: clamp(1.6rem, 7vw, 2rem) !important;
    }

    .panel-content p,
    .panel-content li,
    .section-text {
        font-size: 0.84rem !important;
        line-height: 1.38 !important;
    }

    .glass-card {
        padding: 9px 11px !important;
    }
}


/* ============================================================
   LANDSCAPE PHONES
   Wide but VERY SHORT
   ============================================================ */

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1023px) {

    .panel {
        padding-top: 10px !important;
        padding-bottom: 12px !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(48px, calc(42px + env(safe-area-inset-right))) !important;
    }

    .panel-content {
        max-width: 900px;
    }

    .hero-title {
        font-size: clamp(2rem, 7vw, 3.2rem) !important;
        margin-bottom: 8px !important;
    }

    .hero-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.35 !important;
    }

    .section-title {
        font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
        margin-bottom: 8px !important;
    }

    .panel-content p,
    .panel-content li,
    .section-text {
        font-size: 0.86rem !important;
        line-height: 1.35 !important;
    }

    .glass-card {
        padding: 10px 14px !important;
    }

    /* Allow two columns in landscape to reduce vertical length */
    .panel[data-title="Testimony"] .grid,
    .panel[data-title="Journey"] .grid,
    .panel[data-title="Values"] .grid,
    .panel[data-title="Leadership"] .grid.md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #platform-navigation {
        gap: 8px;
    }

    .nav-item,
    .nav-indicator,
    .nav-ring {
        width: 24px;
        height: 24px;
    }
}


/* ============================================================
   TOUCH DEVICES
   Remove hover-only movement without affecting desktop
   ============================================================ */

@media (hover: none) and (pointer: coarse) {

    .glass-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .glass-card::before,
    .glass-card::after {
        pointer-events: none;
    }

    a,
    button,
    .nav-item,
    #menuButton {
        -webkit-tap-highlight-color: transparent;
    }

    /* Ensure adequate touch targets */
    #menuButton {
        min-width: 44px;
        min-height: 44px;
    }
}


/* ============================================================
   SAFE-AREA FALLBACKS FOR OLDER BROWSERS
   (env() is ignored if unsupported; these give a baseline)
   ============================================================ */

@supports not (padding: env(safe-area-inset-top)) {
    @media (max-width: 1023px) {
        .panel {
            padding-top: 16px !important;
            padding-right: 48px !important;
            padding-bottom: 24px !important;
            padding-left: 14px !important;
        }
    }
}