/* Fonts are hosted with the site, so visitors' browsers never contact a third party. */
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url("../fonts/archivo-wdth.woff2") format("woff2-variations"), url("../fonts/archivo-wdth.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/figtree-400.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/figtree-500.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/figtree-600.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/figtree-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/plexmono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/plexmono-600.woff2") format("woff2"); }
/* Layout: a dark "lab at night" band (header, hero, membrane, contact, footer) alternating with
   a pale water-blue paper band for reading sections. Stacked condensed caps for headlines,
   after the RXN HUB reference; the membrane diagram is the one signature element. */
:root {
  /* fixed brand band, identical in both themes */
  --deep: #061426;
  --deep-2: #0B2A4F;
  --deep-fg: #EAF3FB;
  --deep-dim: #9DB6CE;
  --cyan: #2FD3F2;
  --teal: #12C9A6;
  --amber: #FFA640;
  --line-deep: rgba(157, 214, 255, 0.18);

  /* reading surfaces, light */
  --bg: #F3F8FC;
  --surface: #FFFFFF;
  --fg: #0A1D33;
  --muted: #4C6178;
  --line: #D5E2EE;
  --accent: #0A8FB3;
  --accent-ink: #FFFFFF;
  --warn: #B4570B;
  --warn-soft: #FFF1E2;
  --ok-soft: #DDF7F1;
  --ok: #0B7F69;

  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Figtree", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08182B; --surface: #0E2340; --fg: #E6F0FA; --muted: #9AB0C6;
    --line: #1D3757; --accent: #2FD3F2; --accent-ink: #04121F;
    --warn: #FFB25E; --warn-soft: #2A1C0E; --ok-soft: #0C2E2A; --ok: #3EE0BE;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #08182B; --surface: #0E2340; --fg: #E6F0FA; --muted: #9AB0C6;
  --line: #1D3757; --accent: #2FD3F2; --accent-ink: #04121F;
  --warn: #FFB25E; --warn-soft: #2A1C0E; --ok-soft: #0C2E2A; --ok: #3EE0BE;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--deep);
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gut-l);
  padding-right: var(--gut-r);
}
.band-deep { background: var(--deep); color: var(--deep-fg); }

.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
h1, h2, h3 { text-wrap: balance; margin: 0; }
h2.stack {
  font-family: var(--display);
  font-stretch: 72%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 0.96;
  letter-spacing: 0.005em;
}
.lede { font-size: 19px; color: var(--muted); max-width: 62ch; margin: 0; }
.band-deep .lede { color: var(--deep-dim); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-weight: 700; font-size: 16px;
  padding: 13px 22px; border-radius: 999px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--cyan); color: #04121F; }
