/* ==========================================================================
   Monolith Health — brand stylesheet
   Palette drawn from the Monolith mark: deep navy ink, steel blue,
   silver-ice highlights on a clean white field.
   ========================================================================== */

:root {
    --ink: #101c34;          /* deep navy — primary text & dark bands   */
    --ink-2: #0b1526;        /* darker navy — footer / deep bands       */
    --steel: #3d5c8f;        /* steel blue — accents, links             */
    --steel-2: #5f81b5;      /* lighter steel                           */
    --ice: #c9d6e8;          /* silver-ice — borders, subtle fills      */
    --mist: #f4f7fb;         /* near-white — alt section background     */
    --paper: #ffffff;
    --muted: #55637c;        /* secondary text on light                 */
    --grad: linear-gradient(120deg, #16233f 0%, #3d5c8f 55%, #9fb6d9 100%);
    --grad-soft: linear-gradient(120deg, #3d5c8f, #9fb6d9);
    --shadow-sm: 0 2px 10px rgba(16, 28, 52, .07);
    --shadow-md: 0 12px 34px rgba(16, 28, 52, .12);
    --shadow-lg: 0 24px 60px rgba(16, 28, 52, .18);
    --radius: 14px;
    --font-display: "Montserrat", "Segoe UI", sans-serif;
    --font-body: "Inter", "Segoe UI", sans-serif;
    --header-h: 76px;

    /* Breathing room either side of .shell. Widened to clear the page frame's
       side traces wherever the frame is on screen - see the Page frame block. */
    --shell-gutter: 24px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    margin: 0 0 .5em;
    line-height: 1.15;
}

h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }

p { margin: 0 0 1em; }

a { color: var(--steel); text-decoration: none; }

img { max-width: 100%; }

.shell {
    width: min(1180px, 100% - var(--shell-gutter) * 2);
    margin-inline: auto;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 1rem;
}

.grad-text {
    background: var(--grad-soft);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .85rem 1.7rem;
    border-radius: 8px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    text-align: center;
}

.btn:hover { transform: translateY(-2px); }

.btn-solid {
    background: var(--grad);
    background-size: 160% 100%;
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.btn-solid:hover { background-position: 60% 0; box-shadow: var(--shadow-md); }

.btn-ghost {
    color: var(--ink);
    border-color: var(--ice);
    background: rgba(255, 255, 255, .6);
}

.btn-ghost:hover { border-color: var(--steel); color: var(--steel); }

.btn-light {
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.btn-light:hover { box-shadow: var(--shadow-md); }

.btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}

.btn-outline-light:hover { border-color: #fff; }

.btn-lg { padding: 1.05rem 2.2rem; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-nav { padding: .6rem 1.2rem; font-size: .74rem; }

/* ---------- Header ---------- */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.site-header.is-scrolled {
    border-bottom-color: rgba(201, 214, 232, .6);
    box-shadow: var(--shadow-sm);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0;
}

/* the M mark doubles as the first letter of the wordmark */
.brand-mark { height: 38px; width: 38px; object-fit: contain; margin-right: .06em; }

.brand-word {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.16rem;
    letter-spacing: .3em;
    color: var(--ink);
    transform: translateY(1px);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 1.9rem;
}

.main-nav > a:not(.btn) {
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
    position: relative;
    padding: .3rem 0;
}

.main-nav > a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 0;
    height: 2px;
    background: var(--grad-soft);
    transition: right .22s ease;
}

.main-nav > a:not(.btn):hover::after { right: 0; }

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: .5rem;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 24px; height: 2px;
    background: var(--ink);
    margin: 5px 0;
    transition: transform .2s ease, opacity .2s ease;
}

/* ---------- Page frame ----------
   Decorative circuit border pinned to the viewport, drawn above the page
   background but under the header and the mobile drawer.

   One corner ships as an alpha mask (img/frame-corner.png, 11KB) and is painted
   through CSS, so the same asset serves all four corners flipped and the colour
   stays ours. The straight runs between corners are CSS hairlines placed at the
   exact depths the corner traces exit the artwork - measured off the mask at
   8.2/10.3/12.6/17.2% horizontally and 11.8/13.9% vertically - so they read as
   one continuous trace rather than a border with decorated corners.

   The frame wraps the page content rather than the viewport: it is absolute
   inside <main>, so it starts under the header and stops exactly where the
   footer begins. The full-bleed dark bands inside main paint back over it (see
   the z-index rule below) so its hairlines never slice across them. */

:root {
    --pf-size: 300px;
    --pf-line: #5f81b5;

    /* How far the frame's ink reaches in from each edge, derived from the corner
       so the two cannot drift apart: the top/bottom runs are .18 of the corner
       box, the side runs .15. Content is held out of these bands - .shell's
       gutter covers the sides, main's padding-top covers the top run. Without
       that the top run struck straight through the breadcrumb at every width,
       and the side runs crossed body copy on anything under ~1270px. */
    --pf-band-y: calc(var(--pf-size) * .18);
    --pf-band-x: calc(var(--pf-size) * .15);
}

main { position: relative; }

.page-frame {
    position: absolute;
    /* Top inset clears the fixed header - main's box starts at document y=0
       because the header is out of flow, so without it the whole top run,
       corners and all, sat behind the header band. */
    inset: var(--header-h) 0 0;
    z-index: 4;
    pointer-events: none;
}

/* Full-bleed dark bands sit above the frame instead of being crossed by it.
   On navy the hairlines read as artifacts rather than as decoration. */
.cta-band,
.pilot-program,
.texas-band {
    position: relative;
    z-index: 5;
}

/* Same idea at card scale: the pager sits in the frame's bottom corners, and a
   hairline running across a clickable card reads as a smudge. The cards lift
   above it; the band itself does not, so the corners still terminate visibly. */
.pager-link { position: relative; z-index: 5; }

.pf-corner {
    position: absolute;
    width: var(--pf-size);
    height: var(--pf-size);
    background: linear-gradient(135deg, var(--steel) 0%, var(--pf-line) 45%, var(--steel-2) 100%);

    /* Two mask layers, intersected. The artwork is a dense L-shaped trace about
       30px in, followed by fine filigree that trails the full depth of the box -
       so no amount of content inset can clear a tail that reaches the far corner.
       The gradient holds the heavy outer trace at full strength and fades those
       tails out before they reach the text column.

       mask-composite landed in Safari 15.4. Older Safari ignores it and renders
       the artwork unfaded, which is exactly the behaviour this replaced. */
    -webkit-mask: url("../img/frame-corner.png") 0 0 / 100% 100% no-repeat,
                  linear-gradient(135deg, #000 0 20%, transparent 58%);
    mask: url("../img/frame-corner.png") 0 0 / 100% 100% no-repeat,
          linear-gradient(135deg, #000 0 20%, transparent 58%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.pf-tl { top: 0; left: 0; }
.pf-tr { top: 0; right: 0; transform: scaleX(-1); }
.pf-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.pf-br { bottom: 0; right: 0; transform: scale(-1, -1); }

.pf-edge { position: absolute; }

.pf-top, .pf-bottom {
    left: var(--pf-size);
    right: var(--pf-size);
    height: calc(var(--pf-size) * .18);
    background:
        linear-gradient(var(--pf-line), var(--pf-line)) 0 calc(var(--pf-size) * .082) / 100% 1px no-repeat,
        linear-gradient(var(--pf-line), var(--pf-line)) 0 calc(var(--pf-size) * .103) / 100% 1px no-repeat,
        linear-gradient(var(--pf-line), var(--pf-line)) 0 calc(var(--pf-size) * .126) / 100% 1px no-repeat,
        linear-gradient(var(--pf-line), var(--pf-line)) 0 calc(var(--pf-size) * .172) / 100% 1px no-repeat;
}

.pf-top { top: 0; }
.pf-bottom { bottom: 0; transform: scaleY(-1); }

.pf-left, .pf-right {
    top: var(--pf-size);
    bottom: var(--pf-size);
    width: calc(var(--pf-size) * .15);
    background:
        linear-gradient(var(--pf-line), var(--pf-line)) calc(var(--pf-size) * .118) 0 / 1px 100% no-repeat,
        linear-gradient(var(--pf-line), var(--pf-line)) calc(var(--pf-size) * .139) 0 / 1px 100% no-repeat;
}

.pf-left { left: 0; }
.pf-right { right: 0; transform: scaleX(-1); }

/* The frame only exists above 760px, so the wider gutter that keeps content out
   of its side traces is scoped to the same range; below that .shell goes back to
   the tighter 24px and uses the full width of the phone. */
@media (min-width: 761px) {
    :root { --shell-gutter: calc(var(--pf-band-x) + 16px); }
}

/* Two 300px corners would take most of a narrow desktop with them - at 761px
   that is 600px of 761 - leaving the straight runs as stubs and the frame
   reading as four detached brackets. Everything else is derived from --pf-size,
   so shrinking it here rescales the bands and the content insets to match. */
@media (min-width: 761px) and (max-width: 1180px) {
    :root { --pf-size: 190px; }
}

/* Decoration only: it costs layout room on a phone and adds nothing there.
   The bands go with it - with no frame drawn there is nothing for content to
   clear, and leaving them set would reserve a 54px strip of dead space at the
   top of every phone page. */
@media (max-width: 760px) {
    .page-frame { display: none; }

    :root {
        --pf-band-y: 0px;
        --pf-band-x: 0px;
    }
}

@media print {
    .page-frame { display: none; }
}

/* ---------- Explore menu ---------- */

.nav-menu { position: relative; }

.nav-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.nav-caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .2s ease;
}

.nav-menu-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-menu-list {
    position: absolute;
    top: calc(100% + .9rem);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 15rem;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ice);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: .5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 60;
}

.nav-menu.is-open .nav-menu-list {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-menu-list a {
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink);
    padding: .6rem .8rem;
    border-radius: 8px;
    white-space: nowrap;
}

.nav-menu-list a:hover { background: var(--mist); color: var(--steel); }

/* ---------- Section pager ---------- */

.pager {
    background: var(--mist);
    border-top: 1px solid var(--ice);
    padding: 2.4rem 0 3.2rem;
}

.pager-inner {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
}

.pager-spacer { flex: 0 1 auto; }

.pager-link {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 15rem;
    max-width: 22rem;
    padding: 1rem 1.3rem;
    border: 1px solid var(--ice);
    border-radius: var(--radius);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.pager-link:hover {
    border-color: var(--steel);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.pager-next { text-align: right; margin-left: auto; }

.pager-dir {
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--steel);
}

.pager-name {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink);
}

/* ---------- Hero ---------- */

.hero {
    /* The rendered size of the floating lockup. .hero-copy is matched to it
       (x the 800:810 artwork ratio) so the middle row reads as one band. */
    --hero-art: min(440px, 38vw);
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-h) + max(40px, var(--pf-band-y) + 8px)) 0 60px;
    background:
        radial-gradient(1100px 600px at 85% 15%, rgba(159, 182, 217, .22), transparent 60%),
        radial-gradient(800px 500px at 5% 90%, rgba(61, 92, 143, .10), transparent 60%),
        var(--paper);
    overflow: hidden;
}

/* Eyebrow + h1 run the full width, centred, above the art/copy row. Wide
   enough that the h1 balances onto two lines at full desktop type size —
   at 46rem it broke to three and pushed the actions below the fold. */
.hero-head {
    text-align: center;
    max-width: 56rem;
    margin: 0 auto 2.4rem;
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: 2rem;
}

.hero-copy .lede {
    font-size: 1.18rem;
    color: var(--muted);
    max-width: 34rem;
    margin-bottom: 2rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem;
    margin-top: 2.6rem;
}

.hero-art { display: flex; justify-content: center; }

/* Hero lockup carries the wordmark + tagline, so it runs a little larger
   than the bare mark did — the tagline needs to stay readable. */
.hero-m {
    width: var(--hero-art);
    height: auto;
    filter: drop-shadow(0 30px 50px rgba(16, 28, 52, .25));
    animation: heroFloat 7s ease-in-out infinite;
    will-change: transform;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

/* ---------- Pilot ribbon ---------- */

.pilot-ribbon {
    background: var(--grad);
    color: #fff;
    padding: 1.6rem 0;
}

.ribbon-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.ribbon-text { display: flex; align-items: center; gap: 1.3rem; }

.ribbon-text p { margin: 0; font-size: .98rem; color: rgba(255, 255, 255, .92); }

.ribbon-inner > .btn { white-space: nowrap; flex-shrink: 0; }

.ribbon-badge {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: .45rem .9rem;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    white-space: nowrap;
}

/* ---------- Sections ---------- */

.section { padding: 6.5rem 0; }

.section-alt { background: var(--mist); }

.section-head {
    max-width: 42rem;
    margin-bottom: 3.4rem;
}

.section-head p { color: var(--muted); font-size: 1.05rem; }

/* ---------- Three Pillars (monolith slabs) ---------- */

.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    perspective: 1400px;
}

.pillar {
    position: relative;
    min-height: 440px;
    border-radius: var(--radius);
    overflow: hidden;
    background:
        radial-gradient(500px 300px at 110% -10%, rgba(95, 129, 181, .35), transparent 60%),
        linear-gradient(165deg, #1a2b4d 0%, #0d1830 55%, #16264a 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform .35s ease, box-shadow .35s ease;
    will-change: transform;
}

/* metallic gradient edge */
.pillar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(150deg, rgba(159, 182, 217, .8), rgba(159, 182, 217, .06) 35%, rgba(159, 182, 217, .06) 65%, rgba(159, 182, 217, .45));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}

/* faint M watermark */
.pillar::after {
    content: "";
    position: absolute;
    right: -14%;
    bottom: -8%;
    width: 65%;
    aspect-ratio: 1;
    /* ?v= is a manual cache-buster: url() gets no asp-append-version, and the
       static-file handler serves images immutable for a year. Bump on logo change. */
    background: url("../img/MonolithM.png?v=2") center / contain no-repeat;
    filter: brightness(6);
    opacity: .05;
    pointer-events: none;
}

.pillar:hover { box-shadow: var(--shadow-lg); }

.pillar:focus-visible { outline: 3px solid var(--steel-2); outline-offset: 3px; }

.slab-num {
    position: absolute;
    top: .6rem;
    right: 1.4rem;
    font-family: var(--font-display);
    font-size: 5.4rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(159, 182, 217, .28);
    pointer-events: none;
    z-index: 1;
}

.slab-face {
    position: absolute;
    inset: 0;
    padding: 2.4rem 2.2rem;
    display: flex;
    flex-direction: column;
    z-index: 2;
    transition: opacity .4s ease;
}

.pillar-icon {
    display: block;
    width: 46px; height: 46px;
    color: #9fb6d9;
    margin-bottom: auto;
}

.slab-face h3 {
    color: #fff;
    font-size: 1.45rem;
    letter-spacing: .04em;
    margin: 1.2rem 0 .6rem;
}

.pillar-tag {
    color: rgba(201, 214, 232, .8);
    font-size: .95rem;
    margin: 0 0 1.6rem;
}

.slab-hint {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #9fb6d9;
}

.slab-hint i {
    position: relative;
    width: 22px; height: 22px;
    border: 1.5px solid rgba(159, 182, 217, .6);
    border-radius: 50%;
    transition: transform .35s ease, background .2s ease;
}

.slab-hint i::before,
.slab-hint i::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    background: #c9d6e8;
    transform: translate(-50%, -50%);
}

