/* =========================================================
   PEAK ESSENCE — Mobile polish (final pass)
   Loaded LAST so every rule beats earlier breakpoints.
   Targets: ≤900 / ≤720 / ≤600 / ≤480 / ≤380 viewports.
   Goal: zero horizontal scroll, comfortable tap targets,
         readable type, no overlapping decorative chrome.
   ========================================================= */

/* ---- 0. Global guards: no horizontal bleed, safe-area aware. */
html, body { overflow-x: clip; }
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    -webkit-text-size-adjust: 100%;
}
img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
/* Long URLs / hyphenated specs don't blow out narrow columns. */
p, li, h1, h2, h3, h4, h5, .lead { overflow-wrap: anywhere; word-break: break-word; }

/* Tighten the global gutter a touch on the smallest phones. */
@media (max-width: 420px) {
    :root { --gutter: 18px; }
}
@media (max-width: 360px) {
    :root { --gutter: 14px; }
}

/* ---- 1. Nav: drawer polish + hamburger/brand alignment. */
@media (max-width: 960px) {
    .nav__inner { gap: 14px; }

    /* Hamburger always the same size as the brand logo icon (46px). */
    .nav__toggle { width: 46px; height: 46px; }

    /* --- Before scroll on dark hero (menu closed):
         transparent button + cream lines matching the logo icon's bg colour. --- */
    .nav--on-dark:not(.nav--scrolled):not(.nav--open) .nav__toggle {
        background: transparent;
        border-color: rgba(255,246,229,.28);
        box-shadow: none;
    }
    .nav--on-dark:not(.nav--scrolled):not(.nav--open) .nav__toggle span,
    .nav--on-dark:not(.nav--scrolled):not(.nav--open) .nav__toggle span::before,
    .nav--on-dark:not(.nav--scrolled):not(.nav--open) .nav__toggle span::after {
        background: #FFF6E5;
    }

    /* --- After scroll OR on non-dark pages (menu closed):
         no bg pill — just dark ink lines on the transparent button. --- */
    .nav--scrolled:not(.nav--open) .nav__toggle,
    .nav:not(.nav--on-dark):not(.nav--open) .nav__toggle {
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .nav--scrolled:not(.nav--open) .nav__toggle span,
    .nav--scrolled:not(.nav--open) .nav__toggle span::before,
    .nav--scrolled:not(.nav--open) .nav__toggle span::after,
    .nav:not(.nav--on-dark):not(.nav--open) .nav__toggle span,
    .nav:not(.nav--on-dark):not(.nav--open) .nav__toggle span::before,
    .nav:not(.nav--on-dark):not(.nav--open) .nav__toggle span::after {
        background: var(--ink);
    }

    /* --- Open state: always orange regardless of scroll/page. --- */
    .nav--open .nav__toggle {
        position: relative; z-index: 110;
        background: var(--orange);
        border-color: var(--orange);
        box-shadow: 0 14px 28px -16px rgba(224,122,43,.75);
    }
    .nav--open .nav__toggle span::before,
    .nav--open .nav__toggle span::after {
        width: 20px;
        background: #FFF;
    }

    /* --- Open panel: dark immersive fullscreen. --- */
    .nav--open .nav__panel {
        inset: 0;
        top: 0;
        background:
            radial-gradient(560px 260px at 85% -15%, rgba(224,122,43,.2), transparent 70%),
            linear-gradient(160deg, #17120E 0%, #120F0B 100%);
        padding: 96px 24px max(40px, env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Menu items: staircase from top-left to bottom-right. --- */
    .nav--open .nav__menu {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        width: 100%;
        margin: 0;
    }
    .nav--open .nav__menu li { align-self: flex-start; }
    .nav--open .nav__menu li:nth-child(2) { margin-left: 6vw; }
    .nav--open .nav__menu li:nth-child(3) { margin-left: 12vw; }
    .nav--open .nav__menu li:nth-child(4) { margin-left: 18vw; }
    .nav--open .nav__menu li:nth-child(5) { margin-left: 24vw; }
    .nav--open .nav__link {
        width: clamp(170px, 55vw, 250px);
        padding: 18px 20px;
        font-size: clamp(24px, 6.8vw, 32px);
        font-family: var(--font-display);
        line-height: 1;
        color: #FFF6E5;
        border: 1px solid rgba(255,246,229,.14);
        border-radius: 0;
        background: rgba(255,246,229,.03);
        clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
        transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
        display: block;
    }
    .nav--open .nav__link:hover,
    .nav--open .nav__link:focus-visible,
    .nav--open .nav__link.is-active {
        transform: translateX(6px);
        border-color: var(--orange);
        background: rgba(224,122,43,.14);
        color: var(--orange-soft);
    }
    .nav--open .nav__link.is-active::after { display: none; }

    .nav--open .nav__cta {
        width: min(680px, 100%);
        margin: 16px auto 0;
        justify-content: center;
    }
}
@media (max-width: 420px) {
    .nav { padding: 14px 0; }
    .nav--scrolled { padding: 8px 0; }
    .nav__brand-logo { width: 40px; height: 40px; }
    .nav__brand-logo img { width: 26px; height: 26px; }
    /* Match hamburger to logo size (40px) on very small phones. */
    .nav__toggle { width: 40px; height: 40px; }
}

/* ---- 2. Lifecycle hero: show animated visual below text on mobile. */
@media (max-width: 900px) {
    /* Let the section grow to fit content + visual. */
    .lifecycle { height: auto; min-height: 100svh; }
    .lifecycle__inner { height: auto; }
    .lifecycle__stage-wrap { height: auto; }

    /* Active stage: in-flow so it sizes the section.
       Inactive stages stay absolutely positioned (hidden, no layout impact). */
    .lifecycle__stage.is-active {
        position: relative;
        inset: auto;
        height: auto;
    }
    .lifecycle__stage:not(.is-active) {
        position: absolute;
        inset: 0;
        height: 100%;
    }

    /* Un-hide the SVG visual and stack it below the text content. */
    .lifecycle__visual {
        display: grid;
        place-items: center;
        height: auto;
        padding-bottom: 12px;
    }
    .lifecycle__visual svg {
        max-height: 380px;
        width: 100%;
    }

    .lifecycle__controls { bottom: 24px; }
    .lifecycle__hint { font-size: 10px; letter-spacing: .2em; }
    .lifecycle__hint::before { width: 16px; }
    .lifecycle__btn { width: 42px; height: 42px; }
}
@media (max-width: 600px) {
    /* Reduce top padding a touch; bottom padding keeps space for fixed controls. */
    .lifecycle__stage { padding: 88px 0 90px; }
    .lifecycle__visual svg { max-height: 260px; }
    .lifecycle__meta { gap: 18px; flex-wrap: nowrap; }
    .lifecycle__meta strong { font-size: 16px; }
}
@media (max-width: 420px) {
    .lifecycle { min-height: 100svh; }
    .lifecycle__inner { grid-template-columns: 40px 1fr; }
    .lifecycle__dot { width: 30px; height: 30px; font-size: 10px; }
    .lifecycle__phase { font-size: 11px; margin-bottom: 16px; }
    .lifecycle__phase::before { width: 24px; }
    .lifecycle__title { font-size: clamp(32px, 10.5vw, 48px); }
    .lifecycle__copy { margin-top: 18px; font-size: 14.5px; }
    .lifecycle__meta { margin-top: 22px; font-size: 10px; gap: 12px; flex-wrap: nowrap; }
    .lifecycle__meta strong { font-size: 13px; }
    .lifecycle__visual svg { max-height: 200px; }
    .lifecycle__controls { padding: 0 var(--gutter); bottom: 18px; gap: 10px; }
    .lifecycle__hint { display: none; }
    .lifecycle__nav { margin-left: auto; }
}

/* ---- 3. Marquee: less air on phones. */
@media (max-width: 600px) {
    .marquee { padding: 16px 0; }
    .marquee__track { gap: 32px; animation-duration: 28s; }
    .marquee__item { font-size: clamp(18px, 5.6vw, 24px); gap: 12px; }
    .marquee__item span { font-size: 11px; letter-spacing: .15em; }
}

/* ---- 4. Splitdiag (about teaser): tidy on phones. */
@media (max-width: 600px) {
    .splitdiag__copy { padding-right: 0; }
    .splitdiag__visual { aspect-ratio: 4 / 3; max-width: 460px; margin: 0 auto; width: 100%; }
}
@media (max-width: 420px) {
    .splitdiag h2 { font-size: clamp(26px, 8vw, 36px); }
}

/* ---- 5. Orbit: keep mobile layout visually aligned with desktop.
         Satellites sit on the outer ring and core text sits slightly higher. */
@media (max-width: 900px) {
    .orbit__stage { max-width: min(88vw, 420px); }
    .orbit__core strong { transform: translateY(-4px); display: block; }
    .orbit__core span { margin-top: -2px; }
    .orbit__node {
        width: 88px; height: 88px;
        top: -44px;
        left: 166px;
    }
    .orbit__node b { font-size: 11.5px; }
}
@media (max-width: 600px) {
    .orbit__stage { max-width: min(92vw, 360px); }
    .orbit__node {
        width: 76px; height: 76px;
        top: -38px;
        left: 142px;
    }
    .orbit__node b { font-size: 10.5px; }
    .orbit__core strong { font-size: clamp(17px, 5.4vw, 24px); }
}
@media (max-width: 380px) {
    .orbit__stage { max-width: 320px; }
    .orbit__node {
        width: 64px; height: 64px;
        top: -32px;
        left: 128px;
    }
    .orbit__node b { font-size: 9.5px; }
}

/* ---- 6. Control room: 4 → 2 already at 820; 2 → 1 already at 480.
         Tighten cell paddings so numbers don't dominate the screen. */
@media (max-width: 600px) {
    .cr { padding: 24px 20px; }
    .cr__big { font-size: clamp(32px, 9vw, 44px); margin: 10px 0 8px; }
}

/* ---- 7. Service filmstrip (home, 3-up grid): cap card height on phones. */
@media (max-width: 580px) {
    .filmstrip__rail--grid { gap: 14px; }
    .filmcard { aspect-ratio: auto; padding: 22px; }
    .filmcard__visual { aspect-ratio: 4 / 3; flex: none; }
}
/* Horizontal filmstrip variant: tighter snap padding so cards align nicely. */
@media (max-width: 600px) {
    .filmstrip__rail {
        scroll-padding-inline: var(--gutter);
        padding-bottom: 22px;
    }
    .filmstrip__rail .filmcard { flex: 0 0 80vw; max-width: 320px; }
}

/* ---- 8. Skyline: shorter strip on phones; tighter count grid. */
@media (max-width: 600px) {
    .skyline { padding-top: clamp(56px, 9vw, 90px); }
    .skyline__sun { width: 220px; height: 220px; }
    .skyline__head { margin-bottom: 32px; text-align: left; }
    .skyline__strip { height: clamp(180px, 48vw, 240px); }
    .skyline__count > div { padding: 24px 16px; }
    .skyline__count strong { font-size: clamp(28px, 8vw, 38px); }
    .skyline__count span { font-size: 10px; letter-spacing: .18em; }
}

/* ---- 9. Spec / values list: avoid border padding-left jump on touch. */
@media (max-width: 600px) {
    .spec__row { padding: 22px 0; gap: 10px 14px; }
    .spec__row:hover { padding-left: 0; background: transparent; }
    .spec__row::before { left: -6px; }
    .spec__name { font-size: clamp(20px, 5.6vw, 26px); }
    .spec__desc { font-size: 14.5px; }
}

/* ---- 10. Compass: tighter card padding. */
@media (max-width: 600px) {
    .compass__card { padding: 26px 22px 24px; }
    .compass__title { font-size: clamp(20px, 5.8vw, 26px); }
    .compass__text { font-size: 15px; }
}

/* ---- 11. Beamlist: ● ── year (left)  [Tag] (right)  /  title below. */
@media (max-width: 600px) {
    .beamlist__rail { padding-left: 82px; }
    .beamlist__rail::before { left: 14px; }
    .beamlist__rail::after  { left: 10px; width: 18px; }

    .beam {
        display: flex;
        flex-wrap: wrap;           /* Row 1: year+tag | Row 2: title */
        align-items: center;
        padding: 5px 0 20px 20px; /* 5px top aligns text with dot; 20px left clears dot */
    }
    .beam:hover { padding-left: 20px; }  /* suppress desktop hover-indent */

    /* Connector and dot stay at top-left of the beam entry */
    .beam::before { left: -68px; width: 78px; top: 11px; }
    .beam::after  { left: 4px;   top: 6px;  width: 12px; height: 12px; }

    /* Row 1 left: year sits right next to the dot */
    .beam__year {
        order: 1;
        flex: 0 0 auto;
        font-size: 11px;
        letter-spacing: .18em;
    }
    /* Row 1 right: tag badge pushed to the far right */
    .beam__tag {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        font-size: 9px;
        padding: 3px 7px;
        position: static;         /* undo any previous absolute positioning */
        white-space: nowrap;
    }
    /* Row 2: title + description, full width */
    .beam__title {
        order: 3;
        flex: 0 0 100%;
        font-size: 18px;
        margin-top: 8px;
    }
    .beam__title small { font-size: 14px; margin-top: 6px; }
}

/* ---- 12. Floorplan + infoledger: trim head spacing. */
@media (max-width: 600px) {
    .floorplan__legend li { grid-template-columns: 20px 1fr; gap: 10px; padding: 12px 14px; }
    .floorplan__legend li span:last-child { grid-column: 2; font-size: 10px; }
    .ledger__row { padding: 18px 0; }
    .ledger__label { font-size: 17px; }
    .ledger__detail { font-size: 14px; }
    .ledger__amt { font-size: 18px; margin-top: 4px; }
}

/* ---- 13. CTA-band: comfortable padding + center align. */
@media (max-width: 600px) {
    .cta-band { padding: 32px 24px; gap: 24px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
    .cta-band h2 { font-size: clamp(26px, 7vw, 36px); }
    .cta-band p { font-size: 15px; }
    .cta-band__actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .cta-band__actions .btn { width: 100%; justify-content: center; }
    .cta-band-section { padding-bottom: clamp(48px, 8vw, 80px); }
}

/* ---- 14. Forms: bigger fields, no clip-path corners that crop labels. */
@media (max-width: 600px) {
    .form__field input,
    .form__field textarea,
    .form__field select {
        font-size: 16px; padding: 14px 14px;
        clip-path: none; border-radius: 4px;
    }
    .form__field textarea { min-height: 130px; }
    .form__submit { width: 100%; justify-content: center; }
    .coords__form-wrap { padding: 24px 20px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
}

/* ---- 15. Coords map: usable touch target + readout. */
@media (max-width: 600px) {
    .coords__map { padding: 12px; aspect-ratio: auto; }
    .coords__map-frame { height: 320px; }
    .coords__locate-btn { top: 8px; left: 8px; padding: 6px 8px; }
    .coords__locate-btn svg { width: 16px; height: 16px; }
    .coords__readout { font-size: 10px; letter-spacing: .18em; gap: 6px 12px; margin-top: 12px; }
    .coords__readout-link { padding: 10px 8px; }
}
@media (max-width: 420px) {
    .coords__readout { grid-template-columns: 1fr; }
    .coords__readout-actions { gap: 8px; }
}

/* ---- 16. Scout wizard: snug widget on phones; full-width buttons. */
@media (max-width: 600px) {
    .scout__widget { padding: 24px 18px 22px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
    .scout__opt { padding: 16px 14px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
    .scout__opt-name { font-size: 14.5px; }
    .scout__opt-desc { font-size: 11.5px; }
    .scout__foot { flex-wrap: wrap; gap: 10px; padding-top: 18px; }
    .scout__foot .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
    .scout__btn-back { flex: 0 0 auto; }
    .scout__field input,
    .scout__field textarea { font-size: 16px; }
    .scout__method-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scout__method-btn {
        min-height: 44px;
        padding: 10px 8px;
        font-size: 10.5px;
        letter-spacing: .1em;
    }
    .scout__confirm-row { flex-wrap: wrap; gap: 4px 12px; }
    .scout__confirm-actions .btn { width: 100%; justify-content: center; }
    /* Hide Continue on mobile — option selection auto-advances. */
    .scout__btn-next { display: none; }
}
@media (max-width: 400px) {
    .scout__method-btn { font-size: 10px; padding: 8px 12px; letter-spacing: .12em; }
}

/* ---- 17. Stats grid: 2 cols at 760 → 1 col at narrow phones. */
@media (max-width: 420px) {
    .stats { grid-template-columns: 1fr; gap: 22px; padding: 40px 0; }
}

/* ---- 18. Bento: trim feature padding on phones. */
@media (max-width: 600px) {
    .bento { gap: 14px; }
    .bento__feature { padding: 28px 22px; }
}

/* ---- 19. Stacktabs: comfy expand area, no horizontal scroll. */
@media (max-width: 600px) {
    .stacktab { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
    .stacktab__head { padding: 18px 16px; gap: 12px; }
    .stacktab__num { font-size: 10px; letter-spacing: .18em; }
    .stacktab__title { font-size: 17px; }
    .stacktab__plus { width: 34px; height: 34px; font-size: 20px; }
    .stacktab__inner { padding: 14px 16px 22px; gap: 12px; }
    .stacktab__inner p { font-size: 14.5px; }
}

/* ---- 20. Honey hex grid: single column on phones (≤600px). */
@media (max-width: 600px) {
    .honey__grid { grid-template-columns: 1fr; }
    .honey__cell { aspect-ratio: auto; min-height: 140px; }
}
@media (max-width: 380px) {
    .honey__cell { min-height: 120px; }
}

/* ---- 20b. Arcflow: restore animated arc on mobile, scaled to fit. */
@media (max-width: 760px) {
    .arcflow__stage {
        aspect-ratio: 5 / 3;
        overflow: visible;      /* labels on bottom stops allowed to breathe */
    }
    .arcflow__stops {
        position: relative;
        height: 100%;
        display: block;
        padding: 0;
    }
    .arcflow__stops::before { display: none; }
    .arcstop {
        position: absolute;
        transform: translate(-50%, -50%);
        width: 68px;
        text-align: center;
        display: block;
        padding: 0;
        gap: 0;
    }
    .arcstop__dot {
        width: 40px;
        height: 40px;
        font-size: 14px;
        margin: 0 auto 8px;
        flex-shrink: unset;
    }
    .arcstop b    { display: block; font-size: 11px; }
    .arcstop span { display: none; }
    .arcflow__svg { display: block; }
    /*
     * 01/05 pushed to the arc ends (11 %/89 %).
     * Wider gap around the peak (03): outer gaps ≈ 15 %, inner gaps ≈ 24 %.
     * Y values derived from the bezier path so dots sit on the drawn curve.
     */
    .arcstop:nth-child(1) { left: 11%; top: 71%; }
    .arcstop:nth-child(2) { left: 26%; top: 32%; }
    .arcstop:nth-child(3) { left: 50%; top: 13%; }
    .arcstop:nth-child(4) { left: 74%; top: 32%; }
    .arcstop:nth-child(5) { left: 89%; top: 71%; }
}

/* ---- 21. Dhero (sub-page hero): tighter padding + safer visual size. */
@media (max-width: 900px) {
    .dhero { padding: clamp(120px, 18vw, 160px) 0 clamp(48px, 7vw, 80px); }
    .dhero__visual { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 600px) {
    .dhero__meta { gap: 18px; }
    .dhero__meta strong { font-size: 18px; }
    .dboard { padding: 20px; }
    .dboard__label, .dboard__fig { font-size: 9px; letter-spacing: .22em; }
}
@media (max-width: 420px) {
    .dhero { padding-top: 110px; }
    .dhero h1 { font-size: clamp(30px, 9.5vw, 44px); }
    .dhero__visual { max-width: 320px; }
}

/* ---- 22. Page-hero: prevent the orange glow from causing overflow. */
.page-hero, .dhero, .splitdiag, .lifecycle, .skyline, .honey { overflow: hidden; }
@media (max-width: 600px) {
    .page-hero { padding: clamp(120px, 18vw, 170px) 0 clamp(40px, 7vw, 70px); }
    .page-hero::after { width: 320px; height: 320px; }
}

/* ---- 23. Section header: tighten margin; left-align centered headers to match About Peak Essence. */
@media (max-width: 600px) {
    .section-header { margin-bottom: 32px; }
    .section-header p { margin-top: 14px; }
    /* Orbit and other centered headers → left on mobile. */
    .section-header--center { text-align: left; margin-left: 0; margin-right: 0; }
    .section-header--center .eyebrow { justify-content: flex-start; }
    /* Filmstrip head: desktop is flex-row (h2 left, p right); mobile stacks to column. */
    .filmstrip__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
    .filmstrip__head h2 { max-width: none; }
}

/* ---- 24. Filmpair / framepair: stack visually on phones. */
@media (max-width: 600px) {
    .framepair__grid { gap: 14px; }
    .frame { padding: 18px; }
}

/* ---- 25. Project gallery captions: keep readable on small tiles. */
@media (max-width: 600px) {
    .proj__caption { left: 16px; right: 16px; bottom: 16px; opacity: 1; transform: none; }
    .proj h4 { font-size: 17px; }
}

/* ---- 26. Trade list: comfy spacing on tiny phones. */
@media (max-width: 420px) {
    .trade { padding: 20px; gap: 14px; }
    .trade__bullet { width: 36px; height: 36px; font-size: 14px; }
}

/* ---- 27. Footer: compact, premium mobile layout. */
@media (max-width: 600px) {
    .footer { padding: 40px 0 14px; }
    .footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 20px;
        padding-bottom: 18px;
    }
    .footer__brand {
        grid-column: 1 / -1;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255,246,229,.1);
    }
    .footer__brand h4 { font-size: 20px; }
    .footer__brand p {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.45;
        color: rgba(255,246,229,.42);
        max-width: none;
    }
    .footer h5 {
        margin-bottom: 8px;
        letter-spacing: .22em;
        font-size: 16px;
        color: var(--orange);
        opacity: .75;
    }
    .footer ul { gap: 5px; }
    .footer ul a,
    .footer__contact li { font-size: 15px; line-height: 1.35; }
    /* Contact: location ← and email → on a single full-width row. */
    .footer__grid > div:nth-child(4) { grid-column: 1 / -1; }
    .footer__contact { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
    .footer__contact li,
    .footer__contact li a { font-size: 15px; white-space: nowrap; }
    .footer__bottom {
        padding-top: 12px;
        font-size: 9.5px;
        letter-spacing: .07em;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4px 14px;
        text-align: center;
        border-top: 1px solid rgba(255,246,229,.07);
    }
}
@media (max-width: 420px) {
    /* On the very smallest screens keep 2 columns — it's more compact than 1 col. */
    .footer__grid { gap: 16px 14px; }
    .footer__brand { padding-bottom: 14px; }
}

/* ---- 28. Buttons: never break out of their parent on phones. */
@media (max-width: 480px) {
    .btn { max-width: 100%; }
}

/* ---- 29. Touch device polish (any width): kill desktop-only hover lifts
         that cause visual jump on tap, plus 44px minimum hit area. */
@media (hover: none) and (pointer: coarse) {
    .bcard:hover,
    .iso:hover,
    .trade:hover,
    .compass__card:hover,
    .stacktab:hover,
    .filmcard:hover,
    .honey__cell:hover,
    .frame:hover {
        transform: none;
    }
    .nav__link, .footer ul a, .nav__cta { min-height: 44px; }
    /* Make all interactive icons inside cards have proper hit area */
    a, button, [role="button"] { -webkit-tap-highlight-color: rgba(224,122,43,.15); }
}

/* ---- 30. Status pages (404/500/maintenance): keep readable on phones. */
@media (max-width: 600px) {
    .status-page { padding: 110px 20px 50px; }
    .status__code { font-size: clamp(96px, 28vw, 160px); }
    .status h1 { font-size: clamp(26px, 7vw, 36px); }
    .status p { font-size: 15.5px; }
    .status__actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .status__actions .btn { width: 100%; justify-content: center; }
}

/* ---- 31. Animations: no startup delay — play immediately, stagger preserved. */
@media (max-width: 960px) {
    /* Lifecycle SVG stagger: relative order preserved, base delay removed. */
    .lifecycle__stage.is-active .draw   { animation-delay: 0s; }
    .lifecycle__stage.is-active .draw-2 { animation-delay: .15s; }
    .lifecycle__stage.is-active .draw-3 { animation-delay: .3s; }
    .lifecycle__stage.is-active .draw-4 { animation-delay: .45s; }
    .lifecycle__stage.is-active .draw-5 { animation-delay: .6s; }
    .lifecycle__stage.is-active .draw-6 { animation-delay: .75s; }
    .lifecycle__stage.is-active .fade-in { animation-delay: 0s; }
    .lifecycle__stage.is-active .fade-2  { animation-delay: .35s; }
    .lifecycle__stage.is-active .fade-3  { animation-delay: .55s; }
    .lifecycle__stage.is-active .fade-4  { animation-delay: .75s; }
    .lifecycle__stage.is-active .pop-in { animation-delay: 0s; }
    .lifecycle__stage.is-active .pop-2  { animation-delay: .2s; }
    .lifecycle__stage.is-active .pop-3  { animation-delay: .4s; }
    .lifecycle__stage.is-active .pop-4  { animation-delay: .6s; }
    .lifecycle__stage.is-active .float-y { animation-delay: 0s; }
    /* anim-svg cycling: replace hold-heavy 14s cycle with fluid 6s no-hold ping. */
    .anim-svg.in .stroke-draw     { animation: drawPing 6s var(--ease-arch) 0s infinite; }
    .anim-svg.in .stroke-draw.d-2 { animation-delay: .15s; }
    .anim-svg.in .stroke-draw.d-3 { animation-delay: .30s; }
    .anim-svg.in .stroke-draw.d-4 { animation-delay: .45s; }
    .anim-svg.in .stroke-draw.d-5 { animation-delay: .60s; }
    .anim-svg.in .stroke-draw.d-6 { animation-delay: .75s; }
    .anim-svg.in .stroke-draw.d-7 { animation-delay: .90s; }
    .anim-svg.in .stroke-draw.d-8 { animation-delay: 1.05s; }
    .anim-svg.in .pop             { animation: popPing  6s var(--ease-arch) 0s infinite; }
    .anim-svg.in .pop.d-2         { animation-delay: .40s; }
    .anim-svg.in .pop.d-3         { animation-delay: .55s; }
    .anim-svg.in .pop.d-4         { animation-delay: .70s; }
    .anim-svg.in .pop.d-5         { animation-delay: .85s; }
    .anim-svg.in .pop.d-6         { animation-delay: 1.00s; }
    .anim-svg.in .rise            { animation: risePing 6s var(--ease-arch) 0s infinite; }
    .anim-svg.in .rise.d-2        { animation-delay: .20s; }
    .anim-svg.in .rise.d-3        { animation-delay: .40s; }
    .anim-svg.in .rise.d-4        { animation-delay: .60s; }
    .anim-svg.in .rise.d-5        { animation-delay: .80s; }
    .anim-svg.in .rise.d-6        { animation-delay: 1.00s; }
}

/* Keep small-screen battery profile from the prior pass. */
@media (max-width: 600px) {
    .anim-svg.in .stroke-draw,
    .anim-svg.in .pop,
    .anim-svg.in .rise { animation-duration: 12s; }
    .lifecycle::after { display: none; }
    .dhero::after { width: 320px; height: 320px; }
    .splitdiag::after { width: 300px; height: 300px; }
}

/* ---- 32. Scroll-progress: a touch thinner on phones. */
@media (max-width: 600px) {
    .scroll-progress { height: 2px; }
}

/* ---- 33. Selection avoidance for decorative orange brackets etc.
         Prevents touch-and-hold copying decoration. */
.dboard__corner, .coords__corner, .compass__card::before, .compass__card::after,
.bcard::before, .bcard::after { user-select: none; -webkit-user-select: none; }

/* ---- 34. Landscape phones: shorten heavy hero so users see content. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
    .lifecycle { min-height: 480px; height: auto; }
    .lifecycle__stage { padding: 80px 0 96px; }
    .dhero, .page-hero { padding-top: 92px; padding-bottom: 48px; }
}

/* ---- Mobile animation keyframes: continuous ping with no hold periods. */
@keyframes drawPing {
    0%, 100% { stroke-dashoffset: 1500; }
    50%       { stroke-dashoffset: 0; }
}
@keyframes popPing {
    0%, 100% { opacity: 0; transform: scale(.3); }
    50%       { opacity: 1; transform: scale(1); }
}
@keyframes risePing {
    0%, 100% { opacity: 0; transform: translateY(40px); }
    50%       { opacity: 1; transform: translateY(0); }
}