/*
 * Large desktop layouts
 *
 * The base 1180px container keeps ordinary laptop screens readable. On wide
 * monitors, however, it leaves the entire experience looking like a scaled-down
 * island. These breakpoints give the composition more canvas while retaining
 * deliberate text measure inside each column.
 */
@media (min-width: 1600px) {
    :root { --container: 1440px; }

    .header-inner { height: 94px; }
    .site-nav { gap: 40px; font-size: 15px; }
    .site-nav .nav-cta { padding: 11px 21px; }

    .hero-grid,
    .subhero-grid {
        grid-template-columns: minmax(0, 650px) minmax(580px, 640px);
        justify-content: space-between;
        gap: clamp(100px, 7vw, 160px);
    }

    .hero-copy { padding-top: 20px; }
    .hero h1,
    .subhero h1 { font-size: clamp(104px, 5.7vw, 116px); }
    .hero-lead { font-size: 25px; }
    .hero-text { max-width: 640px; font-size: 17px; }
    .button { padding: 14px 24px; font-size: 15px; }
    .trust-row { font-size: 12px; }

    .hero-visual {
        width: 620px;
        justify-self: end;
        transform: scale(1.08);
        transform-origin: center;
    }

    .section-heading { grid-template-columns: 1.35fr .65fr; gap: 120px; }
    .statement-grid,
    .story-grid { grid-template-columns: .8fr 2.2fr; gap: 120px; }
    .culture-preview-grid,
    .human-grid { gap: 140px; }
}

@media (min-width: 2200px) {
    :root { --container: 1680px; }

    .header-inner { height: 102px; }
    .brand-mark { width: 42px; height: 42px; }
    .site-nav { gap: 46px; font-size: 16px; }

    .hero-grid,
    .subhero-grid {
        grid-template-columns: minmax(0, 720px) minmax(620px, 700px);
        gap: 180px;
    }

    .hero h1,
    .subhero h1 { font-size: 124px; }
    .hero-lead { font-size: 27px; }
    .hero-text { max-width: 690px; font-size: 18px; line-height: 1.8; }
    .eyebrow { font-size: 12px; }

    .hero-visual {
        width: 660px;
        transform: scale(1.16);
    }

    .direction-grid,
    .solution-grid,
    .principle-matrix { gap: 28px; }
    .capability-card,
    .feature-panel { padding-inline: 40px; }
}

/* Height rules still take priority on ultrawide but vertically short windows. */
@media (min-width: 1600px) and (max-height: 820px) {
    .header-inner { height: 68px; }
    .hero h1,
    .subhero h1 { font-size: clamp(64px, 8vh, 82px); }
    .hero-lead { font-size: 20px; }
    .hero-text { font-size: 14px; }
    .hero-visual { transform: scale(.92); }
}