/* =====================================================================
   JT Holdings Group LLC : design system
   Concept: Mission -> Intelligence -> Transformation.
   Visual language: routed traces and terminal nodes (drawn from the JT logo
   mark), royal blue + teal on light neutrals, deep midnight environments for
   the signature system moments.
   ===================================================================== */

@import url("fonts.css");

:root {
  /* colour : DARK THEME, 2026-09-22 (round 6).
     The client asked for a dark technical theme, so the page no longer alternates
     light and dark bands. There is ONE theme: every surface is a step on a single
     dark ladder, darkest at the page base, lifting slightly for panels and for the
     sections that used to be "paper" and "ice". The approved brand colours are
     unchanged (royal blue, teal, cyan); what changed is which of them carries the
     background and which carries the text.

     Surface ladder, darkest first:
       --c-bg        page base
       --c-surface   panels, cards, header, footer, form controls
       --c-surface-2 lifted panel, hover, selected
       --c-paper     the old .is-paper band
       --c-ice       the old .is-ice band
       --c-ink       .is-dark band (brand midnight, unchanged)
       --c-navy      .is-navy band (unchanged)
     The previous light palette is kept in css/main.css.light-backup. */

  --c-bg: #050b18;           /* page base, off-black not pure black */
  --c-surface: #0a1426;      /* panels, cards, inputs */
  --c-surface-2: #0e1b31;    /* lifted panel, hover, selected */
  --c-surface-3: #13233f;    /* highest lift, pressed and active */

  --c-ink: #08152f;          /* midnight substrate, .is-dark band */
  --c-ink-2: #0d1f4b;
  --c-ink-3: #132a63;
  --c-navy: #0a1b3d;         /* deep navy, .is-navy band */
  --c-navy-2: #10254f;
  --c-royal: #1b3fd1;        /* primary authority */
  --c-royal-2: #2b53e8;      /* lifted royal, gradients and hover depth */
  --c-royal-deep: #142f9e;
  /* Royal blue is a button FILL on this theme, not a text colour: #1b3fd1 on the
     dark base is 2.51:1, far below AA. --c-link is the same hue lifted until it
     passes on every surface in the ladder (7.4:1 on the base, 6.4:1 on navy). */
  --c-link: #6f9dff;
  --c-royal-soft: rgba(43, 83, 232, 0.16);   /* was a light tint, now a dark one */
  --c-teal: #15b3af;         /* innovation, lifted for legibility on dark */
  --c-teal-deep: #0f9b98;
  --c-teal-soft: rgba(21, 179, 175, 0.16);
  --c-cyan: #5fe0e6;         /* active data accent */
  --c-cyan-deep: #5fe0e6;    /* the light-surface variant is no longer needed */
  --c-ice: #081630;          /* the old ice band, now a blue-tinted dark step */
  --c-ice-2: #0a1a38;
  --c-paper: #071021;        /* the old paper band */
  --c-paper-2: #091528;
  --c-white: #ffffff;        /* stays TRUE white: text on royal, .btn--light */
  --c-line: rgba(147, 176, 224, 0.15);
  --c-line-strong: rgba(147, 176, 224, 0.3);
  --c-text: #e7eefc;
  --c-muted: #9fb2d0;
  --c-faint: #7286a8;
  --c-focus: #5fe0e6;
  --c-error: #ff8b80;
  --c-error-soft: rgba(255, 139, 128, 0.14);
  --c-ok: #4fd6c4;

  /* dark environment tokens : the bands that were always dark. They now sit on a
     dark page, so they stay as they were. */
  --d-text: #edf2fa;
  --d-muted: #a9b6cc;
  --d-faint: #7386a6;
  --d-line: rgba(255, 255, 255, 0.12);
  --d-line-strong: rgba(255, 255, 255, 0.22);
  --d-surface: rgba(255, 255, 255, 0.04);

  /* type */
  --f-sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-0: 0.8125rem;
  --fs-1: 0.9375rem;
  --fs-2: 1.0625rem;
  --fs-3: 1.25rem;
  --fs-4: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-5: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  --fs-6: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem);
  --fs-7: clamp(2.7rem, 1.6rem + 4.6vw, 5.4rem);
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.6;

  /* space and shape */
  --gutter: clamp(20px, 4vw, 64px);
  --container: 1320px;
  --narrow: 760px;
  --radius: 6px;
  --radius-lg: 10px;
  --nav-h: 72px;
  --section: clamp(88px, 11vw, 160px);
  --shadow-1: 0 1px 2px rgba(8, 21, 47, 0.06), 0 10px 30px -12px rgba(8, 21, 47, 0.18);
  --shadow-2: 0 1px 2px rgba(8, 21, 47, 0.08), 0 30px 60px -24px rgba(8, 21, 47, 0.28);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: 3px; }
.is-dark :focus-visible { outline-color: var(--c-cyan); }
::selection { background: var(--c-teal); color: var(--c-ink); }
.is-dark ::selection { background: var(--c-teal); color: var(--c-white); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--c-ink); color: var(--c-white); padding: 10px 14px; border-radius: var(--radius);
  font-weight: 500;
}
.skip-link:focus { top: 12px; }

/* ---------- type ---------- */
.display, h1, h2, h3, h4 {
  font-family: var(--f-sans);
  font-stretch: 108%;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: var(--lh-snug);
  color: var(--c-text);
  text-wrap: balance;
}
h1 { font-size: var(--fs-7); line-height: var(--lh-tight); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-6); line-height: 1.06; letter-spacing: -0.028em; }
h3 { font-size: var(--fs-4); }
h4 { font-size: var(--fs-3); font-stretch: 100%; letter-spacing: -0.01em; }
.is-dark :is(h1, h2, h3, h4, .display) { color: var(--d-text); }
.lede { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5; color: var(--c-muted); max-width: 40ch; text-wrap: pretty; }
.is-dark .lede { color: var(--d-muted); }
.muted { color: var(--c-muted); }
.is-dark .muted { color: var(--d-muted); }
.mono { font-family: var(--f-mono); font-size: var(--fs-0); letter-spacing: 0.02em; }
.label {
  font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-teal-deep); font-weight: 500;
}
.is-dark .label { color: var(--c-cyan); }
p + p { margin-top: 1em; }
.measure { max-width: 62ch; text-wrap: pretty; }
strong { font-weight: 600; }

/* ---------- layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * 0.62); }
.section--flush-top { padding-top: 0; }
.is-dark { background: var(--c-ink); color: var(--d-text); }
.is-paper { background: var(--c-paper); }
.section-head { max-width: var(--narrow); margin-bottom: clamp(40px, 5vw, 72px); }
.section-head h2 { margin-bottom: 18px; }
.section-head .lede { max-width: 56ch; }
.grid { display: grid; gap: var(--gutter); }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-5-7 { grid-template-columns: 5fr 7fr; }
  .grid-7-5 { grid-template-columns: 7fr 5fr; }
  .grid-4-8 { grid-template-columns: 4fr 8fr; }
}
.rule { border: 0; border-top: 1px solid var(--c-line); margin: 0; }
.is-dark .rule { border-color: var(--d-line); }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--c-royal); --btn-fg: var(--c-white); --btn-bd: var(--c-royal);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  font-weight: 500; font-size: var(--fs-1); letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background 0.25s var(--ease-out), border-color 0.25s, color 0.25s, transform 0.2s var(--ease-out);
}
.btn:hover { --btn-bg: var(--c-royal-deep); --btn-bd: var(--c-royal-deep); }
.btn:active { transform: translateY(1px); }
.btn .i { width: 16px; height: 16px; flex: none; transition: transform 0.3s var(--ease-out); }
.btn:hover .i { transform: translateX(3px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-text); --btn-bd: var(--c-line-strong); }
.btn--ghost:hover { --btn-bg: var(--c-surface-2); --btn-bd: var(--c-cyan); --btn-fg: var(--c-text); }
.is-dark .btn--ghost { --btn-fg: var(--d-text); --btn-bd: var(--d-line-strong); }
.is-dark .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.08); --btn-bd: var(--d-text); --btn-fg: var(--d-text); }
.btn--teal { --btn-bg: var(--c-teal); --btn-bd: var(--c-teal); }
.btn--teal:hover { --btn-bg: var(--c-teal-deep); --btn-bd: var(--c-teal-deep); }
.btn--light { --btn-bg: var(--c-white); --btn-fg: var(--c-ink); --btn-bd: var(--c-white); }
.btn--light:hover { --btn-bg: var(--c-paper); --btn-bd: var(--c-paper); }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: var(--fs-2); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none;
  color: var(--c-link); border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
.link:hover { border-color: currentColor; }
.is-dark .link { color: var(--c-cyan); }
.link .i { width: 14px; height: 14px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  background: rgba(5, 11, 24, 0.82); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--c-line); }
.site-header > .container { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; height: 100%; margin-right: auto; }
.brand img { height: 30px; width: auto; }
@media (min-width: 1024px) { .brand img { height: 34px; } }
.nav { display: none; }
@media (min-width: 1024px) { .nav { display: flex; align-items: center; height: 100%; gap: 0; } }
@media (min-width: 1024px) and (max-width: 1199px) { .nav-link { padding: 10px 9px; font-size: 0.9rem; } .nav-cta { font-size: 0.875rem; padding: 0 14px; } .brand img { height: 28px; } }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--radius);
  font-size: var(--fs-1); font-weight: 500; color: var(--c-text); text-decoration: none; background: none; border: 0; cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.nav-link:hover, .nav-link[aria-expanded="true"], .nav-link[aria-current="page"] { color: var(--c-link); background: var(--c-royal-soft); }
.nav-link .chev { width: 12px; height: 12px; transition: transform 0.25s var(--ease-out); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-cta { display: none; }
@media (min-width: 1024px) { .nav-cta { display: inline-flex; margin-left: 12px; } }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--c-line);
  border-radius: var(--radius); background: var(--c-surface); cursor: pointer;
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }
.menu-toggle svg { width: 20px; height: 20px; }
.menu-toggle .x { display: none; }
.menu-toggle[aria-expanded="true"] .bars { display: none; }
.menu-toggle[aria-expanded="true"] .x { display: block; }

/* mega navigation */
.mega {
  position: absolute; left: 0; right: 0; top: var(--nav-h);
  background: var(--c-surface); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega-inner { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; min-height: 420px; }
.mega-inner > * { min-width: 0; }
.mega-visual { margin: 0; grid-column: 3; min-height: 420px; }
.mega-list { border-right: 1px solid var(--c-line); padding: 28px 0; }
.mega-list h3 { font-size: 0.75rem; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--c-faint); padding: 0 32px 14px; font-stretch: 100%; }
.mega-tab {
  display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; gap: 12px;
  padding: 12px 32px; border: 0; background: none; cursor: pointer; font-size: var(--fs-1); font-weight: 500; color: var(--c-text);
  border-left: 2px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mega-tab .i { width: 14px; height: 14px; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.25s var(--ease-out); color: var(--c-teal); }
.mega-tab:hover, .mega-tab[aria-selected="true"] { background: var(--c-paper); color: var(--c-link); border-left-color: var(--c-teal); }
.mega-tab[aria-selected="true"] .i { opacity: 1; transform: none; }
.mega-panel { padding: 36px 44px; display: grid; grid-template-rows: auto 1fr auto; gap: 22px; }
.mega-panel h4 { font-size: var(--fs-4); font-stretch: 108%; letter-spacing: -0.02em; }
.mega-panel p { color: var(--c-muted); max-width: 52ch; }
.mega-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; align-content: start; }
.mega-sub li { position: relative; padding-left: 18px; font-size: var(--fs-1); color: var(--c-text); }
.mega-sub li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--c-teal); }
.mega-visual { position: relative; overflow: hidden; background: var(--c-ink); }
.mega-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.4s; }
.mega-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 21, 47, 0.05) 0%, rgba(8, 21, 47, 0.85) 100%); }
.mega-visual figcaption { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 1; color: var(--d-text); }
.mega-visual figcaption .label { display: block; margin-bottom: 8px; }
.mega-visual figcaption strong { font-size: var(--fs-3); font-weight: 600; letter-spacing: -0.01em; display: block; }
.mega-foot { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.mega-panel .fade { transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out); }
.mega-panel.is-switching .fade { opacity: 0; transform: translateY(6px); }

/* mobile drawer */
.drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99; background: var(--c-surface); overflow-y: auto;
  transform: translateX(100%); visibility: hidden; transition: transform 0.4s var(--ease-out), visibility 0s linear 0.4s; padding: 12px var(--gutter) 40px;
}
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
@media (min-width: 1024px) { .drawer { display: none; } }
.drawer-level { display: none; }
.drawer-level.is-active { display: block; }
.drawer a, .drawer button.drawer-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; border: 0; border-bottom: 1px solid var(--c-line);
  background: none; text-align: left; font-size: var(--fs-3); font-weight: 500; color: var(--c-text); text-decoration: none; cursor: pointer;
}
.drawer .i { width: 16px; height: 16px; color: var(--c-faint); }
.drawer .back { font-size: var(--fs-1); color: var(--c-link); justify-content: flex-start; gap: 8px; border-bottom: 0; padding-bottom: 6px; }
.drawer .back .i { color: currentColor; transform: rotate(180deg); }
.drawer-sub p { color: var(--c-muted); font-size: var(--fs-1); padding: 8px 0 16px; }
.drawer-cta { margin-top: 24px; display: grid; gap: 12px; }
.drawer-cta .btn { justify-content: center; }
.drawer-meta { margin-top: 28px; font-size: var(--fs-1); color: var(--c-muted); display: grid; gap: 8px; }
body.nav-open { overflow: hidden; }

/* ---------- hero : connected intelligence ---------- */
.hero {
  position: relative; min-height: calc(100svh - var(--nav-h)); display: grid; align-items: end;
  /* translucent so the global backdrop reads through the banner, which is where the
     technical motion is most wanted; the gradient still settles the foot of the
     section into the page base so the hero has an end rather than a cut */
  background:
    linear-gradient(180deg, rgba(5, 11, 24, 0) 52%, var(--c-bg) 100%),
    linear-gradient(180deg, rgba(7, 16, 33, 0.3), rgba(5, 11, 24, 0.5));
  overflow: hidden; isolation: isolate;
}
.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(27, 63, 209, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 63, 209, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 62% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 62% 40%, #000 30%, transparent 75%);
}
.hero-net { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.hero-net svg { width: 100%; height: 100%; display: block; }
.hero-net .route { fill: none; stroke: var(--c-royal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; }
.hero-net .route.is-lit { stroke: var(--c-teal); opacity: 1; }
.hero-net .pkt { fill: var(--c-teal); }
.hero-net .node rect { fill: var(--c-surface-2); stroke: var(--c-cyan); stroke-width: 1.5; }
.hero-net .node.is-sync rect { stroke: var(--c-teal); }
.hero-net .node text { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; fill: var(--d-text); font-weight: 500; }
.hero-net .node .dot { fill: var(--c-royal); }
.hero-net .node.is-sync .dot { fill: var(--c-teal); }
.hero-net .node .ring { fill: none; stroke: var(--c-teal); stroke-width: 1; opacity: 0; }
.hero-content { position: relative; z-index: 1; padding-block: clamp(40px, 8vh, 96px) clamp(48px, 9vh, 120px); max-width: 900px; }
.hero h1 { margin-bottom: 26px; font-size: clamp(2.2rem, 1rem + 3.6vw, 4.1rem); font-stretch: 104%; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: inline-block; will-change: transform; }
.hero .lede { margin-bottom: 34px; max-width: 46ch; }
.hero-content .cta-row { margin-bottom: 0; }
.hero-tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-teal-deep); font-weight: 500; }
.hero-tag::before { content: ""; width: 28px; height: 1px; background: var(--c-teal); }
@media (min-width: 1024px) {
  .hero { align-items: center; }
  .hero-content { padding-block: 80px 96px; }
}
@media (max-width: 1023px) {
  .hero { display: block; }
  .hero-net { position: relative; height: clamp(230px, 34svh, 320px); margin-top: 12px; }
  .hero-net svg { height: 100%; }
  .hero-content { padding-top: 12px; }
}

/* ---------- positioning statement ---------- */
.statement { position: relative; }
.statement h2 { font-size: var(--fs-6); max-width: 22ch; }
.statement .statement-body { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .statement .statement-body { grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: start; }
}
.statement .statement-side { display: grid; gap: 22px; padding-top: 10px; }
.serve-list { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.serve-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-line); font-weight: 500; }
.serve-list li span { color: var(--c-faint); font-family: var(--f-mono); font-size: var(--fs-0); font-weight: 400; }

