/* ============================================================
   Keyloh — keyloh.com.au
   Sovereign + Machined design system.
   Narrative pages (Home, Software, Silicon, Company) sit on a
   deep green-black editorial ground with a serif display face.
   Product surfaces (Systems, Reserve, Contact) flip to a
   silver-white gallery ground with Archivo display.
   Chartreuse #C0F000 appears only as a live-signal accent.
   All text pairs meet WCAG AA (≥ 4.5:1).
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --serif: "Charter", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", "SFMono-Regular", Consolas, monospace;
  --live: #C0F000;
  --measure: 64ch;
  --radius: 6px;
  --container: 1140px;
}

/* Grounds ---------------------------------------------------- */

body.dark {
  --bg: #121A14;
  --surface: #18231B;
  --surface-2: #1D2A20;
  --text: #F1EEE3;
  --dim: #A9B3A6;
  --hairline: #26362B;
  --hairline-strong: #3C5142;
  --accent: #9DBD9F;
  --accent-ink: #121A14;   /* text on accent fills */
  --em: #9DBD9F;           /* italic accents in display type */
}

body.light {
  --bg: #F3F4F3;
  --surface: #FFFFFF;
  --surface-2: #EAECEA;
  --text: #17191A;
  --dim: #4A4E4C;
  --hairline: #DEE0DF;
  --hairline-strong: #B9BEBA;
  --accent: #2E4636;
  --accent-ink: #F3F4F3;
  --em: #44654C;
}

/* Base ------------------------------------------------------- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

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

img { max-width: 100%; height: auto; display: block; }

p { margin: 0 0 1.15em; max-width: var(--measure); color: var(--dim); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--text); }

a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

::selection { background: var(--accent); color: var(--accent-ink); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface); color: var(--text);
  padding: 0.75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* Display type ------------------------------------------------
   Dark ground = editorial serif. Light ground = machined sans. */

h1, h2, h3, h4 { margin: 0 0 0.55em; color: var(--text); text-wrap: balance; }

body.dark h1, body.dark h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.005em;
}
body.dark h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); line-height: 1.1; }
body.dark h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.2; }

body.light h1, body.light h2 {
  font-weight: 650;
  letter-spacing: -0.025em;
}
body.light h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); line-height: 1.05; }
body.light h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; letter-spacing: -0.02em; }

h1 em, h2 em { font-style: italic; color: var(--em); }
body.light h1 em, body.light h2 em { font-family: var(--serif); font-weight: 400; }

h3 { font-size: 1.25rem; font-weight: 620; line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; font-weight: 620; line-height: 1.35; }

.lede { font-size: 1.2rem; line-height: 1.65; color: var(--dim); max-width: 58ch; }
.lede strong { color: var(--text); }

.k-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--live); margin-right: 0.6em; vertical-align: 1px;
}

/* Layout ------------------------------------------------------ */

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }

section { padding: 6.5rem 0; }
section.tight { padding: 4rem 0; }
section.banded { border-top: 1px solid var(--hairline); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.split > .media { display: flex; justify-content: center; }

.section-head { max-width: 46rem; margin-bottom: 3.5rem; }

/* Nav ----------------------------------------------------------
   Fixed bar that floats over content. It stays while you scroll,
   slides away 3s after scrolling settles, and glides back over
   2s when the pointer nears the top edge (or on scroll-up). */

.nav {
  border-bottom: 1px solid var(--hairline);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--bg);
  transform: translateY(0);
  opacity: 1;
  transition: transform 450ms ease, opacity 450ms ease;
}
.nav.nav-hidden { transform: translateY(-100%); opacity: 0; }
.nav.nav-slow { transition: transform 2000ms ease, opacity 2000ms ease; }
body { padding-top: 76px; }
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}
.nav .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.4rem; padding-bottom: 1.4rem;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.005em;
}
.wordmark:hover { color: var(--text); }

.nav-links { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a.nav-reserve {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
}
.nav-links a.nav-reserve:hover { color: var(--text); border-bottom-color: var(--text); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  color: var(--text); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  padding: 0.55rem 0.9rem; cursor: pointer;
}

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    flex-direction: column; align-items: flex-start;
    gap: 0; padding: 0.5rem 1.5rem 1.5rem;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; border-top: 1px solid var(--hairline); }
  .nav-links a { display: block; padding: 1rem 0; font-size: 0.85rem; }
  .nav-links a.nav-reserve { border-bottom: 0; }
}

/* Heroes ------------------------------------------------------ */

.hero { padding: 6rem 0 6.5rem; }
.hero .k-label { display: block; margin-bottom: 1.6rem; }
.hero-actions { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; margin-top: 2.2rem; }

