/* ==========================================================================
   Responsive layer — loaded last (style.css → ui.css → motion.css → here).
   Only layout / sizing / spacing overrides; no new motion.
   Sections: global · touch targets · header & nav · per-component ·
             tablet (640–1099) · desktop (≥1100) · large (≥1440 / ≥1800) ·
             small phones (≤480 / ≤360) · reduced motion
   ========================================================================== */

/* ------------------------------------------------------------------ Global */
html { overflow-x: clip; }
body { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }

/* Respect notches (env() resolves to 0 unless viewport-fit=cover is set) */
.wrap {
    width: min(100% - 2.5rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px), var(--wrap));
}

h1, h2, h3, h4 { overflow-wrap: break-word; }
.lead { overflow-wrap: break-word; }

/* grid / flex children must be allowed to shrink below their content width */
.hero-inner > *, .hero-body > *, .contact-grid > *, .detail-grid > *, .process-split > *,
.svc > *, .faq-split > *, .footer-top > *, .cta-inner > * { min-width: 0; }

img, video, iframe { max-width: 100%; height: auto; }
pre { max-width: 100%; }

/* ---------------------------------------------------------- Touch targets */
.icon-btn, .menu-btn { width: 44px; height: 44px; flex: none; }
.btn { min-height: 44px; }
.filter { min-height: 44px; }

@media (pointer: coarse) {
    .btn-small { min-height: 44px; }
    .crumbs a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
    .footer-links a { display: inline-block; padding-block: 0.45rem; }
    .footer-links li { margin-block: 0; }
    .to-top { display: inline-block; padding-block: 0.6rem; }
    .faq-item summary { min-height: 52px; }
    .dd-opt { min-height: 44px; display: flex; align-items: center; }
}

/* iOS zooms on inputs < 16px */
.field input, .field select, .field textarea, .dd-btn { font-size: max(1rem, 16px); }

/* --------------------------------------------------------- Header & nav */
.site-header { padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
.logo { min-width: 0; }

@media (max-width: 899px) {
    .nav {
        max-height: calc(100vh - var(--header-h));
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: max(1.2rem, env(safe-area-inset-bottom, 0px));
        box-shadow: 0 24px 40px -28px rgba(11, 11, 12, 0.45);
    }
    .nav a { min-height: 48px; display: flex; align-items: center; }
}

/* --------------------------------------------------------- Project mockups */
.screen { min-width: 0; max-width: 100%; }
.desk { max-width: 100%; }
.d-main, .d-kpi, .d-tr > *, .d-th > *, .d-row > * { min-width: 0; }
.d-kpi small { overflow-wrap: break-word; }
.u-tx-main b, .u-tx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
    .desk:not(.is-fit) .desk-body { min-height: 0; font-size: 0.8rem; }
    .desk:not(.is-fit) .desk-bar em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .desk:not(.is-fit) .d-main, .desk:not(.is-fit) .d-main--full { padding: 0.85rem; }
    .desk:not(.is-fit) .d-kpi { padding: 0.65rem; }
    .desk:not(.is-fit) .d-kpi b { font-size: 1.35rem; }
    .desk:not(.is-fit) .d-th, .desk:not(.is-fit) .d-tr { gap: 0.6rem; padding-inline: 0.2rem; }
    /* ledger keeps Voucher · Date · Account: give the account the room */
    .desk:not(.is-fit) .d-table--6 .d-th, .desk:not(.is-fit) .d-table--6 .d-tr { grid-template-columns: auto auto minmax(0, 1fr); }
    .desk:not(.is-fit) .d-row { gap: 0.6rem; }
}

/* 2-up phones need ≥ ~200px each; below that, one per row */
@media (max-width: 559px) {
    .screens:not(.screens--wide) { grid-template-columns: minmax(0, 1fr); }
    .screens:not(.screens--wide) .phone { width: min(100%, 260px); }
}
@media (min-width: 560px) and (max-width: 999px) {
    .screens:not(.screens--wide) { gap: 2.4rem 1.2rem; }
}

/* ---------------------------------------------------------------- Footer */
.site-footer { padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px)); }
.footer-links a { overflow-wrap: anywhere; }

/* =================================================== Phones (≤ 640px) */
@media (max-width: 640px) {
    /* Hero art: the swatch card sat on top of the terminal text.
       Stack it below, tucked over the terminal's bottom-right corner. */
    .hero-art { display: flex; flex-direction: column; padding: 2.4rem 0.4rem 3rem; }
    .hero-art .art-frame { order: 1; }
    .hero-art .art-swatches {
        order: 2;
        position: relative;
        top: auto;
        right: auto;
        align-self: flex-end;
        margin: -2.6rem -0.2rem 0 0;
        width: min(190px, 62%);
        transform: rotate(2deg);
    }
    .hero-art .art-cursor { right: auto; left: 8%; bottom: 0.4rem; }
    .hero--studio .terminal-body { min-height: 13rem; font-size: 0.8rem; padding: 1.1rem 1rem 2.6rem; }

    /* work filters: 2×2 segmented control instead of a ragged wrap */
    .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 22px; }
    .filter { padding-inline: 0.6rem; }

    /* footer: page + connect lists side by side */
    .footer-top { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 1.2rem; }
    .site-footer .footer-links a { font-size: 0.95rem; overflow-wrap: normal; }
    .footer-top > .footer-brand { grid-column: 1 / -1; }
    .footer-mail { grid-template-columns: minmax(0, 1fr) auto; }

    .section-row > .btn { margin-bottom: 2.4rem; }
    .cta-inner { border-radius: 24px; }
    .cta-deco { inset: 12px; }
}

/* ======================================= Tablet (640–899) — intentional */
@media (min-width: 640px) and (max-width: 899px) {
    .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cards3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tiers > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .story { gap: 1.4rem; }
    .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .projects--featured .project-item:first-child .mock { aspect-ratio: 16 / 8; }
    .detail-side .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-side .facts > div:last-child { grid-column: 1 / -1; }
    .hero-art { max-width: 620px; margin-inline: auto; width: 100%; }
}

/* ============================================ Small desktop (900–1099) */
@media (min-width: 900px) and (max-width: 1099px) {
    .principles:not(.principles--two) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nav a { padding-inline: 0.7rem; }
    .svc { gap: 2.8rem; }
    .contact-grid { gap: 2.6rem; }
    .detail-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 2.6rem; }
}
@media (min-width: 900px) and (max-width: 1099px) {
    .contact-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================== Large screens (≥1440 / ≥1800) */
@media (min-width: 1440px) {
    :root { --wrap: 1320px; }
}
@media (min-width: 1800px) {
    /* scale the whole rem-based system up a notch so 1920 isn't a small
       island in a sea of background */
    html { font-size: 106.25%; }
    :root { --wrap: 1480px; --header-h: 76px; }
    .hero--studio h1.hero-title { font-size: clamp(2.9rem, 6.6vw, 8rem); }
    .page-head h1 { font-size: clamp(2.8rem, 6.4vw, 7.6rem); }
}
@media (min-width: 2400px) {
    :root { --wrap: 1640px; }
}

/* ===================================================== Case-study pages */
.frame-tag { position: relative; z-index: 2; }
@media (max-width: 640px) {
    .screens { border-radius: 22px; }
    /* page-head facts: an odd last item (e.g. "Our role") takes the full row */
    .ph-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ph-meta > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .case-stage-head { flex-wrap: wrap; }
}
@media (min-width: 720px) and (max-width: 899px) {
    .story { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}