/* ═══════════════════════════════════════════════════════════════════════
   GeXOn AI — gx.css · core design system (v6)
   ───────────────────────────────────────────────────────────────────────
   Loaded on every public page. Replaces main.min.css + components.min.css
   + process.css, which were three layers of overrides on one another.

   Files in this system:
     gx.css           tokens, base, layout, chrome, shared components
     gx-visuals.css   diagrams, product interfaces, explorers, calculator
     gx-forms.css     forms, booking calendar, careers, blog

   No build step. Edit here, then bump ?v= on every <link> to this file
   (.htaccess caches CSS for a year, immutable).

   Visual language: SYSTEMS → DATA → INTELLIGENCE → ACTION.
   Graphite and warm white carry the page; teal is the only brand accent
   and is reserved for flow, state and the primary action on dark.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1 · Fonts ─────────────────────────────────────────────────────────
   Geist + Geist Mono (SIL OFL, assets/fonts/OFL-LICENSE.txt), self-hosted
   Latin subsets. Arrows (→) are outside the Latin subset and fall back to
   the system font, which renders them well everywhere. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-var.woff2") format("woff2-variations"),
       url("../fonts/geist-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-ext-var.woff2") format("woff2-variations"),
       url("../fonts/geist-latin-ext-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin-var.woff2") format("woff2-variations"),
       url("../fonts/geist-mono-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}


/* ── 2 · Tokens ─────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Brand navy, taken from the logo (#173358) and shared with the
     Training Center. Surfaces on dark, text on light. */
  --ink:        #0F2340;   /* deep navy: text on light, surface on dark  */
  --ink-2:      #142A4B;
  --ink-3:      #173358;   /* logo navy                                  */
  --ink-4:      #22436F;
  --paper:      #FFFFFF;   /* the page: white, as the logo sits on       */
  --paper-2:    #F3F6F9;   /* alternate section, navy-tinted             */
  --paper-3:    #E6ECF2;
  --white:      #FFFFFF;

  --text:       #0F2340;   /* 15.7:1 on paper */
  --text-2:     #3A4960;   /* 9.1:1 on paper  */
  --text-3:     #56647A;   /* 6.0:1 on paper, 5.5:1 on paper-2 — the lowest used */
  --line:       #E0E6ED;
  --line-2:     #C7D1DC;

  --on-dark:    #F5F7FA;
  --on-dark-2:  #B6C1CF;   /* 8.6:1 on ink */
  --on-dark-3:  #95A3B6;   /* 6.2:1 on ink, 5.0:1 on ink-3 */
  --line-dark:  rgba(255, 255, 255, 0.10);
  --line-dark-2:rgba(255, 255, 255, 0.18);

  /* The one accent: the logo teal. As text: bright on dark, deep on light
     (#28C09C text on white is 2.2:1). As a fill it carries every primary
     button, with navy text on it (6.8:1). */
  --teal:       #28C09C;   /* 6.8:1 on ink */
  --teal-2:     #5FD3B4;
  --teal-ink:   #0F7A60;   /* 5.0:1 on paper, 5.3:1 on white */
  --teal-deep:  #0B5E4A;
  --teal-wash:  rgba(40, 192, 156, 0.12);
  --teal-wash-2:rgba(40, 192, 156, 0.22);

  /* Data-state colours, used only inside diagrams and product interfaces. */
  --amber:      #774C00;   /* on light and on amber wash, ≥6:1 */
  --amber-hi:   #F2B544;   /* on dark */
  --amber-wash: rgba(242, 181, 68, 0.16);
  --red:        #963022;
  --red-hi:     #F08A78;
  --red-wash:   rgba(240, 138, 120, 0.14);
  --slate:      #5B7A99;
  --slate-hi:   #9DB6CF;

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1.0625rem;  /* 17 */
  --fs-md:   1.1875rem;  /* 19 */
  --fs-lg:   1.375rem;   /* 22 */
  --fs-xl:   1.75rem;    /* 28 */
  --fs-2xl:  clamp(1.875rem, 1.35rem + 1.9vw, 2.625rem);   /* 30 → 42 */
  --fs-3xl:  clamp(2rem, 1.45rem + 2.1vw, 3.125rem);      /* 32 → 50 */
  --fs-4xl:  clamp(2.5rem, 1.55rem + 3.9vw, 4.375rem);     /* 40 → 70 */

  /* Space (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  --container: 1240px;
  --gutter: 16px;
  --header-h: 68px;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(15, 35, 64, 0.06), 0 1px 1px rgba(15, 35, 64, 0.04);
  --shadow-2: 0 12px 32px -12px rgba(15, 35, 64, 0.18), 0 2px 6px rgba(15, 35, 64, 0.05);
  --shadow-3: 0 30px 70px -24px rgba(15, 35, 64, 0.35), 0 4px 14px rgba(15, 35, 64, 0.08);

  /* Motion: one curve, two durations. */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --t-fast: 180ms;
  --t-slow: 520ms;

  --focus: var(--teal-ink);
}

