/* ==========================================================================
   MoleculaX — Design System
   Single source of truth for colour, type, spacing and components.
   No external dependencies. No build step.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Brand — taken from the logo: blue wordmark, orange X */
  --blue-50:  #eef6fd;
  --blue-100: #d5e9f9;
  --blue-200: #a9d1f1;
  --blue-300: #6aa9df;
  --blue-400: #2f80c4;
  --blue-500: #1572b8;   /* primary */
  --blue-600: #0f5c96;
  --blue-700: #0a4674;
  --blue-800: #073252;
  --blue-900: #04213a;

  --orange-100: #fdece0;
  --orange-300: #f7a76b;
  --orange-400: #f28b3c;
  --orange-500: #e8781c; /* accent */
  --orange-600: #c25f0f;

  --navy: #06182b;

  /* Neutrals — one consistent grey ramp */
  --ink-900: #0c1621;
  --ink-800: #1b2733;
  --ink-700: #33414f;
  --ink-600: #4b5a69;
  --ink-500: #6b7a89;
  --ink-400: #93a1af;
  --ink-300: #c2ccd6;
  --ink-200: #dfe6ec;
  --ink-100: #eef2f6;
  --ink-50:  #f7f9fb;
  --white:   #ffffff;

  /* Semantic */
  --bg:            var(--white);
  --bg-alt:        var(--ink-50);
  --bg-dark:       var(--navy);
  --text:          var(--ink-800);
  --text-muted:    var(--ink-600);
  --text-subtle:   var(--ink-500);
  --text-invert:   var(--white);
  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --accent:        var(--orange-500);
  --link:          var(--blue-600);

  /* Type */
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  --font-mono: "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-xs:   0.8125rem;   /* 13 */
  --fs-sm:   0.9375rem;   /* 15 */
  --fs-base: 1.0625rem;   /* 17 */
  --fs-lg:   1.1875rem;   /* 19 */
  --fs-xl:   1.375rem;    /* 22 */
  --fs-2xl:  1.75rem;     /* 28 */
  --fs-3xl:  2.25rem;     /* 36 */
  --fs-4xl:  2.875rem;    /* 46 */
  --fs-5xl:  3.5rem;      /* 56 */

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;

  /* Shape */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(12, 22, 33, .06), 0 1px 3px rgba(12, 22, 33, .05);
  --shadow-md: 0 4px 14px rgba(12, 22, 33, .07), 0 2px 6px rgba(12, 22, 33, .05);
  --shadow-lg: 0 18px 44px rgba(12, 22, 33, .12), 0 4px 12px rgba(12, 22, 33, .06);

  --container: 1180px;
  --header-h: 72px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-wrap: balance;
}

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--blue-700); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }

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

::selection { background: var(--blue-200); color: var(--ink-900); }

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

/* Accessibility helpers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: var(--sp-4);
  z-index: 200;
  background: var(--blue-600); color: var(--white);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: var(--white); }

/* ---------- 3. Layout --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container--narrow { max-width: 820px; }
.container--wide { max-width: 1340px; }

.section { padding-block: var(--sp-9); }
.section--lg { padding-block: var(--sp-11); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: var(--text-invert); }
.section--tight { padding-block: var(--sp-7); }

.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--white); }
.section--dark p { color: var(--ink-300); }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack > * + * { margin-top: var(--sp-5); }

/* ---------- 4. Typography patterns ------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--sp-3);
}
.section--dark .eyebrow { color: var(--orange-300); }

.lede {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-muted);
}
.section--dark .lede { color: var(--ink-300); }

.section-head { max-width: 760px; margin-bottom: var(--sp-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-3xl); }
.section-head p { font-size: var(--fs-lg); color: var(--text-muted); margin-bottom: 0; }
.section--dark .section-head p { color: var(--ink-300); }

.text-accent { color: var(--accent); }
.mono { font-family: var(--font-mono); font-size: .92em; }

/* ---------- 5. Buttons -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.8125rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .01em;
  cursor: pointer;
  text-align: center;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--blue-600);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--blue-700); color: var(--white); box-shadow: var(--shadow-md); }

.btn--accent { background: var(--orange-500); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: var(--orange-600); color: var(--white); box-shadow: var(--shadow-md); }

.btn--outline {
  background: transparent;
  color: var(--blue-700);
  border-color: var(--border-strong);
}
.btn--outline:hover { border-color: var(--blue-500); color: var(--blue-700); background: var(--blue-50); }

.btn--ghost-invert {
  background: rgba(255, 255, 255, .08);
  color: var(--white);
  border-color: rgba(255, 255, 255, .28);
  backdrop-filter: blur(4px);
}
.btn--ghost-invert:hover { background: rgba(255, 255, 255, .16); color: var(--white); border-color: rgba(255,255,255,.5); }

.btn--lg { padding: 1rem 1.875rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 650; font-size: var(--fs-sm);
}
.link-arrow::after {
  content: "→";
  transition: transform .2s var(--ease);
}
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- 6. Header / nav -------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 2px 16px rgba(12, 22, 33, .06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { width: 158px; height: auto; }
.brand:hover { opacity: .82; }

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-list li { margin: 0; }

.nav-link {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  color: var(--ink-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.nav-link:hover { background: var(--ink-100); color: var(--blue-700); }
.nav-link[aria-current="page"] { color: var(--blue-700); background: var(--blue-50); }

.nav-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

/* Dropdown */
.has-dropdown { position: relative; }
.dropdown-toggle { display: inline-flex; align-items: center; gap: .35em; }
.dropdown-toggle::after {
  content: "";
  width: .42em; height: .42em;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--ease);
}
.has-dropdown[data-open="true"] .dropdown-toggle::after { transform: translateY(0) rotate(-135deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 268px;
  padding: var(--sp-2);
  margin: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-dropdown[data-open="true"] .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown li { margin: 0; }
.dropdown a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  color: var(--ink-700);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.dropdown a:hover { background: var(--blue-50); color: var(--blue-700); }
.dropdown small { display: block; font-weight: 450; color: var(--text-subtle); font-size: var(--fs-xs); margin-top: 2px; }

/* Mobile nav */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 50%; width: 20px; height: 2px;
  background: var(--ink-800);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { content: ""; left: 0; transform: none; top: -6px; }
.nav-toggle span::after  { content: ""; left: 0; transform: none; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); top: 0; }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg); top: 0; }

