/* ==========================================================================
   drimkoe.com — the "engineering sheet" system
   Shared with the Drimkoe Console, the capability statement and the proposal
   sheets: IBM Plex Sans + Mono, steel-grey paper, drawing title blocks.
   Tokens live here; change a colour once and every page follows.
   Pages follow the visitor's light/dark setting automatically.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Paper and ink */
  --bg: #F4F6F5;
  --panel: #FFFFFF;
  --panel2: #EDF1F0;
  --ink: #18242C;
  --ink2: #33434D;
  --muted: #54646E;
  --line: #D3DBDF;
  --line2: #B9C5CB;

  /* Accent (steel blue) */
  --accent: #175E8C;
  --accent-strong: #124A6F;
  --accent-ink: #FFFFFF;
  --accent-soft: #E2EDF4;

  /* Evidence states: delivered (green) and in progress (amber) */
  --proof: #26693F;
  --proof-line: #2E7D4F;
  --proof-bg: #E7F1EA;
  --staged: #8F4E0C;
  --staged-line: #A85D10;
  --staged-bg: #F7EEDF;

  /* Measurement bars (validated with the dataviz checker) */
  --bar-real: #7D8C95;
  --bar-twin: #175E8C;

  /* Closing call-to-action band */
  --cta-bg: #18242C;
  --cta-ink: #F4F6F5;
  --cta-muted: #B9C5CB;
  --cta-btn-bg: #F4F6F5;
  --cta-btn-ink: #18242C;
  --cta-btn-hover: #FFFFFF;

  --grid: rgba(24, 36, 44, 0.05);

  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --band: clamp(52px, 7vw, 88px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1519;
    --panel: #161E24;
    --panel2: #1C262D;
    --ink: #E4EAEE;
    --ink2: #C5D0D6;
    --muted: #93A4AF;
    --line: #2A363E;
    --line2: #3A4952;
    --accent: #66AED8;
    --accent-strong: #8CC4E4;
    --accent-ink: #0F1519;
    --accent-soft: #16293A;
    --proof: #6FBE8F;
    --proof-line: #6FBE8F;
    --proof-bg: #17251C;
    --staged: #D99A4C;
    --staged-line: #D99A4C;
    --staged-bg: #2A2118;
    --bar-real: #5F6E77;
    --bar-twin: #579CC7;
    --cta-bg: #1C262D;
    --cta-ink: #E4EAEE;
    --cta-muted: #93A4AF;
    --cta-btn-bg: #66AED8;
    --cta-btn-ink: #0F1519;
    --cta-btn-hover: #8CC4E4;
    --grid: rgba(228, 234, 238, 0.045);
  }
}

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

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

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

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

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { margin: 0; font-weight: 600; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 1.3rem + 3.4vw, 3.7rem); line-height: 1.06; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.45rem); line-height: 1.14; letter-spacing: -0.016em; }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.005em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; }
code { font-family: var(--mono); font-size: 0.92em; }

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

.label {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); line-height: 1.55; color: var(--ink2); max-width: 62ch; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: var(--gutter); z-index: 100; background: var(--panel); color: var(--ink); padding: 8px 12px; border: 1px solid var(--line2); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: saturate(1.2) blur(8px); }
}