/* ---------- capability explorer ---------- */
.explorer { --tone: var(--c-royal); --tone-soft: var(--c-royal-soft); }
.explorer[data-tone="teal"] { --tone: var(--c-teal); --tone-soft: var(--c-teal-soft); }
.explorer[data-tone="midnight"] { --tone: var(--c-ink-3); --tone-soft: var(--c-paper-2); }
.explorer-shell { display: grid; gap: 0; border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--c-surface); }
@media (min-width: 1024px) { .explorer-shell { grid-template-columns: 380px 1fr; } }
.explorer-nav { background: var(--c-paper); border-right: 1px solid var(--c-line); display: none; }
@media (min-width: 1024px) { .explorer-nav { display: block; } }
.explorer-nav [role="tablist"] { display: grid; }
.explorer-tab {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 22px 28px; border: 0; border-bottom: 1px solid var(--c-line); background: none; cursor: pointer; position: relative;
  transition: background 0.25s var(--ease-out);
}
.explorer-tab:last-child { border-bottom: 0; }
.explorer-tab .t { display: block; font-size: var(--fs-3); font-weight: 600; letter-spacing: -0.015em; color: var(--c-text); font-stretch: 106%; }
.explorer-tab .s { display: block; font-size: var(--fs-0); color: var(--c-muted); margin-top: 4px; }
.explorer-tab .n { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--c-line-strong); background: var(--c-surface); transition: background 0.25s, border-color 0.25s, box-shadow 0.25s; }
.explorer-tab:hover { background: var(--c-surface-2); }
.explorer-tab[aria-selected="true"] { background: var(--c-surface); }
.explorer-tab[aria-selected="true"] .n { background: var(--tone); border-color: var(--tone); box-shadow: 0 0 0 4px var(--tone-soft); }
.explorer-tab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone); }
.explorer-tab[data-status="confirm"] .t::after { content: ""; }
.explorer-panel { position: relative; padding: clamp(28px, 4vw, 52px); display: grid; gap: 30px; min-height: 560px; }
@media (min-width: 1200px) { .explorer-panel { grid-template-columns: 1.15fr 1fr; gap: 44px; } }
.explorer-panel .label { color: var(--tone); }
.explorer-copy h3 { font-size: var(--fs-5); margin: 10px 0 16px; }
.explorer-copy .lede { max-width: 48ch; margin-bottom: 26px; }
.explorer-copy h4 { font-size: 0.8125rem; font-family: var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-faint); font-weight: 500; margin-bottom: 12px; }
.explorer-copy ul { display: grid; gap: 9px; margin-bottom: 26px; }
.explorer-copy li { position: relative; padding-left: 20px; font-size: var(--fs-1); }
.explorer-copy li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--tone); }
.explorer-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-top: 22px; border-top: 1px solid var(--c-line); }
.explorer-meta dt { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-faint); margin-bottom: 6px; }
.explorer-meta dd { margin: 0; font-size: var(--fs-1); color: var(--c-text); }
.explorer-visual { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 320px; background: var(--c-ink); }
.explorer-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.explorer-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(8, 21, 47, 0) 40%, rgba(8, 21, 47, 0.78) 100%); }
.explorer-visual .trace { position: absolute; inset: 0; z-index: 1; }
.explorer-visual .trace path { fill: none; stroke: var(--c-cyan); stroke-width: 1.5; stroke-linecap: round; opacity: 0.9; }
.explorer-visual .trace circle { fill: var(--c-cyan); }
.explorer-visual figcaption { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; color: var(--d-text); font-size: var(--fs-1); }
.explorer-visual figcaption .label { color: var(--c-cyan); display: block; margin-bottom: 6px; }
.explorer-panel .swap { transition: opacity 0.28s var(--ease-out), transform 0.36s var(--ease-out); }
.explorer-panel.is-switching .swap { opacity: 0; transform: translateY(10px); }
.explorer-next { margin-top: 6px; }
/* mobile accordion */
.explorer-acc { display: grid; }
@media (min-width: 1024px) { .explorer-acc { display: none; } }
.explorer-acc details { border-bottom: 1px solid var(--c-line); }
.explorer-acc details:first-child { border-top: 1px solid var(--c-line); }
.explorer-acc summary { list-style: none; cursor: pointer; padding: 20px 4px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.explorer-acc summary::-webkit-details-marker { display: none; }
.explorer-acc summary .t { font-size: var(--fs-3); font-weight: 600; letter-spacing: -0.015em; color: var(--c-text); font-stretch: 106%; }
.explorer-acc summary .s { display: block; font-size: var(--fs-0); color: var(--c-muted); margin-top: 4px; }
.explorer-acc summary .plus { width: 28px; height: 28px; border: 1px solid var(--c-line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--c-link); transition: transform 0.3s var(--ease-out), background 0.2s; }
.explorer-acc details[open] summary .plus { transform: rotate(45deg); background: var(--c-royal-soft); }
.explorer-acc .acc-body { padding: 0 4px 26px; display: grid; gap: 18px; }
.explorer-acc .acc-body img { border-radius: var(--radius); aspect-ratio: 16 / 10; object-fit: cover; }
.explorer-acc .acc-body ul { display: grid; gap: 8px; }
.explorer-acc .acc-body li { position: relative; padding-left: 18px; font-size: var(--fs-1); }
.explorer-acc .acc-body li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--c-teal); }

