/* ============================================================
   AFRO VISION - RESPONSIVE CSS
   ============================================================ */

/* ── Extra Large (≤ 1200px) ────────────────────────────────── */
@media (max-width: 1200px) {
    .container {
        padding-right: var(--space-4);
        padding-left: var(--space-4);
    }
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .why-bento-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Large / Tablet Landscape (≤ 992px) ────────────────────── */
@media (max-width: 992px) {
    .top-bar {
        display: none;
    }

    /* Mobile Navigation */
    .site-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-white);
        box-shadow: 0 12px 32px rgba(13, 27, 62, 0.12);
        border-top: 1px solid var(--color-border);
        z-index: var(--z-dropdown);
    }

    .site-header__nav .nav-menu {
        flex-direction: column;
        padding: var(--space-4) 0;
    }

    .site-header__nav .nav-link {
        padding: 0.875rem var(--space-6);
        font-size: var(--font-size-sm);
        justify-content: space-between;
    }

    .site-header__nav .nav-link::after {
        display: none;
    }

    .site-header__nav .nav-link.active {
        background: var(--color-off-white);
        color: var(--color-accent);
        border-left: 3px solid var(--color-accent);
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: var(--color-off-white);
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .site-header__cta {
        display: none;
    }

    /* Hero adjustments */
    .hero-section {
        min-height: 520px;
    }

    .hero-section__title {
        font-size: 2.25rem;
    }

    .hero-section__stats {
        gap: var(--space-4);
    }

    .hero-stat__number {
        font-size: var(--font-size-xl);
    }

    /* Grid collapses */
    .about-snippet__grid,
    .who-we-are__grid,
    .mission-vision__grid,
    .testimonials-inner,
    .grid-2col {
        grid-template-columns: 1fr;
    }

    .testimonials-image {
        display: none;
    }

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

    .page-banner__image-side {
        display: none;
    }

    .core-values__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tech-categories,
    .contact-grid {
        grid-template-columns: 1fr;
    }

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

    /* Tablet Bento Grid Alignments (Preventing spacing gaps) */
    .innovation-bento-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        gap: var(--space-6) !important;
    }

    .inno-card--large {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
    }

    .inno-card--primary {
        grid-column: span 1 !important;
        flex-direction: column !important;
        padding: var(--space-6) !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .inno-card--primary .inno-icon {
        margin-bottom: var(--space-3) !important;
    }

    .inno-card--accent,
    .inno-card--dark {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .ecosystem-bento {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        gap: var(--space-6) !important;
    }

    .eco-card--featured {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
    }

    .eco-card--dark {
        grid-column: span 2 !important;
    }

    .eco-card--light,
    .eco-card--accent {
        grid-column: span 1 !important;
    }
}

/* ── Medium / Tablet Portrait (≤ 768px) ────────────────────── */
@media (max-width: 768px) {
    .section {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }

    .section-header {
        margin-bottom: var(--space-10);
    }

    .section-title {
        font-size: var(--font-size-2xl);
    }

    /* Hero */
    .hero-section {
        min-height: 480px;
    }

    .hero-section .container {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }

    .hero-section__title {
        font-size: 2rem;
    }

    .hero-section__subtitle {
        font-size: var(--font-size-base);
    }

    .hero-section__stats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .hero-stat__divider {
        display: none;
    }

    .hero-stat {
        flex: 1 1 40%;
        min-width: 100px;
    }

    /* Grids to single column */
    .services-grid,
    .industries-grid,
    .stats-grid,
    .footer-grid,
    .credibility-inner,
    .innovation-bento-grid,
    .ecosystem-bento,
    .contact-grid-modern {
        grid-template-columns: 1fr;
    }

    .inno-card--large,
    .inno-card--primary,
    .eco-card--featured,
    .eco-card--dark,
    .eco-card--light,
    .eco-card--accent {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .inno-card--primary {
        flex-direction: column;
        padding: var(--space-6);
    }

    .credibility-content {
        max-width: 100%;
        margin-bottom: var(--space-8);
    }

    .why-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-snippet__features {
        grid-template-columns: 1fr;
    }

    /* Reusable responsive overrides */
    .flex-2col {
        flex-direction: column !important;
        gap: var(--space-4) !important;
    }
    .flex-2col > * {
        width: 100% !important;
    }
    .benefits-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
    }
    .values-banner {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--space-4) !important;
    }
    .eco-brands {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }

    /* Process Timeline to single column */
    .process-timeline::before {
        left: 32px;
    }

    .process-timeline__item,
    .process-timeline__item--odd {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 80px;
    }

    .process-timeline__marker {
        left: 32px;
        top: 0;
        transform: translate(-50%, 0);
    }

    .process-timeline__item:hover .process-timeline__marker {
        transform: translate(-50%, 0) scale(1.1);
    }

    .process-timeline__content {
        width: 100%;
        margin-top: 10px;
    }

    .process-timeline__content::before {
        display: none;
    }

    .core-values__grid {
        grid-template-columns: 1fr;
    }

    .team-photos {
        flex-wrap: wrap;
    }
    .team-photo {
        flex: 1 1 50%;
    }

    .services-grid--detailed {
        grid-template-columns: 1fr;
    }

    /* CTA Banner */
    .cta-banner__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }

    .cta-banner__icon {
        display: none;
    }
}

