/* ══════════════════════════════════════════════════════
   NITRO FOX DIGITALS — responsive.css  (r4)
   NO clamp() — root font-size scales; layout uses rem
   ══════════════════════════════════════════════════════ */

/* ── XL desktop ── */
@media (min-width: 1681px) {
    html { font-size: 17px; }
}

/* ── Large desktop (1281–1680px) ── */
@media (max-width: 1440px) {
    .hero__h1  { font-size: 9.5rem; }   /* 192px */
    .hero__fox { width: 23rem; }
    .nf-header { padding: 0 3rem; }
    .hero__meta,
    .hero__type,
    .hero__bottom { padding-left: 3rem; padding-right: 3rem; }
    .hero__grid-lines { padding: 0 3rem; }
}

/* ── Medium desktop ── */
@media (max-width: 1280px) {
    html { font-size: 15px; }
    .hero__h1  { font-size: 8.5rem; }
    .hero__fox { width: 21rem; }
    .nf-nav__list { gap: 1.75rem; }
    .hero__bottom {
        grid-template-columns: 1fr 1.2fr 1fr;
        gap: 1.125rem;
    }
}

/* ── Tablet-desktop transition ── */
@media (max-width: 1100px) {
    html { font-size: 14px; }

    .nf-nav    { display: none; }
    .cta-wrap  { display: none; }
    .nf-burger { display: flex; }

    .nf-header {
        height: 4.125rem;
        padding: 0 2rem;
    }
    .nf-header__inner {
        grid-template-columns: auto 1fr;
        gap: 1rem;
    }

    .hero { padding-top: 5rem; }

    .hero__h1  { font-size: 7.5rem; }
    .hero__fox { width: 18rem; right: 1rem; }

    .hero__meta,
    .hero__type,
    .hero__bottom { padding-left: 2rem; padding-right: 2rem; }
    .hero__grid-lines { padding: 0 2rem; }

    .hero__bottom {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .glass-card--about    { grid-column: 1 / 2; }
    .glass-card--services { grid-column: 2 / 3; }
    .glass-card--connect  { grid-column: 1 / -1; }
    .glass-card--connect .soc-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Tablet ── */
@media (max-width: 820px) {
    html { font-size: 13.5px; }

    .hero__meta      { font-size: 0.6875rem; gap: 0.75rem 1rem; margin-bottom: 1.5rem; }
    .hero__meta-sep  { display: none; }
    .hero__meta-item:nth-child(n+5) { display: none; }

    .hero__h1  { font-size: 5.5rem; }
    .hero__fox {
        width: 13rem;
        right: 1rem;
        top: 22%;
    }
    /* On tablet, fox sits statically (no yPercent centering needed) */
    .hero__fox {
        /* JS still animates; override final state to top-anchored */
    }

    .hero__bottom {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
    .glass-card--about,
    .glass-card--services,
    .glass-card--connect { grid-column: 1 / -1; }
    .glass-card--connect .soc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile ── */
@media (max-width: 640px) {
    html { font-size: 13px; }

    .nf-header {
        height: 3.75rem;
        padding: 0 1.5rem;
    }
    .nf-logo__img { height: 1.375rem; }

    .hero { padding-top: 4.5rem; }
    .hero__meta,
    .hero__type,
    .hero__bottom { padding-left: 1.5rem; padding-right: 1.5rem; }
    .hero__grid-lines { padding: 0 1.5rem; }

    .hero__meta {
        margin-bottom: 1.125rem;
        font-size: 0.625rem;
        gap: 0.5rem 0.75rem;
    }
    .hero__meta-item:nth-child(n+3) { display: none; }

    .hero__h1 {
        font-size: 4.25rem;
        line-height: 0.9;
    }
    .hero__fox {
        width: 9.5rem;
        right: 0.5rem;
        top: 16%;
    }

    .glass-card { padding: 1rem; border-radius: 1.125rem; }
    .glass-card__text { font-size: 0.8125rem; }
    .stat__num { font-size: 1.5rem; }
    .stat__label { font-size: 0.625rem; }
    .stat-row { gap: 0.5rem; }

    .svc-row { padding: 0.6875rem 0.25rem; grid-template-columns: 1.375rem 1fr 1.25rem; gap: 0.75rem; }
    .svc-row__name { font-size: 0.8125rem; }
    .svc-row__sub  { font-size: 0.625rem; }

    .soc-tile { grid-template-columns: 2rem 1fr auto; gap: 0.5rem; padding: 0.625rem 0.75rem; }
    .soc-tile__icon   { width: 2rem; height: 2rem; }
    .soc-tile__name   { font-size: 0.78125rem; }
    .soc-tile__handle { font-size: 0.59375rem; }

    .orbit-cta { width: 6.5rem; height: 6.5rem; }
    .orbit-cta__core { width: 3rem; height: 3rem; }

    .nf-mobile__inner { padding: 4.75rem 1.5rem 1.5rem; }
    .nf-mobile__name { font-size: 2.75rem; }
}

/* ── Small phones ── */
@media (max-width: 400px) {
    html { font-size: 12px; }

    .hero__h1  { font-size: 3.5rem; }
    .hero__fox { width: 8rem; }

    .glass-card--connect .soc-grid { grid-template-columns: 1fr; }
    .stat-row { grid-template-columns: 1fr 1fr; row-gap: 0.875rem; }
    .stat:nth-child(3) { grid-column: 1 / -1; }
}

/* ── Manifesto responsive ── */
@media (max-width: 1440px) {
    .mf__text,
    .mf__half  { font-size: 7.5rem; }
    .mf__deck  { height: 22rem; }
}
@media (max-width: 1280px) {
    .mf__text,
    .mf__half  { font-size: 6.5rem; }
    .mf__deck  { height: 20rem; }
}
@media (max-width: 1100px) {
    .mf__text,
    .mf__half  { font-size: 5.5rem; }
    .mf__deck  { height: 17rem; }
    .mf__stage { padding: 5rem 2rem 4.5rem; }
    .mf__hud   { inset: 1.25rem 1.5rem; }
    .mf__prelude { top: 4rem; }
    .mf__progress { bottom: 3rem; }
}
@media (max-width: 820px) {
    .mf__text,
    .mf__half  { font-size: 3.75rem; }
    .mf__deck  { height: 14rem; }
    .mf__corner { width: 1.25rem; height: 1.25rem; }
    .mf__corner::before, .mf__corner::after { background: var(--primary); }
    .mf__corner--tl::before, .mf__corner--tr::before,
    .mf__corner--bl::before, .mf__corner--br::before { width: 0.875rem; }
    .mf__corner--tl::after, .mf__corner--tr::after,
    .mf__corner--bl::after, .mf__corner--br::after { height: 0.875rem; }
    .mf__hud-tag--bl, .mf__hud-tag--br { display: none; } /* declutter */
    .mf__progress { width: 85vw; }
}
@media (max-width: 640px) {
    .mf__text,
    .mf__half  { font-size: 2.75rem; letter-spacing: -0.025em; }
    .mf__deck  { height: 11rem; }
    .mf__stage { padding: 4rem 1.25rem 3.5rem; }
    .mf__hud   { inset: 1rem 1rem; font-size: 0.59375rem; }
    .mf__prelude { top: 3.25rem; font-size: 0.59375rem; }
    .mf__prelude-line { width: 1.5rem; }
    .mf__progress-labels { font-size: 0.5625rem; }
}
@media (max-width: 400px) {
    .mf__text,
    .mf__half  { font-size: 2.125rem; }
    .mf__deck  { height: 9rem; }
}

/* ══════════════════════════════════════════════════════
   MANIFESTO — Mobile swipe-carousel mode (≤767px)
   Same HTML as desktop. CSS-only behavior swap via .is-mobile-swipe
   added by JS. Section stays 100vh. User swipes left/right between
   statements. Tear/crumple animations still play. No scroll pin.
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .manifesto.is-mobile-swipe {
        height: 100vh;
        min-height: 100vh;
        padding: 0;                                /* stage handles its own padding */
        overflow: hidden;                          /* prevent horizontal scroll leak */
        touch-action: pan-y;                       /* allow vertical scroll past section */
    }

    .is-mobile-swipe .mf__stage {
        padding: 5.5rem 1rem 5.5rem;
        justify-content: center;
    }

    /* Deck: becomes a swipe arena. Statements stack on top of each other
       (same as desktop). Only .is-active is visible. */
    .is-mobile-swipe .mf__deck {
        position: relative;
        width: 100%;
        height: 16rem;                             /* enough for 3 lines of ~2.75rem */
        max-width: 100%;
        overflow: visible;                         /* let corners bleed out */
        cursor: grab;
        -webkit-user-select: none;
        user-select: none;
    }
    .is-mobile-swipe .mf__deck:active { cursor: grabbing; }

    .is-mobile-swipe .mf__statement {
        position: absolute;
        inset: 0;
        padding: 0 0.5rem;
    }

    .is-mobile-swipe .mf__text {
        font-size: 2.75rem;
        letter-spacing: -0.025em;
        padding: 0 0.5rem;
    }

    /* HUD: simplified. Top-left counter kept. Status dot kept. Others hidden. */
    .is-mobile-swipe .mf__hud { inset: 1.125rem 1.25rem; font-size: 0.56rem; }
    .is-mobile-swipe .mf__hud-tag--bl,
    .is-mobile-swipe .mf__hud-tag--br { display: none; }
    .is-mobile-swipe .mf__hud-tag--tr { font-size: 0.56rem; }

    /* Prelude: keep but move tighter to HUD */
    .is-mobile-swipe .mf__prelude {
        top: 3.5rem;
        font-size: 0.56rem;
        letter-spacing: 0.2em;
    }
    .is-mobile-swipe .mf__prelude-line { width: 1.5rem; }

    /* Progress bar: hide the line/track, show the dots below instead */
    .is-mobile-swipe .mf__progress {
        bottom: 5rem;
        width: auto;
        padding: 0;
        background: none;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        gap: 0.75rem;
        align-items: center;
    }
    .is-mobile-swipe .mf__progress-track   { display: none; }
    .is-mobile-swipe .mf__progress-labels  { display: none; }

    /* ── Dots navigation (injected by JS) ── */
    .is-mobile-swipe .mf__dots {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        align-items: center;
    }
    .is-mobile-swipe .mf__dot {
        appearance: none;
        -webkit-appearance: none;
        width: 0.5rem;
        height: 0.5rem;
        padding: 0;
        border: 1px solid rgba(253,240,232,0.25);
        background: transparent;
        border-radius: 999px;
        cursor: pointer;
        transition: width 0.35s var(--ease), background 0.3s, border-color 0.3s;
    }
    .is-mobile-swipe .mf__dot.is-done {
        background: rgba(232,80,10,0.35);
        border-color: rgba(232,80,10,0.4);
    }
    .is-mobile-swipe .mf__dot.is-current {
        width: 1.5rem;
        background: var(--primary);
        border-color: var(--primary);
        box-shadow: 0 0 10px rgba(232,80,10,0.6);
    }

    /* Swipe hint (subtle): pulse arrow under first statement only, hides after swipe */
    .is-mobile-swipe .mf__deck::after {
        content: 'SWIPE';
        position: absolute;
        bottom: -2.5rem;
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--f-mono);
        font-size: 0.5rem;
        letter-spacing: 0.3em;
        color: var(--text-muted);
        opacity: 0.6;
        animation: mf-swipe-hint 2.2s ease-in-out infinite;
        pointer-events: none;
    }
    @keyframes mf-swipe-hint {
        0%, 100% { transform: translateX(-50%);       opacity: 0.6; }
        50%      { transform: translateX(calc(-50% + 6px)); opacity: 1; }
    }

    /* GPU-heavy layers softened */
    .is-mobile-swipe .mf__scanlines { opacity: 0.4; }
    .is-mobile-swipe .mf__grain     { animation: none; opacity: 0.04; }
    .is-mobile-swipe .mf__vignette  { opacity: 0.7; }

    /* Tiny phones */
    @media (max-width: 400px) {
        .is-mobile-swipe .mf__deck { height: 13rem; }
        .is-mobile-swipe .mf__text { font-size: 2.125rem; }
        .is-mobile-swipe .mf__stage { padding: 5rem 0.75rem 5.5rem; }
    }
}

/* ══════════════════════════════════════════════════════
   WORK — tablet/mobile
   Track switches to vertical stack, pin disabled by JS (class toggle)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1440px) {
    .work__frame { width: 72rem; }
    .work__frame-visual { width: 34rem; }       /* aspect-ratio: 3/2 inherits from base */
    .work__frame-name { font-size: 4.5rem; }
}
@media (max-width: 1280px) {
    .work__head { padding: 0 3rem 4rem; }
    .work__title { font-size: 4.5rem; }
    .work__frame { width: 64rem; }
    .work__frame-visual { width: 30rem; }       /* aspect-ratio: 3/2 inherits */
    .work__frame-name { font-size: 4rem; }
    .work__frame-body { gap: 2rem; }
    .work__frame--end { width: 38rem; }
    .work__frame-end-title { font-size: 4.5rem; }
}