/* ---------- transformation core (pinned) ---------- */
.core { --core-h: 100svh; }
.core-stage { position: relative; height: var(--core-h); overflow: hidden; display: grid; align-items: center; }
.core-stage .container { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding-block: calc(var(--nav-h) + 28px) 44px; }
.core-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.core-head h2 { font-size: var(--fs-5); max-width: 20ch; }
.core-phase { font-family: var(--f-mono); font-size: var(--fs-0); letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); text-align: right; min-width: 200px; }
.core-phase b { display: block; color: var(--c-cyan); font-weight: 500; margin-top: 4px; font-size: 0.95rem; }
.core { position: relative; }
.core-canvas { position: relative; perspective: 1800px; min-height: 0; }
.core-canvas svg.pcb { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotateX(3deg); transform-origin: 50% 60%; overflow: visible; }
.core-canvas::before { content: ""; position: absolute; left: 6%; right: 6%; top: 8%; bottom: 2%; border-radius: 16px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(95, 224, 230, 0.04); pointer-events: none; }
/* substrate */
.pcb-board { fill: #0b1c47; stroke: rgba(95, 224, 230, 0.22); stroke-width: 1; }
.pcb-hole { fill: #08152f; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }
.pcb-hole-in { fill: #060f24; }
.pcb-silk { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.22em; fill: rgba(255, 255, 255, 0.28); }
.pcb-passive { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.8; }
.pcb-cap { fill: rgba(255, 255, 255, 0.03); stroke: rgba(255, 255, 255, 0.18); stroke-width: 0.8; }
/* traces */
.pcb-trace { fill: none; stroke: #2fb9b6; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.16; }
.pcb-trace.pcb-micro { stroke-width: 0.9; opacity: 0.12; }
.pcb-trace-lit { fill: none; stroke: #4fd4d8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.95; }
.pcb-trace.pcb-wide, .pcb-trace-lit.pcb-wide { stroke-width: 2.6; }
.pcb-trace-lit.is-hover { stroke: #8ff0f4; stroke-width: 2.2; }
.pcb-via circle { fill: #0b1c47; stroke: rgba(95, 224, 230, 0.35); stroke-width: 1; transition: stroke 0.3s, fill 0.3s; }
.pcb-via .hole { fill: #060f24; stroke: none; }
.pcb-via.is-on circle { stroke: #5fe0e6; }
.pcb-via.is-on .hole { fill: #5fe0e6; }
/* modules */
.pcb-mod { cursor: default; }
.pcb-pin { fill: rgba(255, 255, 255, 0.22); }
.pcb-body { fill: #0d2456; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }
.pcb-body-lit { fill: rgba(95, 224, 230, 0.06); stroke: #5fe0e6; stroke-width: 1.2; }
.pcb-mod.is-hover .pcb-body-lit { fill: rgba(95, 224, 230, 0.12); }
.pcb-pin1 { fill: rgba(255, 255, 255, 0.35); }
.pcb-cell { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.18); stroke-width: 0.6; }
.pcb-ball { fill: rgba(255, 255, 255, 0.22); }
.pcb-th { fill: #0b1c47; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.pcb-th-hole { fill: #060f24; }
.pcb-gate { fill: rgba(95, 224, 230, 0.12); stroke: rgba(95, 224, 230, 0.35); stroke-width: 0.8; }
.pcb-des { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; fill: rgba(255, 255, 255, 0.34); }
.pcb-label { font-family: var(--f-mono); letter-spacing: 0.14em; fill: rgba(237, 242, 250, 0.55); font-weight: 500; }
.pcb-label-lit { font-family: var(--f-mono); letter-spacing: 0.14em; fill: #edf2fa; font-weight: 500; }
.pcb-led { fill: #5fe0e6; }
/* core */
.pcb-frame { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.pcb-pad { fill: rgba(255, 255, 255, 0.22); }
.pcb-die-shadow { fill: rgba(0, 0, 0, 0.45); }
.pcb-die { fill: #0f2a66; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.2; }
.pcb-die-inner { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 0.8; }
.pcb-die-lit { fill: url(#pcb-die); stroke: #5fe0e6; stroke-width: 1.6; }
.pcb-core-title { font-family: var(--f-sans); font-weight: 600; font-stretch: 108%; letter-spacing: -0.02em; fill: rgba(237, 242, 250, 0.45); text-anchor: middle; }
.pcb-core-title.lit-text { fill: #ffffff; }
.pcb-core-sub { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; fill: rgba(95, 224, 230, 0.7); text-anchor: middle; }
.pcb-core-sub.lit-sub { fill: #5fe0e6; }
.pcb-ring { fill: none; stroke: #5fe0e6; stroke-width: 1.2; }
/* output ports */
.pcb-port-body { fill: #0d2456; stroke: rgba(255, 255, 255, 0.24); stroke-width: 1; }
.pcb-finger { fill: rgba(255, 255, 255, 0.14); }
.pcb-port-lit { fill: rgba(95, 224, 230, 0.07); stroke: #5fe0e6; stroke-width: 1.2; }
.pcb-finger-lit { fill: #5fe0e6; opacity: 0.85; }
.pcb-port-label { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; fill: #edf2fa; text-anchor: middle; font-weight: 500; }
/* pulses */
.pcb-pulse .halo { fill: #5fe0e6; opacity: 0.28; }
.pcb-pulse .dot { fill: #d9fbfc; }
/* tail into the next section */
.core-tail-in { position: absolute; left: var(--tail-x, 50%); top: var(--tail-top, 100%); bottom: 0; width: 12px; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.core-tail-out { position: absolute; left: var(--tail-x, 50%); top: 100%; width: 12px; height: 150px; transform: translateX(-50%); pointer-events: none; z-index: 3; }
.core-tail-in svg, .core-tail-out svg { width: 100%; height: 100%; overflow: visible; }
.core-tail-in path, .core-tail-out path { fill: none; stroke: #4fd4d8; stroke-width: 1.6; stroke-linecap: round; }
.core-tail-out circle { fill: #f4f6fa; stroke: #0f9b98; stroke-width: 1.6; }
@media (max-width: 899px) { .core-tail-out { height: 96px; } .core-canvas svg.pcb { transform: none; } .core-canvas::before { display: none; } }
.core-foot { display: grid; gap: 14px; }
@media (max-width: 899px) { .core-foot { display: none; } }
@media (min-width: 900px) { .core-foot { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } }
.core-foot p { font-size: var(--fs-1); color: var(--d-muted); max-width: 36ch; }
.core-foot p strong { color: var(--d-text); display: block; margin-bottom: 4px; }
@media (min-width: 900px) { .core-foot p strong { display: none; } .core-foot p { text-align: center; max-width: none; padding-inline: 12px; } }
.core-static { display: none; }
@media (max-width: 899px) {
  .core-stage .container { grid-template-rows: auto 1fr auto; padding-block: calc(var(--nav-h) + 16px) 28px; }
  .core-head { flex-direction: column; align-items: flex-start; }
  .core-phase { text-align: left; }
}

/* ---------- health IT interoperability ---------- */
.hit { position: relative; }
.hit-flow { position: relative; margin-top: clamp(32px, 4vw, 56px); }
.hit-stages { display: grid; gap: 18px; position: relative; z-index: 1; }
@media (min-width: 1024px) { .hit-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }
.hit-stage { position: relative; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 22px 20px 20px; display: grid; gap: 12px; min-height: 230px; }
.hit-stage .k { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-faint); display: flex; align-items: center; gap: 8px; }
.hit-stage .k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--c-line-strong); transition: background 0.3s, border-color 0.3s; }
.hit-stage.is-on { border-color: var(--c-teal); box-shadow: 0 0 0 4px var(--c-teal-soft); }
.hit-stage.is-on .k { color: var(--c-teal-deep); }
.hit-stage.is-on .k::before { background: var(--c-teal); border-color: var(--c-teal); }
.hit-stage h3 { font-size: var(--fs-3); font-stretch: 104%; }
.hit-stage p { font-size: var(--fs-1); color: var(--c-muted); }
.hit-stage .demo { margin-top: auto; border-top: 1px dashed var(--c-line); padding-top: 12px; font-family: var(--f-mono); font-size: 0.72rem; color: var(--c-text); display: grid; gap: 4px; line-height: 1.5; }
.hit-stage .demo span { color: var(--c-faint); }
.hit-stage .demo .dup { text-decoration: line-through; color: var(--c-faint); }
.hit-stage .demo .ok { color: var(--c-teal-deep); }
.hit-links { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; }
@media (min-width: 1024px) { .hit-links { display: block; } }
.hit-links path { fill: none; stroke: var(--c-teal); stroke-width: 1.5; stroke-linecap: round; }
.hit-links circle { fill: var(--c-teal); }
.hit-note { margin-top: 22px; font-family: var(--f-mono); font-size: 0.72rem; color: var(--c-faint); letter-spacing: 0.04em; }
.hit-copy { display: grid; gap: 20px; }
@media (min-width: 900px) { .hit-copy { grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: end; } }

/* ---------- who we serve ---------- */
.serve-shell { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
.serve-shell > * { min-width: 0; }
@media (min-width: 1024px) { .serve-shell { grid-template-columns: 1fr 1fr; } }
.orbit { position: relative; aspect-ratio: 1; max-width: 560px; margin-inline: auto; width: 100%; }
.orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit .ring { fill: none; stroke: var(--d-line); stroke-width: 1; }
.orbit .spoke { fill: none; stroke: var(--d-line-strong); stroke-width: 1.5; stroke-dasharray: 4 6; transition: stroke 0.3s, stroke-dasharray 0.3s; }
.orbit .spoke.is-on { stroke: var(--c-cyan); stroke-dasharray: none; }
.orbit .hub rect { fill: var(--c-ink-2); stroke: var(--c-cyan); stroke-width: 1.5; }
.orbit .hub text { font-family: var(--f-sans); font-weight: 600; font-size: 14px; fill: var(--d-text); letter-spacing: 0.02em; }
.orbit .hub .sub { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; fill: var(--c-cyan); }
.orbit .pkt { fill: var(--c-cyan); opacity: 0; }
.orbit-btn {
  position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; gap: 6px;
  width: clamp(104px, 22%, 140px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--d-line-strong); background: var(--c-ink);
  color: var(--d-text); font-weight: 500; font-size: var(--fs-1); cursor: pointer; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s, transform 0.25s var(--ease-out);
  text-align: center; padding: 8px; line-height: 1.2;
}
.orbit-btn small { font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-faint); }
.orbit-btn:hover { border-color: var(--d-text); }
.orbit-btn[aria-selected="true"] { border-color: var(--c-cyan); background: var(--c-ink-2); box-shadow: 0 0 0 6px rgba(95, 224, 230, 0.12); transform: translate(-50%, -50%) scale(1.04); }
.orbit-btn[aria-selected="true"] small { color: var(--c-cyan); }
.serve-panel { display: grid; gap: 20px; }
.serve-panel h3 { font-size: var(--fs-5); }
.serve-panel .who { color: var(--d-muted); }
.serve-panel .ctx { max-width: 52ch; }
.serve-panel h4 { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-cyan); font-weight: 500; }
.serve-panel ul { display: grid; gap: 8px; }
.serve-panel li { position: relative; padding-left: 18px; font-size: var(--fs-1); }
.serve-panel li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--c-cyan); }
.serve-caps { display: flex; flex-wrap: wrap; gap: 8px; }
.serve-caps a { font-size: var(--fs-0); font-weight: 500; padding: 7px 12px; border: 1px solid var(--d-line-strong); border-radius: var(--radius); text-decoration: none; color: var(--d-text); transition: border-color 0.2s, background 0.2s; }
.serve-caps a:hover { border-color: var(--c-cyan); background: rgba(95, 224, 230, 0.08); }
.serve-panel .swap { transition: opacity 0.28s var(--ease-out), transform 0.36s var(--ease-out); }
.serve-panel.is-switching .swap { opacity: 0; transform: translateY(8px); }
.serve-tabs-mobile { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.serve-tabs-mobile::-webkit-scrollbar { display: none; }
.serve-tabs-mobile button { flex: none; padding: 10px 16px; border-radius: var(--radius); border: 1px solid var(--d-line-strong); background: none; color: var(--d-text); font-weight: 500; font-size: var(--fs-1); cursor: pointer; }
.serve-tabs-mobile button[aria-selected="true"] { border-color: var(--c-cyan); background: rgba(95, 224, 230, 0.1); }
@media (min-width: 1024px) { .serve-tabs-mobile { display: none; } }
@media (max-width: 1023px) { .orbit { display: none; } }

/* ---------- clients ---------- */
.logo-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
@media (min-width: 700px) { .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logo-wall li { background: var(--c-surface); display: grid; place-items: center; padding: 28px 24px; min-height: 130px; }
/* The eight client marks are supplied as opaque artwork made for a white page, and
   two of them cannot be silhouetted at all: Madison House is a multi-colour mosaic
   whose shape carries no meaning in one tone, and the Autism Housing Network file is
   a photographic banner rather than a logo. Rendering them white produced solid
   blocks, so the whole wall keeps a light plate and the marks stay in their own
   colours. The plate is a deliberate component, not a light section, and it is the
   only light surface on the site. docs/CLIENT-INPUT.md asks for clean transparent
   files so this can become a silhouette wall later. */
.logo-wall li { background: #eef1f6; }
.logo-wall img { max-height: 54px; width: auto; max-width: 78%; opacity: 0.9; transition: opacity 0.3s; }
.logo-wall li:hover img { opacity: 1; }
.clients-note { margin-top: 18px; font-size: var(--fs-0); color: var(--c-faint); }

/* ---------- data -> decision ---------- */
.d2d-stage { position: relative; min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--nav-h) + 24px) 48px; }
.d2d-shell { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .d2d-shell { grid-template-columns: 5fr 7fr; gap: var(--gutter); } }
.d2d-copy h2 { font-size: var(--fs-5); margin-bottom: 18px; }
.d2d-steps { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--c-line); }
.d2d-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--c-line); color: var(--c-faint); font-weight: 500; transition: color 0.3s; }
.d2d-steps li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--c-line-strong); transform: translateY(1px); transition: background 0.3s, border-color 0.3s; }
.d2d-steps li.is-on { color: var(--c-text); }
.d2d-steps li.is-on::before { background: var(--c-teal); border-color: var(--c-teal); }
.d2d-steps li > span { grid-column: 2; }
.d2d-steps li small { grid-column: 2; display: block; font-weight: 400; color: var(--c-muted); font-size: var(--fs-0); }
.d2d-panel { position: relative; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); overflow: hidden; min-height: 480px; }
.d2d-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--c-line); font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--c-faint); text-transform: uppercase; }
.d2d-bar b { color: var(--c-text); font-weight: 500; }
.d2d-body { position: relative; padding: 18px; display: grid; gap: 16px; }
.d2d-table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 0.74rem; }
.d2d-table th { text-align: left; font-weight: 500; color: var(--c-faint); padding: 6px 8px; border-bottom: 1px solid var(--c-line); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.66rem; }
.d2d-table td { padding: 7px 8px; border-bottom: 1px solid var(--c-paper-2); color: var(--c-text); white-space: nowrap; }
.d2d-table tr { transition: background 0.4s; }
.d2d-table tr[data-class="delay"] .tag { color: var(--c-link); }
.d2d-table tr[data-class="capacity"] .tag { color: var(--c-teal-deep); }
.d2d-table tr[data-class="ok"] .tag { color: var(--c-faint); }
.d2d-table .tag { opacity: 0; transition: opacity 0.4s; }
.d2d-panel.s2 .d2d-table .tag, .d2d-panel.s3 .d2d-table .tag, .d2d-panel.s4 .d2d-table .tag { opacity: 1; }
.d2d-panel.s2 .d2d-table tr[data-class="delay"], .d2d-panel.s3 .d2d-table tr[data-class="delay"] { background: var(--c-royal-soft); }
.d2d-panel.s2 .d2d-table tr[data-class="capacity"], .d2d-panel.s3 .d2d-table tr[data-class="capacity"] { background: var(--c-teal-soft); }
.d2d-chart { display: grid; grid-template-columns: 1fr; gap: 10px; opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.d2d-panel.s3 .d2d-chart, .d2d-panel.s4 .d2d-chart { opacity: 1; transform: none; }
.d2d-chart .cap { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-faint); }
.d2d-chart svg { width: 100%; height: auto; overflow: visible; }
.d2d-chart .ax { stroke: var(--c-line); stroke-width: 1; }
.d2d-chart .bar { fill: var(--c-line-strong); transform-origin: bottom; }
.d2d-chart .bar.hi { fill: var(--c-royal); }
.d2d-chart .bar.mid { fill: var(--c-teal); }
.d2d-chart text { font-family: var(--f-mono); font-size: 9px; fill: var(--c-faint); }
.d2d-insight { position: absolute; inset: auto 18px 18px 18px; background: var(--c-ink); color: var(--d-text); border-radius: var(--radius); padding: 22px 24px; display: grid; gap: 10px; opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); box-shadow: var(--shadow-2); }
.d2d-panel.s4 .d2d-insight { opacity: 1; transform: none; }
.d2d-insight .label { color: var(--c-cyan); }
.d2d-insight p { font-size: var(--fs-1); color: var(--d-muted); max-width: 60ch; }
.d2d-insight strong { color: var(--d-text); font-size: var(--fs-3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.d2d-demo { font-family: var(--f-mono); font-size: 0.7rem; color: var(--c-faint); letter-spacing: 0.04em; margin-top: 14px; }

/* ---------- mission control ---------- */
.mc-shell { display: grid; gap: 28px; }
@media (min-width: 1024px) { .mc-shell { grid-template-columns: 4fr 8fr; gap: var(--gutter); align-items: start; } }
.mc-side h2 { font-size: var(--fs-5); margin-bottom: 18px; }
.mc-side .lede { margin-bottom: 26px; }
.mc-legend { display: grid; gap: 10px; font-size: var(--fs-1); color: var(--d-muted); }
.mc-legend li { display: flex; gap: 10px; align-items: center; }
.mc-legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.mc-board { position: relative; border: 1px solid var(--d-line); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); overflow: hidden; }
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--d-line); font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-faint); }
.mc-top b { color: var(--d-text); font-weight: 500; }
.mc-top .live { display: inline-flex; align-items: center; gap: 8px; color: var(--c-cyan); }
.mc-top .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-cyan); box-shadow: 0 0 0 0 rgba(95, 224, 230, 0.5); animation: mc-pulse 2.2s infinite; }
@keyframes mc-pulse { 0% { box-shadow: 0 0 0 0 rgba(95, 224, 230, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(95, 224, 230, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 224, 230, 0); } }
.mc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--d-line); }
@media (min-width: 700px) { .mc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mc-cell { background: var(--c-ink); padding: 18px; display: grid; gap: 12px; align-content: start; min-height: 168px; position: relative; }
.mc-cell .h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-muted); }
.mc-cell .h i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-cyan); }
.mc-cell .h i.warn { background: #f2b544; }
.mc-cell .v { font-family: var(--f-sans); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--d-text); font-stretch: 104%; }
.mc-cell .v small { font-size: 0.8rem; color: var(--d-faint); font-weight: 400; margin-left: 6px; letter-spacing: 0; }
.mc-cell .s { font-size: var(--fs-0); color: var(--d-muted); }
.mc-cell svg.spark { width: 100%; height: 36px; overflow: visible; }
.mc-cell .spark path { fill: none; stroke: var(--c-cyan); stroke-width: 1.5; stroke-linecap: round; }
.mc-cell .spark .area { fill: url(#mcgrad); stroke: none; opacity: 0.35; }
.mc-cell .meter { height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; }
.mc-cell .meter b { display: block; height: 100%; width: var(--w, 50%); background: var(--c-cyan); border-radius: 2px; }
.mc-cell .row { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 0.72rem; color: var(--d-muted); }
.mc-cell .row b { color: var(--d-text); font-weight: 500; }
.mc-cell .flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-muted); }
.mc-cell .flow span { border: 1px solid var(--d-line-strong); border-radius: 3px; padding: 6px 4px; text-align: center; }
.mc-cell .flow em { width: 14px; height: 1px; background: var(--c-cyan); display: block; }
.mc-links { position: absolute; inset: 0; pointer-events: none; }
.mc-note { padding: 12px 18px; border-top: 1px solid var(--d-line); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--d-faint); }

/* ---------- principles ---------- */
.principles { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
@media (min-width: 900px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.principle { padding: 30px 0 34px; border-bottom: 1px solid var(--c-line); display: grid; gap: 12px; align-content: start; }
@media (min-width: 900px) {
  .principle:nth-child(odd) { padding-right: var(--gutter); border-right: 1px solid var(--c-line); }
  .principle:nth-child(even) { padding-left: var(--gutter); }
}
.principle h3 { font-size: var(--fs-4); }
.principle p { color: var(--c-muted); max-width: 46ch; }
.principle .mark { width: 34px; height: 12px; }
.principle .mark path { fill: none; stroke: var(--c-teal); stroke-width: 1.5; stroke-linecap: round; }
.principle .mark circle { fill: var(--c-teal); }

/* ---------- gallery rail ---------- */
.rail { position: relative; }
.rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 520px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.rail-track::-webkit-scrollbar { height: 6px; }
.rail-track::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: 3px; }
.rail-item { scroll-snap-align: start; display: grid; gap: 12px; }
.rail-item:nth-child(3n + 2) { grid-auto-columns: min(60vw, 400px); }
.rail-item figure { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--c-paper-2); }
.rail-item:nth-child(3n + 2) figure { aspect-ratio: 3 / 4; }
.rail-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.rail-item:hover img { transform: scale(1.03); }
.rail-item figcaption { font-size: var(--fs-1); color: var(--c-muted); display: grid; gap: 2px; }
.rail-item figcaption b { color: var(--c-text); font-weight: 500; }
.rail-item figcaption small { font-family: var(--f-mono); font-size: 0.7rem; color: var(--c-faint); letter-spacing: 0.04em; }
.rail-controls { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 18px; }
.rail-controls button { width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid var(--c-line-strong); background: var(--c-surface); cursor: pointer; display: grid; place-items: center; transition: border-color 0.2s, background 0.2s; }
.rail-controls button:hover { border-color: var(--c-text); }
.rail-controls svg { width: 16px; height: 16px; }
/* editorial gallery (about) */
.editorial { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .editorial { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 120px; } }
.editorial figure { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--c-paper-2); }
.editorial img { width: 100%; height: 100%; object-fit: cover; }
.editorial figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(180deg, rgba(8, 21, 47, 0), rgba(8, 21, 47, 0.78)); color: var(--d-text); font-size: var(--fs-0); }
.editorial figcaption small { display: block; font-family: var(--f-mono); font-size: 0.66rem; color: var(--d-muted); letter-spacing: 0.06em; margin-top: 2px; }
@media (min-width: 900px) {
  .editorial .e1 { grid-column: 1 / 8; grid-row: 1 / 5; }
  .editorial .e2 { grid-column: 8 / 13; grid-row: 1 / 4; }
  .editorial .e3 { grid-column: 8 / 11; grid-row: 4 / 7; }
  .editorial .e4 { grid-column: 11 / 13; grid-row: 4 / 7; }
  .editorial .e5 { grid-column: 1 / 5; grid-row: 5 / 8; }
  .editorial .e6 { grid-column: 5 / 8; grid-row: 5 / 8; }
}
@media (max-width: 899px) { .editorial figure { aspect-ratio: 4 / 3; } .editorial .e1 { grid-column: 1 / -1; aspect-ratio: 16 / 10; } }

/* ---------- final CTA ---------- */
.final { position: relative; overflow: hidden; }
.final .container { position: relative; z-index: 1; display: grid; gap: 28px; }
@media (min-width: 900px) { .final .container { grid-template-columns: 7fr 5fr; align-items: end; } }
.final h2 { font-size: var(--fs-6); max-width: 16ch; }
.final .terminal { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.final .terminal path { fill: none; stroke: var(--c-cyan); stroke-width: 1.5; stroke-linecap: round; opacity: 0.8; }
.final .terminal circle { fill: var(--c-cyan); }
.final-side { display: grid; gap: 18px; }
.final-side p { color: var(--d-muted); max-width: 40ch; }
.final-side .cta-row { margin-top: 6px; }

/* ---------- footer ---------- */
.site-footer { background: var(--c-surface); border-top: 1px solid var(--c-line); padding: clamp(48px, 6vw, 80px) 0 28px; font-size: var(--fs-1); }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gutter); } }
@media (min-width: 1200px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: var(--gutter); } }
.footer-brand img { height: 34px; width: auto; margin-bottom: 18px; }
.footer-brand p { color: var(--c-muted); max-width: 34ch; }
.site-footer h3 { font-size: 0.75rem; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-faint); font-weight: 500; margin-bottom: 16px; font-stretch: 100%; }
.site-footer ul { display: grid; gap: 10px; }
.site-footer a { text-decoration: none; color: var(--c-text); }
.site-footer a:hover { color: var(--c-link); }
.footer-contact address { font-style: normal; display: grid; gap: 14px; color: var(--c-muted); }
.footer-contact address b { color: var(--c-text); font-weight: 500; display: block; }
.footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; color: var(--c-faint); font-size: var(--fs-0); }
.footer-bottom .credit a { color: var(--c-muted); font-weight: 500; }

/* ---------- sub-page hero ---------- */
.page-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 5vw, 64px); background: var(--c-paper); position: relative; overflow: hidden; }
.page-hero .container { position: relative; z-index: 1; display: grid; gap: 22px; }
.page-hero h1 { font-size: var(--fs-6); max-width: 18ch; }
.page-hero .lede { max-width: 52ch; }
.page-hero .trace { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; pointer-events: none; opacity: 0.9; }
.page-hero .trace path { fill: none; stroke: var(--c-royal); stroke-width: 1.5; stroke-linecap: round; opacity: 0.35; }
.page-hero .trace circle { fill: var(--c-teal); }
.crumbs { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-faint); display: flex; gap: 10px; }
.crumbs a { text-decoration: none; color: var(--c-teal-deep); }

/* ---------- solutions page ---------- */
.sol-nav { position: sticky; top: var(--nav-h); z-index: 40; background: rgba(5, 11, 24, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-line); }
.sol-nav ul {display: flex;gap: 4px;overflow-x: auto;scrollbar-width: none;padding: 8px 0;justify-content: center;}
.sol-nav ul::-webkit-scrollbar { display: none; }
.sol-nav a { flex: none; padding: 10px 14px; border-radius: var(--radius); text-decoration: none; font-size: var(--fs-1); font-weight: 500; color: var(--c-muted); transition: color 0.2s, background 0.2s; }
.sol-nav a:hover, .sol-nav a.is-active { color: var(--c-link); background: var(--c-royal-soft); }
.sol { padding-block: clamp(64px, 8vw, 120px); border-bottom: 1px solid var(--c-line); scroll-margin-top: calc(var(--nav-h) + 60px); }
.sol:last-of-type { border-bottom: 0; }
.sol-grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .sol-grid { grid-template-columns: 4fr 8fr; gap: var(--gutter); } }
.sol-side { position: sticky; top: calc(var(--nav-h) + 80px); align-self: start; display: grid; gap: 18px; }
.sol-side h2 { font-size: var(--fs-5); }
.sol-side figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-ink); position: relative; }
.sol-side figure img { width: 100%; height: 100%; object-fit: cover; }
.sol-side figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(8, 21, 47, 0) 50%, rgba(8, 21, 47, 0.6)); }
.sol-body { display: grid; gap: 34px; }
.sol-q { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--c-line); }
.sol-q h3 { font-size: 0.78rem; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-teal-deep); font-weight: 500; font-stretch: 100%; }
.sol-q p, .sol-q li { color: var(--c-text); }
.sol-q ul { display: grid; gap: 8px; }
.sol-q li { position: relative; padding-left: 20px; }
.sol-q li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-teal); }
.sol-q .aud { display: flex; flex-wrap: wrap; gap: 8px; }
.sol-q .aud a { font-size: var(--fs-0); font-weight: 500; padding: 7px 12px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); text-decoration: none; color: var(--c-text); }
.sol-q .aud a:hover { border-color: var(--c-link); color: var(--c-link); }
.sol-flag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); background: var(--c-paper); border: 1px dashed var(--c-line-strong); padding: 6px 10px; border-radius: var(--radius); width: fit-content; }
.secondary { display: grid; gap: 28px; }
@media (min-width: 900px) { .secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); } }
.secondary article { border-top: 1px solid var(--c-line); padding-top: 22px; display: grid; gap: 12px; align-content: start; }
.secondary h3 { font-size: var(--fs-4); }
.secondary ul { display: grid; gap: 6px; color: var(--c-muted); font-size: var(--fs-1); }
.secondary li { position: relative; padding-left: 18px; }
.secondary li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--c-line-strong); }