.hero-product { text-align: center; padding-bottom: 0; }
.hero-product .lede { margin: 0 auto; }
.hero-product .hero-actions { justify-content: center; }
.hero-product .media {
  display: flex; justify-content: center; margin-top: 3rem;
  background: radial-gradient(ellipse 55% 70% at 50% 100%, var(--surface-2) 0%, transparent 70%);
}
.hero-product .media img { max-height: 480px; width: auto; }

.hero-split .media img { max-height: 460px; width: auto; }

@media (max-width: 880px) {
  .hero { padding: 3.5rem 0 4rem; }
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-split .media { order: -1; }
  .hero-split .media img, .hero-product .media img { max-height: 300px; }
}

/* Buttons & links --------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 620;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.btn:hover { background: var(--text); border-color: var(--text); color: var(--bg); }

.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--text);
  font-weight: 560;
  font-size: 0.95rem;
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--hairline-strong);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.btn-ghost:hover { border-color: var(--text); color: var(--text); }

.text-link {
  font-size: 0.95rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.text-link:hover { color: var(--accent); }

/* Numbered editorial rows (roman numerals, from the brochure) - */

.numbered { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-strong); }
.numbered > li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.5rem;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--hairline);
}
.numbered .numeral {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--dim);
  line-height: 1.2;
}
.numbered h3 { margin-bottom: 0.35rem; }
body.dark .numbered h3 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; }
.numbered p { margin-bottom: 0; }

@media (max-width: 640px) {
  .numbered > li { grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1.6rem 0; }
  .numbered .numeral { font-size: 1.2rem; }
}

/* Layer rows (Systems / Software / Silicon) ------------------- */

.layers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-strong); }
.layers > li { border-bottom: 1px solid var(--hairline); }
.layers a {
  display: grid;
  grid-template-columns: 14rem 1fr auto;
  gap: 2rem;
  align-items: baseline;
  padding: 2.4rem 0;
  text-decoration: none;
  color: inherit;
}
.layers .layer-name {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--text);
}
.layers p { margin: 0; }
.layers .arrow { color: var(--dim); font-size: 1.2rem; transition: color 150ms ease, transform 150ms ease; }
.layers a:hover .layer-name { color: var(--accent); }
.layers a:hover .arrow { color: var(--accent); transform: translateX(4px); }

@media (max-width: 880px) {
  .layers a { grid-template-columns: 1fr; gap: 0.6rem; padding: 1.8rem 0; }
  .layers .arrow { display: none; }
}

/* Pull-quote band --------------------------------------------- */

.quote-band { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.quote-band blockquote {
  margin: 0; padding: 5.5rem 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.3;
  color: var(--text);
  max-width: 34ch;
}
.quote-band em { color: var(--em); }

/* CTA band ---------------------------------------------------- */

.cta-band { border-top: 1px solid var(--hairline); }
.cta-band .inner { padding: 5.5rem 0; }
.cta-band h2 { max-width: 24ch; }
.cta-band p { margin-bottom: 2rem; }

/* Definition tables (specs, facts) ---------------------------- */

.facts { border-top: 1px solid var(--hairline-strong); margin: 0; }
.facts > div {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 2rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--hairline);
}
.facts dt { font-weight: 620; color: var(--text); }
.facts dd { margin: 0; color: var(--dim); }
.facts dd .value { font-family: var(--mono); font-size: 0.95rem; color: var(--text); }
.facts dd .note { display: block; font-size: 0.9rem; margin-top: 0.2rem; }

@media (max-width: 640px) {
  .facts > div { grid-template-columns: 1fr; gap: 0.3rem; padding: 1.1rem 0; }
}

/* Product gallery band ---------------------------------------- */

.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.gallery figure {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 3rem 2rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.gallery img { max-height: 400px; width: auto; }
.gallery figcaption { font-size: 0.9rem; color: var(--dim); text-align: center; max-width: 40ch; }

.gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery.cols-3 img { max-height: 280px; }
/* flush: for renders with the page ground baked in — no card chrome */
.gallery.flush figure { background: var(--bg); border: 0; padding: 0 0 0.5rem; }
.gallery.flush img { max-height: none; width: 100%; height: auto; border-radius: var(--radius); }

@media (max-width: 880px) {
  .gallery, .gallery.cols-3 { grid-template-columns: 1fr; }
  .gallery img { max-height: 300px; }
  .gallery.flush img { max-height: none; }
}

/* Timeline rows ----------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-strong); }
.timeline > li {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--hairline);
}
.timeline .when { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.1em; color: var(--accent); padding-top: 0.35rem; }
.timeline h3 { margin-bottom: 0.3rem; }
.timeline p { margin: 0; }

@media (max-width: 640px) {
  .timeline > li { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* People ------------------------------------------------------ */

.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.people li { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); padding: 1.8rem; }
.people .k-label { display: block; margin-bottom: 1rem; }
.people h3 { font-size: 1.15rem; margin-bottom: 0.15rem; }
.people .role { font-size: 0.9rem; color: var(--accent); margin-bottom: 0.9rem; }
.people p { font-size: 0.95rem; margin: 0; }