.header-row { position: relative; display: flex; align-items: center; gap: 24px; min-height: 64px; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand img { width: 26px; height: 26px; }
.brand-word { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.24em; }

.site-menu { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.site-menu ul { list-style: none; padding: 0; }
.site-menu > ul { display: flex; gap: 22px; }
.site-menu li a {
  display: block;
  padding: 6px 0;
  color: var(--ink2);
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-menu li a:hover { color: var(--ink); border-bottom-color: var(--line2); }
.site-menu li a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav-toggle { display: none; }

@media (max-width: 1000px) {
  html:not(.js) .site-header { position: static; }
  .header-row { flex-wrap: wrap; }
  .site-menu { width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 18px; }
  .site-menu > ul { flex-direction: column; gap: 0; }
  .site-menu li a { padding: 13px 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .site-menu li a[aria-current="page"] { border-bottom-color: var(--line); box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
  .site-menu .btn { margin-top: 16px; justify-content: center; }

  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 10px 12px;
    font: 600 0.75rem/1 var(--mono);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line2);
    cursor: pointer;
  }
  .nav-toggle-bars { display: inline-grid; gap: 3px; }
  .nav-toggle-bars i { display: block; width: 14px; height: 1.5px; background: currentColor; }
  .js .site-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    top: 100%;
    padding: 6px var(--gutter) 22px;
    background: var(--panel);
    border-bottom: 1.5px solid var(--line2);
    box-shadow: 0 18px 30px -24px rgba(0, 0, 0, 0.35);
  }
  .js .site-menu.open { display: flex; }
}

/* ---------- Header: the two door items open to what they contain ---------- */

/* Available to a screen reader, not on screen. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.nav-parent { display: inline-flex; align-items: center; gap: 2px; }

.sub-toggle {
  display: inline-flex;
  min-width: 28px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  line-height: 0;
  color: var(--ink2);
  background: none;
  border: 0;
  cursor: pointer;
}
.sub-toggle:hover { color: var(--ink); }
.sub-toggle svg { transition: transform 0.16s ease; }
@media (prefers-reduced-motion: reduce) {
  .sub-toggle svg { transition: none; }
}

.submenu li a {
  display: block;
  color: var(--ink2);
  text-decoration: none;
  border-bottom: 0;
}
.submenu li a:hover { color: var(--ink); border-bottom: 0; }

@media (min-width: 1001px) {
  .site-menu .has-sub { position: relative; }
  /* Extends the hover area down to the header's lower edge, so the pointer can
     travel from the link into the panel without passing over dead space. The
     negative margin keeps the row its original height. */
  .site-menu .has-sub > .nav-parent { padding-bottom: 14px; margin-bottom: -14px; }

  .submenu {
    position: absolute;
    top: calc(100% + 14px);
    left: -16px;
    z-index: 60;
    display: none;
    flex-direction: column;
    min-width: 276px;
    padding: 6px 0;
    background: var(--panel);
    border: 1px solid var(--line2);
    box-shadow: 0 20px 34px -22px rgba(0, 0, 0, 0.45);
  }
  html:not(.js) .has-sub:hover > .submenu,
  html:not(.js) .has-sub:focus-within > .submenu,
  .has-sub.open > .submenu { display: flex; }
  .has-sub.open .sub-toggle svg { transform: rotate(180deg); }

  .submenu li a { padding: 9px 16px; font-size: 0.9rem; }
  .submenu li a:hover { background: var(--bg); }
}

@media (max-width: 1000px) {
  .site-menu .nav-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line);
  }
  .site-menu .nav-parent > a { flex: 1 1 auto; border-bottom: 0; }
  .site-menu .nav-parent > a[aria-current="page"] { border-bottom: 0; }
  /* A finger-sized target: the row itself is 46px tall. */
  .sub-toggle { min-width: 46px; min-height: 46px; padding: 0 2px 0 16px; }

  .submenu {
    display: none;
    flex-direction: column;
    padding: 2px 0 8px 14px;
    box-shadow: inset 2px 0 0 var(--line2);
  }
  .has-sub.open > .submenu { display: flex; }
  .has-sub.open .sub-toggle svg { transform: rotate(180deg); }
  .submenu li a { padding: 11px 0; font-size: 0.98rem; }
  /* With JavaScript off the panel cannot be toggled, so it stands open. */
  html:not(.js) .submenu { display: flex; }

  /* The menu is taller now than a phone screen. */
  .js .site-menu { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; }
}

/* The sticky header must not cover whatever an in-page link jumped to. */
.offer { scroll-margin-top: 88px; }
h2[id], h3[id], #report-h, #doors { scroll-margin-top: 88px; }
html:not(.js) .sub-toggle { display: none; }
.breadcrumb { margin-bottom: 14px; font-size: 0.9rem; color: var(--muted); }
.breadcrumb a { color: var(--accent); }
.breadcrumb [aria-current] { color: var(--ink2); }

