/* ==========================================================================
   IPMeld — design system
   Direction: precision engineering meets institutional finance.
   Hairlines not shadows. Restrained accent. Generous vertical rhythm.
   Signature motif: the "meld rail" — a hairline that resolves into a teal node.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* brand palette (fixed) */
  --navy: #081a2c;
  --blue: #123b5d;
  --teal: #00a99d;
  --amber: #f2a93b;
  --off-white: #f7f9fc;
  --slate: #536273;
  --white: #ffffff;

  /* derived ramp */
  --navy-900: #050f1c;
  --navy-800: #081a2c;
  --navy-700: #0d2439;
  --navy-600: #123b5d;
  --blue-500: #1c5480;
  --blue-300: #4f87b3;

  --teal-900: #054b45;
  --teal-800: #076159;
  --teal-700: #0b7d75;
  --teal-100: #dff4f2;
  --teal-050: #eefaf9;

  --amber-800: #8a5a09;
  --amber-100: #fdf0d9;

  --ink: #0a1c2e;
  --ink-2: #3c4c5e;
  --ink-3: #6b7a8b;
  --line: #dde4ed;
  --line-2: #eaeff5;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef2f8;

  /* on-dark */
  --d-text: #e8eef6;
  --d-text-2: #a9bcd0;
  --d-text-3: #7f95ad;
  --d-line: rgba(255, 255, 255, 0.14);
  --d-line-2: rgba(255, 255, 255, 0.08);
  --d-panel: rgba(255, 255, 255, 0.045);

  /* type */
  /* Headings use a narrow grotesque at light-to-medium weight: the condensed
     width gives presence without the mass of a heavy face. */
  --font-display: "Archivo Narrow", "Arial Narrow", Arial, system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;
  /* Logo wordmark only, matching the supplied artwork. */
  --font-brand: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.3rem, 1.1rem + 0.7vw, 1.55rem);
  --text-2xl: clamp(1.55rem, 1.25rem + 1.2vw, 2.1rem);
  --text-3xl: clamp(1.95rem, 1.4rem + 2.1vw, 2.9rem);
  --text-hero: clamp(2.35rem, 1.4rem + 4.1vw, 4.3rem);

  /* space */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  --sect-y: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --wrap: 1240px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.75rem);

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --focus: 0 0 0 3px rgba(0, 169, 157, 0.32);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
video,
iframe { max-width: 100%; }

img { height: auto; display: block; }

/* must beat .btn / .card display rules */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- type */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.14;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

/* A narrow face needs no negative tracking -- the width is already tight, and
   closing it further is what made the previous setting read as heavy. Weights
   stay at 500/600; nothing on the site uses 700 or above. */
h1 { font-size: var(--text-hero); font-weight: 500; letter-spacing: 0.002em; }
h2 { font-size: var(--text-3xl); font-weight: 500; letter-spacing: 0.003em; }
h3 { font-size: var(--text-xl); font-weight: 600; }
h4 { font-size: var(--text-md); font-weight: 600; line-height: 1.35; }
h5 { font-size: var(--text-base); font-weight: 600; }

p { margin: 0 0 var(--s4); font-weight: 350; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--ink); }

a { color: var(--teal-800); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-900); }

ul, ol { margin: 0 0 var(--s4); padding-left: 1.15rem; }
li { margin-bottom: 0.4rem; }
li:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}

.small { font-size: var(--text-sm); font-weight: 350; line-height: 1.6; color: var(--ink-3); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal-800);
  margin: 0 0 var(--s4);
}
/* the meld rail */
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, transparent, var(--teal));
  border-radius: 2px;
}
.eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--teal);
  margin-left: -0.35rem;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.center { text-align: center; }
