/* ============================================================
   APEX GROWTH — MOBILE FIXES (single source of truth)
   ============================================================
   This file is THE place for mobile-only overrides. It loads
   AFTER css/base.css and any page-specific CSS, so its rules
   win the cascade on phones without needing !important spam.

   Loaded site-wide on every page via <link rel="stylesheet"
   href="/mobile/mobile.css" media="(max-width: 880px)">

   ORGANIZATION:
   1. Foundations   — type scale, spacing, scroll behavior
   2. Nav + menu    — header, drawer, scrolled state
   3. Hero          — text, brand video, CTAs
   4. Sections      — universal section padding + spacing
   5. Cards         — every card-style component
   6. Forms         — contact form, buttons
   7. Footer        — footer grid, brand, links
   8. Performance   — content-visibility, GPU hints
   ============================================================ */

/* ============================================================
   0. CONTAINER WIDTH — the #1 mobile "wasted space" fix
   Site-wide .container uses padding:0 32px which steals 64px on a
   375px phone (cards become 311px wide, 17% of the screen is just
   margin). Squarespace + Apple use 16-20px on mobile. Bringing it
   to 20px = 91% viewport utilization. Cards breathe, text reads
   wider, the whole page feels less crammed-in-a-column.
   ============================================================ */
.container {
    padding: 0 20px !important;
}

/* ============================================================
   1. FOUNDATIONS
   ============================================================ */

/* Smooth native scroll on iOS — no JS, no scroll-snap, just buttery. */
html {
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 72px;
    scroll-padding-bottom: 92px;
}

body {
    /* Prevent iOS text inflation on landscape, allow vertical scrolling only */
    -webkit-text-size-adjust: 100%;
    touch-action: pan-y;
}

/* No horizontal scroll on mobile. Use `clip` (not `hidden`) so we don't
   establish a scrolling box on html/body — that would break the hero's
   position:sticky pin on iOS Safari, causing the brain to scroll away
   instead of staying pinned during the zoom cinematic. */
html, body {
    overflow-x: clip;
}

/* ============================================================
   2. NAV + MENU
   ============================================================ */

/* The nav itself stays position:fixed at z:1000 (from base.css).
   These overrides ONLY tweak look + spacing on phones. */
.nav {
    padding: 14px 0 !important;
}
.nav.scrolled {
    background: #050507 !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 10px 0 !important;
}
.nav .logo {
    z-index: 1020;
    position: relative;
}
.nav .logo-text {
    font-size: 1.35rem;
    letter-spacing: -.01em;
}
.nav .logo-mark {
    width: 36px;
    height: 36px;
}

/* Hamburger button — touch-target friendly */
.menu-btn {
    display: flex !important;
    flex-direction: column;
    z-index: 1020;
    position: relative;
    min-width: 44px;
    min-height: 44px;
    padding: 11px 10px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}
.menu-btn span {
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .3s var(--ease), opacity .25s ease;
    display: block;
}
.menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Full-screen drawer — solid black, Squarespace style */
.nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #050507;
    flex-direction: column;
    padding: 96px 28px 32px;
    gap: 0;
    transition: transform .35s var(--ease), visibility 0s linear .35s;
    z-index: 1010;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    border-left: none;
    align-items: stretch !important;
}
.nav-menu.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    transition: transform .35s var(--ease), visibility 0s linear 0s;
}
.nav-menu li {
    width: 100%;
    list-style: none;
}
.nav-menu a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 22px 4px;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.07);
    min-height: 64px;
    transition: color .25s ease, padding-left .25s ease;
}
.nav-menu a:not(.btn)::after { display: none; }
.nav-menu a:active { color: var(--accent2); padding-left: 8px; }
.nav-menu .btn {
    width: 100%;
    justify-content: center;
    margin-top: 24px;
    padding: 18px 28px;
    font-size: .95rem;
    border-bottom: none;
    border-radius: 14px;
}

/* Staggered fade-in for nav links when drawer opens */
.nav-menu.open li {
    animation: nav-item-in .5s var(--ease) both;
}
.nav-menu.open li:nth-child(1) { animation-delay: .08s; }
.nav-menu.open li:nth-child(2) { animation-delay: .13s; }
.nav-menu.open li:nth-child(3) { animation-delay: .18s; }
.nav-menu.open li:nth-child(4) { animation-delay: .23s; }
.nav-menu.open li:nth-child(5) { animation-delay: .30s; }
@keyframes nav-item-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Backdrop behind drawer (created by JS) */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s;
    pointer-events: none;
}
.nav-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.nav-open { overflow: hidden; }