.slab-hint i::before { width: 9px; height: 1.5px; }
.slab-hint i::after { width: 1.5px; height: 9px; }

.pillar.is-open .slab-hint i { transform: rotate(45deg); background: rgba(159, 182, 217, .15); }

/* the rising sheet */
.slab-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    top: 27%;
    background: linear-gradient(180deg, #ffffff, #f4f7fb);
    border-radius: 18px 18px var(--radius) var(--radius);
    padding: 1.9rem 2.2rem;
    transform: translateY(106%);
    transition: transform .55s cubic-bezier(.35, 0, .15, 1);
    box-shadow: 0 -18px 44px rgba(11, 21, 38, .4);
    z-index: 2;
    overflow-y: auto;
}

.pillar.is-open .slab-sheet { transform: translateY(0); }

.pillar.is-open .pillar-tag { opacity: 0; transition: opacity .25s ease; }

.sheet-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: .8rem;
}

.slab-sheet p {
    margin: 0;
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.7;
}

/* ---------- Stats band ---------- */

.stats-band {
    background: var(--ink);
    background-image: radial-gradient(900px 400px at 80% -20%, rgba(95, 129, 181, .35), transparent 65%);
    padding: 4.2rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    font-weight: 800;
    background: linear-gradient(120deg, #ffffff, #9fb6d9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat-word { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

.stat-label {
    display: block;
    margin-top: .4rem;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(201, 214, 232, .75);
}

/* Shared panel entrance — the platform module and the roles panels both use
   it. It lived with the retired Who We Serve tabs, hence its own heading. */
@keyframes panelIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- CTA band ---------- */

.cta-band {
    position: relative;
    background: var(--ink-2);
    background-image:
        radial-gradient(1000px 500px at 15% 120%, rgba(61, 92, 143, .5), transparent 60%),
        radial-gradient(700px 400px at 90% -30%, rgba(95, 129, 181, .3), transparent 60%);
    color: #fff;
    padding: 6rem 0;
    overflow: hidden;
    text-align: center;
}

.cta-watermark {
    position: absolute;
    right: -80px;
    top: 50%;
    transform: translateY(-50%) rotate(8deg);
    width: 420px;
    height: auto;
    opacity: .1;
    filter: brightness(4);
    pointer-events: none;
}

.cta-inner { position: relative; }

.cta-inner h2 { color: #fff; max-width: 40rem; margin-inline: auto; }

.cta-inner p { color: rgba(201, 214, 232, .85); margin-bottom: 2rem; }

/* ---------- Contact ---------- */

.contact-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 4rem;
    align-items: start;
}

.contact-copy p { color: var(--muted); }

.contact-points {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
}

.contact-points li {
    position: relative;
    padding: .45rem 0 .45rem 2rem;
    color: var(--ink);
    font-weight: 500;
}

.contact-points li::before {
    content: "";
    position: absolute;
    left: 0; top: .78rem;
    width: 14px; height: 9px;
    border-left: 2.5px solid var(--steel);
    border-bottom: 2.5px solid var(--steel);
    transform: rotate(-45deg);
}

.contact-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--ice);
    border-radius: var(--radius);
    padding: 2.6rem;
    box-shadow: var(--shadow-md);
}