@media (max-width: 1100px) {
    .work__head { padding: 0 2rem 3.5rem; }
    .work__title { font-size: 4rem; }
    .work__frame { width: 56rem; padding: 1.75rem 2rem 2rem; }
    .work__frame-visual { width: 26rem; }       /* aspect-ratio: 3/2 inherits */
    .work__frame-name { font-size: 3.5rem; }
    .work__frame-outcome { font-size: 1rem; }
    .work__track { padding: 2.5rem 3rem; gap: 2rem; }
}

/* Tablet/mobile: disable horizontal scroll, vertical stack */
@media (max-width: 900px) {
    .work.is-mobile .work__pin {
        height: auto;
        overflow: visible;
    }
    .work.is-mobile .work__track {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem 2rem 3rem;
        transform: none !important;
        height: auto;
        will-change: auto;
    }
    .work.is-mobile .work__frame {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
    }
    .work.is-mobile .work__hud,
    .work.is-mobile .work__progress {
        display: none;
    }
    .work.is-mobile .work__frame-body {
        flex-direction: column;
        gap: 1.75rem;
        align-items: stretch;
    }
    .work.is-mobile .work__frame-visual {
        width: 100%;             /* full width on mobile */
        order: -1;                /* visual on top */
        /* aspect-ratio: 3/2 inherits from base — perfect with full-width source images */
    }
    .work.is-mobile .work__frame-name {
        font-size: 3rem;
    }
    .work.is-mobile .work__frame-outcome {
        font-size: 0.9375rem;
    }
    .work.is-mobile .work__head { padding: 2rem 1.75rem 2.5rem; }
    .work.is-mobile .work__title { font-size: 3.25rem; }
    .work.is-mobile .work__frame--end {
        width: 100%;
        min-height: 22rem;
    }
    .work.is-mobile .work__frame-end-title { font-size: 3.25rem; }
}

@media (max-width: 640px) {
    .work.is-mobile .work__head { padding: 1.5rem 1.25rem 2rem; }
    .work.is-mobile .work__title { font-size: 2.5rem; }
    .work.is-mobile .work__track { padding: 1.5rem 1.25rem 2.5rem; gap: 1.25rem; }
    .work.is-mobile .work__frame { padding: 1.25rem 1.25rem 1.5rem; border-radius: 1.25rem; }
    .work.is-mobile .work__frame-name { font-size: 2.25rem; }
    .work.is-mobile .work__frame-outcome { font-size: 0.875rem; }
    /* visual aspect-ratio inherits from base — no fixed height */
    .work.is-mobile .work__frame-end-title { font-size: 2.75rem; }
}

/* ══════════════════════════════════════════════════════
   MANIFESTO MOBILE — 100vh → auto
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .manifesto.is-mobile-swipe {
        height: auto;
        min-height: 0;
    }
    .is-mobile-swipe .mf__stage {
        min-height: 30rem;
        padding: 4.5rem 1rem 4rem;
    }
}

/* ══════════════════════════════════════════════════════
   WORK HEAD — 2-col grid collapses
   ══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .work__head-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .work__head-visual {
        max-width: 34rem;
        order: 2;
    }
    .work__signal { max-height: 22rem; }
}
@media (max-width: 767px) {
    .work__head-visual { display: none; }
    .work__head-meta { padding-top: 1.25rem; gap: 1rem; }
    .work__meta-value { font-size: 0.875rem; }
    .work__meta-label { font-size: 0.56rem; }
}

/* ══════════════════════════════════════════════════════
   SERVICES — responsive
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .svc-spread__num { font-size: 5.5rem; }
    .svc-spread__name { font-size: 4rem; }
    .svc-spread__left { padding: 6rem 3rem 4rem 3.5rem; }
    .svc-spread__right { padding: 3rem 3rem 3rem 1.5rem; }
}

@media (max-width: 1100px) {
    .svc-spread { grid-template-columns: 1fr; }
    .svc-spread__left {
        padding: 5rem 2.5rem 3rem;
    }
    .svc-spread__right {
        padding: 2rem 2.5rem 5rem;
        order: 2;
    }
    .svc-spread__visual { max-width: 30rem; margin: 0 auto; }
    .svc-spread__num { font-size: 4.5rem; }
    .svc-spread__name { font-size: 3.5rem; }
    .svc-spread__wipe { transform: translateX(0); }
    .svc-spread.is-revealed .svc-spread__wipe { transform: translateX(110%); }
}

@media (max-width: 767px) {
    .services { padding-top: 4rem; }
    .services__nav { top: 1rem; }
    .services__nav-inner { gap: 0.75rem; padding: 0.5rem 0.5rem 0.5rem 0.75rem; }
    .services__nav-label,
    .services__nav-count { display: none; }
    .services__nav-item { padding: 0.25rem 0.5rem; font-size: 0.6875rem; }
    .services__nav-name { display: none; }

    .svc-spread { min-height: auto; }
    .svc-spread__left {
        padding: 3.5rem 1.25rem 2rem;
        gap: 1.25rem;
    }
    .svc-spread__right { padding: 1rem 1.25rem 3.5rem; }
    .svc-spread__num { font-size: 3.5rem; }
    .svc-spread__num-slash { font-size: 1rem; padding-bottom: 0.5rem; }
    .svc-spread__num-total { font-size: 0.75rem; padding-bottom: 0.75rem; }
    .svc-spread__name { font-size: 2.25rem; }
    .svc-spread__copy { font-size: 0.9375rem; }
    .svc-spread__deliver-list { grid-template-columns: 1fr; }
    .svc-spread__visual { max-width: 26rem; }

    /* Shrink visuals to stay readable on small screens */
    .svc-web__score { width: 3.5rem; height: 3.5rem; }
    .svc-web__score-num { font-size: 1.25rem; }
}


/* ══════════════════════════════════════════════════════
   OPERATIONS — responsive (real globe + service tabs)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .ops__inner { gap: 2rem; padding: 0 2.5rem; }
    .ops__title { font-size: 4.75rem; }
}

@media (max-width: 1100px) {
    .ops { padding: 5rem 0; }
    .ops__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .ops__globe-wrap {
        max-height: 50vh;
        max-width: 32rem;
        margin: 0 auto;
    }
    .ops__title { font-size: 4rem; }
}

@media (max-width: 767px) {
    .ops { padding: 4rem 0 4.5rem; min-height: auto; }
    .ops__inner {
        padding: 0 1.25rem;
        gap: 2rem;
    }
    .ops__globe-wrap { max-height: 22rem; }
    .ops__hud-corner { padding: 0.375rem; }
    .ops__hud-tag { font-size: 0.5rem; padding: 0.2rem 0.5rem; }
    .ops__title { font-size: 2.5rem; }
    .ops__sub { font-size: 0.95rem; }
    .ops__stats { grid-template-columns: repeat(2, 1fr); }
    .ops__stat { padding: 0.875rem 0.75rem; }
    .ops__stat-num { font-size: 1.625rem; }
    .ops__tab { padding: 0.75rem 1rem; gap: 0.75rem; }
    .ops__tab-name { font-size: 1rem; }
    .ops__detail { min-height: 16rem; }
    .ops__detail-list { grid-template-columns: 1fr; }
    .ops__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}



/* ══════════════════════════════════════════════════════
   PROCESS — 4-card grid responsive
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .proc__title { font-size: 4.5rem; }
    .proc__grid { gap: 1.25rem; padding: 0 2.5rem; }
    .proc__card { padding: 1.5rem 1.5rem; }
    .proc__card-name { font-size: 1.375rem; }
}

@media (max-width: 1100px) {
    .proc { padding: 7rem 0; }
    .proc__title { font-size: 3.5rem; }
    .proc__head { margin-bottom: 4rem; }
    /* 2 columns */
    .proc__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (max-width: 767px) {
    .proc { padding: 5rem 0; }
    .proc__head { padding: 0 1.25rem; margin-bottom: 3rem; }
    .proc__title { font-size: 2.5rem; }
    .proc__sub { font-size: 0.95rem; }
    /* 1 column */
    .proc__grid { grid-template-columns: 1fr; gap: 1.25rem; padding: 0 1.25rem; }
    .proc__card { padding: 1.25rem 1.25rem; }
    .proc__card-name { font-size: 1.25rem; }
    .proc__card-desc { font-size: 0.875rem; }
}

