/* ================================================================
   NOMENON — shared chrome
   Single source of truth for the top-of-page nav + the design tokens
   (palette, nav geometry, glow buttons). Linked by every page BEFORE
   its page-specific stylesheet, so the navbar is identical everywhere
   by construction — change it here, it changes on every page.
   Extracted verbatim from index.css.
   ================================================================ */

:root {
    /* the site is dark by construction — declaring it stops Chromium's Auto
       Dark Mode (Vivaldi's "force dark on websites") from re-inverting us.
       Without this it re-lights grayscale surfaces like --panel, which turned
       .btn white. about/manifesto/privacy/tos already declared it; this is the
       shared source. */
    color-scheme: dark;

    /* nav & page geometry */
    --nav-height: 3.5rem;
    --nav-bar-mob: 2.75rem;
    --page-top: calc(var(--nav-height) + 1rem);
    --footer-height: 0.75rem;
    --last-page-bottom: calc(var(--footer-height) + 1rem);

    /* RESERVED accent — NOMENON's pure cyan. NOT the default: it appears
       only on the highlighted middle panel and a few deliberate accent
       moments. Everything else uses neutral light. */
    --accent: #00c2ff;
    --rgb-accent: 0, 194, 255;
    --accent-hov: #00d4ff;

    /* palette — cool-steel luminance ramp (the page background itself stays
       pure #000; these are the surface + text tones) */
    --shadow: #0a0a0a; /* drawers / modals / panels / raised surfaces */
    --shadow-hov: #1a1a1a;
    --umber: #1a1a1a;
    --umber-rgb: 10 10 10; /* space-form, for rgb(var(--umber-rgb) / a) stops */
    --graphite: #01010f; /* emph panels */
    --graphite-hov: #030334;
    --hairline: #1e2a38;
    --slate: #2c3b5f; /* divider / lighter steel */
    --muted: #90a0bf;
    --ice: #e6f1fb; /* icy, glassy white — the near-white text */
    --ice-rgb: 230 241 251;
    --soft: #c8d2fb;
    --soft-rgb: 200 210 251;

    --card-border: 0.5px solid var(--hairline);

    --btn-border: var(--card-border);

    --spacer: 0.25rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

button,
a {
    touch-action: manipulation;
}

/* Square by construction. Every border-radius on the site was deleted rather
   than overridden — 50 rounded rules being fought by 50 more is not a design
   system — but deletion alone does not reach the form controls: Safari and iOS
   round <button>, <input>, <textarea> and <select> in the UA stylesheet, so
   removing our own radius hands them back to WebKit's. This is the one place a
   0 is stated rather than a declaration removed, and it is stated once. */
button,
input,
textarea,
select {
    border-radius: 0;
}

/* No lines on links, anywhere. The browser underlines every <a> by default, so
   pages that never styled a given link got one for free (the page-1 "Discover
   More" and the founder CTA both did). Killed once here rather than per page —
   buttons keep their own box borders, which are boxes, not underlines. */
a {
    text-decoration: none;
}

h1,
h2 {
    text-wrap: balance;
}

/* The document itself never scrolls, on any page. Everything scrolls in place
   inside its own container — `.pages` on the scroll-snap pages, `<main>` on the
   long documents (see the rule below). One scrolling model site-wide. */
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--shadow);
    color: var(--ice);
}

/* Long documents (manifesto, legal, founder) scroll in place, exactly as
   `.pages` does — the document stays locked and the article moves inside its
   own container. `main:not(.pages)` so a new long-form page gets this by
   default; index/explainer opt out by virtue of using `<main class="pages">`,
   which brings its own height/overflow + scroll-snap. */