/* Multi-step wizard */

.form-progress { margin-bottom: 1.8rem; }

.progress-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: .55rem;
}

.progress-track {
    height: 5px;
    border-radius: 999px;
    background: var(--mist);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 25%;
    border-radius: 999px;
    background: var(--grad-soft);
    transition: width .35s ease;
}

.form-step {
    display: none;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.form-step.is-active {
    display: block;
    animation: panelIn .3s ease both;
}

.form-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.6rem;
}

.form-nav .btn { flex: 0 0 auto; min-width: 128px; }
.form-nav #stepNext, .form-nav #contactSubmit { margin-left: auto; }

.group-label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .6rem;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.chip { position: relative; }

.chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chip span {
    display: inline-block;
    padding: .48rem 1.05rem;
    border: 1.5px solid var(--ice);
    border-radius: 999px;
    font-size: .88rem;
    color: var(--muted);
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: all .16s ease;
}

.chip:hover span { border-color: var(--steel-2); color: var(--ink); }

.chip input:checked + span {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.chip input:focus-visible + span {
    outline: 2px solid var(--steel);
    outline-offset: 2px;
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: .9rem;
    color: var(--muted);
    cursor: pointer;
}

.consent input {
    width: 18px; height: 18px;
    margin-top: .15rem;
    accent-color: var(--steel);
    flex-shrink: 0;
}

.form-row { margin-bottom: 1.2rem; }

.form-row.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.field { position: relative; }

.field input,
.field select,
.field textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: var(--mist);
    border: 1.5px solid transparent;
    border-radius: 9px;
    padding: 1.35rem .95rem .55rem;
    outline: none;
    transition: border-color .18s ease, background .18s ease;
}

