/* ======================================================================
   Tatolab — warm paper, river ink, golden hour
   Fraunces (display) + Instrument Sans (body)
   Full-width composition; text caps its own measure.
   V3: the descent — four environment bands travel from the river
   to the underground, the deep sea, and space, then surface home.
   ====================================================================== */

:root {
    /* ground */
    --paper: #f8f3ea;
    --paper-deep: #f1e9da;
    --card: #fffdf8;

    /* ink */
    --ink: #1e2a33;
    --ink-soft: #47555f;
    --ink-faint: #71808a;

    /* river */
    --river: #1f4d7a;
    --river-deep: #16395c;
    --river-mid: #35678f;
    --river-soft: #7fa8c9;
    --river-wash: #cfdfe8;

    /* golden hour */
    --gold: #c98f3a;
    --gold-soft: #e0a84e;
    --sand: #e5d3ac;

    --hairline: rgba(30, 42, 51, 0.12);
    --shadow: 0 1px 2px rgba(30, 42, 51, 0.04), 0 12px 40px -12px rgba(31, 77, 122, 0.14);
    --shadow-lift: 0 2px 4px rgba(30, 42, 51, 0.05), 0 24px 56px -16px rgba(31, 77, 122, 0.22);

    --display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --body: "Instrument Sans", "Avenir Next", "Segoe UI", sans-serif;

    --radius: 24px;
    --radius-sm: 14px;

    /* fluid page gutter — the page itself runs full width */
    --pad: clamp(20px, 5.5vw, 104px);
}

/* ---------- reset & base ---------- */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--display);
    font-optical-sizing: auto;
    margin: 0;
}

p { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--river); text-decoration-color: rgba(31, 77, 122, 0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--river); }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
::selection { background: rgba(224, 168, 78, 0.35); }

.wrap {
    width: 100%;
    padding: 0 var(--pad);
}

.hue { color: var(--river); }
em.hue { font-style: italic; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
    position: fixed; top: -60px; left: 16px; z-index: 100;
    background: var(--ink); color: var(--paper);
    padding: 10px 16px; border-radius: 999px;
    transition: top 0.2s ease;
}
.skip:focus { top: 12px; }

/* ---------- shared type ---------- */

.eyebrow {
    font-family: var(--body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}

h2 {
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    font-weight: 560;
    line-height: 1.04;
    letter-spacing: -0.022em;
}
h2 .hue { font-style: italic; font-weight: 470; }

.sec-lede {
    max-width: 34em;
    margin-top: 20px;
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--ink-soft);
}
.sec-lede + .sec-lede { margin-top: 14px; }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 999px;
    font-family: var(--body);
    font-size: 0.9875rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1.2), box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.btn svg { width: 15px; height: 15px; }

.btn-solid {
    background: var(--river);
    color: #fdf9f0;
}
.btn-solid:hover {
    background: var(--river-deep);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px -10px rgba(31, 77, 122, 0.55);
}

.btn-quiet {
    background: transparent;
    color: var(--ink);
    border-color: var(--hairline);
}
.btn-quiet:hover {
    border-color: var(--river);
    color: var(--river);
    transform: translateY(-2px);
}

/* ---------- navigation ---------- */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(248, 243, 234, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}
.nav.scrolled { border-bottom-color: var(--hairline); }

.nav-inner {
    padding: 16px var(--pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--ink);
}
.logo svg { width: 30px; height: 30px; }
.logo-word {
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.2vw, 30px);
}
.nav-links a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--river); }

.nav-links .nav-cta {
    background: var(--river);
    color: #fdf9f0;
    padding: 9px 20px;
    border-radius: 999px;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.2s ease;
}
.nav-links .nav-cta:hover { background: var(--river-deep); color: #fdf9f0; transform: translateY(-1px); }

.nav-menu { display: none; position: relative; }
.nav-menu summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.975rem;
    color: var(--ink);
    padding: 8px 16px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 230px;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lift);
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.nav-panel a {
    padding: 11px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 500;
}
.nav-panel a:hover { background: var(--paper-deep); color: var(--river); }

