/* ==========================================================================
   Spherical website — shared layout / chrome on top of tokens.css
   ========================================================================== */

* { box-sizing: border-box; }

html, body { background: var(--bg-1); color: var(--fg-1); }
body { min-height: 100vh; }

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

a { color: inherit; }

/* ---------- Container ----------------------------------------------------- */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Top nav ------------------------------------------------------- */
.site-nav {
  border-bottom: 1px solid var(--sph-black);
  background: var(--sph-white);
  position: sticky; top: 0; z-index: 10;
}
.site-nav .wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  height: 80px;
  gap: 48px;
}
.site-nav .brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.site-nav .brand img { height: 40px; }
.site-nav .links {
  display: flex; gap: 36px;
  justify-content: flex-end;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
}
.site-nav .links a {
  text-decoration: none;
  padding: 4px 0;
  color: var(--sph-n-600);
  position: relative;
}
.site-nav .links a:hover { color: var(--sph-black); }
.site-nav .links a[aria-current="page"] {
  color: var(--sph-black);
}
.site-nav .links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -30px;
  height: 1.5px; background: var(--sph-black);
}

/* ---------- Sections ------------------------------------------------------ */
section.band { padding: 96px 0; border-bottom: 1px solid var(--sph-black); }
section.band.thin { padding: 56px 0; }
section.band.invert { background: var(--sph-black); color: var(--sph-white); }
section.band.invert .muted { color: var(--sph-n-400); }
section.band.accent { background: var(--sph-n-100); }

.eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sph-n-500);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; display: block; width: 18px; height: 1px; background: currentColor;
}
.invert .eyebrow { color: var(--sph-n-400); }

.muted { color: var(--sph-n-600); }

/* ---------- Hero ---------------------------------------------------------- */
.hero {
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--sph-black);
}
.hero .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 24px 0 0;
}
.hero h1 em { font-style: italic; }
.hero .hero-image {
  display: block;
  width: 100%;
  height: auto;
}
.hero .lede {
  margin-top: 40px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--sph-n-600);
  max-width: 640px;
}
.hero .lede p { margin: 0 0 12px; }
.hero .lede p:last-child { margin-bottom: 0; }
.hero .lede .stack { padding-left: 1.5em; }
.hero .meta-row {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--sph-black);
  padding-top: 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sph-n-600);
}
.hero .meta-row b { display: block; color: var(--sph-black); font-weight: 500; padding-bottom: 4px; }