/* ══════════════════════════════════════════════════════
   FINAL CTA — marquee responsive
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .cta { padding: 6rem 0 5rem; }
    .cta__marquee-item { font-size: 7rem; }
    .cta__marquee--solid .cta__marquee-item { font-size: 8.5rem; }
    .cta__marquee-sep { font-size: 3rem; }
    .cta__marquee-sep--orange { font-size: 2.25rem; }
}

@media (max-width: 1100px) {
    .cta { padding: 5rem 0 4.5rem; }
    .cta__eyebrow { margin-bottom: 3rem; }
    .cta__marquees { gap: 0.5rem; }
    .cta__marquee-item { font-size: 5.5rem; }
    .cta__marquee--solid .cta__marquee-item { font-size: 7rem; }
    .cta__marquee-sep { font-size: 2.5rem; }
    .cta__marquee-sep--orange { font-size: 1.875rem; }
    .cta__action {
        margin-top: 3.5rem;
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    .cta__meta { gap: 2rem; justify-content: center; }
}

@media (max-width: 767px) {
    .cta { padding: 4rem 0 3.5rem; }
    .cta__eyebrow { margin-bottom: 2rem; font-size: 0.625rem; }
    .cta__marquee-item { font-size: 3.25rem; }
    .cta__marquee--solid .cta__marquee-item { font-size: 4rem; }
    .cta__marquee-sep { font-size: 1.5rem; }
    .cta__marquee-sep--orange { font-size: 1.25rem; }
    /* Faster animation on mobile so users don't wait long for content swap */
    .cta__marquee--ltr .cta__marquee-track { animation-duration: 24s; }
    .cta__marquee--rtl .cta__marquee-track { animation-duration: 28s; }
    .cta__action { margin-top: 2.5rem; padding: 0 1.25rem; gap: 1.5rem; }
    .cta__btn { padding: 0.875rem 1.5rem; font-size: 0.9375rem; }
    .cta__meta { gap: 1.25rem; }
    .cta__meta-value { font-size: 0.875rem; }
}



/* ══════════════════════════════════════════════════════
   FOOTER — responsive (r40)
   No wordmark/tagline — just columns + bottom band.
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .nf-footer__inner { padding: 0 2.5rem; }
    .nf-footer__cols { gap: 2.25rem; }
    .nf-footer__list--big li { font-size: 1.25rem; }
    .nf-footer__email { font-size: 1.25rem; }
    .nf-footer__mark { width: 30rem; height: 30rem; bottom: -8rem; right: -8rem; }
}

@media (max-width: 1100px) {
    .nf-footer { padding: 3.5rem 0 1.5rem; }
    .nf-footer__inner { padding: 0 2rem; }

    .nf-footer__live { margin-bottom: 2.5rem; }

    /* 2-column: Primary + Services row 1, Reach us + Tail us row 2 */
    .nf-footer__cols {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 2rem;
        padding-bottom: 2.5rem;
    }
    .nf-footer__list--big li { font-size: 1.125rem; }
    .nf-footer__list--svc li { font-size: 1rem; }

    .nf-footer__mark { width: 22rem; height: 22rem; bottom: -6rem; right: -6rem; }
}

@media (max-width: 767px) {
    .nf-footer { padding: 3rem 0 1.25rem; }
    .nf-footer__inner { padding: 0 1.5rem; }
    .nf-footer__live { font-size: 0.5625rem; gap: 0.4rem; padding: 0.35rem 0.625rem; margin-bottom: 2rem; }

    /* Single column on phone */
    .nf-footer__cols {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .nf-footer__col-title { margin-bottom: 1.1rem; padding-bottom: 0.6rem; }
    .nf-footer__list--big li { font-size: 1.05rem; }
    .nf-footer__email { font-size: 1.125rem; }

    .nf-footer__mark { width: 16rem; height: 16rem; bottom: -4rem; right: -4rem; }

    .nf-footer__bottom { font-size: 0.5625rem; gap: 1rem; }
}

/* ══════════════════════════════════════════════════════
   ABOUT — Q&A interview transcript responsive (r45)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .page-hero { padding: 7rem 2.5rem 4rem; }
    .page-hero--tall { padding: 7rem 2.5rem 5rem; }
    .page-hero__title { font-size: 6rem; }
    .page-hero__title--md { font-size: 5.5rem; }
    .qa-quote p { font-size: 2.5rem; }
}

@media (max-width: 1100px) {
    .page-hero { padding: 6rem 2rem 3rem; }
    .page-hero--tall { padding: 6rem 2rem 4rem; }
    .page-hero__title { font-size: 4.5rem; }
    .page-hero__title--md { font-size: 4.25rem; }
    .page-hero__sub { font-size: 1.0625rem; }
    .qa-transcript { padding: 2.5rem 2rem 4rem; }
    .qa-pair { margin-bottom: 3.5rem; }
    .qa-q__text { font-size: 0.875rem; }
    .qa-a { padding-left: 2.5rem; }
    .qa-a p { font-size: 1.125rem; line-height: 1.6; }
    .qa-quote { margin: 4rem 0; padding: 2.5rem 1rem; }
    .qa-quote p { font-size: 2rem; }
    .qa-end { padding: 3rem 2rem 6rem; }
}

@media (max-width: 767px) {
    .page-hero { padding: 4.5rem 1.25rem 2.5rem; }
    .page-hero--tall { padding: 4.5rem 1.25rem 3rem; }
    .page-hero__kicker { font-size: 0.625rem; margin-bottom: 1.75rem; }
    .page-hero__title { font-size: 2.875rem; }
    .page-hero__sub   { font-size: 0.9375rem; }

    .qa-transcript { padding: 1.5rem 1.25rem 3rem; max-width: none; }
    .qa-pair { margin-bottom: 2.75rem; }
    .qa-q { gap: 0.75rem; padding-bottom: 0.75rem; margin-bottom: 1.25rem; }
    .qa-q__mark { width: 1.5rem; height: 1.5rem; font-size: 0.6875rem; }
    .qa-q__text { font-size: 0.8125rem; }
    .qa-a { padding-left: 0; }
    .qa-a p { font-size: 1.0625rem; line-height: 1.55; }

    .qa-quote { margin: 3rem 0; padding: 2rem 0.5rem; }
    .qa-quote__mark { width: 1.75rem; height: 1.75rem; margin-bottom: 1rem; }
    .qa-quote p { font-size: 1.5rem; line-height: 1.15; }

    .qa-end { padding: 2.5rem 1.25rem 4rem; }
    .qa-end__mark { width: 1.5rem; height: 1.5rem; margin: 2rem 0 1.5rem; }
    .qa-end__signoff { font-size: 0.625rem; margin-bottom: 2rem; }
}

/* ══════════════════════════════════════════════════════
   ABOUT — Q&A frosted blocks + 2x2 glass card responsive (r47)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .qa-transcript { max-width: 60rem; }
    .qa-pair { padding: 2.25rem 2rem 2rem; }

    .qa-why { padding: 4.5rem 2.5rem 2.5rem; max-width: 80rem; }
    .qa-why__title { font-size: 3.5rem; }
    .qa-why__list { gap: 1.5rem; }
    .qa-why__row { padding: 2.25rem 2rem 2rem; }
    .qa-why__name { font-size: 1.5rem; }
}

@media (max-width: 1100px) {
    .qa-transcript { max-width: none; padding: 2.5rem 2rem 4rem; }
    .qa-pair { padding: 2rem 1.75rem 1.75rem; margin-bottom: 3rem; }

    .qa-why { padding: 4rem 2rem 2rem; margin-top: 3rem; }
    .qa-why__head { margin-bottom: 3rem; }
    .qa-why__title { font-size: 2.75rem; }
    /* Still 2x2 at tablet — cards reduce padding */
    .qa-why__list { gap: 1.25rem; }
    .qa-why__row { padding: 2rem 1.75rem 1.75rem; border-radius: 1.25rem; }
    .qa-why__icon { width: 3.25rem; height: 3.25rem; padding: 0.625rem; }
    .qa-why__name { font-size: 1.375rem; }
    .qa-why__desc { font-size: 0.9rem; }
}

@media (max-width: 767px) {
    .qa-transcript { padding: 1.5rem 1.25rem 3rem; }
    .qa-pair {
        padding: 1.75rem 1.25rem 1.5rem;
        border-radius: 0.875rem;
        margin-bottom: 2rem;
    }
    .qa-pair::before { left: 1rem; font-size: 0.5625rem; padding: 0 0.375rem; }

    .qa-why { padding: 3rem 1.25rem 1.5rem; }
    .qa-why__head { margin-bottom: 2.25rem; }
    .qa-why__kicker { font-size: 0.625rem; }
    .qa-why__title { font-size: 2.125rem; }
    /* 1 column on phone */
    .qa-why__list { grid-template-columns: 1fr; gap: 1.25rem; }
    .qa-why__row { padding: 1.75rem 1.5rem 1.5rem; border-radius: 1rem; }
    .qa-why__icon { width: 2.75rem; height: 2.75rem; padding: 0.5rem; margin-bottom: 1.25rem; }
    .qa-why__num { top: 1rem; right: 1rem; font-size: 0.5625rem; padding: 0.25rem 0.5rem; }
    .qa-why__name { font-size: 1.25rem; }
    .qa-why__desc { font-size: 0.875rem; }
}