/* ---------- industries page ---------- */
.ind { padding-block: clamp(64px, 8vw, 120px); border-bottom: 1px solid var(--c-line); scroll-margin-top: calc(var(--nav-h) + 16px); }
.ind-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) { .ind-grid { grid-template-columns: 7fr 5fr; gap: var(--gutter); } .ind:nth-of-type(even) .ind-grid { grid-template-columns: 5fr 7fr; } .ind:nth-of-type(even) .ind-grid figure { order: -1; } }
.ind figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-paper-2); }
.ind figure img { width: 100%; height: 100%; object-fit: cover; }
.ind h2 { font-size: var(--fs-5); margin-bottom: 14px; }
.ind .who { color: var(--c-muted); margin-bottom: 20px; }
.ind h3 { font-size: 0.78rem; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-teal-deep); font-weight: 500; margin: 26px 0 12px; font-stretch: 100%; }
.ind ul { display: grid; gap: 8px; }
.ind li { position: relative; padding-left: 20px; }
.ind li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-teal); }
.ind .aud { display: flex; flex-wrap: wrap; gap: 8px; }
.ind .aud a { font-size: var(--fs-0); font-weight: 500; padding: 7px 12px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); text-decoration: none; color: var(--c-text); }
.ind .aud a:hover { border-color: var(--c-link); color: var(--c-link); }

/* ---------- about ---------- */
.about-story { display: grid; gap: 40px; }
@media (min-width: 900px) { .about-story { grid-template-columns: 4fr 8fr; gap: var(--gutter); } }
.about-story .sticky { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; }
.about-story .sticky h2 { font-size: var(--fs-5); }
.about-blocks { display: grid; gap: 40px; }
.about-block { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.about-block h3 { font-size: var(--fs-4); }
.about-block p { color: var(--c-text); max-width: 62ch; }
.about-block .q { font-size: var(--fs-3); line-height: 1.45; color: var(--c-text); font-weight: 500; letter-spacing: -0.01em; max-width: 40ch; }
.about-block .src { font-family: var(--f-mono); font-size: 0.7rem; color: var(--c-faint); letter-spacing: 0.04em; }
.presence { display: grid; gap: 24px; }
@media (min-width: 900px) { .presence { grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: center; } }
.presence figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.presence img { width: 100%; height: 100%; object-fit: cover; }
.presence address { font-style: normal; display: grid; gap: 18px; color: var(--c-muted); }
.presence address b { color: var(--c-text); display: block; font-weight: 500; }

/* ---------- insights ---------- */
.empty { border: 1px dashed var(--c-line-strong); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 64px); display: grid; gap: 18px; max-width: 720px; }
.empty h2 { font-size: var(--fs-4); }
.empty p { color: var(--c-muted); max-width: 56ch; }
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topics li { font-size: var(--fs-0); font-weight: 500; padding: 7px 12px; border: 1px solid var(--c-line); border-radius: var(--radius); color: var(--c-muted); }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: start; } }
.contact-side { display: grid; gap: 28px; }
.contact-side address { font-style: normal; display: grid; gap: 18px; color: var(--c-muted); }
.contact-side address b { color: var(--c-text); display: block; font-weight: 500; }
.contact-side address a { color: var(--c-text); text-decoration: none; }
.contact-side address a:hover { color: var(--c-link); }
.contact-side .sched { border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 12px; background: var(--c-paper); }
.contact-side .sched h2 { font-size: var(--fs-4); }
.contact-side .sched p { color: var(--c-muted); font-size: var(--fs-1); }
.form-shell { position: relative; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 44px); background: var(--c-surface); box-shadow: var(--shadow-1); }
.form-shell h2 { font-size: var(--fs-4); margin-bottom: 6px; }
.form-shell .intro { color: var(--c-muted); font-size: var(--fs-1); margin-bottom: 28px; }
.form-grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .span { grid-column: 1 / -1; } }
/* align-content:start stops the control stretching to the row height when the
   field beside it is taller (a hint line under one of them) */
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: var(--fs-1); font-weight: 500; color: var(--c-text); }
.field label .req { color: var(--c-link); margin-left: 2px; }
.field .hint { font-size: var(--fs-0); color: var(--c-faint); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-surface);
  font: inherit; font-size: var(--fs-1); color: var(--c-text); transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-teal); box-shadow: 0 0 0 3px var(--c-teal-soft); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--c-error); }
.field .error { font-size: var(--fs-0); color: var(--c-error); display: none; }
.field.is-invalid .error { display: block; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%234b5872' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.fieldset legend { font-size: var(--fs-1); font-weight: 500; color: var(--c-text); padding: 0; margin-bottom: 4px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; opacity: 0; }
.choice span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); font-size: var(--fs-1); font-weight: 500; color: var(--c-text); cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.choice input:checked + span { border-color: var(--c-link); background: var(--c-royal-soft); color: var(--c-link); }
.choice input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.cond { display: none; }
.cond.is-visible { display: grid; }
.form-foot { grid-column: 1 / -1; display: grid; gap: 16px; padding-top: 10px; }
.form-foot .consent { font-size: var(--fs-0); color: var(--c-muted); max-width: 60ch; }
.form-status { grid-column: 1 / -1; font-size: var(--fs-1); color: var(--c-error); display: none; padding: 12px 14px; border-radius: var(--radius); background: var(--c-error-soft); }
.form-status.is-visible { display: block; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.success { display: none; position: relative; z-index: 2; background: var(--c-ink); color: var(--d-text); border-radius: var(--radius); padding: clamp(28px, 4vw, 52px); overflow: hidden; min-height: 520px; }
.success.is-visible { display: grid; align-content: center; gap: 18px; }
.success svg.route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.success svg.route path { fill: none; stroke: var(--c-cyan); stroke-width: 1.5; stroke-linecap: round; opacity: 0.6; }
.success svg.route circle { fill: var(--c-cyan); }
.success > * { position: relative; z-index: 1; }
.success h2 { font-size: var(--fs-5); color: var(--d-text); }
.success .ref { font-family: var(--f-mono); font-size: var(--fs-3); color: var(--c-cyan); letter-spacing: 0.06em; }
.success p { color: var(--d-muted); max-width: 52ch; }
.success .next { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--d-line); font-size: var(--fs-1); }
.success .next li { position: relative; padding-left: 20px; color: var(--d-text); }
.success .next li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-cyan); }
.calendly-wrap { border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--c-surface); min-height: 720px; margin-top: 28px; }
.calendly-wrap .calendly-inline-widget { min-width: 320px; height: 720px; }
.calendly-fallback { padding: 24px; display: grid; gap: 12px; color: var(--c-muted); font-size: var(--fs-1); }

/* ---------- reveal helpers ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal[data-delay="1"].is-in { transition-delay: 0.08s; }
.reveal[data-delay="2"].is-in { transition-delay: 0.16s; }
.reveal[data-delay="3"].is-in { transition-delay: 0.24s; }
html.no-js .reveal, .reduced .reveal { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .line > span { transform: none !important; }
}
@media print {
  .site-header, .drawer, .mega, .final, .rail-controls { display: none !important; }
  body { color: #000; }
}

/* =====================================================================
   ROUND 2 (2026-09-22) : expanded architecture
   Services / Products / Who We Serve / Support, the partners band, and the
   global technology-fabric background. The approved visual identity, type and
   component shapes are unchanged; these are new compositions in the same system.
   ===================================================================== */

/* ---------- section surfaces (page colour rhythm) ---------- */
.is-ice { background: var(--c-ice); }
.is-navy { background: var(--c-navy); color: var(--d-text); }
.is-navy :is(h1, h2, h3, h4, .display) { color: var(--d-text); }
.is-navy .lede, .is-navy .muted { color: var(--d-muted); }
.is-navy .label { color: var(--c-cyan); }
.is-navy .rule { border-color: var(--d-line); }
.is-navy :focus-visible { outline-color: var(--c-cyan); }
.is-navy .btn--ghost { --btn-fg: var(--d-text); --btn-bd: var(--d-line-strong); }
.is-navy .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.08); --btn-bd: var(--d-text); --btn-fg: var(--d-text); }
.is-navy .link { color: var(--c-cyan); }

/* ---------- global technology fabric ---------- */
.fabric { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  mask-image: radial-gradient(130% 100% at 78% 46%, #000 20%, rgba(0,0,0,0.35) 62%, transparent 96%);
  -webkit-mask-image: radial-gradient(130% 100% at 78% 46%, #000 20%, rgba(0,0,0,0.35) 62%, transparent 96%); }
.fabric svg { width: 100%; height: 100%; display: block; }
.fabric .f-grid line { stroke: currentColor; stroke-width: 0.5; }
.fabric .f-trace { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.fabric .f-node { fill: currentColor; }
.fabric .f-pulse { fill: currentColor; }
.fabric-host { position: relative; isolation: isolate; }
.fabric-host > .container { position: relative; z-index: 1; }
.fabric--light { color: var(--c-link); opacity: 0.085; }
.fabric--light .f-grid line { opacity: 0.5; }
.fabric--dark { color: var(--c-cyan); opacity: 0.16; }
.fabric--dark .f-grid line { opacity: 0.32; }
@media (prefers-reduced-motion: reduce) { .fabric .f-pulse { display: none; } }

/* ---------- signal handoff between sections ---------- */
.handoff { position: absolute; left: 50%; bottom: -1px; width: 12px; height: 84px; transform: translateX(-50%); pointer-events: none; z-index: 4; }
.handoff svg { width: 100%; height: 100%; overflow: visible; }
.handoff path { fill: none; stroke: var(--c-teal); stroke-width: 1.6; stroke-linecap: round; }
.handoff circle { fill: var(--c-teal); }
.handoff--dark path { stroke: var(--c-cyan); }
.handoff--dark circle { fill: var(--c-cyan); }
@media (max-width: 899px) { .handoff { height: 56px; } }

/* ---------- mega menu : services ---------- */
.mega-tab .n { font-family: var(--f-mono); font-size: 0.7rem; color: var(--c-faint); margin-right: 10px; letter-spacing: 0.08em; }
.mega-tab[aria-selected="true"] .n { color: var(--c-teal); }
.mega-foot .flag { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-faint); border: 1px dashed var(--c-line-strong); padding: 5px 9px; border-radius: var(--radius); }
.mega-extra { border-top: 1px solid var(--c-line); margin-top: 6px; padding-top: 10px; display: grid; gap: 1px; }
.mega-extra a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 32px; text-decoration: none; font-size: var(--fs-1); font-weight: 500; color: var(--c-text); }
.mega-extra a:hover { color: var(--c-link); background: var(--c-paper); }
.mega-extra .i { width: 13px; height: 13px; color: var(--c-teal); }
.mega-extra h3 { padding: 0 32px 8px; }

/* ---------- partners band ---------- */
.partners-band { position: relative; overflow: hidden; }
.partners-head { display: grid; gap: 14px; max-width: 62ch; margin-bottom: clamp(32px, 4vw, 52px); }
.partner-rail { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 860px) { .partner-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.partner-cell { position: relative; background: var(--c-surface); padding: clamp(26px, 3.4vw, 40px) 22px; display: grid; gap: 14px; justify-items: center; align-content: center; min-height: 172px; text-align: center; }
.partner-cell img { height: 34px; width: auto; max-width: 78%; object-fit: contain; transition: transform 0.45s var(--ease-out); }
.partner-cell:hover img { transform: translateY(-2px); }
.partner-cell b { font-size: var(--fs-1); font-weight: 500; color: var(--c-text); letter-spacing: -0.01em; }
.partner-cell small { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--c-faint); line-height: 1.5; }
.partner-feed { height: 46px; margin-bottom: -1px; }
.partner-feed svg { width: 100%; height: 100%; display: block; overflow: visible; }
.partner-feed path { fill: none; stroke: var(--c-teal); stroke-width: 1.4; stroke-linecap: round; }
.partner-feed circle { fill: var(--c-teal); }
@media (max-width: 859px) { .partner-feed { display: none; } }
.partners-note { margin-top: 18px; font-size: var(--fs-0); color: var(--c-faint); max-width: 74ch; }

/* ---------- services : layer stack ---------- */
[data-stack] .section-head { margin-bottom: clamp(26px, 3vw, 40px); }
.stack-shell { display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 1024px) { .stack-shell { grid-template-columns: 1fr 1fr; } }
.stack-figure { position: relative; width: 100%; max-width: 620px; margin-inline: auto; }
.stack-figure svg { width: 100%; height: auto; display: block; overflow: visible; }
.stack-plate { fill: rgba(255, 255, 255, 0.035); stroke: var(--d-line-strong); stroke-width: 1; transition: fill 0.4s, stroke 0.4s; }
.stack-layer.is-on .stack-plate { fill: rgba(95, 224, 230, 0.1); stroke: var(--c-cyan); }
.stack-layer.is-dim .stack-plate { stroke: rgba(255, 255, 255, 0.12); }
.stack-layer text { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; fill: var(--d-muted); transition: fill 0.4s; }
.stack-layer.is-on text { fill: var(--d-text); }
.stack-layer .dot { fill: var(--d-faint); transition: fill 0.4s; }
.stack-layer.is-on .dot { fill: var(--c-cyan); }
.stack-route { fill: none; stroke: var(--c-cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stack-route-ghost { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; stroke-dasharray: 3 5; }
.stack-sig { fill: #d9fbfc; }
.stack-sig-halo { fill: var(--c-cyan); opacity: 0.3; }
.stack-copy { display: grid; gap: 18px; }
.stack-copy h2 { font-size: var(--fs-5); }
.stack-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--d-line-strong); border-radius: var(--radius); background: none; color: var(--d-text); font-size: var(--fs-1); font-weight: 500; cursor: pointer; transition: border-color 0.25s, background 0.25s; }
.stack-tab .n { font-family: var(--f-mono); font-size: 0.7rem; color: var(--d-faint); }
.stack-tab:hover { border-color: var(--d-text); }
.stack-tab[aria-selected="true"] { border-color: var(--c-cyan); background: rgba(95, 224, 230, 0.1); }
.stack-tab[aria-selected="true"] .n { color: var(--c-cyan); }
.stack-panel { display: grid; gap: 12px; min-height: 160px; align-content: start; }
.stack-panel h3 { font-size: var(--fs-4); }
.stack-panel p { color: var(--d-muted); max-width: 54ch; }
.stack-panel .swap { transition: opacity 0.28s var(--ease-out), transform 0.34s var(--ease-out); }
.stack-panel.is-switching .swap { opacity: 0; transform: translateY(8px); }
.stack-layers-hit { display: flex; flex-wrap: wrap; gap: 6px; }
.stack-layers-hit span { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-cyan); border: 1px solid rgba(95, 224, 230, 0.35); padding: 4px 9px; border-radius: var(--radius); }

/* ---------- services : family sections ---------- */
.svc { padding-block: clamp(64px, 8vw, 116px); border-bottom: 1px solid var(--c-line); scroll-margin-top: calc(var(--nav-h) + 62px); position: relative; }
.svc:last-of-type { border-bottom: 0; }
.svc-grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: 4fr 8fr; gap: var(--gutter); } }
.svc-side { position: sticky; top: calc(var(--nav-h) + 76px); align-self: start; display: grid; gap: 16px; }
.svc-num { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.18em; color: var(--c-teal-deep); }
.svc-side h2 { font-size: var(--fs-5); }
.svc-side figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-ink); position: relative; }
.svc-side figure img { width: 100%; height: 100%; object-fit: cover; }
.svc-side figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(8, 21, 47, 0) 50%, rgba(8, 21, 47, 0.62)); }
.svc-body { display: grid; gap: 30px; }
.svc-q { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.svc-q h3 { font-size: 0.78rem; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-teal-deep); font-weight: 500; font-stretch: 100%; }
.svc-q ul { display: grid; gap: 8px; }
.svc-q li { position: relative; padding-left: 20px; }
.svc-q li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-teal); }
.svc-q .aud { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-q .aud a { font-size: var(--fs-0); font-weight: 500; padding: 7px 12px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); text-decoration: none; color: var(--c-text); }
.svc-q .aud a:hover { border-color: var(--c-link); color: var(--c-link); }
.svc-flag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); background: var(--c-ice); border: 1px dashed var(--c-line-strong); padding: 6px 10px; border-radius: var(--radius); width: fit-content; }