/* ---------- Trusted-by row (hero footer) ---------------------------------- */
.hero .trusted-by {
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid var(--sph-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.hero .trusted-by .label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sph-black);
  white-space: nowrap;
  font-weight: 500;
}
.hero .trusted-by .logos {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.hero .trusted-by .logos li { display: flex; align-items: center; }
.hero .trusted-by .logos img {
  height: 48px; width: auto; display: block;
  filter: grayscale(1);
  opacity: 0.7;
  transition: opacity 160ms var(--ease-standard), filter 160ms var(--ease-standard);
}
.hero .trusted-by .logos img:hover { filter: grayscale(0); opacity: 1; }

/* Per-logo optical balancing. Square / icon-only marks need a height bump
   so they read at the same visual weight as the wide wordmarks. Tune by eye. */
.hero .trusted-by .logos img[alt="DCUBED"]      { height: 72px; }
.hero .trusted-by .logos img[alt="EDF"],
.hero .trusted-by .logos img[alt="European Defence Fund"] { height: 56px; }
.hero .trusted-by .logos .placeholder {
  height: 32px; min-width: 96px;
  padding: 0 14px;
  border: 1px dashed var(--sph-n-300);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--sph-n-400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Brand logo icon (the 9-bar mark) ----------------------------- */
/*  Uses the official asset from StudioAirport/Handover/002 Logo Package/
    004 Logo Icon, trimmed of transparent padding. Aspect ratio ~7.56:1.   */
.logo-icon {
  display: block;
  height: 28px;
  width: auto;
}
.logo-icon.legal-icon { height: 18px; opacity: 0.65; }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 13px/1 var(--font-sans);
  padding: 14px 22px;
  border: 1px solid var(--sph-black);
  background: var(--sph-white);
  color: var(--sph-black);
  text-decoration: none;
  border-radius: 0;
  transition: background 160ms var(--ease-standard), color 160ms var(--ease-standard);
}
.btn:hover { background: var(--sph-yellow); }
.btn.primary { background: var(--sph-black); color: var(--sph-white); }
.btn.primary:hover { background: var(--sph-n-700); }
.invert .btn { border-color: var(--sph-white); background: transparent; color: var(--sph-white); }
.invert .btn:hover { background: var(--sph-white); color: var(--sph-black); }
.invert .btn.primary { background: var(--sph-yellow-ink); border-color: var(--sph-yellow-ink); color: var(--sph-black); }

/* ---------- Section header ----------------------------------------------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1.5px solid var(--sph-black);
  padding-top: 24px;
  margin-bottom: 56px;
}
.section-head .num {
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.04em;
  color: var(--sph-n-500); text-transform: uppercase;
}
.section-head h2 {
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(36px, 4vw, 56px); line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0; max-width: 880px;
}
.invert .section-head { border-top-color: var(--sph-white); }
.invert .section-head .num { color: var(--sph-n-400); }

/* ---------- Two-column body ---------------------------------------------- */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.cols-2.shifted { grid-template-columns: 240px 1fr; }
.cols-2 p { font-size: 17px; line-height: 1.55; color: var(--sph-n-700); margin: 0 0 16px; max-width: 60ch; }
.invert .cols-2 p { color: var(--sph-n-200); }

/* ---------- Spec table --------------------------------------------------- */
table.spec {
  width: 100%; border-collapse: collapse;
}
table.spec thead th {
  text-align: left; font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sph-n-500);
  border-bottom: 1px solid var(--sph-black);
  padding: 12px 14px;
}
table.spec thead th:first-child { padding-left: 0; }
table.spec td {
  padding: 18px 14px; border-bottom: 1px solid var(--sph-n-200);
  font-size: 16px;
  vertical-align: top;
}
table.spec td:first-child { padding-left: 0; }
table.spec td.mono { font-family: var(--font-serif); font-size: 14px; color: var(--sph-n-700); white-space: nowrap; }
table.spec td.name { font-weight: 500; }
table.spec td .desc { display: block; font-size: 13px; color: var(--sph-n-500); margin-top: 4px; }
.invert table.spec thead th { color: var(--sph-n-400); border-bottom-color: var(--sph-white); }
.invert table.spec td { border-bottom-color: var(--sph-n-700); }
.invert table.spec td.mono { color: var(--sph-n-300); }

/* ---------- Capability cards --------------------------------------------- */
.tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--sph-black);
}
.tile {
  padding: 32px;
  border-right: 1px solid var(--sph-black);
  min-height: 280px;
  display: flex; flex-direction: column; gap: 14px;
}
.tile:last-child { border-right: 0; }
.tile .num {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.06em;
  color: var(--sph-n-500); text-transform: uppercase;
}
.tile h3 {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 36px; line-height: 1.05; letter-spacing: -0.01em;
  margin: 0;
}
.tile p { font-size: 14px; line-height: 1.55; color: var(--sph-n-600); margin: 0; max-width: 36ch; }
.tile .foot { margin-top: auto; font-family: var(--font-sans); font-size: 11px; color: var(--sph-n-500); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Numbered list ------------------------------------------------ */
.list-num { display: grid; grid-template-columns: 60px 1fr; gap: 12px 24px; row-gap: 28px; }
.list-num .mk { font-family: var(--font-sans); font-size: 12px; color: var(--sph-n-500); padding-top: 8px; letter-spacing: 0.04em; }
.list-num h4 { font: 500 22px/1.2 var(--font-sans); margin: 0 0 6px; }
.list-num p { font-size: 15px; line-height: 1.5; color: var(--sph-n-600); margin: 0; max-width: 60ch; }
.list-num.cols-2 { grid-template-columns: 1fr 1fr; column-gap: 48px; }
.list-num.cols-2 > .item { display: grid; grid-template-columns: 60px 1fr; gap: 12px 24px; }

/* ---------- Footer ------------------------------------------------------- */
.site-foot {
  background: var(--sph-black);
  color: var(--sph-white);
  padding: 40px 0 24px;
}
.site-foot .cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  border-top: 1px solid var(--sph-n-700);
  padding-top: 32px;
}
.site-foot .col h5 {
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sph-n-400); margin: 0 0 16px;
}
.site-foot .col a {
  display: block; padding: 6px 0;
  font-size: 14px; color: var(--sph-white); text-decoration: none;
}
.site-foot .col a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.site-foot .lockup {
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
.site-foot .lockup .tag {
  font-family: var(--font-serif); font-size: 22px; font-weight: 400; max-width: 320px; line-height: 1.25;
  color: var(--sph-n-200);
}
.site-foot .legal {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--sph-n-700);
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.04em;
  color: var(--sph-n-500); text-transform: uppercase;
}