.field textarea { resize: vertical; min-height: 105px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
    background: #fff;
    border-color: var(--steel);
}

.field label {
    position: absolute;
    left: 1rem; top: .95rem;
    color: var(--muted);
    font-size: .95rem;
    pointer-events: none;
    transition: all .16s ease;
}

.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field.has-value label,
.field select:focus ~ label {
    top: .38rem;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--steel);
    font-weight: 600;
}

.field input.is-invalid { border-color: #c0392b; }

.select-field::after {
    content: "";
    position: absolute;
    right: 1.05rem; top: 50%;
    width: 8px; height: 8px;
    border-right: 2px solid var(--steel);
    border-bottom: 2px solid var(--steel);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.select-field select { appearance: none; }

.form-error { color: #c0392b; font-size: .9rem; margin: .8rem 0 0; text-align: center; }

.form-success {
    text-align: center;
    padding: 3rem 1rem;
    animation: panelIn .4s ease both;
}

/* height:auto is load-bearing. The <img> carries width="512" height="512"
   for layout stability; without an explicit auto here the attribute supplies
   the height and the mark renders 84x512. Same for .cta-watermark. */
.success-m { width: 84px; height: auto; margin-bottom: 1.2rem; }

.form-success p { color: var(--muted); }

/* ---------- Footer ---------- */

.site-footer {
    background: var(--ink-2);
    color: rgba(201, 214, 232, .8);
    padding: 4.5rem 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
}

.footer-logo {
    height: 84px;
    filter: brightness(0) invert(1);
    opacity: .95;
    margin-bottom: 1rem;
}

.footer-brand p { max-width: 24rem; font-size: .95rem; }

.footer-col h4 {
    color: #fff;
    font-size: .8rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.footer-col a:not(.btn) {
    display: block;
    color: rgba(201, 214, 232, .8);
    padding: .3rem 0;
    font-size: .95rem;
    transition: color .15s ease;
}

.footer-col a:not(.btn):hover { color: #fff; }

.footer-note { font-size: .95rem; margin-bottom: 1.2rem; }

.footer-base {
    border-top: 1px solid rgba(201, 214, 232, .15);
    padding: 1.4rem 0;
    font-size: .85rem;
    color: rgba(201, 214, 232, .55);
}

/* ==========================================================================
   Added marketing sections
   Platform · Why · Journey · Texas · Roles · Challenges · Security · FAQ
   ========================================================================== */

/* ---------- Platform capability grid ---------- */

.cap-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
}

.cap-card {
    background: #fff;
    border: 1px solid var(--ice);
    border-radius: var(--radius);
    padding: 2.2rem 2.1rem;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}

.cap-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.cap-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--grad-soft);
    color: #fff;
    margin-bottom: 1.1rem;
}

.cap-ic svg { width: 26px; height: 26px; }

.cap-card h3 { font-size: 1.3rem; margin-bottom: .35rem; }

.cap-sub {
    color: var(--steel);
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: 1.1rem;
}

.cap-list { list-style: none; margin: 0; padding: 0; }

.cap-list li {
    position: relative;
    padding: .55rem 0 .55rem 1.7rem;
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.55;
    border-top: 1px solid var(--mist);
}

.cap-list li:first-child { border-top: 0; }

.cap-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 1rem;
    width: 12px; height: 8px;
    border-left: 2.5px solid var(--steel);
    border-bottom: 2.5px solid var(--steel);
    transform: rotate(-45deg);
}

.cap-list strong { color: var(--ink); font-weight: 600; }

/* ---------- Why / differentiators ---------- */

.diff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.diff-card {
    background: #fff;
    border: 1px solid var(--ice);
    border-radius: var(--radius);
    padding: 1.9rem 1.8rem;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}

.diff-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.diff-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.diff-card p { color: var(--muted); font-size: .95rem; margin: 0; }

.diff-feature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.4rem 2.5rem;
    align-items: center;
    background:
        radial-gradient(520px 300px at 100% 0%, rgba(159, 182, 217, .2), transparent 60%),
        linear-gradient(165deg, #ffffff, #f4f7fb);
}

.diff-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: .8rem;
}