/* ---------- products : infrastructure assembly ---------- */
.infra { position: relative; }
.infra-stage { position: relative; min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--nav-h) + 24px) 44px; }
.infra-shell { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1024px) { .infra-shell { grid-template-columns: 7fr 5fr; gap: var(--gutter); } }
.infra-canvas { position: relative; height: clamp(320px, 44svh, 430px); }
@media (min-width: 1024px) { .infra-canvas { height: min(62svh, 540px); } }
.infra-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.infra-node rect { fill: var(--c-navy-2); stroke: rgba(255, 255, 255, 0.24); stroke-width: 1; transition: stroke 0.35s; }
.infra-node.is-on rect { stroke: var(--c-cyan); }
.infra-node text { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; fill: var(--d-muted); transition: fill 0.35s; }
.infra-node.is-on text { fill: var(--d-text); }
.infra-node .sub { font-size: 8.5px; letter-spacing: 0.1em; fill: var(--d-faint); }
.infra-node .bay { fill: rgba(255, 255, 255, 0.07); }
.infra-node.is-on .bay { fill: rgba(95, 224, 230, 0.4); }
.infra-node .port { fill: rgba(255, 255, 255, 0.16); }
.infra-node.is-on .port { fill: var(--c-cyan); }
.infra-link { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; stroke-dasharray: 3 5; }
.infra-link-lit { fill: none; stroke: var(--c-cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.infra-sig .dot { fill: #d9fbfc; }
.infra-sig .halo { fill: var(--c-cyan); opacity: 0.28; }
.infra-copy { display: grid; gap: 18px; }
.infra-copy h2, .infra-copy h1 { font-size: clamp(1.9rem, 1.1rem + 2.1vw, 3rem); max-width: 16ch; }
.infra-phase { font-family: var(--f-mono); font-size: var(--fs-0); letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-muted); }
.infra-phase b { color: var(--c-cyan); font-weight: 500; display: block; margin-top: 4px; font-size: 0.95rem; }
.infra-legend { display: grid; gap: 9px; margin-top: 4px; }
.infra-legend li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: baseline; font-size: var(--fs-1); color: var(--d-muted); transition: color 0.3s; }
.infra-legend li::before { content: ""; width: 9px; height: 9px; border-radius: 2px; border: 1.5px solid var(--d-line-strong); transform: translateY(1px); transition: background 0.3s, border-color 0.3s; }
.infra-legend li.is-on { color: var(--d-text); }
.infra-legend li.is-on::before { background: var(--c-cyan); border-color: var(--c-cyan); }

/* ---------- products : category catalog ---------- */
.cat-shell { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
@media (min-width: 760px) { .cat-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); } }
@media (min-width: 1200px) { .cat-shell { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat { padding: 28px 0 32px; border-bottom: 1px solid var(--c-line); display: grid; gap: 12px; align-content: start; position: relative; }
.cat-head { display: flex; align-items: baseline; gap: 12px; }
.cat-num { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.16em; color: var(--c-cyan-deep); }
.cat h3 { font-size: var(--fs-4); }
.cat .lab { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-faint); }
.cat p { color: var(--c-muted); font-size: var(--fs-1); max-width: 46ch; }
.cat ul { display: flex; flex-wrap: wrap; gap: 6px; }
.cat li { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--c-text); border: 1px solid var(--c-line); background: var(--c-surface); padding: 5px 9px; border-radius: var(--radius); }
.cat .note { font-size: var(--fs-0); color: var(--c-faint); border-left: 2px solid var(--c-teal); padding-left: 12px; max-width: 46ch; }
.cat .cta { margin-top: 4px; }

/* ---------- who we serve ---------- */
.serve-intro { max-width: 70ch; }
.serve-intro p { font-size: clamp(1.12rem, 1rem + 0.62vw, 1.5rem); line-height: 1.5; color: var(--c-text); text-wrap: pretty; }
.sector-shell { display: grid; gap: clamp(28px, 4vw, 52px); }
@media (min-width: 1024px) { .sector-shell { grid-template-columns: 5fr 7fr; align-items: start; } }
.sector-env { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-ink); aspect-ratio: 5 / 4; margin: 0; }
@media (min-width: 1024px) { .sector-env { position: sticky; top: calc(var(--nav-h) + 40px); } }
.sector-env svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.sector-env .env-node { fill: none; stroke: var(--c-cyan); stroke-width: 1.2; }
.sector-env .env-fill { fill: rgba(95, 224, 230, 0.12); stroke: var(--c-cyan); stroke-width: 1; }
.sector-env .env-link { fill: none; stroke: rgba(95, 224, 230, 0.45); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sector-env .env-faint { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.sector-env .env-dot { fill: var(--c-cyan); }
.sector-env img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.sector-env figcaption { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; color: var(--d-text); }
.sector-env figcaption .label { display: block; margin-bottom: 6px; color: var(--c-cyan); }
.sector-env figcaption strong { font-size: var(--fs-3); font-weight: 600; letter-spacing: -0.01em; }
.sector-list { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.sector-item { border-bottom: 1px solid var(--c-line); }
.sector-h { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: normal; font-stretch: normal; }
.sector-btn { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 20px 4px; border: 0; background: none; text-align: left; cursor: pointer; }
.sector-btn .t { font-size: var(--fs-4); font-weight: 600; letter-spacing: -0.015em; color: var(--c-text); font-stretch: 106%; transition: color 0.25s; display: block; }
.sector-btn .s { display: block; font-size: var(--fs-0); color: var(--c-muted); margin-top: 4px; max-width: 52ch; }
.sector-btn .plus { width: 28px; height: 28px; border: 1px solid var(--c-line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--c-link); transition: transform 0.3s var(--ease-out), background 0.25s, border-color 0.25s; }
.sector-item.is-open .sector-btn .t { color: var(--c-link); }
.sector-item.is-open .plus { transform: rotate(45deg); background: var(--c-royal-soft); border-color: var(--c-link); }
.sector-body { overflow: hidden; }
.sector-inner { padding: 0 4px 28px; display: grid; gap: 18px; justify-items: start; }
.sector-inner > * { max-width: 100%; }
.sector-inner h4 { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-teal-deep); font-weight: 500; font-stretch: 100%; }
.sector-inner ul.pri { display: grid; gap: 8px; }
.sector-inner ul.pri li { position: relative; padding-left: 20px; font-size: var(--fs-1); }
.sector-inner ul.pri li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-teal); }
.sector-inner .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sector-inner .chips a { font-size: var(--fs-0); font-weight: 500; padding: 7px 12px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); text-decoration: none; color: var(--c-text); }
.sector-inner .chips a:hover { border-color: var(--c-link); color: var(--c-link); }
.sector-inner .chips a.hw { border-style: dashed; }

/* ---------- support ---------- */
.sup-routes { display: grid; gap: 14px; }
@media (min-width: 700px) { .sup-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sup-routes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
.sup-route { position: relative; display: grid; gap: 8px; align-content: start; padding: 20px 18px 22px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); text-align: left; cursor: pointer; transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s var(--ease-out); }
.sup-route:hover { border-color: var(--c-line-strong); }
.sup-route:active { transform: translateY(1px); }
.sup-route[aria-pressed="true"] { border-color: var(--c-teal); box-shadow: 0 0 0 3px var(--c-teal-soft); }
.sup-route .k { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-faint); display: flex; align-items: center; gap: 8px; }
.sup-route .k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--c-line-strong); transition: background 0.3s, border-color 0.3s; }
.sup-route[aria-pressed="true"] .k { color: var(--c-teal-deep); }
.sup-route[aria-pressed="true"] .k::before { background: var(--c-teal); border-color: var(--c-teal); }
.sup-route b { font-size: var(--fs-3); font-weight: 600; letter-spacing: -0.015em; color: var(--c-text); }
.sup-route span.d { font-size: var(--fs-0); color: var(--c-muted); }
.sup-diag { position: relative; height: 58px; margin: 8px 0 2px; }
.sup-diag svg { width: 100%; height: 100%; overflow: visible; }
.sup-diag .rail { fill: none; stroke: var(--c-line); stroke-width: 1.5; }
.sup-diag .live { fill: none; stroke: var(--c-teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sup-diag .dot { fill: var(--c-teal); }
@media (max-width: 1099px) { .sup-diag { display: none; } }
.sup-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .sup-grid { grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: start; } }
.sup-aside { display: grid; gap: 26px; }
.sup-next { display: grid; gap: 18px; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 26px; background: var(--c-ice); }
.sup-next h2 { font-size: var(--fs-4); }
.sup-next li { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.sup-next li:first-of-type { border-top: 0; padding-top: 0; }
.sup-next b { font-size: var(--fs-1); color: var(--c-text); font-weight: 600; }
.sup-next p { font-size: var(--fs-1); color: var(--c-muted); }
.sup-warn { border: 1px dashed var(--c-line-strong); border-radius: var(--radius); padding: 14px 16px; font-size: var(--fs-0); color: var(--c-muted); background: var(--c-surface); }
.sup-warn b { color: var(--c-text); display: block; margin-bottom: 4px; font-size: var(--fs-1); }
.sup-contact { display: grid; gap: 12px; font-size: var(--fs-1); }
.sup-contact a { color: var(--c-text); text-decoration: none; font-weight: 500; }
.sup-contact a:hover { color: var(--c-link); }

/* ---------- hardware teaser (home) ---------- */
.hw-teaser { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 1024px) { .hw-teaser { grid-template-columns: 5fr 7fr; } }
.hw-strip { position: relative; border: 1px solid var(--d-line); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)); overflow: hidden; }
.hw-strip svg { width: 100%; height: auto; display: block; }
.hw-strip .u { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.24); stroke-width: 1; }
.hw-strip .u-lit { fill: rgba(95, 224, 230, 0.08); stroke: var(--c-cyan); stroke-width: 1.2; }
.hw-strip .bay { fill: rgba(255, 255, 255, 0.09); }
.hw-strip .led { fill: var(--c-cyan); }
.hw-strip .lbl { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; fill: var(--d-muted); }
.hw-strip .trace { fill: none; stroke: var(--c-cyan); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hw-copy { display: grid; gap: 18px; }
.hw-copy h2 { font-size: var(--fs-5); }
.hw-copy .cats { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-copy .cats span { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); border: 1px solid var(--d-line-strong); padding: 5px 10px; border-radius: var(--radius); }

/* ---------- split CTA (home support path) ---------- */
.split-cta { display: grid; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 860px) { .split-cta { grid-template-columns: 1.25fr 1fr; } }
.split-cta > div { background: var(--c-surface); padding: clamp(28px, 3.6vw, 48px); display: grid; gap: 14px; align-content: center; }
.split-cta > div.alt { background: var(--c-ice); }
.split-cta h2, .split-cta h3 { font-size: var(--fs-4); }
.split-cta p { color: var(--c-muted); max-width: 46ch; font-size: var(--fs-1); }
.split-cta .cta-row { margin-top: 6px; }

/* ---------- page hero variants ---------- */
.page-hero--ice { background: var(--c-ice); }
.page-hero--navy { background: var(--c-navy); }
.page-hero--navy h1 { color: var(--d-text); }
.page-hero--navy .lede { color: var(--d-muted); }
.page-hero--navy .crumbs { color: var(--d-faint); }
.page-hero--navy .crumbs a { color: var(--c-cyan); }
.page-hero--navy .trace path { stroke: var(--c-cyan); opacity: 0.3; }
.page-hero--navy .trace circle { fill: var(--c-cyan); }
.page-hero .hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.page-hero .hero-meta span { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-teal-deep); border: 1px solid var(--c-line-strong); padding: 6px 10px; border-radius: var(--radius); }
.page-hero--navy .hero-meta span { color: var(--c-cyan); border-color: var(--d-line-strong); }

/* ---------- sticky in-page nav (services + products) ---------- */
.page-nav { position: sticky; top: var(--nav-h); z-index: 40; background: rgba(5, 11, 24, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-line); }
.page-nav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px 0; }
.page-nav ul::-webkit-scrollbar { display: none; }
.page-nav a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius); text-decoration: none; font-size: var(--fs-1); font-weight: 500; color: var(--c-muted); white-space: nowrap; transition: color 0.2s, background 0.2s; }
.page-nav a .n { font-family: var(--f-mono); font-size: 0.68rem; color: var(--c-faint); }
.page-nav a:hover, .page-nav a.is-active { color: var(--c-link); background: var(--c-royal-soft); }
.page-nav a.is-active .n { color: var(--c-link); }

/* ============================================================================
   Round 4 (2026-09-22): the service list became flat and long (24 families) and
   Products gained a software catalog beside the hardware. These rules adapt the
   existing components to the larger lists; no colour, type or spacing token
   changes, so the approved design language is unchanged.
   ========================================================================== */

/* --- mega menu: the rail becomes a multi-column index --------------------- */
.mega-inner:has(.mega-list.is-index) { grid-template-columns: minmax(0, 470px) minmax(0, 1fr) 320px; }
.mega-list.is-index { padding-bottom: 20px; }
.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2px; padding: 0 20px; }
.mega-list.is-index h3 { padding-left: 24px; }
.mega-list.is-index .mega-tab {
  padding: 7px 10px; font-size: 0.86rem; border-left: 0; border-radius: var(--radius);
  gap: 6px; line-height: 1.25;
}
.mega-list.is-index .mega-tab > span { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.mega-list.is-index .mega-tab .n { margin-right: 0; flex: none; }
.mega-list.is-index .mega-tab .i { display: none; }
.mega-list.is-index .mega-tab:hover,
.mega-list.is-index .mega-tab[aria-selected="true"] { background: var(--c-ice); color: var(--c-link); }
.mega-list.is-index .mega-extra { margin: 14px 24px 0; padding-top: 14px; }
.mega-list.is-index .mega-extra a { padding-left: 0; }
/* the preview paragraph is clamped so one long statement cannot stretch the panel */
.mega-list.is-index ~ .mega-panel p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* one column so a four-item preview does not truncate mid-phrase */
.mega-list.is-index ~ .mega-panel .mega-sub { grid-template-columns: minmax(0, 1fr); gap: 7px; }
.mega-list.is-index ~ .mega-panel .mega-sub li { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1240px) {
  .mega-inner:has(.mega-list.is-index) { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
  .mega-inner:has(.mega-list.is-index) .mega-visual { display: none; }
}

/* --- services page: a flat index above the detail sections ---------------- */
/* hairlines come from the cells, not from a background showing through gaps, so a
   part-filled last row leaves clean space instead of a grey block */
.svc-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.svc-index a {
  display: grid; gap: 5px; align-content: start; padding: 16px 18px;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  color: var(--c-text); text-decoration: none; transition: background 0.2s, color 0.2s;
}
.svc-index a:hover, .svc-index a:focus-visible { background: var(--c-ice); color: var(--c-link); }
.svc-index .n { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--c-faint); }
.svc-index a:hover .n, .svc-index a:focus-visible .n { color: var(--c-teal); }
.svc-index strong { font-weight: 600; font-size: 0.97rem; letter-spacing: -0.01em; line-height: 1.3; }
.svc-index span.d { font-size: 0.8rem; color: var(--c-muted); line-height: 1.4; }

/* the sticky rail cannot hold 24 names, so it scrolls within its own height */
.svc-nav ul { max-height: min(62svh, 520px); overflow-y: auto; scrollbar-width: thin; }

/* --- products: hardware and software groups ------------------------------- */
.prod-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.prod-switch a {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  color: var(--c-muted); text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.prod-switch a:hover, .prod-switch a:focus-visible { border-color: var(--c-link); color: var(--c-link); background: var(--c-ice); }

.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); margin-top: 34px; }
.sw-cat { background: var(--c-surface); padding: 26px 24px 24px; display: grid; gap: 12px; align-content: start; }
.sw-cat .n { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--c-teal); }
.sw-cat h3 { font-size: 1.06rem; letter-spacing: -0.01em; }
.sw-cat p { font-size: 0.9rem; color: var(--c-muted); }
.sw-cat ul { display: grid; gap: 6px; }
.sw-cat li { position: relative; padding-left: 16px; font-size: 0.85rem; }
.sw-cat li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 7px; height: 7px; border: 1.5px solid var(--c-royal); border-radius: 2px; }
.sw-cat .with { margin-top: 2px; font-size: 0.8rem; color: var(--c-faint); border-top: 1px solid var(--c-line); padding-top: 12px; }
.sw-cat .with a { color: var(--c-link); }
.is-navy .sw-grid, .is-ice .sw-grid { background: var(--c-line); }