/* ============================================================
   3. SECTIONS — universal spacing
   64px vertical padding hits the rhythm sweet spot. 80px felt
   bloated (the user complaint: "wasted space"). 64px gives clear
   section breaks without slowing the scroll.
   ============================================================ */

section { contain: layout paint; }

.problem, .problem-v2,
.growth-engine, .growth-engine-slim,
.how-it-works, .hiw-v2,
.industries, .industries-v2,
.trusted-by, .work-bridge,
.services, .contact, .contact-v2,
.about-mission, .about-values, .about-vision,
.about-manifesto, .about-clients, .about-founder, .about-direct {
    padding: 64px 0 !important;
}

/* ============================================================
   3.5. SQUARESPACE-STYLE TYPE + STATS POLISH
   Big readable type, generous line-height, statement-sized stats.
   ============================================================ */

/* Body copy site-wide: 1rem (16px) with 1.6 line-height — Squarespace standard */
section p:not([class*="eyebrow"]):not([class*="label"]):not([class*="meta"]):not(.hf-meta):not(.hf-label),
section li:not([class*="step"]):not([class*="pill"]) {
    line-height: 1.6;
}

/* Section subtitles — slightly larger + brighter than before */
.sec-desc,
.contact-sub,
.page-subtitle {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,.78) !important;
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Statement-sized stat numbers — Squarespace uses 48-56px (~3rem) for stats.
   Catches the eye, communicates scale instantly. */
.book-stat-num,
.tb-result strong,
.mp-row strong,
.ge-kpi-val,
.contact-proof strong {
    font-size: clamp(2.4rem, 9vw, 2.9rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    line-height: 1 !important;
    color: #fff !important;
}

/* Stat labels — small mono uppercase, like Squarespace */
.book-stat-label,
.tb-result-label,
.mp-row span,
.contact-proof span {
    font-family: var(--mono) !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.6) !important;
    line-height: 1.4 !important;
    margin-top: 6px;
    display: block;
}

/* Arrow-style secondary links (Squarespace pattern) — text + → instead of
   a full button. Easier on the eye, signals "tap me" without competing
   with the primary CTA. */
.pc-link,
.section-arrow-link,
a.pc-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: var(--display) !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    color: var(--accent2) !important;
    text-decoration: none !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255,107,40,.3);
    transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
.pc-link:hover,
.section-arrow-link:hover {
    gap: 12px !important;
    color: #fff !important;
    border-color: var(--accent2);
}

/* ============================================================
   CARD NORMALIZATION — one rhythm, one radius, one border weight
   On desktop, cards had radii ranging from 14-24px and border
   opacities from 0.06-0.10. The visual noise made the page feel
   "off". Unifying to 18px radius + .08 white border (or orange for
   featured/CTA cards) creates a single consistent card vocabulary.
   ============================================================ */
.pc-glass,
.ind2-card,
.hiw2-card,
.tb-card,
.tm-card,
.client-card,
.tier1-card,
.wb-card {
    border-radius: 18px !important;
}
.pc-glass,
.ind2-card,
.hiw2-card,
.tb-card,
.tm-card,
.tier1-card {
    border: 1px solid rgba(255,255,255,.08) !important;
}

/* Translucent cards (.pc-glass, .tb-card, .hiw2-card, .client-card) rely
   on backdrop-filter for the frosted-glass look. Mobile kills the blur
   for performance, leaving the section bg muddy-bleeding through. Make
   them ALL solid on mobile so every card reads as a clean dark surface. */