/* ---------- 7. Hero ----------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy);
  color: var(--text-invert);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 620px at 78% 18%, rgba(21,114,184,.42), transparent 62%),
    radial-gradient(760px 480px at 8% 92%, rgba(232,120,28,.20), transparent 66%);
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(1200px 700px at 50% 0%, #000 12%, transparent 78%);
  z-index: -1;
}

.hero-inner {
  display: grid;
  /* The copy column used to take the larger share (1.08fr against .92fr) and
     the columns sat a full --sp-9 apart. The hero image now gets that width
     back: a slightly larger share plus a tighter column gap. Measured in Edge
     at a 1440 window: the picture goes from 491x307 to 547x342 (+11% each way),
     the copy column from 577 to 537 wide, and the hero stays the same height.
     The row gap is unchanged (it becomes the single-column gap at <=940px). */
  grid-template-columns: 1fr 1.02fr;
  gap: var(--sp-9) var(--sp-8);
  align-items: center;
  padding-block: var(--sp-11) var(--sp-10);
}

.hero h1 {
  color: var(--white);
  font-size: clamp(2.25rem, 1.35rem + 3.4vw, var(--fs-5xl));
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-5);
}
.hero h1 .accent { color: var(--orange-400); }

.hero-sub {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-300);
  max-width: 34em;
  margin-bottom: var(--sp-7);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .4rem .9rem .4rem .55rem;
  margin-bottom: var(--sp-5);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--ink-200);
}
.hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange-400);
  box-shadow: 0 0 0 4px rgba(242,167,107,.22);
}

.hero-media { position: relative; }
.hero-media img {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
}

/* ---------- 8. Stat band ----------------------------------------------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  padding-block: var(--sp-8);
  border-block: 1px solid var(--border);
}
.stat { text-align: center; }
.stat__num {
  display: block;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--blue-700);
  line-height: 1.1;
}
.stat__num sup { font-size: .5em; top: -.55em; color: var(--accent); }
.stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* ---------- 9. Cards --------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card--hover:hover {
  border-color: var(--blue-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--blue-50);
  color: var(--blue-600);
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.card p { color: var(--text-muted); font-size: var(--fs-sm); }

.card--dark {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
}
.card--dark h3 { color: var(--white); }
.card--dark p { color: var(--ink-300); }
.card--dark .card__icon { background: rgba(47,128,196,.22); color: var(--blue-300); }

/* Feature with side image */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}
.split--media-right .split__media { order: 2; }
.split__media img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.split__body h2 { font-size: var(--fs-3xl); }
.split__body p { color: var(--text-muted); }

/* The muted grey above is chosen for white backgrounds.  On a dark section it
   measured 2.53:1 against the navy (#4b5a69 on #06182b), well under the 4.5:1
   WCAG minimum, and it used to win over .section--dark p simply by source
   order.  Raise the dark-section rule so a split body keeps readable contrast
   (this affects Mission & Vision and the "open positions" block on the team
   page — the only two dark sections on the site). */
.section--dark .split__body p { color: var(--ink-300); }

/* Bullet list with checks */
.check-list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--blue-50);
  border: 1.5px solid var(--blue-200);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: .36rem; top: .62em;
  width: .3rem; height: .55rem;
  border-right: 2px solid var(--blue-600);
  border-bottom: 2px solid var(--blue-600);
  transform: rotate(40deg);
}
.section--dark .check-list li { color: var(--ink-300); }

/* A long bullet list (the nine job responsibilities) reads better in two
   balanced columns than as one very wide column.  The check marks are
   absolutely positioned inside each item, so they travel with their text. */
.check-list--split { columns: 2; column-gap: var(--sp-8); }
.check-list--split li { break-inside: avoid; }
@media (max-width: 940px) {
  .check-list--split { columns: 1; }
}
.section--dark .check-list li::before { background: rgba(47,128,196,.2); border-color: rgba(106,169,223,.45); }
.section--dark .check-list li::after { border-color: var(--blue-300); }

