/* =====================================================================
   BENEVO — Responsive layout
   Mobile-specific designs, not just a scaled-down desktop.
   ===================================================================== */

/* ---------- Desktop navigation (≥1100px) ---------- */
@media (min-width: 1100px) {
    .nav-links { display: flex; }
    .nav-cta { display: inline-flex; }
    .nav-toggle, .mobile-menu { display: none !important; }
}
@media (min-width: 1100px) and (max-width: 1279.98px) {
    .nav-links { gap: 0; }
    .nav-links a { padding: .55rem .6rem; font-size: .86rem; }
    .nav-links a::after { left: .6rem; right: .6rem; }
    .nav-bar { gap: 1rem; }
}
@media (min-width: 576px) and (max-width: 1099.98px) {
    .nav-cta { display: inline-flex; margin-left: auto; }
    .nav-toggle { margin-left: .5rem; }
}

/* ---------- Large tablets / small laptops (<1200px) ---------- */
@media (max-width: 1199.98px) {
    .values-grid .value-card { flex-basis: calc(33.333% - 1.25rem); }
    .approach { gap: .75rem; }
    .xp-node { width: 230px; }
    .logo-grid--clients { grid-template-columns: repeat(4, 1fr); }
    .highlight-grid { grid-template-columns: repeat(2, 1fr); }
    .explorer { grid-template-columns: 310px 1fr; }
    .contact-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tablets (<992px) ---------- */
@media (max-width: 991.98px) {
    :root { --header-h: 76px; }

    .hero-copy { text-align: center; }
    .hero-copy .eyebrow::after { display: none; }
    .hero-lead { margin-left: auto; margin-right: auto; }
    .hero-actions, .hero-chips { justify-content: center; }
    .hero-visual { margin: 0 auto; max-width: 520px; }

    .page-hero-media { inset: 0; }
    .page-hero-media::after { background: linear-gradient(180deg, rgba(13, 27, 76, .88), rgba(13, 27, 76, .78) 60%, rgba(8, 18, 58, .92)); }

    .section-split { flex-direction: column; align-items: flex-start; }

    /* Expertise infographic → two-column list with connector */
    .xp-map { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; }
    .xp-lines { display: none; }
    .xp-core { position: relative; left: auto; top: auto; transform: none; width: 190px; margin-bottom: 2.75rem; }
    .xp-core::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -2.75rem;
        width: 2px;
        height: 2.75rem;
        background: linear-gradient(var(--gold), rgba(212, 175, 55, .2));
    }
    .xp-nodes { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1rem; border-top: 2px solid rgba(212, 175, 55, .35); }
    .xp-node { position: static; transform: none; width: auto; }
    .xp-node a { height: 100%; }

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

    /* Approach → vertical timeline */
    .approach { grid-template-columns: 1fr; gap: 0; max-width: 560px; margin: 0 auto; }
    .approach::before { top: 20px; bottom: 20px; left: 35px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, transparent, var(--gold) 8%, var(--gold) 92%, transparent); }
    .approach-step { display: grid; grid-template-columns: 72px 1fr; column-gap: 1.25rem; text-align: left; padding: 0 0 2rem; }
    .approach-marker { grid-row: span 2; width: 72px; height: 72px; margin: 0; }
    .approach-icon { font-size: 1.5rem; }
    .approach-title { align-self: end; margin-bottom: .25rem; }

    .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
    .gallery-grid { columns: 2; }

    .logo-grid--partners { grid-template-columns: repeat(2, 1fr); }
    .logo-grid--clients { grid-template-columns: repeat(3, 1fr); }

    .cta-inner { grid-template-columns: 1fr; text-align: center; }
    .cta-text { margin: 0 auto; }
    .cta-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }

    .contact-layout { grid-template-columns: 1fr; }
    .contact-aside { display: grid; grid-template-columns: 1fr 1.2fr; }
    .contact-aside-media { height: 100%; min-height: 300px; }
    .contact-aside-media::after { background: linear-gradient(90deg, transparent 50%, var(--navy-900)); }
    .contact-aside-body { margin: 0; padding: 2.25rem; }

    .explorer { grid-template-columns: 1fr; }
    .explorer-tabs { grid-template-columns: repeat(2, 1fr); }
    .explorer-tab:hover { transform: none; }

    .service-cover { min-height: 260px; }
    .service-detail { scroll-margin-top: 130px; }

    .audience-wheel { max-width: 480px; }
}

