/* Algonics site — "relay room" system.
   Layout: 12-column, left-aligned editorial grid; photos carry the story, captions say what is in them.
   One bold moment per page (home: hero photo + headline; railways: the auto-section mimic diagram). */
:root {
  /* colour */
  --ground: #f3f5f8;      /* cool off-white, faint blue bias */
  --panel: #e3e8ee;       /* brushed-aluminium band, from the IPS faceplates */
  --ink: #0d1726;         /* body text */
  --ink-soft: #4a5567;    /* secondary text */
  --rule: #c8d0db;
  --blue: #1a8cff;        /* wordmark blue: large marks, fills */
  --blue-ink: #0a62c2;    /* wordmark blue darkened for text on light */
  --signal: #e5322d;      /* the red dot */
  --night: #0a1322;       /* relay-room dark band */
  --night-2: #14213a;
  --night-rule: #263553;
  --on-night: #e9eef6;
  --on-night-soft: #a3b2c9;
  --track: #3fcf74;       /* mimic diagram only */
  --aspect-y: #f4c542;    /* mimic diagram only */
  --white: #ffffff;

  /* type */
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* scale: perfect fourth on 17px */
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-md: 1.375rem;
  --t-lg: 1.875rem;
  --t-xl: clamp(2.1rem, 3.6vw, 3.25rem);
  --t-hero: clamp(2.75rem, 6.4vw, 5.6rem);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --radius: 3px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 50; background: var(--white); padding: 8px 12px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap { display: flex; align-items: center; gap: 28px; min-height: 66px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 22px; width: auto; }
.nav { display: flex; gap: 26px; list-style: none; margin-left: auto; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.95rem; white-space: nowrap; padding-block: 6px; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--rule); }
.nav a[aria-current="page"] { border-bottom-color: var(--signal); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 0.98rem/1 var(--body); letter-spacing: 0.01em;
  padding: 14px 20px; border-radius: var(--radius); text-decoration: none;
  border: 1.5px solid var(--blue-ink); background: var(--blue-ink); color: var(--white);
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: #084f9d; border-color: #084f9d; }
.btn.ghost { background: transparent; color: var(--blue-ink); }
.btn.ghost:hover { background: color-mix(in srgb, var(--blue-ink) 8%, transparent); }
.btn.small { padding: 10px 14px; font-size: 0.92rem; }
.site-head .btn { flex: none; }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; font-weight: 600; padding: 8px 12px; border: 1.5px solid var(--rule); border-radius: var(--radius); }
.menu summary::-webkit-details-marker { display: none; }
.menu ul { list-style: none; position: absolute; right: 0; top: calc(100% + 8px); background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px; min-width: 220px; box-shadow: 0 12px 30px rgba(13, 23, 38, 0.14); }
.menu li a { display: block; padding: 10px 12px; color: var(--ink); text-decoration: none; font-weight: 500; }
.menu li a:hover { background: var(--ground); }
@media (max-width: 1240px) { .site-head .btn { display: none; } .nav { gap: 22px; } }
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu { display: block; }
}

/* ---------- type roles ---------- */
.display { font-family: var(--display); font-weight: 600; letter-spacing: -0.005em; line-height: 0.98; }
.h1 { font-family: var(--display); font-weight: 600; font-size: var(--t-hero); line-height: 0.96; letter-spacing: -0.012em; }
.h2 { font-family: var(--display); font-weight: 600; font-size: var(--t-xl); line-height: 1.02; letter-spacing: -0.006em; }
.h3 { font-family: var(--display); font-weight: 600; font-size: var(--t-lg); line-height: 1.06; }
.h4 { font-family: var(--body); font-weight: 600; font-size: var(--t-md); line-height: 1.25; }
.lead { font-size: 1.22rem; line-height: 1.55; color: var(--ink-soft); max-width: 40em; }
.prose { max-width: 38em; display: grid; gap: 1em; }
.prose p { color: var(--ink); }
.night .prose p { color: var(--on-night); }
#contact { background: var(--night-2); }
.muted { color: var(--ink-soft); }
.small { font-size: var(--t-sm); }
.std { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
/* the red dot, as the logo uses it */
.dot-list { list-style: none; display: grid; gap: 0.55em; }
.dot-list li { position: relative; padding-left: 1.1em; }
.dot-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--signal); }

