@media (max-width: 900px) {
    .split-grid,
    .split,
    .intro-grid,
    .faq-preview-grid,
    .form-grid,
    .map-grid,
    .service-area-grid,
    .social-panel,
    .trust-panel,
    .story-grid {
        grid-template-columns: 1fr;
    }

    .card-grid,
    .contact-grid,
    .card-grid-featured,
    .card-grid-decision,
    .card-grid-value,
    .card-grid-compact,
    .process-grid,
    .testimonial-grid,
    .team-grid,
    .stats-grid,
    .comparison-grid,
    .trust-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cta-band {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .image-cta {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .cta-split-cta {
        grid-template-columns: 1fr;
    }

    .stats-inline .stats-grid,
    .testimonials-spotlight .testimonial-grid,
    .comparison-guide .comparison-grid,
    .timeline-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comparison-rows .comparison-grid {
        grid-template-columns: 1fr;
    }

    .comparison-guide .shell {
        grid-template-columns: 1fr;
    }

    .comparison-guide .section-header,
    .comparison-guide .comparison-visual,
    .comparison-guide .comparison-grid {
        grid-column: auto;
    }

    .process-timeline .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
        column-gap: var(--space-xl);
    }

    .footer-summary {
        grid-column: span 2;
    }

    .cta-band .action-row,
    .cta-panel__actions {
        justify-content: flex-start;
        margin-top: var(--space-sm);
    }

    .image-cta__actions {
        justify-content: flex-start;
        margin-top: var(--space-sm);
    }
}

@media (max-width: 860px) {
    .header-shell {
        grid-template-columns: auto 1fr;
        min-height: 66px;
    }

    .header-logo {
        max-width: min(var(--header-logo-max-width), 150px);
        max-height: 44px;
    }

    .header-actions {
        grid-column: 2;
    }

    .nav-toggle {
        display: inline-grid;
        width: 44px;
        height: 44px;
        place-content: center;
        gap: 5px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }

    .nav-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--color-heading);
    }

    .site-nav {
        position: fixed;
        top: 66px;
        left: 0;
        right: 0;
        width: 100%;
        display: none;
        padding: 1rem;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-surface);
        box-shadow: var(--shadow-subtle);
        box-sizing: border-box;
    }

    body.nav-open .site-nav {
        display: block;
    }

    .site-nav ul {
        align-items: stretch;
        flex-direction: column;
    }

    .site-nav a {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .header-shell {
        min-height: 66px;
    }

    .brand-text small {
        display: none;
    }

    .nav-toggle {
        display: inline-grid;
        width: 44px;
        height: 44px;
        place-content: center;
        gap: 5px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }

    .nav-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--color-heading);
    }

    .site-nav {
        position: fixed;
        top: 66px;
        left: 0;
        right: 0;
        width: 100%;
        display: none;
        padding: 1rem;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-surface);
        box-shadow: var(--shadow-subtle);
        box-sizing: border-box;
    }

    body.nav-open .site-nav {
        display: block;
    }

    .site-nav ul {
        align-items: stretch;
        flex-direction: column;
    }

    .site-nav a {
        width: 100%;
    }

    .card-grid,
    .contact-grid,
    .footer-grid,
    .card-grid-featured,
    .card-grid-decision,
    .card-grid-value,
    .card-grid-compact,
    .process-grid,
    .testimonial-grid,
    .team-grid,
    .stats-grid,
    .comparison-grid,
    .trust-list {
        grid-template-columns: 1fr;
    }

    .footer-summary {
        grid-column: auto;
    }

    .section {
        padding-block: var(--section-space-sm);
    }

    .hero {
        min-height: 340px;
        padding-block: var(--section-space-sm);
    }

    .hero__overlay {
        background: rgb(4 9 14 / var(--hero-overlay-opacity, var(--default-hero-overlay-opacity)));
    }

    .image-cta__overlay {
        background: rgb(4 9 14 / var(--image-cta-overlay-opacity, var(--default-image-cta-overlay-opacity)));
    }

    .hero__content {
        padding-block: 0;
    }

    .hero h1 {
        max-width: 100%;
        font-size: clamp(2rem, 12vw, 2.75rem);
    }

    .button {
        width: 100%;
    }

    .card__button.button--small {
        width: fit-content;
    }

    .action-row {
        width: 100%;
    }

    .cta-band {
        padding: 2rem 1.25rem;
    }

    .text-section-legal .text-block {
        padding: 28px;
    }

    .image-cta {
        min-height: auto;
        padding: 2rem 1.25rem;
    }

    .image-cta--full-bleed {
        min-height: 360px;
        padding: 3rem 1rem;
    }

    .cta-simple-inline,
    .cta-inline-cta {
        padding: 0;
    }

    .trust-panel {
        padding: 1.25rem;
    }

    .contact-form-placeholder button {
        width: 100%;
    }

    .map-placeholder img,
    .map-placeholder .image-placeholder {
        min-height: 240px;
    }

    .stats-inline .stats-grid,
    .testimonials-spotlight .testimonial-grid,
    .comparison-guide .comparison-grid,
    .timeline-list {
        grid-template-columns: 1fr;
    }

    .process-decision .process-step-card {
        grid-template-columns: 1fr;
    }

    .process-decision .process-step-card h3,
    .process-decision .process-step-card p {
        grid-column: auto;
    }

    .process-timeline .process-grid {
        grid-template-columns: 1fr;
    }

    .timeline-list li {
        padding: var(--space-md);
    }

    .hero__tags {
        flex-direction: column;
    }

    .faq-tabs {
        width: 100%;
    }

    .faq-tab {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Phase 4 — Mobile nav dark treatment (overrides white defaults above)
   ========================================================================== */
@media (max-width: 860px) {
    .nav-toggle {
        border-color: rgba(255, 255, 255, 0.22);
        background: transparent;
    }

    .nav-toggle span {
        background: var(--adglow-white);
    }

    .site-nav {
        background: var(--adglow-ink);
        border-bottom-color: rgba(255, 255, 255, 0.09);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.42);
        left: 0;
        right: 0;
        width: 100%;
    }
}

