/* ==========================================================================
   MOBILE / RESPONSIVE OVERRIDES — mobile.css
   ==========================================================================
   Loaded AFTER style.css on every page, so anything here wins by cascade.
   House rules (locked):
     · fixed px values only — NO clamp() / vw / vh for fonts (Patrick edits px)
     · desktop styles in style.css stay untouched; this file only overrides
     · type scale + spacing vars live in :root (style.css) — override the VARS
       inside a breakpoint where possible instead of restyling components

   Breakpoint system (Patrick, 2026-07-17):
     min-1200        desktop and up (use only for desktop-ONLY tweaks)
     lg      max-1199.98   small laptops
     md-lg   max-991.98    tablets
     md      max-767.98    large phones / portrait tablets
     sm      max-575.98    phones
     xs      max-381.98    small phones
   ========================================================================== */


/* ==========================================================================
   ██ MIN 1200px — desktop and up (rarely needed; desktop is the default)
   ========================================================================== */
@media (min-width: 1200px) {

}


/* ==========================================================================
   ██ LG — max 1199.98px (small laptops)
   Typical work: container/gutter tightening, nav spacing, 5-col grids → 4
   ========================================================================== */
@media (max-width: 1199.98px) {
    /* :root {
        --gutter: 40px;
        --fs-hero: 72px;
        --fs-stat: 60px;
    } */

    /* --- NAV --- */

    /* --- HERO --- */

    /* --- GRIDS (sidx / rsys / svc2 / pgal) --- */

    /* --- SECTIONS --- */
}


/* ==========================================================================
   ██ MD-LG — max 991.98px (tablets)
   Typical work: mega-dropdowns → mobile menu, 2-col splits stack,
   4-col rows → 2×2, footer grid → 2 col
   ========================================================================== */
@media (max-width: 991.98px) {
    /* :root {
        --sec-y: 100px;
        --fs-hero: 60px;
        --fs-h1: 40px;
    } */

    /* --- NAV / MOBILE MENU --- */

    /* --- HERO --- */

    /* --- SPLITS (abt / faq / twr / spk-split / pbox) --- */

    /* --- GRIDS --- */

    /* --- FOOTER --- */
}


/* ==========================================================================
   ██ MD — max 767.98px (large phones)
   Typical work: everything single-column, creds strip wraps,
   stats 2×2, CTA band stacks
   ========================================================================== */
@media (max-width: 767.98px) {
    /* :root {
        --sec-y: 80px;
        --gutter: 24px;
        --fs-hero: 48px;
        --fs-h1: 34px;
        --fs-statement: 26px;
        --fs-stat: 48px;
    } */

    /* --- NAV --- */

    /* --- HERO / PG-HERO --- */

    /* --- CREDS STRIP --- */

    /* --- GRIDS → 1 COL --- */

    /* --- CTA BAND --- */

    /* --- FORMS (contact) --- */
}


/* ==========================================================================
   ██ SM — max 575.98px (phones)
   ========================================================================== */
@media (max-width: 575.98px) {
    /* :root {
        --fs-hero: 40px;
        --fs-h1: 30px;
        --fs-h2: 22px;
        --fs-lede: 16px;
    } */

    /* --- TYPE --- */

    /* --- SPACING --- */

    /* --- BUTTONS (full-width?) --- */
}


/* ==========================================================================
   ██ XS — max 381.98px (small phones)
   ========================================================================== */
@media (max-width: 381.98px) {
    /* :root {
        --fs-hero: 34px;
        --gutter: 16px;
    } */

}