/* ---------- 10. Tables ------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 720px;
}
table.data caption {
  caption-side: top;
  text-align: left;
  padding: var(--sp-5) var(--sp-5) 0;
  font-weight: 700;
  color: var(--ink-800);
}
table.data th, table.data td {
  padding: var(--sp-4) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.data thead th {
  background: var(--ink-50);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-600);
  white-space: nowrap;
  border-bottom: 1px solid var(--border-strong);
  position: sticky;
  top: 0;
}
table.data tbody tr:last-child th,
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--blue-50); }
table.data th[scope="row"] {
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
}
table.data td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* ---------- 11. Pills / tags ------------------------------------------- */
.pill {
  display: inline-block;
  padding: .22rem .62rem;
  border-radius: var(--r-full);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
  font-size: var(--fs-xs);
  font-weight: 650;
  white-space: nowrap;
}
.pill--orange { background: var(--orange-100); border-color: #f8d9bf; color: var(--orange-600); }
.pill--grey { background: var(--ink-100); border-color: var(--ink-200); color: var(--ink-600); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Material detail cards */
.material {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.material:hover { border-color: var(--blue-200); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.material__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.material__name {
  font-size: var(--fs-xl);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0;
}
.material__class { font-size: var(--fs-xs); color: var(--text-subtle); margin: .15rem 0 0; }
.material dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem var(--sp-4);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.material dt { color: var(--text-subtle); }
.material dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-800); }
.material p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: auto; }

/* ---------- 12. Steps / process ---------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--sp-6); }
.step {
  position: relative;
  padding-left: 3.75rem;
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--blue-600);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.step p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.section--dark .step::before { background: var(--blue-500); }
.section--dark .step p { color: var(--ink-300); }

/* ---------- 13. CTA band ----------------------------------------------- */
.cta {
  position: relative;
  background: var(--blue-800);
  color: var(--text-invert);
  border-radius: var(--r-xl);
  padding: var(--sp-9);
  overflow: hidden;
  isolation: isolate;
}
.cta::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 400px at 88% 10%, rgba(232,120,28,.30), transparent 65%),
    radial-gradient(600px 400px at 5% 100%, rgba(47,128,196,.45), transparent 65%);
}
.cta h2 { color: var(--white); font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.cta p { color: var(--blue-100); max-width: 46em; }
.cta__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-7); flex-wrap: wrap;
}
.cta__inner > div { flex: 1 1 30rem; }

/* ---------- 14. Forms -------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--ink-800);
}
.field label .req { color: var(--orange-500); }
.field .hint { font-size: var(--fs-xs); color: var(--text-subtle); font-weight: 450; }

.input, .select, .textarea {
  width: 100%;
  padding: .75rem .9rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(21,114,184,.14);
}
.textarea { min-height: 150px; resize: vertical; }

.form-status {
  display: none;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: #e8f6ee; border: 1px solid #b7e0c8; color: #14663c; }
.form-status--err { background: #fdeceb; border: 1px solid #f5c2bd; color: #97231a; }

/* ---------- 15. Contact blocks ----------------------------------------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.contact-list li { display: flex; gap: var(--sp-4); margin: 0; }
.contact-list .ico {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--blue-50);
  color: var(--blue-600);
}
.contact-list .ico svg { width: 20px; height: 20px; }
.contact-list dt, .contact-list .k {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: .15rem;
}
.contact-list .v { font-size: var(--fs-base); color: var(--ink-800); font-weight: 500; }

/* ---------- 16. Page header (inner pages) ------------------------------ */
.page-head {
  position: relative;
  background: var(--navy);
  color: var(--text-invert);
  padding-block: var(--sp-10) var(--sp-9);
  overflow: hidden;
  isolation: isolate;
}
.page-head::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 520px at 82% 0%, rgba(21,114,184,.40), transparent 62%),
    radial-gradient(600px 400px at 3% 100%, rgba(232,120,28,.18), transparent 66%);
}
.page-head h1 { color: var(--white); font-size: clamp(2rem, 1.4rem + 2.1vw, var(--fs-4xl)); margin-bottom: var(--sp-4); }
.page-head p { color: var(--ink-300); font-size: var(--fs-lg); max-width: 52em; margin-bottom: 0; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  list-style: none; margin: 0 0 var(--sp-5); padding: 0;
  font-size: var(--fs-xs); color: var(--ink-400);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: "/"; color: var(--ink-500); }
.breadcrumb a { color: var(--ink-300); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb [aria-current="page"] { color: var(--white); font-weight: 600; }

/* ---------- 17. Prose (long-form) ------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 { font-size: var(--fs-2xl); margin-top: var(--sp-9); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-xl); margin-top: var(--sp-7); }
.prose p, .prose li { color: var(--ink-700); }
.prose strong { color: var(--ink-900); }
.prose blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-left: 3px solid var(--orange-400);
  color: var(--ink-700);
  font-size: var(--fs-lg);
}

/* ---------- 18. Accordion (FAQ) ---------------------------------------- */
.accordion { border-top: 1px solid var(--border); }
.accordion details {
  border-bottom: 1px solid var(--border);
}
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  flex-shrink: 0;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--blue-600);
  border-bottom: 2px solid var(--blue-600);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.accordion .accordion__body { padding-bottom: var(--sp-5); color: var(--text-muted); max-width: 72ch; }
.accordion .accordion__body p:last-child { margin-bottom: 0; }