/* ══════════════════════════════════════════════════════
   CONTACT — postal envelope responsive (r54)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .ct-letter {  padding: 2.5rem 2.5rem 4rem; }
    .ct-letter__paper {  padding: 3.5rem 3rem 2.5rem; }
}

@media (max-width: 1100px) {
    .ct-letter { padding: 2rem 2rem 4rem; }
    .ct-letter__paper { padding: 3rem 2.5rem 2.25rem; }
    .ct-letter__postmark { width: 5.5rem; height: 5.5rem; }
    .ct-letter__stamp-inner { width: 5rem; }
    .ct-letter__to { margin-top: 4.5rem; }
    .ct-letter__to-name { font-size: 1.25rem; }
    .ct-letter__sent { padding: 4rem 2.5rem 3rem; }
    .ct-letter__sent-title { font-size: 2.5rem; }
    .ct-reach { padding: 1.5rem 2rem 5rem; }
}

@media (max-width: 767px) {

    .ct-letter { padding: 1rem 1.25rem 3rem; }
    .ct-letter__paper { padding: 2rem 1.5rem 1.75rem; border-radius: 0.5rem; }

    /* Smaller postmark + stamp on mobile */
    .ct-letter__postmark { top: 1rem; left: 1rem; width: 4.25rem; height: 4.25rem; }
    .ct-letter__stamp { top: 1rem; right: 1rem; }
    .ct-letter__stamp-inner { width: 4rem; padding: 0.375rem; }
    .ct-letter__stamp-mark { width: 1.75rem; height: 1.75rem; }
    .ct-letter__stamp-top { font-size: 0.4375rem; }
    .ct-letter__stamp-value { font-size: 0.5rem; }
    .ct-letter__stamp-bottom { font-size: 0.375rem; }

    /* Stack the field label above the value on mobile */
    .ct-letter__field {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1rem 0;
    }
    .ct-letter__to { margin-top: 4.5rem; }
    .ct-letter__field-label { font-size: 0.625rem; }
    .ct-letter__to-name { font-size: 1.125rem; }
    .ct-letter__to-city { font-size: 0.75rem; }
    .ct-letter__from-row { gap: 0.5rem; }
    .ct-letter__field-sep { display: none; }
    .ct-letter__input { font-size: 1rem; min-width: 100%; }
    .ct-letter__subject .ct-letter__input { font-size: 1.0625rem; }

    .ct-letter__body { padding: 1.5rem 0 1.25rem; }
    .ct-letter__greeting { font-size: 1.0625rem; }
    .ct-letter__message { font-size: 0.9375rem; min-height: 8rem; }

    .ct-letter__footer { padding-top: 1rem; }
    .ct-letter__count { font-size: 0.625rem; }
    .ct-letter__send { padding: 0.75rem 1.5rem; font-size: 0.9375rem; }

    .ct-letter__sent { padding: 3rem 1.5rem 2.5rem; }
    .ct-letter__sent-mark { width: 3rem; height: 3rem; margin-bottom: 1.25rem; }
    .ct-letter__sent-title { font-size: 2rem; }
    .ct-letter__sent-copy { font-size: 0.9375rem; }

    .ct-reach { padding: 1rem 1.25rem 4rem; }
    .ct-reach__row { gap: 1.25rem; padding-top: 2rem; }
    .ct-reach__email { font-size: 0.9375rem; }
}

/* ══════════════════════════════════════════════════════
   WEB DESIGN — service page responsive (r58)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .wd-part__title { font-size: 3.25rem; }
    .wd-part__lede { font-size: 1.25rem; }
    .wd-process__title { font-size: 3.25rem; }
    .wd-process__list { gap: 1rem; }
    .wd-why__title { font-size: 3.5rem; }
    .wd-faq__title { font-size: 3rem; }
    .wd-end__title { font-size: 4rem; }
}

@media (max-width: 1100px) {
    .wd-marquee { padding: 2rem 0 4rem; }
    .wd-figure { width: 26rem; }

    .wd-toc { padding: 3rem 2rem 4rem; }
    .wd-toc__name { font-size: 1.25rem; }
    .wd-toc__link { gap: 1rem; padding: 1.25rem 0; }

    .wd-part { padding: 4.5rem 0; }
    .wd-part__head,
    .wd-part__body {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 2rem;
    }
    .wd-part__head { margin-bottom: 2.25rem; }
    .wd-part__title,
    .wd-part__lede,
    .wd-part__body > * {
        grid-column: 1;
    }
    .wd-part__title { font-size: 2.625rem; }
    .wd-part__lede { font-size: 1.125rem; }

    .wd-process { padding: 4.5rem 2rem; }
    .wd-process__title { font-size: 2.625rem; }
    .wd-process__list { grid-template-columns: 1fr 1fr; }

    .wd-why { padding: 4.5rem 2rem; }
    .wd-why__title { font-size: 2.875rem; }
    .wd-why__grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .wd-why__card { padding: 2rem 1.75rem; }

    .wd-faq { padding: 4.5rem 2rem; }
    .wd-faq__title { font-size: 2.5rem; }
    .wd-faq__q { grid-template-columns: 3rem 1fr 2rem; gap: 1rem; padding: 1.25rem 0.75rem; }
    .wd-faq__q-text { font-size: 1.0625rem; }
    .wd-faq__a { padding: 0 0.75rem 1.25rem 4.75rem; }

    .wd-end { padding: 4.5rem 0; }
    .wd-end__inner { padding: 0 2rem; }
    .wd-end__title { font-size: 3.5rem; }
}

@media (max-width: 767px) {
    /* Chapter open + chapterbar */
    .wd-open__chapterbar { flex-wrap: wrap; gap: 0.5rem; padding-bottom: 1rem; margin-bottom: 1.5rem; }
    .wd-open__chaptermark-num,
    .wd-open__chaptermark-meta { font-size: 0.5625rem; }

    /* 3 figures stack to 1 column on phone, taller-feeling cards */
    /* Marquee on phone: smaller cards, faster cycle */
    .wd-marquee { padding: 1.5rem 0 3rem; }
    .wd-marquee__track { gap: 1rem; }
    .wd-figure { width: 18rem; gap: 0.75rem; }
    .wd-figure__plate { border-radius: 0.625rem; }

    /* TOC */
    .wd-toc { padding: 2.5rem 1.25rem 3rem; }
    /* Drop the "Pt. 02" page number on phone — too cramped */
    .wd-toc__link {
        grid-template-columns: 2.25rem 1fr;
        gap: 0.75rem;
        padding: 1rem 0;
    }
    .wd-toc__link:hover { padding-left: 0.5rem; }
    .wd-toc__leader,
    .wd-toc__page { display: none; }
    .wd-toc__name { font-size: 1.0625rem; }
    .wd-toc__desc { font-size: 0.8125rem; }
    .wd-toc__num { font-size: 0.625rem; }

    /* Parts */
    .wd-part { padding: 3rem 0; }
    .wd-part__head,
    .wd-part__body { padding: 0 1.25rem; }
    .wd-part__num { font-size: 0.625rem; }
    .wd-part__title { font-size: 2rem; margin-bottom: 1rem; }
    .wd-part__lede { font-size: 1rem; }
    .wd-part__body p { font-size: 0.9375rem; }
    .wd-part__h3 { font-size: 1rem; margin-top: 2rem; margin-bottom: 1rem; }
    .wd-deliverables li { font-size: 0.875rem; padding: 0.75rem 0.875rem 0.75rem 1rem; }
    .wd-deliverables li:hover { padding-left: 1.25rem; }
    .wd-part__pairs { font-size: 0.6875rem; gap: 0.5rem; }
    .wd-stack-chip { font-size: 0.625rem; padding: 0.4rem 0.75rem; }

    /* Process */
    .wd-process { padding: 3rem 1.25rem; }
    .wd-process__head { margin-bottom: 2.5rem; }
    .wd-process__title { font-size: 2rem; }
    .wd-process__sub { font-size: 0.9375rem; }
    .wd-process__list { grid-template-columns: 1fr; gap: 0.875rem; }
    .wd-process__step { padding: 1.5rem 1.25rem; }
    .wd-process__name { font-size: 1.25rem; }
    .wd-process__desc { font-size: 0.875rem; }

    /* Why us */
    .wd-why { padding: 3rem 1.25rem; }
    .wd-why__head { margin-bottom: 2.5rem; }
    .wd-why__title { font-size: 2.125rem; }
    .wd-why__sub { font-size: 0.9375rem; }
    .wd-why__card { padding: 1.75rem 1.5rem; border-radius: 1rem; }
    .wd-why__name { font-size: 1.25rem; }
    .wd-why__desc { font-size: 0.875rem; }

    /* FAQ */
    .wd-faq { padding: 3rem 1.25rem; }
    .wd-faq__title { font-size: 1.875rem; }
    .wd-faq__q { grid-template-columns: 2.5rem 1fr 1.5rem; gap: 0.625rem; padding: 1rem 0.5rem; }
    .wd-faq__q-num { font-size: 0.5625rem; }
    .wd-faq__q-text { font-size: 0.9375rem; }
    .wd-faq__q-icon { font-size: 1.125rem; }
    .wd-faq__a { padding: 0 0.5rem 1rem 3.625rem; }
    .wd-faq__a p { font-size: 0.875rem; }

    /* End CTA */
    .wd-end { padding: 3rem 0; }
    .wd-end__inner { padding: 0 1.25rem; }
    .wd-end__title { font-size: 2.5rem; }
    .wd-end__sub { font-size: 0.9375rem; }
    .wd-end__row { flex-direction: column; gap: 0.75rem; }
}

/* ══════════════════════════════════════════════════════
   BRANDING — service page responsive (r64)
   Slide structure mirrors homepage work__frame:
   meta row + 2-col body (text-left + visual-right).
   Mobile (<1100px): pin disabled by JS, slides stack
   vertically with visual collapsing under text.
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .br-pin__head-title { font-size: 4.5rem; }
    .br-pin__slide { padding: 1.75rem 2rem 2rem; }
    .br-pin__slide-name { font-size: 4rem; }
    .br-pin__slide-visual { width: 28rem; height: 22rem; }
    .br-pin__slide-iconplate { width: 11rem; height: 11rem; padding: 2rem; }
    .br-process__title { font-size: 3.25rem; }
    .br-why__title { font-size: 3.5rem; }
    .br-faq__title { font-size: 3rem; }
    .br-end__title { font-size: 4rem; }
}

@media (max-width: 1100px) {
    .br-marquee { padding: 2rem 0 4rem; }
    .br-figure { width: 22rem; }

    /* Pin: disable on tablet — JS adds .is-mobile, slides become vertical stack */
    .br-pin { padding-top: 4rem; }
    .br-pin.is-mobile .br-pin__viewport {
        height: auto;
        overflow: visible;
    }
    .br-pin.is-mobile .br-pin__head { padding: 0 2rem 3rem; }
    .br-pin__head-title { font-size: 3.5rem; }
    .br-pin.is-mobile .br-pin__progress { display: none; }
    .br-pin.is-mobile .br-pin__track {
        position: relative;          /* override absolute positioning */
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 1.5rem;
        padding: 0 2rem 4rem;
        transform: none !important;
    }
    .br-pin.is-mobile .br-pin__slide {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 1.75rem 1.75rem 2rem;
    }
    /* Body collapses to vertical stack — text first, visual below */
    .br-pin.is-mobile .br-pin__slide-body {
        flex-direction: column;
        gap: 2rem;
        align-items: stretch;
    }
    .br-pin.is-mobile .br-pin__slide-visual {
        width: 100%;
        height: 18rem;
    }

    .br-process { padding: 6rem 2rem 4.5rem; }
    .br-process__title { font-size: 2.625rem; }
    .br-process__list { grid-template-columns: 1fr 1fr; }

    .br-why { padding: 4.5rem 2rem; }
    .br-why__title { font-size: 2.875rem; }
    .br-why__grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .br-why__card { padding: 2rem 1.75rem; }

    .br-faq { padding: 4.5rem 2rem; }
    .br-faq__title { font-size: 2.5rem; }
    .br-faq__q { grid-template-columns: 3rem 1fr 2rem; gap: 1rem; padding: 1.25rem 0.75rem; }
    .br-faq__q-text { font-size: 1.0625rem; }
    .br-faq__a { padding: 0 0.75rem 1.25rem 4.75rem; }

    .br-end { padding: 4.5rem 0; }
    .br-end__inner { padding: 0 2rem; }
    .br-end__title { font-size: 3.5rem; }
}