.btn-primary:hover { background: #6FE2F7; }
.btn-ghost { border-color: var(--line-deep); color: var(--deep-fg); background: transparent; }
.btn-ghost:hover { border-color: var(--cyan); }
.arrow { font-family: var(--mono); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: rgba(6, 20, 38, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-deep);
}
.nav {
  display: flex; align-items: center; gap: 28px;
  padding-block: 12px;
}
.nav .brand { display: flex; align-items: center; flex-shrink: 0; }
.nav .brand img { height: 40px; width: auto; display: block; }
.nav ul {
  display: flex; gap: 26px; list-style: none; margin: 0 0 0 auto; padding: 0;
  font-family: var(--display); font-stretch: 85%; font-weight: 700;
  font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
}
.nav ul a { color: var(--deep-dim); text-decoration: none; }
.nav ul a:hover { color: var(--deep-fg); }
.nav .btn { padding: 9px 18px; font-size: 15px; }
@media (max-width: 880px) { .nav ul { display: none; } .nav .btn { margin-left: auto; } }
@media (max-width: 420px) { .nav .brand img { height: 32px; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 20% 45%, rgba(6,20,38,0.92) 0%, rgba(6,20,38,0.55) 55%, rgba(6,20,38,0) 100%),
    linear-gradient(130deg, rgba(11,60,116,0.0) 0%, rgba(4,11,24,0.35) 100%);
}
.hero .wrap {
  position: relative; z-index: 1;
  padding-block: clamp(72px, 11vw, 140px) clamp(64px, 9vw, 120px);
}
.hero .eyebrow { color: var(--cyan); margin-bottom: 22px; }
.hero h1 {
  font-family: var(--display);
  font-stretch: 68%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(52px, 10.5vw, 132px);
  line-height: 0.88;
  letter-spacing: 0.002em;
  max-width: 11ch;
}
.hero h1 .glow { color: var(--cyan); }
.hero h1 .thin { font-weight: 500; color: var(--deep-dim); }
.hero .lede { margin-top: 28px; font-size: 21px; max-width: 46ch; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- pillars (after "offering access to") ---------- */
.pillars { background: var(--deep-2); color: var(--deep-fg); border-top: 1px solid var(--line-deep); }
.pillars .wrap { padding-block: 44px; }
.pillars .eyebrow { color: var(--deep-dim); margin-bottom: 22px; }
.pillar-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--line-deep);
}
.pillar { padding: 22px 22px 6px 0; border-right: 1px solid var(--line-deep); min-width: 0; }
.pillar + .pillar { padding-left: 22px; }
.pillar:last-child { border-right: 0; }
.pillar .sym {
  font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--cyan);
  display: block; margin-bottom: 10px;
}
.pillar h3 {
  font-family: var(--display); font-stretch: 80%; font-weight: 800;
  font-size: 23px; text-transform: uppercase; line-height: 1.05; letter-spacing: 0.01em;
}
.pillar p { margin: 8px 0 0; color: var(--deep-dim); font-size: 15px; line-height: 1.5; }
@media (max-width: 860px) {
  .pillar-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar { border-right: 0; padding-left: 0 !important; border-bottom: 1px solid var(--line-deep); padding-bottom: 18px; }
  .pillar:nth-child(odd) { border-right: 1px solid var(--line-deep); padding-right: 18px; }
  .pillar:nth-child(even) { padding-left: 18px !important; }
}
@media (max-width: 460px) {
  .pillar-row { grid-template-columns: 1fr; }
  .pillar:nth-child(odd) { border-right: 0; padding-right: 0; }
  .pillar:nth-child(even) { padding-left: 0 !important; }
}

/* ---------- mission ---------- */
.mission .wrap { padding-block: clamp(72px, 9vw, 116px); display: grid; gap: 30px; }
.mission .eyebrow { color: var(--accent); }
.mission blockquote {
  margin: 0;
  font-family: var(--display); font-stretch: 88%; font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.18;
  max-width: 30ch; text-wrap: balance;
}
.mission blockquote em { font-style: normal; color: var(--accent); font-weight: 700; }
.mission .row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.mission .row p { margin: 0; color: var(--muted); max-width: 52ch; }
.btn-solid { background: var(--accent); color: var(--accent-ink); }
.btn-solid:hover { filter: brightness(1.08); }

/* ---------- membrane ---------- */
.membrane { position: relative; overflow: hidden; }
.membrane .wrap { padding-block: clamp(72px, 9vw, 120px); }
.membrane .head { display: grid; gap: 18px; margin-bottom: 44px; }
.membrane .eyebrow { color: var(--teal); }
.membrane-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
@media (max-width: 920px) { .membrane-grid { grid-template-columns: 1fr; } }
.diagram {
  border: 1px solid var(--line-deep); border-radius: 18px;
  background: linear-gradient(180deg, rgba(11,42,79,0.55), rgba(6,20,38,0.2));
  padding: 14px; overflow-x: auto;
}
.diagram svg { display: block; width: 100%; height: auto; min-width: 520px; }
.diagram figcaption {
  font-family: var(--mono); font-size: 13px; color: var(--deep-dim);
  padding: 10px 6px 2px; letter-spacing: 0.02em;
}
.props { display: grid; gap: 0; }
.prop { padding: 20px 0; border-top: 1px solid var(--line-deep); display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: baseline; }
.prop:last-child { border-bottom: 1px solid var(--line-deep); }
.prop .k {
  font-family: var(--display); font-stretch: 70%; font-weight: 900;
  font-size: 40px; line-height: 1; color: var(--cyan);
}
.prop h3 {
  font-family: var(--display); font-stretch: 82%; font-weight: 800;
  font-size: 21px; text-transform: uppercase; letter-spacing: 0.02em;
}
.prop p { margin: 4px 0 0; color: var(--deep-dim); font-size: 16px; }