.center .lead, .center .eyebrow { margin-inline: auto; }
.center .eyebrow { justify-content: center; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--teal-800);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s var(--ease), gap 0.2s var(--ease);
}
.textlink:hover { border-bottom-color: var(--teal); gap: 0.6rem; }
.textlink .arrow, .textlink svg { flex: none; transition: transform 0.2s var(--ease); }
.textlink:hover svg { transform: translateX(2px); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mt-3 { margin-top: var(--s3) !important; }
.mt-4 { margin-top: var(--s4) !important; }
.mt-5 { margin-top: var(--s5) !important; }
.mt-6 { margin-top: var(--s6) !important; }
.mt-7 { margin-top: var(--s7) !important; }
.mb-0 { margin-bottom: 0 !important; }
.spacer { height: var(--s7); }

/* ---------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 820px; }

.sect { padding-block: var(--sect-y); position: relative; }
.sect--tight { padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
.sect--tall { padding-block: clamp(4.5rem, 2.5rem + 6vw, 8rem); }
.sect--white { background: var(--surface); }
.sect--sunken { background: var(--surface-2); }
.sect--sunken + .sect--sunken { padding-top: 0; }

.sect--dark, .sect--deep {
  background: var(--navy);
  color: var(--d-text);
}
.sect--deep {
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(18, 59, 93, 0.85), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(0, 169, 157, 0.14), transparent 55%),
    var(--navy-900);
}

/* Deep-blue alternate band. Declared after --dark/--deep so it wins the
   background at equal specificity, while inheriting all of their on-dark
   text, link, panel and diagram treatments via the --dark class. */
.sect--blue {
  background:
    radial-gradient(105% 85% at 92% 8%, rgba(0, 169, 157, 0.13), transparent 58%),
    var(--blue);
}

/* dark-context text scoping */
.sect--dark h1, .sect--dark h2, .sect--dark h3, .sect--dark h4, .sect--dark h5,
.sect--deep h1, .sect--deep h2, .sect--deep h3, .sect--deep h4, .sect--deep h5,
.hero h1, .hero h2, .hero h3, .hero h4 { color: var(--white); }

.sect--dark .lead, .sect--deep .lead, .hero .lead { color: var(--d-text-2); }
.sect--dark .small, .sect--deep .small, .hero .small { color: var(--d-text-3); }
.sect--dark .eyebrow, .sect--deep .eyebrow, .hero .eyebrow { color: var(--teal); }
.sect--dark strong, .sect--deep strong, .hero strong { color: var(--white); }
.sect--dark a:not(.btn), .sect--deep a:not(.btn), .hero a:not(.btn) { color: var(--teal); }
.sect--dark .mono, .sect--deep .mono, .hero .mono { color: var(--d-text-3); }
.sect--dark .textlink, .sect--deep .textlink, .hero .textlink { color: var(--teal); }

.sect-head {
  max-width: 66ch;
  margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
}
.sect-head.center { margin-inline: auto; }
.sect-head > :last-child { margin-bottom: 0; }

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.split > * { min-width: 0; }
.split--narrow-first { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
.split--sticky { align-items: start; }
.split--sticky > :first-child { position: sticky; top: 96px; }

.grid { display: grid; gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem); }
.grid > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- header */
.skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--teal-800);
  color: var(--white);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--r) var(--r);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; color: var(--white); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.site-header--dark {
  background: rgba(8, 26, 44, 0.72);
  border-bottom-color: var(--d-line-2);
  color: var(--white);
}
.site-header.is-stuck { box-shadow: 0 1px 24px rgba(8, 26, 44, 0.09); }

.header-in {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 70px;
}