/* Questions on the offer pages: a plain list of headings and answers. */
.qa { margin-top: 26px; }
.qa > div { padding: 20px 0; border-top: 1px solid var(--line); }
.qa > div:last-child { border-bottom: 1px solid var(--line); }
.qa h3 { font-size: 1.02rem; }
.qa p { margin-top: 8px; max-width: 74ch; color: var(--ink2); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  cursor: pointer;
}
.btn:hover { color: var(--accent-ink); background: var(--accent-strong); border-color: var(--accent-strong); }
.btn .arr { font-family: var(--mono); font-weight: 500; }
.btn-ghost { color: var(--ink); background: transparent; border-color: var(--line2); }
.btn-ghost:hover { color: var(--ink); background: var(--panel); border-color: var(--ink); }
.btn-sm { padding: 10px 14px; font-size: 0.9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.text-link { font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link .arr { margin-left: 0.3em; font-family: var(--mono); }

/* ---------- Page hero ---------- */

.hero { position: relative; padding-block: clamp(40px, 7vw, 88px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 25%, transparent 95%);
  pointer-events: none;
}
.hero > .wrap { position: relative; }
.hero h1 { margin: 14px 0 22px; max-width: 19ch; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.hero-grid .hero-copy { padding-top: 4px; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-sub h1 { max-width: 22ch; }

/* ---------- Title block (drawing-sheet key/value strip) ---------- */

.tblock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(32px, 5vw, 56px);
  background: var(--panel);
  border: 1.5px solid var(--line2);
}
.tblock > div { padding: 12px 16px 14px; border-left: 1px solid var(--line); }
.tblock > div:first-child { border-left: 0; }
.tblock .k { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.tblock .v { display: block; font-size: 0.95rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.tblock.tb-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tblock.tb-2 > div:nth-child(odd) { border-left: 0; }
.tblock.tb-2 > div:nth-child(n+3) { border-top: 1px solid var(--line); }
@media (max-width: 860px) {
  .tblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tblock > div:nth-child(odd) { border-left: 0; }
  .tblock > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .tblock, .tblock.tb-2 { grid-template-columns: 1fr; }
  .tblock > div, .tblock.tb-2 > div { border-left: 0; }
  .tblock > div + div, .tblock.tb-2 > div + div { border-top: 1px solid var(--line); }
}

/* ---------- Bands and section heads ---------- */

.band { padding-block: var(--band); }
.band + .band { border-top: 1px solid var(--line); }
.band.alt { background: var(--panel2); }

.sec-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  max-width: 900px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.sec-no {
  grid-row: 1 / span 3;
  margin-top: 0.1rem;
  padding: 2px 7px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.sec-head .label { grid-column: 2; margin-top: 0.2rem; }
.sec-head h2 { grid-column: 2; margin-top: 8px; }
.sec-head p { grid-column: 2; margin-top: 14px; color: var(--ink2); max-width: 64ch; }

/* ---------- Validation record (home hero) ---------- */

.record { background: var(--panel); border: 1.5px solid var(--line2); }
.record-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.record-row { padding: 16px; border-bottom: 1px solid var(--line); }
.record-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; align-items: baseline; margin-bottom: 12px; }
.record-title b { font-size: 0.98rem; font-weight: 600; }
.record-title span { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.record-foot { padding: 12px 16px; font-size: 0.92rem; background: var(--panel2); }

/* ---------- Measurement bars (one scale, direct labels) ---------- */

.meas { margin: 0; }
.meas-row {
  position: relative;
  display: grid;
  grid-template-columns: 7.6rem minmax(0, 1fr) 5.2rem;
  grid-template-areas: "name bar val";
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}
.meas-name { grid-area: name; font-size: 0.9rem; color: var(--ink2); }
.meas-track { grid-area: bar; position: relative; height: 12px; }
.meas-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28.5714% 100%;
  pointer-events: none;
}
.meas-bar {
  position: relative;
  display: block;
  height: 12px;
  width: calc(var(--v) / 0.7 * 100%);
  background: var(--bar-real);
  border-radius: 0 4px 4px 0;
}
.meas-bar.twin { background: var(--bar-twin); }
.meas-val { grid-area: val; font-family: var(--mono); font-size: 0.9rem; font-weight: 500; text-align: right; white-space: nowrap; }
.meas-axis {
  display: grid;
  grid-template-columns: 7.6rem minmax(0, 1fr) 5.2rem;
  gap: 12px;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
}
.meas-ticks { grid-column: 2; position: relative; height: 1.4em; border-top: 1px solid var(--line2); }
.meas-ticks span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; }
.meas-ticks span:first-child { transform: none; }
.meas figcaption { margin-top: 10px; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
.meas-row[data-tip]:hover::after,
.meas-row[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 5;
  left: 7.6rem;
  bottom: calc(100% - 2px);
  max-width: 18rem;
  padding: 6px 9px;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--bg);
  background: var(--ink);
  pointer-events: none;
}
@media (max-width: 520px) {
  .meas-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; gap: 4px 12px; }
  .meas-axis { grid-template-columns: minmax(0, 1fr); }
  .meas-ticks { grid-column: 1; }
  .meas-row[data-tip]:hover::after, .meas-row[data-tip]:focus-visible::after { left: 0; }
}

/* Before -> after figures */
.figpair { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.figpair .fig { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.figpair .fig.before { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--line2); }
.figpair .to { font-family: var(--mono); color: var(--muted); }
.figpair + .figpair-note { margin-top: 6px; font-size: 0.9rem; color: var(--muted); }

/* ---------- Doors ---------- */

.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .doors { grid-template-columns: minmax(0, 1fr); } }
.door { min-width: 0; }
.door { display: flex; flex-direction: column; padding: clamp(22px, 3vw, 34px); background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.door h3 { margin: 10px 0 14px; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.2; }
.door p { color: var(--ink2); }
.price-list { list-style: none; margin: 22px 0 26px; padding: 0; border-top: 1px solid var(--line); }
.price-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--line2); }
.price-list .p { font-family: var(--mono); font-size: 0.9rem; white-space: nowrap; color: var(--ink); }
@media (max-width: 480px) {
  .price-list li { flex-direction: column; align-items: flex-start; gap: 4px; }
}
.door .text-link { margin-top: auto; padding-top: 20px; }

/* ---------- Steps ---------- */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--panel); border: 1.5px solid var(--line2); }
.step { padding: clamp(20px, 3vw, 30px); border-left: 1px solid var(--line); }
.step:first-child { border-left: 0; }
.step .label { color: var(--accent); }
.step h3 { margin: 8px 0 10px; }
.step p { font-size: 0.98rem; color: var(--ink2); }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-left: 0; border-top: 1px solid var(--line); }
  .step:first-child { border-top: 0; }
}
.terms { margin-top: 18px; font-size: 0.95rem; line-height: 1.7; color: var(--ink2); }