/* provenance line under each service: which of the five source pages it came from */
.svc-src {
  display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-line);
  font-family: var(--f-mono); font-size: 0.68rem; line-height: 1.5; letter-spacing: 0.03em;
  color: var(--c-faint); font-stretch: 100%;
}

/* --- Who We Serve: lead band -------------------------------------------------
   The client's statement used to sit alone in a 595px column inside a 1320px
   container, with the sector heading doing the same immediately below it — two
   stacked half-empty bands. The statement now shares the row with the three
   provisions it names, and the sector heading splits across the full width. */
.serve-lead { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.serve-intro { max-width: 46ch; }
@media (min-width: 1024px) {
  .serve-lead { grid-template-columns: 6fr 5fr; }
  .serve-lead .serve-intro { max-width: none; }
}

.serve-offer { display: grid; border-top: 1px solid var(--c-line); }
.serve-offer li { border-bottom: 1px solid var(--c-line); }
.serve-offer a {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; align-items: baseline;
  padding: 16px 4px; color: var(--c-text); text-decoration: none;
  transition: background 0.2s, padding-left 0.2s;
}
.serve-offer a:hover, .serve-offer a:focus-visible { background: var(--c-ice); padding-left: 12px; }
.serve-offer .n { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--c-faint); grid-row: span 2; }
.serve-offer a:hover .n, .serve-offer a:focus-visible .n { color: var(--c-teal); }
.serve-offer strong { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; }
.serve-offer a:hover strong, .serve-offer a:focus-visible strong { color: var(--c-link); }
.serve-offer .d { font-size: 0.85rem; line-height: 1.45; color: var(--c-muted); grid-column: 2; }

/* a section head that uses the full width instead of a narrow left column */
.section-head--split { max-width: none; }
@media (min-width: 1024px) {
  .section-head--split { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 56px); align-items: end; }
  .section-head--split h2 { margin-bottom: 0; max-width: 20ch; }
  .section-head--split .lede { max-width: 42ch; padding-bottom: 6px; }
}
/* the lead band and the sector heading below it are one thought, so the gap
   between them is a beat rather than a full section break */
.serve-lead-section { padding-bottom: calc(var(--section) * 0.5); }

/* ============================================================================
   Round 6 (2026-09-22): global technical backdrop.
   A single fixed layer behind every page. It sits under all content, never over
   copy, and carries the only continuous motion on the site. Opacity is low on
   purpose: it should register as environment, not as decoration competing with
   the sections in front of it.
   ========================================================================== */
.backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  contain: strict;                       /* keeps it out of the page's layout work */
}
.backdrop svg { width: 100%; height: 100%; display: block; }
.backdrop .bd-grid line { stroke: var(--c-royal-2); stroke-width: 0.6; }
.backdrop .bd-grid--far line { opacity: 0.3; }
.backdrop .bd-grid--near line { opacity: 0.14; }
.backdrop .bd-link { fill: none; stroke: var(--c-cyan); stroke-width: 1; opacity: 0.3; stroke-linecap: round; stroke-linejoin: round; }
.backdrop .bd-node { fill: var(--c-cyan); opacity: 0.7; }
.backdrop .bd-node--big { opacity: 0.95; filter: drop-shadow(0 0 5px rgba(95, 224, 230, 0.55)); }
.backdrop .bd-signal { fill: var(--c-cyan); opacity: 0; filter: drop-shadow(0 0 6px rgba(95, 224, 230, 0.9)); }
.backdrop .bd-sweep-bar {
  fill: url(#bd-sweep-grad);
  /* the gradient is defined inline below via a fallback when unsupported */
  opacity: 0.5;
}
/* the sweep is a soft vertical band of light rather than a hard bar */
.backdrop .bd-sweep { mix-blend-mode: screen; }
.backdrop .bd-sweep-bar { fill: rgba(95, 224, 230, 0.09); }

/* every page section sits above the backdrop */
body > * { position: relative; z-index: 1; }
body > .backdrop { z-index: 0; }

/* Sections carry their own background, so the backdrop only shows through the
   page base. The bands that were "paper" and "ice" are translucent instead of
   opaque, which lets the environment read through them at reduced strength. */
.section.is-paper { background: rgba(7, 16, 33, 0.62); }
.section.is-ice { background: rgba(8, 22, 48, 0.58); }

@media (prefers-reduced-motion: reduce) {
  .backdrop .bd-signal, .backdrop .bd-sweep { display: none; }
}

/* ============================================================================
   Training page (round 7, 2026-09-24). Built from the client's training catalog
   flyer. Matches the dark ladder and the existing trace vocabulary; no new
   colours, type or radii.
   ========================================================================== */
.tr-intro { display: grid; gap: 18px; max-width: 74ch; }
.tr-intro-lead { font-size: clamp(1.12rem, 1rem + 0.62vw, 1.45rem); line-height: 1.5; color: var(--c-text); text-wrap: pretty; }
.tr-intro-sub { font-size: var(--fs-1); max-width: 62ch; }

/* --- signature: the cohort path --- */
.tr-path-shell { display: grid; gap: clamp(20px, 3vw, 34px); }
.tr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-chip {
  display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer;
  padding: 9px 15px; border-radius: var(--radius); font-size: var(--fs-1); font-weight: 500;
  background: transparent; color: var(--d-muted); border: 1px solid var(--d-line);
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.tr-chip .n { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--d-faint); }
.tr-chip:hover { border-color: var(--c-cyan); color: var(--d-text); }
.tr-chip[aria-selected="true"] { background: rgba(95, 224, 230, 0.12); border-color: var(--c-cyan); color: var(--d-text); }
.tr-chip[aria-selected="true"] .n { color: var(--c-cyan); }

.tr-path-canvas { width: 100%; }
.tr-path-canvas svg { width: 100%; height: auto; display: block; overflow: visible; }
.tr-route-ghost { fill: none; stroke: var(--d-line-strong); stroke-width: 1.4; }
.tr-route { fill: none; stroke: var(--c-cyan); stroke-width: 2; stroke-linecap: round; }
.tr-stage circle { fill: var(--c-ink); stroke: var(--c-cyan); stroke-width: 1.6; }
.tr-stage text { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; fill: var(--d-faint); }
.tr-stage text.nm { font-size: 9.5px; letter-spacing: 0.14em; fill: var(--c-cyan); }
.tr-sig { fill: var(--c-cyan); filter: drop-shadow(0 0 6px rgba(95, 224, 230, 0.9)); }

.tr-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px var(--gutter); }
.tr-stage-cap { display: grid; gap: 6px; align-content: start; padding-top: 16px; border-top: 1px solid var(--d-line);
  opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.tr-stage-cap.is-in { opacity: 1; transform: none; }
.tr-stage-cap p { font-size: var(--fs-0); line-height: 1.5; }

/* --- catalog --- */
/* hairlines come from the cells, so a part-filled last row leaves clean space
   instead of a grey block (same correction as .svc-index) */
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.tr-course { background: var(--c-surface); padding: 28px 26px 26px; display: grid; gap: 14px; align-content: start;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.tr-course-head { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.tr-course-head .n { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--c-cyan); display: block; margin-bottom: 4px; }
.tr-course h3 { font-size: 1.18rem; letter-spacing: -0.015em; }
.tr-course .label { display: block; margin-top: 4px; }
.tr-state { font-size: 0.92rem; color: var(--c-muted); line-height: 1.55; }
.tr-covers h4 { font-size: 0.72rem; font-family: var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-faint); font-weight: 500; font-stretch: 100%; margin-bottom: 8px; }
.tr-covers ul { display: grid; gap: 6px; }
.tr-covers li { position: relative; padding-left: 17px; font-size: 0.86rem; line-height: 1.45; }
.tr-covers li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border: 1.5px solid var(--c-cyan); border-radius: 50%; }
.tr-for { font-size: 0.84rem; color: var(--c-muted); line-height: 1.5; }
.tr-for strong { color: var(--c-text); font-weight: 600; }
.tr-track { justify-self: start; font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-faint); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 5px 9px; }
.tr-note { font-size: 0.74rem; line-height: 1.45; color: var(--c-faint); border-top: 1px solid var(--c-line); padding-top: 10px; }

/* marks: vendor logos are monochrome so the wall reads evenly and no brand-colour
   usage is implied; house glyphs use the same stroke weight */
.tr-mark { display: flex; gap: 8px; align-items: center; min-width: 40px; }
/* official brand colours: the client asked for the real marks rather than the
   monochrome treatment the wall used before */
.tr-mark img { width: 34px; height: 34px; object-fit: contain; }
.tr-glyph { width: 34px; height: 34px; fill: none; stroke: var(--glyph, var(--c-cyan)); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tr-glyph .dot { fill: var(--glyph, var(--c-cyan)); stroke: none; }
.tr-glyph .dot { fill: var(--c-cyan); stroke: none; }
.tr-disclaimer { margin-top: 22px; font-size: var(--fs-0); color: var(--c-faint); max-width: 70ch; line-height: 1.55; }

/* --- why choose us --- */
.tr-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px var(--gutter); }
.tr-reason { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 1px solid var(--d-line); }
.tr-reason .n { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--c-cyan); }
.tr-reason h3 { font-size: 1.05rem; letter-spacing: -0.01em; }

@media (max-width: 639px) {
  .tr-course { padding: 24px 20px; }
  .tr-course-head { gap: 12px; }
}

/* ============================================================================
   Certifications (round 8, 2026-09-24). A ledger rather than a badge wall: a wall
   of logos invites the reader to infer partnerships, and several of these issuers
   restrict their marks precisely to prevent that.
   ========================================================================== */
.cert-shell { display: grid; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 1024px) { .cert-shell { grid-template-columns: 7fr 5fr; align-items: start; } }

.cert-list { display: grid; border-top: 1px solid var(--c-line); }
.cert-row {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 16px; align-items: center;
  width: 100%; text-align: left; cursor: pointer; padding: 16px 12px;
  background: none; border: 0; border-bottom: 1px solid var(--c-line);
  color: var(--c-text); transition: background 0.2s, padding-left 0.2s;
}
.cert-row:hover, .cert-row[aria-selected="true"] { background: var(--c-surface-2); padding-left: 18px; }
.cert-row .n { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--c-faint); }
.cert-row[aria-selected="true"] .n { color: var(--c-cyan); }
.cert-row-name { display: grid; gap: 2px; min-width: 0; }
.cert-row-name strong { font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; line-height: 1.25; }
.cert-row-name .abbr { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--c-faint); }
.cert-row-kind { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-faint); text-align: right; }
@media (max-width: 639px) {
  .cert-row { grid-template-columns: auto auto 1fr; gap: 12px; }
  .cert-row-kind { grid-column: 3; text-align: left; font-size: 0.58rem; }
}

/* marks: monochrome vendor logos, typographic badges where the issuer restricts
   its logo, house glyphs where there is no issuing body */
.cert-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: none; }
.cert-mark img { width: 30px; height: 30px; object-fit: contain; }
.cert-glyph { width: 30px; height: 30px; fill: none; stroke: var(--glyph, var(--c-cyan)); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cert-glyph .dot { fill: var(--c-cyan); stroke: none; }
.cert-badge {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.06em; font-weight: 500;
  color: var(--c-cyan); border: 1px solid var(--c-cyan); border-radius: var(--radius);
  padding: 6px 7px; line-height: 1; white-space: nowrap;
}

.cert-panel {
  display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface);
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out);
}
@media (min-width: 1024px) { .cert-panel { position: sticky; top: calc(var(--nav-h) + 28px); } }
.cert-panel.is-switching { opacity: 0; transform: translateY(6px); }
.cert-panel h3 { font-size: var(--fs-4); letter-spacing: -0.02em; }
.cert-issuer { font-size: var(--fs-0); color: var(--c-muted); }
.cert-issuer strong { color: var(--c-text); font-weight: 500; }
.cert-state { color: var(--c-muted); line-height: 1.55; }
.cert-means { padding-top: 14px; border-top: 1px solid var(--c-line); display: grid; gap: 6px; }
.cert-means h4 { font-size: 0.72rem; font-family: var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-faint); font-weight: 500; font-stretch: 100%; }
.cert-held { font-size: var(--fs-0); }
.cert-note { font-size: 0.74rem; color: var(--c-faint); border-top: 1px solid var(--c-line); padding-top: 10px; line-height: 1.45; }

/* --- Microsoft block --- */
.ms-block { display: grid; gap: clamp(22px, 3vw, 34px); }
.ms-head { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.ms-head img { width: 44px; height: 44px; object-fit: contain; }
.ms-head h2 { font-size: var(--fs-5); letter-spacing: -0.02em; margin-bottom: 10px; }
.ms-cols { display: grid; gap: 26px var(--gutter); }
@media (min-width: 768px) { .ms-cols { grid-template-columns: 1fr 1fr; } }
.ms-col { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--d-line); }
.ms-col h3 { font-size: 1.02rem; letter-spacing: -0.01em; }
.ms-col ul { display: grid; gap: 7px; }
.ms-col li { position: relative; padding-left: 17px; font-size: 0.88rem; line-height: 1.45; color: var(--d-muted); }
.ms-col li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border: 1.5px solid var(--c-cyan); border-radius: 50%; }
.ms-note { font-size: var(--fs-0); max-width: 70ch; }

/* --- homepage strip --- */
.cert-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.cert-strip .cert-chip {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  padding: 18px 16px; text-decoration: none; color: var(--c-text);
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  transition: background 0.2s;
}
.cert-strip .cert-chip:hover { background: var(--c-surface-2); }
.cert-strip .cert-chip strong { display: block; font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.cert-strip .cert-chip .k { display: block; margin-top: 3px; font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-faint); }

/* --- mega dropdown destinations --- */
.mega-dest { display: grid; gap: 1px; padding: 0 20px 10px; margin-bottom: 8px; border-bottom: 1px solid var(--c-line); }
.mega-dest-link { display: grid; gap: 1px; padding: 7px 10px; border-radius: var(--radius); text-decoration: none; color: var(--c-text); transition: background 0.2s; }
.mega-dest-link:hover, .mega-dest-link:focus-visible { background: var(--c-ice); }
.mega-dest-link strong { display: flex; align-items: center; gap: 7px; font-size: 0.96rem; font-weight: 600; letter-spacing: -0.01em; }
.mega-dest-link strong svg { width: 13px; height: 13px; vertical-align: -1px; color: var(--c-teal); }
.mega-dest-link .d { font-size: 0.78rem; color: var(--c-muted); }
.mega-idx-head { font-size: 0.72rem; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--c-faint); padding: 8px 24px 8px; font-stretch: 100%; }

/* --- mega dropdown: two destinations, each revealing its own list (round 9) --- */
.mega-inner:has(.mega-list.is-dest) { grid-template-columns: minmax(0, 300px) minmax(0, 1fr) 320px; }
.mega-list.is-dest { padding: 28px 0 20px; }
.mega-list.is-dest .mega-dest { display: grid; gap: 4px; padding: 0 20px; border-bottom: 0; margin: 0; }
.mega-list.is-dest .mega-dest-link {
  display: grid; gap: 2px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 12px; border: 0; border-radius: var(--radius); background: none;
  color: var(--c-text); transition: background 0.2s;
}
.mega-list.is-dest .mega-dest-link:hover,
.mega-list.is-dest .mega-dest-link[aria-selected="true"] { background: var(--c-ice); }
.mega-list.is-dest .mega-dest-link[aria-selected="true"] strong { color: var(--c-link); }
.mega-list.is-dest .mega-extra { margin: 14px 20px 0; padding-top: 14px; }