/* ---------- 19. Footer ------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: var(--ink-300);
  padding-block: var(--sp-9) var(--sp-6);
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand img {
  width: 158px;
  margin-bottom: var(--sp-5);
  filter: brightness(0) invert(1);
  opacity: .95;
}
.footer-brand p { color: var(--ink-400); max-width: 34ch; font-size: var(--fs-sm); }

.footer-col h3 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer-col li { margin: 0; }
.footer-col a { color: var(--ink-300); font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--white); }

.footer-contact { display: grid; gap: var(--sp-3); }
.footer-contact a { color: var(--ink-300); display: inline-flex; align-items: center; gap: .5em; }
.footer-contact a:hover { color: var(--white); }
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-top: var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}
.footer-bottom ul { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.footer-bottom li { margin: 0; }
.footer-bottom a { color: var(--ink-400); }
.footer-bottom a:hover { color: var(--white); }

/* Back to top */
.to-top {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 90;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink-700);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--blue-600); color: var(--white); border-color: var(--blue-600); }

/* ---------- 20. Reveal on scroll --------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 21. Responsive --------------------------------------------- */
@media (max-width: 1080px) {
  :root { --fs-5xl: 3rem; --fs-4xl: 2.5rem; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: 60ch; }
}

@media (max-width: 940px) {
  .nav-list, .nav-actions .btn { display: none; }
  .nav-toggle { display: block; }

  /* mobile drawer */
  .nav-drawer {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 99;
    background: var(--white);
    padding: var(--sp-6) var(--sp-5) var(--sp-10);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav-drawer.is-open { opacity: 1; visibility: visible; transform: none; }

  .hero-inner { grid-template-columns: 1fr; gap: var(--sp-8); padding-block: var(--sp-9) var(--sp-8); }
  .hero-media { max-width: 560px; }
  .split { grid-template-columns: 1fr; gap: var(--sp-7); }
  .split--media-right .split__media { order: 0; }
  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-5); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  :root {
    --fs-base: 1rem;
    --fs-3xl: 1.875rem;
    --fs-2xl: 1.5rem;
    --sp-9: 3rem;
    --sp-10: 3.5rem;
    --sp-11: 4rem;
  }
  .container { padding-inline: var(--sp-4); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cta { padding: var(--sp-7) var(--sp-5); border-radius: var(--r-lg); }
  .cta__inner { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .card { padding: var(--sp-5); }
  .to-top { right: var(--sp-4); bottom: var(--sp-4); }
}

@media (max-width: 420px) {
  .brand img { width: 132px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   21b. NAVIGATION — refinements
   Supersedes the earlier nav rules above.

   What changed and why:
     - the header is shorter and the nav can never wrap onto a second row
       (previously it did between roughly 940px and 1040px wide, which made
       the header grow very tall)
     - the dropdown opens on plain CSS :hover / :focus-within, so it appears
       instantly and still works with JavaScript disabled
     - a padded "bridge" under the trigger stops the menu closing when the
       pointer travels from the trigger down into the panel
     - the keyframe animation is gone: it replayed every time the pointer
       crossed the trigger, which felt jittery
   ========================================================================== */

:root { --header-h: 64px; }

/* --- 1. Keep every header element on one line ------------------------- */
.nav,
.nav-list,
.nav-actions {
  flex-wrap: nowrap;
}
.nav { gap: var(--sp-4); }
.nav-list { gap: 2px; }
.brand, .nav-actions { flex: 0 0 auto; }

.nav-link {
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  white-space: nowrap;
}
.brand img { width: 146px; }
.nav-actions .btn { padding: 0.6rem 1.05rem; font-size: 0.875rem; }

/* --- 2. Dropdown trigger ---------------------------------------------- */
.dropdown-toggle {
  position: relative;
  padding-right: 1.4rem;
}
.dropdown-toggle::before {
  content: "";
  position: absolute;
  right: 0.55rem;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transform-origin: center;
  transition: transform .18s var(--ease);
}
.dropdown-toggle::after { display: none; }
.has-dropdown:hover .dropdown-toggle::before,
.has-dropdown:focus-within .dropdown-toggle::before,
.has-dropdown[data-open="true"] .dropdown-toggle::before {
  transform: translateY(-25%) rotate(-135deg);
}

/* --- 3. Dropdown panel ------------------------------------------------ */
.dropdown {
  top: 100%;               /* abuts the trigger so there is no dead gap... */
  padding-top: 10px;       /* ...and this is the invisible bridge          */
  min-width: 268px;
  margin-top: 0;
  transform: translateY(-8px);
  transition: opacity .13s var(--ease), transform .13s var(--ease), visibility .13s;
  pointer-events: none;
}
.dropdown::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: -1;
}

.dropdown li { margin: 0; }
.dropdown a {
  position: relative;
  z-index: 1;
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-md);
  line-height: 1.35;
}

/* open state — CSS already did this on hover; now :focus-within does too */
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown[data-open="true"] .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* --- 4. Mobile: no hover, so flatten the menu ------------------------- */
@media (max-width: 940px) {
  .nav-toggle { flex: 0 0 auto; }

  .has-dropdown .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 var(--sp-4);
    margin: 0 0 var(--sp-2);
    min-width: 0;
  }
  .has-dropdown .dropdown::before { display: none; }
  .has-dropdown .dropdown a { padding: 0.45rem 0.6rem; }
  .has-dropdown .dropdown a small { display: none; }
  .dropdown-toggle::before { display: none; }
  .dropdown-toggle { padding-right: 0.7rem; }

  /* Restore the mobile drawer. Needed because the drawer carries the native
     `hidden` attribute and the min-width query below is more specific. */
  .nav-drawer { display: block; }
  .nav-drawer .nav-list { display: block; }
  .nav-drawer .nav-link { padding: 0.65rem 0.7rem; font-size: 1rem; }
}

/* Desktop only: the drawer and its hamburger must never appear.
   (These rules previously leaked outside the media query above and forced the
   mobile menu onto desktop widths — hence the tall stacked links.) */
@media (min-width: 941px) {
  .nav-drawer { display: none !important; }
  .nav-toggle { display: none !important; }
}

/* ---------- 22. Motion & print ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .to-top, .cta, .nav-drawer { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero, .page-head, .section--dark, .site-footer { background: #fff !important; color: #000 !important; }
  .hero h1, .page-head h1, .section--dark h1, .section--dark h2, .section--dark h3,
  .site-footer a, .footer-col h3 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .reveal { opacity: 1 !important; transform: none !important; }
  table.data { min-width: 0; }
}

/* ==========================================================================
   23. V3 REBUILD ADDITIONS
   Multi-level navigation, product tiles, product data sheets, news cards.
   ========================================================================== */

/* --- 23.1 Dropdown with grouped links and product list ---------------- */
.dropdown--wide {
  min-width: 300px;
  padding: 10px 0 0;
}
.dropdown--wide::before { inset: 1px; }

.dropdown__panel {
  position: relative;
  z-index: 1;
  padding: var(--sp-2) 0 var(--sp-3);
}

.dropdown__title {
  display: block;
  padding: 0.45rem 1.1rem 0.3rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.dropdown__sep {
  height: 1px;
  margin: 0.4rem 1.1rem;
  background: var(--border);
}

/* 5 product codes sit nicely in two columns */
.dropdown__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 0 var(--sp-2);
}
.dropdown__grid a {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: 0.01em;
}
.dropdown__grid a.is-current {
  background: var(--blue-50);
  color: var(--blue-700);
}

/* --- 23.2 Product tiles (materials landing page) ---------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--sp-4);
}
.product-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: inherit;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.product-tile:hover {
  border-color: var(--blue-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  color: inherit;
}
.product-tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.product-tile__name {
  font-size: var(--fs-2xl);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--var-ink-900, var(--ink-900));
  margin: 0;
}
.product-tile__role {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.product-tile__pce {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.product-tile__pce b {
  font-size: var(--fs-xl);
  font-weight: 750;
  color: var(--blue-700);
  letter-spacing: -0.02em;
}
.product-tile__pce span {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 650;
}
.product-tile__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}
.product-tile__more {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--blue-600);
}
.product-tile:hover .product-tile__more { color: var(--blue-700); }

/* --- 23.3 Product data sheet (individual product pages) --------------- */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.spec-cell {
  padding: var(--sp-5) var(--sp-4);
  background: var(--white);
  text-align: center;
}
.spec-cell dt {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: .4rem;
}
.spec-cell dd {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-family: var(--font-mono);
}
.spec-cell dd.is-text { font-family: var(--font-sans); font-size: var(--fs-lg); }
.spec-cell dd .unit {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-subtle);
  margin-left: .15em;
}