@media (min-width: 768px)  { :root { --gutter: 28px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }


/* ── 3 · Reset & base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

[hidden] { display: none !important; }

::selection { background: var(--teal-wash-2); color: var(--ink); }

/* ── Type scale. Weight, tracking and leading taper with size. ──────── */
h1, .h1 {
  font-size: var(--fs-4xl);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h2, .h2 {
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--fs-xl);
  font-weight: 580;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h4, .h4 {
  font-size: var(--fs-lg);
  font-weight: 580;
  line-height: 1.28;
  letter-spacing: -0.012em;
}
h5, .h5 {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

p { text-wrap: pretty; }

/* Nepali pages load Noto Sans Devanagari; Geist has no Devanagari glyphs. */
:lang(ne) { font-family: "Noto Sans Devanagari", var(--font-sans); }
:lang(ne) h1, :lang(ne) h2 { letter-spacing: -0.01em; line-height: 1.3; }
p + p { margin-top: 1em; }

.lede {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 58ch;
}
@media (min-width: 1024px) { .lede { font-size: var(--fs-lg); line-height: 1.5; } }

.muted { color: var(--text-3); }
.mono  { font-family: var(--font-mono); font-feature-settings: "zero"; }
strong, b { font-weight: 620; }
small { font-size: var(--fs-sm); }

/* The label voice: mono, small caps-like, tracked. Used for numbered
   section kickers, step numbers, data labels. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.kicker__n { color: var(--teal-ink); }
.kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.kicker--plain::before { display: none; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--t-fast) var(--ease);
}
a:hover { text-decoration-color: currentColor; }

.link {
  color: var(--teal-ink);
  font-weight: 560;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.link::after {
  content: "→";
  font-family: system-ui, sans-serif;
  transition: transform var(--t-fast) var(--ease);
}
.link:hover::after { transform: translateX(3px); }
.link:hover { text-decoration: underline; text-underline-offset: 0.22em; }

/* ── Focus & skip link ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.site-footer :focus-visible { --focus: var(--teal); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--on-dark);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 12px; }

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

main:focus { outline: none; }


/* ── 4 · Layout ─────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(820px + var(--gutter) * 2); }

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--tight   { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }
.section--paper2  { background: var(--paper-2); }
.section--rule    { border-top: 1px solid var(--line); }

/* Dark surfaces. Anything inside .on-dark inherits the dark palette. */
.on-dark {
  background: var(--ink);
  color: var(--on-dark);
  --text: var(--on-dark);
  --text-2: var(--on-dark-2);
  --text-3: var(--on-dark-3);
  --line: var(--line-dark);
  --line-2: var(--line-dark-2);
  --focus: var(--teal);
}
.on-dark .kicker__n,
.on-dark .link { color: var(--teal); }
.on-dark .lede { color: var(--on-dark-2); }

/* Section header: editorial, left-aligned, kicker → headline → intro. */
.section-head {
  display: grid;
  gap: var(--s-5);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  max-width: 760px;
}
.section-head h2 { max-width: 20ch; }
.split h2, .faq-layout h2 { font-size: var(--fs-2xl); }
.section-head--wide h2 { max-width: 24ch; }
.section-head p { color: var(--text-2); font-size: var(--fs-md); max-width: 60ch; }

@media (min-width: 1024px) {
  /* Split header: headline left, intro right, both hanging off one rule. */
  .section-head--split {
    max-width: none;
    grid-template-columns: 5fr 6fr;
    column-gap: var(--s-16);
    align-items: end;
  }
  .section-head--split .kicker { grid-column: 1 / -1; }
  .section-head--split p { padding-bottom: 0.4rem; }
}

.grid { display: grid; gap: var(--s-8); }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Two-column split used for copy + visual. */
.split {
  display: grid;
  gap: var(--s-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-16); }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--reverse > :first-child { order: 2; }
  .split--top { align-items: start; }
}

.stack > * + * { margin-top: var(--s-5); }
.stack-sm > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-8); }