/* the panel is now a list of destinations rather than one service's detail */
.mega-cols { display: grid; gap: 22px var(--gutter); align-content: start; }
@media (min-width: 900px) { .mega-cols:has(.mega-col + .mega-col) { grid-template-columns: 1fr 1fr; } }
.mega-col h4 { margin-bottom: 10px; }
.mega-col h4 a {
  font-size: 0.72rem; font-family: var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-faint); font-weight: 500; font-stretch: 100%; text-decoration: none;
}
.mega-col h4 a:hover { color: var(--c-cyan); }
.mega-col ul { display: grid; gap: 1px; }
.mega-col li a {
  display: block; padding: 6px 8px; margin-left: -8px; border-radius: var(--radius);
  font-size: 0.89rem; color: var(--c-text); text-decoration: none; transition: background 0.18s, color 0.18s;
}
.mega-col li a:hover, .mega-col li a:focus-visible { background: var(--c-ice); color: var(--c-link); }
/* a single-group panel (Services) splits its list into two columns so the panel
   fills the same width as the two-group Products view */
.mega-cols:not(:has(.mega-col + .mega-col)) .mega-col ul { grid-template-columns: 1fr 1fr; gap: 1px var(--gutter); }

/* --- language switcher (round 10) --- */
.lang-host { display: flex; align-items: center; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 2px; }
.lang-opt {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; font-weight: 500;
  padding: 5px 8px; border-radius: 4px; text-decoration: none; color: var(--c-muted);
  transition: background 0.2s, color 0.2s;
}
a.lang-opt:hover, a.lang-opt:focus-visible { background: var(--c-surface-2); color: var(--c-text); }
.lang-opt.is-current { background: var(--c-royal); color: var(--c-white); }
@media (max-width: 1023px) { .lang-host { order: 2; margin-left: auto; margin-right: 8px; } }

/* House glyphs carry a colour per subject, so the catalog reads as colorful even
   where an official mark cannot be shown (see js/data/training.js on why). Green
   Belt is green because that is what the belt means. */
[data-glyph="requirements"] { --glyph: #7c9cff; }
[data-glyph="pipeline"]     { --glyph: #5fe0e6; }
[data-glyph="improve"]      { --glyph: #3ddc84; }
[data-glyph="plan"]         { --glyph: #ffb454; }
[data-glyph="sprint"]       { --glyph: #ff7ac6; }

/* ============================================================================
   VERSION 2 (2026-09-30) : the information architecture the client specified.
   Solutions, Capabilities, Technology, Government, Training areas, Experience,
   the delivery model and the ten inquiry paths.

   No colour, type, spacing or shape token is changed. Every rule below composes
   existing tokens and mirrors an existing component: .cap-* and .soln-* follow
   .svc-*, the index grids follow .svc-index, and the cards follow .tr-course.
   The approved visual language is unchanged; these are new compositions in it.
   ============================================================================ */

/* ---------- header: eight primary items instead of six ----------
   The nav went from six labels to eight, which overflows between 1024px and the
   point the container stops growing. Below 1366px the CTA button moves out (the
   drawer and the footer both still carry it) and the labels tighten. */
@media (min-width: 1024px) and (max-width: 1365px) {
  .nav-link { padding: 10px 7px; font-size: 0.8125rem; gap: 4px; }
  .nav-link .chev { width: 10px; height: 10px; }
  .nav-cta { display: none; }
  .brand img { height: 26px; }
  .site-header > .container { gap: 14px; }
}
@media (min-width: 1366px) and (max-width: 1520px) {
  .nav-link { padding: 10px 10px; font-size: 0.875rem; }
  .nav-cta { font-size: 0.875rem; padding: 0 14px; }
  .site-header > .container { gap: 18px; }
}

/* ---------- mega: one shared panel, an intro column instead of a tablist ---------- */
.mega-list--intro { display: grid; gap: 14px; align-content: start; padding: 32px; }
.mega-list--intro h3 { font-size: var(--fs-4); letter-spacing: -0.02em; color: var(--c-text); font-family: var(--f-sans); text-transform: none; padding: 0; }
.mega-lede { font-size: 0.9rem; color: var(--c-muted); line-height: 1.5; max-width: 34ch; }
.mega-list--intro .btn { width: fit-content; margin-top: 4px; }
.mega-all { font-size: var(--fs-0); }

/* ---------- home: the capability pillar grid ---------- */
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.cg-cell {
  display: grid; gap: 7px; align-content: start; padding: 22px 22px 24px;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  color: var(--c-text); text-decoration: none; transition: background 0.2s, color 0.2s;
}
.cg-cell:hover, .cg-cell:focus-visible { background: var(--c-surface); color: var(--c-link); }
.cg-cell .n { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--c-faint); }
.cg-cell:hover .n { color: var(--c-teal); }
.cg-cell h3 { font-size: 1.02rem; letter-spacing: -0.015em; line-height: 1.28; }
.cg-cell p { font-size: 0.82rem; color: var(--c-muted); line-height: 1.45; }
.cg-stage { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-teal-deep); margin-top: 2px; }
.cg-cell:hover .cg-stage { color: var(--c-cyan); }

/* ---------- the delivery model ---------- */
.dm-grid { display: grid; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.dm-step { padding: 24px 22px 26px; display: grid; gap: 8px; align-content: start; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.dm-step .n { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--c-teal); }
.is-navy .dm-step .n { color: var(--c-cyan); }
.dm-step h3 { font-size: 1.06rem; letter-spacing: -0.015em; }
.dm-step p { font-size: 0.86rem; line-height: 1.5; }

/* ---------- capabilities page ---------- */
.cap-chain-section { padding-bottom: calc(var(--section) * 0.4); }
.cap-chain { margin-top: 34px; overflow-x: auto; scrollbar-width: thin; }
.cap-chain svg { min-width: 760px; width: 100%; height: auto; }
.cap-chain-ghost { fill: none; stroke: var(--c-line-strong); stroke-width: 1.5; stroke-dasharray: 3 5; }
.cap-chain-lit { fill: none; stroke: var(--c-teal); stroke-width: 1.8; }
.cap-chain-node circle { fill: var(--c-bg); stroke: var(--c-line-strong); stroke-width: 1.5; transition: fill 0.3s, stroke 0.3s, r 0.3s; }
.cap-chain-node text { font-family: var(--f-mono); fill: var(--c-faint); font-size: 9px; letter-spacing: 0.08em; transition: fill 0.3s; }
.cap-chain-node .nm { font-size: 8px; letter-spacing: 0.12em; }
.cap-chain-node.is-lit circle { fill: var(--c-cyan); stroke: var(--c-cyan); }
.cap-chain-node.is-lit text { fill: var(--c-cyan); }

.cap { padding-block: calc(var(--section) * 0.52); border-top: 1px solid var(--c-line); scroll-margin-top: calc(var(--nav-h) + 68px); }
.cap-grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .cap-grid { grid-template-columns: 4fr 8fr; gap: var(--gutter); } }
.cap-side { position: sticky; top: calc(var(--nav-h) + 76px); align-self: start; display: grid; gap: 14px; }
.cap-num { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.18em; color: var(--c-teal-deep); }
.cap-side h2 { font-size: var(--fs-4); letter-spacing: -0.02em; line-height: 1.14; }
.cap-stage { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.cap-stage strong { font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--c-text); }
.cap-tags, .cap-flow { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; }
.cap-tags span, .cap-flow li {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-muted); border: 1px solid var(--c-line-strong); padding: 5px 9px; border-radius: var(--radius);
}
.cap-flow { counter-reset: flow; }
.cap-flow li { position: relative; }
.cap-body { display: grid; gap: 28px; }
.cap-q { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.cap-q h3 { font-size: 0.78rem; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-teal-deep); font-weight: 500; font-stretch: 100%; }
.cap-q ul { display: grid; gap: 8px; }
.cap-q li { position: relative; padding-left: 20px; }
.cap-q li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-teal); }
.cap-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.cap-svcs a {
  display: grid; gap: 4px; align-content: start; padding: 13px 15px;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  text-decoration: none; color: var(--c-text); transition: background 0.2s, color 0.2s;
}
.cap-svcs a:hover, .cap-svcs a:focus-visible { background: var(--c-surface); color: var(--c-link); }
.cap-svcs .n { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.1em; color: var(--c-faint); }
.cap-svcs strong { font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.cap-note {
  font-size: var(--fs-0); color: var(--c-muted); line-height: 1.5; max-width: 62ch;
  border-left: 2px solid var(--c-line-strong); padding-left: 14px;
}

/* ---------- solutions page ---------- */
.soln { padding-block: calc(var(--section) * 0.52); border-top: 1px solid var(--c-line); scroll-margin-top: calc(var(--nav-h) + 68px); }
.soln-grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .soln-grid { grid-template-columns: 4fr 8fr; gap: var(--gutter); } }
.soln-side { position: sticky; top: calc(var(--nav-h) + 76px); align-self: start; display: grid; gap: 14px; }
.soln-num { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.18em; color: var(--c-teal-deep); }
.soln-side h2 { font-size: var(--fs-5); letter-spacing: -0.02em; }
.soln-side figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-ink); position: relative; }
.soln-side figure img { width: 100%; height: 100%; object-fit: cover; }
.soln-side figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(8, 21, 47, 0) 50%, rgba(8, 21, 47, 0.62)); }
.soln-who { font-size: 0.86rem; color: var(--c-muted); line-height: 1.5; }
.soln-body { display: grid; gap: 28px; }
.soln-q { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.soln-q h3 { font-size: 0.78rem; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-teal-deep); font-weight: 500; font-stretch: 100%; }
.soln-q ul { display: grid; gap: 8px; }
.soln-q li { position: relative; padding-left: 20px; }
.soln-q li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-teal); }
/* the pressures list is the reader's problem, not our offer, so it reads differently */
.soln-pressures li::before { border-radius: 1px; border-color: var(--c-error); width: 8px; height: 8px; top: 0.66em; }
.soln-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.soln-caps a {
  display: grid; gap: 4px; align-content: start; padding: 13px 15px;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  text-decoration: none; color: var(--c-text); transition: background 0.2s, color 0.2s;
}
.soln-caps a:hover, .soln-caps a:focus-visible { background: var(--c-surface); color: var(--c-link); }
.soln-caps .n { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.1em; color: var(--c-faint); }
.soln-caps strong { font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.soln-note { font-size: var(--fs-0); }
.soln-q .aud { display: flex; flex-wrap: wrap; gap: 8px; }
.soln-q .aud a { font-size: var(--fs-0); font-weight: 500; padding: 7px 12px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); text-decoration: none; color: var(--c-text); }
.soln-q .aud a:hover { border-color: var(--c-link); color: var(--c-link); }

/* ---------- technology page ---------- */
.tech-flow { margin-bottom: 34px; overflow-x: auto; scrollbar-width: thin; }
.tech-flow svg { min-width: 620px; width: 100%; height: auto; }
.tech-route-ghost { fill: none; stroke: var(--c-line-strong); stroke-width: 1.5; stroke-dasharray: 3 5; }
.tech-route { fill: none; stroke: var(--c-teal); stroke-width: 1.8; }
.tech-node circle { fill: var(--c-bg); stroke: var(--c-teal); stroke-width: 1.6; }
.tech-node text { font-family: var(--f-mono); fill: var(--c-faint); font-size: 10px; letter-spacing: 0.08em; }
.tech-node .nm { fill: var(--c-text); font-size: 9px; letter-spacing: 0.14em; }
.tech-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.tech-stage { padding: 24px 22px 26px; display: grid; gap: 8px; align-content: start; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.tech-stage .n { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--c-teal); }
.tech-stage h3 { font-size: 1.06rem; letter-spacing: -0.015em; }
.tech-stage p { font-size: 0.86rem; line-height: 1.5; }
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.tech-cell {
  display: grid; gap: 5px; align-content: start; padding: 16px 18px;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  color: var(--c-text); text-decoration: none; transition: background 0.2s, color 0.2s;
}
.tech-cell:hover, .tech-cell:focus-visible { background: var(--c-surface); color: var(--c-link); }
.tech-cell .n { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--c-faint); }
.tech-cell strong { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; line-height: 1.3; }
.tech-cell span.d { font-size: 0.79rem; color: var(--c-muted); line-height: 1.4; }
.tech-clouds { display: grid; gap: var(--gutter); margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tech-cloud { display: grid; gap: 12px; align-content: start; background: var(--c-surface); padding: 26px 24px 24px; border: 1px solid var(--c-line); border-radius: var(--radius); }
.tech-cloud-mark { height: 40px; display: flex; align-items: center; }
.tech-cloud-mark img { height: 32px; width: auto; }
.tech-cloud h3 { font-size: 1.1rem; letter-spacing: -0.015em; }
.tech-cloud p { font-size: 0.88rem; line-height: 1.5; }
.tech-glyph { width: 34px; height: 34px; fill: none; stroke: var(--c-teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tech-glyph .dot { fill: var(--c-cyan); stroke: none; }
.tech-cap { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--c-line); max-width: 74ch; }
.tech-cap h3 { font-size: var(--fs-4); letter-spacing: -0.02em; }

/* ---------- government page ---------- */
.gov-status-grid { display: grid; gap: var(--gutter); margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gov-status { display: grid; gap: 12px; align-content: start; background: var(--c-surface); padding: 28px 26px 26px; border: 1px solid var(--c-line); border-radius: var(--radius); }
.gov-status--none { border-style: dashed; background: none; }
.gov-status-head { display: grid; gap: 5px; }
.gov-status h3 { font-size: 1.14rem; letter-spacing: -0.015em; }
.gov-issuer { display: grid; gap: 3px; font-size: 0.82rem; color: var(--c-muted); }
.gov-status p { font-size: 0.9rem; line-height: 1.55; }
.gov-buyer { color: var(--c-text); }
.gov-evidence { font-size: var(--fs-0); border-top: 1px solid var(--c-line); padding-top: 12px; }
.gov-none { display: grid; gap: 7px; margin-top: 4px; }
.gov-none li { position: relative; padding-left: 20px; font-size: 0.86rem; color: var(--c-muted); line-height: 1.45; }
.gov-none li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 11px; height: 0; border-top: 1.5px solid var(--c-line-strong); }
.gov-routes { display: grid; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.gov-route { padding: 26px 24px 28px; display: grid; gap: 9px; align-content: start; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); scroll-margin-top: calc(var(--nav-h) + 40px); }
.gov-route .n { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--c-teal); }
.gov-route h3 { font-size: 1.06rem; letter-spacing: -0.015em; line-height: 1.3; }
.gov-route p { font-size: 0.88rem; line-height: 1.5; }
.gov-reg-block { margin-top: 34px; }
.gov-reg { display: grid; gap: 9px; max-width: 70ch; padding-top: 22px; border-top: 1px solid var(--c-line-strong); }
.gov-reg p { font-size: 0.9rem; line-height: 1.55; }
.gov-caps { margin-top: 34px; display: grid; gap: 30px; }
.gov-caps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); border-top: 1px solid var(--d-line); border-left: 1px solid var(--d-line); }
.gov-caps-cell { display: grid; gap: 4px; align-content: start; padding: 15px 17px; border-right: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); }
.gov-caps-cell .n { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.1em; color: var(--c-cyan); }
.gov-caps-cell strong { font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.gov-caps-cell span.d { font-size: 0.78rem; color: var(--d-muted); line-height: 1.4; }
.gov-caps-foot { display: grid; gap: 16px; max-width: 74ch; }
.gov-pack { display: grid; gap: 26px var(--gutter); margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gov-pack-item { display: grid; gap: 7px; align-content: start; padding-top: 18px; border-top: 1px solid var(--c-line); }
.gov-pack-item p { font-size: 0.86rem; line-height: 1.5; }
.gov-teams { display: grid; gap: var(--gutter); margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gov-team { display: grid; gap: 9px; align-content: start; padding-top: 20px; border-top: 2px solid var(--c-teal); }
.gov-team h3 { font-size: 1.06rem; letter-spacing: -0.015em; line-height: 1.3; }
.gov-team p { font-size: 0.88rem; line-height: 1.5; }

/* ---------- experience page ---------- */
.ev-tag {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--radius); border: 1px solid; width: fit-content; white-space: nowrap;
}
.ev-tag--verified { color: var(--c-ok); border-color: var(--c-ok); }
.ev-tag--published { color: var(--c-link); border-color: var(--c-link); }
.ev-tag--illustrative { color: var(--c-muted); border-color: var(--c-line-strong); border-style: dashed; }
.ev-tag--conceptual { color: var(--c-muted); border-color: var(--c-line-strong); border-style: dashed; }
.is-dark .ev-tag--illustrative, .is-navy .ev-tag--illustrative { color: var(--d-muted); border-color: var(--d-line-strong); }

.cs-empty { display: grid; gap: 14px; }
.cs-empty > h3, .cs-empty > p, .cs-empty > span { max-width: 78ch; }
.cs-empty h3 { font-size: var(--fs-4); letter-spacing: -0.02em; line-height: 1.16; }
.cs-empty p { font-size: 0.96rem; line-height: 1.6; }
.cs-frame { display: grid; margin-top: 8px; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
@media (min-width: 1100px) { .cs-frame { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cs-frame li { padding: 20px 18px 22px; display: grid; gap: 6px; align-content: start; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.cs-frame .n { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--c-teal); }
.cs-frame strong { font-size: 0.98rem; letter-spacing: -0.01em; }
.cs-frame span.d { font-size: 0.8rem; color: var(--c-muted); line-height: 1.45; }
.cs { display: grid; gap: 22px; padding-block: 30px; border-top: 1px solid var(--c-line); }
.cs-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cs-head h3 { font-size: var(--fs-4); letter-spacing: -0.02em; }
.cs-part { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.cs-part .n { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--c-faint); }
.cs-part h4 { font-size: 0.78rem; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-teal-deep); font-weight: 500; font-stretch: 100%; }

.pp-block { display: grid; gap: 18px; max-width: 74ch; margin-top: 30px; }
.pp-list { display: grid; gap: 8px; }
.pp-list li { position: relative; padding-left: 20px; font-size: 0.9rem; line-height: 1.5; }
.pp-list li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-teal); }

.sp-grid { display: grid; margin-top: 34px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.sp-cell { padding: 22px 20px 20px; display: grid; gap: 10px; align-content: start; justify-items: start; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
/* the client marks carry baked-in white backgrounds, so they sit on a light plate
   rather than being knocked out (see docs/DECISIONS.md and CLIENT-INPUT R10) */
.sp-cell img { height: 42px; width: auto; max-width: 100%; object-fit: contain; background: var(--c-white); border-radius: 3px; padding: 6px 8px; }
.sp-name { font-size: 0.88rem; font-weight: 600; line-height: 1.35; }
.sp-type { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-faint); }

.ra-host { display: grid; gap: 1px; background: var(--d-line); margin-top: 34px; }
.ra { background: var(--c-navy); padding: 30px 28px 32px; display: grid; gap: 18px; scroll-margin-top: calc(var(--nav-h) + 40px); }
.ra-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.ra-head .n { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--c-cyan); }
.ra-head h3 { font-size: 1.2rem; letter-spacing: -0.018em; line-height: 1.24; }
@media (max-width: 700px) { .ra-head { grid-template-columns: auto 1fr; } .ra-head .ev-tag { grid-column: 2; } }
.ra-body { display: grid; gap: 22px; }
@media (min-width: 900px) { .ra-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gutter); } }
.ra-part { display: grid; gap: 8px; align-content: start; padding-top: 15px; border-top: 1px solid var(--d-line); }
.ra-part h4 { font-size: 0.74rem; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-cyan); font-weight: 500; font-stretch: 100%; }
.ra-part p { font-size: 0.88rem; line-height: 1.55; color: var(--d-text); }
.ra-part p.muted { color: var(--d-muted); }
.ra-part ol { display: grid; gap: 7px; counter-reset: ra; }
.ra-part li { position: relative; padding-left: 24px; font-size: 0.86rem; line-height: 1.45; color: var(--d-text); counter-increment: ra; }
.ra-part li::before { content: counter(ra, decimal-leading-zero); position: absolute; left: 0; top: 0.08em; font-family: var(--f-mono); font-size: 0.64rem; color: var(--c-cyan); letter-spacing: 0.08em; }
.ra-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.ra-tags span {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  color: var(--d-muted); border: 1px solid var(--d-line-strong); padding: 5px 9px; border-radius: var(--radius);
}
.ra-cap { font-size: var(--fs-0); color: var(--d-muted); }
.ra-cap a { color: var(--c-cyan); }