main:not(.pages) {
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.tm {
    font-size: 0.5rem;
}

/* .horizon draws its glow with an absolutely-positioned ::before, so the host
   must be a containing block or the glow escapes and anchors to the nearest
   positioned ancestor. .card sets position:relative itself — which is why it
   worked on cards and spread across the page on .nav-btn / .nav-btn-2 (static).
   Owning it here makes .horizon self-contained: it works on anything.
   Placed BEFORE .site-nav deliberately — .site-nav is position:fixed and also
   carries .horizon; equal specificity means source order decides, so this must
   stay above it or the navbar stops being fixed. */
.horizon {
    position: relative;
}

/* ── nav ── */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: var(--nav-height);
    display: flex;
    /* Even-spaced centred cluster. The old space-between spread five
       different-width links edge-to-edge, so the gaps were all unequal and
       the bar read as ragged. Equal gaps around a centred group reads as a
       deliberate nav. (Mobile resets this in the <=769px block below.) */
    justify-content: space-between;
    align-items: center;
    padding: 0 3rem;
    overflow: hidden;
    background: transparent;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.site-nav a {
    text-decoration: none;
}

/* Home mark — the wordmark link in the nav, injected on every page by
   navHtml() in src/index.js. THIS is the single definition of .wordmark: it
   had none for a while, which is why four page stylesheets each grew their
   own and a page-level rule could reach across and hide it everywhere. Page
   CSS must not restyle it — the mobile bar has its own brand (.m-bar-brand)
   and the mobile menu its own (.m-brand). */
.wordmark {
    display: flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
    /* links carry no lines anywhere on this site; the guard stays so a page
       stylesheet reintroducing one cannot reach the wordmark */
    border-bottom: 0;
}

/* The wordmark is the animated mark, not gradient-clipped text: the glyphs ARE
   the gradient, and a band of light travels through them. The SVG is injected
   inline by navHtml() (src/index.js) and carries no colour of its own — every
   tone below is a stop class, which is what lets hover reach in and change the
   light. Sized by height with width:auto — the 375x54 on the element reserves
   the box, so it costs no layout shift. */
.wordmark-mark {
    display: block;
    height: clamp(1.25rem, calc(0.9vw + 1rem), 1.75rem);
    width: auto;
}

/* The resting ramp, copied from nomenon_logo_anim.svg: transparent at both
   ends, ice across the middle. Only the middle letters are lit at rest — the
   ends of the word are the surface showing through. */
.nom-void {
    stop-color: var(--umber);
    stop-opacity: 0;
}
.nom-deep {
    stop-color: #131920;
}
.nom-muted {
    stop-color: var(--muted);
}
.nom-soft {
    stop-color: var(--soft);
}
.nom-ice {
    stop-color: var(--ice);
}

/* Hover reveals the NAME, it does not brighten the picture. Every stop steps
   one rung up the same cool ramp — the transparent and near-black ends become
   light grey, so the outer letters come out of the dark and NOMENON reads whole
   — while the band that was already lit stays ice. Nothing is filtered: the old
   brightness(1.25) clipped the blue headroom off #e6f1fb and landed on flat
   #ffffff, which is what read as warm. Light here only ever arrives as more of
   the ramp, never as a channel multiply. */
.wordmark-mark stop {
    transition:
        stop-color 0.45s ease,
        stop-opacity 0.45s ease;
}
.wordmark:hover .nom-void,
.wordmark:focus-visible .nom-void {
    stop-color: var(--muted);
    stop-opacity: 1;
}
.wordmark:hover .nom-deep,
.wordmark:focus-visible .nom-deep,
.wordmark:hover .nom-muted,
.wordmark:focus-visible .nom-muted {
    stop-color: var(--soft);
}
.wordmark:hover .nom-soft,
.wordmark:focus-visible .nom-soft {
    stop-color: var(--ice);
}

/* The sweep. Timing is the SVG export's, exactly — 60s, band crossing between
   80% and 93.333% of the cycle, ease-in-out (cubic-bezier(.42,0,.58,1)) on each
   leg — so the case notice on the home page, which reproduces these numbers in
   index.css, still lights on the same beat. Translating the rect moves the paint
   with it: the gradient is userSpaceOnUse, and the rect is oversized enough that
   a 170-unit shift never uncovers an edge. */
@keyframes nom-sweep {
    0%,
    73.3333% {
        transform: translate(0, 0);
    }
    80% {
        transform: translate(-170px, -170px);
    }
    93.3333% {
        transform: translate(170px, 170px);
    }
    100% {
        transform: translate(0, 0);
    }
}
.nom-sweep {
    animation: nom-sweep 60s ease-in-out infinite;
}

/* Caught mid-pass, the light stops where it is and the reveal happens around
   it, rather than the band sliding out from under the pointer. */
.wordmark:hover .nom-sweep,
.wordmark:focus-visible .nom-sweep {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .nom-sweep {
        animation: none;
    }
    .wordmark-mark stop {
        transition: none;
    }
}

.nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 2rem;
}