/* Supplied logo pack. The mark is three process inks blended with `multiply`,
   isolated so the blend never reaches the page background; the wordmark is
   live text in the same serif the artwork uses. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  flex: none;
}
.logo-mark { height: 34px; width: auto; display: block; flex: none; }
.logo-word {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.42rem;
  letter-spacing: -0.012em;
  line-height: 1;
  white-space: nowrap;
}
.logo-word__ip { color: #00647f; }
.logo-word__meld { color: #201e1d; }

/* On navy, the near-black "Meld" and deep teal "IP" both need lifting. */
.site-header--dark .logo-word__ip,
.site-footer .logo-word__ip { color: #4ab4d0; }
.site-header--dark .logo-word__meld,
.site-footer .logo-word__meld { color: var(--soft-white, #F7F9FC); }

.logo--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.logo--stacked .logo-mark { height: 44px; }
.logo-tag {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--d-text-3);
  line-height: 1;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.1rem + 0.9vw, 1.15rem);
  margin-left: auto;
}
.nav a {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  color: inherit;
  opacity: 0.78;
  text-decoration: none;
  padding: 0.45rem 0.1rem;
  white-space: nowrap;
  transition: opacity 0.18s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { opacity: 1; font-weight: 600; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 0.55rem; flex: none; }
.nav-sep {
  width: 1px;
  height: 26px;
  background: var(--line);
  margin-right: 0.3rem;
}
.site-header--dark .nav-sep { background: var(--d-line); }

.burger {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  position: relative;
}
.site-header--dark .burger { border-color: var(--d-line); }
.burger span,
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.24s var(--ease), opacity 0.18s var(--ease);
}
.burger::before { top: 15px; }
.burger span { top: 21px; }
.burger::after { top: 27px; }
.burger[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav { padding-bottom: var(--s5); }
.mobile-nav ul { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid var(--line); }
.site-header--dark .mobile-nav li { border-bottom-color: var(--d-line-2); }
.mobile-nav a {
  display: block;
  padding: 0.9rem 0.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: inherit;
  text-decoration: none;
}
.mobile-nav a[aria-current="page"] { color: var(--teal-800); }
.site-header--dark .mobile-nav a[aria-current="page"] { color: var(--teal); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.72rem 1.3rem;
  border: 1px solid var(--teal-700);
  border-radius: var(--r-sm);
  background: var(--teal-700);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.925rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
    transform 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { background: var(--teal-800); border-color: var(--teal-800); color: var(--white); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

.btn--ghost {
  background: transparent;
  color: var(--teal-800);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--teal-050);
  border-color: var(--teal-700);
  color: var(--teal-900);
}

.btn--on-dark {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}
.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}

.sect--dark .btn--ghost, .sect--deep .btn--ghost, .hero .btn--ghost,
.site-header--dark .btn--ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
}
.sect--dark .btn--ghost:hover, .sect--deep .btn--ghost:hover, .hero .btn--ghost:hover,
.site-header--dark .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}

.btn--sm { min-height: 38px; padding: 0.5rem 0.95rem; font-size: 0.855rem; }
.btn--lg { min-height: 52px; padding: 0.95rem 1.75rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

/* ---------------------------------------------------------------- surfaces */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 1rem + 1.1vw, 2.1rem);
  min-width: 0;
}
.panel--sunken { background: var(--surface-2); border-color: var(--line-2); }
.panel > :last-child { margin-bottom: 0; }