/* technical figure grid */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}
.tech-figure {
  margin: 0;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.tech-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.tech-figure--tall img { max-width: 380px; margin-inline: auto; }
.tech-figure figcaption {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}
.tech-figure figcaption b {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: .25rem;
}

/* device-stack chips (text version of the stack) */
.stack-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding: var(--sp-4);
  background: var(--ink-50);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
}
.stack-chips span {
  padding: .25rem .55rem;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink-700);
}
.stack-chips span.is-active {
  background: var(--orange-100);
  border-color: var(--orange-300);
  color: var(--orange-600);
  font-weight: 750;
}
.stack-chips .arrow { border: 0; background: none; color: var(--ink-400); padding-inline: 0; }

/* --- 23.4 Comparison table (materials page) --------------------------- */
table.data th.rot,
table.data td.cmp-group {
  white-space: nowrap;
}
table.data td.cmp-group {
  background: var(--blue-600);
  color: var(--white);
  font-weight: 700;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
}
table.data td.cmp-group--etm { background: var(--orange-500); }
table.data td.cmp-name {
  text-align: center;
  font-weight: 750;
  font-size: var(--fs-lg);
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
table.data td.cmp-name a { color: inherit; }
table.data td.cmp-name a:hover { color: var(--blue-600); }
table.data td.cmp-feature {
  font-size: var(--fs-sm);
  min-width: 230px;
  color: var(--text-muted);
}
table.data td.cmp-pce {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--blue-700);
  text-align: center;
}
table.data td.cmp-arch {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-align: center;
  white-space: nowrap;
}

/* --- 23.5 News ------------------------------------------------------- */
.news-list { display: grid; gap: var(--sp-6); }
.news-item {
  padding: var(--sp-7);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.news-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.news-item h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.news-item p { color: var(--ink-700); }
.news-item p:last-child { margin-bottom: 0; }

/* --- 23.5b News-style card used as a link (Careers listing) ------------ */
/* News articles are read inline, so their cards are inert.  A job needs its own
   page, so the whole card becomes the link, and the lift on hover is what tells
   a visitor that. */
a.news-item--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              border-color .18s var(--ease);
}
a.news-item--link:hover,
a.news-item--link:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-200);
}
a.news-item--link:hover h2,
a.news-item--link:focus-visible h2 { color: var(--blue-700); }
.news-item__foot { margin-top: var(--sp-5); }