.nav-item {
    flex: 1;
    /* The nav links are <a>, not <button> (a button inside the anchor was
       nested interactive content). A button centres its label by default; an
       anchor does not. display:flex activates the align/justify pair below,
       which were already declared here but inert, so the label stays centred. */
    display: flex;
    padding: 8px 0;
    font-family: "Oxanium", sans-serif;
    font-weight: 300;
    font-size: clamp(0.9rem, calc(0.200vw + 0.860rem), 1.1rem);
    color: var(--ice);
    background-color: transparent;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    border: 0 solid transparent;
    cursor: pointer;
    /* The grow-on-hover is a transform, not font-size/letter-spacing/weight.
       Those three are layout properties — transitioning them animated a reflow
       and dragged every sibling nav item sideways for 400ms. A transform is
       paint-only, so the item can grow without moving anything else. */
    transition:
        color 0.2s ease,
        border-width 0.2s ease,
        border-color 0.2s ease;
}

/* ── 04 · the unread tick ── a filed case that hasn't been opened. Square, one
   accent mark, no dot and no badge: the nav says a case exists and nothing
   more. The worker drops data-mark on the page it points at. */
.nav-item[data-mark],
.m-link[data-mark] {
    position: relative;
}

.nav-item[data-mark]::after,
.m-link[data-mark]::after {
    content: "";
    position: absolute;
    top: 0.35rem;
    right: -0.55rem;
    width: 4px;
    height: 4px;
    background: var(--accent);
}

.nav-item:hover,
.nav-item:active {
    color: var(--accent);
    border-bottom-width: 0.5px;
    border-bottom-color: var(--accent);
}

/* ── Button surface ── corridor texture + border/text luminance on hover, no
   glow (retires .glow-btn). Default is the panel surface; add .btn-graphite for
   the graphite (emphasis) surface. Spread .btn / .btn-graphite onto buttons. */
.nav-btn,
.btn1,
.btn2 {
    display: inline-flex;
    max-width: 50vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    white-space: nowrap;
    border: none;
    font-family: "Oxanium", sans-serif;
    font-size: clamp(1rem, 0.208vw + 0.951rem, 1.2rem);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
        border 0.12s linear,
        background 0.12s linear,
        color 0.12s linear;
}

.btn1 {
    background: var(--soft);
    border: 1px solid transparent;
    color: var(--umber);
}