/* Off-screen sections skip style and layout until they approach the
   viewport — the single biggest cut to load-time main-thread work on
   long pages. gx.js re-measures scroll-staged chapters as they render. */
@supports (content-visibility: auto) {
  main > section:not(:first-child) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
  /* Set by gx.js before an in-page jump, so the browser scrolls to real
     positions rather than estimated ones. */
  html.cv-off main > section { content-visibility: visible !important; }
  main > section.cv-warm { content-visibility: visible; } /* rendered ahead in idle time by gx.js */
}


/* ── 5 · Buttons ────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--teal);
  --btn-fg: var(--ink);
  --btn-bd: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 46px;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { --btn-bg: var(--teal-2); --btn-bd: var(--teal-2); }
.btn:active { transform: translateY(1px); }

.btn--lg { min-height: 54px; padding: 0.85rem 1.6rem; font-size: 0.975rem; }
.btn--sm { min-height: 38px; padding: 0.45rem 0.95rem; font-size: 0.8125rem; }
.btn--block { width: 100%; }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-2);
}
.btn--secondary:hover { --btn-bg: var(--white); --btn-bd: var(--ink); }

/* On dark: primary becomes teal (the one place the bright accent carries
   a control), secondary becomes a hairline outline. */
.on-dark .btn {
  --btn-bg: var(--teal);
  --btn-fg: var(--ink);
  --btn-bd: var(--teal);
}
.on-dark .btn:hover { --btn-bg: var(--teal-2); --btn-bd: var(--teal-2); }
.on-dark .btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--on-dark);
  --btn-bd: var(--line-dark-2);
}
.on-dark .btn--secondary:hover { --btn-bg: rgba(255, 255, 255, 0.06); --btn-bd: var(--on-dark-2); }

.btn .arrow { font-family: system-ui, sans-serif; transition: transform var(--t-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; pointer-events: none; }
.btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.btn--loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: gx-spin 0.7s linear infinite;
}
@keyframes gx-spin { to { transform: rotate(360deg); } }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }


/* ── 6 · Tags & small labels ────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.tag--live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-wash);
}
.tag--accent { border-color: transparent; background: var(--teal-wash); color: var(--teal-deep); }
.on-dark .tag--accent { color: var(--teal-2); }

/* The honesty label. Every mock interface on the site carries one. */
.gx-illus {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.gx-illus::before {
  content: "";
  width: 12px; height: 12px;
  border: 1px dashed currentColor;
  border-radius: 3px;
}


/* ── 7 · Header & navigation ────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 95%, transparent); /* stays paper over navy bands */
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
  text-decoration: none;
}
.brand img { width: auto; height: 30px; }

.nav { display: none; }
@media (min-width: 1080px) {
  .nav { display: flex; align-items: center; gap: var(--s-1); margin-right: var(--s-4); }
}

.nav__link,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 40px;
  padding: 0.4rem 0.8rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 540;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__link:hover,
.nav__trigger:hover,
.nav__trigger[aria-expanded="true"] { color: var(--ink); background: var(--paper-2); }
.nav__link[aria-current="page"],
.nav__item.is-current > .nav__trigger { color: var(--ink); }
.nav__link[aria-current="page"]::after,
.nav__item.is-current > .nav__trigger::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--teal-ink);
}

.nav__caret {
  width: 10px; height: 10px;
  transition: transform var(--t-fast) var(--ease);
}
.nav__trigger[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__item { position: relative; }

/* Disclosure panel. Hidden with [hidden] toggled by JS; with JS off the
   panels stay reachable through :focus-within so keyboard users are not
   locked out. */
.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-3);
  animation: gx-pop var(--t-fast) var(--ease);
}
.no-js .nav__item:focus-within .nav__panel,
.no-js .nav__item:hover .nav__panel { display: block !important; }