/* ---------- Facts grid (differentiators) ---------- */

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); border-top: 1.5px solid var(--line2); }
.fact { padding: 22px 0 26px; border-bottom: 1px solid var(--line); }
.fact h3 { margin-bottom: 8px; font-size: 1.08rem; }
.fact p { font-size: 0.97rem; color: var(--ink2); }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* ---------- Split (figure + text) ---------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.split.top { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.split .copy p { color: var(--ink2); }
.split .copy h2 { margin: 10px 0 18px; }

.frame { margin: 0; padding: 8px; background: var(--panel); border: 1px solid var(--line2); }
.frame img { width: 100%; height: auto; }
.frame figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 4px 2px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--muted); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

/* ---------- Sheet tables ---------- */

.table-wrap { overflow-x: auto; background: var(--panel); border: 1.5px solid var(--line2); }
table.sheet { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
table.sheet th {
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-align: left;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel2);
  border-bottom: 1px solid var(--line2);
}
table.sheet td { padding: 14px 16px; vertical-align: top; border-bottom: 1px solid var(--line); }
table.sheet tr:last-child td { border-bottom: 0; }
table.sheet td.when, table.sheet td.num { font-family: var(--mono); font-size: 0.86rem; white-space: nowrap; }
table.sheet td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.sheet td b { font-weight: 600; }
table.sheet .sub { display: block; margin-top: 2px; font-size: 0.9rem; color: var(--ink2); }
@media (max-width: 640px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { padding: 3px 16px; border: 0; }
  table.stack td.num { text-align: left; }
}

/* ---------- Chips ---------- */

.chip {
  display: inline-block;
  padding: 2px 7px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid;
}
.chip.done { color: var(--proof); background: var(--proof-bg); border-color: var(--proof-line); }
.chip.next { color: var(--staged); background: var(--staged-bg); border-color: var(--staged-line); }
.chip.plan { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.chip.tag { color: var(--muted); background: var(--panel); border-color: var(--line2); }

/* ---------- Offers (door pages) ---------- */

.offers { border-top: 1.5px solid var(--line2); }
.offer { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 14px 44px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.offer h3 { margin-bottom: 8px; font-size: 1.32rem; }
.offer .outcome { margin-bottom: 14px; font-size: 1.08rem; color: var(--ink); }
.offer .contents { font-size: 0.95rem; line-height: 1.7; color: var(--ink2); }
.offer aside { padding-left: 22px; border-left: 1px solid var(--line); }
.offer .price { font-family: var(--mono); font-size: 1.2rem; font-weight: 600; white-space: nowrap; color: var(--ink); }
.offer .price small { display: block; margin-top: 3px; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.03em; white-space: normal; color: var(--muted); }
.offer .origin { margin-top: 16px; font-size: 0.92rem; color: var(--ink2); }
.offer .origin .label { margin-bottom: 3px; }
@media (max-width: 760px) {
  .offer { grid-template-columns: 1fr; }
  .offer aside { padding: 14px 0 0; border-left: 0; border-top: 1px dashed var(--line2); }
}
.aside-note { margin-top: 22px; font-size: 0.95rem; color: var(--ink2); }

/* ---------- Stakes (before / after) ---------- */

.stakes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .stakes { grid-template-columns: 1fr; } }
.stakes > div { padding: 20px 22px; background: var(--panel); border: 1px solid var(--line); }
.stakes .without { border-left: 3px solid var(--staged-line); }
.stakes .with { border-left: 3px solid var(--proof-line); }
.stakes ul { margin-top: 10px; padding-left: 18px; display: grid; gap: 8px; color: var(--ink2); }
.stakes li::marker { color: var(--line2); }

/* ---------- Case studies ---------- */

.filters { display: none; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.js .filters { display: flex; }
.filters button {
  padding: 9px 12px;
  font: 500 0.76rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink2);
  background: var(--panel);
  border: 1px solid var(--line2);
  cursor: pointer;
}
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }

.case { padding-block: clamp(40px, 6vw, 76px); border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.cases > .case:first-child { border-top: 0; }
.case[hidden] { display: none; }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.case h2 { max-width: 26ch; margin-bottom: 20px; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.case-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .case-grid { grid-template-columns: 1fr; } }
.case-grid .body p { color: var(--ink2); }
.case .tblock { margin-top: 0; }
.note-block { margin-top: 16px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); }
.note-block .label { margin-bottom: 3px; }
.note-block.result { border-left: 3px solid var(--proof-line); }
.note-block.result .label { color: var(--proof); }
.note-block.today { border-left: 3px solid var(--staged-line); }
.note-block.today .label { color: var(--staged); }
.case .text-link { display: inline-block; margin-top: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }

/* Bridge diagram (PLC <-> extension <-> sim) */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
.flow .node { padding: 14px; background: var(--panel); border: 1.5px solid var(--line2); }
.flow .node.mid { border-color: var(--accent); }
.flow .node b { display: block; font-size: 0.95rem; }
.flow .node span { display: block; margin-top: 4px; font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; color: var(--muted); }
.flow .link { display: flex; align-items: center; justify-content: center; min-width: 38px; font-family: var(--mono); color: var(--accent); }
.flow-note { margin-top: 10px; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
@media (max-width: 640px) {
  .flow { grid-template-columns: 1fr; }
  .flow .link { min-height: 30px; }
  .flow .link span { transform: rotate(90deg); }
}

/* ---------- Spec lists ---------- */

.spec { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.spec li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink2); }
.spec li b { color: var(--ink); font-weight: 600; }
.spec.mono li { font-family: var(--mono); font-size: 0.86rem; }

.dl { display: grid; grid-template-columns: 11rem minmax(0, 1fr); border-top: 1px solid var(--line); }
.dl dt, .dl dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dl dt { padding-right: 16px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 15px; }
.dl dd { color: var(--ink2); }
@media (max-width: 600px) {
  .dl { grid-template-columns: 1fr; }
  .dl dt { padding-bottom: 0; border-bottom: 0; }
  .dl dd { padding-top: 4px; }
}

.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
@media (max-width: 800px) { .cols-2 { grid-template-columns: 1fr; } }

.quote { margin: 8px 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height: 1.5; color: var(--ink); }

/* ---------- Contact ---------- */

.book { padding: clamp(22px, 3.5vw, 36px); background: var(--panel); border: 1.5px solid var(--line2); border-top: 3px solid var(--accent); }
.book h2 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem); }
.addr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.addr a { font-family: var(--mono); font-size: 0.98rem; word-break: break-all; }
.copy-btn { padding: 7px 10px; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); background: var(--panel2); border: 1px solid var(--line2); cursor: pointer; display: none; }
.js .copy-btn { display: inline-block; }

/* ---------- Closing call to action ---------- */

.cta-band { padding-block: clamp(56px, 8vw, 96px); color: var(--cta-ink); background: var(--cta-bg); }
.cta-band h2 { max-width: 24ch; color: var(--cta-ink); }
.cta-band p { max-width: 58ch; margin-top: 14px; color: var(--cta-muted); }
.cta-band .btn { color: var(--cta-btn-ink); background: var(--cta-btn-bg); border-color: var(--cta-btn-bg); }
.cta-band .btn:hover { background: var(--cta-btn-hover); border-color: var(--cta-btn-hover); }
.cta-band .alt { margin-top: 16px; font-size: 0.95rem; color: var(--cta-muted); }
.cta-band .alt a { color: var(--cta-ink); }
.cta-band .label { color: var(--cta-muted); }

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

.site-footer { padding-top: clamp(40px, 6vw, 64px); font-size: 0.95rem; background: var(--panel); border-top: 1.5px solid var(--line2); }
.foot-grid { display: grid; grid-template-columns: 1.25fr 1.2fr 0.9fr 1.05fr; gap: 32px; padding-bottom: 40px; }
@media (max-width: 1150px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand p { max-width: 34ch; margin-top: 14px; color: var(--ink2); }
.site-footer h2 { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.site-footer ul { display: grid; gap: 8px; margin-top: 12px; padding: 0; list-style: none; }
.site-footer ul a { color: var(--ink2); text-decoration: none; }
.site-footer ul a:hover { color: var(--accent); text-decoration: underline; }
.foot-tb { display: grid; grid-template-columns: 2.2fr 2fr 1fr; font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--line); }
.foot-tb > div { padding: 13px 16px 16px 0; }
.foot-tb > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
@media (max-width: 760px) {
  .foot-tb { grid-template-columns: 1fr; }
  .foot-tb > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

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

.mt-0 { margin-top: 0; }
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 40px; }
.maxw { max-width: 68ch; }
.center-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }

/* ---------- Print (the capability statement prints cleanly) ---------- */

@page { size: letter; margin: 0.45in 0.5in; }