.btn1:hover {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.btn2 {
    background: transparent;
    color: var(--ice);
    border: var(--btn-border);
}

.btn2:hover {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.nav-btn {
    background: transparent;
    color: var(--ice);
    border: var(--btn-border);
}

.nav-btn:hover {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.btn3 {
    display: block;
    text-align: center;
    font-family: "Oxanium", sans-serif;
    font-size: clamp(1rem, 0.225vw + 0.93rem, 1.2rem);
    font-weight: 100;
    color: var(--accent);
    border: none;
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition:
        color 0.12s linear,
        letter-spacing 0.12s linear,
        font-weight 0.12s linear;
}

.btn3:hover {
    color: var(--accent-hov);
    letter-spacing: 0.33em;
    font-weight: 500;
}

/* 'PAGE' AND SNAP CONSTRUCTION */

.pages {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100dvh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.page {
    padding: var(--page-top) 0 0 0;
    width: 100%;
    height: 100dvh;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* HERO SECTION */

.hero-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.product {
    max-width: 75vw;
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: clamp(3rem, 3.117vw + 2.260rem, 6rem);
    color: var(--ice);
    /* Declared, not left to `normal`. Oxanium's normal resolves to ~1.25, which
       at 81px is 20px of extra leading per line — the lockup stops reading as
       one mass. The <=769px block loosens this to 1.3 for the phone's smaller
       type; that override cannot reach desktop, so this is the desktop value. */
    line-height: 1;
    letter-spacing: -0.05em;
    text-align: center;
}

.product .tm {
    font-size: clamp(1rem, calc(2.254vw + 0.296rem), 3rem);
    padding-bottom: 1rem;
}

.eyebrow {
    display: block;
    text-align: center;
    font-family: "Oxanium", sans-serif;
    font-weight: 300;
    font-size: clamp(0.9rem, calc(0.797rem + 0.329vw), 1.2rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: 0;
    animation: rise 0.6s ease 0.05s forwards;
}

.teaser {
    max-width: 85vw;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: clamp(1.2rem, 0.400vw + 1.120rem, 1.6rem);
    font-weight: 400;
    color: var(--soft);
    letter-spacing: 0.05em;
    text-align: center;
}

.descriptor {
    max-width: 60vw;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 0.9296rem + 0.2254vw, 1.2rem);
    color: var(--soft);
    line-height: 1;
    text-align: center;
    opacity: 0;
    animation: rise 0.6s ease 0.45s forwards;
}

.cta-row {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}

.cta-down {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-self: center;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.cta-down p {
    display: block;
    text-align: center;
    font-family: "Oxanium", sans-serif;
    font-size: clamp(1rem, 0.225vw + 0.93rem, 1.2rem);
    font-weight: 100;
    color: var(--soft);
    text-transform: uppercase;
    letter-spacing: 0.33;
    transition: color 0.3s ease;
}

.chevron {
    border: 0;
    padding: 0;
    background: none;
    color: var(--soft);
    cursor: pointer;
    /* Nudged down 2px. Relative offset rather than margin or transform:
       chevron-bounce owns the transform, and margin would only move it ~1px
       because the parent centres the margin box. */
    position: relative;
    top: 4px;
    animation: chevron-bounce 1.9s ease-in-out infinite;
}

.chevron svg {
    display: block;
    margin-inline: auto;
    stroke: currentColor;
    transition: stroke 0.3s ease;
}

.cta-down:hover {
    .cta-down p {
        color: var(--ice);
    }
    .chevron svg {
        stroke: var(--ice);
    }
}

/* Carried over from the old .scroll-cue: same 1.9s / 6px / ease-in-out.
   The original keyframes baked in translateX(-50%) because .scroll-cue was
   absolutely centred; .chevron is a flex item, so that offset would shove it
   half its width left. Motion only. */
@keyframes chevron-bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chevron {
        animation: none;
    }
}

/* CARDS */

/* Page 3 · one grid owns the whole layout. 3 columns; rows are:
   header (auto, full-width) / card / card (equal 1fr) / buttons (auto, short).
   grid-template-rows controls all vertical spacing — no flex distribution. */
.card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2.5rem;
    min-height: 0;
    width: 100%;
}

.card,
.card-graphite,
.card-lumen,
.card-fore,
.card-accent,
.card-slate {
    position: relative;
    overflow: hidden;
    border: var(--card-border);
}

.card {
    background: transparent;
}

.card-graphite {
    background: var(--graphite);
    border: 1px solid var(--slate);
}

.card-lumen {
    background: var(--soft);
    border: 1px solid var(--slate);
}

.card-fore {
    background: var(--ice);
    border: 1px solid var(--ice);
}

.card-accent {
    background: transparent;
    border: 1px solid var(--accent);
}

.card-slate {
    background: var(--slate);
    border: 1px solid var(--soft);
}

.card-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cta-text {
    align-self: center;
    justify-self: center;
    text-align: center;
}

.pitch {
    font-family: "IBM Plex Sans", sans-serif;
    max-width: 80vw;
    font-weight: 300;
    font-size: clamp(1.5rem, calc(0.250vw + 1.450rem), 1.75rem);
    line-height: 1.5;
    text-align: center;
    color: var(--ice);
}

/* ================================================================
   Drawers + modal — shared across pages (moved from index.css):
   About drawer · Apply/Co-Build drawer · Book/Cal modal + intake form.
   Uses the :root tokens + .glow-btn defined above.
   ================================================================ */
/* ── About drawer ── */
.about-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0.3s;
}
.about-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0s;
}
.about-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 34vw;
    min-width: 320px;
    max-width: 480px;
    background: transparent;
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    z-index: 210;
    transform: translateX(-100%);
    transition:
        transform 0.35s cubic-bezier(0.4,
        0,
        0.2,
        1),
        visibility 0s linear 0.35s;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 3rem 2.5rem 4rem;
    pointer-events: none;
    visibility: hidden;
}

.about-drawer.open {
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
    transition:
        transform 0.35s cubic-bezier(0.4,
        0,
        0.2,
        1),
        visibility 0s;
}

.about-drawer.open::after {
    content: "";
    position: relative;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: var(--horizon-width);
    height: 1.5px;
    background: var(--horizon-line);
}

.about-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 1px solid var(--muted);
    color: var(--soft);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition:
        background 0.12s linear,
        border-color 0.12s linear,
        color 0.12s linear;
}