.diff-feature h3 { font-size: 1.5rem; }
.diff-feature p { font-size: 1rem; }

.attr-legend { display: flex; flex-wrap: wrap; gap: .7rem; }

.attr-legend span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #fff;
    border: 1px solid var(--ice);
    border-radius: 999px;
    padding: .42rem .95rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.attr-legend .sym { color: var(--steel); font-size: 1rem; line-height: 1; }

/* ---------- Client journey ---------- */

.journey {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.3rem;
}

.journey-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--ice);
    border-radius: var(--radius);
    padding: 1.6rem 1.4rem;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}

.journey-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.js-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: .9rem;
    box-shadow: var(--shadow-sm);
}

.journey-step h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.journey-step p { color: var(--muted); font-size: .88rem; margin: 0; }

/* ---------- Built for Texas band ---------- */

.texas-band {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--ink);
    background-image:
        radial-gradient(1000px 500px at 12% 120%, rgba(61, 92, 143, .5), transparent 60%),
        radial-gradient(700px 400px at 92% -20%, rgba(95, 129, 181, .32), transparent 60%);
    padding: 5.5rem 0;
}

.texas-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.eyebrow-light { color: #9fb6d9; }

.texas-copy h2 { color: #fff; }
.texas-copy p { color: rgba(201, 214, 232, .85); margin: 0; }

.texas-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.texas-points li {
    position: relative;
    padding: 1.1rem 1.3rem 1.1rem 3.2rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(159, 182, 217, .22);
    border-radius: 12px;
    color: rgba(201, 214, 232, .9);
    font-size: .95rem;
}

.texas-points b { color: #fff; }

.texas-points li::before {
    content: "";
    position: absolute;
    left: 1.3rem; top: 1.45rem;
    width: 14px; height: 9px;
    border-left: 2.5px solid #9fb6d9;
    border-bottom: 2.5px solid #9fb6d9;
    transform: rotate(-45deg);
}

/* ---------- Roles / every seat ---------- */

.role-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.3rem;
}

.role-card {
    background: #fff;
    border: 1px solid var(--ice);
    border-radius: var(--radius);
    padding: 1.7rem 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}

.role-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.role-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: var(--mist);
    color: var(--steel);
    margin-bottom: .9rem;
}

.role-ic svg { width: 22px; height: 22px; }

.role-card h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    margin: 0 0 .3rem;
    color: var(--ink);
}