.sect--dark .panel, .sect--deep .panel, .hero .panel {
  background: var(--d-panel);
  border-color: var(--d-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sect--dark .panel--sunken, .sect--deep .panel--sunken {
  background: rgba(0, 0, 0, 0.22);
  border-color: var(--d-line-2);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.3rem, 1rem + 0.9vw, 1.85rem);
  overflow: hidden;
  min-width: 0;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--teal), rgba(0, 169, 157, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.card:hover { border-color: #c3d2e2; transform: translateY(-2px); }
.card:hover::before { transform: scaleX(1); }
.card h3, .card h4 { margin-bottom: 0; }
.card p { margin-bottom: 0; color: var(--ink-2); font-size: var(--text-base); }
.card--flush { padding: 0; }
/* The whole card is the anchor, so decoration and padding are set on it
   directly -- targeting a descendant `a` matched nothing and left every line
   of card text underlined. */
a.card--link {
  display: block;
  padding: clamp(1.3rem, 1rem + 0.9vw, 1.85rem);
  text-decoration: none;
  color: inherit;
}

/* Five roles: a hairline row list reads more evenly than a 3+2 grid. */
.rolelist {
  border-top: 1px solid var(--line);
}
.rolerow {
  display: grid;
  grid-template-columns: 3.25rem minmax(11rem, 15rem) 1fr auto;
  align-items: baseline;
  column-gap: var(--s5);
  padding: 1.5rem 0.75rem 1.5rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.rolerow:hover,
.rolerow:focus-visible {
  background: var(--teal-050, #f2f9f8);
  padding-left: 0.75rem;
}
.rolerow-n {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--teal-700);
}
.rolerow-t {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.rolerow-d {
  font-weight: 350;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 54ch;
}
.rolerow-a {
  display: inline-flex;
  align-items: center;
  color: var(--teal-700);
  transition: transform 0.2s var(--ease);
}
.rolerow:hover .rolerow-a { transform: translateX(3px); }

@media (max-width: 900px) {
  .rolerow {
    grid-template-columns: 2.5rem 1fr auto;
    row-gap: 0.4rem;
    align-items: start;
  }
  .rolerow-t { grid-column: 2; }
  .rolerow-d { grid-column: 2 / -1; }
  .rolerow-a { grid-row: 1; grid-column: 3; }
}

.sect--dark .card, .sect--deep .card, .hero .card {
  background: var(--d-panel);
  border-color: var(--d-line);
}
.sect--dark .card:hover, .sect--deep .card:hover { border-color: rgba(0, 169, 157, 0.5); }
.sect--dark .card p, .sect--deep .card p, .hero .card p { color: var(--d-text-2); }

.card-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--teal-800);
  margin-bottom: 0.15rem;
}
.sect--dark .card-num, .sect--deep .card-num { color: var(--teal); }
.card-media { margin: 0; }
.card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-body { padding: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem); display: flex; flex-direction: column; gap: 0.5rem; }
.card-foot {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.sect--dark .card-foot, .sect--deep .card-foot { border-top-color: var(--d-line-2); }

/* numbered rows */
.rows { border-top: 1px solid var(--line); }
.row-item {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1rem, 0.5rem + 2vw, 3rem);
  padding: clamp(1.15rem, 0.9rem + 0.9vw, 1.75rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.row-item > * { min-width: 0; }
.row-item h4 { margin: 0; }
.row-item .mono { margin-right: 0.5rem; color: var(--teal-800); font-weight: 600; }
.row-item p { margin: 0; color: var(--ink-2); font-size: var(--text-base); }
.sect--dark .rows, .sect--deep .rows { border-top-color: var(--d-line); }
.sect--dark .row-item, .sect--deep .row-item { border-bottom-color: var(--d-line); }
.sect--dark .row-item p, .sect--deep .row-item p { color: var(--d-text-2); }
.sect--dark .row-item .mono, .sect--deep .row-item .mono { color: var(--teal); }

/* checklists */
.checks { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: 0.7rem; }
.checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 1.5rem; }
.check {
  position: relative;
  padding-left: 1.9rem;
  margin: 0;
  font-size: var(--text-base);
  color: var(--ink-2);
  line-height: 1.55;
}
.check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 15px;
  height: 8px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.sect--dark .check, .sect--deep .check, .hero .check { color: var(--d-text-2); }

.deflist { margin: 0; }
.deflist dt { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin-top: var(--s4); }
.deflist dt:first-child { margin-top: 0; }
.deflist dd { margin: 0.3rem 0 0; color: var(--ink-2); font-size: var(--text-base); }

.actions-list { list-style: none; margin: 0; padding: 0; }
.actions-list li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--text-base);
  margin: 0;
}
.actions-list li:last-child { border-bottom: 0; }
.sect--dark .actions-list li, .sect--deep .actions-list li { border-bottom-color: var(--d-line-2); }

/* pills */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  border: 1px solid var(--teal-100);
  background: var(--teal-050);
  color: var(--teal-900);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pill--slate { background: var(--surface-3); border-color: var(--line); color: var(--ink-2); }
.pill--amber { background: var(--amber-100); border-color: #f3ddb4; color: var(--amber-800); }
.sect--dark .pill, .sect--deep .pill, .hero .pill {
  background: rgba(0, 169, 157, 0.14);
  border-color: rgba(0, 169, 157, 0.4);
  color: #7fe3da;
}
.sect--dark .pill--slate, .sect--deep .pill--slate {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--d-line);
  color: var(--d-text-2);
}

.badge-ref {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink-2);
  border: 1px solid var(--line);
}

/* notices */
/* Block, not flex: notices commonly hold a heading + body as siblings, which
   a row flex container would split into two cramped columns. */