@media (max-width: 880px) { .people { grid-template-columns: 1fr; } }

/* Values grid ------------------------------------------------- */

.values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 3rem; border-top: 1px solid var(--hairline-strong); }
.values li { padding: 1.5rem 0; border-bottom: 1px solid var(--hairline); }
.values h4 { margin-bottom: 0.2rem; }
.values p { margin: 0; font-size: 0.95rem; }

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

/* Forms ------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.45rem; color: var(--text); }
.field label .optional { font-weight: 400; color: var(--dim); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  transition: border-color 140ms ease;
}
.field input:hover, .field textarea:hover { border-color: var(--text); }
.field textarea { min-height: 9rem; resize: vertical; }

/* Custom dropdowns — the native select stays in the DOM (hidden)
   for submission and no-JS visitors; this is its styled face. */
.dd { position: relative; }
.dd-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font: inherit; font-size: 1rem; text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: border-color 140ms ease;
}
.dd-btn:hover { border-color: var(--text); }
.dd-btn .dd-value.placeholder { color: var(--dim); }
.dd-chev {
  flex: none; width: 9px; height: 9px;
  border-right: 1.5px solid var(--dim);
  border-bottom: 1.5px solid var(--dim);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 200ms ease;
}
.dd.open .dd-chev { transform: rotate(-135deg) translate(-2px, -2px); }
.dd-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  margin: 0; padding: 0.35rem; list-style: none;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(12, 16, 13, 0.14);
  max-height: 300px; overflow-y: auto;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.dd.open .dd-list { opacity: 1; transform: none; pointer-events: auto; }
