/* =============================================================================
   Inovista — phones & tablets
   Loaded with media="(max-width: 1180px)". PC (style.css) is never affected.

   Layers:  base       → every touch device up to 1180px (tablets + phones)
            ≥768px     → tablets (portrait), ≥1024px → tablets (landscape)
            ≤767px     → phones: app-style layout, bottom tab bar, swipe rows
            ≤360px     → small phones
   ========================================================================== */

@media (max-width: 1180px) {

    /* ---- Foundations -------------------------------------------------------- */
    :root { --header: 72px; --gutter: 24px; --tabbar: 0px; }
    body { -webkit-tap-highlight-color: transparent; }
    a, button, summary, label { touch-action: manipulation; }
    .container { width: calc(100% - 2 * var(--gutter)); }
    .section { padding: 80px 0; }
    .section[id] { padding-top: calc(var(--header) + 32px); }
    .section-head { margin-bottom: 36px; }

    /* Swipe rows share one recipe; dots are added by mobile.js. */
    .swipe-row { scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    .swipe-row::-webkit-scrollbar { display: none; }
    .carousel-dots { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
    .carousel-dots[hidden] { display: none; }
    .carousel-dots button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
    .carousel-dots button::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: #c5d2e3; transition: width .3s var(--ease), background .3s; }
    .carousel-dots button.is-active::before { width: 20px; background: var(--blue-600); }
    .strengths .carousel-dots button::before { background: rgba(255, 255, 255, .28); }
    .strengths .carousel-dots button.is-active::before { background: #fff; }

    /* Carousel children should never wait for a scroll-reveal they can't trigger. */
    .cap-grid > .reveal, .project-grid > .reveal, .strength-grid > .reveal { opacity: 1; transform: none; transition: none; }
    .hero-bg img { animation: none; }

    /* ---- Header + slide-in drawer ------------------------------------------ */
    .site-header { transition: transform .35s var(--ease), background .3s, box-shadow .3s; }
    .site-header, .site-header.is-scrolled, body.menu-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
    .site-header.is-hidden { transform: translateY(-100%); }
    body.menu-open .site-header { transform: none; }
    .brand img { height: 32px; }
    .menu-toggle { display: block; }

    .nav { position: fixed; top: var(--header); right: 0; bottom: 0; z-index: 1001; width: min(420px, 100%); flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 18px calc(28px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transform: translateX(100%); transition: transform .4s var(--ease), visibility .4s; box-shadow: -24px 0 60px rgba(7, 26, 51, .18); }
    .nav.is-open { visibility: visible; transform: none; }
    .nav-scrim { display: block; position: fixed; inset: var(--header) 0 0; z-index: 999; background: rgba(4, 16, 31, .4); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
    body.menu-open .nav-scrim { opacity: 1; visibility: visible; }
    .nav > a:not(.btn), .nav-drop-trigger { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 8px; border-radius: 14px; color: var(--ink); font-size: 1.04rem; font-weight: 700; }
    .nav > a:not(.btn):active, .nav-drop-trigger:active, .nav > a[aria-current="page"] { background: var(--blue-50); }
    .nav-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue-50); color: var(--blue-600); font-size: 19px; flex: none; }
    .nav-drop-trigger > svg { margin-left: auto; font-size: 20px; transition: transform .3s; }
    .nav-drop:hover .nav-drop-trigger svg, .nav-drop:focus-within .nav-drop-trigger svg { transform: none; }
    .nav-drop.is-open .nav-drop-trigger > svg { transform: rotate(180deg); }
    .mega { position: static; width: auto; display: none; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 0 14px; color: var(--ink); background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
    .mega::before { display: none; }
    .nav-drop:hover .mega, .nav-drop:focus-within .mega { transform: none; }
    .nav-drop.is-open .mega { display: grid; }
    .mega a { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
    .mega a:hover { background: var(--blue-50); }
    .mega-icon { background: #fff; color: var(--blue-600); }
    .mega strong { font-size: .84rem; }
    .mega small { display: none; }
    .mega .mega-all { display: flex; flex-direction: row; align-items: center; grid-column: 1 / -1; background: var(--blue-50); border-color: var(--blue-100); }
    .nav-cta { width: 100%; min-height: 54px; margin: 14px 0 0; }
    .nav-extra { display: grid; gap: 4px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
    .nav-extra .zone-pill { margin: 0 0 8px; justify-self: start; color: var(--navy-800); background: var(--blue-50); border-color: var(--blue-100); }
    .nav-extra .zone-pill svg { color: var(--blue-600); }
    .nav-extra a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink-2); font-size: .9rem; font-weight: 600; }
    .nav-extra a svg { color: var(--blue-600); }

    /* ---- Hero ------------------------------------------------------------- */
    .hero { min-height: min(100svh, 860px); padding: calc(var(--header) + 40px) 0 130px; }
    .hero-content > * { max-width: 620px; }
    .hero-verticals a:hover { transform: none; }
    .feature:hover, .cap-card:hover, .project:hover, .strength:hover, .industry-tiles li:hover, .contact-cards a:hover, .service-tiles li:hover { transform: none; }

    /* ---- Sections that simply stack on touch devices ---------------------- */
    /* minmax(0, 1fr): a 1fr track would grow to fit wide swipe rows and widen the whole page */
    .about-grid, .industries-grid, .hseq-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .about-grid > *, .industries-grid > *, .hseq-grid > *, .contact-grid > *, .presence-grid > *, .capabilities .container > * { min-width: 0; }
    .orbit { max-width: 640px; margin-inline: auto; width: 100%; }
    .cta-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
    .cta-actions { justify-content: flex-start; max-width: none; }

    /* ---- Map: tap instead of hover ---------------------------------------- */
    .map-info { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #fff; }
    .map-info .sw { width: 14px; height: 14px; border-radius: 5px; }
    .map-info strong { display: block; font-size: .98rem; }
    .map-info span { display: block; color: rgba(255, 255, 255, .66); font-size: .82rem; font-weight: 600; }
    .map-info em { display: block; margin-top: 2px; color: var(--blue-300); font-size: .82rem; font-style: normal; font-weight: 700; }
    .map-info.is-pulse { animation: infoPulse .5s var(--ease); }
    @keyframes infoPulse { 40% { transform: scale(1.02); background: rgba(47, 123, 240, .18); } }
    .st.is-selected { stroke: #fff; stroke-width: 3; }
    .india-map .map-tip { display: none; }

    /* ---- Projects: swipe row on all touch devices ------------------------ */
    .project-grid { display: flex; gap: 14px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter) 18px; scroll-padding-inline: var(--gutter); }
    .project-grid > .project { flex: 0 0 42%; scroll-snap-align: start; }

    /* ---- Related capabilities: swipe row --------------------------------- */
    .related-rail { display: flex; gap: 14px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px; scroll-padding-inline: var(--gutter); }
    .related-card { flex: 0 0 34%; scroll-snap-align: start; }

    /* ---- Lighter effects for touch GPUs ------------------------------------- */
    .strength, .btn-glass, .hero-verticals a, .hero-kicker, .cap-num, .cap-count, .project-tag, .hero-facts { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .strength { background: rgba(255, 255, 255, .07); }

    /* ---- Forms: 16px text stops iOS from zooming into fields -------------- */
    .field input, .field select, .field textarea { font-size: 16px; min-height: 52px; }

    /* ---- Capability pages -------------------------------------------------- */
    .page-hero { padding: calc(var(--header) + 48px) 0 72px; }
    .arch { flex-wrap: wrap; gap: 12px; }
    .arch-node { flex: 1 1 calc(33.33% - 12px); }
    .arch-link { display: none; }
    .service-tiles, .group-grid { grid-template-columns: repeat(2, 1fr); }
    .facets { margin-top: 40px; }

    /* ---- Footer ------------------------------------------------------------ */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

    /* ======================================================================
       TABLETS (768px – 1180px)
       ====================================================================== */
    @media (min-width: 768px) {
        .fab { display: inline-flex; align-items: center; gap: 10px; position: fixed; z-index: 900; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); min-height: 56px; padding: 0 22px; border-radius: 999px; color: #fff; font-weight: 750; background: linear-gradient(135deg, var(--blue-600), var(--blue-700)); box-shadow: 0 16px 36px rgba(29, 100, 216, .45); opacity: 0; transform: translateY(24px) scale(.92); pointer-events: none; transition: opacity .3s, transform .35s var(--ease); }
        .fab svg { font-size: 20px; }
        .fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
        body.menu-open .fab { opacity: 0; pointer-events: none; }

        .feature-strip { grid-template-columns: repeat(2, 1fr); }
        .feature:nth-child(3) { border-left: 0; }
        .feature:nth-child(n + 3) { border-top: 1px solid var(--line); }

        .cap-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }

        .stats-grid { grid-template-columns: repeat(5, 1fr); }
        .stat { flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px 16px; }
        .stat strong { font-size: 1.8rem; }

        .presence-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
        .presence-copy { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; }
        .presence-copy > .eyebrow, .presence-copy > h2 { grid-column: 1 / -1; }
        .presence-copy > .pan-badge { grid-column: 1; margin-top: 22px; }
        .presence-copy > .zone-filter { grid-column: 2; align-self: end; justify-self: end; }
        .presence-copy > .zone-cards, .presence-copy > .map-legend { grid-column: 1 / -1; }
        .india-map { max-width: 640px; width: 100%; margin-inline: auto; }
        .map-info { max-width: 640px; width: 100%; margin-inline: auto; margin-top: -8px; }

        .strength-grid { grid-template-columns: repeat(2, 1fr); }
        .industry-tiles { grid-template-columns: repeat(4, 1fr); }
        .wheel { max-width: 400px; }
        .partner-board { grid-template-columns: minmax(0, 1fr); }
        .partner-plus { justify-self: center; }
        .contact-cards { grid-template-columns: repeat(3, 1fr); }
        .contact-cards a { flex-direction: column; align-items: flex-start; }
        .presence-copy > .zone-cards { grid-template-columns: 1fr 1fr; }
        .careers-teaser-inner, .apply-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
        .perks { grid-template-columns: 1fr 1fr; }
    }

    /* Tablets in landscape (iPad 1024–1180) get more columns */
    @media (min-width: 1024px) {
        .feature-strip { grid-template-columns: repeat(4, 1fr); }
        .feature:nth-child(3) { border-left: 1px solid var(--line); }
        .feature:nth-child(n + 3) { border-top: 0; }
        .cap-grid { grid-template-columns: repeat(3, 1fr); }
        .presence-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
        .presence-copy { display: block; }
        .presence-copy > .zone-filter { display: inline-flex; }
        .map-info { grid-column: 2; margin-top: -14px; }
        .strength-grid { grid-template-columns: repeat(4, 1fr); }
        .industries-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
        .industry-tiles { grid-template-columns: repeat(4, 1fr); }
        .hseq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
        .about-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
        .contact-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
        .careers-teaser-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
        .apply-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
        .perks { grid-template-columns: repeat(4, 1fr); }
        .perks li { flex-direction: column; align-items: flex-start; }
        .contact-cards { grid-template-columns: 1fr; }
        .contact-cards a { flex-direction: row; align-items: center; }
        .project-grid > .project { flex-basis: 31%; }
        .related-rail .related-card { flex-basis: 27%; }
        .service-tiles, .group-grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* Short landscape screens (phones held sideways) */
    @media (max-height: 520px) and (orientation: landscape) {
        .hero { min-height: auto; padding: calc(var(--header) + 24px) 0 120px; }
        .hero h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); }
        .hero-lead { margin-top: 14px; font-size: 1rem; }
        .hero-verticals { margin-top: 16px; }
        .hero-actions { margin-top: 20px; }
        .page-hero { padding: calc(var(--header) + 28px) 0 52px; }
        .fab { bottom: 16px; min-height: 48px; }
    }

    /* ======================================================================
       PHONES (≤ 767px) — app-style layout
       ====================================================================== */
    @media (max-width: 767px) {
        :root { --header: 60px; --gutter: 16px; --tabbar: 64px; }
        body { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
        .section { padding: 60px 0; }
        .section[id] { padding-top: calc(var(--header) + 28px); }
        .section-head { margin-bottom: 26px; }
        .section-head.split { flex-direction: column; align-items: flex-start; gap: 16px; }
        h2 { font-size: clamp(1.6rem, 7.2vw, 2rem); }
        .eyebrow { margin-bottom: 12px; font-size: 11px; }
        .lead { margin-top: 14px; font-size: 1rem; }
        .btn { min-height: 48px; }

        /* Header & drawer */
        .brand img { height: 26px; }
        .menu-toggle { width: 42px; height: 42px; border-radius: 12px; }
        .nav { width: 100%; box-shadow: none; }

        /* Bottom tab bar */
        .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 900; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(7, 26, 51, .08); transition: transform .3s var(--ease); }
        .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: .66rem; font-weight: 750; }
        .tabbar a svg { font-size: 22px; }
        .tabbar a.is-active { color: var(--blue-600); }
        .tabbar a.is-active::before { content: ''; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--blue-600); }
        .tabbar a.is-active svg { stroke-width: 2.2; }
        .tabbar .tabbar-cta { color: var(--blue-700); }
        .tabbar-fab { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -24px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--blue-600), var(--teal-600)); box-shadow: 0 10px 22px rgba(29, 100, 216, .38), 0 0 0 5px #fff; }
        .tabbar-cta:active .tabbar-fab { transform: scale(.94); }
        body.menu-open .tabbar, body.kb-open .tabbar { transform: translateY(115%); }
        .fab { display: none; }

        /* Hero: full-screen, text anchored to the thumb zone */
        .hero { align-items: flex-end; min-height: calc(100svh - var(--tabbar)); padding: calc(var(--header) + 24px) 0 92px; }
        .hero-bg { inset: 0; }
        .hero-bg img { object-position: 74% 16%; }
        .hero-shade, .page-hero .hero-shade { background: linear-gradient(180deg, rgba(var(--hero-light), 0) 0%, rgba(var(--hero-light), .1) 22%, rgba(var(--hero-light), .86) 44%, rgba(var(--hero-light), .97) 58%, rgb(var(--hero-light)) 100%); }
        .hero-kicker { margin-bottom: 14px; padding: 6px 12px 6px 9px; font-size: .66rem; letter-spacing: .05em; }
        .hero h1 { font-size: clamp(2.1rem, 10.4vw, 2.7rem); line-height: 1.04; }
        .hero-lead { margin-top: 14px; font-size: 1rem; }
        .hero-verticals { flex-wrap: nowrap; overflow-x: auto; margin: 20px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 30px), transparent); }
        .hero-verticals::-webkit-scrollbar { display: none; }
        .hero-verticals li { flex: none; }
        .hero-verticals a { padding: 8px 13px; }
        .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
        .hero-actions .btn { width: 100%; min-height: 52px; padding: 0 12px; font-size: .88rem; line-height: 1.2; text-align: center; white-space: normal; }

        .feature-strip { grid-template-columns: 1fr 1fr; margin-top: -64px; border-radius: 18px; }
        .feature { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 14px; }
        .feature:nth-child(3) { border-left: 0; }
        .feature:nth-child(n + 3) { border-top: 1px solid var(--line); }
        .feature-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
        .feature strong { font-size: .88rem; }
        .feature small { font-size: .74rem; }

        /* About: lifecycle becomes a swipeable timeline */
        .vm-cards { gap: 10px; margin-top: 22px; }
        .vm-cards article { padding: 14px; }
        .text-link { margin-top: 20px; }
        .orbit { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--gutter)); max-width: none; width: auto; }
        .orbit svg { display: none; }
        .orbit figcaption { position: static; order: -1; margin: 0 var(--gutter) 14px; }
        .orbit-list { display: flex; overflow-x: auto; padding: 6px var(--gutter) 6px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
        .orbit-list::-webkit-scrollbar { display: none; }
        .orbit-list li { position: relative; flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink-2); font-size: .76rem; font-weight: 750; text-align: center; scroll-snap-align: start; }
        .orbit-list li::before { content: ''; position: absolute; top: 21px; left: 50%; width: 100%; height: 3px; background: linear-gradient(90deg, var(--blue-500), var(--teal-500)); }
        .orbit-list li:last-child::before { display: none; }
        .orbit-list span { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--blue-500); color: var(--blue-600); font-size: .78rem; font-weight: 800; box-shadow: var(--shadow-1); }
        .orbit-list li:first-child span, .orbit-list li:last-child span { background: var(--blue-600); color: #fff; }

        /* Capabilities: one swipe row instead of nine stacked cards */
        .cap-grid { display: flex; gap: 12px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scroll-padding-inline: var(--gutter); }
        .cap-grid > .cap-card { flex: 0 0 84%; scroll-snap-align: start; }
        .cap-body { padding: 32px 18px 18px; }
        .cap-body strong { font-size: 1.08rem; }
        .depth-card { margin-top: 18px; padding: 20px 14px 16px; border-radius: 18px; }
        .depth-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
        .hero-figure strong { font-size: 2.6rem; }
        .depth-chart { --label: 122px; gap: 4px; }
        .depth-label { gap: 6px; padding-right: 8px; font-size: .74rem; }
        .depth-label svg { display: none; }
        .depth-bar { height: 12px; }
        .depth-bar b { font-size: .76rem; }
        .depth-chart:hover .depth-row { opacity: 1; }
        .depth-chart .chart-tip { display: none; }

        /* Stats */
        .stats-grid { grid-template-columns: 1fr 1fr; }
        .stat { flex-direction: row; align-items: center; gap: 10px; padding: 20px 6px; }
        .stat:nth-child(odd) { border-left: 0; }
        .stat:nth-child(n + 3) { border-top: 1px solid var(--stat-line); }
        .stat:last-child { grid-column: 1 / -1; justify-content: center; }
        .stat-icon { width: 38px; height: 38px; font-size: 18px; }
        .stat strong { font-size: 1.6rem; }
        .stat div > span { font-size: .74rem; }

        /* Presence: map first, then controls, info card and zone lists */
        /* PC centres these children; stacked on a phone they must stretch to the screen width */
        .presence-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
        .presence-copy { display: contents; }
        .presence-copy > .eyebrow { order: 1; align-self: flex-start; }
        .presence-copy > h2 { order: 2; }
        .presence-copy > .pan-badge { order: 3; margin-top: 20px; padding: 14px 16px; }
        .india-map { order: 4; margin: 16px calc(-1 * var(--gutter)) 0; }
        .india-map > svg { max-height: none; }
        .presence-copy > .zone-filter { order: 5; display: flex; width: 100%; margin-top: 4px; }
        .presence-copy > .zone-filter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
        .zone-filter button { justify-content: center; min-height: 44px; padding: 8px 2px; gap: 5px; font-size: .74rem; }
        .zone-filter button .sw { width: 9px; height: 9px; border-radius: 3px; }
        .map-info { order: 6; }
        .presence-copy > .zone-cards { order: 7; grid-template-columns: 1fr; margin-top: 12px; }
        .presence-copy > .map-legend { order: 8; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; white-space: nowrap; scrollbar-width: none; }
        .pan-badge strong { font-size: 1.45rem; }
        .pan-icon { width: 48px; height: 48px; font-size: 24px; }
        .zone-card { padding: 14px; }
        .zone-card li { padding: 6px 10px; }

        /* Projects */
        .project-grid > .project { flex-basis: 80%; }
        .project-map > svg { width: 44%; }
        .project-body { padding: 16px; }

        /* Strengths: two-row swipe grid */
        .strength-grid { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 46%; gap: 10px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px; scroll-padding-inline: var(--gutter); }
        .strength { gap: 6px; padding: 16px 14px; scroll-snap-align: start; }
        .strength span { width: 40px; height: 40px; font-size: 19px; }
        .strength strong { font-size: .9rem; }
        .strength small { font-size: .76rem; }

        /* Industries */
        .industry-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .industry-tiles li { gap: 10px; padding: 14px 10px; font-size: .76rem; }
        .industry-tiles svg { font-size: 23px; }

        /* HSEQ: wheel between heading and pillars */
        .hseq-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
        .hseq-copy { display: contents; }
        .hseq-copy > .eyebrow { order: 1; align-self: flex-start; }
        .hseq-copy > h2 { order: 2; }
        .wheel { order: 3; max-width: 290px; margin: 22px auto 6px; }
        .hseq-copy > .pillars { order: 4; margin: 16px 0 14px; gap: 8px; }
        .hseq-copy > .chips { order: 5; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
        .hseq-copy > .chips li { flex: none; }
        .pillars li { padding: 12px 14px; }
        .pillars li.is-active { transform: none; }

        /* Partner: tabs instead of two long chip boards */
        .partner-tabs { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 14px; background: var(--surface); }
        .partner-tabs button { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font-size: .86rem; font-weight: 750; }
        .partner-tabs button[aria-selected="true"] { background: #fff; color: var(--blue-700); box-shadow: var(--shadow-1); }
        .m-js .partner-board[data-tab="0"] .partner-col:last-of-type, .m-js .partner-board[data-tab="1"] .partner-col:first-of-type { display: none; }
        .m-js .partner-board .board-label { display: none; }
        .partner-board { grid-template-columns: minmax(0, 1fr); gap: 0; }
        .partner-plus { display: none; }
        .partner-col { padding: 18px 16px; }
        .chips-lg li { padding: 8px 12px; font-size: .84rem; }

        /* CTA band */
        .cta-band { padding: 44px 0; }
        .cta-inner h2 { font-size: 1.45rem; }
        .cta-actions { display: grid; width: 100%; gap: 10px; }
        .cta-actions .btn { width: 100%; }

        /* Contact: quick-action tiles + thumb-friendly form */
        .contact-grid { gap: 26px; }
        .contact-cards { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
        .contact-cards a { flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; text-align: center; }
        .contact-cards strong { display: none; }
        .contact-cards small { font-size: .66rem; letter-spacing: .04em; }
        .contact-form { gap: 14px; margin: 0 -4px; padding: 20px 16px; border-radius: 20px; }
        .segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .segmented span { justify-content: center; width: 100%; min-height: 44px; align-items: center; padding: 8px 10px; text-align: center; }
        .form-row { grid-template-columns: 1fr; gap: 14px; }
        .form-submit { width: 100%; }

        /* Footer: collapsible columns */
        .site-footer { padding-top: 48px; }
        .footer-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 16px; }
        .footer-brand { padding-bottom: 26px; }
        .footer-brand img { width: 220px; }
        .footer-col { gap: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
        .footer-col strong { display: flex; align-items: center; justify-content: space-between; min-height: 54px; margin: 0; cursor: pointer; }
        .footer-col > a { padding: 9px 0; }
        .m-js .footer-col strong::after { content: ''; width: 8px; height: 8px; margin-right: 6px; border-right: 2px solid var(--blue-300); border-bottom: 2px solid var(--blue-300); transform: rotate(45deg); transition: transform .3s var(--ease); }
        .m-js .footer-col.is-open strong::after { transform: rotate(-135deg); }
        .m-js .footer-col:not(.is-open) > a { display: none; }
        .footer-col.is-open { padding-bottom: 12px; }
        .footer-bottom { flex-direction: column; gap: 10px; padding-bottom: 22px; }

        /* Capability pages */
        .page-hero { display: flex; align-items: flex-end; min-height: calc(86svh - var(--tabbar)); padding: calc(var(--header) + 28px) 0 40px; }
        .page-hero h1 { font-size: clamp(1.8rem, 8.4vw, 2.3rem); }
        .crumbs { margin-bottom: 14px; font-size: .76rem; }
        .hero-facts { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-top: 22px; }
        .hero-facts li { padding: 12px; }
        .hero-facts strong { font-size: 1.2rem; }
        .hero-facts span { font-size: .68rem; }
        .page-hero .hero-actions .btn { font-size: .86rem; }

        .flow { grid-template-columns: 1fr; gap: 0; }
        .flow::before, .flow::after { display: block; top: 28px; left: 27px; right: auto; width: 3px; height: calc(100% - 56px); }
        .flow::after { height: 0; transition: height 2s var(--ease) .2s; }
        .flow.is-visible::after { width: 3px; height: calc(100% - 56px); }
        .flow li { flex-direction: row; gap: 16px; padding: 7px 0; text-align: left; }
        .flow span { flex: none; width: 56px; height: 56px; }
        .flow strong { font-size: 1rem; }

        .arch { flex-direction: column; flex-wrap: nowrap; gap: 0; }
        .arch-node { flex: none; flex-direction: row; gap: 14px; padding: 14px 16px; text-align: left; }
        .arch-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
        .arch-node small { margin-left: auto; }
        .arch-link { display: block; align-self: center; width: 3px; height: 26px; }
        .arch-link i { top: 0; left: -3px; animation-name: packetDown; }
        @keyframes packetDown { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 9px); opacity: 0; } }

        .facets { margin-top: 28px; padding: 18px 16px; }
        .facet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
        .facet-label { width: 100%; min-width: 0; }
        .facet .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
        .facet .chips li { flex: none; }

        .service-tiles { grid-template-columns: 1fr; gap: 8px; }
        .service-tiles li { padding: 12px 14px; font-size: .9rem; }
        .m-js .service-tiles.is-collapsed li:nth-child(n + 9) { display: none; }
        .show-all { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin-top: 12px; border: 1px solid var(--blue-100); border-radius: 14px; background: #fff; color: var(--blue-700); font-weight: 750; }
        .show-all svg { transition: transform .3s; }
        .show-all[aria-expanded="true"] svg { transform: rotate(180deg); }

        .group-grid { grid-template-columns: 1fr; gap: 10px; }
        .group-card { padding: 0 16px; }
        .group-card header { margin: 0; padding: 16px 0; border-bottom: 0; cursor: pointer; }
        .m-js .group-card header::after { content: ''; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .3s; }
        .m-js .group-card.is-open header::after { transform: rotate(-135deg); }
        .m-js .group-card:not(.is-open) ul { display: none; }
        .group-card.is-open { padding-bottom: 16px; }
        .group-card.is-open header { margin-bottom: 12px; border-bottom: 1px solid var(--line); }
        .group-card header h3 { margin-right: auto; }

        .related-card { flex-basis: 72%; }

        .legal { padding: calc(var(--header) + 36px) 0 64px; }

        .careers-teaser-inner, .apply-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
        .ct-copy .btn { width: 100%; margin-top: 20px; }
        .ct-roles a { padding: 14px; }
        .perks-section { padding-top: 36px; }
        .perks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .perks li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
        .perks span { width: 40px; height: 40px; font-size: 19px; }
        .perks strong { font-size: .88rem; }
        .perks small { font-size: .74rem; }
        .job-main { flex-wrap: wrap; padding: 16px; gap: 12px; }
        .job-icon { width: 44px; height: 44px; border-radius: 14px; font-size: 20px; }
        .job-head { flex-basis: calc(100% - 60px); }
        .job-head h3 { font-size: 1.02rem; }
        .job-meta { font-size: .78rem; gap: 4px 12px; }
        .job-apply { width: 100%; }
        .job-more summary { padding: 12px 16px; }
        .job-more p { padding: 0 16px; }
        .job-reqs { grid-template-columns: 1fr; padding: 10px 16px 16px; }
        .apply-steps { gap: 8px; margin-top: 20px; }
        .apply-steps li { padding: 12px 14px; }
        .dropzone { padding: 14px; }
        .segmented-link { justify-content: center; min-height: 44px; grid-column: 2; }
    }

    /* Small phones (≤ 360px) */
    @media (max-width: 360px) {
        .hero h1 { font-size: 2.05rem; }
        .hero-actions { grid-template-columns: 1fr; }
        .cap-grid > .cap-card { flex-basis: 88%; }
        .strength-grid { grid-auto-columns: 62%; }
        .industry-tiles { grid-template-columns: 1fr 1fr; }
        .tabbar a { font-size: .6rem; }
        .stat strong { font-size: 1.4rem; }
        .zone-filter button { font-size: .74rem; }
    }
}