/* ---------- sections ---------- */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section.tight { padding-block: clamp(40px, 6vw, 72px); }
.band { background: var(--panel); }
.night { background: var(--night); color: var(--on-night); }
.night .muted, .night .lead { color: var(--on-night-soft); }
.night a { color: #7cc0ff; }
.night .btn { background: #1673dc; border-color: #1673dc; color: var(--white); }
.night .btn:hover { background: #2a86ee; border-color: #2a86ee; }
.night .btn.ghost { background: transparent; color: var(--on-night); border-color: var(--night-rule); }
.night .btn.ghost:hover { border-color: var(--on-night-soft); }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 52em; }
.kicker { font-weight: 600; color: var(--blue-ink); font-size: 1rem; }
.night .kicker { color: #7cc0ff; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(36px, 6vw, 72px) clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: end; }
.hero-copy { grid-column: 1 / span 7; display: grid; gap: 26px; align-content: end; min-width: 0; }
.hero-figure { grid-column: 8 / span 5; margin: 0; min-width: 0; }
.hero-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero .hero-figure img { aspect-ratio: 5 / 4; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy, .hero-figure { grid-column: 1 / -1; }
  .hero-figure img { aspect-ratio: 4 / 3; }
}
figcaption { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.45; margin-top: 10px; max-width: 46em; }
.night figcaption { color: var(--on-night-soft); }

/* credential strip */
.creds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); margin-top: clamp(40px, 6vw, 72px); }
.creds li { list-style: none; padding: 16px 20px 0 0; display: grid; gap: 4px; align-content: start; }
.creds strong { font-family: var(--display); font-weight: 600; font-size: 1.32rem; line-height: 1.1; }
.creds span { font-size: var(--t-sm); color: var(--ink-soft); }
@media (max-width: 900px) { .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; } }
@media (max-width: 480px) { .creds { grid-template-columns: minmax(0, 1fr); } }

/* in-page jump list */
.jump { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding-top: 8px; }
.jump a { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }

/* ---------- practice rows (home) ---------- */
.practice { display: grid; border-top: 1px solid var(--rule); }
.practice article { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); padding-block: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--rule); align-items: start; }
.practice figure { grid-column: 1 / span 4; margin: 0; min-width: 0; }
.practice figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.practice .body { grid-column: 5 / span 8; display: grid; gap: 14px; min-width: 0; }
.practice .facts { color: var(--ink-soft); }
@media (max-width: 760px) { .practice figure, .practice .body { grid-column: 1 / -1; } }

/* ---------- process steps ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); counter-reset: step; }
.steps li { display: grid; gap: 12px; align-content: start; counter-increment: step; min-width: 0; }
.steps img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.steps h3 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.05; display: flex; gap: 10px; align-items: baseline; }
.steps h3::before { content: counter(step); font-variant-numeric: tabular-nums; color: var(--signal); font-size: 1.15em; }
.steps p { font-size: 0.98rem; color: var(--ink-soft); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li { grid-template-columns: 120px minmax(0, 1fr); column-gap: 16px; }
  .steps img { grid-row: span 2; }
}

/* ---------- split layouts ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: start; }
.split > .a { grid-column: 1 / span 5; min-width: 0; display: grid; gap: 18px; }
.split > .b { grid-column: 6 / span 7; min-width: 0; }
.split.even > .a { grid-column: 1 / span 6; }
.split.even > .b { grid-column: 7 / span 6; }
.split.flip > .a { grid-column: 8 / span 5; grid-row: 1; }
.split.flip > .b { grid-column: 1 / span 7; grid-row: 1; }
@media (max-width: 900px) { .split > .a, .split > .b, .split.flip > .a, .split.flip > .b, .split.even > .a, .split.even > .b { grid-column: 1 / -1; grid-row: auto; } }

/* design pack */
.pack { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--night-rule); }
.pack li { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--night-rule); display: grid; gap: 4px; }
.pack strong { font-family: var(--display); font-weight: 600; font-size: 1.4rem; line-height: 1.1; color: var(--on-night); }
.pack span { color: var(--on-night-soft); font-size: 0.98rem; }
@media (max-width: 560px) { .pack { grid-template-columns: minmax(0, 1fr); } }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ledger { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ledger th, .ledger td { text-align: left; vertical-align: top; padding: 14px 18px 14px 0; border-bottom: 1px solid var(--rule); }
.ledger thead th { font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); border-bottom: 1px solid var(--ink); padding-top: 0; }
.ledger td:first-child { font-weight: 600; width: 28%; }
.ledger td.area { white-space: nowrap; width: 1%; }
.ledger td .small { display: block; color: var(--ink-soft); font-weight: 400; }
@media (max-width: 700px) {
  table.ledger.stack, .stack thead, .stack tbody, .stack tr, .stack td { display: block; width: 100%; }
  .stack thead { position: absolute; left: -9999px; }
  .stack tr { border-bottom: 1px solid var(--rule); padding-block: 12px; }
  .stack td { border: 0; padding: 2px 0; width: auto !important; white-space: normal !important; }
}

