/* ==========================================================================
   RESPONSIVE — dedicated compositions, not a shrunken desktop
   ========================================================================== */

/* ---- Large laptop ---- */
@media (max-width: 1200px) {
    .nav-links a { padding: 9px 12px; font-size: 0.84rem; }
    .fo-4 { display: none; }
    .fo-1 { right: 4%; }
    .fo-2 { right: 12%; }
}

/* ---- Tablet landscape / small laptop: nav collapses ---- */
@media (max-width: 1024px) {
    :root { --nav-height: 80px; }

    .nav-links,
    .nav > .nav-cta { display: none; }
    .nav-toggle { display: flex; }
    .nav { height: 62px; padding-right: 10px; }

    /* Hero keeps its cinematic weight; the 3D layer thins out */
    .hero-content { max-width: 100%; }
    .fo-2 { display: none; }
    .fo-1 { top: 12%; right: 5%; width: 168px; }
    .fo-3 { bottom: 10%; right: 5%; width: 176px; }
    .hero-overlay {
        background:
            linear-gradient(100deg, rgba(0,0,0,0.93) 0%, rgba(0,0,0,0.82) 45%, rgba(0,0,0,0.5) 100%),
            linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 24%, transparent 50%, rgba(0,0,0,0.9) 86%, #000 100%);
    }

    .split { grid-template-columns: 1fr; gap: clamp(36px, 5vw, 52px); }
    .split.reverse .split-visual { order: 0; }
    .stage { aspect-ratio: 16 / 11; max-width: 640px; }

    .transform-grid { grid-template-columns: 1fr; }
    .tf-arrow-inner { transform: rotate(90deg); }

    .perf-split { grid-template-columns: 1fr; }
    .evolution { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

/* ---- Tablet portrait ---- */
@media (max-width: 900px) {
    .analytics-viz { grid-template-columns: repeat(2, 1fr); }
    .lifecycle { grid-template-columns: repeat(3, 1fr); }
    .engine-canvas { height: clamp(380px, 54vh, 480px); }
    /* Reserve a band below the ring so the readout never covers the nodes */
    .engine-wrap { padding-bottom: 104px; }
    .engine-readout {
        left: 16px; right: 16px; bottom: 16px;
        max-width: none;
        padding: 16px 18px;
    }
    .engine-hint { right: 16px; top: 16px; font-size: 0.58rem; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   MOBILE — dedicated composition
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --nav-height: 74px;
        --section-pad: clamp(72px, 14vw, 96px);
        --gutter: 20px;
    }

    /* ---- Hero: portrait crop, stacked rhythm, thumb-friendly CTAs ---- */
    /* Budget the vertical space so the CTA and the WhatsApp number both land
       above the fold on a 375x812 phone, without dropping any hero copy. */
    .hero {
        min-height: 100svh;
        padding-top: calc(var(--nav-height) + 12px);
        padding-bottom: 68px;
        align-items: center;
    }
    .hero-eyebrow { margin-bottom: 20px; }
    .hero h1 { margin-bottom: 16px; }
    .hero-sub { margin-bottom: 14px; }
    .hero-desc { margin-bottom: 22px; }
    .hero-caps { margin-bottom: 22px; }
    .hero-micro { margin-top: 4px; }

    /* Recentre the crop so the video's subject survives a tall viewport */
    .hero-video {
        object-position: center 38%;
        transform: scale(1.12);
        filter: saturate(0.7) contrast(1.14) brightness(0.5);
    }

    /* Denser wash — mobile text sits directly over the busiest part of frame */
    .hero-overlay {
        background:
            linear-gradient(to bottom,
                rgba(0,0,0,0.86) 0%,
                rgba(0,0,0,0.7) 26%,
                rgba(0,0,0,0.74) 56%,
                rgba(0,0,0,0.94) 88%,
                #000 100%);
    }
    .hero-light { display: none; }
    .hero-gridtex { background-size: 60px 60px; }

    /* One floating object survives — an accent, not a scene.
       Kept clear of the nav and well behind the headline column. */
    .fo-1, .fo-2, .fo-4 { display: none; }
    .fo-3 {
        top: auto;
        bottom: 16%;
        right: -18px;
        width: 148px;
        transform: rotateY(-14deg) rotateX(6deg) scale(0.9);
        opacity: 0.38;
    }

    .hero h1 { line-height: 1.0; letter-spacing: -0.03em; }
    .hero-sub { max-width: 100%; }
    .hero-desc { max-width: 100%; font-size: 0.95rem; }

    /* Capabilities wrap as a two-line ribbon rather than a single rule */
    .hero-caps { gap: 8px; }
    .hero-caps li {
        font-size: 0.67rem;
        padding: 6px 12px;
        border-radius: var(--r-pill);
        border: 1px solid var(--border-glass);
        background: rgba(255,255,255,0.04);
        color: var(--text-dim);
    }
    .hero-caps li:not(:last-child)::after { display: none; }

    .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
    /* 52px tall — comfortably above the 44px minimum touch target */
    .hero-cta .btn { width: 100%; padding: 15px 28px; font-size: 0.95rem; }
    .hero-phone { padding-left: 0; margin-top: 2px; }
    .hero-micro { font-size: 0.8rem; }

    /* A scroll cue is a desktop affordance — on a phone it only competes with
       the hero copy for the same strip of screen. */
    .hero-scroll { display: none; }

    /* ---- Sections ---- */
    .section-head { margin-bottom: 40px; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

    .lifecycle { grid-template-columns: repeat(2, 1fr); border-radius: var(--r-lg); }
    .lc-step { padding: 22px 16px 26px; }
    .lc-note { display: none; }

    .stage { aspect-ratio: 4 / 3; padding: 24px; }

    .stack-journey { gap: 8px; }
    .sj-node { flex: 1 1 calc(50% - 4px); padding: 16px 12px; }
    .sj-node b { font-size: 0.85rem; }

    .topic-list { grid-template-columns: 1fr; }

    .analytics-viz { grid-template-columns: 1fr; }
    .av-metric { padding: 22px 20px; }

    .projects-grid,
    .audience-grid,
    .proof-grid { grid-template-columns: 1fr; }
    .project-card { min-height: auto; }
    .pc-num { font-size: 2.1rem; margin-bottom: 14px; }

    .perf-flow { padding: 18px 20px; }
    .perf-flow span { font-size: 0.78rem; padding: 6px 12px; }

    .engine-canvas { height: 400px; }
    .engine-wrap { border-radius: var(--r-xl); }

    .gal-card { flex-basis: 220px; padding: 24px 22px; }

    .outcomes-grid { grid-template-columns: 1fr; }

    .why-formula { gap: 8px; }
    .why-formula span { padding: 10px 18px; font-size: 0.85rem; }
    .why-shift { grid-template-columns: 1fr 1fr; }

    .faq-q { padding: 20px 2px; gap: 16px; }
    .faq-a p { padding-right: 20px; padding-bottom: 22px; font-size: 0.9rem; }

    .final-cta .btn-group { flex-direction: column; align-items: stretch; }
    .final-cta .btn { width: 100%; }

    .footer-top { grid-template-columns: 1fr; gap: 34px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* Footer links become full-width rows with a 44px+ touch target */
    .footer-col a { padding: 11px 0; margin-bottom: 0; }

    /* ---- WhatsApp: compact floating action ---- */
    .wa-float {
        right: 16px; bottom: 16px;
        width: 54px; height: 54px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .wa-float-text { display: none; }
    .wa-float svg { width: 26px; height: 26px; }
}

/* ---- Small phones ---- */
@media (max-width: 600px) {
    /* Three lines of programme name beside the logo is clutter at this width.
       The H1 states it immediately below, so the lockup carries the brand alone. */
    .nav-title, .nav-divider { display: none; }
}

@media (max-width: 480px) {
    .nav-logo { height: 22px; }

    .hero h1 { font-size: clamp(2.15rem, 11vw, 3rem); }
    .hero-eyebrow { font-size: 0.6rem; letter-spacing: 0.2em; padding: 8px 16px 8px 12px; }
    .hero-sub { font-size: 1.02rem; }
    .fo-3 { display: none; }

    .lifecycle { grid-template-columns: 1fr 1fr; }
    .why-shift { grid-template-columns: 1fr; }
    .sj-node { flex: 1 1 100%; }
    .gal-card { flex-basis: 84vw; }

    .engine-canvas { height: 340px; }
}

/* ==========================================================================
   LOW-POWER / COARSE POINTER — drop the expensive effects
   ========================================================================== */

@media (hover: none) {
    /* Hover-only depth costs nothing on touch and can strand a card mid-state */
    .card:hover,
    .project-card:hover,
    .gal-card:hover,
    .av-metric:hover,
    .sj-node:hover,
    .ev-stage:hover,
    .perf-panel:hover { transform: none; }

    .tilt { transform: none !important; }
}

/* ---- Landscape phones: reclaim vertical space in the hero ---- */
@media (max-height: 560px) and (orientation: landscape) {
    .hero { min-height: auto; padding-block: calc(var(--nav-height) + 40px) 70px; }
    .hero-scroll { display: none; }
    .hero h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
    .hero-desc, .hero-micro { display: none; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    .nav-wrap, .wa-float, .hero-media, .hero-objects,
    .hero-scroll, .scroll-progress, .engine-wrap, .final-canvas { display: none !important; }
    body { background: #fff; color: #000; }
    .card, .project-card { border: 1px solid #ccc; background: #fff; }
    * { color: #000 !important; box-shadow: none !important; }
}