.dd-list li {
  padding: 0.65rem 0.8rem;
  border-radius: 5px;
  font-size: 0.97rem;
  color: var(--text);
  cursor: pointer;
}
.dd-list li:hover, .dd-list li.dd-active { background: var(--surface-2); }
.dd-list li[aria-selected="true"] { color: var(--accent); font-weight: 620; }
.field.invalid .dd-btn { border-color: #A33E2A; }
@media (prefers-reduced-motion: reduce) {
  .dd-list, .dd-chev { transition: none; }
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.field .error-msg { display: none; font-size: 0.85rem; color: #A33E2A; margin-top: 0.4rem; }
body.dark .field .error-msg { color: #E2A493; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #A33E2A; }
.field.invalid .error-msg { display: block; }

.form-note { font-size: 0.85rem; color: var(--dim); max-width: 52ch; }

.confirm-panel {
  display: none;
  border: 1px solid var(--hairline-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 2rem 2.2rem;
  margin-top: 2.5rem;
}
.confirm-panel.visible { display: block; }
.confirm-panel h3 { margin-bottom: 0.5rem; }
.confirm-panel p { margin-bottom: 0; }

/* Configurator ------------------------------------------------ */

.cfg { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 4rem; align-items: start; }

.cfg-media { position: sticky; top: 108px; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.cfg-media .stage {
  width: 100%;
  display: flex; justify-content: center;
  padding: 2.5rem 1rem;
  background: radial-gradient(ellipse 55% 65% at 50% 100%, var(--surface-2) 0%, transparent 72%);
}
.cfg-media .stage img { max-height: 420px; width: auto; }
.cfg-thumbs { display: flex; gap: 0.7rem; }
.cfg-thumbs button {
  width: 60px; height: 60px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 8px;
  cursor: pointer;
}
.cfg-thumbs button img { max-height: 100%; width: auto; margin: 0 auto; }
.cfg-thumbs button[aria-pressed="true"] { border: 1.5px solid var(--accent); }

.cfg-group { margin-bottom: 3.2rem; }
.cfg-group > h2 { font-size: 1.35rem; letter-spacing: -0.015em; margin-bottom: 0.4rem; }
.cfg-group .group-sub { font-size: 0.95rem; margin-bottom: 1.4rem; }

/* option chips (cluster size) */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip-row input { position: absolute; opacity: 0; pointer-events: none; }
.chip-row label {
  min-width: 3.1rem; text-align: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background: var(--surface);
  font-weight: 600; font-size: 1rem;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.chip-row label:hover { border-color: var(--text); }
.chip-row input:checked + label { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.chip-row input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-row input:disabled + label { opacity: 0.35; cursor: not-allowed; }
.chip-row input:disabled + label:hover { border-color: var(--hairline-strong); }
.cfg-readout { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--dim); margin: 1rem 0 0; }
.cfg-readout strong { color: var(--text); font-weight: 700; }

/* option cards (hardware, storage, model sizes) */
.opt-set { display: grid; gap: 0.7rem; }
.opt-set.cols-2 { grid-template-columns: repeat(2, 1fr); }
.opt-set.cols-3 { grid-template-columns: repeat(3, 1fr); }
.opt-set input { position: absolute; opacity: 0; pointer-events: none; }
.opt-set label {
  display: block;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background: var(--surface);
  padding: 1rem 1.2rem;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.opt-set label:hover { border-color: var(--text); }
.opt-set .opt-name { display: block; font-weight: 620; font-size: 1rem; color: var(--text); }
.opt-set .opt-name::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--hairline-strong);
  margin-right: 0.6rem;
  vertical-align: 1px;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.opt-set .opt-desc { display: block; font-size: 0.85rem; color: var(--dim); margin-top: 0.15rem; padding-left: 1.3rem; }
.opt-set input:checked + label { border: 1.5px solid var(--accent); background: var(--bg); }
.opt-set input:checked + label .opt-name::before { background: var(--accent); border-color: var(--accent); }
.opt-set input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt-set input:disabled + label { opacity: 0.45; cursor: not-allowed; }
.opt-set input:disabled + label:hover { border-color: var(--hairline-strong); }
.opt-set .opt-lock { color: var(--dim); }

@media (max-width: 640px) {
  .opt-set.cols-3, .opt-set.cols-2 { grid-template-columns: 1fr; }
}

/* summary bar */
.cfg-summary {
  position: sticky; bottom: 0; z-index: 10;
  background: var(--bg);
  border-top: 1px solid var(--hairline-strong);
  padding: 1.1rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.cfg-summary .sum-text { font-size: 0.92rem; color: var(--dim); }
.cfg-summary .sum-text strong { display: block; color: var(--text); font-size: 1rem; }
.cfg-summary .btn { white-space: nowrap; }

@media (max-width: 980px) {
  .cfg { grid-template-columns: 1fr; gap: 2rem; }
  .cfg-media { position: static; }
  .cfg-media .stage img { max-height: 280px; }
}

/* Footer ------------------------------------------------------ */

.footer {
  background: #121A14;
  color: #F1EEE3;
  border-top: 1px solid #26362B;
}
.footer a { color: #A9B3A6; text-decoration: none; }
.footer a:hover { color: #F1EEE3; }
.footer .cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding: 4.5rem 0 3.5rem;
}
.footer .brand img { height: 22px; width: auto; margin-bottom: 1.4rem; }
.footer .brand p { color: #A9B3A6; font-size: 0.95rem; max-width: 34ch; }
.footer h4 {
  font-family: var(--mono); font-weight: 400;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #7E8A7F; margin: 0 0 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.65rem; font-size: 0.95rem; }
.footer .baseline {
  border-top: 1px solid #26362B;
  padding: 1.4rem 0;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  color: #7E8A7F; text-transform: uppercase;
}

@media (max-width: 880px) {
  .footer .cols { grid-template-columns: 1fr; gap: 2.2rem; padding: 3rem 0 2.5rem; }
}

/* Fixed-background bands --------------------------------------
   Subtle depth via background-attachment: fixed. The image never
   moves against itself — no scroll-jacking, no pinning. Text sits
   on a dark scrim baked into the background stack for legibility.
   Degrades to a normal scrolling background on small screens and
   for reduced-motion users. */

.fixed-band {
  position: relative;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #F1EEE3;
}
.fixed-band .container { position: relative; z-index: 1; }
.fixed-band .inner { padding: 7.5rem 0; }

/* Cycling bands dip through the page's own dark between images —
   the text never moves and never loses contrast. JS swaps the
   image only while the cover is fully opaque. */
.band-cover {
  position: absolute; inset: 0; z-index: 0;
  background: #0A0F0C;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.band-cover.dip { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .band-cover { transition: none; } }
.fixed-band h2 { color: #F1EEE3; }
.fixed-band p { color: #C3CCC0; }
.fixed-band strong { color: #F1EEE3; }
.fixed-band .caption {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8B978B; margin-top: 2.2rem;
}
.fixed-band .pull {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.3;
  color: #F1EEE3;
  max-width: 34ch;
  margin: 0;
}
.fixed-band .pull em { color: #9DBD9F; }

@media (max-width: 880px) {
  .fixed-band { background-attachment: scroll; }
  .fixed-band .inner { padding: 4.5rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fixed-band { background-attachment: scroll; }
}

/* Media figures (concept renders beside copy) ----------------- */

figure.media-fig { margin: 0; width: 100%; }
figure.media-fig img { width: 100%; height: auto; }
figure.media-fig figcaption {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim); margin-top: 1rem;
}
.split.tops { align-items: start; }

/* Stepper (progressive disclosure, Reserve form) --------------- */

.stepper {
  display: flex; gap: 0.8rem; list-style: none; margin: 0 0 2.4rem; padding: 0.6rem 0 0.9rem;
  position: sticky; top: 76px; z-index: 15;
  background: var(--bg);
}
.stepper li { flex: 1; }
.stepper button {
  width: 100%; text-align: left;
  background: none; border: 0; border-top: 2px solid var(--hairline-strong);
  padding: 0.65rem 0 0; margin: 0;
  font: inherit; color: var(--dim); cursor: pointer;
}
.stepper .s-num { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; }
.stepper .s-name { display: block; font-weight: 620; font-size: 0.92rem; margin-top: 0.15rem; }
.stepper li[data-state="current"] button { border-top-color: var(--accent); color: var(--text); cursor: default; }
.stepper li[data-state="done"] button:hover { color: var(--text); }
.stepper li[data-state="todo"] button { cursor: default; }
.stepper button:disabled { cursor: default; }

.step-panel[hidden] { display: none; }
.step-panel { animation: panel-in 280ms ease; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .step-panel { animation: none; } }

.step-nav { display: flex; gap: 1rem; margin-bottom: 2.4rem; }

/* Conditional reveal (contact form) ---------------------------- */

.reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms ease; }
.reveal > .reveal-inner { overflow: hidden; }
.reveal.open { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .reveal { transition: none; } }

.topic-hint { font-size: 0.92rem; color: var(--dim); margin: 0.9rem 0 0; }
.field .why { font-size: 0.82rem; color: var(--dim); margin-top: 0.35rem; }

/* Maturity labels ---------------------------------------------
   Every technical claim carries its status: in development,
   target specification, research direction, or measured result. */

.mlabel {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
  margin-bottom: 1.1rem;
}
.disclaimer {
  font-size: 0.88rem;
  color: var(--dim);
  border-left: 2px solid var(--hairline-strong);
  padding-left: 1.1rem;
  max-width: 60ch;
}

/* Annotated concept figure ------------------------------------ */

.anno { position: relative; }
.anno img { width: 100%; height: auto; }
.anno .mark {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(10, 15, 12, 0.85);
  border: 1px solid var(--accent);
  color: #F1EEE3;
  font-family: var(--mono);
  font-size: 0.68rem;
  display: flex; align-items: center; justify-content: center;
}
.anno-legend {
  list-style: none;
  margin: 1.6rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 2.5rem;
}
.anno-legend li {
  display: flex; gap: 0.8rem; align-items: baseline;
  font-size: 0.92rem; color: var(--dim);
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--hairline);
}
.anno-legend .n { font-family: var(--mono); font-size: 0.7rem; color: var(--accent); white-space: nowrap; }
.anno-legend strong { color: var(--text); font-weight: 620; }
@media (max-width: 700px) { .anno-legend { grid-template-columns: 1fr; } }

/* Scroll choreography -----------------------------------------
   Content settles into place as it enters the viewport. Classes
   are added by JS only, so no-JS visitors see everything. */

.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 750ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 750ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--rv-delay, 0ms);
}
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* Utilities --------------------------------------------------- */

.measure { max-width: var(--measure); }
.center { text-align: center; }
.center p, .center .lede { margin-left: auto; margin-right: auto; }

.serif-note { font-family: var(--serif); font-size: 1.35rem; line-height: 1.5; color: var(--text); max-width: 44ch; }
.serif-note em { color: var(--em); }

table.plain { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
table.plain th {
  text-align: left; font-family: var(--mono); font-weight: 400; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  padding: 0 1rem 0.8rem 0; border-bottom: 1px solid var(--hairline-strong);
}
table.plain td { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--dim); }
table.plain td:first-child { font-weight: 620; color: var(--text); white-space: nowrap; }
.tscroll { overflow-x: auto; }