/* --- 23.6 Small helpers --------------------------------------------- */
.badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: var(--r-sm);
  background: var(--ink-100);
  color: var(--ink-600);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge--htm { background: var(--blue-50); color: var(--blue-700); }
.badge--etm { background: var(--orange-100); color: var(--orange-600); }
.badge--soon { background: #fff4e0; color: #9a6207; }

.page-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 650;
}

/* keeps long product descriptions readable next to figures */
.prose--tight { max-width: 68ch; }

@media (max-width: 940px) {
  .tech-grid { grid-template-columns: 1fr; }
  .dropdown--wide { min-width: 0; }
}
@media (max-width: 680px) {
  .news-item { padding: var(--sp-5); }
  .spec-cell { padding: var(--sp-4) var(--sp-3); }
  /* Two columns instead of three: an odd number of cells used to leave the
     grid's 1px background showing as a grey block next to the last cell. */
  .spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* .cta__inner switches to a column at this width, and flex-basis:30rem then
     applies to the *height* of the text block, so every CTA on the site had a
     ~480px empty gap between the copy and the button on phones. */
  .cta__inner > div { flex-basis: auto; }
}

/* --- 23.1b grouped dropdown as a two-column grid ---------------------- */
.dropdown--wide {
  min-width: 330px;
  padding: 10px 10px 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 4px;
}
.dropdown--wide > li { margin: 0; }
.dropdown--wide > li.full { grid-column: 1 / -1; }
.dropdown--wide > li.dropdown__sep {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border);
  margin: 7px 4px;
}
.dropdown--wide .dropdown__title {
  padding: 8px 10px 4px;
}
.dropdown--wide a { padding: 0.5rem 0.7rem; }
.dropdown--wide > li.full > a { font-weight: 650; }
.dropdown--wide > li:not(.full) > a {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 650;
}

/* ==========================================================================
   24. HERO CAROUSEL
   .hero-slides holds two images that cross-fade. Both are absolutely
   positioned inside a fixed-ratio box, so without these rules they would
   simply stack on top of each other.
   ========================================================================== */

.hero-copy { min-width: 0; }

.hero-slides {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  background: var(--blue-900);
  isolation: isolate;
}

.hero-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  animation: hero-cross 16s var(--ease) infinite;
  will-change: opacity;
}

/* the second image runs half a cycle behind, so the two always sum to one */
.hero-slides img:nth-child(1) { animation-delay: 0s; }
.hero-slides img:nth-child(2) { animation-delay: -8s; }

@keyframes hero-cross {
  0%, 40%   { opacity: 1; }
  50%, 90%  { opacity: 0; }
  100%      { opacity: 1; }
}

/* no animation: show a single static frame */
@media (prefers-reduced-motion: reduce) {
  .hero-slides img { animation: none; }
  .hero-slides img:nth-child(1) { opacity: 1; }
  .hero-slides img:nth-child(2) { opacity: 0; }
}

/* heading used only to keep the document outline valid */
.h2-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   25. REVEAL SAFETY
   Section 21 ships .reveal { opacity: 0 } with JavaScript adding .is-in.
   If the script is blocked, slow, or the IntersectionObserver never fires,
   that hides real content permanently. Content being visible is
   non-negotiable, so the hidden state is now gated behind html.js and the
   document is visible by default.
   ========================================================================== */

.reveal {
  opacity: 1;
  transform: none;
}

html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}

html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Reduced motion opts out of the hidden state entirely (overrides html.js). */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  html.js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   26. LAYOUT CORRECTIONS
   Found by screenshotting the built site rather than by reading the code.
   ========================================================================== */

/* --- 26.1 Navigation has three tiers ----------------------------------
   The full nav needs roughly 1080px of usable width. Below that the CTA
   button was being pushed off the right edge, so:
     > 1220px  full size
     <= 1220px slightly tighter
     <= 1040px CTA button moves into the drawer only
     <= 940px  hamburger (handled in section 21)
   ---------------------------------------------------------------------- */
@media (max-width: 1220px) {
  .nav { gap: var(--sp-3); }
  .nav-link {
    padding: 0.45rem 0.45rem;
    font-size: 0.84rem;
  }
  .brand img { width: 128px; }
  .nav-actions .btn {
    padding: 0.55rem 0.8rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 1040px) and (min-width: 941px) {
  /* keep the bar on one line; the drawer still carries the CTA */
  .nav-actions .btn { display: none; }
}

/* --- 26.2 Five product tiles should sit on one row -------------------- */
.product-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* --- 26.3 Metric strip inside a narrow column -------------------------
   Four metrics in an auto-fit grid gave 3 + 1 with a hole beside it.
   A fixed 2x2 block reads far better in a half-width column.
   ---------------------------------------------------------------------- */
.spec-strip--metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- 26.4 Odd number of technical figures ----------------------------
   With three figures the third one sat alone beside empty space.
   Let a lone final figure span the full row.
   ---------------------------------------------------------------------- */
.tech-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.tech-grid > :last-child:nth-child(odd) img { max-width: 720px; margin-inline: auto; }

/* ==========================================================================
   27. HOME BUBBLES, 3-UP STAT BAND, PORTFOLIO TABLE
   ========================================================================== */

/* --- 27.1 Stat band now carries three figures ------------------------- */
.stat-band { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* --- 27.2 Floating product bubbles -----------------------------------
   Home shows the five grade names only. The gentle float uses the
   independent `translate` property so the hover effect can use `scale`
   without the two fighting over `transform`.
   ---------------------------------------------------------------------- */
.bubble-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-6) var(--sp-7);
  padding-block: var(--sp-5) var(--sp-8);
}