.role-card p { color: var(--muted); font-size: .86rem; margin: 0; }

/* ---------- Challenges / pain points ---------- */

.pain-list { display: grid; gap: 1.1rem; }

.pain-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--ice);
    border-radius: var(--radius);
    padding: 1.6rem 1.9rem;
    box-shadow: var(--shadow-sm);
}

.pain-q {
    position: relative;
    margin: 0;
    color: var(--ink);
    font-size: 1.02rem;
    font-style: italic;
    font-weight: 500;
    padding-left: 1.5rem;
}

.pain-q::before {
    content: "\201C";
    position: absolute;
    left: -.05rem; top: .2rem;
    font-family: var(--font-display);
    font-size: 2.1rem;
    color: var(--ice);
    line-height: 1;
}

.pain-a {
    position: relative;
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
    padding-left: 1.7rem;
}

.pain-a::before {
    content: "";
    position: absolute;
    left: 0; top: .5rem;
    width: 16px; height: 10px;
    border-left: 2.5px solid var(--steel);
    border-bottom: 2.5px solid var(--steel);
    transform: rotate(-45deg);
}

/* ---------- Security & compliance ---------- */

.sec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.sec-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--ice);
    border-radius: var(--radius);
    padding: 1.6rem;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}

.sec-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.sec-ic {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: var(--grad-soft);
    color: #fff;
}

.sec-ic svg { width: 22px; height: 22px; }

.sec-card h4 { font-family: var(--font-display); font-size: 1rem; margin: 0 0 .25rem; }
.sec-card p { color: var(--muted); font-size: .88rem; margin: 0; }

/* ---------- FAQ ---------- */

.faq { max-width: 820px; margin-inline: auto; }

.faq-item {
    border: 1px solid var(--ice);
    border-radius: 12px;
    background: #fff;
    margin-bottom: .9rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.2rem 1.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "";
    flex-shrink: 0;
    width: 11px; height: 11px;
    border-right: 2px solid var(--steel);
    border-bottom: 2px solid var(--steel);
    transform: rotate(45deg);
    transition: transform .25s ease;
}

.faq-item[open] summary::after { transform: rotate(-135deg); }

.faq-item .faq-a {
    padding: 0 1.5rem 1.3rem;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.7;
}

/* ---------- Scroll reveal ---------- */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }
.delay-3 { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-m { animation: none; }
}

/* ?noanim query flag — freeze all motion for automated screenshots/QA */
html.no-anim { scroll-behavior: auto; }
html.no-anim *, html.no-anim *::before, html.no-anim *::after {
    transition: none !important;
    animation: none !important;
}
html.no-anim .reveal { opacity: 1; transform: none; }
html.no-anim .hero { min-height: 760px; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-copy .lede { margin-inline: auto; }
    .hero { --hero-art: min(320px, 66vw); }

    .pillars { grid-template-columns: 1fr; }
    .pillar { min-height: 400px; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }

    .ribbon-inner { flex-direction: column; text-align: center; }
    .ribbon-text { flex-direction: column; gap: .8rem; }

    .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }

    .cap-grid { grid-template-columns: 1fr; }
    .diff-grid { grid-template-columns: 1fr; }
    .diff-feature { grid-column: auto; grid-template-columns: 1fr; }
    .journey { grid-template-columns: repeat(2, 1fr); }
    .texas-inner { grid-template-columns: 1fr; gap: 2rem; }
    .role-grid { grid-template-columns: repeat(2, 1fr); }
    .pain-row { grid-template-columns: 1fr; gap: .8rem; }
    .sec-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .main-nav {
        position: fixed;
        top: var(--header-h);
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--paper);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--ice);
        padding: .6rem 24px 1.2rem;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: all .22s ease;
    }

    .main-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

    .main-nav > a:not(.btn) { display: none; }
    .main-nav > .btn { margin-top: .8rem; }

    /* No room for a popup in the drawer: show the whole list inline instead. */
    .nav-menu-btn { display: none; }
    .nav-menu-list {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        border: 0;
        box-shadow: none;
        padding: 0;
        background: none;
    }
    .nav-menu-list a { padding: .9rem 0; }

    .pager-inner { flex-direction: column; }
    .pager-link { max-width: none; }
    .pager-next { text-align: left; margin-left: 0; }

    .nav-toggle { display: block; }

    .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
    .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .section { padding: 4.5rem 0; }
    .contact-card { padding: 1.8rem; }
    .form-row.two { grid-template-columns: 1fr; gap: 1.2rem; }

    .journey { grid-template-columns: 1fr; }
    .role-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   HERO LAYOUT + TYPE SCALE — 2026-08-26
   The mark sits on the left, the copy on the right.

   Type runs above the stock design scale but no longer at a flat 2x. At 2x the
   700-character positioning paragraph rendered as six lines of oversized grey
   text that competed with the h1 instead of supporting it, and the eyebrow
   broke onto a second line. The hierarchy now steps h1 -> lede -> detail, with
   colour doing some of the work size was doing: the lede is ink, the detail is
   muted. Every size here is still larger than the design it replaced.
   ========================================================================== */