.about-close:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.about-heading {
    margin-top: 1.5rem;
    font-family: "Oxanium", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 2rem;
}
.about-body p {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--ice);
    margin-bottom: 1.6rem;
}

.about-body-link,
.about-body-link:visited,
.about-body-link:active,
.about-body-link:focus {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    text-decoration-color: rgba(var(--rgb-accent), 0.35);
    text-underline-offset: 3px;
}
.about-body-link:hover {
    color: var(--accent);
    text-decoration-color: rgba(var(--rgb-accent), 0.4);
}

.about-body .emphatic {
    font-family: "Oxanium", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.9;
    margin-bottom: 1.6rem;
}

.about-manifesto-cta {
    margin-top: 2rem;
}
.intake-field {
    margin-bottom: 0.75rem;
}
.intake-field input,
.intake-field textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--ice);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.75rem;
    padding: 0 0.75rem;
    outline: none;
    transition: border-color 0.25s;
    caret-color: rgba(255, 255, 255, 0.6);
}
.intake-field input:focus-visible,
.intake-field textarea:focus-visible {
    border-color: rgba(var(--rgb-accent), 0.7);
}
.intake-field input {
    height: 2.5rem;
}
.intake-field textarea {
    height: 5rem;
    padding: 0.63rem 0.75rem;
    resize: none;
}
.intake-field input::placeholder,
.intake-field textarea::placeholder {
    color: var(--muted);
}
.intake-field input:focus,
.intake-field textarea:focus {
    border-color: rgba(255, 255, 255, 0.45);
}
.intake-field input.err,
.intake-field textarea.err {
    border-color: rgba(255, 80, 80, 0.5);
}
.intake-submit {
    --glow: var(--rgb-line);
    width: 100%;
    margin-top: 0.8rem;
    font-size: 0.63rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    white-space: nowrap;
}
.intake-submit:disabled {
    opacity: 0.5;
    cursor: default;
}

@media (min-width: 769px) {
    .intake-submit {
        font-size: 1rem;
        height: 2.75rem;
    }
}
.intake-error {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: rgba(255, 80, 80, 0.8);
    margin-top: 0.5rem;
    min-height: 1em;
}