@keyframes gx-pop {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.nav__panel--mega {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  width: min(880px, calc(100vw - 48px));
  padding: var(--s-4);
}
.nav__panel--mega:not([hidden]) { display: grid; }

.nav__col { padding: var(--s-3); border-radius: var(--radius); }
.nav__col + .nav__col { border-left: 1px solid var(--line); border-radius: 0; }
.nav__col-label {
  display: block;
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.nav__entry {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--t-fast) var(--ease);
}
.nav__entry:hover { background: var(--paper); }
.nav__entry[aria-current="page"] { background: var(--paper-2); }
.nav__entry strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.nav__entry span { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--text-3); margin-top: 2px; }
.nav__entry--compact { padding: 0.4rem 0.7rem; font-size: var(--fs-sm); font-weight: 520; }
.nav__entry--ext::after { content: " ↗"; font-family: system-ui, sans-serif; color: var(--text-3); }

.header-cta { display: none; }
@media (min-width: 640px) { .header-cta { display: inline-flex; } }

/* Mobile menu button */
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink);
}
.menu-btn:hover { background: var(--paper-2); }
.menu-btn svg { width: 22px; height: 22px; }
@media (min-width: 1080px) { .menu-btn { display: none; } }

/* Mobile drawer: a real modal dialog (focus-trapped in gx.js). */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 35, 64, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.drawer.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-fast) var(--ease); }

.drawer__panel {
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  transform: translateX(24px);
  transition: transform var(--t-slow) var(--ease);
}
.drawer.is-open .drawer__panel { transform: none; }

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.drawer__top img { height: 30px; width: auto; }