/* ==========================================================================
   Phase 5 — Homepage responsive adjustments
   ========================================================================== */

/* --- Stats: 2 columns at 900px (already handled by auto-fit) --- */
@media (max-width: 900px) {
    .chip-groups {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    /* Override ID-specific desktop 2-col layout for platforms overview */
    #platforms-overview .chip-groups {
        grid-template-columns: 1fr;
    }

    /* Chip tile grid: 2 cols on tablet/mobile (was 3) */
    #platforms-overview .chip-list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ATL block also 2 cols (was already 2, keep consistent) */
    #platforms-overview .chip-groups > .chip-group:nth-child(2) .chip-list {
        grid-template-columns: repeat(2, 1fr);
    }

    #regional-coverage .card-grid-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .card-grid-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .stats-section.stats-inline .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-section.stats-inline .stat-card {
        padding: var(--space-md);
    }

    /* Last tile full-width when it sits alone on a row (5 items, 2-col grid) */
    .stats-section.stats-inline .stats-grid .stat-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

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

    #regional-coverage .card-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #brand-experience .card-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chip-list {
        gap: 0.4rem;
    }

    .platform-chip {
        font-size: 0.82rem;
        padding: 0.42rem 0.8rem;
    }
}

/* ==========================================================================
   Phase 5A — Hero wordmark + dark homepage mobile
   ========================================================================== */

@media (max-width: 900px) {
    .hero__wordmark {
        font-size: clamp(4rem, 20vw, 8rem);
    }

    #home-hero {
        min-height: clamp(560px, 80vh, 760px);
    }
}

@media (max-width: 720px) {
    .hero__wordmark {
        font-size: clamp(3.8rem, 22vw, 6.5rem);
        letter-spacing: -0.04em;
    }

    #home-hero .hero__shell {
        gap: var(--space-lg);
    }

    #home-hero h1 {
        font-size: clamp(1.7rem, 8vw, 2.4rem);
    }

    .adglow-ambient::before {
        background-size: 60px 60px;
    }

    .card-section-service-card,
    #campaign-mgmt-feature,
    .platform-chips-section,
    .card-section-benefit-card,
    #regional-coverage,
    #brand-experience {
        padding-block: var(--section-space);
    }
}

/* ==========================================================================
   Phase 5B — Responsive: grid, scan, canvas on mobile
   ========================================================================== */

@media (max-width: 720px) {
    /* Hero wordmark subline */
    .hero__subline {
        font-size: 0.6rem;
        letter-spacing: 0.24em;
    }

    /* Remove reveal delay on mobile (simpler UX) */
    .will-reveal {
        transition-delay: 0ms !important;
    }

    /* Left-aligned section headers: allow wrapping */
    .card-section-service-card .section-header,
    .platform-chips-section .section-header,
    .card-section-region-chip .section-header {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    /* Wordmark: max constrained on small phones */
    .hero__wordmark {
        font-size: clamp(3rem, 24vw, 5rem);
    }

}

/* ==========================================================================
   Phase 5C — Responsive: accent labels, intel-module, badges
   ========================================================================== */

@media (max-width: 720px) {
    .hero__accent-labels {
        gap: 0.4rem;
    }

    .hero__accent-label {
        font-size: 0.56rem;
        padding: 0.2rem 0.55rem;
    }

    .intel-module {
        padding: var(--space-sm) var(--space-md);
    }
}

@media (max-width: 480px) {
    .hero__accent-labels {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
}

/* ==========================================================================
   Phase 5F — Responsive: insight panels + market nodes
   ========================================================================== */

@media (max-width: 900px) {
    .insight-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .proof-modules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #regional-coverage .card-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* South Africa still spans full width on tablet */
    #regional-coverage .card-grid-compact .market-node:nth-child(1) {
        grid-column: span 2;
    }
}

@media (max-width: 720px) {
    .insight-panels-header {
        max-width: 100%;
    }

    .proof-modules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
    }

    .proof-module {
        padding: var(--space-sm) var(--space-md);
    }

    #regional-coverage .card-grid-compact {
        grid-template-columns: 1fr;
    }

    #regional-coverage .card-grid-compact .market-node:nth-child(1) {
        grid-column: span 1;
    }
}

