/* ─────────────────────────────────────────────────────────────────────────
   Kivuko Labs — "The Crossing"

   Kivuko is Swahili for a crossing place: a ford where a river is passable.
   The system is built from that — two hairlines as the banks, short piers
   between them, and content that enters from the SIDE rather than fading up.

   One stylesheet. No framework, no build step, no drop shadows.
   Accent is verdigris #4EA88B — weathered bronze on an old crossing.
   Design spec: projects/kivuko-site/STITCH-PROMPTS.md in the vault.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Ground ------------------------------------------------------------- */
  --ground:      #0A0C0B;
  --surface:     #101413;
  --raised:      #161B19;

  /* Structure ---------------------------------------------------------- */
  --hairline:    #1F2724;
  --hairline-hi: #2C3733;

  /* Ink ---------------------------------------------------------------- */
  --ink:         #F4F6F4;
  --ink-2:       #B4BEB9;
  --ink-3:       #8A948E;   /* lightened from spec to clear WCAG AA on --ground */

  /* The single accent — verdigris, the patina copper turns into --------- */
  --accent:      #4EA88B;
  --accent-hi:   #5CC3A0;
  --accent-deep: #357F6B;
  --accent-wash: rgba(78, 168, 139, .10);

  /* Type --------------------------------------------------------------- */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Metrics ------------------------------------------------------------ */
  --wrap: 1120px;
  --pad:  clamp(1.5rem, 4.5vw, 3.5rem);
  --band: clamp(6rem, 11vw, 8rem);

  --r-btn:  10px;
  --r-card: 14px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ── Motion: the crossing ─────────────────────────────────────────────────
   Only applied once JS has confirmed it can drive it. Without `html.js`
   nothing here is hidden, so the no-JS page is complete and correct.        */

.js .cross {
  opacity: 0;
  transform: translateX(-24px);
}
.js .cross.in {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease) var(--d, 0ms),
              transform .5s var(--ease) var(--d, 0ms);
}

/* Hairlines draw themselves left to right — the page reads as built. */
.js .band::before,
.js .site-foot::before {
  transform: scaleX(0);
  transform-origin: left;
}
.js .band.lit::before,
.js .site-foot.lit::before {
  transform: scaleX(1);
  transition: transform .7s var(--ease);
}

/* ── Accessibility ───────────────────────────────────────────────────────── */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--ground);
  padding: .8rem 1.3rem;
  font-weight: 600;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.mark { display: inline-flex; align-items: center; gap: .75rem; font-weight: 600; }
.mark-glyph {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--accent);
  flex: none;
  transition: border-color .15s ease-out;
}
.mark:hover .mark-glyph { border-color: var(--accent-deep); }
.mark-glyph svg { width: 18px; height: 18px; }
.mark-word { font-size: 1rem; letter-spacing: -.015em; }

.head-nav { display: flex; align-items: center; gap: .3rem; font-size: .94rem; }
.head-nav a {
  color: var(--ink-2);
  padding: .5rem .85rem;
  border-radius: 8px;
  transition: color .15s ease-out, background-color .15s ease-out, border-color .15s ease-out;
}
.head-nav a:hover { color: var(--ink); background: var(--surface); }
.head-nav .nav-cta { color: var(--ink); border: 1px solid var(--hairline); background: none; }
.head-nav .nav-cta:hover { border-color: var(--accent-deep); background: none; }

@media (max-width: 520px) {
  .head-nav a:not(.nav-cta) { display: none; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(5rem, 14vw, 12.5rem) var(--band);
  position: relative;
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(90% 70% at 6% -12%, var(--accent-wash), transparent 60%),
    var(--ground);
}

.eyebrow {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 1.6rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px; height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: .75rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.75rem);
  max-width: 17ch;
  letter-spacing: -.04em;
  line-height: 1.03;
}
.hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -.01em;
}

.lede {
  margin-top: 1.75rem;
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.7vw, 1.19rem);
  color: var(--ink-2);
}

.hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .8rem 1.6rem;
  border-radius: var(--r-btn);
  font-size: .95rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color .15s ease-out, border-color .15s ease-out,
              color .15s ease-out, transform .15s ease-out;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--ground); }