.pc-glass,
.tb-card,
.hiw2-card,
.client-card,
.tm-card {
    background: linear-gradient(155deg, rgba(20,14,20,.97), rgba(8,6,12,.99)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.client-card,
.wb-card {
    border: 1px solid rgba(255,107,40,.18) !important;
}

/* Card internal padding — uniform 22×20px for ALL cards (was a mix of
   18-32px across components). Tight enough to fill the wider 335px
   container, generous enough to breathe. */
.pc-glass,
.ind2-card,
.hiw2-card,
.tb-card,
.tm-card,
.wb-card,
.client-card {
    padding: 22px 20px !important;
}
/* Tier1 cards get slightly more padding for the dense content (chapter num + kicker + title + body + viz) */
.tier1-card {
    padding: 24px 22px !important;
}

/* CTA buttons — Squarespace-level prominence (chunkier padding, clearer affordance) */
.btn-lg,
.btn-accent.btn-lg {
    padding: 18px 32px !important;
    font-size: .98rem !important;
    letter-spacing: .03em !important;
    min-height: 56px;
}

/* Section headlines — Squarespace-confident but not bloated.
   2rem floor (32px) - 2.4rem ceiling (38.4px) keeps headlines
   bold without overwhelming the smaller phones. */
.sec-title,
.ge-title,
.contact-heading,
.problem-v2 .sec-title,
.our-work-home .sec-title,
.industries .sec-title,
.problem-head .sec-title,
.how-it-works .sec-title,
.hiw2-headline,
.ind2-title,
.wb-title {
    font-size: clamp(2rem, 7.5vw, 2.4rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.03em !important;
    margin-bottom: 14px !important;
}

/* Eyebrow tags (tag · BLAH BLAH labels above section titles) — slightly
   bigger so they're not whispered at .55rem */
.tag,
.problem-eyebrow,
.tm-eyebrow,
.hm-pill,
.dc-label {
    font-size: .72rem !important;
    letter-spacing: .2em !important;
    font-weight: 700 !important;
}

/* More breathing room around section headers */
.sec-head,
.problem-head,
.contact-head,
.ge-head,
.tier1-mobile-head {
    margin-bottom: 28px !important;
}

/* ============================================================
   4. PERFORMANCE — content-visibility + GPU hints
   ============================================================ */

.problem-v2,
.industries-v2,
.growth-engine,
.growth-engine-slim,
.hiw-v2,
.trusted-by,
.work-bridge,
.services,
.contact-v2,
.ascend,
.tier1,
.faq-v2,
footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
}

/* GPU promotion for heavy media — keeps scroll smooth */
.hero-idle, .hero-final, .tier1-video, .ge-video,
video[autoplay] {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* Kill ALL backdrop-filter on mobile — biggest scroll-jank cause on iOS */
*, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Cap heavy blurs */
.orb, .orb-1, .orb-2, .orb-3 {
    filter: blur(40px) !important;
}

/* Drop leftover will-change on revealed elements (frees GPU layers) */
.reveal.visible, .reveal-left.visible, .reveal-right.visible,
.reveal-pop.visible, .reveal-words.visible, .stagger-in.visible {
    will-change: auto;
}

/* ============================================================
   FOOTER (mobile) — stack everything, tighten gaps
   ============================================================ */
.footer-cta {
    padding: 48px 0 40px !important;
}
.footer-cta-inner {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: flex-start !important;
}
.footer-cta-text h3 { font-size: 1.6rem !important; }
.footer-cta-btn { width: 100%; max-width: 340px; }

.footer-inner {
    flex-direction: column !important;
    gap: 36px !important;
    padding: 40px 0 32px !important;
}
.footer-brand { max-width: 100% !important; }
.footer-cols {
    width: 100%;
    gap: 24px 40px !important;
    grid-template-columns: 1fr 1fr;
    display: grid !important;
}
.footer-col h4 { font-size: .82rem !important; }
.footer-col a { font-size: .82rem !important; }

/* ============================================================
   INDUSTRIES SECTION — STACK ON MOBILE (no horizontal scroll)
   Was a horizontal-scroll carousel that cut off cards and let users
   accidentally skip past industries. On mobile, stack vertically so
   ALL industries are visible as the user scrolls the page naturally.
   ============================================================ */
.ind2-track-wrap {
    overflow: visible !important;
}
.ind2-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 8px 0 8px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    cursor: default !important;
}
.ind2-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: none !important;
    padding: 22px 20px !important;
}
/* Hide the side-fade gradients that signal "scroll me sideways" — no longer relevant */
.ind2-track-fade,
.ind2-track-fade-l,
.ind2-track-fade-r {
    display: none !important;
}
/* Hide the prev/next arrow controls if they exist */
.ind2-nav,
.ind2-nav-prev,
.ind2-nav-next,
.ind2-progress,
.ind2-dots {
    display: none !important;
}

/* ============================================================
   9. HOME PAGE QUICK CONTACT FORM (mobile)
   Stack the two-column field row, tighten padding.
   ============================================================ */
.home-form {
    padding: 28px 22px 26px !important;
    border-radius: 20px !important;
    margin-bottom: 36px !important;
}
.hf-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
}
.hf-field input,
.hf-field textarea {
    padding: 14px 14px !important;
    font-size: 16px !important; /* 16px prevents iOS auto-zoom on focus */
}
.hf-submit .btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 22px !important;
}
.hf-alt {
    font-size: .8rem !important;
    flex-direction: column;
    gap: 4px;
}