@media (max-width: 480px) {
    .insight-card {
        padding: var(--space-lg);
    }

    .proof-modules {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Phase 6 — Internal page responsive adjustments
   ========================================================================== */

@media (max-width: 900px) {
    /* Trust panel: stack copy above items */
    .trust-section .trust-panel {
        grid-template-columns: 1fr;
        padding: var(--space-xl);
    }
}

@media (max-width: 720px) {
    /* Contact cards: single column */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Process cards: tighter padding */
    .process-step.process-step-card {
        padding: var(--space-lg);
    }

    /* Social panel: tighter padding */
    .social-section .social-panel {
        padding: var(--space-lg);
    }

    /* Trust panel */
    .trust-section .trust-panel {
        padding: var(--space-lg);
    }

    /* Internal hero heading */
    .hero:not(#home-hero) h1 {
        font-size: clamp(1.7rem, 8vw, 2.6rem);
    }
}

@media (max-width: 480px) {
    .contact-card {
        padding: var(--space-lg);
    }

    .trust-section .trust-list article {
        padding: var(--space-md);
    }
}

/* ==========================================================================
   Phase 7 — Services and Platforms responsive
   ========================================================================== */

@media (max-width: 900px) {
    /* Featured service card: drop the span at tablet — all cards equal width */
    #service-list .card-grid-grid .service-card:nth-child(1) {
        grid-column: span 1;
    }

    /* Single column from tablet down */
    #service-list .card-grid-grid {
        grid-template-columns: 1fr;
    }

    /* Process: 2-col on tablet (overrides the Phase 7 3-col desktop rule) */
    #campaign-process .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    /* Process: single column on mobile */
    #campaign-process .process-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Phase 9 — Responsive polish
   ========================================================================== */

/* ─── 1. Header CTA: hidden on small phones (mobile nav has Contact link) ─── */
@media (max-width: 480px) {
    .header-cta {
        display: none;
    }
}

/* ─── 2. Ambient canvas: lighter on mobile for clarity and performance ─── */
@media (max-width: 720px) {
    .adglow-ambient::after {
        animation-duration: 20s;
        opacity: 0.55;
    }
}

@media (max-width: 480px) {
    .adglow-ambient::before {
        background-size: 60px 60px;
        opacity: 0.5;
    }

    .adglow-ambient::after {
        opacity: 0.3;
    }
}

/* ─── Mobile hero: equal vertical padding, narrower buttons ─── */
@media (max-width: 480px) {
    /* Remove forced min-height; symmetric padding handles spacing */
    #home-hero {
        min-height: auto;
        padding-block: clamp(4rem, 10vw, 5.5rem);
    }

    /* Center stacked content vertically within the shell */
    #home-hero .hero__shell {
        justify-content: center;
    }

    /* Buttons: natural width, centered — override global align-items: stretch */
    #home-hero .action-row {
        align-items: center;
    }

    #home-hero .action-row .button {
        width: min(100%, 270px);
    }
}

/* ─── 3. Very small screens (≤380px): constrain headings, wordmark ─── */
@media (max-width: 380px) {
    .hero__wordmark {
        font-size: clamp(2.8rem, 22vw, 4.2rem);
        letter-spacing: -0.05em;
    }

    .hero:not(#home-hero) h1 {
        font-size: clamp(1.45rem, 10vw, 2rem);
    }

    #home-hero h1 {
        font-size: clamp(1.5rem, 9vw, 2.2rem);
    }
}

/* ─── 4. CTA full-bleed: tighter padding on small phones ─── */
@media (max-width: 480px) {
    .image-cta--full-bleed {
        padding-block: 2.5rem;
        padding-inline: 1.25rem;
    }

    .image-cta--full-bleed h2 {
        font-size: clamp(1.6rem, 9vw, 2.2rem);
    }
}

/* ─── 5. Footer: 2-column intermediate between full 5-col and 1-col ─── */
@media (max-width: 720px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: var(--space-xl);
    }

    .footer-summary {
        grid-column: 1 / -1;
    }
}

@media (max-width: 440px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-summary {
        grid-column: auto;
    }
}

/* ─── 7. Action row: full-width on mobile, keep small button targets ─── */
@media (max-width: 480px) {
    .action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .action-row .button {
        text-align: center;
        justify-content: center;
    }

    /* Card action buttons remain fit-content so they don't fill the card */
    .card__button.button--small {
        width: fit-content;
    }
}

/* ─── 10. Contact card: ensure readable address and phone link ─── */
@media (max-width: 480px) {
    .contact-card {
        padding: var(--space-lg);
    }

    .contact-card a {
        font-size: 0.95rem;
    }
}

/* ─── 11. Prefers-reduced-motion: accessibility ─── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Stop the ambient scanline */
    .adglow-ambient::after {
        animation: none;
        opacity: 0;
    }

    /* Scroll-reveal: show elements immediately without transition */
    .will-reveal {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }

    .is-revealed {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}