/* capability matrix (power page) */
.matrix { display: grid; border-top: 1px solid var(--ink); }
.matrix > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: clamp(16px, 2.5vw, 36px); padding-block: 22px; border-bottom: 1px solid var(--rule); }
.matrix h3 { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.05; }
.matrix .ctl { color: var(--ink); }
.matrix .ref { color: var(--ink-soft); font-size: 0.98rem; }
.matrix .ref strong { color: var(--ink); font-weight: 600; }
.matrix .hdr { padding-block: 10px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); }
@media (max-width: 820px) {
  .matrix > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .matrix .hdr { display: none; }
}

/* spec definition lists */
.spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 0; margin: 0; border-top: 1px solid var(--rule); }
.spec dt, .spec dd { margin: 0; padding-block: 10px; border-bottom: 1px solid var(--rule); }
.spec dt { color: var(--ink-soft); font-size: 0.98rem; padding-right: 24px; }
.spec dd { font-variant-numeric: tabular-nums; font-weight: 500; }
.night .spec { border-color: var(--night-rule); }
.night .spec dt, .night .spec dd { border-color: var(--night-rule); }
.night .spec dt { color: var(--on-night-soft); }
@media (max-width: 480px) { .spec { grid-template-columns: minmax(0, 1fr); } .spec dt { border-bottom: 0; padding-bottom: 0; } }