.notice {
  display: block;
  padding: 1rem 1.15rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate);
  background: var(--surface-2);
  font-size: var(--text-base);
  color: var(--ink-2);
  margin-bottom: var(--s4);
}
.notice > :last-child { margin-bottom: 0; }
.notice h4 { margin-bottom: 0.35rem; color: inherit; }
.notice > svg { float: left; margin: 0.25rem 0.7rem 0.1rem 0; }
.notice::after { content: ""; display: block; clear: both; }
.notice--info { border-left-color: var(--teal-700); background: var(--teal-050); border-color: var(--teal-100); color: var(--teal-900); }
.notice--legal { border-left-color: var(--amber); background: var(--amber-100); border-color: #f3ddb4; color: var(--amber-800); }
.sect--dark .notice, .sect--deep .notice, .hero .notice {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--d-line);
  color: var(--d-text-2);
}

.hint { display: block; font-size: var(--text-sm); color: var(--ink-3); margin-top: 0.3rem; line-height: 1.5; }

/* Generic label used before a value (contact rows, KPI-style pairs). */
.k {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.2rem;
}

/* kpis — markup is a <dl> of <dt> label / <dd> value + <small> qualifier */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.kpi { background: var(--surface); padding: 1.1rem 1.25rem; }
.kpi dt {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kpi dd {
  margin: 0.45rem 0 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.05;
}
.kpi dd small {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--ink-3);
}
.app-main .kpis { border-radius: var(--r); }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
  background:
    radial-gradient(115% 85% at 12% -10%, rgba(18, 59, 93, 0.9), transparent 62%),
    radial-gradient(80% 65% at 96% 8%, rgba(0, 169, 157, 0.16), transparent 58%),
    var(--navy);
  color: var(--d-text);
}
.hero--page { padding-block: clamp(3rem, 1.8rem + 4vw, 5rem); }
.hero-in { position: relative; z-index: 2; }
/* Scrim: keeps the converging field from cutting through headline and body copy. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, var(--navy) 12%, rgba(8, 26, 44, 0.82) 38%, rgba(8, 26, 44, 0.12) 62%, transparent 78%);
}
/* On narrow screens the copy fills the full width, so a horizontal scrim
   cannot protect it. Switch to a vertical wash and calm the field. */
@media (max-width: 900px) {
  .hero::after {
    background: linear-gradient(180deg, rgba(8, 26, 44, 0.94) 0%, rgba(8, 26, 44, 0.88) 55%, rgba(8, 26, 44, 0.55) 100%);
  }
  .hero-net { opacity: 0.4; }
}
.hero-copy > :last-child { margin-bottom: 0; }
.hero h1 { max-width: 20ch; }
.hero .lead { max-width: 56ch; }

.hero-tag {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--teal);
  margin: 0 0 var(--s4);
}

.hero-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.62;
  pointer-events: none;
}
.net-pulse { animation: netPulse 4.5s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
.net-pulse:nth-child(2n) { animation-delay: 0.7s; }
.net-pulse:nth-child(3n) { animation-delay: 1.5s; }
.net-pulse:nth-child(5n) { animation-delay: 2.3s; }
@keyframes netPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.25); }
}

.hero-figure { min-width: 0; }
.hero-figure .panel { padding: clamp(1rem, 0.7rem + 1vw, 1.6rem); }

/* diagrams */
.diagram { width: 100%; height: auto; display: block; }
.diagram text { font-family: var(--font-display); fill: var(--ink); }
.dg-in { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }

/* dark diagram context */
.hero .diagram text, .sect--dark .diagram text, .sect--deep .diagram text { fill: var(--d-text); }
.hero .dg-in, .sect--dark .dg-in, .sect--deep .dg-in {
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(0, 169, 157, 0.5);
}

.dash-flow { stroke-dasharray: 5 7; animation: dashFlow 2.4s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -24; } }

.imgframe {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-3);
}
.imgframe img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.imgframe--dark { border-color: var(--d-line); background: var(--navy-700); }
.imgframe--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 26, 44, 0) 40%, rgba(8, 26, 44, 0.55));
  pointer-events: none;
}

/* ---------------------------------------------------------------- forms */
.field { margin-bottom: var(--s5); min-width: 0; }
.field:last-child { margin-bottom: 0; }
.field > label,
.field > .side-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
  letter-spacing: 0;
}
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); }
.field-row > * { min-width: 0; }