@media (max-width: 767px) {
    .br-open__chapterbar { flex-wrap: wrap; gap: 0.5rem; }
    .br-open__chaptermark-num,
    .br-open__chaptermark-meta { font-size: 0.5625rem; }

    /* Marquee phone sizing */
    .br-marquee { padding: 1.5rem 0 3rem; }
    .br-marquee__track { gap: 1rem; }
    .br-figure { width: 16rem; gap: 0.75rem; }
    .br-figure__plate { border-radius: 0.625rem; }

    .br-pin { padding-top: 3rem; }
    .br-pin.is-mobile .br-pin__head { padding: 0 1.25rem 2.5rem; }
    .br-pin.is-mobile .br-pin__head-title { font-size: 2.25rem; }
    .br-pin.is-mobile .br-pin__track { padding: 0 1.25rem 3rem; gap: 1.25rem; }
    .br-pin__slide { padding: 1.5rem 1.25rem 1.75rem; border-radius: 1.25rem; }
    .br-pin__slide-meta { margin-bottom: 1rem; padding-bottom: 0.875rem; }
    .br-pin__slide-name { font-size: 2.5rem; }
    .br-pin__slide-outcome { font-size: 0.9375rem; }
    .br-pin.is-mobile .br-pin__slide-body { gap: 1.5rem; }
    .br-pin.is-mobile .br-pin__slide-visual { height: 14rem; }
    .br-pin__slide-iconplate { width: 9rem; height: 9rem; padding: 1.5rem; }
    .br-pin__slide-deliverables li { font-size: 0.875rem; }

    .br-process { padding: 4.5rem 1.25rem 3rem; }
    .br-process__head { margin-bottom: 2.5rem; }
    .br-process__title { font-size: 2rem; }
    .br-process__sub { font-size: 0.9375rem; }
    .br-process__list { grid-template-columns: 1fr; gap: 0.875rem; }
    .br-process__step { padding: 1.5rem 1.25rem; }
    .br-process__name { font-size: 1.25rem; }
    .br-process__desc { font-size: 0.875rem; }

    .br-why { padding: 3rem 1.25rem; }
    .br-why__head { margin-bottom: 2.5rem; }
    .br-why__title { font-size: 2.125rem; }
    .br-why__sub { font-size: 0.9375rem; }
    .br-why__card { padding: 1.75rem 1.5rem; border-radius: 1rem; }
    .br-why__name { font-size: 1.25rem; }
    .br-why__desc { font-size: 0.875rem; }

    .br-faq { padding: 3rem 1.25rem; }
    .br-faq__title { font-size: 1.875rem; }
    .br-faq__q { grid-template-columns: 2.5rem 1fr 1.5rem; gap: 0.625rem; padding: 1rem 0.5rem; }
    .br-faq__q-num { font-size: 0.5625rem; }
    .br-faq__q-text { font-size: 0.9375rem; }
    .br-faq__q-icon { font-size: 1.125rem; }
    .br-faq__a { padding: 0 0.5rem 1rem 3.625rem; }
    .br-faq__a p { font-size: 0.875rem; }

    .br-end { padding: 3rem 0; }
    .br-end__inner { padding: 0 1.25rem; }
    .br-end__title { font-size: 2.5rem; }
    .br-end__sub { font-size: 0.9375rem; }
    .br-end__row { flex-direction: column; gap: 0.75rem; }
}


/* ══════════════════════════════════════════════════════
   DIGITAL MARKETING — service page responsive (r72)
   At ≤1100px: sticky-nav grid collapses; channel panels
   stack with compact accent sizing.
   At ≤900px: process loop diagram & steps stack vertically.
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .dm-open { padding: 8rem 2.5rem 3.5rem; }
    .dm-open__layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .dm-channels__title { font-size: 3.5rem; }
    .dm-dash__title { font-size: 3.25rem; }
    .dm-loop__title { font-size: 3.5rem; }
    .dm-why__title { font-size: 3.25rem; }
    .dm-end__title { font-size: 3.5rem; }
    .dm-channels__grid { grid-template-columns: 16rem 1fr; gap: 4rem; }
    .dm-channel__title { font-size: 4rem; }
    .dm-loop__diagram-wrap { gap: 3rem; }
}

@media (max-width: 1100px) {
    .dm-open { padding: 7rem 2rem 2.5rem; }
    .dm-open__chapterbar { margin-bottom: 2rem; padding-bottom: 1rem; }

    .dm-channels { padding: 4.5rem 2rem 5rem; }
    .dm-channels__head { margin-bottom: 3rem; }
    .dm-channels__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    /* Sticky nav becomes horizontal scroller at top of section on tablet */
    .dm-channels__nav {
        position: relative;
        top: auto;
    }
    .dm-channels__navlist {
        flex-direction: row;
        overflow-x: auto;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .dm-channels__navitem {
        flex-shrink: 0;
        padding: 0.875rem 1.125rem;
    }
    .dm-channels__nav-name { font-size: 1.125rem; }
    .dm-channels__panels { gap: 4rem; }
    .dm-channel__title { font-size: 3.25rem; }
    .dm-channel__list { grid-template-columns: 1fr; column-gap: 0; }

    .dm-dash { padding: 4.5rem 2rem 5rem; }
    .dm-dash__console { padding: 1.75rem; }
    .dm-dash__grid { grid-template-columns: repeat(2, 1fr); }
    .dm-dash__tile-num { font-size: 2.5rem; }
    .dm-dash__strip-bars { height: 6.5rem; gap: 0.875rem; }

    .dm-loop { padding: 4.5rem 2rem 5rem; }
    .dm-loop__diagram-wrap { grid-template-columns: 1fr; gap: 3.5rem; }

    .dm-why { padding: 4.5rem 2rem; }
    .dm-why__title { font-size: 2.625rem; }
    .dm-why__grid { grid-template-columns: 1fr; }
    .dm-why__card { padding: 2rem 1.75rem; }

    .dm-faq { padding: 4.5rem 2rem; }
    .dm-faq__title { font-size: 2.5rem; }
    .dm-faq__q { grid-template-columns: 3rem 1fr 2rem; gap: 1rem; padding: 1.25rem 0.75rem; }
    .dm-faq__q-text { font-size: 1.0625rem; }
    .dm-faq__a { padding: 0 0.75rem 0 4.75rem; }
    .dm-faq__item.is-open .dm-faq__a { padding-bottom: 1.25rem; }

    .dm-end__title { font-size: 3rem; }
}