@media print {
  :root {
    --bg: #FFFFFF; --panel: #FFFFFF; --panel2: #F2F4F4;
    --ink: #000000; --ink2: #1E2A31; --muted: #45525A;
    --line: #C9D0D4; --line2: #8E9AA1;
    --accent: #134E75; --accent-soft: #FFFFFF;
    --proof: #215B3C; --proof-bg: #FFFFFF; --staged: #7E4409; --staged-bg: #FFFFFF;
    --grid: transparent;
  }
  html, body { background: #FFFFFF !important; }
  body { font-size: 8.6pt; line-height: 1.38; }
  .wrap { max-width: none; padding-inline: 0; }
  .site-header, .site-footer, .no-print, .cta-band, .skip, .filters { display: none !important; }
  .hero { padding-block: 0 8pt; border-bottom: 1.5px solid var(--line2); }
  .hero::before { display: none; }
  .hero h1 { font-size: 20pt; margin: 2pt 0 4pt; max-width: none; }
  .hero .lead { font-size: 9.5pt; max-width: none; }
  .band, .band.alt { padding-block: 7pt 4pt; background: none !important; }
  .band + .band { border-top: 0; }
  h2 { font-size: 12.5pt; }
  h3 { font-size: 9.5pt; }
  .sec-head { margin-bottom: 5pt; break-after: avoid; page-break-after: avoid; }
  .sec-head h2 { margin-top: 1pt; }
  .sec-head p { margin-top: 3pt; font-size: 8.6pt; }
  .sec-no { font-size: 7pt; padding: 0 4pt; }
  .label, .tblock .k { font-size: 6.5pt; }
  .tblock { margin-top: 8pt; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .tblock > div { padding: 4pt 7pt 5pt; border-top: 0 !important; border-left: 1px solid var(--line) !important; }
  .tblock > div:first-child { border-left: 0 !important; }
  .tblock .v { font-size: 8pt; }
  .dl { grid-template-columns: 10.5rem minmax(0, 1fr) !important; }
  .dl dt, .dl dd { padding: 3.5pt 0 !important; border-bottom: 1px solid var(--line) !important; }
  .dl dt { font-size: 6.5pt; padding-top: 5pt !important; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 14pt; border-top-width: 1px; }
  .fact { padding: 4pt 0 5pt; }
  .fact h3 { margin-bottom: 1pt; }
  .fact h3 { font-size: 9.5pt; }
  .fact p { font-size: 8pt; }
  table.sheet td.when, table.sheet td.num { font-size: 7.5pt; }
  .cols-2 { grid-template-columns: 1fr 1fr !important; gap: 14pt; }
  .table-wrap { border-width: 1px; overflow: visible; }
  table.sheet { font-size: 8pt; }
  table.sheet th { padding: 3pt 6pt; font-size: 6.5pt; }
  table.sheet td { padding: 4pt 6pt; }
  table.sheet .sub { font-size: 7.5pt; }
  table.stack thead { display: table-header-group !important; }
  table.stack, table.stack tbody { display: table !important; width: 100%; }
  table.stack tbody { display: table-row-group !important; }
  table.stack tr { display: table-row !important; padding: 0 !important; }
  table.stack td { display: table-cell !important; padding: 4pt 6pt !important; border-bottom: 1px solid var(--line) !important; }
  .spec li { padding: 3pt 0; font-size: 8pt; }
  .aside-note { margin-top: 5pt; font-size: 8pt; }
  a { color: inherit; text-decoration: none; }
  .case, .fact, .offer, .step, .tblock, .door, .note-block, table.sheet tr, .dl dt, .dl dd, .spec li { break-inside: avoid; }
  h2, .sec-head { break-after: avoid; }
}

/* ---------- Late additions ---------- */
.note-block .spec { margin-top: 6px; border-top: 0; }
.note-block .spec li { padding: 7px 0; }
.note-block .spec li:last-child { border-bottom: 0; padding-bottom: 0; }
.note-block p { margin: 10px 0 0; color: inherit; }
.cta-band .btn-ghost { color: var(--cta-ink); background: transparent; border-color: var(--cta-muted); }
.cta-band .btn-ghost:hover { color: var(--cta-ink); background: transparent; border-color: var(--cta-ink); }
table.sheet th.num { text-align: right; }
.door .chips { margin-bottom: 4px; }
.flow.vertical { grid-template-columns: 1fr; }
.flow.vertical .link { min-height: 30px; }
.flow.vertical .link span { transform: rotate(90deg); }
.flow.vertical .node { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; }
.flow.vertical .node span { margin-top: 0; }
.door .tblock { margin-top: 18px; }
.record-row > .record-text { margin: 0; font-size: 0.95rem; color: var(--ink2); }
.steps + .tblock { margin-top: 16px; border-top: 0; }
address { font-style: normal; }
.foot-addr { margin-top: 12px; line-height: 1.55; color: var(--ink2); }
.record-inline { max-width: 560px; }
/* Two evidence panels side by side (home § Results); stacks below 760px. */
.records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .records { grid-template-columns: minmax(0, 1fr); } }
.records .record { display: flex; flex-direction: column; }
.records .record .record-row { flex: 1 1 auto; }

/* ---------- Field-data figures (charts, point clouds, clips) ----------
   Series colours are the site's staged/accent hues, re-stepped for each mode
   so both pass the categorical checks (lightness band, chroma floor, CVD
   separation) against that mode's chart surface. Identity is never colour
   alone: every series is also labelled on the mark. */
:root { --series-a: #8F4E0C; --series-b: #175E8C; --fig-ground: #0D1317; }
@media (prefers-color-scheme: dark) {
  :root { --series-a: #C17F2C; --series-b: #4B98CE; }
}

svg.fig { display: block; width: 100%; height: auto; overflow: visible; } /* svg-scoped: .figpair .fig is the before/after figure span */
.fig .ser-a, .fig .ser-b { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fig .ser-a { stroke: var(--series-a); stroke-width: 1.6; }
.fig .ser-b { stroke: var(--series-b); stroke-width: 2.4; }
.fig .ser-b-fill { fill: var(--series-b); }
.fig .ser-a-ink { fill: var(--series-a); }
.fig .ser-b-ink { fill: var(--series-b); }
.fig .fig-lab {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; fill: var(--muted);
}
.fig .fig-node { fill: var(--ink); }
.fig .fig-axis, .fig .fig-tick { stroke: var(--line2); stroke-width: 1; }
.fig .fig-scale line { stroke: var(--muted); stroke-width: 1.5; }
.fig .fig-rule { stroke: var(--ink2); stroke-width: 1.4; stroke-dasharray: 5 4; }
.fig .fig-rule-ink { fill: var(--ink2); }
.fig .fig-med { stroke: var(--series-b); stroke-width: 1.6; }
.fig .ser-b-fill:hover { fill: var(--accent-strong); }

.fig-wrap { margin: 0; padding: 14px 16px 12px; background: var(--panel); border: 1.5px solid var(--line2); }
.fig-wrap figcaption {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 0.9rem; line-height: 1.55; color: var(--ink2);
}
.fig-wrap figcaption .src {
  display: block; margin-top: 6px; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.03em; color: var(--muted);
}
.fig-key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 6px; }
.fig-key span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); }
.fig-key i { width: 16px; height: 3px; border-radius: 2px; background: currentColor; }
.fig-key .k-a { color: var(--series-a); }
.fig-key .k-b { color: var(--series-b); }

.media { margin: 0; padding: 8px; background: var(--panel); border: 1.5px solid var(--line2); }
.media video, .media img { display: block; width: 100%; height: auto; background: var(--fig-ground); }
.media figcaption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px;
  padding: 10px 4px 2px; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.03em; color: var(--muted);
}
.media-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 24px); }
@media (max-width: 760px) { .media-pair { grid-template-columns: minmax(0, 1fr); } }
.fig-stack > * + * { margin-top: clamp(20px, 3vw, 32px); }

