/* ============================================================================
 * La2etlak — HOMEPAGE (locked family 3-v3)
 * ============================================================================
 * Ported by HOMEPAGE-PILOT-PORT-001 from
 *   docs/design/locked/2026-08-11/phase-3-homepage-redesign-v3.html
 *
 * PORT, DO NOT INTERPRET. Values are copied from the proof's own stylesheet;
 * no number here was estimated from a screenshot.
 *
 * Breakpoints come from FINAL_DESIGN_FOUNDATION.md §7 ONLY. The board's 390px
 * frame proves the mobile *composition*; it never sets the activation width
 * (docs/design/IMPLEMENTATION_LEDGER.md §10).
 * ========================================================================== */


/* ============================================================================
 * 1. HERO ASSET INDIRECTION
 * ----------------------------------------------------------------------------
 * ledger §15.5 constraint 1: the two canonical hero masters are referenced
 * through EXACTLY ONE replaceable indirection each, so a future admin hero
 * control (HOME-BRANDING-CMS-001) has one place to write to.
 *
 * THIS STYLESHEET NAMES NO ASSET. The `--heroDesktop` / `--heroMobile` custom
 * properties are set on `.heroBg` by resources/views/pages/home.blade.php from
 * `config/branding.php`, which is the single source — the same source the
 * page's `<link rel="preload">` hints and the brand mark read from. A literal
 * path here would be a second place to edit.
 *
 * Canonical parity assets — ledger §11.2 / §15.2. Separate desktop and mobile
 * masters are REQUIRED; the mobile hero is not a crop of the desktop one.
 *   desktop 2400 x 980   mobile 780 x 1460
 * Do not upscale, replace or generate a substitute (HOMEPAGE-HERO-DECISION-001).
 * ========================================================================== */


/* ============================================================================
 * 2. HERO   (proof lines 122-145)
 * ========================================================================== */
.la2-pg .hero { position: relative; overflow: hidden; }

.la2-pg .hero.photo {
    background: #0F2249;
    border-bottom: 0;
    min-height: 524px;
    display: flex;
    align-items: center;
}

.la2-pg .heroBg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--heroDesktop);
    background-size: cover;
    background-position: left bottom;
    background-repeat: no-repeat;
}

.la2-pg .hero.photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(58% 98% at 55% 50%, rgba(8, 18, 44, .78) 0%, rgba(8, 18, 44, .62) 42%, rgba(8, 18, 44, .24) 72%, rgba(8, 18, 44, 0) 100%),
        linear-gradient(to right, rgba(8, 18, 44, .05) 0%, rgba(8, 18, 44, .01) 18%, rgba(8, 18, 44, 0) 32%),
        linear-gradient(to top, rgba(8, 18, 44, .24) 0%, rgba(8, 18, 44, 0) 32%);
}

.la2-pg .heroi {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 56px 40px 60px;
    display: grid;
    justify-items: center;
}

/* `margin-left` is deliberately PHYSICAL, not logical.
   The photograph is never mirrored in RTL (proof §05 note): the subjects stay
   physically on the left in both directions, so the optical offset that keeps
   the search shell clear of the second man's shoulder must also stay
   physically rightward in both directions. This is the one documented
   exception to FOUNDATION §8 "logical properties only", and it is the proof's
   own decision, not a shortcut. */
.la2-pg .hcol {
    width: 100%;
    max-width: 740px;
    margin-left: 88px;
    text-align: center;
    min-width: 0;
}

.la2-pg .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.la2-pg .eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--orn);
    border-radius: 2px;
}
[dir="rtl"] .la2-pg .eyebrow { letter-spacing: 0; text-transform: none; font-size: 13px; }

.la2-pg .hero h1 { font-size: 46px; margin: 16px auto 14px; max-width: 24ch; color: var(--heroInk); }
[dir="rtl"] .la2-pg .hero h1 { font-size: 42px; max-width: 24ch; }