.btn-primary:hover { background: var(--accent-hi); }
.btn-ghost { border-color: var(--hairline); color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--hairline-hi); color: var(--ink); }

@media (max-width: 380px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
}

/* ── Bands ───────────────────────────────────────────────────────────────── */

.band { padding-block: var(--band); position: relative; }
.band-alt { background: var(--surface); }

/* The bank: a hairline that draws itself across the foot of each band. */
.band::before,
.site-foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hairline);
}
.site-foot::before { bottom: auto; top: 0; }
.contact::before { display: none; }

.section-title {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 3rem;
}
.section-note {
  margin-top: -2.4rem;
  margin-bottom: 2.5rem;
  color: var(--ink-3);
  font-size: .94rem;
}

/* ── What we do ──────────────────────────────────────────────────────────── */

.grid-3 {
  display: grid;
  gap: clamp(2rem, 4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.pillar h3 { font-size: 1.31rem; margin-bottom: .9rem; letter-spacing: -.015em; }
.pillar h3::before {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: var(--accent);
  margin-bottom: 1.25rem;
}
.pillar p { color: var(--ink-2); font-size: .94rem; max-width: 44ch; }

/* ── Work — the hairlines ARE the grid ───────────────────────────────────── */

.work-list {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
}

.work-link {
  display: grid;
  gap: .6rem;
  padding: clamp(1.5rem, 3.2vw, 2rem);
  background: var(--surface);
  height: 100%;
  transition: background-color .15s ease-out;
}
.band:not(.band-alt) .work-link { background: var(--ground); }
.work-link:hover { background: var(--raised); }

.work-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.work-name { font-size: 1.31rem; font-weight: 600; letter-spacing: -.02em; }

.work-tag {
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .18rem .62rem;
  line-height: 1.5;
}

.work-desc { color: var(--ink-2); font-size: .94rem; max-width: 60ch; }

.work-url {
  margin-top: .4rem;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  position: relative;
  width: fit-content;
  padding-bottom: 3px;
}
/* The underline draws left → right on hover, echoing the section rules. */
.work-url::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.work-link:hover .work-url::after { transform: scaleX(1); }

.arrow { display: inline-block; transition: transform .15s ease-out; }
.work-link:hover .arrow { transform: translateX(6px); }

@media (min-width: 760px) {
  .work-list { grid-template-columns: 1fr 1fr; }
  /* Span the first card across both columns ONLY when the venture count is odd.
     With an even count the span leaves a hole in the last row, and because the
     grid's "gap" is the container's --hairline showing through, that hole
     renders as a solid slab rather than as nothing. It was invisible in dark
     (#1F2724 on #101413) and obvious the moment light mode existed.
     :nth-last-child(odd) on the first child IS the parity test, so this stays
     correct as ventures are added — no rule to remember to update. */
  .work-list .work:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}

/* ── How we work ─────────────────────────────────────────────────────────── */

.rules { display: grid; gap: 1.4rem; max-width: 62ch; counter-reset: rule; }
.rules li {
  position: relative;
  padding-left: 2.75rem;
  color: var(--ink-2);
  font-size: clamp(1.02rem, 1.6vw, 1.14rem);
  counter-increment: rule;
}
.rules li::before {
  content: counter(rule, decimal-leading-zero);
  position: absolute;
  left: 0; top: .2em;
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}
@media (max-width: 520px) { .rules li { padding-left: 1.9rem; } }

/* ── People ──────────────────────────────────────────────────────────────── */

.grid-2 {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  max-width: 720px;
}
.person h3 { font-size: 1.31rem; }
.person .role { margin-top: .4rem; color: var(--ink-3); font-size: .94rem; }

/* ── Contact — the destination ───────────────────────────────────────────── */

.contact-lede {
  margin-top: -2rem;
  margin-bottom: 2rem;
  color: var(--ink-2);
  max-width: 48ch;
}
.mailto {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5.2vw, 2.6rem);
  color: var(--ink);
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--accent-deep);
  padding-bottom: .2rem;
  overflow-wrap: anywhere;
  transition: color .15s ease-out, border-color .15s ease-out;
}
.mailto:hover { color: var(--accent); border-color: var(--accent); }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-foot { padding-block: 2.5rem; position: relative; }
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  font-size: .88rem;
  color: var(--ink-3);
}
.foot-link {
  color: var(--ink-2);
  border-bottom: 1px solid var(--hairline-hi);
  padding-bottom: 1px;
  transition: color .15s ease-out, border-color .15s ease-out;
}
.foot-link:hover { color: var(--accent); border-color: var(--accent-deep); }