/* ── Small / Phone (≤ 480px) ───────────────────────────────── */
@media (max-width: 480px) {
    .hero-section__title {
        font-size: 1.625rem;
    }

    .hero-section__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-section__actions .btn {
        text-align: center;
        justify-content: center;
    }

    .hero-section__badge {
        font-size: 0.6875rem;
    }

    .why-bento-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }
}

/* ────────────────────────────────────────────────────────────
   CINEMATIC COMPONENTS MOBILE RESPONSIVE OVERRIDES
   ──────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .cinematic-storytelling-panel {
        padding-right: 0;
        margin-bottom: var(--space-8);
    }
    .cinematic-main-frame {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .cinematic-floating-narrative {
        position: relative;
        width: 100%;
        bottom: 0;
        margin-top: var(--space-6);
        right: auto;
        left: auto;
    }
    
    .diff-editorial-composition {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
    }
    .diff-editorial-block {
        position: relative;
        width: 100% !important;
        height: 300px !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        right: auto !important;
    }
    .diff-floating-stat {
        top: 20px;
        right: 20px;
    }
}

/* ────────────────────────────────────────────────────────────
   PREMIUM DESKTOP COMPONENTS RESPONSIVE OVERRIDES
   ──────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .benefits-editorial-wrapper,
    .approach-editorial-grid,
    .tech-philosophy-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .benefits-editorial-left,
    .approach-editorial-left,
    .tech-canvas-column {
        padding-right: 0;
        text-align: center;
    }
    
    .section-title--left {
        text-align: center;
    }
    
    .benefits-editorial-card {
        max-width: 500px;
        margin: 0 auto var(--space-6);
        text-align: left;
    }
    
    /* Bento Grid collapses beautifully */
    .benefits-bento-deck {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .benefit-editorial-card {
        margin-top: 0 !important; /* Reset staggered offsets on tablet/mobile */
    }
    
    .approach-photo-frame,
    .tech-canvas-composition {
        max-width: 600px;
        margin: var(--space-8) auto 0;
    }
}

@media (max-width: 768px) {
    .benefits-bento-deck {
        grid-template-columns: 1fr;
    }
    
    .tech-code-terminal {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-top: var(--space-6);
        box-shadow: 0 15px 30px rgba(8, 18, 40, 0.2);
    }
    
    .approach-photo-badge {
        left: var(--space-4);
        right: var(--space-4);
        bottom: calc(-1 * var(--space-6));
    }
}