.calendly-embed {
    width: 100%;
    height: 100%;
    overflow: scroll;
}
.thankyou-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 460px;
    padding-bottom: 1rem;
}
.thankyou-inner::before {
    content: "";
    display: block;
    width: 49px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent));
    margin-bottom: 2rem;
}
.thankyou-eyebrow {
    font-family: "Oxanium", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.2rem;
}
.thankyou-text {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.9rem;
}
.thankyou-text strong {
    color: var(--ice);
    font-weight: 600;
}
.thankyou-text a {
    color: var(--accent);
    text-decoration: none;
}
.thankyou-text a:hover {
    text-decoration: underline;
}
.thankyou-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1.8rem;
    flex-shrink: 0;
}
.thankyou-decline {
    background: none;
    border: none;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}
.thankyou-decline:hover {
    color: rgba(255, 255, 255, 0.7);
} /* ── apply drawer ── */
.apply-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0.3s;
}
.apply-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0s;
}
.apply-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 34vw;
    min-width: 320px;
    max-width: 480px;
    background: var(--graphite);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 210;
    transform: translateX(100%);
    transition:
        transform 0.35s cubic-bezier(0.4,
        0,
        0.2,
        1);
    overflow-y: hidden;
    padding: 1.5rem 2rem 1.5rem;
    pointer-events: none;
}
.apply-overlay.open .apply-drawer {
    transform: translateX(0);
    pointer-events: auto;
}
.apply-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.apply-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.55);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition:
        border-color 0.2s,
        color 0.2s;
}
.apply-close:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--ice);
}
.apply-title {
    flex: 1;
    text-align: right;
    font-family: "Oxanium", sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0;
}
.apply-drawer .intake-field {
    margin-bottom: 0.45rem;
}
.apply-drawer .intake-field textarea {
    height: 59px;
}
.apply-drawer #a-agents-product,
.apply-drawer #a-agents-internal {
    height: 76px;
}
.apply-drawer .intake-submit {
    margin-top: 0.5rem;
}

/* icy wordmark gradient — shared brand primitive (moved from index.css) */
.brand {
    font-family: "Horizon", sans-serif;
    background: linear-gradient(
        175deg,
        var(--umber) 1%,
        var(--hairline) 5%,
        var(--slate) 10%,
        var(--muted) 25%,
        var(--soft) 40%,
        var(--ice) 50%,
        var(--soft) 60%,
        var(--muted) 75%,
        var(--slate) 90%,
        var(--hairline) 95%,
        var(--umber) 99%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ================================================================
   Mobile nav — hamburger + full-screen panel menu.
   Markup is added ONLY to non-homepage pages (the homepage's mobile
   hero already IS its nav). Same cool-steel card surface as .panel/.card;
   items reuse the drawer/Cal triggers via data-attrs (no id collisions
   with the desktop .site-nav).
   ================================================================ */
.mobile-nav {
    display: none; /* desktop: no hamburger */
}

.hamburger {
    position: fixed;
    top: 0;
    right: 1rem;
    z-index: 230;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ice);
    transition:
        transform 0.3s ease,
        opacity 0.2s ease;
}
.mobile-nav.open .hamburger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.mobile-nav.open .hamburger span:nth-child(2) {
    opacity: 0;
}
.mobile-nav.open .hamburger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    /* the corridor surface (the page-1 world), replacing the old radial
       gradient lighting. mob_menu.webp is the portrait cut, drawn at the
       phone's own aspect (1320×2868 ≈ 2.17) instead of upscaling the square
       500×500 .card texture — center/cover puts the corridor's vanishing point
       behind the menu items. */
    background:
        var(--shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0.3s;
}
.mobile-nav.open .mobile-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}
/* The two menu CTAs are real buttons, same primary/secondary pair as the hero
   (.btn1 filled accent, .btn2 outlined) rather than more text in the link
   stack — a menu's actions should not look like its navigation. Sized up from
   the desktop pill because they're thumb targets. */