.bubble {
  --d: 132px;
  width: var(--d);
  height: var(--d);
  display: grid;
  place-content: center;
  gap: 3px;
  text-align: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #ffffff 0%, var(--blue-50) 52%, var(--blue-100) 100%);
  border: 1px solid var(--blue-200);
  box-shadow: 0 14px 30px rgba(21, 114, 184, .16),
              inset 0 -8px 18px rgba(21, 114, 184, .07);
  color: var(--blue-700);
  font-weight: 750;
  font-size: var(--fs-xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
  translate: 0 0;
  animation: bubble-float 7s var(--ease) infinite;
  transition: scale .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.bubble small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.bubble--etm {
  background: radial-gradient(circle at 34% 26%, #ffffff 0%, var(--orange-100) 52%, #f8d9bf 100%);
  border-color: var(--orange-300);
  color: var(--orange-600);
}
.bubble--etm small { color: #a8641a; }

.bubble:hover {
  scale: 1.07;
  border-color: var(--blue-400);
  color: var(--blue-700);
  box-shadow: 0 22px 44px rgba(21, 114, 184, .26),
              inset 0 -8px 18px rgba(21, 114, 184, .07);
}
.bubble--etm:hover {
  border-color: var(--orange-500);
  color: var(--orange-600);
  box-shadow: 0 22px 44px rgba(232, 120, 28, .26),
              inset 0 -8px 18px rgba(232, 120, 28, .07);
}

/* staggered sizes and float phases: alive, not mechanical */
.bubble:nth-child(1) { --d: 134px; animation-duration: 6.4s; animation-delay: -0.2s; }
.bubble:nth-child(2) { --d: 116px; animation-duration: 7.6s; animation-delay: -1.6s; }
.bubble:nth-child(3) { --d: 128px; animation-duration: 6.9s; animation-delay: -3.1s; }
.bubble:nth-child(4) { --d: 122px; animation-duration: 8.1s; animation-delay: -0.9s; }
.bubble:nth-child(5) { --d: 140px; animation-duration: 7.2s; animation-delay: -2.4s; }

@keyframes bubble-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; }
}

@media (max-width: 680px) {
  .bubble-cloud { gap: var(--sp-4); padding-block: var(--sp-3) var(--sp-6); }
  .bubble,
  .bubble:nth-child(1), .bubble:nth-child(2), .bubble:nth-child(3),
  .bubble:nth-child(4), .bubble:nth-child(5) { --d: 100px; font-size: var(--fs-base); }
  .bubble small { font-size: 0.6875rem; letter-spacing: .06em; }
}

/* --- 27.3 Portfolio table (materials page) ---------------------------- */
table.data.data--portfolio { min-width: 820px; }

table.data td.cmp-name a {
  color: var(--blue-600);
  text-decoration: underline;
  text-decoration-color: var(--blue-200);
  text-underline-offset: 3px;
}
table.data td.cmp-name a:hover {
  color: var(--blue-700);
  text-decoration-color: var(--blue-500);
}

table.data td.cmp-note {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ==========================================================================
   28. FIGURE ALIGNMENT
   The source figures range from 0.57 to 1.46 in aspect ratio. Dropped into
   equal-width boxes they produced wildly different heights, so the captions
   underneath never lined up. Two rules fix it:

     - every figure image is shown at the SAME visual height, centred
     - every caption is pushed to the bottom of its box, so captions across a
       row share a baseline whatever the image above them looks like
   ========================================================================== */

.tech-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 340px;
  margin-inline: auto;
}

.tech-figure figcaption {
  margin-top: auto;   /* pin captions to the bottom of the card */
}

/* a lone figure spanning the full row has room to be larger */
.tech-grid > :last-child:nth-child(odd) img { max-height: 440px; }

/* The device-stack image beside the description: the P-24 crop is very tall
   (0.57), so cap the height and centre it rather than letting it tower over
   the text column. */
.split__media--stack img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 540px;
  margin-inline: auto;
}

@media (max-width: 940px) {
  .tech-figure img { max-height: 300px; }
  .tech-grid > :last-child:nth-child(odd) img { max-height: 340px; }
  .split__media--stack img { max-height: 420px; }
}

/* ==========================================================================
   29. PORTFOLIO TABLE ALIGNMENT
   Centres every data column and gives the five grades equal width, so the
   header code sits directly above its values.

   Note: an earlier rule targeted `td.cmp-name`, but the grade cells are
   emitted as `th`, so that rule never matched anything and the columns stayed
   left-aligned. The selectors below cover both `th` and `td`.
   ========================================================================== */

table.data.data--portfolio {
  table-layout: fixed;
  min-width: 860px;
}

/* row-label column keeps a fixed slice; the five grades share the rest equally */
table.data.data--portfolio > thead > tr > th:first-child,
table.data.data--portfolio > tbody > tr > th:first-child {
  width: 190px;
}

table.data.data--portfolio thead th,
table.data.data--portfolio tbody td {
  text-align: center;
  vertical-align: middle;
}

/* the first column is a row label, not data: leave it left-aligned */
table.data.data--portfolio tbody th[scope="row"] {
  text-align: left;
  vertical-align: middle;
}

table.data.data--portfolio th.cmp-name,
table.data.data--portfolio td.cmp-name {
  text-align: center;
}

@media (max-width: 680px) {
  table.data.data--portfolio > thead > tr > th:first-child,
  table.data.data--portfolio > tbody > tr > th:first-child {
    width: 140px;
  }
}

/* ==========================================================================
   30. TEAM PAGE
   ========================================================================== */

.person {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Portrait on the left, name and role beside it. A full-width square portrait
   per card (about 550px) dominated the page; this keeps the face large enough
   to read while leaving the biography the room it needs. */
.person__head {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}

.person__photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--blue-50);
}