/* proton and gas motion; resting positions are mid-path so the still frame reads */
.proton { animation: cross 3.2s linear infinite; }
.proton.d2 { animation-delay: -0.8s; }
.proton.d3 { animation-delay: -1.6s; }
.proton.d4 { animation-delay: -2.4s; }
@keyframes cross {
  0% { transform: translateX(-150px); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(150px); opacity: 0; }
}
.gas-l { animation: bounceL 2.6s ease-in-out infinite; }
.gas-r { animation: bounceR 2.6s ease-in-out infinite; }
.gas-l.d2, .gas-r.d2 { animation-delay: -1.3s; }
@keyframes bounceL { 0%,100% { transform: translateX(-120px); } 45% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@keyframes bounceR { 0%,100% { transform: translateX(120px); } 45% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
  .proton, .gas-l, .gas-r { animation: none; }
}

/* status band */
.status {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line-deep); border-radius: 16px; overflow: hidden;
}
.status > div { padding: 22px 24px; min-width: 0; }
.status > div + div { border-left: 1px solid var(--line-deep); }
.status .where {
  font-family: var(--display); font-stretch: 80%; font-weight: 800;
  text-transform: uppercase; font-size: 22px; letter-spacing: 0.02em;
}
.pill {
  display: inline-block; margin-top: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.pill.done { background: rgba(18,201,166,0.16); color: var(--teal); border: 1px solid rgba(18,201,166,0.45); }
.pill.test { background: rgba(255,166,64,0.12); color: var(--amber); border: 1px solid rgba(255,166,64,0.45); }
@media (max-width: 760px) {
  .status { grid-template-columns: 1fr; }
  .status > div + div { border-left: 0; border-top: 1px solid var(--line-deep); }
}

/* ---------- PFAS ---------- */
.pfas .wrap { padding-block: clamp(72px, 9vw, 120px); }
.pfas .head { display: grid; gap: 18px; margin-bottom: 40px; }
.pfas .eyebrow { color: var(--warn); }
.bond {
  display: inline-flex; align-items: center; gap: 0;
  font-family: var(--mono); font-weight: 600; font-size: 20px; margin-top: 6px;
}
.bond .atom {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--warn); color: var(--fg); background: var(--warn-soft);
}
.bond .stick { width: 42px; height: 5px; background: var(--warn); border-radius: 3px; }
.bond-note { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-left: 14px; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 820px) { .compare { grid-template-columns: 1fr; } }
.col {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 30px; min-width: 0;
}
.col.problem { border-top: 5px solid var(--warn); }
.col.answer { border-top: 5px solid var(--ok); }
.col h3 {
  font-family: var(--display); font-stretch: 80%; font-weight: 800;
  text-transform: uppercase; font-size: 26px; letter-spacing: 0.01em; margin-bottom: 14px;
}
.col.problem h3 { color: var(--warn); }
.col.answer h3 { color: var(--ok); }
.col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.col li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.col li::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; margin-top: 10px;
  background: currentColor;
}
.col.problem li::before { color: var(--warn); }
.col.answer li::before { color: var(--ok); }
.col li strong { display: block; }
.col li span { color: var(--muted); font-size: 16px; }
.pfas .note { margin: 26px 0 0; color: var(--muted); font-size: 16px; max-width: 70ch; }