.req { color: #b4341f; font-weight: 600; margin-left: 0.15rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="password"], select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
textarea { min-height: 130px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23536273' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.4rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal-700);
  box-shadow: var(--focus);
}
input::placeholder, textarea::placeholder { color: #9aa7b6; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: #c0392b;
  background: #fdf6f5;
}

.field input[type="checkbox"], .field input[type="radio"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--teal-700); flex: none; margin-top: 0.15rem; }
.field.field--check > label,
label.field--check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-weight: 400;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink-2);
  line-height: 1.55;
}

.err {
  display: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #b4341f;
  margin-top: 0.3rem;
}
.err.is-shown:not(:empty) { display: block; }

.form-msg {
  display: none;
  padding: 1rem 1.15rem;
  border-radius: var(--r);
  font-size: var(--text-base);
  margin-bottom: var(--s5);
  border: 1px solid transparent;
  border-left-width: 3px;
}
.form-msg.is-shown { display: block; }
.form-msg > :last-child { margin-bottom: 0; }
.form-msg--ok { background: var(--teal-050); border-color: var(--teal-100); border-left-color: var(--teal-700); color: var(--teal-900); }
.form-msg--err { background: var(--amber-100); border-color: #f3ddb4; border-left-color: var(--amber); color: var(--amber-800); }

.news-form { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.news-form input { flex: 1 1 100%; min-width: 0; min-height: 40px; background: rgba(255, 255, 255, 0.07); border-color: var(--d-line); color: var(--white); }
.news-form input::placeholder { color: var(--d-text-3); }
.news-form input:focus { border-color: var(--teal); }

/* stepper */
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
}
.stepper li { margin: 0; }
.stepper button,
.stepper li > span {
  display: inline-block;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  padding: 0.34rem 0.6rem;
  min-height: 32px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink-3);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
@media (max-width: 700px) {
  .stepper button, .stepper li > span { min-height: 40px; }
}
.stepper button:hover { background: #e2e8f1; color: var(--ink-2); }
.stepper button[aria-current="step"] {
  background: var(--teal-800);
  color: var(--white);
  font-weight: 600;
}
.stepper button.is-done {
  background: var(--teal-050);
  color: var(--teal-900);
  border-color: var(--teal-100);
}

.progress { height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin-bottom: var(--s5); }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal-700), var(--teal)); border-radius: 4px; transition: width 0.35s var(--ease); }

.step-panel[hidden] { display: none; }
.form-nav { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- tables */
.table-scroll { overflow-x: auto; min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--text-base);
}
table.data th, table.data td {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
table.data th {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--line);
  white-space: nowrap;
}
table.data tbody tr:hover { background: var(--surface-2); }
table.data caption {
  text-align: left;
  font-size: var(--text-sm);
  color: var(--ink-3);
  padding-bottom: 0.6rem;
  /* The caption inherits the table's min-width inside .table-scroll, which
     pushed it out of view on narrow screens. Pin it to the visible column. */
  position: sticky;
  left: 0;
  width: min(100%, 34ch);
  white-space: normal;
}
/* Reference codes must never break mid-identifier. */
table.data td:first-child, table.data .mono { white-space: nowrap; }

.status {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--surface-3);
  color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.app-main table.data .status { white-space: nowrap; font-size: 0.72rem; }

/* ---------------------------------------------------------------- portal */
.demo-banner {
  background: var(--amber-100);
  border-bottom: 1px solid #f0d6a5;
  color: var(--amber-800);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.65rem 0;
}
.demo-banner .wrap { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

.app {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 0;
  align-items: start;
  max-width: var(--wrap);
  margin-inline: auto;
}
.app > * { min-width: 0; }
.app-side {
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  padding: var(--s5) 0;
  position: sticky;
  top: 70px;
  align-self: start;
}
.app-side .who {
  display: block;
  padding: 0 var(--gutter) var(--s5);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.app-side .who strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: -0.014em;
}
.app-side .who span { display: block; font-size: var(--text-sm); color: var(--ink-3); }

.app-side .side-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 var(--gutter);
  margin: var(--s5) 0 0.5rem;
}
.app-side .side-label:first-child { margin-top: 0; }
.app-side ul { list-style: none; margin: 0; padding: 0; }
.app-side li { margin: 0; }
.app-side a {
  display: block;
  padding: 0.55rem var(--gutter);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.app-side a:hover { background: var(--surface-3); color: var(--ink); }
.app-side a[aria-current="page"] { border-left-color: var(--teal); color: var(--teal-900); background: var(--teal-050); }

.app-main { padding: var(--s6) clamp(1.15rem, 0.6rem + 2vw, 2.25rem) var(--s8); min-width: 0; }
.app-main table.data th, .app-main table.data td { padding: 0.55rem 0.6rem; }
.app-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--s6);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}
.app-head h1 { font-size: var(--text-2xl); margin: 0; }
.app-head > * { min-width: 0; }