/* Guarded: the 960px query below collapses the hero to one column, and an
   unguarded rule this late in the file would win over it. */
@media (min-width: 961px) {
    /* Content-sized tracks rather than fr units: the lockup takes its own
       width and the copy its own measure, so the pair centres on the page
       instead of inheriting whatever slack the fr split left over. */
    .hero-grid {
        grid-template-columns: var(--hero-art) minmax(0, 40.5rem);
        justify-content: center;
    }

    /* The symmetry rule: the copy column stands exactly as tall as the
       lockup beside it (artwork is 800x810) and centres its text inside
       that box, so the two halves of the row share a top and a bottom
       edge whatever the paragraph reflows to. */
    .hero-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: calc(var(--hero-art) * 1.0125);
    }
}

.hero-head .eyebrow {
    font-size: 1rem;              /* design: .78rem */
    letter-spacing: .26em;
    margin-bottom: 1.15rem;
}

.hero-head h1 {
    text-wrap: balance;
    margin-bottom: .75rem;
}

/* Both halves of the positioning statement share one treatment on request, so
   the paragraph break is the only thing separating them. Sized to land the
   whole ~700-character block beside a three-line h1 without overrunning it. */
.hero-copy .lede,
.hero-copy .lede-detail {
    font-size: clamp(1.12rem, 1.55vw, 1.37rem);   /* design: 1.18rem, +7% */
    line-height: 1.65;
    font-weight: 400;
    color: var(--ink);
    max-width: 40.5rem;
    text-wrap: pretty;
}

.hero-copy .lede { margin-bottom: 1.15rem; }
/* .hero-actions carries its own top margin now that it sits outside the
   copy column; a bottom margin here would throw off the vertical centring. */
.hero-copy .lede-detail { margin-bottom: 0; }

/* --- Reconciliation for partials written after this stylesheet shipped ---
   The single-page build had no section-head h1 (every section led with h2) and
   no honeypot field on the contact form. Both exist in the current partials, so
   they need rules here or they render wrong: the h1s come out at full hero size,
   and the honeypot input becomes visible to real visitors. */

.section-head h1 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; }

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ==========================================================================
   THE MONOLITH EFFECT + PILOT PROGRAM — 2026-08-26
   New content blocks. The module grid replaces the old .diff-grid cards; the
   pilot band is a new section sitting between the FAQ and the contact form.
   ========================================================================== */

/* ---------- The Monolith Effect: module grid ---------- */

/* The tagline runs longer than the 42rem the stock .section-head allows. */
.section-head-wide { max-width: 54rem; }

.mod-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

/* Cards stretch to a common row height and the disclosure is pinned to the
   bottom, so every "See more" in a row lines up in the closed state. */
.mod-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ice);
    border-radius: var(--radius);
    padding: 1.7rem 1.6rem 1.4rem;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.mod-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--steel-2);
}

.mod-num {
    display: block;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--steel-2);
    margin-bottom: .5rem;
}

.mod-card h3 { font-size: 1.06rem; margin-bottom: .55rem; }
.mod-card p { color: var(--muted); font-size: .93rem; margin: 0; }

.mod-more { margin-top: auto; padding-top: .9rem; }

.mod-more > summary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--steel);
}

.mod-more > summary::-webkit-details-marker { display: none; }

.mod-more > summary:hover { color: var(--ink); }

.mod-more > summary:focus-visible {
    outline: 2px solid var(--steel-2);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Chevron drawn from two borders so it inherits the summary colour. */
.mod-more > summary::after {
    content: "";
    width: .38rem;
    height: .38rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}

.mod-more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

.mod-more .see-less { display: none; }
.mod-more[open] .see-more { display: none; }
.mod-more[open] .see-less { display: inline; }

.mod-more > p {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--ice);
}

/* ---------- Pilot program ---------- */