.drawer__body { padding: var(--s-4) var(--gutter) var(--s-8); flex: 1; }
.drawer__group { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.drawer__group:last-child { border-bottom: 0; }
.drawer__label {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0.35rem 0;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 540;
  text-decoration: none;
}
.drawer__link small { color: var(--text-3); font-size: var(--fs-sm); font-weight: 400; }
.drawer__link[aria-current="page"] { color: var(--teal-ink); }
.drawer__foot {
  padding: var(--s-5) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  bottom: 0;
}

body.is-locked { overflow: hidden; }


/* ── 8 · Page hero (inner pages) ────────────────────────────────────── */
.page-hero {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  border-bottom: 1px solid var(--line);
  overflow: clip;
}
.page-hero__grid { display: grid; gap: var(--s-12); align-items: center; }
@media (min-width: 1024px) {
  .page-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-16); }
  .page-hero__grid--wide-copy { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.page-hero h1 { margin-top: var(--s-5); max-width: 16ch; }
.page-hero h1.h1--long { max-width: 22ch; font-size: clamp(2.25rem, 1.3rem + 2.9vw, 3.5rem); line-height: 1.05; }
.page-hero .lede { margin-top: var(--s-6); }
.page-hero .actions { margin-top: var(--s-8); }
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.page-hero__meta b { color: var(--ink); font-weight: 600; }

/* Home hero: full-width three-beat headline, lede and actions on one
   row beneath it, then the system map at full container width. */
.hero { position: relative; overflow: clip; padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3.5rem, 2rem + 5vw, 7rem); }
.hero > .container { position: relative; }
.hero__title {
  margin-top: var(--s-6);
  font-size: clamp(2.5rem, 1.1rem + 4.3vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.hero__title span { display: block; }
.hero__title span:not(:last-child) { color: var(--text-3); }
.hero__row { display: grid; gap: var(--s-8); margin-top: var(--s-8); align-items: end; }
@media (min-width: 1024px) { .hero__row { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-16); } }
.hero__cta { display: grid; gap: var(--s-5); }
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.hero__facts b { color: var(--ink); font-weight: 600; }
.hero__visual { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* The faint grid behind heroes: a nod to structured data, kept at the
   edge of visibility. */
.gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(15, 35, 64, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 35, 64, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 70% 30%, #000 20%, transparent 75%);
}
.on-dark .gridlines {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}
.page-hero > .container { position: relative; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.breadcrumb li + li::before { content: "/"; margin-right: 0.5em; opacity: 0.6; }
.breadcrumb a { color: var(--text-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }


/* ── 9 · Editorial content primitives ───────────────────────────────── */

/* Hairline-divided rows: the alternative to a grid of cards. */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows > li, .rows > .row {
  display: grid;
  gap: var(--s-3) var(--s-8);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
  .rows > li, .rows > .row { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: baseline; }
  .rows--3 > li { grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr); }
}
.rows h3, .rows h4 { font-size: var(--fs-lg); }
.rows p { color: var(--text-2); max-width: 62ch; }
.rows__n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--teal-ink); padding-top: 0.35em; letter-spacing: 0.06em; }
.on-dark .rows__n { color: var(--teal); }

/* Facts: a definition-list strip of short, verifiable answers. */
.facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 640px)  { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts > div {
  padding: var(--s-5) var(--s-5) var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px) {
  .facts > div { border-bottom: 0; padding-left: var(--s-5); border-left: 1px solid var(--line); }
  .facts > div:first-child { border-left: 0; padding-left: 0; }
}
.facts dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.facts dd { margin-top: var(--s-2); font-size: var(--fs-lg); font-weight: 580; letter-spacing: -0.015em; line-height: 1.25; }
.facts dd small { display: block; margin-top: var(--s-2); font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; color: var(--text-2); line-height: 1.5; }

/* Facts as a 2×2 block (hero side panels). */
.facts.facts--stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts.facts--stack > div { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-left: 0; border-bottom: 1px solid var(--line); }
.facts.facts--stack > div:nth-child(even) { padding-left: var(--s-5); border-left: 1px solid var(--line); }
@media (min-width: 1024px) { .booking-split { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }

/* Check list */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.checks li { position: relative; padding-left: 1.75em; color: var(--text-2); }
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 0.95em; height: 0.55em;
  border-left: 2px solid var(--teal-ink);
  border-bottom: 2px solid var(--teal-ink);
  transform: rotate(-45deg) scale(0.8);
  transform-origin: 30% 60%;
}
.on-dark .checks li::before { border-color: var(--teal); }
.checks--cross li::before {
  content: "×";
  border: 0;
  transform: none;
  top: -0.05em;
  width: auto; height: auto;
  color: var(--text-3);
  font-weight: 600;
  font-size: 1.15em;
}

/* Panel: used sparingly — a surface, not a card grid. */
.panel {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.on-dark .panel { background: var(--ink-2); }
.panel--paper { background: var(--paper); }

/* Quote */
.quote {
  font-size: var(--fs-xl);
  font-weight: 460;
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.quote::before { content: "“"; }
.quote::after  { content: "”"; }
.quote-by { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--text-3); }
.quote-by b { color: var(--ink); font-weight: 600; }
.on-dark .quote-by b { color: var(--on-dark); }

/* Prose — legal pages, blog posts. */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-xl); margin-top: 2.4em; letter-spacing: -0.02em; }
.prose h3 { font-size: var(--fs-lg); margin-top: 1.8em; }
.prose p, .prose li { color: var(--text-2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose a { color: var(--teal-ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { padding: 0.7rem 0.8rem 0.7rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink); }
.table-scroll { overflow-x: auto; }

/* Legal page layout: sticky table of contents beside the prose. */
.doc-layout { display: grid; gap: var(--s-10); }
@media (min-width: 1024px) {
  .doc-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-16); }
}
.toc { font-size: var(--fs-sm); }
@media (min-width: 1024px) { .toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
.toc ol { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 0.3rem 0 0.3rem 0.9rem; color: var(--text-2); text-decoration: none; margin-left: -1px; border-left: 1px solid transparent; }
.toc a:hover { color: var(--ink); border-left-color: var(--ink); }

.notice {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  border-radius: var(--radius);
  background: var(--amber-wash);
  color: var(--text);
  font-size: var(--fs-sm);
}
.notice b { color: var(--amber); }


/* ── 10 · FAQ ───────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-6) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-md);
  font-weight: 580;
  letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 12px; height: 12px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  transition: transform var(--t-fast) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--teal-ink); }
.on-dark .faq summary:hover { color: var(--teal); }
.faq__a { padding: 0 0 var(--s-6); max-width: 68ch; color: var(--text-2); }
.faq__a p + p { margin-top: 0.8em; }

@media (min-width: 1024px) {
  .faq-layout { display: grid; grid-template-columns: 4fr 7fr; gap: var(--s-16); align-items: start; }
  .faq-layout .section-head { position: sticky; top: calc(var(--header-h) + 32px); }
}


/* ── 11 · CTA band ──────────────────────────────────────────────────── */
.cta-band {
  position: relative;
  padding-block: clamp(4.5rem, 3rem + 6vw, 8rem);
  overflow: clip;
}
/* The band and the footer are both navy, so they read as one block: when the
   band is the last thing before the footer, trim its bottom padding so the
   two paddings do not stack into a large empty gap. */
.cta-band:last-child { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.cta-band__grid { position: relative; display: grid; gap: var(--s-8); align-items: end; }
@media (min-width: 1024px) { .cta-band__grid { grid-template-columns: 7fr 5fr; gap: var(--s-16); } }
.cta-band h2 { max-width: 16ch; }
.cta-band p { color: var(--text-2); font-size: var(--fs-md); max-width: 46ch; }
.cta-band__side { display: grid; gap: var(--s-6); }
.cta-band__note { font-size: var(--fs-sm); color: var(--text-3); }

/* A quiet flow line running behind the closing CTA — the one decorative
   element in the system, and it still says "systems connected". */
.cta-band__flow {
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
}


/* ── 12 · Footer ────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: var(--on-dark-2);
  font-size: var(--fs-sm);
  --text: var(--on-dark);
  --line: var(--line-dark);
}
.site-footer__top {
  display: grid;
  gap: var(--s-10);
  padding-block: var(--s-12);
}
@media (min-width: 768px)  { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__top { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--s-8); } }

.site-footer__brand img { width: 150px; height: auto; }
.site-footer__brand p { margin-top: var(--s-5); max-width: 32ch; color: var(--on-dark-2); line-height: 1.55; }
.site-footer__h {
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.site-footer a {
  display: inline-flex;
  padding: 0.3rem 0;
  color: var(--on-dark-2);
  text-decoration: none;
}
.site-footer a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 0.22em; }
.site-footer a[aria-current="page"] { color: var(--on-dark); }
.site-footer__social { display: flex; gap: var(--s-2); margin-top: var(--s-6); }
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-dark-2);
  border-radius: 50%;
}
.site-footer__social a:hover { border-color: var(--on-dark-2); }
.site-footer__social svg { width: 16px; height: 16px; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-8);
  justify-content: space-between;
  padding-block: var(--s-6) calc(var(--s-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-dark);
  color: var(--on-dark-3);
}
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-6); }


/* ── 13 · Cookie banner ─────────────────────────────────────────────── */
.cookie {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 250;
  display: grid;
  gap: var(--s-4);
  max-width: 560px;
  padding: var(--s-5);
  border: 1px solid var(--line-dark-2);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--on-dark-2);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-3);
  --focus: var(--teal);
}
@media (min-width: 640px) { .cookie { left: 24px; bottom: 24px; right: auto; } }
.cookie p { line-height: 1.5; }
.cookie a { color: var(--on-dark); }
.cookie .actions .btn { --btn-bg: var(--teal); --btn-fg: var(--ink); --btn-bd: var(--teal); }
.cookie .actions .btn--secondary { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-bd: var(--line-dark-2); }



/* Product-page primitives ─────────────────────────────────────────────── */
.h1__sub { display: block; margin-top: 0.3em; font-size: 0.42em; font-weight: 460; letter-spacing: -0.015em; line-height: 1.25; color: var(--text-3); }
.hero-flow { box-shadow: var(--shadow-2); }
.hero-flow .flow { margin-top: var(--s-5); }

/* Problem → consequence → change → value: four short statements in a row,
   read left to right, with the "after" half in the accent voice. */
.pcv { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
@media (min-width: 768px)  { .pcv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pcv { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pcv > div { padding: var(--s-6) var(--s-6) var(--s-6) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) {
  .pcv > div { border-bottom: 0; padding: var(--s-6) var(--s-6) 0; border-left: 1px solid var(--line); }
  .pcv > div:first-child { border-left: 0; padding-left: 0; }
}
.pcv dt { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.pcv .is-good dt { color: var(--teal-ink); }
.on-dark .pcv .is-good dt { color: var(--teal); }
.pcv dd { margin-top: var(--s-3); font-size: var(--fs-md); line-height: 1.5; color: var(--text); letter-spacing: -0.005em; }

.deliver h3 { margin-bottom: var(--s-4); }
.deliver__big { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: var(--s-3); }
.tools { margin-top: var(--s-16); padding-top: var(--s-8); border-top: 1px solid var(--line); }
.tools__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tools__list li { padding: 0.35rem 0.8rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--fs-sm); color: var(--text-2); background: var(--white); }
.on-dark .tools__list li { background: transparent; }
.rows h3 a { text-decoration: none; }
.rows h3 a:hover { color: var(--teal-ink); }

/* "Which one fits" — problem → product list in a hero panel. */
.fit { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid var(--line); }
.fit li { border-bottom: 1px solid var(--line); }
.fit a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: 0.85rem 0; text-decoration: none; }
.fit b { font-weight: 560; }
.fit span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--teal-ink); white-space: nowrap; }
.fit span::after { content: " →"; font-family: system-ui, sans-serif; }
.fit a:hover b { text-decoration: underline; text-underline-offset: 0.2em; }

/* Comparison table */
.compare { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--fs-sm); }
.compare th, .compare td { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); border-bottom-color: var(--line-2); }
.compare tbody th { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
.compare tbody th a { text-decoration: none; }
.compare tbody th a:hover { color: var(--teal-ink); }
.compare td { color: var(--text-2); }

/* Doorway panels: a whole-card link to another part of the offer. */
.doorway { display: grid; gap: var(--s-3); text-decoration: none; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.doorway:hover { border-color: var(--ink); }
.doorway h3 { font-size: var(--fs-xl); }
.doorway p:not(.kicker) { color: var(--text-2); }

/* The shared-spine diagram gets a little more air than an inline flow. */
.spine { margin-top: var(--s-4); }
.spine .flow__step strong { font-size: var(--fs-md); }

/* ── 13b · People & proof ───────────────────────────────────────────── */

/* Founder portrait. The studio backdrop is off-palette, so the photo is
   shown in an editorial monochrome — real person, calmer frame. */
.portrait {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-3);
  aspect-ratio: 3 / 4;
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
}
.portrait figcaption {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  background: rgba(15, 35, 64, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--on-dark);
  font-size: var(--fs-sm);
}
.portrait figcaption span { color: var(--on-dark-3); }

/* Client logos — populated by clients.js from the admin panel; the whole
   section stays hidden until at least one real logo exists. */
.clients-strip { padding-block: var(--s-10); border-top: 1px solid var(--line); }
.clients-strip__label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-5); }
.clients-carousel { position: relative; }
.clients-carousel__track {
  display: flex;
  gap: var(--s-10);
  align-items: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.clients-carousel__track::-webkit-scrollbar { display: none; }
.clients-carousel__item { flex: 0 0 auto; scroll-snap-align: start; }
.clients-carousel__item img { height: 36px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.clients-carousel__item a:hover img { filter: none; opacity: 1; }
.clients-carousel__nav { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.clients-carousel__nav button {
  width: 40px; height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: none;
}

/* Team grid — populated by people.js from the admin panel. */
.team-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-8); }
.team-filter {
  min-height: 40px;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: none;
  font-size: var(--fs-sm);
  font-weight: 540;
  color: var(--text-2);
}
.team-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.team-meta { margin: 0 0 var(--s-4); font-size: var(--fs-sm); color: var(--text-3); }
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-8) var(--s-6); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.team-card__photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-3); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.team-card__dept {
  position: absolute;
  left: 10px; top: 10px;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink);
}
.team-card__linkedin {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
}
.team-card__linkedin svg { width: 15px; height: 15px; }
.team-card__body { padding-top: var(--s-4); }
.team-card__name { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
.team-card__role { margin-top: 2px; font-size: var(--fs-sm); color: var(--teal-ink); }
.team-card__bio { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.team-card__bio.is-open { display: block; }
.team-card__more { margin-top: var(--s-2); padding: 0; border: 0; background: none; color: var(--teal-ink); font-size: var(--fs-sm); font-weight: 560; }


/* ── 14 · Reveal ────────────────────────────────────────────────────────
   gx.js adds .is-pending only to .reveal elements that start BELOW the
   fold, then swaps it for .is-in as they scroll into view. Content is
   therefore never hidden without JavaScript, and nothing already on
   screen at load ever blinks out and back in. No inline script needed
   (the CSP report-only policy flags those). */
.reveal.is-pending {
  opacity: 0;
  transform: translateY(14px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-in[data-delay="1"] { transition-delay: 90ms; }
.reveal.is-in[data-delay="2"] { transition-delay: 180ms; }
.reveal.is-in[data-delay="3"] { transition-delay: 270ms; }


/* ── 15 · Reduced motion ─────────────────────────────────────────────
   Everything animated in this system has its finished frame as its base
   state, so collapsing durations is enough. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal.is-pending { opacity: 1; transform: none; }
}


/* ── 16 · Print ─────────────────────────────────────────────────────── */
@media print {
  .site-header, .drawer, .cookie, .cta-band, .site-footer__social, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .on-dark { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .section { padding-block: 1.5rem; }
  .reveal.is-pending { opacity: 1 !important; transform: none !important; }
}