/* HOME-BRANDING-CMS-001 Phase 4 - Hero heading presets (admin: Homepage & Branding).
   Bounded modifiers on `.hero`; each affects ONLY the main heading. STANDARD is the
   locked 46 / 42 (desktop) and 29 / 27 (mobile) above and emits no class.
   Large / Extra Large are OD-6 candidate sizes (about +18% / +35%), awaiting the owner's
   visual lock; the mobile pair lives inside the 767.98px block below. */
.la2-pg .hero.hero--font-sans h1 { font-family: 'IBM Plex Sans', system-ui, sans-serif; }
[dir="rtl"] .la2-pg .hero.hero--font-sans h1 { font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; }
.la2-pg .hero.hero--w-bold h1 { font-weight: 700; }
.la2-pg .hero.hero--size-lg h1 { font-size: 54px; }
[dir="rtl"] .la2-pg .hero.hero--size-lg h1 { font-size: 50px; }
.la2-pg .hero.hero--size-xl h1 { font-size: 62px; }
[dir="rtl"] .la2-pg .hero.hero--size-xl h1 { font-size: 57px; }

.la2-pg .hero .sub { font-size: 17px; margin: 0 auto 26px; max-width: 52ch; color: #D6DDF2; }
.la2-pg .hero.photo .eyebrow { color: #C2CDEA; }

.la2-pg .sform { max-width: 740px; margin: 0 auto; }

.la2-pg .postrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.la2-pg .postrow .pn { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.la2-pg .hero.photo .postrow .pn { color: #BFCAE8; }

.la2-pg .hero.photo .b-sec {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}
.la2-pg .hero.photo .b-sec:hover {
    background: rgba(255, 255, 255, .20);
    border-color: #fff;
    color: #fff;
}
.la2-pg .hero.photo :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }


/* ============================================================================
 * 3. SEARCH SHELL + FILTER PANEL   (proof lines 146-174, 314-331)
 * ----------------------------------------------------------------------------
 * ONE accessible source, two proven compositions.
 *
 * The board draws the desktop shell and the mobile two-row search with two
 * different DOMs. Foundation §15 / DESIGN_RULES 6A forbid a duplicated
 * desktop+mobile accessible copy, so production ships a single DOM and
 * recomposes it with grid placement — the same mechanism the proof's own
 * `.msearch` rules use.
 *
 * DOM order is the desktop order (query → Filters → Search) so desktop DOM,
 * tab and visual order agree. Below 768 the grid places Search on row one and
 * Filters on row two, which is the proven mobile composition; the keyboard
 * therefore reaches Filters before Search there. Recorded divergence.
 * ========================================================================== */
.la2-pg .msearch {
    display: flex;
    align-items: stretch;
    background: var(--bg);
    border: 1px solid var(--edge);
    border-radius: var(--r2);
    box-shadow: var(--csh);
    overflow: hidden;
    text-align: start;
}
.la2-pg .msearch:focus-within {
    border-color: var(--act);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--act) 24%, transparent);
}

.la2-pg .sshell {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.la2-pg .sq {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
}
.la2-pg .sq .ico { width: 20px; height: 20px; color: var(--muted); flex: none; }
.la2-pg .sq input {
    flex: 1;
    min-width: 0;
    height: var(--ctrl);
    border: 0;
    background: transparent;
    color: var(--ink);
    font: 400 15.5px/1 'IBM Plex Sans', sans-serif;
    outline: none;
}
[dir="rtl"] .la2-pg .sq input { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .sq input::placeholder { color: var(--ph); }

.la2-pg .sdiv { width: 1px; background: var(--line); flex: none; align-self: stretch; }

.la2-pg .sfil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--ctrl);
    padding: 0 18px;
    background: transparent;
    border: 0;
    color: var(--body);
    font: 600 14.5px/1 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    flex: none;
}
[dir="rtl"] .la2-pg .sfil { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .sfil:hover { background: var(--band2); color: var(--act); }
.la2-pg .sfil .ico { width: 18px; height: 18px; }
/* The unified DOM keeps the mobile `.lbl` wrapper at every width, so the
   icon-to-label gap lives on it rather than on `.sfil` (where the proof's
   desktop DOM put it, with the icon as a direct child). */
.la2-pg .sfil .lbl { display: inline-flex; align-items: center; gap: 8px; }
.la2-pg .sfil .cnt {
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--act);
    color: var(--actInk);
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.la2-pg .sgo {
    height: var(--ctrl);
    flex: none;
    width: 124px;
    background: var(--pri);
    color: var(--priInk);
    border: 0;
    font: 600 15px/1 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
[dir="rtl"] .la2-pg .sgo { font-family: 'IBM Plex Sans Arabic', sans-serif; width: 132px; }
.la2-pg .sgo:hover { background: var(--priHov); }

/* The single branded hero Search action (D4 permitted orange role 2). */
.la2-pg .hero.photo .sgo { background: var(--orn); color: var(--ornInk); }
.la2-pg .hero.photo .sgo:hover { background: var(--ornHov); }
.la2-pg .hero.photo .sgo:active { background: var(--ornPress); }

/* The panel is NOT a popover: it is the next block inside the same GET form
   and the same content column, so it inherits the shell's exact width, start,
   end and centre (proof §08 lede). */
.la2-pg .fpanel {
    margin-top: 10px;
    border: 1px solid var(--edge);
    border-radius: var(--r2);
    background: var(--bg);
    box-shadow: var(--csh);
    padding: 18px;
    text-align: start;
}
.la2-pg .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.la2-pg .fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.la2-pg .fld label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.la2-pg .fld select,
.la2-pg .fld input {
    height: 46px;
    border: 1px solid var(--edge);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    padding: 0 12px;
    font: 400 14.5px/1 'IBM Plex Sans', sans-serif;
    width: 100%;
}
[dir="rtl"] .la2-pg .fld select,
[dir="rtl"] .la2-pg .fld input { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .fpfoot {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}


/* ============================================================================
 * 4. ADVERTISEMENT BAND   (proof lines 175-179)
 * ----------------------------------------------------------------------------
 * The runtime <x-ad-slot> component is NOT modified — only restyled inside
 * `.la2-pg`. Only placements actually wired into the page render, and a slot
 * that returns nothing reserves no space (proof mobile frame comment).
 * ========================================================================== */
/* "AdvertisingRenderService returned nothing — no markup, no reserved space"
   (proof mobile frame). The 22px the proof puts on the band therefore lives on
   the slot, not on the wrapper: a placement that renders nothing leaves an
   empty block of zero height instead of a phantom gap. */
.la2-pg .adband { padding: 0; }
.la2-pg .adband .la2-ad-slot {
    margin-block: 22px 0;
    border: 1px dashed var(--edge);
    border-radius: var(--r2);
    background: var(--band2);
    padding: 14px 18px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
/* The runtime component ships its own legacy chrome on these three elements
   (public/css/la2etlak.css §ad slot). Every property it sets is re-declared
   here at (0,3,0) so the locked design wins on specificity, not on order. */
.la2-pg .adband .la2-ad-label {
    flex: none;
    margin-top: 2px;
    padding: 0;
    background-color: transparent;
    border: 0;
}
.la2-pg .adband .la2-ad-label__text {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--edge);
    border-radius: 4px;
    padding: 3px 7px;
}
[dir="rtl"] .la2-pg .adband .la2-ad-label__text { letter-spacing: 0; text-transform: none; }
/* The proof renders the creative as one line of body text beside the label
   plaque; the runtime placeholder ships an icon + a caption, so it composes on
   that same line rather than stacking. */
.la2-pg .adband .la2-ad-placeholder {
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    color: var(--body);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.la2-pg .adband .la2-ad-placeholder__icon { color: var(--plateInk); font-size: 16px; opacity: 1; }
.la2-pg .adband .la2-ad-placeholder__text { font-size: 13.5px; opacity: 1; }


/* ============================================================================
 * 5. STATISTICS BAND   (proof lines 180-195)
 * One band in normal document flow directly after the hero. Colour arrives
 * through the icon circle and the number only; the cell is never filled.
 * ========================================================================== */
.la2-pg .stats {
    background: var(--stat);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.la2-pg .statsi {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    /* OWNER REVISION 001 §5 — four statistics, not three. The strip's
       typography, border treatment and spacing system are unchanged; only the
       track count and the divider rule (which can no longer be a blanket
       `.st + .st`, see below) moved. */
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}
.la2-pg .st { display: flex; align-items: center; gap: 13px; padding: 21px 8px; min-width: 0; }
/* The divider marks a COLUMN boundary, not sibling order, so that the 2x2
   mobile composition does not draw a rule down the left edge of cells 3 and 4.
   At four-up every cell except the first opens a column. */
.la2-pg .st:not(:first-child) { border-inline-start: 1px solid var(--line); padding-inline-start: 30px; }
.la2-pg .stic {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.la2-pg .stic .ico { width: 18px; height: 18px; }
.la2-pg .st b {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 29px;
    font-weight: 600;
    line-height: 1.05;
    display: block;
    letter-spacing: -.01em;
}
[dir="rtl"] .la2-pg .st b { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .st .lb { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; }

/* Locked contrast rule (proof §11 note): statistics text on the pale band uses
   the deepened #B4650A, because the exact logo orange is 2.0:1 there and fails
   text contrast. The signature orange carries the icon circle instead. */
.la2-pg .st-a b { color: var(--nav); }
.la2-pg .st-a .stic { background: #E4E8F5; color: #232B52; }
.la2-pg .st-b b { color: var(--ornDeep); }
.la2-pg .st-b .stic { background: var(--orn); color: var(--ornInk); }
.la2-pg .st-c b { color: var(--act); }
.la2-pg .st-c .stic { background: #E2E9FB; color: #2B52C6; }

[data-bs-theme="dark"] .la2-pg .st-a b { color: #B9C2F0; }
[data-bs-theme="dark"] .la2-pg .st-a .stic { background: #252D4C; color: #C3CBF4; }
[data-bs-theme="dark"] .la2-pg .st-b b { color: #F0A64B; }
[data-bs-theme="dark"] .la2-pg .st-c .stic { background: #1E2740; color: #8FA6F2; }

/* OWNER REVISION 001 §5 — the fourth statistic's visual role.
   --lostInk / --foundInk are DELIBERATELY not reused: they carry report-type
   semantics and mean something specific everywhere else in the product. This
   is the one narrowly named stats-only token the revision introduces, and it
   is derived from the approved navy family (--navSoft, #4A5390) rather than
   from a new brand colour, so the fourth cell belongs to the same strip. The
   icon plaque reuses the strip's existing navy plaque values verbatim. */
.la2-pg { --statQuiet: #4A5390; }
[data-bs-theme="dark"] .la2-pg { --statQuiet: #A9B4E6; }

.la2-pg .st-d b { color: var(--statQuiet); }
.la2-pg .st-d .stic { background: #E4E8F5; color: var(--statQuiet); }
[data-bs-theme="dark"] .la2-pg .st-d .stic { background: #252D4C; color: var(--statQuiet); }

/* The fourth value is a duration phrase ("4 hours"), not a formatted integer,
   so it needs to wrap rather than force the cell wider than its track. */
.la2-pg .st-d b { font-size: 25px; line-height: 1.15; }


/* ============================================================================
 * 6. SECTIONS   (proof lines 196-201)
 * ========================================================================== */
.la2-pg .sec { padding: 56px 0; border-bottom: 1px solid var(--line); }
.la2-pg .sec.alt { background: var(--band2); }
.la2-pg .sec-h {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}
.la2-pg .sec-h h2 { font-size: 27px; margin: 8px 0 6px; }
.la2-pg .sec-h p { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 60ch; }


/* ============================================================================
 * 7. CATEGORY TILES   (proof lines 202-211)
 * Twelve tiles in the configured order — order, count and names stay
 * admin-owned (ledger §15.5 constraint 3).
 * ========================================================================== */
.la2-pg .cgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.la2-pg .ctile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    min-height: 68px;
    border: 1px solid var(--edge);
    border-radius: var(--r2);
    background: var(--bg);
    color: var(--ink);
    text-decoration: none;
}
.la2-pg .ctile:hover { border-color: var(--act); background: var(--band2); text-decoration: none; }
.la2-pg .cplate {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    background: var(--plate);
    color: var(--nav);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
[data-bs-theme="dark"] .la2-pg .cplate { color: #AEB8EE; }
.la2-pg .ctile:hover .cplate { background: #E2E9FB; color: var(--act); }
[data-bs-theme="dark"] .la2-pg .ctile:hover .cplate { background: #1E2740; color: #8FA6F2; }
.la2-pg .cplate .ico { width: 24px; height: 24px; }
.la2-pg .cn {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: break-word;
}


/* ============================================================================
 * 8. REPORT GRID   (proof lines 212-240)
 * ----------------------------------------------------------------------------
 * Only the Homepage's LAYOUT of report cards lives here. The `.rc` component
 * family itself was extracted to public/css/design/report-card.css by
 * HOMEPAGE-OWNER-REVISION-001 §7 — it is shared with Search, report
 * collections and the saved / profile surfaces, so it is not owned by one
 * page. Nothing from that family is duplicated below.
 * ========================================================================== */
.la2-pg .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }


/* ============================================================================
 * 9. HOW IT WORKS   (proof lines 241-250)
 * ========================================================================== */
.la2-pg .how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.la2-pg .stp {
    border: 1px solid var(--edge);
    border-radius: var(--r3);
    background: var(--bg);
    padding: 24px 22px;
    position: relative;
}
.la2-pg .stp .sp {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--band);
    color: var(--nav);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
[data-bs-theme="dark"] .la2-pg .stp .sp { color: #AEB8EE; }
.la2-pg .stp .sp .ico { width: 26px; height: 26px; }
.la2-pg .stn {
    position: absolute;
    top: 22px;
    right: 22px;
    font-family: 'Source Serif 4', serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
}
[dir="rtl"] .la2-pg .stn { right: auto; left: 22px; }
.la2-pg .stp h3 { font-size: 18px; margin-bottom: 7px; }
.la2-pg .stp p { margin: 0; font-size: 14.5px; color: var(--body); }


/* ============================================================================
 * 10. CLOSING CTA BAND   (proof lines 251-262)
 * ========================================================================== */
.la2-pg .cta { background: var(--nav); color: #fff; padding: 52px 0; }
[data-bs-theme="dark"] .la2-pg .cta { background: #1B2340; border-top: 1px solid var(--edge); }
.la2-pg .ctai {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
}
.la2-pg .cta h2 { color: #fff; font-size: 27px; max-width: 22ch; }
.la2-pg .cta p { margin: 8px 0 0; color: #CFD4EE; max-width: 52ch; font-size: 14.5px; }
.la2-pg .ctaB { display: flex; gap: 12px; flex-wrap: wrap; }

.la2-pg .cta .b-pri { background: #2B52C6; border-color: #8FA6F2; color: #FFFFFF; }
.la2-pg .cta .b-pri:hover { background: #3D66DE; border-color: #AAB9F7; color: #FFFFFF; }
.la2-pg .cta .b-cta { background: var(--orn); border-color: var(--ornPress); color: var(--ornInk); }
.la2-pg .cta .b-cta:hover { background: var(--ornHov); border-color: var(--ornHov); color: var(--ornInk); }
.la2-pg .cta .b-sec { background: transparent; border-color: rgba(255, 255, 255, .42); color: #fff; }
.la2-pg .cta .b-sec:hover { background: rgba(255, 255, 255, .10); border-color: #fff; color: #fff; }
.la2-pg .cta :focus-visible { outline: 3px solid #FFFFFF; }


/* ============================================================================
 * 11. EMPTY STATE — see public/css/design/report-card.css §5.
 * `.rcempty` belongs to the shared report-card family (it is the empty branch
 * of a report COLLECTION, not of the Homepage), so it moved with it.
 * ========================================================================== */


/* ============================================================================
 * 12. RESPONSIVE
 * ----------------------------------------------------------------------------
 * FINAL_DESIGN_FOUNDATION.md §7 activation widths only.
 * ========================================================================== */

/* 1024 — the hero becomes a single column.
   ledger §10.3 NAMED GAP: "the 1024px single-column hero is specified but
   never drawn". Built from FOUNDATION §7 and reviewed; NO Layer-3 target may
   be fabricated for this width. It drops the optical offset (the offset exists
   only to clear the photograph's subjects at 1440) and keeps one centred
   column. The intermediate grid steps below sit in the same rules-only zone. */
@media (max-width: 1023.98px) {
    .la2-pg .hcol { margin-left: 0; }
    .la2-pg .heroi { padding: 48px 32px 52px; }
    .la2-pg .grid  { grid-template-columns: repeat(3, 1fr); }
    .la2-pg .cgrid { grid-template-columns: repeat(3, 1fr); }
}

/* 768 — the proven mobile composition (proof lines 279-331, `.pg.m`). */
@media (max-width: 767.98px) {
    .la2-pg .hero.photo { min-height: 0; display: block; background: #0D2853; }
    .la2-pg .heroBg {
        background-image: var(--heroMobile);
        background-size: 100% auto;
        background-position: center bottom;
    }
    .la2-pg .hero.photo::after {
        background:
            radial-gradient(120% 46% at 50% 8%, rgba(8, 18, 44, .66) 0%, rgba(8, 18, 44, .44) 52%, rgba(8, 18, 44, 0) 100%),
            linear-gradient(to bottom, rgba(8, 18, 44, .42) 0%, rgba(8, 18, 44, .20) 42%, rgba(8, 18, 44, 0) 62%);
    }
    .la2-pg .heroi { padding: 24px 16px 330px; display: block; }
    .la2-pg .hcol { max-width: none; margin-left: 0; text-align: start; }
    .la2-pg .hero h1 { font-size: 29px; max-width: none; margin: 14px 0 12px; }
    [dir="rtl"] .la2-pg .hero h1 { font-size: 27px; max-width: none; }
    .la2-pg .hero.hero--size-lg h1 { font-size: 34px; }
    [dir="rtl"] .la2-pg .hero.hero--size-lg h1 { font-size: 32px; }
    .la2-pg .hero.hero--size-xl h1 { font-size: 39px; }
    [dir="rtl"] .la2-pg .hero.hero--size-xl h1 { font-size: 36px; }
    .la2-pg .hero .sub { font-size: 15px; margin: 0 0 18px; max-width: none; }
    .la2-pg .sform { max-width: none; }
    .la2-pg .postrow { justify-content: flex-start; margin-top: 14px; }

    /* Mobile search: query + Search on row 1, Filters full width on row 2. */
    .la2-pg .msearch {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }
    .la2-pg .msearch:focus-within { border-color: transparent; box-shadow: none; }
    .la2-pg .sshell {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        background: var(--bg);
        border: 1px solid var(--edge);
        border-radius: var(--r2);
        box-shadow: var(--csh);
        overflow: hidden;
    }
    .la2-pg .sshell:focus-within {
        border-color: var(--act);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--act) 24%, transparent);
    }
    .la2-pg .sdiv { display: none; }
    .la2-pg .sq input { height: 52px; }

    .la2-pg .sgo {
        grid-column: 2;
        grid-row: 1;
        width: 104px;
        height: 52px;
        border-radius: var(--r2);
    }
    [dir="rtl"] .la2-pg .sgo { width: 110px; }
    .la2-pg .sgo .ico { width: 20px; height: 20px; }

    .la2-pg .sfil {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        height: 48px;
        justify-content: center;
        gap: 10px;
        padding: 0 16px;
        flex: none;
        border: 1px solid var(--edge);
        background: var(--bg);
        border-radius: var(--r2);
        font: 600 14px/1 'IBM Plex Sans', sans-serif;
    }
    [dir="rtl"] .la2-pg .sfil { font-family: 'IBM Plex Sans Arabic', sans-serif; }
    .la2-pg .sfil .lbl { display: inline-flex; align-items: center; gap: 8px; }
    .la2-pg .sfil .ico { width: 17px; height: 17px; }
    .la2-pg .hero.photo .sfil {
        background: rgba(255, 255, 255, .94);
        border-color: rgba(255, 255, 255, .5);
        /* The plate is a FIXED near-white on the photograph, so its ink must be
           theme-independent too — the dark `--body` (#B4C0CF) on it would fail
           WCAG AA. Pinned to the light-theme `--body` value, which is the same
           thing the proof does for every other ink it places on this hero
           (`.hero.photo .b-sec` white, `.hero.photo .postrow .pn` #BFCAE8).
           The board renders no dark mobile hero, so this is rules-derived
           (FOUNDATION §17) and carries no Layer-3 target. */
        color: #4A5568;
    }

    .la2-pg .fgrid { grid-template-columns: 1fr; }

    /* OWNER REVISION 001 §5 — a clean 2 x 2 rather than four crushed columns.
       The divider is now column-aware: only the cell that opens the SECOND
       column carries the vertical rule, and the second row carries a
       horizontal one, so the strip reads as a grid and not as a broken row. */
    .la2-pg .statsi { padding: 0 10px; grid-template-columns: repeat(2, 1fr); }
    .la2-pg .st { flex-direction: column; align-items: flex-start; gap: 7px; padding: 15px 6px; }
    .la2-pg .st:not(:first-child) { border-inline-start: 0; padding-inline-start: 6px; }
    .la2-pg .st:nth-child(even) { border-inline-start: 1px solid var(--line); padding-inline-start: 14px; }
    .la2-pg .st:nth-child(n+3) { border-block-start: 1px solid var(--line); }
    .la2-pg .stic { width: 26px; height: 26px; }
    .la2-pg .stic .ico { width: 14px; height: 14px; }
    .la2-pg .st b { font-size: 21px; }
    .la2-pg .st-d b { font-size: 19px; }
    .la2-pg .st .lb { font-size: 11.5px; line-height: 1.3; margin-top: 2px; white-space: normal; }

    .la2-pg .sec { padding: 30px 0; }
    .la2-pg .sec-h h2 { font-size: 21px; }
    .la2-pg .cgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .la2-pg .ctile { min-height: 60px; padding: 10px 12px; gap: 10px; }
    .la2-pg .cplate { width: 38px; height: 38px; border-radius: 10px; }
    .la2-pg .cn { font-size: 13px; }
    .la2-pg .grid { grid-template-columns: 1fr; gap: 16px; }
    .la2-pg .how { grid-template-columns: 1fr; gap: 12px; }
    .la2-pg .cta { padding: 32px 0; }
    .la2-pg .ctai { padding: 0 16px; flex-direction: column; align-items: flex-start; }
    .la2-pg .cta h2 { font-size: 22px; }
    /* `.statsi { max-width: none }` used to sit here. The board keeps the 1240px
       measure at every width (proof line 294 changes only padding and tracks),
       and the override was provably inert — this block only applies below 768,
       where the container can never reach 1240 anyway. Removed rather than left
       to mislead a future porter into thinking the measure is dropped on mobile.
       HOMEPAGE-PILOT-PARITY-VALIDATE-001; no rendered change at any width. */
}