.pilot-program {
    padding: 6rem 0;
    background:
        radial-gradient(700px 420px at 88% 0%, rgba(95, 129, 181, .34), transparent 62%),
        linear-gradient(165deg, #16233f 0%, #0b1526 60%, #16264a 100%);
    color: rgba(255, 255, 255, .84);
}

.pilot-program h2,
.pilot-program h3,
.pilot-program h4 { color: #fff; }

/* These two sections lead their own page now, so their heading is an h1. The
   design was drawn at h2 scale; without these it jumps to hero size. */
.pp-head h1,
.contact-copy h1 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; }

.pp-head { max-width: 60rem; margin-bottom: 3rem; }
.pp-head p { font-size: 1.05rem; }
.pp-head p:last-child { margin-bottom: 0; }

.pp-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 2.6rem;
    align-items: start;
}

.pp-copy h3 { font-size: 1.32rem; margin-bottom: .9rem; }
.pp-copy p:last-child { margin-bottom: 0; }

.pp-quote {
    margin: 1.7rem 0;
    padding: .3rem 0 .3rem 1.4rem;
    border-left: 3px solid var(--steel-2);
}

.pp-quote p { margin: 0; color: #fff; font-size: 1.08rem; }
.pp-quote strong { font-family: var(--font-display); }

.pp-measures {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius);
    padding: 1.9rem 1.8rem;
}

.pp-measures h4 { font-size: 1rem; margin-bottom: 1rem; }

.pp-list { list-style: none; margin: 0; padding: 0; }

.pp-list li {
    position: relative;
    padding: .55rem 0 .55rem 1.9rem;
    font-size: .95rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.pp-list li:first-child { border-top: 0; }

.pp-list li::before {
    content: "";
    position: absolute;
    left: .3rem;
    top: 1.05rem;
    width: .5rem;
    height: .26rem;
    border-left: 2px solid #9fb6d9;
    border-bottom: 2px solid #9fb6d9;
    transform: rotate(-45deg);
}

.pp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 2.4rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

@media (max-width: 1020px) {
    .mod-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    .mod-grid { grid-template-columns: 1fr; }
    .pilot-program { padding: 4.5rem 0; }
    .pp-grid { grid-template-columns: 1fr; gap: 2rem; }
    .pp-actions { margin-top: 2.4rem; }
    .pp-actions .btn { width: 100%; }
}

/* The 960px query centres the hero copy; the detail paragraph has to follow. */
@media (max-width: 960px) {
    .hero-copy .lede-detail { margin-inline: auto; }
}

/* "The Monolith Effect" is 7 characters longer than "Why Monolith" was, and the
   horizontal nav has to survive down to 761px before the hamburger takes over.
   Tighten the tracking through that band rather than move the breakpoint. */
@media (min-width: 761px) and (max-width: 1100px) {
    .main-nav { gap: 1.1rem; }

    /* Explore lists both of these, so below ~1000px they give up their slot
       rather than wrap the row. Five items no longer fit on one line there. */
    .nav-topic { display: none; }
    .main-nav > a:not(.btn) { font-size: .7rem; letter-spacing: .08em; }
    .btn-nav { padding: .55rem .9rem; font-size: .68rem; }
}

/* Named hook for the always-visible first sentence of a module pitch. */
.mod-lead { color: var(--muted); }

/* ==========================================================================
   SUB-PAGE CHROME
   The multi-route pages open with a breadcrumb rather than the hero, and .hero
   is the only rule that clears the fixed header — so without these the trail
   renders underneath it. These classes shipped with the route split but never
   had rules in this stylesheet.
   ========================================================================== */

/* Clears the fixed header AND the frame's top run. main's padding box is the
   frame's containing block, so padding here moves the content down without
   dragging the frame down with it. */
.page-light main { padding-top: calc(var(--header-h) + var(--pf-band-y)); }

/* Lifted over the frame for the same reason .pager-link is. The trail is the
   first thing on the page, so it sits inside the top-left corner no matter how
   the boxes are sized - the corner's traces ran through the words and left the
   Home link looking struck out. main's padding-top clears the straight top run;
   this clears the corner. */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-top: 1.7rem;
    font-size: .82rem;
    color: var(--muted);
    position: relative;
    z-index: 5;
}

.crumbs a { color: var(--steel); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs > span[aria-hidden] { color: var(--ice); }
.crumb-current { color: var(--muted); }

/* ---------- Privacy / legal pages ---------- */

.legal-page { padding-top: 3rem; }
.legal-page .shell { max-width: 48rem; }

.legal-meta {
    color: var(--muted);
    font-size: .9rem;
    margin-bottom: 2rem;
}

.legal-callout {
    background: var(--mist);
    border: 1px solid var(--ice);
    border-left: 3px solid var(--steel);
    border-radius: var(--radius);
    padding: 1.3rem 1.5rem;
    margin-bottom: 2.5rem;
}

.legal-callout p:last-child { margin-bottom: 0; }

/* ---------- Pilot offer highlights ---------- */

.pp-offer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    list-style: none;
    margin: 0 0 3rem;
    padding: 0;
}

.pp-offer li {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-top: 2px solid var(--steel-2);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
}

.pp-offer-key {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: .3rem;
}

.pp-offer-val {
    display: block;
    font-size: .95rem;
    color: rgba(255, 255, 255, .78);
}

@media (max-width: 820px) {
    .pp-offer { grid-template-columns: 1fr; gap: .9rem; margin-bottom: 2.4rem; }
}