/* ---------- cycle ---------- */
.cycle { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cycle .wrap { padding-block: clamp(64px, 8vw, 104px); }
.cycle .head { display: grid; gap: 16px; margin-bottom: 40px; }
.cycle .eyebrow { color: var(--accent); }
.chain {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items: stretch; gap: 14px;
}
.node {
  border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px;
  background: var(--bg); min-width: 0;
}
.node .f { font-family: var(--mono); font-weight: 600; font-size: 22px; color: var(--accent); }
.node h3 { font-family: var(--display); font-stretch: 82%; font-weight: 800; text-transform: uppercase; font-size: 20px; margin-top: 8px; }
.node p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.step {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-width: 120px;
}
.step .via {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.step .ar { font-family: var(--mono); font-size: 26px; color: var(--accent); line-height: 1; }
.step .pem {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ok); background: var(--ok-soft);
  padding: 3px 8px; border-radius: 999px;
}
@media (max-width: 900px) {
  .chain { grid-template-columns: 1fr; }
  .step { flex-direction: row; min-width: 0; padding-block: 2px; }
  .step .ar { transform: rotate(90deg); }
}
sub { font-size: 0.68em; line-height: 0; }
sup { font-size: 0.68em; line-height: 0; }

/* ---------- applications ---------- */
.apps .wrap { padding-block: clamp(72px, 9vw, 120px); }
.apps .head { display: grid; gap: 16px; margin-bottom: 40px; }
.apps .eyebrow { color: var(--accent); }
.app-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; border-top: 2px solid var(--fg);
}
.app { padding: 22px 22px 26px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.app:not(:nth-child(4n)) { border-right: 1px solid var(--line); }
.app:not(:nth-child(4n+1)) { padding-left: 22px; }
.app .sector {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.app h3 {
  font-family: var(--display); font-stretch: 80%; font-weight: 800;
  text-transform: uppercase; font-size: 22px; line-height: 1.05; margin-top: 8px;
}
.app p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
@media (max-width: 960px) {
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app { border-right: 0 !important; padding-left: 0 !important; padding-right: 0; }
  .app:nth-child(odd) { border-right: 1px solid var(--line) !important; padding-right: 18px; }
  .app:nth-child(even) { padding-left: 18px !important; }
}
@media (max-width: 520px) {
  .app-grid { grid-template-columns: 1fr; }
  .app:nth-child(odd) { border-right: 0 !important; padding-right: 0; }
  .app:nth-child(even) { padding-left: 0 !important; }
}

.feature-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; margin-top: 40px; }
@media (max-width: 860px) { .feature-row { grid-template-columns: 1fr; } }
.feature {
  border-radius: 20px; padding: 30px 32px; min-width: 0;
  background: var(--deep); color: var(--deep-fg); position: relative; overflow: hidden;
}
.feature .eyebrow { color: var(--amber); }
.feature.cc .eyebrow { color: var(--teal); }
.feature h3 {
  font-family: var(--display); font-stretch: 74%; font-weight: 900;
  text-transform: uppercase; font-size: clamp(30px, 3.4vw, 40px); line-height: 0.98; margin: 12px 0 14px;
}
.feature p { margin: 0 0 12px; color: var(--deep-dim); font-size: 16px; }
.route { border-left: 3px solid var(--line-deep); padding-left: 14px; margin-top: 14px; }
.route strong { color: var(--deep-fg); display: block; }
.feature .tag {
  display: inline-block; margin-top: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,166,64,0.12); color: var(--amber); border: 1px solid rgba(255,166,64,0.45);
}
.flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px;
  font-family: var(--mono); font-size: 14px; font-weight: 600;
}
.flow span.b { border: 1px solid var(--line-deep); border-radius: 999px; padding: 5px 12px; color: var(--deep-fg); }
.flow span.a { color: var(--deep-dim); }

/* ---------- contact ---------- */
.contact { position: relative; overflow: hidden; }
.contact .wrap { padding-block: clamp(80px, 10vw, 128px); display: grid; gap: 26px; position: relative; z-index: 1; }
.contact .eyebrow { color: var(--cyan); }
.contact h2.stack { font-size: clamp(42px, 7vw, 92px); max-width: 13ch; }
.contact h2.stack span { color: var(--cyan); }
.mailrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.mail {
  font-family: var(--mono); font-weight: 600; font-size: clamp(20px, 2.6vw, 28px);
  color: var(--deep-fg); user-select: all; padding: 10px 18px;
  border: 1px solid var(--line-deep); border-radius: 12px; background: rgba(11,42,79,0.6);
}
.copy-msg { font-family: var(--mono); font-size: 13px; color: var(--teal); min-height: 1.2em; }
.asks { display: flex; flex-wrap: wrap; gap: 10px; }
.asks span {
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--deep-dim);
  border: 1px solid var(--line-deep); padding: 6px 12px; border-radius: 999px;
}

/* ---------- footer ---------- */
.site-footer { background: #040D1A; color: var(--deep-dim); border-top: 1px solid var(--line-deep); }
.site-footer .wrap {
  padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 32px;
}
.site-footer img { height: 38px; width: auto; display: block; }
.site-footer h4 {
  margin: 0 0 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--deep-fg);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--deep-fg); }
.site-footer .small { font-size: 14px; margin: 14px 0 0; max-width: 36ch; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--line-deep); padding-top: 18px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 720px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .site-footer .wrap > div:first-child { grid-column: 1 / -1; } }

/* formerly inline style attributes */
.diagram { margin: 0; }
.net-soft { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.mail-link { color: inherit; text-decoration: none; }

/* 404 page */
.notfound { min-height: 100vh; display: flex; align-items: center; }
.notfound .wrap { display: grid; gap: 22px; padding-block: 64px; justify-items: start; }
.notfound .brand img { height: 44px; width: auto; display: block; }
.notfound .eyebrow { color: var(--cyan); margin: 18px 0 0; }
.notfound h1.stack { font-family: var(--display); font-stretch: 70%; font-weight: 900; text-transform: uppercase; font-size: clamp(48px, 9vw, 104px); line-height: 0.9; }