/* ============================================================
   COMPLETE SITE RESPONSIVE AUDIT OVERRIDES
   These rules cover all page-level sections added across the
   website management/customizer pass.
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

.container {
    width: min(100%, var(--container-max, 1200px));
    max-width: 100%;
}

.section-title,
.page-banner__title,
.hero-section__title,
.service-showcase-title,
.benefit-editorial-card h3,
.qa-bento-card h3,
.editorial-layered-panel h3,
.industry-bento-card h3,
.tech-category h3,
.eco-card h3,
.contact-info-side h2,
.contact-form-side h2 {
    overflow-wrap: anywhere;
}

.btn,
button,
input,
textarea,
select {
    max-width: 100%;
}

.site-header,
.site-header__inner,
.footer,
.page-banner,
.hero-section,
.section {
    max-width: 100%;
}

.site-header__inner {
    min-width: 0;
}

.site-logo,
.site-logo img,
.footer-logo,
.footer-logo img {
    max-width: 100%;
}

.site-header__nav .nav-menu {
    min-width: 0;
}

.page-banner .container,
.page-banner__inner,
.hero-section .container,
.hero-section__inner {
    min-width: 0;
}

.page-banner__subtitle,
.hero-section__subtitle,
.hero-section__description,
.section-subtitle,
.section-description,
.service-showcase-desc,
.contact-description,
.footer-description {
    max-width: 100%;
}

.approach-photo-frame,
.tech-canvas-composition,
.cinematic-main-frame,
.diff-editorial-block,
.service-showcase-card,
.gis-partnership__panel,
.contact-form-card,
.modern-form,
.map-placeholder {
    min-width: 0;
}

.tech-code-terminal pre,
.tech-code-terminal code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tech-code-terminal,
.contact-form-card,
.service-showcase-card {
    overflow: hidden;
}

@media (max-width: 1200px) {
    .container {
        padding-right: clamp(1rem, 3vw, 2rem);
        padding-left: clamp(1rem, 3vw, 2rem);
    }

    .page-banner__title,
    .hero-section__title {
        font-size: clamp(2rem, 5vw, 3.5rem);
        line-height: 1.08;
    }

    .section-title {
        font-size: clamp(1.9rem, 4vw, 3rem);
        line-height: 1.15;
    }

    .creative-industries-layout,
    .advantages-editorial-layout,
    .contact-grid-modern,
    .services-showcase-row,
    .benefits-editorial-wrapper,
    .approach-editorial-grid,
    .tech-philosophy-grid,
    .credibility-inner,
    .who-we-are__grid,
    .mission-vision__grid,
    .about-snippet__grid,
    .grid-2col,
    .grid-2col--our-difference {
        gap: clamp(1.5rem, 4vw, 3rem);
    }

    .page-banner__image-side {
        max-width: 42vw;
    }

    .service-showcase-card {
        padding: clamp(1.25rem, 3vw, 2rem);
    }
}

@media (max-width: 1024px) {
    .page-banner__inner,
    .about-snippet__grid,
    .who-we-are__grid,
    .mission-vision__grid,
    .creative-industries-layout,
    .services-showcase-row,
    .benefits-editorial-wrapper,
    .approach-editorial-grid,
    .tech-philosophy-grid,
    .advantages-editorial-layout,
    .contact-grid-modern,
    .grid-2col,
    .grid-2col--our-difference,
    .credibility-inner,
    .gis-partnership__panel {
        grid-template-columns: 1fr !important;
    }

    .services-showcase-row--reverse .service-showcase-content,
    .services-showcase-row--reverse .service-showcase-visual,
    .process-flow-row--reverse .process-flow-visual,
    .process-flow-row--reverse .process-flow-info {
        order: initial !important;
    }

    .services-showcase-row,
    .services-showcase-row--reverse,
    .process-flow-row,
    .process-flow-row--reverse {
        direction: ltr;
    }

    .service-showcase-visual,
    .approach-photo-frame,
    .tech-canvas-composition,
    .cinematic-storytelling-panel,
    .diff-editorial-composition,
    .editorial-sticky-side {
        max-width: 720px;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    .editorial-sticky-side {
        position: relative;
        top: auto;
    }

    .editorial-panels-side {
        gap: var(--space-5);
    }

    .industries-bento-grid,
    .innovation-bento-grid,
    .ecosystem-bento,
    .qa-bento-grid,
    .benefits-bento-deck,
    .why-bento-grid,
    .services-grid,
    .stats-grid,
    .core-values__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto !important;
    }

    .industry-bento-card,
    .inno-card,
    .eco-card,
    .qa-bento-card,
    .why-bento-card,
    .stat-card {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .industry-bento-card--wide,
    .industry-bento-card--large,
    .qa-bento-card--wide,
    .eco-card--featured,
    .eco-card--dark,
    .inno-card--large,
    .inno-card--primary {
        grid-column: span 2 !important;
    }

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

@media (max-width: 900px) {
    .page-banner {
        min-height: auto;
        padding: clamp(6rem, 14vw, 8rem) 0 clamp(3rem, 8vw, 5rem);
    }

    .page-banner__inner {
        text-align: left;
    }

    .page-banner__image-side {
        display: none;
    }

    .hero-section {
        min-height: clamp(520px, 76vh, 680px);
    }

    .hero-section__inner {
        max-width: 760px;
    }

    .hero-section__stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .hero-stat {
        min-width: 0;
        justify-content: flex-start;
    }

    .industry-menu-list,
    .who-tabs-nav,
    .tech-icons,
    .service-showcase-actions,
    .hero-section__actions {
        flex-wrap: wrap;
    }

    .industry-menu-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .industry-tab-btn,
    .who-tab-btn {
        width: 100%;
    }

    .contact-info-side,
    .contact-form-side {
        min-width: 0;
    }

    .global-reach-map-wrapper {
        min-height: 360px;
    }
}

@media (max-width: 768px) {
    .section {
        padding-top: clamp(3rem, 9vw, 4.5rem);
        padding-bottom: clamp(3rem, 9vw, 4.5rem);
    }

    .section-header {
        max-width: 100%;
        margin-bottom: var(--space-8);
    }

    .page-banner,
    .hero-section {
        text-align: left;
    }

    .hero-section .container {
        padding-top: clamp(6rem, 16vw, 8rem);
        padding-bottom: clamp(3rem, 10vw, 5rem);
    }

    .hero-section__badge,
    .page-banner__breadcrumb,
    .service-showcase-tag {
        max-width: 100%;
        white-space: normal;
    }

    .hero-section__actions,
    .service-showcase-actions,
    .cta-banner__actions,
    .contact-actions {
        width: 100%;
        align-items: stretch;
    }

    .hero-section__actions .btn,
    .service-showcase-actions .btn,
    .cta-banner__actions .btn,
    .contact-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-section__stats,
    .stats-grid,
    .industries-bento-grid,
    .innovation-bento-grid,
    .ecosystem-bento,
    .qa-bento-grid,
    .benefits-bento-deck,
    .why-bento-grid,
    .services-grid,
    .services-grid--detailed,
    .core-values__grid,
    .tech-capsules-grid,
    .tech-categories,
    .contact-details-list,
    .social-circles-grid,
    .faq-grid,
    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    .industry-bento-card--wide,
    .industry-bento-card--large,
    .qa-bento-card--wide,
    .eco-card--featured,
    .eco-card--dark,
    .inno-card--large,
    .inno-card--primary {
        grid-column: auto !important;
    }

    .showcase-pane,
    .pane-features,
    .service-showcase-card,
    .editorial-layered-panel,
    .qa-bento-card,
    .benefit-editorial-card,
    .industry-bento-card,
    .tech-category,
    .eco-card,
    .contact-form-card,
    .contact-info-card {
        width: 100%;
    }

    .pane-features,
    .service-showcase-bullets,
    .approach-check-stack,
    .editorial-metrics-group,
    .eco-brands,
    .gis-partnership__capabilities {
        grid-template-columns: 1fr !important;
    }

    .process-flow-row,
    .process-flow-row--reverse {
        grid-template-columns: 1fr !important;
        gap: var(--space-5);
        margin-bottom: var(--space-8);
    }

    .process-flow-visual,
    .process-flow-info {
        width: 100%;
        justify-self: stretch;
    }

    .process-visual-canvas {
        min-height: 220px;
    }

    .process-info-card {
        padding: clamp(1.25rem, 5vw, 2rem);
    }

    .approach-photo-frame {
        margin-bottom: var(--space-10);
    }

    .approach-photo-badge {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: calc(100% - 2rem);
        margin: -2rem auto 0;
    }

    .tech-code-terminal {
        max-width: 100%;
    }

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

    .tech-icon-item {
        min-width: 0;
    }

    .contact-success-content {
        width: calc(100% - 2rem);
        padding: var(--space-6);
    }

    .modern-form .form-row,
    .form-row {
        grid-template-columns: 1fr !important;
    }

    .footer-bottom__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}

@media (max-width: 600px) {
    .container {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .page-banner {
        padding-top: 6rem;
        padding-bottom: 3rem;
    }

    .page-banner__title {
        font-size: clamp(2rem, 11vw, 2.75rem);
    }

    .hero-section__title {
        font-size: clamp(2rem, 11vw, 2.75rem);
    }

    .section-title {
        font-size: clamp(1.75rem, 9vw, 2.35rem);
    }

    .hero-section__stats {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .hero-stat {
        width: 100%;
        padding: var(--space-3);
        border-radius: var(--radius-lg);
        background: rgba(255, 255, 255, 0.08);
    }

    .hero-stat__divider {
        display: none;
    }

    .industry-menu-list,
    .who-tabs-nav,
    .tech-icons {
        grid-template-columns: 1fr;
    }

    .service-showcase-header,
    .values-banner,
    .cta-banner__inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .service-showcase-number {
        align-self: flex-start;
    }

    .service-showcase-card,
    .benefit-editorial-card,
    .editorial-layered-panel,
    .qa-bento-card,
    .why-bento-card,
    .industry-bento-card,
    .mission-card,
    .value-card,
    .stat-card,
    .eco-card,
    .tech-category,
    .contact-form-card,
    .contact-info-card {
        padding: clamp(1.125rem, 5vw, 1.5rem);
    }

    .cinematic-floating-narrative,
    .diff-floating-stat {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        margin-top: var(--space-4);
    }

    .diff-editorial-block {
        height: 240px !important;
    }

    .global-reach-map-wrapper {
        min-height: 300px;
    }

    .footer-grid {
        gap: var(--space-8);
    }
}

/* Final cross-page responsive compatibility layer. */
html { width: 100%; overflow-x: clip; }
body { width: 100%; min-width: 0; }
.entry-content,
.wp-block-group,
.wp-block-columns,
.wp-block-media-text,
.wp-block-table,
.wp-block-embed,
.wp-block-image { max-width: 100%; min-width: 0; }
.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.entry-content iframe { width: 100%; }
pre, code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1023px) {
    .site-header__nav { max-height: calc(100dvh - 70px); overscroll-behavior: contain; }
    .section, section { scroll-margin-top: 72px; }
    .reveal, [class*="animate-"] { max-width: 100%; }
}

