/* ============================================================
   KAI — v4 design system
   Home and About are merged into one scroll-driven page (index.html):
   video hero → crossfades to white ("What We Do") → crossfades to
   #1954FA blue ("Who We Work With") → releases into the CTA/footer.
   White is now the site's default surface — product, case studies,
   and contact all match it — rather than the old all-black v3 field.
   #1954FA is the one accent color everywhere, on every background,
   replacing the earlier pool-cyan (#23bce3) sitewide, per Lisa's
   request to see it used broadly rather than just on one section.

   Forum stays the only typeface, display and body both — no change
   there. Nav is now a permanent dark glass bar (not tied to --bg),
   bold, identical on every page and every background underneath it —
   that's the fix for "the nav isn't immediately visible": it no
   longer depends on what's scrolling behind it. */

@import url('https://fonts.googleapis.com/css2?family=Forum&display=swap');

:root {
    --bg:        #ffffff;
    --raised:    #f4f4f2;
    --ink:       #0d0d0d;
    --ink-soft:  rgba(13,13,13,0.64);
    --ink-faint: rgba(13,13,13,0.38);
    --pool:      #1954fa;
    --pool-deep: #123fc2;
    --stamp:     var(--pool);
    --rule:      rgba(13,13,13,0.13);

    /* dark surfaces — used only by the hero/story stages on index.html
       (video stage, blue stage), which deliberately break from the
       site's white default. Inner pages never reference these. */
    --dark-bg:   #060606;
    --dark-ink:  #f3f1ea;

    --paper:      transparent;
    --paper-ink:  var(--ink);
    --paper-soft: var(--ink-soft);
    --paper-rule: var(--rule);

    --serif: 'Forum', 'Iowan Old Style', Georgia, serif;
    --sans: 'Forum', 'Iowan Old Style', Georgia, serif;
    --mono: 'Forum', 'Iowan Old Style', Georgia, serif;

    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--sans);
    font-weight: 400;
    background-color: var(--bg);
    color: var(--ink);
    overflow-x: hidden;
}

::selection { background: var(--pool); color: #fff; }
a { color: inherit; text-decoration: none; }

.frame { max-width: 1680px; margin: 0 auto; padding: 0 clamp(20px, 2.5vw, 48px); }

.label {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    color: var(--ink-soft);
    display: block;
}

/* ── scan-line divider — static decorative rule between chapters ── */
.scanline { display: flex; align-items: center; gap: 14px; color: var(--ink-faint); margin: 0 0 clamp(44px,6vh,72px); }
.scanline svg { flex-shrink: 0; width: 44px; height: 13px; opacity: 0.8; }
.scanline .scan-rule { flex: 1; height: 1px; background: linear-gradient(to right, var(--rule), transparent); }
.scanline .scan-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.07em; color: var(--ink-faint); white-space: nowrap; }

/* ── file stamp — static, no rotation-on-hover, just a fixed tilt ── */
.stamp {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
    color: var(--stamp); border: 1px solid var(--stamp); border-radius: 3px;
    padding: 5px 11px; transform: rotate(-1.2deg);
}
.stamp::before { content: '◆'; font-size: 7px; }

/* ── NAV ─────────────────────────────────────────────────── */
/* Permanent dark glass bar, bold text — deliberately NOT tied to --bg.
   index.html scrolls through three different backgrounds (video, white,
   blue) underneath this same fixed bar; a nav that changed color to
   match would need scroll-position logic and would still risk looking
   inconsistent page-to-page. A fixed dark backing sidesteps all of it:
   the nav looks and reads identically everywhere, always. */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    display: flex; justify-content: center; padding: 18px 24px;
    background: rgba(4,4,5,0.62);
    backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
nav ul { display: flex; gap: clamp(24px,4vw,48px); list-style: none; flex-wrap: wrap; justify-content: center; }
nav a {
    font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(243,241,234,0.9);
}
nav a:hover { color: #ffffff; }
nav a.current { color: #5b8bff; }

/* small persistent wordmark, inner pages only — the video/story page
   already carries a giant KAI in its own hero, so it doesn't repeat
   this. Sits below the fixed nav bar, not fighting it for space. */
.corner-logo {
    position: fixed; top: 78px; left: clamp(20px,5vw,52px); z-index: 101;
    font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--ink-soft);
}
.corner-logo:hover { color: var(--ink); }

/* ── shared, non-home page header — centered ─────────────────── */
.page-head { padding: clamp(150px,18vh,184px) 0 clamp(50px,7vh,70px); text-align: center; }
.page-title {
    font-family: var(--serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
    font-size: clamp(38px, 6.4vw, 84px); line-height: 0.98; max-width: 920px; margin: 0 auto 22px;
}
.page-title .pool { color: var(--pool); }
.page-desc { font-family: var(--sans); font-size: 19px; line-height: 1.75; color: var(--ink-soft); max-width: 620px; margin: 0 auto; }

/* ── plain section — a hairline top rule, no filled card ─────── */
.dossier {
    background: none;
    border-top: 1px solid var(--rule);
    padding-top: clamp(28px,4vw,40px);
}
.dossier .bullet-list li::before { color: var(--pool); }

/* ── BULLET LIST ──────────────────────────────────────────── */
.bullet-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.bullet-list li { position: relative; padding-left: 22px; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.bullet-list li::before { content: '—'; position: absolute; left: 0; color: var(--pool); font-weight: 700; }

/* ── FOOTER ───────────────────────────────────────────────── */
footer { border-top: 1px solid var(--rule); padding: 52px 0 42px; background: var(--bg); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 26px; }
.footer-name { font-family: var(--serif); font-weight: 700; font-size: 19px; margin-bottom: 6px; }
.footer-tagline { font-size: 12.5px; color: var(--ink-soft); font-family: var(--serif); }
.footer-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 10px; letter-spacing: 0.04em; }
.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.footer-email { font-family: var(--mono); font-size: 12px; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.footer-email:hover { color: var(--pool); border-color: var(--pool); }
.footer-nav { display: flex; gap: 20px; }
.footer-nav a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--ink-soft); }
.footer-nav a:hover { color: var(--ink); }

/* ── GENERIC HELPERS ──────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; font-weight: 700;
    padding: 13px 24px; border: 1px solid var(--ink); border-radius: 2px;
    background: none; color: var(--ink); cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn-primary { background: var(--pool); border-color: var(--pool); color: #fff; }
.btn-primary:hover { background: var(--pool-deep); border-color: var(--pool-deep); color: #fff; }
.dossier .btn { border-color: var(--paper-ink); color: var(--paper-ink); }
.dossier .btn:hover { background: var(--paper-ink); color: var(--paper); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--paper-soft); }
.field input, .field textarea {
    background: transparent; border: 1px solid var(--paper-rule); border-radius: 2px;
    padding: 11px 12px; font-family: var(--sans); font-size: 13.5px; color: var(--paper-ink);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--pool-deep); }
.field textarea { resize: vertical; min-height: 90px; }

@media (max-width: 640px) { .frame { padding: 0 22px; } }