/* ---------- the journey's first reach: hero + problem over one scene ----------
   The living vista is a sticky layer that stays pinned behind the hero
   AND the problem section; the problem text scrolls in over it on a soft
   paper scrim, and the scene dissolves to paper (JS) before the descent. */

.journey {
    --heroH: clamp(640px, 100svh, 980px);
    position: relative;
    background: var(--paper);
}

.journey-scene {
    position: sticky;
    top: 0;
    /* never shorter than the viewport, so the vista always reaches the
       fold even when the hero itself is capped shorter than the screen */
    height: var(--heroH);
    height: max(var(--heroH), 100svh);
    margin-bottom: calc(var(--heroH) * -1);
    margin-bottom: calc(max(var(--heroH), 100svh) * -1);
    overflow: hidden;
    background: linear-gradient(180deg, #f8f3ea 0%, #f8ecd2 46%, #e8ecea 62%, #e6d5ab 100%);
    will-change: opacity;
}

.journey .hero,
.journey #problem {
    position: relative;
    z-index: 1;
}

/* the problem's words sit on a scrim that starts clear (the scene shows
   through) and lands on solid paper, so the descent begins from paper */
.journey #problem {
    background: linear-gradient(
        180deg,
        rgba(248, 243, 234, 0) 0%,
        rgba(248, 243, 234, 0.82) 13%,
        rgba(248, 243, 234, 0.93) 58%,
        #f8f3ea 96%
    );
}

/* ---------- hero — one full-bleed living scene ---------- */

.hero {
    position: relative;
    height: var(--heroH);
    margin-top: 0;
}

#scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.hero-copy {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: clamp(36px, 8vh, 96px) var(--pad) 0;
    max-width: 70em;
    margin: 0 auto;
    pointer-events: none;
    will-change: transform, opacity;
}
.hero-copy a, .hero-copy .btn { pointer-events: auto; }
.hero-copy .eyebrow { margin-bottom: 22px; }

.hero-title {
    font-size: clamp(2.7rem, 6.4vw, 5.9rem);
    font-weight: 500;
    line-height: 1.01;
    letter-spacing: -0.03em;
}
.hero-title .hue { font-style: italic; font-weight: 460; }

.hero-sub {
    margin: 26px auto 0;
    max-width: 34em;
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.62;
    color: var(--ink-soft);
}

.hero-cta {
    margin-top: 34px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}
.hero-cta .btn-quiet { background: rgba(255, 253, 248, 0.55); }

/* ---------- sections ---------- */

.sec { padding: clamp(76px, 12vh, 150px) 0; scroll-margin-top: 76px; }
.sec-alt { background: var(--paper-deep); }
.sec-head { max-width: 46em; }

/* ---------- problem ---------- */

.problem-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(36px, 6vw, 110px);
    align-items: center;
}

.statement {
    font-size: clamp(2.2rem, 4.6vw, 3.9rem);
    font-weight: 520;
    line-height: 1.06;
    letter-spacing: -0.022em;
}
.statement .hue { font-style: italic; font-weight: 460; }

.problem-copy > p:not(.eyebrow) {
    margin-top: 20px;
    max-width: 32em;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ink-soft);
}
.problem-copy > p:not(.eyebrow):first-of-type {
    margin-top: 28px;
    font-size: clamp(1.1875rem, 1.5vw, 1.3125rem);
    color: var(--ink);
}

.problem-art { max-width: 560px; justify-self: center; }
.problem-art svg, .gift-art svg, .contact-art svg { width: 100%; }

/* ---------- environments: the descent ---------- */

.env-intro { padding-bottom: clamp(40px, 6vh, 72px); }

.env-band {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(600px, 96svh, 960px);
}

.env-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.env-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 640px;
    padding: clamp(48px, 9vh, 110px) var(--pad);
}
.env-align-right .env-copy { margin-left: auto; }

/* soft scrim so the words always sit comfortably on the scene */
.env-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: clamp(8px, 3vh, 40px) calc(var(--pad) * 0.35);
    border-radius: 48% / 50%;
    background: radial-gradient(closest-side, var(--env-scrim), transparent 92%);
}

.env-kicker {
    font-family: var(--body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--env-accent);
    margin-bottom: 16px;
}