/* ============================================================
   10. TIER 1 — ELEVATE / SCALE / DOMINATE
   ============================================================
   Make the 3 steps visually unmistakable. Big chapter numbers,
   bold kickers, glow on the active card, breathing room between
   cards so each step lands distinctly.
   ============================================================ */

/* Sticky canvas + step pills container: more breathing room */
.tier1-sticky {
    margin-bottom: 32px !important;
}

/* HUGE chapter number — filled solid orange-tinted color so it's actually
   visible on a dark card. Was an outline that disappeared into the bg. */
.tier1-card-num {
    font-size: 3.4rem !important;
    font-weight: 900 !important;
    letter-spacing: -.06em;
    -webkit-text-stroke: 0 !important;
    color: rgba(255,107,40,.85) !important;
    line-height: .85;
    margin-top: -4px;
    text-shadow: 0 4px 24px rgba(255,107,40,.18);
}

/* Bigger card kicker — "STEP 01 · ELEVATE" pops with color */
.tier1-card-kicker {
    font-size: .72rem !important;
    letter-spacing: .28em !important;
    color: var(--accent2);
    font-weight: 700;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,107,40,.08);
    border: 1px solid rgba(255,107,40,.18);
    margin-bottom: 14px;
}

/* Card tag (FREE · 48 HRS) — green pill so timing reads at a glance */
.tier1-card-tag {
    font-size: .7rem !important;
    letter-spacing: .18em !important;
    color: #86efac !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: rgba(74,222,128,.1) !important;
    border: 1px solid rgba(74,222,128,.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Card meta row: more space */
.tier1-card-meta {
    margin-bottom: 16px !important;
    align-items: center;
}

/* Card title: bigger, bolder */
.tier1-card h3 {
    font-size: 1.7rem !important;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.1;
    margin-bottom: 12px;
}

/* Card body copy: better readability — brighter color, larger leading */
.tier1-card > p {
    font-size: 1rem !important;
    line-height: 1.65;
    color: rgba(255,255,255,.86) !important;
    margin-bottom: 20px;
}

/* Card overall: more breathing room */
.tier1-card {
    padding: 28px 24px 26px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,107,40,.14);
    background: linear-gradient(160deg, rgba(20,16,28,.95), rgba(8,6,14,.98));
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

/* Active card (the one whose step is currently shown in the sticky canvas):
   glow orange so the user knows which step they're on */
.tier1-card.is-active,
.tier1-card.is-in {
    border-color: rgba(255,107,40,.35);
    box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,107,40,.18) inset, 0 0 60px rgba(255,107,40,.12);
}

/* Card stream: more space between steps so each feels like its own moment */
.tier1-stream {
    gap: 36px !important;
}

/* Step pills inside canvas overlay: bigger + clearer */
.tier1-video-meta .tier1-step {
    padding: 10px 8px !important;
    border-radius: 12px;
    flex-direction: column;
    text-align: center;
    gap: 4px !important;
}
.tier1-video-meta .tier1-step i {
    font-size: .58rem !important;
    padding: 4px 8px !important;
    font-weight: 800;
}
.tier1-video-meta .tier1-step b {
    font-size: .68rem !important;
    letter-spacing: .04em;
}
.tier1-video-meta .tier1-step.is-active {
    background: rgba(255,107,40,.20) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(255,107,40,.28) !important;
}
.tier1-video-meta .tier1-step.is-active i {
    background: var(--accent2) !important;
    color: #000 !important;
}
.tier1-video-meta .tier1-step.is-active b {
    color: #fff !important;
}