@media (max-width: 767px) {
    .container { padding-right: max(1rem, env(safe-area-inset-right)); padding-left: max(1rem, env(safe-area-inset-left)); }
    .hero-section__title, .page-banner__title { font-size: clamp(1.85rem, 9vw, 2.75rem); }
    .section-title { font-size: clamp(1.65rem, 7.5vw, 2.25rem); }
    .industries-bento-grid,
    .innovation-bento-grid,
    .ecosystem-bento,
    .qa-bento-grid,
    .benefits-bento-deck,
    .why-bento-grid,
    .services-grid,
    .stats-grid,
    .core-values__grid,
    .footer-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .industry-bento-card,
    .inno-card,
    .eco-card,
    .qa-bento-card,
    .why-bento-card,
    .stat-card { grid-column: auto !important; grid-row: auto !important; }
    .industry-menu-list { grid-template-columns: minmax(0, 1fr); }
    .hero-section__actions .btn,
    .cta-banner__actions .btn { width: 100%; justify-content: center; }
    input, select, textarea { width: 100%; min-width: 0; font-size: 16px; }
    .contact-success-overlay,
    .modal-overlay { padding: 1rem; overflow-y: auto; }
    .contact-success-content,
    .modal-content { width: 100%; max-height: calc(100dvh - 2rem); overflow-y: auto; }
}