/* ---------- Brand grain texture (styleguide §1.4 + §4.3) ----------------- */
/*  Inline SVG fractal-noise overlay. Auto-applied to dark panels (footer +
    inverted bands). Use the .sph-grain utility for one-off applications.   */
.sph-grain,
.site-foot,
section.band.invert {
  position: relative;
  isolation: isolate;
}
.sph-grain > *,
.site-foot > *,
section.band.invert > * {
  position: relative;
  z-index: 1;
}
.sph-grain::after,
.site-foot::after,
section.band.invert::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  z-index: 0;
}

/* ---------- Misc utilities ----------------------------------------------- */
.hairline-top { border-top: 1px solid var(--sph-black); padding-top: 32px; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1.5px solid var(--sph-black); }
.kpi-cell {
  padding: 32px 24px 32px 0;
  border-right: 1px solid var(--sph-n-200);
  display: flex; flex-direction: column; gap: 8px;
}
.kpi-cell:last-child { border-right: 0; }
.kpi-cell .lbl { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sph-n-500); font-weight: 500; }
.kpi-cell .num { font-family: var(--font-sans); font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-cell .num small { font-size: 22px; color: var(--sph-n-500); padding-left: 6px; }
.kpi-cell .txt { font-size: 13px; color: var(--sph-n-600); line-height: 1.45; max-width: 200px; }
.invert .kpi-cell { border-right-color: var(--sph-n-700); }
.invert .kpi-cell .lbl { color: var(--sph-n-400); }
.invert .kpi-cell .txt { color: var(--sph-n-300); }

.fig-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
  margin-bottom: 56px;
}
.fig-row .fig {
  aspect-ratio: 4/3;
  background-color: var(--sph-n-50);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--sph-n-300);
}
.fig-row .cap {
  font-family: var(--font-sans); font-size: 11px; color: var(--sph-n-500);
  letter-spacing: 0.04em; margin-top: 12px;
}
.fig-row .cap b { color: var(--sph-black); font-weight: 500; padding-right: 10px; }
.invert .fig-row .fig {
  background-color: var(--sph-n-800);
  border-color: var(--sph-n-700);
}
.invert .fig-row .cap { color: var(--sph-n-400); }
.invert .fig-row .cap b { color: var(--sph-white); }

/* ---------- Inline link arrow -------------------------------------------- */
.arr {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  font-weight: 500;
}
.arr:hover { background: var(--sph-yellow); }
.invert .arr:hover { background: var(--sph-yellow-ink); color: var(--sph-black); padding: 2px 6px; border-bottom-color: transparent; }

