/* ── FONTS (self-hosted) ──
   Served from this origin, not fonts.googleapis.com. Google Fonts loads the font
   files from a Google server, which means every visitor's IP address is sent to
   Google before they have agreed to anything; LG Munchen I found that this alone
   breaches the GDPR (3 O 17493/20, 20 Jan 2022). Self-hosting removes the
   transfer, so there is nothing to disclose and nothing to consent to.

   These declarations mirror what the Google Fonts API served for the old
   stylesheet link, face for face and subset for subset, so rendering is
   unchanged. Only the two Latin subsets are carried, which is all Google was
   serving for this request; a glyph outside them falls back exactly as it did
   before. DM Sans is a variable font, so its three weights are three
   declarations pointing at one file, which is also how Google served it.

   To change a weight or add a family, do not hand-edit: re-request the CSS from
   the Google Fonts API, download the woff2 files it names into fonts/, and
   regenerate this block. Anything else risks the local files and these
   declarations drifting apart.

   Two departures from the old links, both deliberate. Lobster was requested by
   index.html and never applied to anything — no rule sets it as a font-family,
   no rule ever set it as a font-family — so it is not carried here.
   DM Sans 700 was requested by index.html alone, leaving <strong> on the other
   pages to browser-synthesized bold; it is the same variable file as the other
   DM Sans weights, so serving it site-wide costs nothing and makes real bold
   available everywhere. */

/* Bebas Neue 400 — latin-ext */
@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/bebas-neue-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bebas Neue 400 — latin */
@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/bebas-neue-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 300 — latin-ext */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/dm-sans-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 300 — latin */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/dm-sans-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 400 — latin-ext */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/dm-sans-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 400 — latin */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/dm-sans-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 500 — latin-ext */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/dm-sans-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 500 — latin */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/dm-sans-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 700 — latin-ext */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/dm-sans-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 700 — latin */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/dm-sans-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Red Hat Display 800 — latin-ext */
@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/red-hat-display-800-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Red Hat Display 800 — latin */
@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/red-hat-display-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Red Hat Display 400 italic — latin-ext */
@font-face {
    font-family: 'Red Hat Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/red-hat-display-italic-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Red Hat Display 400 italic — latin */
@font-face {
    font-family: 'Red Hat Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/red-hat-display-italic-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Red Hat Display 400 — latin-ext */
@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/red-hat-display-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Red Hat Display 400 — latin */
@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/red-hat-display-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Red Hat Display 500 — latin-ext */
@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/red-hat-display-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Red Hat Display 500 — latin */
@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/red-hat-display-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── TOKENS ── */
:root {
    --night:         #000;
    --night-surface: #0a0a0a;
    --night-card:    #141414;
    --bone:          #fff;
    --t1: #fff;
    --t2: rgb(206, 206, 206);
    --t3: rgb(166, 166, 166);
    --border-n: rgba(255,255,255,0.09);
    --border-d: rgba(255,255,255,0.12);
    --amber:         #fff;
    --amber-mid:     rgba(255,255,255,0.85);
    --dawn:          rgba(255,255,255,0.6);
    --dawn-mid:      rgba(255,255,255,0.7);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: #000;
    color: var(--t1);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
h1, h2, h3, h4 {
    font-family: 'Red Hat Display', sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-wrap: balance;
    line-height: 1.1;
}
p { max-width: 68ch; }
a { color: inherit; }
em { font-style: italic; }
strong { font-weight: 500; }

/* ── SCROLL REVEAL — body/card elements ── */
.js [data-r] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s var(--ease) var(--d, 0ms),
                transform 0.9s var(--ease) var(--d, 0ms);
}
.js [data-r].on { opacity: 1; transform: none; }

/* Headings scroll in horizontally */
.js h1[data-r], .js h2[data-r], .js h3[data-r] {
    opacity: 0;
    transform: translateX(-48px);
    transition: opacity 0.9s var(--ease) var(--d, 0ms),
                transform 0.9s var(--ease) var(--d, 0ms);
}
.js h1[data-r].on, .js h2[data-r].on, .js h3[data-r].on {
    opacity: 1; transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js [data-r] { opacity: 1; transform: none; transition: none; }
    .js h1[data-r], .js h2[data-r], .js h3[data-r] { opacity: 1; transform: none; transition: none; }
}

/* ── BUTTONS ── */
.btn {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 2.5rem;
    cursor: pointer;
    border: none;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}
.btn-amber { background: var(--amber); color: var(--night); }
.btn-amber:hover { background: var(--amber-mid); }
.btn-night { background: var(--night); color: var(--bone); border: 1px solid var(--border-n); }
.btn-night:hover { border-color: var(--bone); }
.btn-dawn { background: var(--dawn); color: var(--bone); }
.btn-dawn:hover { background: var(--dawn-mid); }
.btn-full { width: 100%; text-align: center; padding-block: 1.2rem; }
.btn-outline {
    background: transparent; color: var(--bone);
    border: 1px solid var(--border-d);
    padding: 0.85rem 2rem;
}
.btn-outline:hover { border-color: var(--amber); color: var(--amber); }

/* ── NAV ── */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.8rem 2rem;
    background: transparent;
    border-bottom: none;
    height: 68px;
}
.nav::before {
    content: '';
    position: absolute; left: 0; top: 0;
    width: 260px; height: 100%;
    background: radial-gradient(ellipse 140px 30px at 148px 50%,
        rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.16) 50%, transparent 80%);
    pointer-events: none;
    z-index: -1;
}
.nav-logo { display: inline-flex; text-decoration: none; overflow: hidden; height: 44px; align-items: center; }
.nav-logo-img { height: 130px; width: auto; flex-shrink: 0; }