.person__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The portraits are already square, so nothing is cropped today. The
     position is set anyway so that if someone later drops in a full-length
     photo, the face stays in frame instead of being centred on a torso. */
  object-position: center 18%;
}

.person__id h3 {
  font-size: var(--fs-xl);
  margin: 0 0 .25rem;
}

.person__role {
  color: var(--blue-600);
  font-weight: 600;
  font-size: var(--fs-sm);
  margin: 0;
}

.person__bio {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: 0;
}

/* Biographies run to several lines, so two across reads better than four. */
.team-grid {
  gap: 3rem 2.5rem;
}

/* Founder ------------------------------------------------------------------
   The biography runs to three long paragraphs. A two-column grid keeps every
   line at a readable length, which a float cannot: with a float the lines
   beside the portrait are short and the lines below it span the full 1180px
   container (about 130 characters). The pair is centred because the text
   column is capped narrower than half the container. */
.founder {
  display: grid;
  grid-template-columns: 240px minmax(0, 62ch);
  gap: 3rem;
  align-items: start;
  justify-content: center;
}

.founder__body h2 {
  margin-bottom: 1rem;
}

@media (max-width: 720px) {
  .founder {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .founder__photo {
    max-width: 200px;
  }
  .person__head {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 1rem;
  }
  .team-grid {
    gap: 2.25rem;
  }
}

/* ==========================================================================
   31. KEY MATERIALS — the two supplied images
   The layer-stack render (660x833) sits beside the opening copy, because that
   side of the page was a large empty block; the device photo (403x318) stays
   underneath as a standalone figure.

   The grid keeps the copy at its existing 68ch measure and hands the leftover
   width to the picture, so adding the image does NOT reflow a single line of
   the text above it: the copy column renders exactly as it did before.
   (Earlier these two sat side by side in .tech-grid cards with an equal-height
   rule; the client preferred the render up here, so that rule is gone.  See
   PROJECT-STATE.md, round 22/23, if it ever needs to come back.)
   ========================================================================== */

.intro-split {
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}
.intro-split__media { margin: 0; }

.intro-split__media img,
.figure-solo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

/* the lone device photo: capped near its native 403 px so it is not upscaled */
.figure-solo {
  max-width: 440px;
  margin: var(--sp-9) auto 0;
}

.intro-split figcaption,
.figure-solo figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}
.intro-split figcaption b,
.figure-solo figcaption b {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: .25rem;
}

@media (max-width: 940px) {
  /* one column: the render drops below the copy, so cap it like the photo */
  .intro-split { grid-template-columns: 1fr; gap: var(--sp-7); }
  .intro-split__media { max-width: 420px; }
  .figure-solo { max-width: 420px; margin-top: var(--sp-7); }
}
/* ==========================================================================
   32. INTERFACIAL MATERIALS — the four technology families
   Four short blocks (heading + one sentence) that sit beside the device-stack
   illustration, mirroring the layout of the slide the client supplied.  The
   generic h3 inside .split__body is too heavy at this density, so the blocks
   get their own smaller heading and tighter rhythm.
   ========================================================================== */

.iface-list {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-5);
}
.iface-list h3 {
  font-size: var(--fs-lg);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}
.iface-list p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   33. COLLABORATIVE INNOVATION SERVICES — three-stage strip
   Material Science -> Device Engineering -> Process Integration, drawn with the
   client's own artwork (transparent PNGs, so the tinted section background
   shows through).  The stages are equal-width columns; the chevrons between
   them are pure CSS and turn to point downwards when the strip stacks.
   ========================================================================== */

.svc-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-7);
  align-items: start;
  margin-top: var(--sp-8);
}
.svc-step {
  position: relative;
  text-align: center;
  /* the client's artwork has a white background baked in, so each stage is a
     white card: the picture then blends into it instead of showing as a box */
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-6);
}
.svc-step img {
  height: 190px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.svc-step h3 {
  margin-top: var(--sp-4);
  font-size: var(--fs-xl);
}
.svc-step p {
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* chevron between stages */
.svc-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 88px;
  right: calc(-1 * var(--sp-7) / 2 - 8px);
  width: 16px;
  height: 16px;
  border-top: 2px solid var(--blue-300);
  border-right: 2px solid var(--blue-300);
  transform: rotate(45deg);
}

@media (max-width: 940px) {
  .svc-strip { grid-template-columns: 1fr; gap: var(--sp-8); margin-top: var(--sp-7); }
  /* stacked: the chevron points down and sits between the blocks */
  .svc-step:not(:last-child)::after {
    top: auto;
    right: auto;
    left: 50%;
    margin-left: -8px;
    bottom: calc(-1 * var(--sp-8) / 2 - 8px);
    transform: rotate(135deg);
  }
}