/* ---------- PCDU overview (intro: copy + figure) ------------------------- */
.pcdu-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
  margin-bottom: 64px;
}
.pcdu-overview .copy { display: flex; flex-direction: column; }
.pcdu-overview .copy p {
  font-size: 17px; line-height: 1.55; color: var(--sph-n-700);
  margin: 0 0 16px; max-width: 60ch;
}
.pcdu-overview .fig {
  background-color: var(--sph-n-100);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--sph-n-300);
  min-height: 320px;
}
.pcdu-overview figure { margin: 0; }
.pcdu-overview figcaption {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--sph-n-500);
  margin-top: 12px;
}
.pcdu-overview figcaption b {
  font-weight: 500; color: var(--sph-black); padding-right: 10px;
}
.invert .pcdu-overview figcaption { color: var(--sph-n-400); }
.invert .pcdu-overview figcaption b { color: var(--sph-white); }
.pcdu-overview .fig.photo {
  background-image:
    url('assets/pcdu-housing.png'),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.25 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: contain, 220px 220px;
  background-repeat: no-repeat, repeat;
  background-position: center, center;
  border-color: var(--sph-black);
}
.invert .pcdu-overview .copy p { color: var(--sph-n-200); }
.invert .pcdu-overview .fig {
  background-color: var(--sph-n-800);
  border-color: var(--sph-n-700);
}

/* ---------- Catalogue intro (copy + framed render) ----------------------- */
.catalogue-intro {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 56px;
}
.catalogue-intro .copy { display: flex; flex-direction: column; }
.catalogue-intro .copy p {
  font-size: 17px; line-height: 1.55; color: var(--sph-n-700);
  margin: 0 0 16px; max-width: 60ch;
}
.invert .catalogue-intro .copy p { color: var(--sph-n-200); }

.catalogue-hero {
  margin: 0;
  border: 1px solid var(--sph-n-300);
  background: var(--sph-n-50);
}
.catalogue-hero img { display: block; width: 100%; height: auto; }
.catalogue-hero figcaption {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--sph-n-500);
  padding: 12px 16px;
  border-top: 1px solid var(--sph-n-200);
}
.catalogue-hero figcaption b {
  font-weight: 500;
  color: var(--sph-black);
  padding-right: 10px;
}
.invert .catalogue-hero {
  border-color: var(--sph-n-700);
  background: var(--sph-black);
}
.invert .catalogue-hero figcaption {
  color: var(--sph-n-400);
  border-top-color: var(--sph-n-700);
}
.invert .catalogue-hero figcaption b { color: var(--sph-white); }

/* ---------- Vertical accordion (PCDU modules) ---------------------------- */
.modules { border-top: 1px solid var(--sph-black); }
.modules details { border-bottom: 1px solid var(--sph-n-200); }
.modules details[open] { border-bottom-color: var(--sph-black); }

.modules summary {
  display: grid;
  grid-template-columns: 80px 1fr auto 16px;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
  color: var(--sph-black);
  transition: color 160ms var(--ease-standard);
}
.modules summary::-webkit-details-marker { display: none; }
.modules summary::marker { content: ""; }
.modules summary:hover .mk,
.modules summary:hover .meta { color: var(--sph-black); }

.modules summary .mk {
  font-family: var(--font-sans);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--sph-n-500);
  transition: color 160ms var(--ease-standard);
}
.modules summary .title {
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1; letter-spacing: -0.01em;
}
.modules summary .meta {
  font-family: var(--font-sans);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--sph-n-500);
  transition: color 160ms var(--ease-standard);
}
.modules summary .chev {
  width: 14px; height: 14px;
  position: relative;
  align-self: center;
}
.modules summary .chev::before,
.modules summary .chev::after {
  content: ""; position: absolute; background: currentColor;
}
.modules summary .chev::before { top: 6.5px; left: 0; right: 0; height: 1px; }
.modules summary .chev::after {
  top: 0; bottom: 0; left: 6.5px; width: 1px;
  transition: transform 220ms var(--ease-standard);
}
.modules details[open] summary .chev::after { transform: scaleY(0); }

.modules .content { padding: 8px 0 40px 104px; }
.modules .content .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.modules .content p {
  font-size: 16px; line-height: 1.55; color: var(--sph-n-700);
  margin: 0 0 12px; max-width: 60ch;
}
.modules .content p.lead {
  font-weight: 500; color: var(--sph-black); margin-bottom: 16px;
}
.modules .content ul {
  margin: 0; padding-left: 18px; max-width: 60ch;
  font-size: 16px; line-height: 1.55; color: var(--sph-n-700);
}
.modules .content ul li { margin-bottom: 6px; }
.modules .content ul li:last-child { margin-bottom: 0; }
.invert .modules .content p { color: var(--sph-n-300); }
.invert .modules .content p.lead { color: var(--sph-white); }
.invert .modules .content ul { color: var(--sph-n-300); }