.app-grid { display: grid; gap: var(--s5); }
.app-grid > * { min-width: 0; }
/* Portal panels routinely carry 5-column tables; two-up only when there is
   genuinely room, otherwise the tables are forced into horizontal scroll. */
@media (min-width: 1500px) {
  .app-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- filters */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  margin-bottom: var(--s6);
}
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filter-bar input[type="search"], .filter-bar select { min-height: 40px; flex: 1 1 180px; min-width: 0; }
.result-count { font-size: var(--text-sm); color: var(--ink-3); font-weight: 600; }

.opp-card { display: flex; flex-direction: column; }
.empty-state {
  text-align: center;
  padding: var(--s8) var(--s5);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--ink-3);
}
.empty-state h3 { color: var(--ink-2); }

/* ---------------------------------------------------------------- content */
.prose { max-width: 74ch; }
.prose h2 { margin-top: var(--s7); font-size: var(--text-2xl); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s6); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }

.toc-stack { position: sticky; top: 96px; }
.toc {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.25rem;
  background: var(--surface-2);
  margin-bottom: var(--s5);
}
.toc h2, .toc h3 {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.7rem;
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: 0.4rem; }
.toc a { font-size: var(--text-base); color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--teal-800); text-decoration: underline; }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
/* The list item carries the rail node and rhythm; .timeline-step is the label. */
.timeline > li { position: relative; padding: 0 0 var(--s6) 2.1rem; margin: 0; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--teal);
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline-step {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-800);
  margin-bottom: 0.3rem;
}
.timeline > li h3, .timeline > li h4 { margin: 0 0 0.4rem; font-size: var(--text-lg); }
.timeline > li p { margin: 0; font-size: var(--text-base); color: var(--ink-2); }

.stages { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stages--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage { background: var(--surface); padding: 1.35rem 1.4rem 1.5rem; position: relative; }
.stage-n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--stage-ink, var(--teal-800));
  margin-bottom: 0.55rem;
}
/* These panels sit on a dark band but are light themselves, so the on-dark
   heading colour has to be reverted or the stage names disappear. */
.stage h3,
.sect--dark .stage h3,
.sect--deep .stage h3 {
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.stage p { margin: 0; font-size: var(--text-sm); color: var(--ink-2); }

/* A slight, distinct wash per stage, drawn from the brand palette. Kept low
   enough to hold text contrast well above AA. */
.stages--6 .stage:nth-child(1) { background: #eef7f5; --stage-ink: #0b7d75; }
.stages--6 .stage:nth-child(2) { background: #eef3f9; --stage-ink: #1d5c8a; }
.stages--6 .stage:nth-child(3) { background: #f3f2f6; --stage-ink: #55507a; }
.stages--6 .stage:nth-child(4) { background: #fdf6e9; --stage-ink: #9a6612; }
.stages--6 .stage:nth-child(5) { background: #edf6f2; --stage-ink: #14705a; }
.stages--6 .stage:nth-child(6) { background: #e9eff7; --stage-ink: #123b5d; }

.status-flow { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.status-flow li { margin: 0; }

.who { display: grid; gap: var(--s5); }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 1.35rem; font-size: var(--text-base); }
.contact-list li > div { min-width: 0; }
.contact-list address { font-style: normal; line-height: 1.6; }
.contact-list li:last-child { margin-bottom: 0; }
.contact-list svg { flex: none; margin-top: 0.2rem; color: var(--teal-700); }
.contact-list a:not(.textlink) { color: var(--teal-800); text-decoration: underline; text-underline-offset: 2px; }

.map-embed {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-3);
  line-height: 0;
}
.map-embed iframe { width: 100%; height: 320px; border: 0; display: block; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  background: var(--navy-900);
  color: var(--d-text-2);
  padding-top: var(--s8);
  font-size: var(--text-base);
}
.site-footer .logo { color: var(--white); margin-bottom: var(--s4); }
.site-footer h2, .site-footer h3 {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-text-3);
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; line-height: 1.5; }
.site-footer a { color: var(--d-text-2); text-decoration: none; }
.site-footer a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
  padding-bottom: var(--s7);
}
.footer-top > * { min-width: 0; }
.footer-mission { max-width: 40ch; color: var(--d-text-3); font-size: var(--text-base); }
.footer-social { display: flex; gap: 0.7rem; margin-top: var(--s4); }
.footer-social span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--d-line);
  border-radius: var(--r-sm);
  color: var(--d-text-3);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.35rem;
  padding: var(--s5) 0;
  border-top: 1px solid var(--d-line-2);
  font-size: var(--text-sm);
}
.footer-legal button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--d-text-2);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.footer-legal button:hover { color: var(--teal); text-decoration: underline; }

.footer-note {
  border-top: 1px solid var(--d-line-2);
  padding: var(--s5) 0 var(--s6);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--d-text-3);
  display: grid;
  gap: 0.6rem;
}
.footer-brandline { color: var(--d-text-2); font-weight: 600; font-size: var(--text-sm); }