.m-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}
.mobile-menu .btn1,
.mobile-menu .btn2 {
    font-size: 1.35rem;
    padding: 0.6rem 1.25rem;
}

/* Favicon toggle — the animated NOMENON badge is the mobile bar's brand AND
   its menu button (deferred-plan direction). The sweep lives inside the SVG
   (idle, reduced-motion-aware). On open, the button itself rotates and lifts
   with the nav's luminance glow — transform/filter only, no layout. */
.nav-fav {
    position: fixed;
    top: 0;
    right: 1rem;
    z-index: 230;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* Two badges stacked in the button: the animated sweep (default) and a frozen
   still. Opening the menu cross-accents to the still, so the favicon's own sweep
   stops and the wordmark in the menu is the only thing animating — while both
   layers still rotate + glow together, keeping the open gesture smooth. */
.nav-fav-mark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition:
        transform 0.35s cubic-bezier(0.4,
        0,
        0.2,
        1),
        filter 0.35s ease,
        opacity 0.35s ease;
}
.nav-fav-frozen {
    opacity: 0;
}
.mobile-nav.open .nav-fav-anim {
    opacity: 0;
}
.mobile-nav.open .nav-fav-frozen {
    opacity: 1;
}
.mobile-nav.open .nav-fav-mark {
    transform: rotate(135deg);
}

/* The collapsed bar's SURFACE.

   .m-bar-brand and .hamburger are both position:fixed with nothing behind
   them, so on any page long enough to scroll — privacy, tos, manifesto,
   founder, incident — the content ran underneath the wordmark and through it.
   The phone was given the two fixed controls without the bar they sit on.

   Blur rather than a plate, matching .site-nav exactly: the desktop bar was an
   opaque --void surface with a hairline under it and is now transparent and
   blurred, so this has to be too. The chrome is one thing rendered at two
   widths — the moment the phone keeps a bordered plate the desktop no longer
   has, the single source stops being single, which is the whole reason the nav
   lives in one place.

   Drawn by the nav itself rather than added to each page, so it is the same
   single source as the rest of the chrome and no page has to know about it.
   .mobile-nav is display:none above 769px, which takes the pseudo-element with
   it — this needs no media query of its own. z-index sits just under the two
   controls (230) and above page content; the open menu is 220 and is its own
   full-bleed surface, so the bar retires with the brand when the menu opens. */
.mobile-nav::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-bar-mob);
    z-index: 229;
    background: transparent;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: none;
}

.mobile-nav.open::before {
    opacity: 0;
}

/* Collapsed mobile bar brand — the real wordmark (static, no sweep), pinned
   left on the same line as the favicon toggle. */
.m-bar-brand {
    position: fixed;
    top: 0;
    left: 1rem;
    z-index: 230;
    height: 2.75rem;
    display: flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}
.m-bar-mark {
    display: block;
    height: 1.35rem;
    width: auto;
}
/* the open menu shows its own centered wordmark — don't double it */
.mobile-nav.open .m-bar-brand {
    opacity: 0;
    pointer-events: none;
}

/* Menu header — the animated wordmark, doubling as the (otherwise absent)
   Home link on mobile. Collapsed bar shows the abstract badge; opening the
   menu reveals the full name. Sits above the items with breathing room. */
.m-brand {
    display: block;
    margin-bottom: 1.25rem;
    text-decoration: none;
    line-height: 0;
}
.m-brand-mark {
    display: block;
    width: clamp(11rem, 55vw, 15rem);
    height: auto;
}

/* Mobile menu items — full-screen stacked list. Reuses the nav's luminance
   language (rests at --muted, lifts to --fore) without the desktop pill. */
.m-link {
    font-family: "Oxanium", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    background: transparent;
    border: 0;
    padding: 0.5rem 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}
.m-link:hover,
.m-link:focus-visible {
    color: var(--ice);
}
/* the item for the page you're on reads in the reserved accent */
.m-link[aria-current="page"] {
    color: var(--accent);
}