/* Yellow accent: subtle on light, brighter on dark */
.modules summary:hover { background: var(--sph-yellow); }
.modules details[open] summary .mk { color: var(--sph-black); }

/* Invert overrides (when the band is dark) */
.invert .modules { border-top-color: var(--sph-white); }
.invert .modules details { border-bottom-color: var(--sph-n-700); }
.invert .modules details[open] { border-bottom-color: var(--sph-white); }
.invert .modules summary { color: var(--sph-white); }
.invert .modules summary .mk,
.invert .modules summary .meta { color: var(--sph-n-400); }
.invert .modules summary:hover { background: transparent; color: var(--sph-yellow-ink); }
.invert .modules summary:hover .mk,
.invert .modules summary:hover .meta { color: var(--sph-yellow-ink); }
.invert .modules details[open] summary .mk { color: var(--sph-yellow-ink); }
.invert .modules .content p { color: var(--sph-n-200); }

/* Sliding open/close — modern browsers (Chrome 131+, Safari 18.2+).
   Older browsers degrade to instant toggle, which is still functional. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .modules details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 280ms var(--ease-standard),
                content-visibility 280ms allow-discrete;
  }
  .modules details[open]::details-content { block-size: auto; }
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  .site-nav .wrap { gap: 16px; }
  .site-nav .links { gap: 20px; font-size: 12px; }
  .hero { padding: 64px 0; }
  .hero .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero .meta-row { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .section-head { margin-bottom: 32px; }
  .list-num.cols-2 { grid-template-columns: 1fr; }
  .cols-2, .cols-2.shifted { grid-template-columns: 1fr; gap: 24px; }
  .tiles { grid-template-columns: 1fr; }
  .tile { border-right: 0; border-bottom: 1px solid var(--sph-black); }
  .tile:last-child { border-bottom: 0; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .fig-row { grid-template-columns: 1fr; }
  .site-foot .cols { grid-template-columns: 1fr 1fr; }
  section.band { padding: 56px 0; }
  .pcdu-overview { grid-template-columns: 1fr; gap: 24px; }
  .pcdu-overview .fig { min-height: 220px; }
  .catalogue-intro { grid-template-columns: 1fr; gap: 24px; }
  .modules summary { grid-template-columns: 56px 1fr 14px; gap: 16px; }
  .modules summary .meta { display: none; }
  .modules .content { padding-left: 0; }
  .modules .content .cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   Homepage treatment (index.html only — scoped to body.home)
   Chip-die hero figure with grain + scan-line, staggered text reveal,
   button micro-interactions, on the standard white ground.
   Honours prefers-reduced-motion (everything resolves to its resting state).
   ========================================================================== */

/* ---- Inverted monochrome palette (homepage only) ------------------------ */
/* Swap the black/white tokens + neutral scale to their complements so the
   whole front page flips to white-on-black — nav, hero, footer included.
   The yellow accent is kept; raster images (the chip die, logo PNGs) are
   handled below since tokens don't touch them. Other pages are untouched. */