.foot-note em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05em;
  color: var(--ink-2);
}

/* ── Reduced motion: everything visible, nothing moves ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .cross,
  .js .cross.in { opacity: 1 !important; transform: none !important; }
  .js .band::before,
  .js .site-foot::before { transform: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Prose pages (privacy notice) ─────────────────────────────────────────
   Same system, narrower measure. Note: the CSP is style-src 'self', so a
   <style> block inside a page would be blocked — page CSS belongs here. */

.page-head { padding-block: clamp(4rem, 10vw, 7rem) clamp(2rem, 4vw, 3rem); }
.page-head h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  letter-spacing: -.035em;
  max-width: 20ch;
}
.page-meta {
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-3);
}

/* The section keeps the page's 1120px wrap so it aligns with the header above
   it; the measure is constrained on the children instead. Putting 68ch on the
   section itself centres the whole block and it reads as indented. */
.prose { padding-bottom: clamp(4rem, 8vw, 6rem); }
.prose > * { max-width: 68ch; }
.prose h2 {
  font-size: 1.31rem;
  margin-top: 3rem;
  margin-bottom: .9rem;
  letter-spacing: -.02em;
}
.prose h2:first-child { margin-top: 0; }
.prose h2::before {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: var(--accent);
  margin-bottom: 1.1rem;
}
.prose p, .prose li { color: var(--ink-2); font-size: 1rem; }
.prose p + p, .prose ul + p { margin-top: 1rem; }
.prose ul { margin-top: .9rem; display: grid; gap: .6rem; }
.prose li { position: relative; padding-left: 1.4rem; }
.prose li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 7px; height: 1px;
  background: var(--accent-deep);
}
.prose a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-deep);
  padding-bottom: 1px;
  transition: color .15s ease-out, border-color .15s ease-out;
  overflow-wrap: anywhere;
}
.prose a:hover { color: var(--accent-hi); border-color: var(--accent-hi); }
.prose strong { color: var(--ink); font-weight: 600; }

.callout {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-card);
  background: var(--surface);
}
.callout p { font-size: .95rem; }

.mono { font-family: var(--mono); font-size: .92em; color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME
   ─────────────────────────────────────────────────────────────────────────
   Dark is the design's home — "The Crossing" was drawn on #0A0C0B and the
   verdigris only reads as patina against it. So :root above stays dark and
   light is the override, not the other way round.

   Three states, and all three matter:
     · system says light, user has not chosen  → :root:not([data-theme="dark"])
     · user chose light explicitly             → :root[data-theme="light"]
     · anything else                           → the dark :root above

   Verdigris #4EA88B fails AA as text on white, so light mode uses a deeper
   patina (#0A6851). It is the same colour further along the same oxidation —
   not a different accent.

   Every colour in this stylesheet is a token defined on :root. Nothing is
   hardcoded further down, which is the only reason this block is short.
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:      #FCFDFC;
    --surface:     #EBF0ED;
    --raised:      #E3EAE6;

    --hairline:    #CBD8D2;
    --hairline-hi: #AFC1B9;

    --ink:         #0B0F0D;
    --ink-2:       #3B4642;
    --ink-3:       #586460;

    --accent:      #0A6851;
    --accent-hi:   #085441;
    --accent-deep: #9BC7B6;
    --accent-wash: rgba(10, 104, 81, .08);
  }
}

:root[data-theme="light"] {
  --ground:      #FCFDFC;
  --surface:     #EBF0ED;
  --raised:      #E3EAE6;

  --hairline:    #CBD8D2;
  --hairline-hi: #AFC1B9;

  --ink:         #0B0F0D;
  --ink-2:       #3B4642;
  --ink-3:       #586460;

  --accent:      #0A6851;
  --accent-hi:   #085441;
  --accent-deep: #9BC7B6;
  --accent-wash: rgba(10, 104, 81, .08);
}