@media (max-width: 479px) {
    .site-header__logo { max-width: calc(100vw - 5rem); }
    .site-header__logo img, .site-logo img { max-height: 42px; width: auto; }
    .hero-section { min-height: 100svh; height: auto; }
    .hero-section__stats { grid-template-columns: minmax(0, 1fr); }
    .hero-stat { width: 100%; }
    .team-photo { flex-basis: 100%; }
    .eco-brands { grid-template-columns: minmax(0, 1fr) !important; }
    .process-timeline__item,
    .process-timeline__item--odd { padding-left: 58px; }
    .process-timeline::before,
    .process-timeline__marker { left: 22px; }
    .footer-bottom__links { align-items: center; text-align: center; }
}

@media (hover: none) and (pointer: coarse) {
    .service-card:hover,
    .industry-card:hover,
    .why-bento-card:hover { transform: none; }
    a, button, input, select, textarea { touch-action: manipulation; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}

@media (max-width: 420px) {
    .container {
        padding-right: 0.875rem;
        padding-left: 0.875rem;
    }

    .hero-section__title,
    .page-banner__title {
        font-size: 1.85rem;
    }

    .hero-section__subtitle,
    .page-banner__subtitle,
    .section-subtitle {
        font-size: 1rem;
    }

    .btn {
        min-height: 44px;
        padding-right: 1rem;
        padding-left: 1rem;
        font-size: 0.875rem;
    }

    .hero-section__badge,
    .page-banner__breadcrumb {
        font-size: 0.75rem;
    }

    .process-visual-canvas {
        min-height: 180px;
    }

    .approach-photo-badge,
    .contact-success-content {
        width: 100%;
    }

    .footer-bottom__links {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* Final overflow guards for admin-entered content and uploaded media. */
@media (max-width: 992px) {
    .site-header__nav {
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .site-header__nav .nav-menu,
    .dropdown-menu {
        width: 100%;
    }

    .site-header__nav .nav-link,
    .dropdown-menu .nav-link {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 768px) {
    .about-snippet__media img,
    .cinematic-main-frame img,
    .approach-photo-frame img,
    .service-showcase-card img,
    .inno-card__bg img,
    .gis-partnership__media img,
    .map-placeholder img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .service-showcase-visual,
    .approach-editorial-right,
    .tech-canvas-column,
    .contact-form-side,
    .contact-info-side,
    .footer-col {
        min-width: 0;
    }

    .contact-details-list a,
    .footer-contact__item a,
    .footer-nav a,
    .footer-bottom__copy,
    .footer-bottom__links,
    .social-circle__label {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 600px) {
    .footer-main {
        padding-top: var(--space-12);
        padding-bottom: var(--space-10);
    }

    .footer-social .social-links,
    .social-circles-grid {
        justify-content: flex-start;
    }

    .other-connect,
    .faq-section,
    .contact-main-wrap {
        overflow: hidden;
    }
}


/* Cross-template responsive safety net for managed and editor-authored content. */
:is(main, #content, .site-content) { min-width: 0; }
:is(main, #content, .site-content) :where(img, video, canvas, iframe, svg) { max-width: 100%; }
:is(main, #content, .site-content) :where(input, select, textarea, button) {
    max-width: 100%;
    min-width: 0;
}
:is(main, #content, .site-content) :where(p, li, h1, h2, h3, h4, h5, h6, a) {
    overflow-wrap: anywhere;
}
:is(main, #content, .site-content) [style*="display: flex"] > *,
:is(main, #content, .site-content) [style*="display:flex"] > *,
:is(main, #content, .site-content) [style*="grid-template-columns"] > * {
    min-width: 0;
}
:is(main, #content, .site-content) table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
    :is(main, #content, .site-content) [style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    :is(main, #content, .site-content) [style*="width:"] {
        max-width: 100% !important;
    }
    :is(main, #content, .site-content) [style*="display: flex"],
    :is(main, #content, .site-content) [style*="display:flex"] {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    :is(main, #content, .site-content) :where(.btn, button, input[type="submit"]) {
        white-space: normal;
    }
}