/* ---------- training: areas, programs and the wording rule ---------- */
.tr-areas { display: grid; gap: 1px; background: var(--c-line); margin-top: 34px; }
.tr-area { background: var(--c-surface); padding: 30px 28px 32px; display: grid; gap: 16px; scroll-margin-top: calc(var(--nav-h) + 40px); }
.tr-area--scoped { background: none; border: 1px dashed var(--c-line-strong); }
.tr-area-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; }
.tr-area-head .n { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.16em; color: var(--c-teal); padding-top: 0.2em; }
.tr-area-head h3 { font-size: 1.24rem; letter-spacing: -0.018em; line-height: 1.22; }
.tr-area-head .label { display: block; margin-top: 4px; }
@media (max-width: 760px) { .tr-area-head { grid-template-columns: auto 1fr; } .tr-area-head .tr-area-tag { grid-column: 2; } }
.tr-area-tag {
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius); border: 1px solid; width: fit-content; white-space: nowrap;
}
.tr-area-tag--catalog { color: var(--c-teal); border-color: var(--c-teal); }
.tr-area-tag--scoped { color: var(--c-muted); border-color: var(--c-line-strong); border-style: dashed; }
.tr-area-state { font-size: 0.94rem; line-height: 1.55; color: var(--c-muted); }
.tr-area-grid { display: grid; gap: 26px; }
@media (min-width: 900px) { .tr-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gutter); } }
.tr-area-topics, .tr-area-courses { display: grid; gap: 12px; align-content: start; padding-top: 16px; border-top: 1px solid var(--c-line); }
.tr-area-topics h4, .tr-area-courses h4 { font-size: 0.74rem; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-teal-deep); font-weight: 500; font-stretch: 100%; }
.tr-area-topics ul { display: grid; gap: 7px; }
.tr-area-topics li { position: relative; padding-left: 18px; font-size: 0.87rem; line-height: 1.45; }
.tr-area-topics li::before { content: ""; position: absolute; left: 0; top: 0.56em; width: 8px; height: 8px; border: 1.5px solid var(--c-teal); border-radius: 50%; }
.tr-area-optional { display: grid; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.tr-area-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tr-area-tags span {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  color: var(--c-muted); border: 1px solid var(--c-line-strong); padding: 5px 9px; border-radius: var(--radius);
}
.tr-area-list { display: grid; gap: 1px; background: var(--c-line); }
.tr-area-list a { background: var(--c-surface-2); padding: 12px 14px; display: grid; gap: 3px; text-decoration: none; color: var(--c-text); transition: background 0.2s, color 0.2s; }
.tr-area--scoped .tr-area-list a { background: var(--c-surface); }
.tr-area-list a:hover, .tr-area-list a:focus-visible { background: var(--c-surface-3); color: var(--c-link); }
.tr-area-list .n { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.1em; color: var(--c-faint); }
.tr-area-list strong { font-size: 0.92rem; font-weight: 600; }
.tr-area-list span.d { font-size: 0.78rem; color: var(--c-muted); line-height: 1.4; }
.tr-area-for { font-size: 0.84rem; color: var(--c-muted); line-height: 1.5; }

.tr-programs { display: grid; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.tr-program { padding: 24px 22px 26px; display: grid; gap: 8px; align-content: start; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.tr-program .n { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--c-teal); }
.tr-program h3 { font-size: 1.02rem; letter-spacing: -0.015em; line-height: 1.3; }
.tr-program p { font-size: 0.86rem; line-height: 1.5; }

.tr-wording { display: grid; gap: 18px; max-width: 92ch; }
.tr-wording h3 { font-size: var(--fs-4); letter-spacing: -0.02em; }
.tr-wording > p { font-size: 0.98rem; line-height: 1.6; }
.tr-wording-grid { display: grid; gap: 24px var(--gutter); margin-top: 4px; }
@media (min-width: 760px) { .tr-wording-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-wording-grid > div { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--c-line); }
.tr-wording-grid ul { display: grid; gap: 7px; }
.tr-wording-grid li { position: relative; padding-left: 22px; font-size: 0.88rem; line-height: 1.45; }
.tr-wording-grid li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--c-ok); }
.tr-wording-no li::before { border-radius: 2px; border-color: var(--c-error); }

/* ---------- contact: the ten inquiry paths ---------- */
.ip-host { display: grid; gap: 34px; margin-top: 34px; }
.ip-group { display: grid; gap: 14px; }
.ip-group-title { font-size: 0.76rem; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-teal-deep); font-weight: 500; font-stretch: 100%; }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.ip-cell {
  position: relative; display: grid; gap: 6px; align-content: start; padding: 20px 40px 22px 20px;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  text-decoration: none; color: var(--c-text); transition: background 0.2s, color 0.2s;
}
.ip-cell:hover, .ip-cell:focus-visible { background: var(--c-surface); color: var(--c-link); }
.ip-cell .n { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--c-faint); }
.ip-cell:hover .n { color: var(--c-teal); }
.ip-cell strong { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.28; }
.ip-cell span.d { font-size: 0.82rem; color: var(--c-muted); line-height: 1.45; }
.ip-go { position: absolute; right: 16px; top: 20px; color: var(--c-faint); transition: transform 0.25s var(--ease-out), color 0.2s; }
.ip-go svg { width: 15px; height: 15px; }
.ip-cell:hover .ip-go { color: var(--c-link); transform: translateX(3px); }

/* ---------- about: careers ---------- */
.careers-block { display: grid; gap: 30px var(--gutter); margin-top: 34px; }
@media (min-width: 900px) { .careers-block { grid-template-columns: 7fr 5fr; } }
.careers-block > div { display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 1px solid var(--c-line); }
.careers-block p { font-size: 0.94rem; line-height: 1.6; }
.careers-list { display: grid; gap: 9px; }
.careers-list li { position: relative; padding-left: 20px; font-size: 0.88rem; color: var(--c-muted); line-height: 1.5; }
.careers-list li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-teal); }

/* ---------- home: the client's own descriptor line under the H1 ---------- */
.hero-descriptor {
  font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-cyan); margin-top: 6px;
}

/* ---------- print ---------- */
@media print {
  .cap-chain, .tech-flow, .ip-go { display: none !important; }
  .cap-side, .soln-side { position: static; }
}

/* ============================================================================
   VERSION 2 FINAL (2026-09-30) : five markets, seven capabilities.

   The client's closing direction consolidated the architecture: nine sectors
   became five markets, nine capability pillars became seven with the rest as
   supporting services, and the Technology and Government pages gained the
   procurement detail a public-sector buyer looks for. These rules cover the new
   components only. No token changed; every rule composes the existing system.
   ============================================================================ */

/* ---------- capabilities: core vs supporting services ---------- */
/* The client was explicit that supporting services must not read as competing
   pillars, so they sit visually beneath the core list rather than beside it. */
.cap-q--supporting { border-top-style: dashed; }
.cap-sup { display: grid; gap: 10px; margin-top: 14px; }
.cap-sup + .cap-sup { padding-top: 16px; border-top: 1px solid var(--c-line); }
.cap-sup-head { display: grid; gap: 3px; }
.cap-sup-head strong { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
.cap-sup-head .muted { font-size: 0.82rem; line-height: 1.45; }

/* ---------- technology: the eight-step procurement chain ---------- */
.tech-steps {
  display: grid; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line);
}
.tech-step {
  padding: 22px 20px 24px; display: grid; gap: 7px; align-content: start;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.tech-step .n { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--c-teal); }
.tech-step h3 { font-size: 1rem; letter-spacing: -0.015em; }
.tech-step p { font-size: 0.84rem; line-height: 1.45; }

/* ---------- technology: what each relationship word means ---------- */
.tech-rels { display: grid; gap: var(--gutter); margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.tech-rel { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--c-line); }
/* the one relationship that is actually held is the one a buyer needs to find */
.tech-rel--held { border-top: 2px solid var(--c-teal); }
.tech-rel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tech-rel-head strong { font-size: 1rem; letter-spacing: -0.015em; }
.tech-rel-tag {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-ok); border: 1px solid var(--c-ok); border-radius: var(--radius); padding: 3px 7px;
}
.tech-rel p { font-size: 0.85rem; line-height: 1.5; }
.tech-rel-jt { color: var(--c-text); }
.tech-rel:not(.tech-rel--held) .tech-rel-jt { color: var(--c-muted); }

/* ---------- government: registration identifiers on request ---------- */
.gov-reg-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gov-reg-avail {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-cyan); border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 5px 10px;
}
.gov-reg-list { display: grid; gap: 10px; margin-bottom: 18px; max-width: 72ch; }
.gov-reg-list li { display: grid; gap: 2px; position: relative; padding-left: 20px; }
.gov-reg-list li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-teal); }
.gov-reg-list strong { font-size: 0.92rem; font-weight: 600; }
.gov-reg-list span { font-size: 0.84rem; color: var(--c-muted); line-height: 1.45; }

/* ---------- company: the two kinds of partner, side by side ---------- */
.partner-split { display: grid; gap: 34px var(--gutter); margin-top: 34px; }
@media (min-width: 900px) { .partner-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.partner-split > div { display: grid; gap: 14px; align-content: start; padding-top: 20px; border-top: 1px solid var(--c-line); }
.partner-split .partner-rail { margin: 0; }
.partner-split .partners-note { margin: 0; font-size: var(--fs-0); color: var(--c-muted); line-height: 1.5; }

/* ---------- training: the client's exact positioning wording ---------- */
.tr-pos-lead { font-weight: 600; color: var(--c-text); }
.tr-pos-split {
  font-size: 0.92rem; color: var(--c-muted); border-left: 2px solid var(--c-teal);
  padding-left: 14px; margin-top: 14px;
}
[data-training-positioning] p + p { margin-top: 0.7em; }

/* ---------- print ---------- */
@media print { .tech-steps, .tech-rels { break-inside: avoid; } }

/* ============================================================================
   25 -> 7 CONSOLIDATION (2026-10-01).

   The client supplied an explicit mapping table and a three-level hierarchy:
   seven capabilities -> supporting services / specialties -> relevant technologies
   and delivery areas. These rules make those three levels visible, and carry his
   own "How it should appear" label onto every service.
   ============================================================================ */

/* ---------- the role label from the client's table ---------- */
/* It sits on the service, quiet, because its job is to stop a supporting service
   being misread as a core capability - not to compete with the service name. */
.cap-role, .svc-role {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-faint); line-height: 1.3;
}
.cap-svcs a:hover .cap-role, .cap-svcs a:focus-visible .cap-role { color: var(--c-teal); }

/* ---------- level three: technologies and delivery areas ---------- */
.cap-tech { display: flex; flex-wrap: wrap; gap: 7px; }
.cap-tech span {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--c-muted); border: 1px solid var(--c-line-strong);
  padding: 5px 9px; border-radius: var(--radius);
}

/* ---------- services index, grouped under the seven ---------- */
/* Replaces the flat twenty-five-cell grid, which read as a competing top-level
   architecture. Same services, same anchors, now nested. */
.svc-index { display: grid; gap: 38px; border: 0; grid-template-columns: 1fr; }
.svc-group { display: grid; gap: 14px; }
.svc-group-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line-strong); }
.svc-group-head .n { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--c-teal); }
.svc-group-head h3 { font-size: 1.12rem; letter-spacing: -0.018em; }
.svc-group-head a { text-decoration: none; color: var(--c-text); }
.svc-group-head a:hover { color: var(--c-link); }
.svc-group-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line);
}
.svc-group-list a {
  display: grid; gap: 5px; align-content: start; padding: 15px 17px;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  color: var(--c-text); text-decoration: none; transition: background 0.2s, color 0.2s;
}
.svc-group-list a:hover, .svc-group-list a:focus-visible { background: var(--c-surface); color: var(--c-link); }
.svc-group-list .n { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--c-faint); }
.svc-group-list a:hover .n { color: var(--c-teal); }
.svc-group-list strong { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; line-height: 1.3; }
.svc-group-list span.d { font-size: 0.79rem; color: var(--c-muted); line-height: 1.4; }

/* ---------- which capability a service section belongs to ---------- */
.svc-cap { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.svc-cap a { font-size: 0.9rem; font-weight: 600; color: var(--c-link); text-decoration: none; }
.svc-cap a:hover { text-decoration: underline; }