html:has(body.home) {
  --sph-black: #FFFFFF;
  --sph-white: #000000;
  --sph-n-0:   #000000;
  --sph-n-50:  #141413;
  --sph-n-100: #2A2A28;
  --sph-n-200: #4D4D49;
  --sph-n-300: #7A7A74;
  --sph-n-400: #A8A8A0;
  --sph-n-500: #CFCFC7;
  --sph-n-600: #E5E5DE;
  --sph-n-700: #F2F2ED;
  --sph-n-800: #FAFAF7;
  --sph-n-900: #FFFFFF;
  background: #000000;                    /* ground below the footer — kept black */
}
body.home { background: #000000; }                   /* black ground */
body.home .hero { background: var(--sph-white); }    /* black hero (= inverted white) */

/* Footer stays the original black bar: reset its tokens to non-inverted, so
   it keeps black ground + white text + white 9-bar icon. */
body.home .site-foot {
  --sph-black:#000000; --sph-white:#FFFFFF;
  --sph-n-0:#FFFFFF; --sph-n-50:#FAFAF7; --sph-n-100:#F2F2ED; --sph-n-200:#E5E5DE;
  --sph-n-300:#CFCFC7; --sph-n-400:#A8A8A0; --sph-n-500:#7A7A74; --sph-n-600:#4D4D49;
  --sph-n-700:#2A2A28; --sph-n-800:#141413; --sph-n-900:#000000;
}

/* Raster assets the token swap can't reach: */
/* nav wordmark (black SVG) → white on the now-black nav */
body.home .site-nav .brand img { filter: invert(1); }
/* trusted-by logos → white silhouettes on the black hero */
body.home .hero .trusted-by .logos img { filter: brightness(0) invert(1); opacity: 0.6; }
body.home .hero .trusted-by .logos img:hover { filter: brightness(0) invert(1); opacity: 1; }

/* ---- Staggered entrance ------------------------------------------------- */
body.home .rise {
  opacity: 0;
  transform: translateY(16px);
  animation: heroRise var(--dur-xl) var(--ease-entrance) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes heroRise { to { opacity: 1; transform: none; } }

/* ---- Hero figure ------------------------------------------------------- */
body.home .hero .hero-media { align-self: center; }
/* Give the hero video more room (squarer 4:3 clip) and let it bleed past its
   column toward the right edge. The hero clips the overflow, so there's no
   horizontal page scroll. Desktop only — mobile keeps the base single column. */
@media (min-width: 901px) {
  body.home .hero .hero-grid { grid-template-columns: 0.85fr 1.15fr; gap: 48px; }
  body.home .hero .hero-media { display: flex; justify-content: flex-end; }
  /* Cap by height so any aspect (square / 4:3 / 16:9) stays large but balanced. */
  body.home .hero .hero-media .hero-image { width: auto; max-width: 100%; max-height: 600px; }
}

/* ---- Button micro-interaction (arrow nudge) ----------------------------- */
body.home .hero-cta { display: flex; gap: 12px; margin-top: 40px; }
body.home .btn .ar { display: inline-block; transition: transform var(--dur-m) var(--ease-standard); }
body.home .btn:hover .ar { transform: translateX(4px); }

/* ---- Trusted-by: gentle load fade-in ------------------------------------ */
body.home .hero .trusted-by .logos li {
  opacity: 0; animation: heroRise var(--dur-l) var(--ease-standard) forwards;
}
body.home .hero .trusted-by .logos li:nth-child(1) { animation-delay: 720ms; }
body.home .hero .trusted-by .logos li:nth-child(2) { animation-delay: 780ms; }
body.home .hero .trusted-by .logos li:nth-child(3) { animation-delay: 840ms; }
body.home .hero .trusted-by .logos li:nth-child(4) { animation-delay: 900ms; }
body.home .hero .trusted-by .logos li:nth-child(5) { animation-delay: 960ms; }
body.home .hero .trusted-by .logos li:nth-child(6) { animation-delay: 1020ms; }

/* ---- Reduced motion: resolve everything to its resting state ------------- */
@media (prefers-reduced-motion: reduce) {
  body.home .rise,
  body.home .hero .trusted-by .logos li { opacity: 1; transform: none; animation: none; }
}

/* ==========================================================================
   Brand type alignment (BRAND.md §3.2)
   The former --font-mono labels now use Unica; micro-labels take Medium
   (uppercase, letter-spaced) per the brand. Product codes / spec values use
   EK Modena (var(--font-serif)); captions stay Unica Regular.
   ========================================================================== */
.hero .meta-row,
.section-head .num,
.tile .num,
.tile .foot,
.list-num .mk,
.site-foot .legal,
.modules summary .mk,
.modules summary .meta,
.hero .trusted-by .logos .placeholder { font-weight: 500; }