/* Logo-triggered dropdown. The logo is the only thing visible at rest; the two links
   appear on hover, on keyboard focus, or after a first tap on touch (menu.js). They stay
   in the tab order and accessibility tree while closed — only opacity and pointer events
   change — so a keyboard or screen-reader user reaches them without a hover. The panel's
   padding-top bridges the gap under the logo so the pointer can travel into it. */
.nav-menu { position: relative; }
.nav-drop {
    position: absolute; top: 100%; left: 0;
    min-width: 15rem; padding-top: 0.6rem;
    opacity: 0; pointer-events: none; transform: translateY(-6px);
    transition: opacity 0.2s var(--ease) 0.12s, transform 0.2s var(--ease) 0.12s;
}
.nav-menu.open .nav-drop,
.nav-menu:has(:focus-visible) .nav-drop {
    opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s;
}
@media (hover: hover) {
    .nav-menu:hover .nav-drop { opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
}
.nav-drop ul {
    list-style: none;
    background: #000; border: 1px solid var(--border-d);
}
.nav-drop li + li { border-top: 1px solid var(--border-n); }
.nav-drop a {
    display: block; padding: 0.95rem 1.5rem;
    font-family: 'Red Hat Display', sans-serif; font-weight: 800;
    font-size: 1.15rem; line-height: 1.2; letter-spacing: -0.01em;
    color: var(--bone); text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.nav-drop a:hover, .nav-drop a:focus-visible { background: #fff; color: #000; outline: none; }
.nav-drop a[aria-current="page"] { color: var(--t3); }
.nav-drop a[aria-current="page"]:hover,
.nav-drop a[aria-current="page"]:focus-visible { color: #000; }
@media (prefers-reduced-motion: reduce) {
    .nav-drop { transition: none; transform: none; }
}

/* ── FOOTER ── */
footer {
    padding: 2.5rem 3rem;
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--border-n);
    gap: 2rem;
}
.foot-logo { display: inline-flex; text-decoration: none; overflow: hidden; height: 22px; align-items: center; }
.foot-logo-img { height: 64px; width: auto; flex-shrink: 0; }
.foot-links { display: flex; gap: 2rem; }
.foot-link {
    font-size: 0.72rem; color: var(--t3); text-decoration: none;
    transition: color 0.2s;
}
.foot-link:hover { color: var(--bone); }
.foot-link-legal { color: var(--t3); }
.foot-copy { font-size: 0.72rem; color: var(--t3); }
.foot-disclaimer { font-size: 0.6rem; color: var(--t3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.5rem; }

/* ── APPLY FORM (shared) ── */
.apply-form-wrap { max-width: 640px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
.form-g { margin-bottom: 2.25rem; }
.form-g label {
    display: block; font-size: 0.62rem; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: oklch(7.5% 0.012 55 / 0.4); margin-bottom: 0.6rem;
}
.form-g.on-dark label { color: var(--t3); }
.form-g input,
.form-g select,
.form-g textarea {
    width: 100%; background: transparent; border: none;
    border-bottom: 1px solid oklch(7.5% 0.012 55 / 0.18);
    color: var(--night); font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem; font-weight: 300;
    padding: 0.4rem 0 0.8rem; outline: none;
    border-radius: 0; -webkit-appearance: none; appearance: none;
    transition: border-color 0.2s;
}
.form-g.on-dark input,
.form-g.on-dark select,
.form-g.on-dark textarea {
    border-bottom-color: var(--border-n);
    color: var(--bone);
}
.form-g input::placeholder,
.form-g textarea::placeholder { color: oklch(7.5% 0.012 55 / 0.22); }
.form-g.on-dark input::placeholder,
.form-g.on-dark textarea::placeholder { color: var(--t3); }
.form-g input:focus,
.form-g select:focus,
.form-g textarea:focus { border-bottom-color: var(--dawn); }
.form-g.on-dark input:focus,
.form-g.on-dark select:focus,
.form-g.on-dark textarea:focus { border-bottom-color: var(--amber); }
.form-g select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233d5a6c' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.25rem center; }
.form-g textarea { resize: vertical; min-height: 90px; line-height: 1.7; padding-block: 0.75rem; }

/* Spam trap. Kept out of sight without display:none or visibility:hidden — some bots
   skip fields hidden that way, which is exactly the behaviour this relies on. */
.hp-field {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
/* Result of a submission, in place of the button's own label. */
.form-status { font-size: 0.8rem; line-height: 1.7; margin-top: 0.9rem; text-align: center; color: var(--t3); }
.form-status.err { color: var(--bone); }
.form-done { font-size: 0.95rem; line-height: 1.9; color: var(--bone); text-align: center; padding: 1.5rem 0; }

/* ── KICKER ── */
.kicker {
    font-size: 0.65rem; font-weight: 500; letter-spacing: 0.22em;
    text-transform: uppercase; display: block; margin-bottom: 1.25rem;
}
.kicker-dawn { color: var(--dawn-mid); }
.kicker-amber { color: var(--amber); }
.kicker-bone { color: oklch(93% 0.018 80 / 0.45); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .form-row { grid-template-columns: 1fr; }
    footer { flex-wrap: wrap; padding: 2rem 1.5rem; }
}
@media (max-width: 640px) {
    .nav { padding: 0.8rem 1.25rem; }
    .nav::before { width: 190px; background: radial-gradient(ellipse 108px 30px at 109px 50%, rgba(0, 0, 0, 0.1) 0%, rgba(0,0,0.0.8) 30%, transparent 60%); }
    .nav-logo { height: 34px; }
    .nav-logo-img { height: 100px; }
}