/* The page must paint its own ground before the first frame, or the browser's
   default white shows through on a dark-mode load. */
html { background: var(--ground); }

/* ── CJK ────────────────────────────────────────────────────────────────
   Inter carries no Han glyphs, so Chinese would silently fall through to a
   system face with different metrics. Noto Sans SC is requested only on the
   Chinese pages (see fontFamilies in scripts/build.mjs) — the other locales
   never pay for a CJK download. */
:root {
  --sans-cjk: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
              "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
              "Segoe UI", Roboto, sans-serif;
}
html[lang="zh-Hans"] body { font-family: var(--sans-cjk); }

/* Instrument Serif has no Han either — the hero <em> would drop to a fallback
   face mid-sentence. Keep the emphasis, lose the face swap. */
html[lang="zh-Hans"] .hero h1 em {
  font-family: var(--sans-cjk);
  font-style: normal;
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER TOOLS — theme toggle + language menu
   ═══════════════════════════════════════════════════════════════════════ */

.head-inner { gap: 1rem; }
.head-nav { margin-left: auto; }

.head-tools { display: flex; align-items: center; gap: .4rem; }

.tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--hairline); border-radius: var(--r-btn);
  background: none; color: var(--ink-2);
  font: inherit; font-size: .82rem; font-weight: 500;
  cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.tool:hover { color: var(--ink); border-color: var(--hairline-hi); background: var(--surface); }
.tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool svg { width: 17px; height: 17px; }

/* One button, two glyphs: show the theme you would switch TO. */
:root[data-theme="light"] .theme-toggle .i-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
:root[data-theme="dark"]  .theme-toggle .i-sun  { display: block; }
:root[data-theme="dark"]  .theme-toggle .i-moon { display: none; }

/* No explicit choice yet — follow the system. */
.theme-toggle .i-sun  { display: block; }
.theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .i-sun  { display: none; }
  :root:not([data-theme]) .theme-toggle .i-moon { display: block; }
}

.lang { position: relative; }
.lang-btn { width: auto; min-width: 36px; padding-inline: .6rem; }

/* With JS off this still opens on keyboard focus, so the languages remain
   reachable — they are plain links underneath. */

.lang-opt {
  display: block; padding: .5rem .7rem; border-radius: 8px;
  color: var(--ink-2); text-decoration: none; font-size: .92rem;
  white-space: nowrap;
}
.lang-opt:hover { background: var(--surface); color: var(--ink); }
.lang-opt.is-current { color: var(--accent); }