/* ---------- Large phones (<768px) ---------- */
@media (max-width: 767.98px) {
    body { font-size: 1rem; }
    .section-heading { margin-bottom: 2.5rem; }

    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat { padding: 1.25rem .75rem; }
    .stat:nth-child(3) { border-left: 0; }
    .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .stats--light .stat:nth-child(n + 3) { border-top-color: rgba(255, 255, 255, .08); }

    .values-grid .value-card { flex-basis: calc(50% - 1.25rem); }
    .why-grid, .service-cards { grid-template-columns: 1fr; }
    .xp-nodes { grid-template-columns: 1fr; }

    .flow-diagram { flex-direction: column; align-items: stretch; text-align: center; }
    .flow-col { grid-template-columns: 1fr 1fr; }
    .flow-pill { justify-content: center; }
    .flow-arrow { transform: rotate(90deg); }

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

    .contact-strip { grid-template-columns: 1fr; }
    .contact-aside { display: flex; }
    .contact-aside-media { height: 260px; min-height: 0; }
    .contact-aside-media::after { background: linear-gradient(0deg, var(--navy-900), transparent 55%); }
    .contact-aside-body { margin-top: -1.5rem; padding: 0 1.5rem 1.75rem; }
    .form-grid { grid-template-columns: 1fr; }

    .map-section { height: auto; display: flex; flex-direction: column; }
    .map-frame { height: 320px; }
    .map-card { position: static; max-width: none; border-radius: 0; }

    .footer-bottom { flex-direction: column; text-align: center; align-items: center; }

    /* About wheel → icon grid */
    .audience-wheel { aspect-ratio: auto; }
    .audience-wheel::before { display: none; }
    .audience-center { position: relative; left: auto; top: auto; transform: none; width: 140px; margin: 0 auto 1.5rem; }
    .audience-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; }
    .audience-list li { position: static; transform: none; width: auto; }
}

/* ---------- Phones (<576px) ---------- */
@media (max-width: 575.98px) {
    :root { --header-h: 70px; }
    .container { padding-left: 1.1rem; padding-right: 1.1rem; }
    .g-5, .gx-5 { --bs-gutter-x: 2.2rem; }
    .brand-logo { height: 36px; }
    .site-header.is-scrolled .brand-logo { height: 32px; }
    .site-header.is-scrolled { --header-h: 64px; }
    .service-nav { top: 64px; }

    .hero-actions .btn, .cta-actions .btn { width: 100%; }
    .hero-chips { display: none; }

    .hv-card--vision { width: 78%; padding: .75rem .85rem; }
    .hv-card--vision p { font-size: .8rem; }
    .hv-card-icon { width: 38px; height: 38px; font-size: 1.05rem; }
    .hv-card--badge { width: 86px; height: 86px; }
    .hv-badge-num { font-size: 1.5rem; }
    .hv-badge-text { font-size: .52rem; }

    .page-hero-title { font-size: 2.05rem; }

    .values-grid { gap: .75rem; }
    .values-grid .value-card { flex-basis: calc(50% - .75rem); padding: 1.5rem .9rem 1.3rem; }
    .value-icon { width: 54px; height: 54px; font-size: 1.3rem; margin-bottom: .9rem; }
    .value-name { font-size: 1rem; }
    .value-text { font-size: .82rem; }
    .eyebrow { letter-spacing: .13em; font-size: .7rem; }
    .why-card { padding: 1.6rem 1.4rem; }
    .contact-tile, .contact-card { display: grid; grid-template-columns: 54px 1fr; column-gap: 1rem; row-gap: .1rem; align-items: start; padding: 1.4rem; }
    .contact-tile-icon, .contact-card-icon { grid-row: 1 / span 4; }
    .contact-tile h3, .contact-card h2 { margin: .1rem 0 .2rem; }

    .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: .6rem; }
    .gallery-grid { column-gap: .6rem; }
    .gallery-item { margin-bottom: .6rem; }
    .gallery-overlay { padding: .7rem; }
    .gallery-caption { font-size: .74rem; }
    .gallery-zoom { display: none; }

    .logo-grid--partners { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .logo-grid--clients { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .logo-frame, .logo-grid--clients .logo-frame { height: 110px; padding: 1rem; }
    .logo-grid--large .logo-frame { height: 140px; }
    .logo-grid--large .logo-frame img { max-height: 80px; }
    .logo-name, .logo-grid--large .logo-name { font-size: .74rem; padding: .7rem .6rem; }
    .marquee li { height: 80px; padding: 0 1.4rem; }
    .marquee img { max-height: 50px; max-width: 130px; }

    .explorer-tabs { grid-template-columns: 1fr; }
    .explorer-panel-head { flex-direction: column; gap: .5rem; }
    .explorer-panel-num { font-size: 2.4rem; }

    .highlight-grid { grid-template-columns: 1fr; }
    .contact-cards { grid-template-columns: 1fr; }

    .service-cover { padding: 1.75rem; min-height: 230px; }
    .service-cover-num { top: 1.5rem; left: 1.75rem; width: 54px; height: 54px; font-size: 1.25rem; }
    .service-cover-icon { font-size: 5rem; }
    .area-item:hover { transform: none; }

    .cta-inner { border-radius: 24px; padding: 2.25rem 1.4rem; }
    .form-card { border-radius: 22px; }
    .btn-submit { width: 100%; }

    .lightbox-prev, .lightbox-next { top: auto; bottom: 1.25rem; transform: none; }
    .lightbox-prev { left: calc(50% - 64px); }
    .lightbox-next { right: calc(50% - 64px); }

    .about-media::before { inset: -10px 10% 16% -10px; }
    .portrait-quote { left: 0; right: 0; }
    .portrait-frame::before { inset: 14px -10px 70px 14px; }
}

/* ---------- Very small phones (<380px) ---------- */
@media (max-width: 379.98px) {
    .hero-title { font-size: 2.05rem; }
    .flow-col { grid-template-columns: 1fr; }
    .audience-list { grid-template-columns: 1fr 1fr; }
    .audience-list li { font-size: .74rem; }
    .bento { grid-template-columns: 1fr; grid-auto-rows: 200px; }
    .bento-item--1 { grid-column: auto; grid-row: auto; }
    .gallery-grid { columns: 1; }
}