/* Menu footer — the legal/links footer lives here on mobile, pinned to the
   bottom of the full-screen menu, so the page itself carries no footer. */
/* `env(safe-area-solid-bottom)` is not a real environment variable — the
   keyword is `safe-area-inset-bottom`. An unknown env() with no fallback makes
   the whole calc() invalid, so `bottom` was dropped and this absolutely
   positioned box fell back to its static position: sitting in the flex flow
   directly under the CTAs, in the middle of the screen, instead of at the
   foot. The fallback value keeps it valid on browsers without safe areas. */
.m-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.m-foot-links {
    display: flex;
    gap: 1.75rem;
}
.m-foot-links a {
    font-family: "Oxanium", sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.m-foot-links a:hover,
.m-foot-links a:focus-visible {
    color: var(--ice);
}
.m-foot-legal {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    opacity: 0.75;
    text-align: center;
    padding: 0 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .nav-fav-mark {
        transition: none;
    }
}

/* ================================================================
   Shared reveal animations — used by hero lockups, drawers, accent-ups
   across pages. Defined once here so any page linking sitewide.css has
   them; a page may still define its own to override.
   ================================================================ */
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(13px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Global reduced-motion reset — respect the OS setting site-wide. Pages may
   add their own narrower rules on top. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ================================================================
   Footer — shared visual language (canonical, token-based). Each page
   sets ONLY its own positioning: fixed vs relative, background, and the
   reveal animation. Page-specific extras (index's mobile button row,
   manifesto's .footer-back) stay in the page stylesheet.
   ================================================================ */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    z-index: 2;
    max-width: 100%;
    max-height: 2.5rem;
    padding: 0 2rem;
    padding-bottom: max(1.2rem, env(safe-area-solid-bottom));
    opacity: 0;
    animation: accentIn 0.6s ease 1s forwards;
}

@keyframes accentIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

footer span {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
footer > span:first-child {
    flex: 1;
}
footer a {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    padding: 4px 13px;
    border: 1px solid transparent;
    background: transparent;
    transition:
        background 0.4s ease,
        border-color 0.3s ease,
        color 0.2s ease;
}
footer a:hover {
    color: var(--ice);
    border-color: var(--hairline);
    background: rgba(255, 255, 255, 0.03);
}
.footer-legal {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.footer-links {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}
/* <= MOBILE SCREEN SIZE ONLY */

@media screen and (max-width: 769px) {
    html,
    body {
        overflow-y: auto;
    }

    .site-nav {
        display: none;
    }

    .mobile-nav {
        display: block;
    }

    /* track the nav's mobile padding */

    .pages {
        height: auto;
        overflow-y: visible;
        scroll-snap-type: none;
    }


    .page {
        height: auto;
        scroll-snap-align: none;
        padding: var(--nav-bar-mob) 1.25rem 0 1.25rem;
    }

    .product {
        line-height: 1.3;
    }

    .thankyou-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .intake-field input,
    .intake-field textarea {
        font-size: 1rem;
    }

    /* On mobile the footer lives in the menu overlay (.m-foot), never on the
       page. `body footer` (0,0,2) is deliberately more specific than the
       per-page `footer` rules (0,0,1) — several pages set their own
       `footer { position:fixed; display:flex }` in a base rule that, being
       linked after sitewide, would otherwise win the cascade at equal
       specificity. One authority here hides every page's footer on mobile. */

    .apply-drawer {
        padding: 1.5rem 1.5rem 2rem;
    }
    .apply-drawer .intake-field {
        margin-bottom: 0.7rem;
    }
    .apply-drawer .intake-field textarea {
        height: 4.5rem;
    }
    .apply-drawer #a-agents-product,
    .apply-drawer #a-agents-internal {
        height: 6rem;
    }
    .apply-drawer .intake-submit {
        margin-top: 1rem;
        height: 2.75rem;
    }
    body footer {
        display: none;
    }
}