@media (max-width: 760px) {
  .head-tools { margin-left: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CASE STUDY PAGES
   ═══════════════════════════════════════════════════════════════════════ */

.hero-study h1 { max-width: 18ch; }
.hero-slim { padding-block: clamp(4rem, 10vw, 7rem) clamp(1rem, 3vw, 2rem); }

.crumb {
  color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.crumb:hover { color: var(--accent); border-color: var(--accent-deep); }

.hero-note { margin-top: 1rem; color: var(--ink-3); font-size: .89rem; }

.study .study-block { margin-top: 2.6rem; }
.study .study-block:first-child { margin-top: 0; }
.study .study-block h2 {
  font-size: 1.31rem; letter-spacing: -.015em; margin-bottom: .7rem;
}
.study .study-block p { color: var(--ink-2); max-width: 68ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOR-BUSINESS PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.step { position: relative; padding-top: 2.6rem; }
.step-n {
  position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1px solid var(--accent-deep); color: var(--accent);
  font-family: var(--mono); font-size: .8rem;
}
.step h3::before { display: none; }

.doors {
  display: grid; gap: 1.25rem; margin-top: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .doors { grid-template-columns: 1fr 1fr; } }

.door {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--ground);
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  display: flex; flex-direction: column;
}
.door-featured { border-color: var(--accent-deep); background: var(--accent-wash); }

.door-name { font-size: 1.31rem; letter-spacing: -.02em; }
.door-tagline { margin-top: .5rem; color: var(--ink-2); font-size: .94rem; }

.door-price { margin-top: 1.4rem; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.door-monthly {
  font-family: var(--serif); font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1; letter-spacing: -.02em; color: var(--ink);
}
.door-per { color: var(--ink-3); font-size: .9rem; }
.door-setup {
  margin-top: .45rem; color: var(--ink-3);
  font-family: var(--mono); font-size: .82rem;
}
.door-lead { margin-top: 1.1rem; color: var(--ink-2); font-size: .92rem; }

.door-list { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .55rem; }
.door-list li {
  position: relative; padding-left: 1.4rem;
  color: var(--ink-2); font-size: .92rem;
}
.door-list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 8px; height: 1px; background: var(--accent);
}

.door-timing {
  margin-top: auto; padding-top: 1.4rem;
  color: var(--ink-3); font-size: .86rem;
}

.door-upgrade {
  margin-top: 2rem; max-width: 62ch;
  color: var(--ink-2); font-size: .94rem;
  padding-left: 1rem; border-left: 2px solid var(--accent-deep);
}
.door-more { margin-top: 1rem; color: var(--ink-3); font-size: .88rem; }

.terms { gap: 1.6rem 2.5rem; }
.term h3 { font-size: 1.06rem; letter-spacing: -.01em; }
.term p { margin-top: .45rem; color: var(--ink-2); font-size: .92rem; max-width: 46ch; }

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

/* ── Light mode: give the work grid its depth back ──────────────────────────
   In dark, "the hairlines ARE the grid" works: card and band share a colour
   and the 1px seams carry the structure, because near-black surfaces read as
   depth on their own. On near-white they do not — card and band at the same
   value collapse into one flat sheet, which is what made the section look
   plain rather than quiet.

   So in light only, the card sits one step ABOVE its band. The hairlines still
   draw the grid; they just no longer have to do all of the work alone. Dark is
   untouched. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .band-alt .work-link { background: var(--ground); }
  :root:not([data-theme="dark"]) .band-alt .work-link:hover { background: #fff; }
  :root:not([data-theme="dark"]) .band-alt .door { background: var(--ground); }
}
:root[data-theme="light"] .band-alt .work-link { background: var(--ground); }
:root[data-theme="light"] .band-alt .work-link:hover { background: #fff; }
:root[data-theme="light"] .band-alt .door { background: var(--ground); }

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION — the mobile menu, and a footer that carries every link
   ─────────────────────────────────────────────────────────────────────────
   The old rule hid every nav link except Contact below 760px. That was right
   when the site was ONE page: the links were anchors and scrolling reached
   everything. Once there were real pages it stranded people — from a case
   study on a phone there was no route to "For business" at all, and from the
   business page you had to go via the logo and scroll.

   Two answers, on purpose. The menu handles the header; the footer nav is the
   one that needs no JavaScript at all, so navigation survives even if ui.js
   never loads.
   ═══════════════════════════════════════════════════════════════════════ */

/* Shared popover shell — the language switcher and the mobile menu both use it. */
.pop {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 40;
  display: none; min-width: 172px; padding: .35rem;
  background: var(--raised);
  border: 1px solid var(--hairline); border-radius: var(--r-card);
}
.menu.open .pop,
.lang.open .pop,
.menu:focus-within .pop,
.lang:focus-within .pop { display: block; }

.pop-opt {
  /* .68rem vertical puts the row at ~46px. This is a menu people tap with a
     thumb on a phone, and 44px is the floor. */
  display: block; padding: .68rem .7rem; border-radius: 8px;
  color: var(--ink-2); text-decoration: none; font-size: .95rem;
  white-space: nowrap;
}
.pop-opt:hover { background: var(--surface); color: var(--ink); }

.menu { position: relative; display: none; }

@media (max-width: 760px) {
  /* The inline bar cannot fit beside the wordmark and two tools, so it is
     replaced by the menu rather than simply removed. */
  .head-nav { display: none; }
  .menu { display: block; }
}

/* ── Footer navigation ──────────────────────────────────────────────────
   Every page ends with the full set of links. No JavaScript, no popover, no
   viewport condition — this is the floor that navigation never falls below. */
.foot-nav {
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
  margin-bottom: 1rem;
}
.foot-inner { align-items: flex-start; }
.foot-nav .foot-link { font-size: .92rem; }

@media (max-width: 760px) {
  .foot-nav { gap: .5rem 1.1rem; }
}