/* Wide figures scroll rather than shrink: SVG text scales with the viewBox, and
   the point-cloud and map rasters carry burnt-in labels, so below ~620 px both
   become unreadable. Scroll the figure, never the page. */
.fig-scroll { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.fig-scroll > .fig, .fig-scroll > img, .fig-scroll > video { min-width: 620px; }
@media (max-width: 700px) {
  .fig-scroll::after {
    content: "scroll to see the whole figure →";
    display: block; padding-top: 6px;
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--muted);
  }
}

/* Supplier prices must wrap inside the two-column layout and print area. */
table.sheet.rates { table-layout: fixed; }
table.sheet.rates th:first-child { width: 45%; }
table.sheet.rates td.num { white-space: normal; overflow-wrap: anywhere; }

/* Demonstrations share the site's restrained cards and native media controls. */
.site-menu li a.nav-section-current { color: var(--ink); border-bottom-color: var(--accent); }
.demo-list { display: grid; gap: 24px; }
.demo-card, .demo-teaser { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: center; }
.demo-card { padding: clamp(16px, 2.5vw, 28px); border: 1px solid var(--line2); background: var(--panel); }
.demo-teaser { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.demo-image { display: block; }
.demo-image img, .demo-teaser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.demo-card-copy { min-width: 0; }
.demo-duration { margin: 8px 0 16px; font-size: 0.85rem; color: var(--muted); }
.demo-description { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; }
.demo-description summary { cursor: pointer; font-weight: 600; }
.demo-description .spec { margin-top: 20px; }
@media (max-width: 760px) {
  .demo-card, .demo-teaser { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .site-menu .nav-parent > a.nav-section-current { border-bottom: 0; box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
}

/* Homepage footage stays behind a fixed scrim, independent of the frame. */
.hero-preview { overflow: hidden; isolation: isolate; background: #10191f; color: #f4f6f5; }
.hero-preview::before { z-index: -1; background: linear-gradient(90deg, rgba(10,18,24,.78) 0%, rgba(10,18,24,.64) 48%, rgba(10,18,24,.14) 100%); mask-image: none; -webkit-mask-image: none; }
.hero-preview-media { position: absolute; inset: 0; z-index: -2; }
.hero-preview-media video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-preview .label, .hero-preview .lead { color: #e0e8ed; }
.hero-preview h1 { color: #fff; }
.hero-preview .lead { max-width: 62ch; }
.hero-preview .btn { background: #f4f6f5; color: #18242c; border-color: #f4f6f5; }
.hero-preview .btn:hover { background: #fff; color: #18242c; }
.hero-preview .btn-ghost { background: rgba(10,18,24,.5); color: #f4f6f5; border-color: #a8bbc7; }
.hero-preview .btn-ghost:hover { background: #253a48; color: #fff; }
.hero-preview-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 48px; font-size: .8rem; color: #d8e2e8; }
.hero-preview-tools a { color: #fff; text-underline-offset: 4px; }
.preview-toggle { min-height: 44px; padding: 8px 12px; border: 1px solid #a8bbc7; border-radius: 2px; background: #14232e; color: #fff; cursor: pointer; font: inherit; }
.preview-toggle:hover { background: #253a48; }
.hero-preview :focus-visible { outline: 3px solid #9ed9ff; outline-offset: 4px; }
@media (max-width: 760px) {
  .hero-preview::before { background: rgba(10,18,24,.65); }
  .hero-preview-tools { margin-top: 28px; gap: 12px 20px; }
}
@media print {
  .hero-preview { background: white; color: black; }
  .hero-preview-media, .hero-preview-tools { display: none; }
  .hero-preview h1, .hero-preview .label, .hero-preview .lead { color: black; }
}

/* Contact enquiry form */
.contact-form { display: grid; gap: 12px; }
.contact-form label { font-weight: 500; }
.contact-form input, .contact-form textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line2); border-radius: 2px; background: var(--paper); color: inherit; font: inherit; }
.contact-form textarea { resize: vertical; }
.contact-form .btn { justify-self: start; }
.contact-form .btn:disabled { opacity: .65; cursor: wait; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Visual service examples: retain full frames and stack naturally on small screens. */
.service-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; }
.service-hero > *, .service-hero-media { min-width:0; }
.service-visual { margin:20px 0; }
.service-visual img, .service-visual video { display:block; width:100%; height:auto; }
.service-visual a { display:block; }
.service-visual figcaption a { display:inline; }
.offer aside .service-visual { margin-top:0; }
.interface-map, .comparison-plot { margin:24px 0; padding:24px; border:1px solid var(--line); }
.interface-flow { display:flex; align-items:center; gap:12px; }
.interface-flow > div { flex:1; min-width:0; border:1px solid var(--line); padding:14px; }
.interface-flow b, .interface-flow div span { display:block; }
.interface-flow div span, .interface-map figcaption, .comparison-plot figcaption { font-size:.85rem; color:var(--muted); margin-top:10px; }
.comparison-row { display:grid; grid-template-columns:140px minmax(0,1fr) 90px; align-items:center; gap:16px; margin:20px 0; }
.comparison-track { height:22px; background:var(--line); }
.comparison-track span { display:block; height:100%; background:var(--ink); }
.comparison-range { opacity:.6; }
@media(max-width:900px) { .service-hero { grid-template-columns:1fr; gap:16px; } }
@media(max-width:600px) { .interface-flow { flex-direction:column; align-items:stretch; } .interface-flow > span { text-align:center; transform:rotate(90deg); } .comparison-row { grid-template-columns:1fr auto; gap:8px; } .comparison-track { grid-column:1; grid-row:2; } .comparison-row strong { grid-column:2; grid-row:2; } }

/* Specifications span both hero columns on wide screens. */
.service-hero > .service-specs { grid-column:1 / -1; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:0; width:100%; }
.service-specs > div { border-top:0; border-left:1px solid var(--line); padding:16px 20px; }
.service-specs > div:first-child { border-left:0; }
@media(max-width:600px) {
  .service-hero > .service-specs { grid-template-columns:1fr; }
  .service-specs > div { border-left:0; }
  .service-specs > div + div { border-top:1px solid var(--line); }
}

/* Technical-note prose uses the available content width. */
.real2sim-page .lead, .real2sim-page .maxw, .real2sim-page .sec-head p { max-width:none; }
.real2sim-page .split { grid-template-columns:minmax(0,1fr); }