.env-title {
    font-size: clamp(2.1rem, 4.2vw, 3.5rem);
    font-weight: 540;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.env-title .hue { color: var(--env-accent-strong); font-style: italic; font-weight: 460; }

.env-blurb {
    margin-top: 20px;
    max-width: 33em;
    font-size: clamp(1.03rem, 1.25vw, 1.1875rem);
    line-height: 1.7;
}

/* band palettes — each blends into the next: paper → water → earth →
   deep sea → space → (dawn) → paper. The CSS gradients double as the
   no-JS / pre-canvas ground so the descent reads even without scenes. */

.env-water {
    --env-accent: #a06f24;
    --env-accent-strong: var(--river-deep);
    --env-scrim: rgba(248, 243, 234, 0.72);
    color: var(--ink);
    background: linear-gradient(180deg, #f8f3ea 0%, #f6e7c9 32%, #8fb0c6 56%, #34556f 82%, #2f2118 100%);
}
.env-water .env-blurb { color: #2c3b46; }

.env-under {
    --env-accent: #e0a84e;
    --env-accent-strong: #f2c777;
    --env-scrim: rgba(22, 14, 7, 0.62);
    color: #f4e9d3;
    background: linear-gradient(180deg, #2f2118 0%, #261b10 55%, #12131c 84%, #081420 100%);
}
.env-under .env-blurb { color: rgba(244, 233, 211, 0.84); }

.env-deep {
    --env-accent: #7fd4e6;
    --env-accent-strong: #a8e6f2;
    --env-scrim: rgba(2, 10, 18, 0.62);
    color: #dcebf2;
    background: linear-gradient(180deg, #081420 0%, #051220 55%, #020a14 82%, #010509 100%);
}
.env-deep .env-blurb { color: rgba(220, 235, 242, 0.84); }

.env-space {
    --env-accent: #e0a84e;
    --env-accent-strong: #eccb8a;
    --env-scrim: rgba(3, 4, 10, 0.62);
    color: #efe7d7;
    background: linear-gradient(180deg, #010509 0%, #05070f 62%, #0a0f1c 100%);
}
.env-space .env-blurb { color: rgba(239, 231, 215, 0.84); }

/* ---------- the doors — scroll-scrubbed transitions between bands ----------
   Hidden until main.js confirms motion is welcome (.js-doors on <html>);
   without JS or with reduced motion the bands meet at plain blended edges. */

.door { display: none; }

.js-doors .door {
    display: block;
    position: relative;
}

/* the journey is scroll-scrubbed end to end; never let the browser's
   scroll anchoring re-seat the page mid-scrub */
.journey,
.env-descent,
.door { overflow-anchor: none; }
.door-cutaway { height: 190vh; background: #2c4a5e; }
.door-flood   { height: 180vh; background: #16100a; }
.door-stars   { height: 200vh; background: #010509; }
.door-sat     { height: 210vh; background: #0b1424; }

.door-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
.door-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 760px) {
    .door-cutaway { height: 135vh; }
    .door-flood   { height: 130vh; }
    .door-stars   { height: 145vh; }
    .door-sat     { height: 150vh; }
}

@media (prefers-reduced-motion: reduce) {
    .js-doors .door { display: none; }
}

/* ---------- cards ---------- */

.cards {
    list-style: none;
    margin: clamp(44px, 7vh, 76px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 30px);
}

.card {
    background: var(--card);
    border: 1px solid rgba(30, 42, 51, 0.07);
    border-radius: var(--radius);
    padding: clamp(26px, 2.6vw, 38px);
    box-shadow: var(--shadow);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lift);
}

.card-motif { width: 66px; margin-bottom: 22px; }
.card-motif svg { width: 100%; }

.card h3 {
    font-size: 1.4375rem;
    font-weight: 560;
    letter-spacing: -0.012em;
    line-height: 1.18;
    margin-bottom: 12px;
}
.card p { color: var(--ink-soft); font-size: 1rem; line-height: 1.66; max-width: 30em; }

/* ---------- open source gift ---------- */

.gift {
    background: var(--card);
    border: 1px solid rgba(30, 42, 51, 0.07);
    border-radius: clamp(20px, 2.4vw, 32px);
    box-shadow: var(--shadow);
    padding: clamp(30px, 4.5vw, 72px);
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
    gap: clamp(30px, 4.5vw, 80px);
    align-items: center;
}

.gift-copy p:not(.eyebrow) {
    margin-top: 20px;
    max-width: 30em;
    font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
    line-height: 1.68;
    color: var(--ink-soft);
}
.gift-links { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }

.gift-art { max-width: 420px; justify-self: center; }

/* ---------- work: three lanes ---------- */

.lanes-cards {
    list-style: none;
    margin: clamp(40px, 6vh, 64px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 30px);
}

.lane-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid rgba(30, 42, 51, 0.07);
    border-radius: var(--radius);
    padding: clamp(26px, 2.6vw, 38px);
    box-shadow: var(--shadow);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.lane-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }

.lane-card h3 {
    font-size: 1.5rem;
    font-weight: 560;
    letter-spacing: -0.012em;
    line-height: 1.16;
    margin-bottom: 12px;
}
.lane-card p {
    color: var(--ink-soft);
    font-size: 1.0625rem;
    line-height: 1.66;
    max-width: 30em;
    flex: 1;
}
.lane-card .btn {
    margin-top: 24px;
    align-self: flex-start;
}

/* ---------- contact ---------- */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(36px, 5.5vw, 100px);
    align-items: center;
}

.contact-body {
    margin-top: 20px;
    max-width: 30em;
    font-size: 1.125rem;
    line-height: 1.68;
    color: var(--ink-soft);
}

.contact-art {
    background: linear-gradient(172deg, #f6efe2 0%, #ece9e2 52%, #dfe5ea 100%);
    border: 1px solid rgba(30, 42, 51, 0.07);
    border-radius: var(--radius);
    padding: clamp(10px, 1.2vw, 16px) clamp(10px, 1.2vw, 16px) 0;
    overflow: hidden;
    box-shadow: var(--shadow);
    align-self: center;
}
.contact-art svg { display: block; }

/* ---------- intake form ---------- */

.intake { margin-top: clamp(28px, 4vh, 40px); max-width: 720px; }

.lanes {
    border: 0;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lane-pill { display: inline-block; cursor: pointer; }
.lane-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.lane-pill span {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1.5px solid rgba(30, 42, 51, 0.14);
    background: var(--card);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink-soft);
    transition: all 0.2s ease;
}
.lane-pill:hover span { border-color: var(--river); color: var(--river); }
.lane-pill input:checked + span {
    background: var(--river);
    border-color: var(--river);
    color: #fdf9f0;
}
.lane-pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.field { display: block; margin-bottom: 18px; }
.field > span {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.field > span em { color: var(--ink-faint); font-weight: 400; }
.field input, .field textarea {
    width: 100%;
    background: var(--card);
    border: 1.5px solid rgba(30, 42, 51, 0.14);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    font-family: var(--body);
    font-size: 1rem;
    color: var(--ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--river);
    box-shadow: 0 0 0 3px rgba(31, 77, 122, 0.14);
}

.intake-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 8px;
}
.intake-actions .btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
.intake-mail { font-weight: 500; }

.intake-ok, .intake-err {
    margin-top: 24px;
    max-width: 640px;
    padding: 20px 24px;
    border-radius: var(--radius-sm);
    font-size: 1.0625rem;
}
.intake-ok {
    background: rgba(31, 77, 122, 0.08);
    border: 1px solid rgba(31, 77, 122, 0.22);
    color: var(--river-deep);
}
.intake-err {
    background: rgba(201, 143, 58, 0.1);
    border: 1px solid rgba(201, 143, 58, 0.35);
    color: #6e4f1e;
}

/* ---------- the night side — inside the technology ----------
   Everything after the satellite door runs dark: same type system,
   same softness, the warm world's night side. */

:root {
    --night: #0a0f1c;
    --night-deep: #070b14;
    --night-card: #101a2c;
    --cream: #f0e9da;
    --cream-soft: rgba(240, 233, 218, 0.8);
    --cream-faint: rgba(240, 233, 218, 0.58);
    --signal: #7fd4e6;
    --night-hairline: rgba(240, 233, 218, 0.12);
}

.night {
    background: var(--night);
    color: var(--cream);
}
.night .sec-alt { background: var(--night-deep); }
.night h2, .night h3 { color: var(--cream); }
.night .hue { color: var(--gold-soft); }
.night .eyebrow { color: var(--signal); }
.night .sec-lede { color: var(--cream-soft); }
.night a { color: var(--signal); text-decoration-color: rgba(127, 212, 230, 0.4); }
.night a:hover { text-decoration-color: var(--signal); }

.night .btn-solid { background: var(--gold-soft); color: #1c1305; }
.night .btn-solid:hover {
    background: #ecc27a;
    box-shadow: 0 10px 26px -10px rgba(224, 168, 78, 0.5);
}
.night .btn-quiet { color: var(--cream); border-color: rgba(240, 233, 218, 0.28); }
.night .btn-quiet:hover { border-color: var(--signal); color: var(--signal); }

.night .card,
.night .lane-card,
.night .gift {
    background: var(--night-card);
    border-color: rgba(240, 233, 218, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 48px -16px rgba(0, 0, 0, 0.55);
}
.night .card p,
.night .lane-card p,
.night .gift-copy p:not(.eyebrow),
.night .contact-body { color: var(--cream-soft); }

/* the ink-blue motifs turn up their lights in the dark */
.night svg [stroke="#1f4d7a"] { stroke: #9cc3e4; }
.night svg [stroke="#35678f"] { stroke: #7fa8c9; }
.night svg [stroke="#7fa8c9"] { stroke: #54748f; }
.night svg [fill="#35678f"] { fill: #7fa8c9; }
.night svg [fill="#1f4d7a"] { fill: #9cc3e4; }
.night svg [fill="#1e2a33"] { fill: #d8d2c4; }

.night .contact-art {
    background: linear-gradient(172deg, #0d1526 0%, #0b1120 52%, #080d18 100%);
    border-color: rgba(240, 233, 218, 0.08);
}

.night .field > span { color: var(--cream); }
.night .field > span em { color: var(--cream-faint); }
.night .field input, .night .field textarea {
    background: #0d1526;
    border-color: rgba(240, 233, 218, 0.18);
    color: var(--cream);
}
.night .field input:focus, .night .field textarea:focus {
    border-color: var(--signal);
    box-shadow: 0 0 0 3px rgba(127, 212, 230, 0.16);
}

.night .lane-pill span {
    background: transparent;
    border-color: rgba(240, 233, 218, 0.22);
    color: var(--cream-soft);
}
.night .lane-pill:hover span { border-color: var(--signal); color: var(--signal); }
.night .lane-pill input:checked + span {
    background: var(--gold-soft);
    border-color: var(--gold-soft);
    color: #1c1305;
}
.night .lane-pill input:focus-visible + span { outline-color: var(--signal); }

.night .intake-ok {
    background: rgba(127, 212, 230, 0.08);
    border-color: rgba(127, 212, 230, 0.3);
    color: #bfe8f2;
}
.night .intake-err {
    background: rgba(224, 168, 78, 0.1);
    border-color: rgba(224, 168, 78, 0.4);
    color: #ecc98f;
}
.night .intake-mail { color: var(--signal); }

/* ---------- the fleet — one mission view ---------- */

.fleet {
    position: relative;
    margin-top: clamp(44px, 7vh, 76px);
    height: clamp(380px, 54vh, 540px);
    border: 1px solid var(--night-hairline);
    border-radius: var(--radius);
    background: #0b1120;
    overflow: hidden;
    box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6);
}
.fleet-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.fleet-caption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 14px;
    font-family: var(--display);
    font-style: italic;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--cream-faint);
    pointer-events: none;
}

/* ---------- the platform — one platform, two ways in ----------
   Two tier cards, siblings with distinct weights: the open tier warm
   and inviting, the full platform premium and gravitational. Night-
   zone only, so the palette is night-native. */

.tiers {
    margin: clamp(40px, 6vh, 64px) 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 30px);
    align-items: stretch;
}

.tier {
    display: flex;
    flex-direction: column;
    background: var(--night-card);
    border: 1px solid rgba(240, 233, 218, 0.08);
    border-radius: var(--radius);
    padding: clamp(28px, 3.2vw, 48px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 48px -16px rgba(0, 0, 0, 0.55);
}

.tier h3 {
    font-size: clamp(1.55rem, 2.1vw, 2.05rem);
    font-weight: 560;
    letter-spacing: -0.015em;
    line-height: 1.14;
    color: var(--cream);
}

.tier p:not(.tier-audience) {
    margin-top: 18px;
    max-width: 32em;
    font-size: 1.0625rem;
    line-height: 1.68;
    color: var(--cream-soft);
}

.tier-audience {
    margin-top: 22px;
    max-width: 30em;
    font-family: var(--display);
    font-style: italic;
    font-size: 1.03rem;
    line-height: 1.55;
    color: var(--cream-faint);
    flex: 1;
}

.tier .btn { margin-top: 28px; align-self: flex-start; }

/* the open tier — a warm ember, nothing between you and it */
.tier-open {
    background:
        radial-gradient(130% 90% at 18% 0%, rgba(224, 168, 78, 0.09), rgba(224, 168, 78, 0) 55%),
        var(--night-card);
}
.tier-open .btn-quiet {
    border-color: rgba(224, 168, 78, 0.5);
    color: var(--gold-soft);
}
.tier-open .btn-quiet:hover {
    background: var(--gold-soft);
    border-color: var(--gold-soft);
    color: #1c1305;
}

/* the full platform — a gold keyline and a low glow: premium,
   gravitational, unmistakably the same family */
.tier-full {
    border-color: rgba(224, 168, 78, 0.42);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(224, 168, 78, 0.1), rgba(224, 168, 78, 0) 60%),
        var(--night-card);
    box-shadow:
        0 0 0 1px rgba(224, 168, 78, 0.14),
        0 0 64px -18px rgba(224, 168, 78, 0.35),
        0 18px 48px -16px rgba(0, 0, 0, 0.55);
}

/* ---------- work: two lanes and a closing line ---------- */

.lanes-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.work-closing {
    margin: clamp(56px, 9vh, 104px) auto 0;
    max-width: 22em;
    text-align: center;
    font-family: var(--display);
    font-style: italic;
    font-weight: 460;
    font-size: clamp(1.55rem, 2.8vw, 2.5rem);
    line-height: 1.32;
    letter-spacing: -0.015em;
    color: var(--cream);
}

@media (max-width: 1080px) {
    .tiers { grid-template-columns: 1fr; max-width: 600px; }
}

/* ---------- footer ---------- */

.footer {
    background: var(--paper-deep);
    border-top: 1px solid var(--hairline);
    padding: clamp(48px, 7vh, 84px) 0 36px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
}

.footer-brand .logo svg { width: 26px; height: 26px; }
.footer-brand .logo-word { font-size: 1.25rem; }
.footer-tagline {
    margin-top: 14px;
    max-width: 22em;
    font-family: var(--display);
    font-style: italic;
    color: var(--ink-faint);
    font-size: 1rem;
    line-height: 1.5;
}

.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 {
    font-family: var(--body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 4px;
}
.footer-col a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.975rem;
}
.footer-col a:hover { color: var(--river); }

.footer-bottom {
    margin-top: clamp(36px, 5vh, 56px);
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: var(--ink-faint);
    font-size: 0.9375rem;
}
.footer-legal-links { display: flex; gap: 22px; }
.footer-legal-links a { color: var(--ink-faint); text-decoration: none; }
.footer-legal-links a:hover { color: var(--river); }

/* the footer on the home page belongs to the night side */
.night-footer {
    background: var(--night-deep);
    border-top-color: var(--night-hairline);
    color: var(--cream-soft);
}
.night-footer .logo { color: var(--cream); }
.night-footer .logo svg path { stroke: #7fa8c9; }
.night-footer .footer-tagline { color: var(--cream-faint); }
.night-footer .footer-col h4 { color: var(--cream-faint); }
.night-footer .footer-col a { color: var(--cream-soft); }
.night-footer .footer-col a:hover { color: var(--signal); }
.night-footer .footer-bottom {
    border-top-color: var(--night-hairline);
    color: var(--cream-faint);
}
.night-footer .footer-legal-links a { color: var(--cream-faint); }
.night-footer .footer-legal-links a:hover { color: var(--signal); }

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

.legal, .brand-page { padding: clamp(48px, 7vh, 88px) 0 clamp(64px, 9vh, 120px); }

.legal-head { max-width: 46em; margin-bottom: clamp(32px, 5vh, 52px); }
.legal-head h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 540;
    line-height: 1.03;
    letter-spacing: -0.025em;
}
.legal-updated {
    margin-top: 14px;
    font-family: var(--display);
    font-style: italic;
    color: var(--ink-faint);
}

.legal-body { max-width: 680px; }
.legal-body h2 {
    font-size: 1.5rem;
    font-weight: 560;
    letter-spacing: -0.012em;
    margin: 40px 0 12px;
}
.legal-body p { color: var(--ink-soft); margin-bottom: 14px; }
.legal-body ul { color: var(--ink-soft); padding-left: 22px; margin: 0 0 14px; }
.legal-body li { margin-bottom: 10px; }
.legal-body li strong, .legal-body p strong { color: var(--ink); }

.legal-back {
    display: inline-block;
    margin-top: 36px;
    font-weight: 600;
    text-decoration: none;
}
.legal-back:hover { text-decoration: underline; }

/* ---------- brand page ---------- */

.brand-intro {
    max-width: 40em;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: clamp(36px, 5vh, 56px);
}
.brand-intro code {
    font-size: 0.9em;
    background: var(--paper-deep);
    border-radius: 6px;
    padding: 2px 7px;
}

.marks { display: grid; gap: clamp(20px, 3vh, 32px); }

.mark-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 150px;
    gap: clamp(24px, 3.5vw, 48px);
    align-items: center;
    background: var(--card);
    border: 1px solid rgba(30, 42, 51, 0.07);
    border-radius: var(--radius);
    padding: clamp(24px, 3vw, 40px);
    box-shadow: var(--shadow);
}
.mark-card.chosen { border-color: rgba(31, 77, 122, 0.45); box-shadow: 0 0 0 1px rgba(31, 77, 122, 0.45), var(--shadow); }

.mark-stage {
    background: var(--paper);
    border-radius: var(--radius-sm);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 34px;
}
.mark-stage svg { width: 100%; max-width: 130px; }

.mark-tag {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}
.mark-info h2 { font-size: 1.75rem; margin-bottom: 10px; }
.mark-info p { color: var(--ink-soft); line-height: 1.66; }

.mark-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: var(--ink-faint);
    font-size: 0.8125rem;
}
.mark-small .s32 { width: 32px; height: 32px; }
.mark-small .s16 { width: 16px; height: 16px; }

/* ---------- motion ---------- */

.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.65, 0.25, 1);
}
.js .reveal.on { opacity: 1; transform: none; }

@keyframes drift {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(-10px) rotate(0.6deg); }
}
.drift svg {
    animation: drift 9s ease-in-out infinite alternate;
    transform-origin: 50% 60%;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .drift svg { animation: none; }
    .btn, .card, .lane-card, .lane-pill span { transition: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
    .problem-grid, .contact-grid, .gift {
        grid-template-columns: 1fr;
    }
    .problem-art { max-width: 480px; justify-self: start; }
    .gift-art { max-width: 380px; justify-self: start; }
    .contact-art { order: -1; max-width: 480px; }

    .cards, .lanes-cards { grid-template-columns: 1fr; max-width: 600px; }

    .journey { --heroH: clamp(600px, 96svh, 860px); }

    .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
    .nav-links { display: none; }
    .nav-menu { display: block; }
}

@media (max-width: 760px) {
    .field-row { grid-template-columns: 1fr; gap: 0; }

    .journey { --heroH: clamp(560px, 92svh, 780px); }

    .env-band { min-height: clamp(540px, 88svh, 760px); }
    .env-copy::before { inset: 4px calc(var(--pad) * 0.25); }

    .mark-card { grid-template-columns: 1fr; }
    .mark-stage { max-width: 220px; }
    .mark-small { flex-direction: row; justify-content: flex-start; }

    .footer-top { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}