/* ---------------------------------------------------------------- cookie */
.cookie {
  position: fixed;
  left: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 150;
  width: min(430px, calc(100vw - 1.5rem));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(8, 26, 44, 0.2);
  padding: 1.35rem;
}
.cookie h2 { font-size: var(--text-lg); margin-bottom: 0.6rem; }
.cookie p { font-size: var(--text-base); color: var(--ink-2); margin-bottom: 1rem; }
.cookie[hidden] { display: none; }

/* ---------------------------------------------------------------- motion */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--teal-700);
  outline-offset: 2px;
  border-radius: 3px;
}
.sect--dark :focus-visible, .sect--deep :focus-visible, .hero :focus-visible,
.site-header--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--teal); }

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

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-actions { display: none; }
  .burger { display: block; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .app { grid-template-columns: 1fr; }
  .app-side { position: static; border-right: 0; border-bottom: 1px solid var(--line); }
  .app-side ul { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0 var(--s5); }
  .app-side a { border-left: 0; border-bottom: 3px solid transparent; padding: 0.5rem 0.6rem; border-radius: var(--r-sm); }
  .app-side a[aria-current="page"] { border-left: 0; border-bottom-color: var(--teal); }
}

@media (max-width: 960px) {
  .split, .split--narrow-first { grid-template-columns: 1fr; }
  .split--sticky > :first-child { position: static; }
  .toc-stack { position: static; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stages--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-item { grid-template-columns: 1fr; gap: 0.5rem; }
  .hero h1 { max-width: 24ch; }
}

@media (max-width: 680px) {
  :root { --text-md: 1rem; }
  .g-2, .g-3, .g-4, .g-2-lg, .checks--2, .app-grid--2, .field-row { grid-template-columns: 1fr; }
  .stages--6 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .btn-row { gap: 0.6rem; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .map-embed iframe { height: 250px; }
  .cookie { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; width: auto; }
}

@media (min-width: 961px) {
  .g-2-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- print */
@media print {
  .site-header, .site-footer, .cookie, .burger, .mobile-nav, .hero-net, .demo-banner { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .sect { padding-block: 1rem; }
  a { color: #000; text-decoration: underline; }
  .reveal { opacity: 1; transform: none; }
}


/* ---------- Attachment list ---------- */
.filelist {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.filelist__item {
  font-size: var(--text-sm);
  font-weight: 350;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .42rem .6rem;
  word-break: break-word;
}
.filelist__item--bad {
  color: #8a2b16;
  background: #fdf1ec;
  border-color: #f0c9b9;
}
input[type="file"] {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 350;
  width: 100%;
  max-width: 100%;
  padding: .55rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-2);
}
input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 500;
  margin-right: .7rem;
  padding: .42rem .85rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--blue);
  cursor: pointer;
  min-height: 34px;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--teal-700);
  color: var(--teal-800);
}
input[type="file"]:focus-visible {
  outline: 3px solid var(--teal-700);
  outline-offset: 2px;
}