@media (max-width: 767px) {
    .dm-open { padding: 6rem 1.25rem 2rem; }
    .dm-open__layout { gap: 1.5rem; }
    .dm-open__chart { aspect-ratio: 4 / 3; }
    .dm-open__chapterbar { flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
    .dm-open__chaptermark-num,
    .dm-open__chaptermark-meta { font-size: 0.5625rem; }

    .dm-channels { padding: 3rem 1.25rem 3.5rem; }
    .dm-channels__title { font-size: 2.5rem; }
    .dm-channels__sub { font-size: 1rem; }
    .dm-channels__panels { gap: 3rem; }
    .dm-channel__title { font-size: 2.5rem; }
    .dm-channel__lede { font-size: 1rem; }
    /* Hide all 5 channel accent visuals (SEO bar, performance chart, social icons,
       content cards, email envelopes) on mobile — they're decorative on this size
       and the channel copy alone reads cleanly without them. JS init for the
       interactive ones (SEO typewriter, Chart.js) is also skipped below 767px. */
    .dm-channel__accent { display: none; }

    /* Channel nav: at tablet (1100) it's a horizontal scroller — at this width
       that overflows the viewport, so flip to a vertical full-width stack.
       Each item gets full row, padding for tap-friendly height, no overflow. */
    .dm-channels__navlist {
        flex-direction: column;
        overflow-x: visible;
        gap: 0.375rem;
        padding-bottom: 0;
    }
    .dm-channels__navitem {
        width: 100%;
        padding: 0.875rem 1rem;
    }

    .dm-dash { padding: 3rem 1.25rem 3.5rem; }
    .dm-dash__title { font-size: 2.25rem; }
    .dm-dash__console { padding: 1.25rem; }
    .dm-dash__grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .dm-dash__tile-num { font-size: 2.25rem; }
    .dm-dash__strip { padding: 1.25rem 1rem; }
    .dm-dash__strip-bars { height: 5rem; gap: 0.625rem; }
    .dm-dash__bar em { font-size: 0.5625rem; }

    .dm-loop { padding: 3rem 1.25rem 3.5rem; }
    .dm-loop__title { font-size: 2.25rem; }
    .dm-loop__sub { font-size: 1rem; }
    .dm-loop__step { padding: 1.25rem 0; grid-template-columns: 2.5rem 1fr; column-gap: 1rem; }
    .dm-loop__step-name { font-size: 1.25rem; }
    .dm-loop__step-desc { font-size: 0.9375rem; }

    .dm-why { padding: 3rem 1.25rem; }
    .dm-why__head { margin-bottom: 2.5rem; }
    .dm-why__title { font-size: 2rem; }
    .dm-why__card { padding: 1.75rem 1.5rem; border-radius: 1rem; }
    .dm-why__name { font-size: 1.25rem; }
    .dm-why__desc { font-size: 0.875rem; }

    .dm-faq { padding: 3rem 1.25rem; }
    .dm-faq__title { font-size: 1.875rem; }
    .dm-faq__q { grid-template-columns: 2.5rem 1fr 1.5rem; gap: 0.625rem; padding: 1rem 0.5rem; }
    .dm-faq__q-num { font-size: 0.5625rem; }
    .dm-faq__q-text { font-size: 0.9375rem; }
    .dm-faq__q-icon { font-size: 1.125rem; }
    .dm-faq__a { padding: 0 0.5rem 0 3.625rem; }
    .dm-faq__a p { font-size: 0.875rem; }

    .dm-end { padding: 3rem 0; }
    .dm-end__inner { padding: 0 1.25rem; }
    .dm-end__title { font-size: 2.5rem; }
    .dm-end__sub { font-size: 0.9375rem; }
    .dm-end__row { flex-direction: column; gap: 0.75rem; }
}


/* ══════════════════════════════════════════════════════
   WEB3 (.w3-*) — Ch. 04 service page
   Mirrors .dm- breakpoints + same mobile conventions
   (vertical full-width nav, hidden accents below 767px).
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .w3-open { padding: 8rem 2.5rem 3.5rem; }
    .w3-open__layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .w3-disciplines__title { font-size: 3.5rem; }
    .w3-ledger__title { font-size: 3.25rem; }
    .w3-process__title { font-size: 3.25rem; }
    .w3-why__title { font-size: 3.25rem; }
    .w3-end__title { font-size: 3.5rem; }
    .w3-disciplines__grid { grid-template-columns: 16rem 1fr; gap: 4rem; }
    .w3-discipline__title { font-size: 4rem; }
    .w3-process__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
    .w3-open { padding: 7rem 2rem 2.5rem; }
    .w3-open__chapterbar { margin-bottom: 2rem; padding-bottom: 1rem; }
    .w3-open__net { aspect-ratio: 16 / 9; }

    .w3-disciplines { padding: 4.5rem 2rem 5rem; }
    .w3-disciplines__head { margin-bottom: 3rem; }
    .w3-disciplines__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    /* On tablet, sticky nav becomes a horizontal scroller at top of section */
    .w3-disciplines__nav {
        position: relative;
        top: auto;
    }
    .w3-disciplines__navlist {
        flex-direction: row;
        overflow-x: auto;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .w3-disciplines__navitem {
        flex-shrink: 0;
        padding: 0.875rem 1.125rem;
    }
    .w3-disciplines__nav-name { font-size: 1.125rem; }
    .w3-disciplines__panels { gap: 4rem; }
    .w3-discipline__title { font-size: 3.25rem; }
    .w3-discipline__list { grid-template-columns: 1fr; column-gap: 0; }

    .w3-ledger { padding: 4.5rem 2rem 5rem; }
    .w3-ledger__console { padding: 1.75rem; }
    .w3-ledger__grid { grid-template-columns: repeat(2, 1fr); }
    .w3-ledger__tile-num { font-size: 2.5rem; }
    .w3-ledger__feed-row {
        grid-template-columns: 6rem 9rem 1fr 5.5rem;
        gap: 1rem;
        font-size: 0.75rem;
    }

    .w3-process { padding: 4.5rem 2rem; }
    .w3-process__list { grid-template-columns: repeat(2, 1fr); }

    .w3-why { padding: 4.5rem 2rem; }
    .w3-why__grid { gap: 1rem; }
    .w3-why__card { padding: 2rem 1.75rem; }

    .w3-faq { padding: 4.5rem 2rem; }
    .w3-faq__title { font-size: 2.75rem; }

    .w3-end__title { font-size: 3rem; }
}

@media (max-width: 767px) {
    .w3-open { padding: 6rem 1.25rem 2rem; }
    .w3-open__layout { gap: 1.5rem; }
    .w3-open__net { aspect-ratio: 4 / 3; }
    .w3-open__chapterbar { flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
    .w3-open__chaptermark-num,
    .w3-open__chaptermark-meta { font-size: 0.5625rem; }

    .w3-disciplines { padding: 3rem 1.25rem 3.5rem; }
    .w3-disciplines__title { font-size: 2.5rem; }
    .w3-disciplines__sub { font-size: 1rem; }
    .w3-disciplines__panels { gap: 3rem; }
    .w3-discipline__title { font-size: 2.5rem; }
    .w3-discipline__lede { font-size: 1rem; }
    /* Hide all 5 discipline accent visuals (code preview, mint counter, TVL chart,
       wallet modal, signature row) on mobile — decorative on this size, the
       discipline copy alone reads cleanly without them. */
    .w3-discipline__accent { display: none; }

    /* Discipline nav: tablet horizontal scroller would overflow at phone widths.
       Same convention as .dm-channels__nav: full-width vertical stack on mobile. */
    .w3-disciplines__navlist {
        flex-direction: column;
        overflow-x: visible;
        gap: 0.375rem;
        padding-bottom: 0;
    }
    .w3-disciplines__navitem {
        width: 100%;
        padding: 0.875rem 1rem;
    }

    .w3-ledger { padding: 3rem 1.25rem 3.5rem; }
    .w3-ledger__title { font-size: 2.25rem; }
    .w3-ledger__console { padding: 1.25rem; }
    .w3-ledger__grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .w3-ledger__tile-num { font-size: 2.25rem; }
    .w3-ledger__feed { padding: 1.25rem 1rem; }
    /* Tx feed rows can't fit 4 cols on phone — collapse to 2 (status + hash on
       row 1, action + gas on row 2 implicitly via flex-wrap below). */
    .w3-ledger__feed-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "status hash gas" "action action action";
        gap: 0.5rem 0.75rem;
        font-size: 0.6875rem;
    }
    .w3-ledger__feed-status { grid-area: status; }
    .w3-ledger__feed-hash   { grid-area: hash; }
    .w3-ledger__feed-action { grid-area: action; font-size: 0.75rem; }
    .w3-ledger__feed-gas    { grid-area: gas; }

    .w3-process { padding: 3rem 1.25rem; }
    .w3-process__title { font-size: 2.25rem; }
    .w3-process__list { grid-template-columns: 1fr; gap: 0.875rem; }
    .w3-process__step { padding: 1.5rem 1.25rem; }

    .w3-why { padding: 3rem 1.25rem; }
    .w3-why__head { margin-bottom: 2.5rem; }
    .w3-why__title { font-size: 2rem; }
    .w3-why__grid { grid-template-columns: 1fr; }
    .w3-why__card { padding: 1.75rem 1.5rem; border-radius: 1rem; }
    .w3-why__name { font-size: 1.25rem; }
    .w3-why__desc { font-size: 0.875rem; }

    .w3-faq { padding: 3rem 1.25rem; }
    .w3-faq__title { font-size: 1.875rem; }
    .w3-faq__q { grid-template-columns: 2.5rem 1fr 1.5rem; gap: 0.625rem; padding: 1rem 0.5rem; }
    .w3-faq__q-num { font-size: 0.5625rem; }
    .w3-faq__q-text { font-size: 0.9375rem; }
    .w3-faq__q-icon { font-size: 1.125rem; }
    .w3-faq__a { padding: 0 0.5rem 0 3.625rem; }
    .w3-faq__a p { font-size: 0.875rem; }

    .w3-end { padding: 3rem 0; }
    .w3-end__inner { padding: 0 1.25rem; }
    .w3-end__title { font-size: 2.5rem; }
    .w3-end__sub { font-size: 0.9375rem; }
    .w3-end__row { flex-direction: column; gap: 0.75rem; }
}


/* ══════════════════════════════════════════════════════
   BPO (.bpo-*) — Ch. 05 service page
   Mirrors .w3- breakpoints + same mobile conventions
   (vertical full-width nav). Globe stage shrinks gracefully.
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .bpo-open { padding: 8rem 2.5rem 3.5rem; }
    .bpo-open__layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .bpo-globe__title { font-size: 3.5rem; }
    .bpo-disciplines__title { font-size: 3.5rem; }
    .bpo-ops__title { font-size: 3.25rem; }
    .bpo-process__title { font-size: 3.25rem; }
    .bpo-why__title { font-size: 3.25rem; }
    .bpo-end__title { font-size: 3.5rem; }
    .bpo-disciplines__grid { grid-template-columns: 16rem 1fr; gap: 4rem; }
    .bpo-discipline__title { font-size: 4rem; }
    .bpo-process__list { grid-template-columns: repeat(2, 1fr); }
    .bpo-globe__cities { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) {
    .bpo-open { padding: 7rem 2rem 2.5rem; }
    .bpo-open__chapterbar { margin-bottom: 2rem; padding-bottom: 1rem; }
    .bpo-open__sketch { aspect-ratio: 16 / 9; }

    /* Globe stage stays roughly square at tablet — gives globe room while
       cities list collapses to 2 cols. */
    .bpo-globe { padding: 4.5rem 1.5rem 4rem; }
    .bpo-globe__title { font-size: 2.875rem; }
    .bpo-globe__head { margin-bottom: 3rem; }
    .bpo-globe__stage { aspect-ratio: 4 / 3; border-radius: 1.25rem; }
    .bpo-globe__hud { padding: 0.75rem 0.875rem; min-width: 7.5rem; }
    .bpo-globe__hud-num { font-size: 1.375rem; }
    .bpo-globe__hud-val { font-size: 1rem; }
    .bpo-globe__cities {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 2rem;
    }

    .bpo-disciplines { padding: 4.5rem 2rem 5rem; }
    .bpo-disciplines__head { margin-bottom: 3rem; }
    .bpo-disciplines__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .bpo-disciplines__nav { position: relative; top: auto; }
    .bpo-disciplines__navlist {
        flex-direction: row;
        overflow-x: auto;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .bpo-disciplines__navitem { flex-shrink: 0; padding: 0.875rem 1.125rem; }
    .bpo-disciplines__nav-name { font-size: 1.125rem; }
    .bpo-disciplines__panels { gap: 4rem; }
    .bpo-discipline__title { font-size: 3.25rem; }
    .bpo-discipline__list { grid-template-columns: 1fr; column-gap: 0; }

    .bpo-ops { padding: 4.5rem 2rem 5rem; }
    .bpo-ops__console { padding: 1.75rem; }
    .bpo-ops__grid { grid-template-columns: repeat(2, 1fr); }
    .bpo-ops__tile-num { font-size: 2.5rem; }

    .bpo-process { padding: 4.5rem 2rem; }
    .bpo-process__list { grid-template-columns: repeat(2, 1fr); }

    .bpo-why { padding: 4.5rem 2rem; }
    .bpo-why__grid { gap: 1rem; }
    .bpo-why__card { padding: 2rem 1.75rem; }

    .bpo-faq { padding: 4.5rem 2rem; }
    .bpo-faq__title { font-size: 2.75rem; }

    .bpo-end__title { font-size: 3rem; }
}

@media (max-width: 767px) {
    .bpo-open { padding: 6rem 1.25rem 2rem; }
    .bpo-open__layout { gap: 1.5rem; }
    .bpo-open__sketch { aspect-ratio: 4 / 3; }
    .bpo-open__chapterbar { flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
    .bpo-open__chaptermark-num,
    .bpo-open__chaptermark-meta { font-size: 0.5625rem; }

    /* Globe goes single-column, taller stage to keep globe legible */
    .bpo-globe { padding: 3rem 1rem 3.5rem; }
    .bpo-globe__title { font-size: 2.25rem; }
    .bpo-globe__sub { font-size: 1rem; }
    .bpo-globe__stage { aspect-ratio: 1 / 1; border-radius: 1rem; }
    /* HUDs shrink to compact size + only show the most important corners.
       Keeping all 4 at narrow phone widths makes the globe unreadable. */
    .bpo-globe__hud { padding: 0.5rem 0.625rem; min-width: 6rem; font-size: 0.5625rem; }
    .bpo-globe__hud--bl, .bpo-globe__hud--br { display: none; }
    .bpo-globe__hud-num { font-size: 1.125rem; }
    .bpo-globe__hud-val { font-size: 0.875rem; }
    .bpo-globe__hud-meta-line { display: none; }
    .bpo-globe__cities {
        grid-template-columns: 1fr;
        margin-top: 1.5rem;
    }
    .bpo-globe__city { padding: 1rem 1.125rem; }

    .bpo-disciplines { padding: 3rem 1.25rem 3.5rem; }
    .bpo-disciplines__title { font-size: 2.5rem; }
    .bpo-disciplines__sub { font-size: 1rem; }
    .bpo-disciplines__panels { gap: 3rem; }
    .bpo-discipline__title { font-size: 2.5rem; }
    .bpo-discipline__lede { font-size: 1rem; }
    /* Vertical full-width nav, same convention as .w3- and .dm- */
    .bpo-disciplines__navlist {
        flex-direction: column;
        overflow-x: visible;
        gap: 0.375rem;
        padding-bottom: 0;
    }
    .bpo-disciplines__navitem { width: 100%; padding: 0.875rem 1rem; }

    .bpo-ops { padding: 3rem 1.25rem 3.5rem; }
    .bpo-ops__title { font-size: 2.25rem; }
    .bpo-ops__console { padding: 1.25rem; }
    .bpo-ops__grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .bpo-ops__tile-num { font-size: 2.25rem; }
    .bpo-ops__shifts { padding: 1.25rem 1rem; }
    .bpo-ops__shift em { font-size: 0.5625rem; letter-spacing: 0.16em; }

    .bpo-process { padding: 3rem 1.25rem; }
    .bpo-process__title { font-size: 2.25rem; }
    .bpo-process__list { grid-template-columns: 1fr; gap: 0.875rem; }
    .bpo-process__step { padding: 1.5rem 1.25rem; }

    .bpo-why { padding: 3rem 1.25rem; }
    .bpo-why__head { margin-bottom: 2.5rem; }
    .bpo-why__title { font-size: 2rem; }
    .bpo-why__grid { grid-template-columns: 1fr; }
    .bpo-why__card { padding: 1.75rem 1.5rem; border-radius: 1rem; }
    .bpo-why__name { font-size: 1.25rem; }
    .bpo-why__desc { font-size: 0.875rem; }

    .bpo-faq { padding: 3rem 1.25rem; }
    .bpo-faq__title { font-size: 1.875rem; }
    .bpo-faq__q { grid-template-columns: 2.5rem 1fr 1.5rem; gap: 0.625rem; padding: 1rem 0.5rem; }
    .bpo-faq__q-num { font-size: 0.5625rem; }
    .bpo-faq__q-text { font-size: 0.9375rem; }
    .bpo-faq__q-icon { font-size: 1.125rem; }
    .bpo-faq__a { padding: 0 0.5rem 0 3.625rem; }
    .bpo-faq__a p { font-size: 0.875rem; }

    .bpo-end { padding: 3rem 0; }
    .bpo-end__inner { padding: 0 1.25rem; }
    .bpo-end__title { font-size: 2.5rem; }
    .bpo-end__sub { font-size: 0.9375rem; }
    .bpo-end__row { flex-direction: column; gap: 0.75rem; }
}




/* ══════════════════════════════════════════════════════
   BLOG (.blog-*) — listing (uniform grid) + detail pages
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .blog-head { padding: 8rem 2rem 2.5rem; }
    .blog-list { padding: 0 2rem 6rem; gap: 2rem; }
    .blog-card__title { font-size: 1.5rem; }

    .blog-article__head { padding: 10rem 2rem 2.5rem; }
    .blog-article__title { font-size: 3.75rem; }
    .blog-article__h2 { font-size: 2.25rem; }
    .blog-article__pullquote { font-size: 1.5rem; padding: 2rem 2.5rem; }
    .blog-article__cta { padding: 3rem 2.5rem; }
    .blog-article__cta-title { font-size: 2rem; }
}

@media (max-width: 1100px) {
    .blog-head { padding: 7rem 2rem 2.5rem; }
    .blog-list {
        padding: 0 2rem 5rem;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .blog-card__body { padding: 1.75rem 1.75rem 2rem; }
    .blog-card__title { font-size: 1.5rem; }

    .blog-article__head { padding: 8rem 1.5rem 2rem; }
    .blog-article__title { font-size: 3rem; }
    .blog-article__dek { font-size: 1.125rem; }
    .blog-article__hero { padding: 0 1.5rem; margin-bottom: 3rem; }
    .blog-article__h2 { font-size: 2rem; margin-top: 3rem; margin-bottom: 1.5rem; }
    .blog-article__pullquote {
        margin: 2.5rem auto;
        padding: 2rem 1.75rem;
        font-size: 1.25rem;
    }
    .blog-article__cta { margin: 3rem auto 0; padding: 2.5rem 2rem; }
    .blog-article__cta-title { font-size: 1.75rem; }

    .blog-related { padding: 4rem 1.5rem 5rem; }
    .blog-related__title { font-size: 2rem; }
    .blog-related__item a { grid-template-columns: 7rem 1fr 1.5rem; gap: 1rem; padding: 1.25rem 0.5rem; }
    .blog-related__name { font-size: 1.0625rem; }
}

@media (max-width: 767px) {
    .blog-head { padding: 6rem 1.25rem 2rem; }
    .blog-head__layout { gap: 1.25rem; margin-bottom: 2.5rem; }

    .blog-filter { gap: 0.5rem; padding-top: 1.5rem; }
    .blog-filter__chip {
        padding: 0.5rem 0.875rem;
        font-size: 0.5625rem;
    }

    .blog-list { padding: 0 1.25rem 4rem; gap: 1.5rem; }
    .blog-card__body { padding: 1.5rem 1.5rem 1.75rem; gap: 0.875rem; }
    .blog-card__title { font-size: 1.3125rem; }
    .blog-card__excerpt { font-size: 0.875rem; }

    /* Detail page */
    .blog-article__head { padding: 6rem 1.25rem 1.5rem; }
    .blog-article__crumbs { margin-bottom: 1.25rem; font-size: 0.5625rem; }
    .blog-article__title { font-size: 2rem; }
    .blog-article__dek { font-size: 1rem; margin-bottom: 1.75rem; }
    .blog-article__byline { font-size: 0.5625rem; padding-top: 1rem; gap: 0.5rem; }

    .blog-article__hero { padding: 0 1.25rem; margin-bottom: 2.5rem; }
    .blog-article__hero img { border-radius: 0.875rem; }

    .blog-article__body { padding: 0 1.25rem 4rem; }
    .blog-article__lede { font-size: 1.0625rem; line-height: 1.65; }
    .blog-article__body > p { font-size: 1rem; line-height: 1.7; margin-bottom: 1.25rem; }
    .blog-article__h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 1.25rem; gap: 0.625rem; }
    .blog-article__h2-num { font-size: 0.75rem; }
    .blog-article__pullquote {
        margin: 2rem 0;
        padding: 1.5rem 1.25rem;
        font-size: 1.0625rem;
        line-height: 1.45;
    }
    .blog-article__list li { font-size: 1rem; padding: 0.625rem 0 0.625rem 1.5rem; }
    .blog-article__list li::before { top: 1.05rem; }
    .blog-article__list--ordered li { padding-left: 2rem; }
    .blog-article__list--ordered li::before { top: 0.7rem; font-size: 0.625rem; }

    .blog-tips { gap: 0.75rem; }
    .blog-tip { padding: 1.5rem 1.25rem; }
    .blog-tip__name { font-size: 1.125rem; }
    .blog-tip__desc { font-size: 0.875rem; }

    .blog-article__cta { margin: 2.5rem 0 0; padding: 2rem 1.25rem 2.25rem; border-radius: 1rem; }
    .blog-article__cta-title { font-size: 1.5rem; }
    .blog-article__cta-sub { font-size: 0.9375rem; margin-bottom: 1.5rem; }
    .blog-article__cta-row { flex-direction: column; gap: 0.75rem; }

    .blog-related { padding: 3rem 1.25rem 4rem; }
    .blog-related__head { margin-bottom: 2rem; }
    .blog-related__title { font-size: 1.625rem; }
    .blog-related__item a {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1.125rem 0.5rem;
    }
    .blog-related__name { font-size: 1rem; }
    .blog-related__arrow { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════════
   ░ R26 — BUSINESS PAGES (pitch deck, profile, consultation, advisory)
   ░ Width-only breakpoints. No height-based rules.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
    .page-business .page-hero { padding: 7rem 1.25rem 3rem; }
    .page-business .page-hero__title { font-size: 3.75rem; }
    .page-business .page-hero__sub  { font-size: 1.0625rem; }

    .pd-frame__title, .pd-types__title, .pd-process__title,
    .pd-why__title, .pd-faq__title,
    .cp-blueprint__title, .cp-formats__title, .cp-process__title,
    .cp-why__title, .cp-faq__title,
    .sc-roadmap__title, .sc-models__title, .sc-areas__title,
    .sc-why__title, .sc-faq__title,
    .cba-stack__title, .cba-coverage__title, .cba-process__title,
    .cba-why__title, .cba-faq__title { font-size: 2.25rem; }

    /* Pitch grid 4-col → 3-col */
    .pd-grid { grid-template-columns: repeat(3, 1fr); }

    /* Roadmap 5 stations → vertical stack */
    .sc-track__line { display: none; }
    .sc-stations { grid-template-columns: 1fr; gap: 1.25rem; }
    .sc-station { flex-direction: row; align-items: stretch; gap: 1.25rem; }
    .sc-station__marker { margin-bottom: 0; flex-shrink: 0; }
    .sc-station__card { flex: 1; }

    /* Models 3-col → 2-col, last item stretches */
    .sc-models__grid { grid-template-columns: repeat(2, 1fr); }
    .sc-model:last-child { grid-column: 1 / -1; }

    /* Areas 3-col → 2-col */
    .sc-areas__grid { grid-template-columns: repeat(2, 1fr); }

    /* Step rows: drop right time column under content */
    .pd-step, .cp-step, .cba-step {
        grid-template-columns: 3rem 1fr;
        gap: 1.25rem;
    }
    .pd-step__time, .cp-step__time, .cba-step__time {
        grid-column: 2;
        text-align: left;
        padding-top: 0.5rem;
    }

    /* Profile blueprint stage shrinks */
    .cp-blueprint__stage { padding: 3rem 1rem; min-height: 32rem; }
    .cp-doc { width: 14rem; height: 18rem; }
    .cp-note { width: 11rem; }
    .cp-doc__cover-brand { font-size: 1.625rem; }

    /* Crypto block: meta column narrows */
    .cba-block { grid-template-columns: 11rem 1fr; padding: 1.25rem 1.25rem; }
    .cba-block__hash { font-size: 0.625rem; }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
    .page-business .page-hero { padding: 6rem 1rem 2.5rem; }
    .page-business .page-hero__title { font-size: 2.625rem; line-height: 1.05; }
    .page-business .page-hero__sub   { font-size: 1rem; }
    .page-business .page-hero__chapter { gap: 0.625rem; margin-bottom: 1.75rem; }
    .page-business .page-hero__meta { font-size: 0.625rem; gap: 0.5rem; }
    .page-business .page-hero__meta-sep { display: none; }

    .pd-frame, .pd-types, .pd-process, .pd-why, .pd-faq, .pd-cta,
    .cp-blueprint, .cp-formats, .cp-process, .cp-why, .cp-faq, .cp-cta,
    .sc-roadmap, .sc-models, .sc-areas, .sc-why, .sc-faq, .sc-cta,
    .cba-stack, .cba-coverage, .cba-process, .cba-why, .cba-faq, .cba-cta {
        padding: 3.5rem 1rem;
    }

    .pd-frame__head, .pd-types__head, .pd-process__head, .pd-why__head, .pd-faq__head,
    .cp-blueprint__head, .cp-formats__head, .cp-process__head, .cp-why__head, .cp-faq__head,
    .sc-roadmap__head, .sc-models__head, .sc-areas__head, .sc-why__head, .sc-faq__head,
    .cba-stack__head, .cba-coverage__head, .cba-process__head, .cba-why__head, .cba-faq__head {
        margin-bottom: 2.5rem;
        padding: 0 0.5rem;
    }

    .pd-frame__title, .pd-types__title, .pd-process__title,
    .pd-why__title, .pd-faq__title,
    .cp-blueprint__title, .cp-formats__title, .cp-process__title,
    .cp-why__title, .cp-faq__title,
    .sc-roadmap__title, .sc-models__title, .sc-areas__title,
    .sc-why__title, .sc-faq__title,
    .cba-stack__title, .cba-coverage__title, .cba-process__title,
    .cba-why__title, .cba-faq__title { font-size: 1.875rem; }

    .pd-cta__title, .cp-cta__title, .sc-cta__title, .cba-cta__title {
        font-size: 1.875rem;
    }
    .pd-cta__inner, .cp-cta__inner, .sc-cta__inner, .cba-cta__inner {
        padding: 2.5rem 1.5rem;
    }
    .pd-cta__row, .cp-cta__row, .sc-cta__row, .cba-cta__row {
        flex-direction: column;
        align-items: stretch;
    }

    /* Pitch grid → 2-col */
    .pd-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .pd-card { padding: 1.125rem 0.875rem; }

    /* Types/Formats/Why grids → 1-col */
    .pd-types__grid, .pd-why__grid,
    .cp-formats__grid, .cp-why__grid,
    .sc-areas__grid, .sc-why__grid,
    .cba-coverage__grid, .cba-why__grid {
        grid-template-columns: 1fr;
    }
    .sc-models__grid { grid-template-columns: 1fr; }
    .sc-model:last-child { grid-column: auto; }

    /* Process steps → 1-col, num inline with title */
    .pd-step, .cp-step, .cba-step {
        grid-template-columns: 1fr;
        gap: 0.625rem;
        padding: 2rem 0;
    }
    .pd-step__num, .cp-step__num, .cba-step__num { padding-top: 0; }
    .pd-step__time, .cp-step__time, .cba-step__time {
        grid-column: auto;
        font-size: 0.625rem;
    }

    /* Profile blueprint: stack annotations BELOW the doc */
    .cp-blueprint__stage {
        padding: 2.5rem 0.5rem;
        min-height: auto;
        flex-direction: column;
        gap: 2.5rem;
    }
    .cp-doc { width: 12rem; height: 15.5rem; }
    .cp-doc__cover { padding: 1.5rem 1.25rem; }
    .cp-doc__cover-brand { font-size: 1.375rem; }
    .cp-doc__cover-mark { width: 1.75rem; height: 1.75rem; bottom: 1.25rem; right: 1.25rem; }

    .cp-notes {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
        width: 100%;
    }
    .cp-note {
        position: relative;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: auto;
        text-align: left;
    }

    /* Roadmap stations: drop marker, just card list */
    .sc-station { flex-direction: column; gap: 0.875rem; }
    .sc-station__marker { width: 2rem; height: 2rem; }
    .sc-station__dot { width: 0.75rem; height: 0.75rem; }
    .sc-station__ring { width: 1.75rem; height: 1.75rem; }

    /* Crypto block: stack meta above body */
    .cba-block {
        grid-template-columns: 1fr;
        gap: 0.875rem;
        padding: 1.25rem 1.25rem;
    }
    .cba-block__meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-right: none;
        border-bottom: 1px dashed rgba(253,240,232,0.1);
        padding-right: 0;
        padding-bottom: 0.875rem;
    }
    .cba-block__height { margin-bottom: 0; }
    .cba-block__connector { display: none; }

    /* FAQ summary tighter on mobile */
    .pd-faq__item summary, .cp-faq__item summary,
    .sc-faq__item summary, .cba-faq__item summary {
        font-size: 1rem;
        padding: 1.25rem 2rem 1.25rem 0;
    }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .page-business .page-hero__title { font-size: 2.125rem; }
    .pd-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════════════════
   ░ R28 — FREE AUDIT page form (responsive)
   ════════════════════════════════════════════════════════════════════════════ */

/* Tablet — collapse 2-col grid + checkgroup at narrower viewports */
@media (max-width: 1024px) {
    .fa-grid             { grid-template-columns: 1fr; gap: 1.25rem; }
    .fa-checkgroup       { grid-template-columns: 1fr; }
    .fa-form             { padding: 2rem; }
    .fa-review__list     { grid-template-columns: 8rem 1fr; }
}

/* Mobile — tighter padding, smaller step pills, stack nav buttons */
@media (max-width: 640px) {
    .fa-section          { padding: 0 1rem; }
    .fa-form             { padding: 1.5rem 1.25rem; border-radius: 1rem; }
    .fa-steps            { margin-bottom: 2rem; }
    .fa-step-pill__num   { width: 2rem; height: 2rem; font-size: 0.8125rem; }
    .fa-step-pill::before{ top: 0.9375rem; }
    .fa-step-pill__label { font-size: 0.5625rem; letter-spacing: 0.14em; }
    .fa-step__title      { font-size: 1.25rem; }
    .fa-step__icon       { width: 1.75rem; height: 1.75rem; }
    .fa-step__icon svg   { width: 1rem; height: 1rem; }
    .fa-nav              { flex-direction: column-reverse; align-items: stretch; gap: 0.75rem; }
    .fa-nav .btn-primary,
    .fa-nav .btn-ghost   { justify-content: center; }
    .fa-review           { padding: 1.25rem; }
    .fa-review__list     { grid-template-columns: 1fr; gap: 0.875rem; }
    .fa-review__list dt  { padding-top: 0; }
    .fa-thanks           { padding: 3rem 1.5rem; }
    .fa-thanks__title    { font-size: 1.625rem; }
}


/* ════════════════════════════════════════════════════════════════════════════
   ░ R29 — 404 PAGE (responsive)
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .err-paths__grid    { grid-template-columns: repeat(2, 1fr); }
    .err-ghost          { font-size: 20rem; }
}

@media (max-width: 640px) {
    .err-paths          { padding: 0 1rem; margin-top: 3.5rem; }
    .err-paths__grid    { grid-template-columns: 1fr; gap: 0.75rem; }
    .err-paths__title   { font-size: 1.5rem; }
    .err-tile           { padding: 1.25rem; }
    .err-ghost          { font-size: 13rem; opacity: 0.6; }
    .err-cta-row        { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .err-cta-row .btn-primary,
    .err-cta-row .btn-ghost { justify-content: center; align-self: stretch; }
}

/* ═══════════════════════════════════════════════════════════
   CAREERS — responsive (r132)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .careers-roles            { padding: 3rem 2rem 4.5rem; }
    .careers-hero             { padding: 6rem 2rem 3rem; }
    .careers-roles__title     { font-size: 2.25rem; }
    .careers-card             { padding: 2rem 1.75rem 1.75rem; }
    .careers-card__meta       { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .careers-card__cols       { grid-template-columns: 1fr; gap: 1.5rem; }
    .careers-card__title      { font-size: 1.375rem; }

    /* Apply modal — full-width panel on tablet */
    .apply-modal__panel       { padding: 2rem 1.75rem; }
    .apply-form__grid         { grid-template-columns: 1fr; }
    .apply-modal__title       { font-size: 1.375rem; }
}

@media (max-width: 640px) {
    .careers-roles            { padding: 2.5rem 1.25rem 4rem; }
    .careers-hero             { padding: 5rem 1.25rem 2.5rem; }

    .careers-card             { padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--r-md); }
    .careers-card__meta       { grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
    .careers-card__title      { font-size: 1.25rem; }

    /* Modal — near-fullscreen, less rounding */
    .apply-modal__panel       {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        padding: 1.75rem 1.25rem;
        border-radius: var(--r-md);
    }
    .apply-modal__close       { top: 0.625rem; right: 0.625rem; }
    .apply-form__submit-row   { flex-direction: column; align-items: stretch; gap: 0.875rem; }
    .apply-form__submit       { margin-left: 0; justify-content: center; align-self: stretch; }
    .apply-form__error        { text-align: center; }
}

@media (max-width: 480px) {
    .careers-roles__title     { font-size: 1.875rem; }
}