/* ---------- galleries ---------- */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.gallery figure { margin: 0; min-width: 0; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.gallery .frame { overflow: hidden; border-radius: var(--radius); background: var(--panel); }
.g-12 { grid-column: 1 / -1; } .g-4 { grid-column: span 4; } .g-3 { grid-column: span 3; } .g-6 { grid-column: span 6; } .g-8 { grid-column: span 8; } .g-5 { grid-column: span 5; } .g-7 { grid-column: span 7; }
.r-43 .frame { aspect-ratio: 4 / 3; } .r-34 .frame { aspect-ratio: 3 / 4; } .r-32 .frame { aspect-ratio: 3 / 2; } .r-11 .frame { aspect-ratio: 1 / 1; }
@media (max-width: 900px) { .g-3 { grid-column: span 6; } .g-4, .g-5, .g-7, .g-8 { grid-column: span 6; } }
@media (max-width: 560px) { .gallery figure { grid-column: 1 / -1; } }

/* ---------- case studies ---------- */
.cases { display: grid; gap: clamp(40px, 6vw, 72px); }
.case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: start; }
.case .meta { grid-column: 1 / span 4; display: grid; gap: 10px; min-width: 0; }
.case .detail { grid-column: 5 / span 8; display: grid; gap: 18px; min-width: 0; }
.client { font-weight: 600; color: var(--blue-ink); }
.case figure { margin: 0; }
.case figure img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); }
.case-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); border-top: 1px solid var(--rule); padding-top: clamp(28px, 4vw, 44px); }
.case-pair > div { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (max-width: 820px) {
  .case .meta, .case .detail { grid-column: 1 / -1; }
  .case-pair { grid-template-columns: minmax(0, 1fr); }
}
.figures { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; padding-block: 4px; }
.figures li { display: grid; }
.figures b { font-family: var(--display); font-weight: 600; font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.figures span { font-size: var(--t-sm); color: var(--ink-soft); }

/* chips of firmware IP */
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tags li { border: 1px solid var(--rule); border-radius: 2px; padding: 4px 10px; font-size: 0.95rem; background: var(--white); }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
.quotes figure { margin: 0; display: grid; gap: 18px; align-content: start; }
.quotes blockquote { margin: 0; font-size: 1.3rem; line-height: 1.5; text-indent: -0.42em; }
.quotes figcaption { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }
.quotes figcaption strong { display: block; color: var(--ink); }
@media (max-width: 760px) { .quotes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- publication callout ---------- */
.citation { border-left: 4px solid var(--signal); padding: 4px 0 4px 22px; display: grid; gap: 10px; max-width: 46em; }
.citation .title { font-family: var(--display); font-weight: 600; font-size: 1.55rem; line-height: 1.12; }
.night .citation .title { color: var(--on-night); }

/* ---------- IPS power flow ---------- */
.flow { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.flow li { padding: 18px 26px 18px 18px; background: var(--white); border: 1px solid var(--rule); margin-right: 14px; position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; }
.flow li:last-child { margin-right: 0; }
.flow li:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 50%; width: 14px; height: 2px; background: var(--ink); }
.flow li:not(:last-child)::before { content: ""; position: absolute; right: -16px; top: calc(50% - 4px); border: 5px solid transparent; border-left: 6px solid var(--ink); border-right: 0; transform: translateX(6px); }
.flow b { font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.05; }
.flow span { font-size: 0.93rem; color: var(--ink-soft); line-height: 1.4; }
.flow-bus { margin-top: 14px; padding: 12px 18px; border: 1.5px dashed var(--blue-ink); color: var(--ink); font-size: 0.98rem; }
.flow-bus b { color: var(--blue-ink); }
@media (max-width: 980px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li { margin-right: 0; margin-bottom: 14px; }
  .flow li:not(:last-child)::after { right: auto; left: 28px; top: auto; bottom: -15px; width: 2px; height: 14px; }
  .flow li:not(:last-child)::before { right: auto; left: 24px; top: auto; bottom: -16px; border: 5px solid transparent; border-top: 6px solid var(--ink); border-bottom: 0; transform: translateY(6px); }
}

/* ---------- mimic diagram ---------- */
.mimic { background: var(--night-2); border: 1px solid var(--night-rule); border-radius: var(--radius); padding: clamp(12px, 2vw, 22px); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mimic svg { display: block; width: 100%; min-width: 760px; height: auto; }
.mimic .lbl { fill: var(--on-night-soft); font: 500 13px var(--body); }
.mimic .lbl-b { fill: var(--on-night); font: 600 14px var(--body); }
.mimic .lbl-d { fill: var(--on-night); font: 600 17px var(--display); letter-spacing: 0.01em; }
.mimic .track { stroke: var(--track); stroke-width: 5; stroke-linecap: butt; }
.mimic .occ { stroke: var(--signal); stroke-width: 5; }
.mimic .post { stroke: var(--on-night-soft); stroke-width: 1.5; fill: none; }
.mimic .head { fill: #050b16; stroke: var(--on-night-soft); stroke-width: 1; }
.mimic .lamp-off { fill: #24324d; }
.mimic .lamp-r { fill: var(--signal); }
.mimic .lamp-y { fill: var(--aspect-y); }
.mimic .lamp-g { fill: var(--track); }
.mimic .box { fill: #0d1830; stroke: #3b5683; stroke-width: 1.2; }
.mimic .box-hi { fill: #0f2448; stroke: var(--blue); stroke-width: 1.5; }
.mimic .wire { stroke: #5e7499; stroke-width: 1.2; stroke-dasharray: 2 4; fill: none; }
.mimic .lan { stroke: #7cc0ff; stroke-width: 2.2; fill: none; }
.mimic .wan { stroke: var(--on-night); stroke-width: 2.2; stroke-dasharray: 8 5; fill: none; }
.mimic .modem { fill: #7cc0ff; }
.mimic .gate { stroke: var(--aspect-y); stroke-width: 3; stroke-linecap: round; }
.mimic .plat { fill: #1c2b47; stroke: #3b5683; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin-top: 14px; font-size: var(--t-sm); color: var(--on-night-soft); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { display: inline-block; width: 22px; height: 5px; }
.legend i.c { background: var(--track); } .legend i.o { background: var(--signal); }
.legend i.l { height: 2px; background: #7cc0ff; } .legend i.w { height: 0; border-top: 2px dashed var(--on-night); }

/* outcomes grid on night */
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--night-rule); }
.outcomes > div { padding: 22px 24px 24px 0; border-bottom: 1px solid var(--night-rule); display: grid; gap: 8px; align-content: start; }
.outcomes h3 { font-family: var(--display); font-weight: 600; font-size: 1.45rem; line-height: 1.08; color: var(--on-night); }
.outcomes p { color: var(--on-night-soft); }
@media (max-width: 900px) { .outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .outcomes { grid-template-columns: minmax(0, 1fr); } }

.deploy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.deploy > div { display: grid; gap: 14px; align-content: start; min-width: 0; }
@media (max-width: 820px) { .deploy { grid-template-columns: minmax(0, 1fr); } }

.night table.ledger th, .night table.ledger td { border-color: var(--night-rule); }
.night .ledger thead th { color: var(--on-night-soft); border-bottom-color: var(--on-night-soft); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.contact-grid .ask { grid-column: 1 / span 5; display: grid; gap: 20px; align-content: start; }
.contact-grid .offices { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.office { display: grid; gap: 6px; align-content: start; font-style: normal; }
.office h3 { font-family: var(--display); font-weight: 600; font-size: 1.45rem; }
.office p { color: var(--on-night-soft); }
.office a { color: var(--on-night); }
.mail-line { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.mail-line a { color: var(--on-night); text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
@media (max-width: 900px) { .contact-grid .ask, .contact-grid .offices { grid-column: 1 / -1; } }
@media (max-width: 520px) { .contact-grid .offices { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.site-foot { background: var(--night); color: var(--on-night-soft); border-top: 1px solid var(--night-rule); padding-block: 36px 44px; font-size: var(--t-sm); }
.site-foot .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.site-foot .about { grid-column: 1 / span 5; display: grid; gap: 12px; align-content: start; }
.site-foot .about img { height: 20px; width: auto; }
.site-foot nav { grid-column: 7 / span 2; }
.site-foot .regs { grid-column: 9 / span 4; }
.site-foot h2 { font: 600 0.95rem var(--body); color: var(--on-night); margin-bottom: 10px; }
.site-foot ul { list-style: none; display: grid; gap: 6px; }
.site-foot a { color: var(--on-night-soft); }
.site-foot a:hover { color: var(--on-night); }
.site-foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--night-rule); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 820px) { .site-foot .about, .site-foot nav, .site-foot .regs { grid-column: 1 / -1; } }

/* one orchestrated moment: the hero settles in on load (pure CSS; content is visible if animation never runs) */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: settle .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero-copy > *:nth-child(2) { animation-delay: .08s; }
  .hero-copy > *:nth-child(3) { animation-delay: .16s; }
  .hero-figure { animation: settle .9s .1s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes settle { from { transform: translateY(14px); opacity: .001; } to { transform: none; opacity: 1; } }
}

/* gallery frame variants */
.gallery .frame.screen { background: #050b16; }
.gallery .frame.screen img { object-fit: contain; }
.gallery .frame.top img { object-position: top; }
.night .gallery .frame { background: var(--night-2); }

/* credentials (home) */
.cred-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.cred { padding: 22px 28px 26px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 8px; align-content: start; min-width: 0; }
.cred .issuer { font-size: var(--t-sm); font-weight: 600; color: var(--blue-ink); }
.cred h3 { font-family: var(--display); font-weight: 600; font-size: 1.55rem; line-height: 1.08; }
.cred p:last-child { color: var(--ink-soft); }
.clients { margin-top: clamp(32px, 5vw, 52px); display: grid; gap: 14px; }
.clients ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; }
.clients li { font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.2; }
.clients li:not(:last-child)::after { content: ""; display: inline-block; width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--signal); margin: 0 0.6em; vertical-align: middle; }
@media (max-width: 900px) { .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cred-grid { grid-template-columns: minmax(0, 1fr); } .cred { padding-right: 0; } }

/* platform layer stack (web systems) */
.layers { list-style: none; display: grid; gap: 6px; counter-reset: layer 6; }
.layers li { counter-increment: layer -1; display: grid; grid-template-columns: 3.2rem minmax(0, 14rem) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 20px; background: var(--white); border: 1px solid var(--rule); border-left: 4px solid var(--blue-ink); }
.layers li::before { content: counter(layer); font-family: var(--display); font-weight: 600; font-size: 1.6rem; color: var(--signal); line-height: 1; }
.layers b { font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.1; }
.layers span { color: var(--ink-soft); }
.layers li:nth-child(1) { margin-inline: 0; }
.layers li:nth-child(2) { margin-inline: clamp(0px, 1.5vw, 16px); }
.layers li:nth-child(3) { margin-inline: clamp(0px, 3vw, 32px); }
.layers li:nth-child(4) { margin-inline: clamp(0px, 4.5vw, 48px); }
.layers li:nth-child(5) { margin-inline: clamp(0px, 6vw, 64px); }
@media (max-width: 700px) { .layers li { grid-template-columns: 2.2rem minmax(0, 1fr); } .layers span { grid-column: 2; } }
.apps { columns: 2; column-gap: 40px; }
.apps li { break-inside: avoid; margin-bottom: 0.55em; }
@media (max-width: 600px) { .apps { columns: 1; } }

/* ---------- Quick feedback survey (js/feedback.js builds the markup) ---------- */
.fb-launch {
  position: fixed; z-index: 30;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px;
  background: var(--night); color: var(--on-night); border: 1px solid var(--night-rule); border-radius: var(--radius);
  font: 600 0.92rem/1 var(--body); cursor: pointer; box-shadow: 0 10px 28px rgba(10, 19, 34, 0.28);
}
.fb-launch::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.fb-launch:hover { background: var(--night-2); }
dialog.fb {
  width: min(460px, calc(100vw - 32px)); max-height: min(680px, calc(100dvh - 32px));
  margin: auto 16px 16px auto; padding: 0; overflow: hidden;
  display: none; flex-direction: column;
  background: var(--white); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 24px 60px rgba(10, 19, 34, 0.32);
}
dialog.fb[open] { display: flex; }
dialog.fb::backdrop { background: rgba(10, 19, 34, 0.42); }
.fb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 20px 12px; }
.fb-head h2 { font: 600 1.45rem/1.05 var(--display); }
.fb-count { font-size: var(--t-sm); color: var(--ink-soft); margin-top: 4px; font-variant-numeric: tabular-nums; }
.fb-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); color: var(--ink); cursor: pointer; }
.fb-close:hover { background: var(--ground); }
.fb-bar { height: 3px; background: var(--panel); margin-inline: 20px; }
.fb-bar span { display: block; height: 100%; width: 0; background: var(--blue-ink); transition: width .25s ease; }
.fb-body { padding: 18px 20px 6px; overflow-y: auto; flex: 1 1 auto; }
.fb-set { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.fb-set legend { font: 600 1.18rem/1.3 var(--body); padding: 0; margin-bottom: 2px; }
.fb-hint { font-size: var(--t-sm); color: var(--ink-soft); margin-top: -6px; }
.fb-opts { display: grid; gap: 8px; }
.fb-opt { display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; line-height: 1.35; }
.fb-opt:hover { border-color: var(--ink-soft); }
.fb-opt input { margin: 2px 0 0; flex: none; width: 17px; height: 17px; accent-color: var(--blue-ink); }
.fb-opt:has(input:checked) { border-color: var(--blue-ink); background: color-mix(in srgb, var(--blue-ink) 7%, var(--white)); }
.fb-opt:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.fb-set textarea, .fb-field input { width: 100%; font: 400 1rem/1.45 var(--body); color: var(--ink); background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; }
.fb-set textarea { resize: vertical; min-height: 96px; }
.fb-set textarea:focus, .fb-field input:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue-ink); }
.fb-field { display: grid; gap: 5px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); }
.fb-field input[aria-invalid="true"] { border-color: var(--signal); }
.fb-error { min-height: 1.2em; font-size: var(--t-sm); color: #b3221e; }
.fb-error:empty { min-height: 0; }
.fb-done { display: grid; gap: 8px; padding-block: 18px 10px; }
.fb-done h3 { font: 600 1.6rem/1.05 var(--display); }
.fb-done p { color: var(--ink-soft); }
.fb-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--panel); }
.fb-spacer { flex: 1; }
.fb-btn { font: 600 0.95rem/1 var(--body); padding: 11px 16px; border-radius: var(--radius); border: 1.5px solid var(--blue-ink); background: var(--blue-ink); color: var(--white); cursor: pointer; }
.fb-btn:hover:not(:disabled) { background: #084f9d; border-color: #084f9d; }
.fb-btn.ghost { background: transparent; color: var(--blue-ink); }
.fb-btn.ghost:hover { background: color-mix(in srgb, var(--blue-ink) 8%, transparent); color: var(--blue-ink); }
.fb-btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) {
  dialog.fb { width: 100vw; max-width: 100vw; max-height: 88dvh; margin: auto 0 0 0; border-radius: 6px 6px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .fb-launch { padding: 10px 13px; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) { .fb-bar span { transition: none; } }
/* keep the launcher from covering the last line of the footer */
.site-foot { padding-bottom: calc(44px + 56px); }

/* IPS subsystems and deliverables */
.parts { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--ink); }
.parts dt, .parts dd { margin: 0; padding-block: 12px; border-bottom: 1px solid var(--rule); }
.parts dt { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.15; padding-right: 20px; }
.parts dd { color: var(--ink-soft); }
@media (max-width: 560px) { .parts { grid-template-columns: minmax(0, 1fr); } .parts dt { border-bottom: 0; padding-bottom: 2px; } }

/* development timeline (a real sequence of years) */
.timeline { list-style: none; display: grid; gap: 0; border-left: 2px solid var(--rule); margin-left: 6px; }
.timeline li { position: relative; display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 16px; padding: 0 0 26px 22px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--ground); }
.timeline b { font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: var(--blue-ink); }
.timeline h4 { font-weight: 600; font-size: 1.08rem; line-height: 1.3; margin-bottom: 4px; }
.timeline p { color: var(--ink-soft); }
@media (max-width: 560px) { .timeline li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* DSA fault list */
.faults { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.faults ul { list-style: none; display: grid; gap: 0; align-content: start; }
.faults li { padding: 8px 0 8px 18px; border-bottom: 1px solid var(--rule); position: relative; font-size: 0.98rem; }
.faults li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); }
@media (max-width: 560px) { .faults { grid-template-columns: minmax(0, 1fr); } }

/* module specification tables */
.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 36px; }
.spec-grid h4 { font-family: var(--display); font-weight: 600; font-size: 1.3rem; margin-bottom: 8px; }
.spec-grid .spec { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
.spec-grid .spec dt, .spec-grid .spec dd { font-size: 0.95rem; padding-block: 8px; }
.spec-grid .spec dt { padding-right: 14px; }
@media (max-width: 1080px) { .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .spec-grid { grid-template-columns: minmax(0, 1fr); } }

.spec-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .spec-grid.two { grid-template-columns: minmax(0, 1fr); } }
.bench-video { display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 478 / 850; background: var(--night); border-radius: var(--radius); }

/* about and leadership (home) */
.leaders { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 16px; }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); border-top: 1px solid var(--ink); }
.person { padding-block: 22px 28px; border-bottom: 1px solid var(--rule); display: grid; gap: 10px; align-content: start; min-width: 0; }
.person .role { font-size: var(--t-sm); font-weight: 600; color: var(--blue-ink); }
.person h4 { font-family: var(--display); font-weight: 600; font-size: 1.85rem; line-height: 1.05; }
.person p:not(.role) { max-width: 38em; }
@media (max-width: 760px) { .people { grid-template-columns: minmax(0, 1fr); } }