/* ============================================================
   SOLVE 4 HEALTH (S4H) — Design System v2
   Static site. Plain CSS, no build step, no external CDN.

   Brand:  Deep Teal #00364A · Crimson Red #C8102E ·
           Vibrant Orange #FF6A00 · White / warm neutral
   Type:   Manrope (self-hosted, /assets/fonts/)

   Principles
   - Deep Teal is the dominant institutional colour.
   - Orange marks action, emphasis and selected state.
   - Crimson is a secondary accent, used sparingly.
   - The four-tile S4H mark informs geometry: rounded squares,
     modular grids, connected blocks. It is never decoration for
     its own sake.
   - Relationships between stages are two-way (↔) wherever the
     underlying work is iterative.
   ============================================================ */

/* ---------- Fonts ------------------------------------------------------- */
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* ---------- Tokens ------------------------------------------------------ */
:root {
  /* Deep Teal */
  --teal-950: #00131c; --teal-900: #001a24; --teal-800: #00283a;
  --teal-700: #00364a; /* brand primary */
  --teal-600: #0a5067; --teal-500: #166d88; --teal-400: #3e8da6;
  --teal-300: #79b2c5; --teal-200: #b6d6e1; --teal-100: #e3eff3; --teal-50: #f1f7f9;

  /* Crimson Red */
  --red-800: #7d0a1d; --red-700: #a30d26;
  --red-600: #c8102e; /* brand secondary */
  --red-500: #e01b3c; --red-400: #ec5066; --red-300: #f59aa8; --red-200: #fbcdd4; --red-100: #fde8eb;

  /* Vibrant Orange */
  --orange-800: #a84600; --orange-700: #cc5500;
  --orange-600: #ff6a00; /* brand accent */
  --orange-500: #ff8224; --orange-400: #ffa052; --orange-300: #ffc189; --orange-200: #ffddc0; --orange-100: #fff0e5;
  --orange-text: #b04a00; /* orange for small text on light surfaces — AA 5.1:1 */

  /* Neutrals */
  --white: #ffffff;
  --warm-50: #faf7f2; --warm-100: #f3ede2; --warm-200: #e8e0d2;
  --grey-50: #f4f6f8; --grey-100: #eaeef1; --grey-200: #dbe1e6; --grey-300: #c3ccd3;
  --grey-400: #8a959e; --grey-500: #6c7780; --grey-600: #4d575f; --grey-700: #343c43;
  --grey-800: #20262b; --grey-900: #12171b;

  /* Semantic */
  --surface-page: var(--warm-50);
  --surface-raised: var(--white);
  --surface-muted: var(--warm-100);
  --surface-dark: var(--teal-700);
  --surface-darker: var(--teal-800);
  --surface-darkest: var(--teal-900);
  --text-strong: var(--teal-900);
  --text-heading: var(--teal-700);
  --text-body: var(--grey-700);
  --text-muted: var(--grey-600);
  --text-on-dark: var(--white);
  --text-on-dark-muted: rgba(255,255,255,.76);
  --text-on-dark-faint: rgba(255,255,255,.56);
  --text-link: var(--teal-700);
  --border-subtle: #e4ddd0;
  --border-default: var(--grey-300);
  --border-strong: var(--grey-400);
  --border-on-dark: rgba(255,255,255,.14);
  --line-connector: var(--teal-300);
  --danger: var(--red-600);
  --danger-bg: var(--red-100);
  --success: #1f7a52;
  --success-bg: #e6f4ec;
  --focus: var(--teal-700);
  --focus-on-dark: var(--orange-400);

  /* Spacing (4px base) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  /* Radii — derived from the rounded-square S4H tile */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px;
  --radius-xl: 20px; --radius-pill: 999px;

  /* Elevation — used sparingly; borders do most of the work */
  --shadow-xs: 0 1px 2px rgba(0,26,36,.05);
  --shadow-sm: 0 1px 2px rgba(0,26,36,.05), 0 2px 6px rgba(0,26,36,.04);
  --shadow-md: 0 6px 18px rgba(0,26,36,.08), 0 2px 4px rgba(0,26,36,.04);
  --shadow-lg: 0 18px 40px rgba(0,26,36,.12), 0 4px 10px rgba(0,26,36,.05);

  /* Layout */
  --container: 1200px;
  --container-md: 820px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 2.6rem + 4.2vw, 7rem);
  --header-h: 75px; /* 3px stripe + 72px bar */

  /* Type — fluid scale */
  --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --fs-h1: clamp(2.125rem, 1.6rem + 2.1vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.38rem + 1.5vw, 2.5rem);
  --fs-h3: clamp(1.125rem, 1.07rem + .2vw, 1.25rem);
  --fs-lede: clamp(1.0625rem, 1rem + .32vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;
  --fs-2xs: .75rem;
  --lh-tight: 1.08; --lh-snug: 1.2; --lh-body: 1.65;

  /* Legacy aliases — kept so any unconverted markup still resolves */
  --text-xs: var(--fs-2xs); --text-sm: var(--fs-sm); --text-base: var(--fs-body);
  --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem;
  --text-3xl: var(--fs-h2); --text-4xl: var(--fs-h1); --text-5xl: var(--fs-display);
  --radius-2xl: var(--radius-xl); --radius-tile: var(--radius-md);
  --surface-inverse: var(--teal-700); --surface-inverse-strong: var(--teal-900);
  --border-default-old: var(--grey-300);

  /* Motion */
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 480ms;
  --ease: cubic-bezier(.2,.0,.1,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset / base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 800; color: var(--text-heading); line-height: var(--lh-snug); letter-spacing: -0.018em; text-wrap: balance; }
h3 { font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
img, svg { max-width: 100%; display: block; }
picture { display: block; }
figure { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
button { font-family: inherit; }
strong { font-weight: 700; color: var(--text-strong); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-xs); }
.on-dark :focus-visible, .section--dark :focus-visible, .section--darkest :focus-visible, .section--cycle :focus-visible,
.home-hero :focus-visible, .page-hero :focus-visible, .site-footer :focus-visible, .cta-panel :focus-visible { outline-color: var(--focus-on-dark); }

::selection { background: var(--orange-200); color: var(--teal-900); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 300;
  background: var(--teal-900); color: #fff; padding: 12px 20px;
  border-radius: var(--radius-md); font-weight: 700; transition: top var(--dur-base) var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

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

/* ---------- Layout ------------------------------------------------------ */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.container--md { max-width: calc(var(--container-md) + 2 * var(--gutter)); }
.container--lg { max-width: calc(1040px + 2 * var(--gutter)); }

.section { padding: var(--section-y) 0; position: relative; }
.section--tight { padding: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0; }
.section--flush-top { padding-top: 0; }
.section--muted { background: var(--surface-muted); }
.section--white { background: var(--white); }
.section--dark { background: var(--surface-dark); color: var(--text-on-dark); }
.section--darkest { background: var(--surface-darkest); color: var(--text-on-dark); }
.section--cycle { background: var(--surface-darker); color: var(--text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--darkest h1, .section--darkest h2, .section--darkest h3,
.section--cycle h1, .section--cycle h2, .section--cycle h3 { color: #fff; }

/* Subtle hairline between two adjacent light sections of the same tone */
.section--muted + .section--muted { border-top: 1px solid var(--border-subtle); }

/* ---------- Type helpers ------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--orange-text); line-height: 1.3;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--orange-600); flex-shrink: 0; }
.section--dark .eyebrow, .section--darkest .eyebrow, .section--cycle .eyebrow,
.home-hero .eyebrow, .page-hero .eyebrow, .cta-panel .eyebrow { color: var(--orange-400); }

.section-heading { max-width: 760px; margin-bottom: clamp(2.25rem, 1.8rem + 1.6vw, 3.5rem); }
.section-heading--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-heading--center .eyebrow { justify-content: center; }
.section-heading h2 { font-size: var(--fs-h2); margin-top: var(--space-4); line-height: 1.14; }
.section-heading p { font-size: var(--fs-lede); line-height: 1.6; color: var(--text-body); margin-top: var(--space-5); max-width: 64ch; }
.section-heading--center p { margin-left: auto; margin-right: auto; }
.section--dark .section-heading p, .section--darkest .section-heading p, .section--cycle .section-heading p { color: var(--text-on-dark-muted); }

.lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--text-body); max-width: 64ch; }
.body-lg { font-size: 1.0625rem; line-height: 1.7; color: var(--text-body); max-width: 62ch; }

.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  --btn-h: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 24px;
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-sm); letter-spacing: .005em; line-height: 1.2;
  border-radius: var(--radius-md); border: 1.5px solid transparent;
  cursor: pointer; text-align: center; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
/* Primary: Vibrant Orange with a Deep Teal label.
   (White on #FF6A00 is 2.87:1 — below WCAG AA. Deep Teal is 6.2:1.) */
.btn-primary { background: var(--orange-600); color: var(--teal-900); border-color: var(--orange-600); }
.btn-primary:hover { background: #ec6200; border-color: #ec6200; color: var(--teal-900); box-shadow: 0 6px 18px rgba(255,106,0,.28); }
.btn-secondary { background: transparent; color: var(--teal-700); border-color: var(--teal-700); }
.btn-secondary:hover { background: var(--teal-700); color: #fff; }
.btn-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-on-dark:hover { background: #fff; border-color: #fff; color: var(--teal-800); }
.btn-sm { --btn-h: 42px; padding: 0 18px; font-size: .875rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn[disabled], .btn.is-loading { opacity: .7; cursor: progress; }
.btn.is-loading::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: s4h-spin .7s linear infinite;
}
@keyframes s4h-spin { to { transform: rotate(360deg); } }

/* Tertiary: text link with a quiet animated underline */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: var(--fs-sm); color: var(--teal-700);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: 2px; transition: background-size var(--dur-base) var(--ease), color var(--dur-base);
}
.link-arrow:hover { background-size: 100% 1.5px; color: var(--teal-800); }

/* ---------- Header / navigation ---------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* Solid, not backdrop-filter: a filter would make the header the containing
     block for the fixed mobile menu and clip it to the header's height. */
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--grey-200); box-shadow: 0 6px 24px rgba(0,26,36,.06); }
.brand-stripe { height: 3px; display: flex; }
.brand-stripe span { flex: 1; }
.brand-stripe span:nth-child(1) { background: var(--teal-700); }
.brand-stripe span:nth-child(2) { background: var(--red-600); }
.brand-stripe span:nth-child(3) { background: var(--orange-600); }

.site-header__inner { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--teal-800); }
.brand img { width: 38px; height: 38px; border-radius: 6px; }
.brand__name { font-weight: 800; color: var(--teal-800); font-size: 1rem; line-height: 1.12; letter-spacing: -0.01em; }
.brand__name small { display: block; font-weight: 700; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-600); margin-top: 2px; }

.nav-desktop { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav-desktop a {
  position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 13px;
  font-weight: 600; font-size: .9375rem; color: var(--grey-700); border-radius: var(--radius-sm);
  transition: color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.nav-desktop a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--orange-600); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-desktop a:hover { color: var(--teal-700); }
.nav-desktop a:hover::after { transform: scaleX(1); background: var(--teal-200); }
.nav-desktop a[aria-current="page"] { color: var(--teal-700); font-weight: 700; }
.nav-desktop a[aria-current="page"]::after { transform: scaleX(1); background: var(--orange-600); }
.nav-cta { flex-shrink: 0; }
.nav-cta .btn { --btn-h: 42px; padding: 0 18px; font-size: .875rem; }

.nav-toggle {
  display: none; margin-left: auto; border: 1px solid var(--grey-200); background: #fff; cursor: pointer;
  width: 46px; height: 46px; border-radius: var(--radius-md);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px; flex-shrink: 0;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--teal-800); border-radius: 2px; transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile panel: a designed sheet, not a collapsed desktop header */
.mobile-panel { display: none; }
@media (max-width: 1023px) {
  .nav-desktop, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-panel {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0;
    background: #fff; padding: 8px var(--gutter) max(24px, env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
    border-top: 1px solid var(--grey-200);
  }
  .mobile-panel.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .mobile-panel a.nav-link-mobile {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 58px; padding: 0 2px; font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.01em;
    color: var(--teal-800); border-bottom: 1px solid var(--grey-100);
  }
  .mobile-panel a.nav-link-mobile::after {
    content: ""; width: 8px; height: 8px; border-right: 2px solid var(--grey-300); border-top: 2px solid var(--grey-300);
    transform: rotate(45deg); margin-right: 6px; transition: border-color var(--dur-base);
  }
  .mobile-panel a.nav-link-mobile:hover::after { border-color: var(--teal-600); }
  .mobile-panel a.nav-link-mobile[aria-current="page"] { color: var(--teal-700); box-shadow: inset 3px 0 0 var(--orange-600); padding-left: 14px; }
  .mobile-panel .btn { margin-top: 12px; --btn-h: 54px; font-size: 1rem; }
  .mobile-panel .btn:first-of-type { margin-top: 28px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .brand__name small { display: none; }
  .nav-desktop a { padding: 0 9px; font-size: .9rem; }
  .nav-desktop a::after { left: 9px; right: 9px; }
  .nav-cta .btn { padding: 0 14px; }
}

/* ---------- Heroes ------------------------------------------------------ */
.home-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(22,109,136,.45), transparent 60%),
    linear-gradient(180deg, var(--teal-700) 0%, #002f41 100%);
  padding: clamp(4.5rem, 3rem + 6vw, 8rem) 0 clamp(4.5rem, 3rem + 5vw, 7rem);
}
.home-hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.home-hero h1 { color: #fff; font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.028em; max-width: 21ch; margin-top: var(--space-5); }
.home-hero .lede { color: var(--text-on-dark-muted); max-width: 54ch; margin-top: var(--space-6); }
.home-hero .btn-row { margin-top: var(--space-10); }
.home-hero__art { position: relative; justify-self: end; width: 100%; max-width: 400px; aspect-ratio: 1; }
.home-hero__art svg { width: 100%; height: 100%; overflow: visible; }

.descriptor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin-top: var(--space-8); }
.descriptor li {
  display: inline-flex; align-items: center; font-size: .8125rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.9);
}
.descriptor li + li::before {
  content: ""; width: 5px; height: 5px; border-radius: 1.5px; background: var(--orange-500);
  margin: 0 14px; display: inline-block;
}

.page-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 420px at 90% -20%, rgba(22,109,136,.4), transparent 60%),
    var(--teal-700);
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 clamp(3.25rem, 2.4rem + 3.4vw, 5rem);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.025em; max-width: 20ch; margin-top: var(--space-5); }
.page-hero p { color: var(--text-on-dark-muted); font-size: var(--fs-lede); line-height: 1.6; max-width: 60ch; margin-top: var(--space-5); }
.page-hero .btn-row { margin-top: var(--space-8); }
/* Modular tile motif — informed by the four-tile mark, kept faint */
.page-hero::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  width: 188px; height: 188px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 188 188' fill='none'%3E%3Cg stroke='%23ffffff' stroke-opacity='.18' stroke-width='1.5'%3E%3Crect x='.75' y='.75' width='86.5' height='86.5' rx='18'/%3E%3Crect x='100.75' y='.75' width='86.5' height='86.5' rx='18'/%3E%3Crect x='.75' y='100.75' width='86.5' height='86.5' rx='18'/%3E%3C/g%3E%3Crect x='100' y='100' width='88' height='88' rx='18' fill='%23ff6a00'/%3E%3C/svg%3E") no-repeat center / contain;
}
.page-hero--flow { padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); background: var(--teal-700); }
@media (max-width: 860px) { .page-hero::after { display: none; } }

/* ---------- Cards (generic) -------------------------------------------- */
.card {
  position: relative; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
.grid { display: grid; gap: clamp(1rem, .7rem + 1.2vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.tile-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-md);
  background: var(--teal-100); color: var(--teal-700); font-weight: 800; font-size: .875rem; letter-spacing: .02em;
  flex-shrink: 0;
}
.tone-orange .tile-num { background: var(--orange-100); color: var(--orange-800); }
.tone-red .tile-num { background: var(--red-100); color: var(--red-700); }

/* ---------- The challenge: two-way relations ---------------------------- */
.relations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.relation {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 20px 22px; min-height: 76px;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.relation__term { font-weight: 700; color: var(--teal-800); font-size: 1rem; letter-spacing: -0.005em; }
.relation__term:first-child { text-align: right; }
.relation__link { display: inline-flex; align-items: center; justify-content: center; color: var(--teal-400); }
.relation__link svg { width: 56px; height: 14px; overflow: visible; }
.relation__link .conn-line { stroke-dasharray: 3 4; transition: stroke-dashoffset var(--dur-slow) var(--ease), stroke var(--dur-base); }
.relation:hover { border-color: var(--teal-200); box-shadow: var(--shadow-sm); }
.relation:hover .relation__link { color: var(--orange-600); }
.relation:hover .conn-line { stroke-dashoffset: -14; }
.flow-closing { text-align: center; font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); font-weight: 700; color: var(--teal-800); margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem); letter-spacing: -0.01em; }
@media (max-width: 960px) { .relations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .relations { grid-template-columns: 1fr; }
  .relation__link svg { width: 44px; }
}

/* ---------- Split layout (heading left, body right) -------------------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.split .section-heading { margin-bottom: 0; }
.split__body > * + * { margin-top: var(--space-6); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-6); } }

.statement {
  position: relative; padding-left: 22px; border-left: 3px solid var(--orange-600);
  font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem); line-height: 1.45; font-weight: 800;
  color: var(--teal-800); letter-spacing: -0.012em; max-width: 36ch;
}
.statement--xl { font-size: clamp(1.375rem, 1.2rem + .9vw, 1.875rem); max-width: 30ch; line-height: 1.3; }

/* Attribute chips: quiet, tile-shaped */
.attributes { display: flex; flex-wrap: wrap; gap: 8px; }
.attributes li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  font-size: .875rem; font-weight: 700; color: var(--teal-700);
}
.attributes li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--teal-400); }
.attributes--center { justify-content: center; }

/* ---------- Service cards ---------------------------------------------- */
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .7rem + 1.2vw, 1.5rem); }
.service-card {
  --tone: var(--teal-600);
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.25rem + .8vw, 2rem); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 24px);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.service-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--tone); }
.service-card.tone-orange { --tone: var(--orange-600); }
.service-card.tone-red { --tone: var(--red-600); }
.service-card h3 { font-size: var(--fs-h3); line-height: 1.3; margin-top: var(--space-5); color: var(--teal-800); }
.service-card p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-body); margin-top: var(--space-3); }
.service-card__foot { margin-top: auto; padding-top: var(--space-6); }
.service-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.service-card:hover { border-color: var(--grey-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.service-card:hover .service-card__link { background-size: 100% 1.5px; }
.service-card:focus-within { border-color: var(--teal-400); }
.service-card--detail:hover { transform: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  padding: 6px 10px; border-radius: var(--radius-sm); background: var(--warm-50);
  border: 1px solid var(--border-subtle); font-size: .8125rem; font-weight: 600; color: var(--teal-700); line-height: 1.3;
}
.service-card__divider { height: 1px; background: var(--border-subtle); margin: var(--space-6) 0 var(--space-5); }
.service-card__label { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); margin-bottom: var(--space-3); }
@media (max-width: 960px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .service-grid { grid-template-columns: 1fr; } }

/* ---------- Editorial principle grid (dark + light) --------------------- */
.principle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-subtle); }
.principle-grid > li { padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.5rem, 1.2rem + 1vw, 2.25rem) 0; border-bottom: 1px solid var(--border-subtle); }
.principle-grid > li:not(:nth-child(3n+1)) { padding-left: clamp(1.25rem, 1rem + 1vw, 2rem); border-left: 1px solid var(--border-subtle); }
.principle-grid h3 { font-size: 1.0625rem; line-height: 1.35; color: var(--teal-800); display: flex; gap: 12px; align-items: baseline; }
.principle-grid h3::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--orange-600); flex-shrink: 0; transform: translateY(-1px); }
.principle-grid p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-body); margin-top: var(--space-3); padding-left: 20px; }
.principle-grid--dark { border-top-color: var(--border-on-dark); }
.principle-grid--dark > li { border-color: var(--border-on-dark) !important; }
.principle-grid--dark h3 { color: #fff; }
.principle-grid--dark p { color: var(--text-on-dark-muted); }
@media (max-width: 960px) {
  .principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principle-grid > li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .principle-grid > li:nth-child(2n) { padding-left: clamp(1.25rem, 1rem + 1vw, 2rem); border-left: 1px solid var(--border-subtle); }
}
@media (max-width: 620px) {
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid > li:nth-child(n) { padding-left: 0; padding-right: 0; border-left: 0; }
}

/* Numbered principles (About) — four across, editorial */
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 1rem + 1.2vw, 2rem); counter-reset: none; }
.principle { padding: var(--space-6) 0 var(--space-8); border-top: 2px solid var(--teal-700); }
.principle:nth-child(n+5) { border-top-color: var(--teal-700); }
.principle__num { font-weight: 800; font-size: .8125rem; letter-spacing: .08em; color: var(--orange-text); }
.principle h3 { font-size: 1.0625rem; line-height: 1.35; margin-top: var(--space-3); color: var(--teal-800); }
.principle p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-body); margin-top: var(--space-3); }
@media (max-width: 1080px) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .principles { grid-template-columns: 1fr; } .principle { padding-bottom: var(--space-6); } }

/* ============================================================
   KNOWLEDGE NETWORK — six forms of knowledge, no hierarchy.
   A hexagonal ring: every node connects to its neighbours and
   to the shared centre. Lines are drawn by main.js from real
   positions; without JS the layout still reads correctly.
   ============================================================ */
.knet { position: relative; max-width: 1040px; margin: 0 auto; }
.knet__nodes {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, auto);
  column-gap: clamp(1.25rem, 3vw, 3.5rem); row-gap: clamp(3.5rem, 6vw, 5.5rem);
}
.knet__node {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 68px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 14px 16px; font-weight: 700; font-size: .9375rem; line-height: 1.3; color: var(--teal-800);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.knet__node:hover, .knet__node.is-active { border-color: var(--teal-300); box-shadow: var(--shadow-md); }
/* clockwise from top-left */
.knet__node:nth-child(1) { grid-area: 1 / 2; }
.knet__node:nth-child(2) { grid-area: 1 / 3; }
.knet__node:nth-child(3) { grid-area: 2 / 4; }
.knet__node:nth-child(4) { grid-area: 3 / 3; }
.knet__node:nth-child(5) { grid-area: 3 / 2; }
.knet__node:nth-child(6) { grid-area: 2 / 1; }
.knet__hub {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: clamp(150px, 14vw, 172px); aspect-ratio: 1; border-radius: 50%;
  background: var(--teal-700); color: #fff; font-weight: 800; font-size: .8125rem; letter-spacing: .08em; line-height: 1.35;
  padding: 20px; box-shadow: 0 0 0 10px rgba(0,54,74,.07), 0 0 0 22px rgba(0,54,74,.04), var(--shadow-md);
}
.ring-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ring-lines .edge { stroke: var(--teal-300); stroke-width: 1.5; fill: none; transition: stroke var(--dur-base), stroke-width var(--dur-base); }
.ring-lines .spoke { stroke: var(--orange-500); stroke-width: 1.25; stroke-dasharray: 3 5; fill: none; opacity: .7; transition: opacity var(--dur-base); }
.ring-lines .edge.is-active { stroke: var(--orange-600); stroke-width: 2; }
.ring-lines .spoke.is-active { opacity: 1; }
@media (max-width: 860px) {
  .knet { padding: 22px 18px 0; border: 1.5px dashed var(--teal-200); border-radius: 28px; }
  .knet__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 12px; }
  .knet__node:nth-child(n) { grid-area: auto; }
  .knet__node { min-height: 60px; font-size: .875rem; }
  .knet__hub { position: relative; left: auto; top: auto; transform: translateY(50%); margin: 12px auto 0; width: auto; aspect-ratio: auto; border-radius: var(--radius-lg); padding: 16px 22px; max-width: 280px; }
  .ring-lines { display: none; }
}
@media (max-width: 380px) { .knet__nodes { grid-template-columns: 1fr; } }
.knet-wrap { padding-bottom: 20px; }

/* ============================================================
   THE S4H CYCLE — six stages as a continuous loop.
   Desktop: hexagonal ring around a shared centre, with two-way
   connectors between neighbours and a feedback spoke to every
   stage. Scale reconnects to Explore — there is no endpoint.
   Tablet/mobile: a vertical rail with a visible return loop.
   ============================================================ */
.cycle { position: relative; }
.cycle__nodes {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, auto);
  column-gap: clamp(2rem, 4.5vw, 4.5rem); row-gap: clamp(2rem, 3.4vw, 3.25rem);
}
.cycle__node {
  position: relative; background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 22px 22px 24px; box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.cycle__node:nth-child(1) { grid-area: 1 / 2; }
.cycle__node:nth-child(2) { grid-area: 1 / 3; }
.cycle__node:nth-child(3) { grid-area: 2 / 4; }
.cycle__node:nth-child(4) { grid-area: 3 / 3; }
.cycle__node:nth-child(5) { grid-area: 3 / 2; }
.cycle__node:nth-child(6) { grid-area: 2 / 1; }
.cycle__return { display: none; }
.cycle__num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 8px;
  border-radius: var(--radius-sm); background: var(--orange-100); color: var(--orange-800);
  font-weight: 800; font-size: .8125rem; letter-spacing: .04em;
}
.cycle__node h3 { font-size: 1.1875rem; margin-top: 12px; color: var(--teal-800); }
.cycle__node p { font-size: .9375rem; line-height: 1.55; color: var(--text-body); margin-top: 6px; }
.cycle__node:hover, .cycle__node.is-active { border-color: var(--teal-300); box-shadow: var(--shadow-md); }
.cycle__node.is-neighbour { border-color: var(--teal-200); }
.cycle__hub {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(120px, 12vw, 156px); aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-700); color: #fff;
  box-shadow: 0 0 0 10px rgba(0,54,74,.06), 0 0 0 22px rgba(0,54,74,.035);
}
.cycle__hub svg { width: 58%; height: 58%; }
.ring-lines .loop { stroke: var(--teal-300); stroke-width: 2; fill: none; }
.ring-lines .feedback { stroke: var(--orange-500); stroke-width: 1.25; stroke-dasharray: 2 6; fill: none; opacity: .75; }
.ring-lines .feedback.is-active { opacity: 1; stroke-width: 1.75; }
.ring-lines .badge circle { fill: var(--surface-raised); stroke: var(--teal-300); stroke-width: 1.5; transition: stroke var(--dur-base), fill var(--dur-base); }
.ring-lines .badge path { stroke: var(--teal-600); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-base); }
.ring-lines .badge.is-active circle { stroke: var(--orange-600); fill: var(--orange-100); }
.ring-lines .badge.is-active path { stroke: var(--orange-800); }
.ring-lines .loop.is-active { stroke: var(--orange-600); }
@media (prefers-reduced-motion: no-preference) {
  .ring-lines .feedback { animation: s4h-flow 2.4s linear infinite; }
  @keyframes s4h-flow { to { stroke-dashoffset: -32; } }
}

/* Dark stage (How We Work page) */
.cycle--dark .cycle__node { background: #07344a; border-color: rgba(255,255,255,.14); box-shadow: none; }
.cycle--dark .cycle__node h3 { color: #fff; }
.cycle--dark .cycle__node p { color: var(--text-on-dark-muted); }
.cycle--dark .cycle__num { background: rgba(255,106,0,.16); color: var(--orange-300); }
.cycle--dark .cycle__node:hover, .cycle--dark .cycle__node.is-active { border-color: var(--orange-400); background: #0a3b53; }
.cycle--dark .cycle__node.is-neighbour { border-color: rgba(255,160,82,.45); }
.cycle--dark .cycle__hub { background: var(--orange-600); color: var(--teal-900); box-shadow: 0 0 0 10px rgba(255,106,0,.12), 0 0 0 22px rgba(255,106,0,.06); }
.cycle--dark .ring-lines .loop { stroke: rgba(121,178,197,.55); }
.cycle--dark .ring-lines .feedback { stroke: var(--orange-400); }
.cycle--dark .ring-lines .badge circle { fill: var(--teal-800); stroke: rgba(121,178,197,.7); }
.cycle--dark .ring-lines .badge path { stroke: var(--teal-200); }
.cycle--dark .ring-lines .badge.is-active circle { fill: var(--teal-800); stroke: var(--orange-400); }
.cycle--dark .ring-lines .badge.is-active path { stroke: var(--orange-300); }

/* Legend for the cycle (decorative key, no new copy) */
.cycle-key { display: flex; justify-content: center; gap: 28px; margin-top: var(--space-8); }

/* Tablet + mobile: vertical rail with a return loop */
@media (max-width: 960px) {
  .cycle { padding-left: 52px; }
  .cycle__nodes { display: flex; flex-direction: column; gap: 22px; }
  .cycle__node:nth-child(n) { grid-area: auto; }
  .cycle__hub, .cycle .ring-lines { display: none; }
  /* forward rail through every stage */
  .cycle__nodes::before {
    content: ""; position: absolute; left: -30px; top: 30px; bottom: 20px; width: 2px;
    background: var(--teal-300); border-radius: 2px;
  }
  /* node markers on the rail */
  .cycle__node::before {
    content: ""; position: absolute; left: -36px; top: 22px; width: 14px; height: 14px; border-radius: 4px;
    background: var(--surface-page); border: 2px solid var(--teal-600);
  }
  /* two-way connectors between neighbouring stages */
  .cycle__node:not(:first-child)::after {
    content: ""; position: absolute; left: -41px; top: -19px; width: 24px; height: 16px;
    background: center / 12px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16' fill='none' stroke='%230a5067' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.5v13M2.5 5L6 1.5 9.5 5M2.5 11L6 14.5 9.5 11'/%3E%3C/svg%3E"), var(--surface-page);
  }
  /* the return: Scale feeds back into Explore */
  .cycle__return {
    display: flex; align-items: center; gap: 10px; position: relative; height: 40px;
    color: var(--teal-600);
  }
  .cycle__return::before {
    /* C-shaped return path from the end of the rail back to the first stage.
       Its height is measured by main.js so it lands exactly on stage 01. */
    content: ""; position: absolute; left: -46px; bottom: 20px; width: 16px;
    height: var(--return-h, 0px);
    border: 2px dashed var(--orange-500); border-right: 0; border-radius: 14px 0 0 14px;
  }
  .cycle__return::after {
    /* arrowhead re-entering stage 01 */
    content: ""; position: absolute; left: -43px; bottom: calc(20px + var(--return-h, 0px) - 6px);
    border: 5px solid transparent; border-left: 7px solid var(--orange-500);
    display: var(--return-arrow, block);
  }
  .cycle__return svg { width: 22px; height: 22px; margin-left: -41px; background: var(--surface-page); border-radius: 50%; }
  .cycle--dark .cycle__node::before { background: var(--teal-800); border-color: var(--orange-400); }
  .cycle--dark .cycle__nodes::before { background: rgba(121,178,197,.55); }
  .cycle--dark .cycle__node:not(:first-child)::after {
    background: center / 12px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16' fill='none' stroke='%23b6d6e1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.5v13M2.5 5L6 1.5 9.5 5M2.5 11L6 14.5 9.5 11'/%3E%3C/svg%3E"), var(--teal-800);
  }
  .cycle--dark .cycle__return { color: var(--orange-300); }
  .cycle--dark .cycle__return svg { background: var(--teal-800); }
}
@media (max-width: 480px) {
  .cycle { padding-left: 44px; }
  .cycle__nodes::before { left: -26px; }
  .cycle__node::before { left: -32px; }
  .cycle__node:not(:first-child)::after { left: -37px; }
  .cycle__return::before { left: -40px; width: 12px; }
  .cycle__return::after { left: -39px; }
  .cycle__return svg { margin-left: -37px; }
  .cycle__node { padding: 18px 18px 20px; }
}

/* ============================================================
   TECHNOLOGY SYSTEM — a two-way data chain, with Monitoring as
   a continuous layer that feeds back into every step.
   ============================================================ */
.tech-system { max-width: 1120px; margin: 0 auto; }
.tech-flow { display: flex; align-items: stretch; justify-content: center; gap: 34px; }
.tech-node { position: relative; display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.tech-node__label {
  position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 70px; padding: 12px 12px; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  font-weight: 700; font-size: .9375rem; line-height: 1.3; color: var(--teal-800); box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.tech-node:hover .tech-node__label { border-color: var(--teal-300); box-shadow: var(--shadow-sm); }
/* feedback tick from the Monitoring layer up into each step */
.tech-node__label::after {
  content: ""; position: absolute; left: 50%; top: 100%; height: 34px; width: 0;
  border-left: 1.5px dashed var(--orange-500); transform: translateX(-50%);
}
.tech-link { position: absolute; left: 100%; top: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; color: var(--teal-500); }
.tech-link svg { width: 26px; height: 12px; overflow: visible; }
.tech-layer {
  position: relative; margin-top: 34px; display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 12px 20px; border-radius: var(--radius-lg);
  background: var(--teal-700); color: #fff;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px);
}
.tech-layer__label { font-weight: 800; font-size: 1rem; letter-spacing: .01em; }
.tech-layer__icon { width: 22px; height: 22px; color: var(--orange-400); }
@media (max-width: 1023px) {
  .tech-system { max-width: 520px; position: relative; padding-left: 40px; }
  .tech-flow { flex-direction: column; gap: 30px; }
  .tech-node { flex-direction: column; align-items: stretch; }
  .tech-link { left: 0; right: 0; top: 100%; bottom: auto; width: auto; height: 30px; }
  .tech-link svg { transform: rotate(90deg); }
  .tech-node__label { min-height: 58px; }
  .tech-node__label::after { left: auto; right: 100%; top: 50%; height: 0; width: 26px; border-left: 0; border-top: 1.5px dashed var(--orange-500); transform: none; }
  /* Monitoring runs alongside every step on small screens */
  .tech-system::before {
    content: ""; position: absolute; left: 12px; top: 29px; bottom: 29px; width: 0;
    border-left: 1.5px dashed var(--orange-500);
  }
  .tech-layer { margin-top: 18px; margin-left: -40px; }
}

/* ---------- Leadership --------------------------------------------------- */
.portrait {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #fff;
  box-shadow: var(--shadow-md);
}
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.portrait-frame { position: relative; }
.portrait-frame::before {
  /* offset Deep Teal tile behind the portrait — from the S4H mark */
  content: ""; position: absolute; inset: 16px -16px -16px 16px; border-radius: var(--radius-lg);
  background: var(--teal-700);
}
.portrait-frame::after {
  content: ""; position: absolute; right: -16px; bottom: -16px; width: 44px; height: 44px; border-radius: 10px;
  background: var(--orange-600); z-index: 2;
}
.portrait-frame .portrait { z-index: 1; }

.leader-teaser { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; max-width: 1000px; margin: 0 auto; }
.leader-teaser h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); line-height: 1.2; margin-top: var(--space-4); max-width: 24ch; }
.leader-teaser p { font-size: 1.0625rem; line-height: 1.7; color: var(--text-body); margin-top: var(--space-4); max-width: 58ch; }
@media (max-width: 720px) {
  .leader-teaser { grid-template-columns: 1fr; text-align: left; }
  .leader-teaser .portrait-frame { width: 190px; }
}

.profile { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.profile__aside { position: sticky; top: calc(var(--header-h) + 32px); }
.profile__id { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.leader-name { font-size: 1.375rem; font-weight: 800; color: var(--teal-800); letter-spacing: -0.015em; }
.leader-title { font-weight: 700; color: var(--orange-text); font-size: .875rem; margin-top: 4px; letter-spacing: .01em; }
.profile__bio { font-size: 1.0625rem; line-height: 1.75; color: var(--text-body); max-width: 64ch; }
@media (max-width: 860px) {
  .profile { grid-template-columns: 1fr; }
  .profile__aside { position: static; display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: end; }
  .profile__id { margin-top: 0; border-top: 0; padding-top: 0; }
}
@media (max-width: 420px) { .profile__aside { grid-template-columns: 120px 1fr; gap: 24px; } }

/* Professional trajectory — genuinely sequential in time, so arrows stay one-way */
.trajectory { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 var(--space-10); padding: 0; position: relative; }
.trajectory::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 2px; background: linear-gradient(90deg, var(--teal-200), var(--teal-600)); }
.trajectory .journey-step {
  position: relative; padding-top: 28px; padding-right: 12px; font-size: .8125rem; font-weight: 700; line-height: 1.35; color: var(--teal-800);
}
.trajectory .journey-step::before {
  content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 5px;
  background: #fff; border: 2px solid var(--teal-500);
}
.trajectory .journey-step:last-of-type::before { background: var(--orange-600); border-color: var(--orange-600); }
.trajectory .journey-arrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
@media (max-width: 720px) {
  .trajectory { grid-template-columns: 1fr; gap: 14px; }
  .trajectory::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, var(--teal-200), var(--teal-600)); }
  .trajectory .journey-step { padding: 0 0 0 30px; font-size: .9375rem; }
}

/* ---------- Vision / Mission -------------------------------------------- */
.vm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.vm-block { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); position: relative; overflow: hidden; }
.vm-block::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--teal-600); }
.vm-block.tone-orange::before { background: var(--orange-600); }
.vm-block p { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--teal-800); font-weight: 600; margin-top: var(--space-4); letter-spacing: -0.005em; }
@media (max-width: 760px) { .vm-grid { grid-template-columns: 1fr; } }

/* ---------- Pathway cards (Work With Us) --------------------------------- */
.pathways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.pathway { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); position: relative; overflow: hidden; }
.pathway::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--teal-600); }
.pathway.tone-orange::before { background: var(--orange-600); }
.pathway h2 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); margin-top: var(--space-4); }
.pathway p { font-size: 1rem; line-height: 1.65; color: var(--text-body); margin-top: var(--space-4); max-width: 56ch; }
.pathway__foot { margin-top: auto; padding-top: var(--space-8); }
@media (max-width: 800px) { .pathways { grid-template-columns: 1fr; } }

/* EOI → onboarding steps: interaction can move between stages */
.eoi-steps { display: flex; align-items: stretch; margin: 0 0 var(--space-8); }
.eoi-step { position: relative; flex: 1 1 0; display: flex; align-items: stretch; min-width: 0; }
.eoi-step__card {
  flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; min-width: 0;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
.eoi-step__num { font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.eoi-step__title { font-size: .9375rem; font-weight: 800; color: var(--teal-800); line-height: 1.3; }
.eoi-step[aria-current="step"] .eoi-step__card { border-color: var(--orange-600); box-shadow: inset 0 3px 0 var(--orange-600); }
.eoi-step[aria-current="step"] .eoi-step__num { color: var(--orange-text); }
.eoi-link { display: inline-flex; align-items: center; justify-content: center; width: 30px; flex-shrink: 0; color: var(--teal-500); }
.eoi-link svg { width: 22px; height: 12px; overflow: visible; }
@media (max-width: 720px) {
  .eoi-steps { flex-direction: column; }
  .eoi-step { flex-direction: column; }
  .eoi-link { width: auto; height: 26px; }
  .eoi-link svg { transform: rotate(90deg); }
}

/* ---------- CTA panels -------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band .section-heading { margin-bottom: var(--space-8); }
.cta-panel {
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  background: radial-gradient(700px 360px at 100% 0%, rgba(22,109,136,.5), transparent 65%), var(--teal-700);
  color: #fff; text-align: center; padding: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 4vw, 5rem);
}
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 { color: #fff; font-size: var(--fs-h2); letter-spacing: -0.022em; }
.cta-panel p { color: var(--text-on-dark-muted); max-width: 60ch; margin: var(--space-5) auto 0; font-size: var(--fs-lede); line-height: 1.6; }
.cta-panel .btn-row { justify-content: center; margin-top: var(--space-8); }
.cta-panel .cta-panel__meta { font-size: .875rem; color: var(--text-on-dark-faint); margin-top: var(--space-8); }
.cta-dark { text-align: center; }
.cta-dark h2 { font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem); }
.cta-dark .btn-row { justify-content: center; margin-top: var(--space-8); }

/* ---------- Contact strip ------------------------------------------------ */
.contact-strip { background: var(--white); border-bottom: 1px solid var(--border-subtle); }
.contact-strip .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; padding-top: 18px; padding-bottom: 18px; font-size: .9375rem; color: var(--text-body); text-align: center; }

/* ---------- Attribute strip (About) -------------------------------------- */
.attr-strip { background: var(--white); border-bottom: 1px solid var(--border-subtle); padding: 22px 0; }

/* ---------- Forms -------------------------------------------------------- */
.form-card {
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); box-shadow: var(--shadow-sm);
}
.form-section + .form-section { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
.form-section__title { font-size: 1.125rem; margin-bottom: var(--space-6); color: var(--teal-800); }
.field { margin-bottom: var(--space-6); }
.field > label, .field-label { display: block; font-weight: 700; font-size: .9375rem; color: var(--teal-800); margin-bottom: 8px; line-height: 1.35; }
.hint { display: block; font-weight: 500; font-size: .8125rem; color: var(--text-muted); margin-top: 8px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; min-height: 50px; font-family: var(--font-sans); font-size: 1rem; color: var(--text-strong);
  padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #fff;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field select {
  padding-right: 42px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2300364a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
}
.field textarea { resize: vertical; min-height: 128px; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--grey-500); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal-700); box-shadow: 0 0 0 3px rgba(0,54,74,.14); }
.field input::placeholder, .field textarea::placeholder { color: var(--grey-500); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--red-600); box-shadow: 0 0 0 3px rgba(200,16,46,.1); }
.field-error { display: flex; gap: 8px; align-items: flex-start; font-size: .8125rem; font-weight: 600; color: var(--red-700); margin-top: 8px; }
.field-error::before { content: "!"; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--red-600); color: #fff; font-size: .6875rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }
.field-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.word-count { font-size: .8125rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; margin-top: 8px; font-variant-numeric: tabular-nums; }
.word-count.is-over { color: var(--red-700); }

/* Checkboxes: native inputs, restyled */
.checkbox-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .checkbox-group { grid-template-columns: 1fr; } }
.checkbox-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; min-height: 48px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: #fff;
  font-size: .9375rem; font-weight: 600; color: var(--text-body); line-height: 1.4; cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.checkbox-item:hover { border-color: var(--grey-400); }
.checkbox-item:has(input:checked) { border-color: var(--teal-600); background: var(--teal-50); color: var(--teal-800); }
.checkbox-item input, .consent-row input {
  -webkit-appearance: none; appearance: none; margin: 1px 0 0; flex-shrink: 0; width: 20px; height: 20px;
  border: 1.5px solid var(--grey-500); border-radius: 5px; background: #fff; cursor: pointer; display: grid; place-content: center;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.checkbox-item input::after, .consent-row input::after {
  content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--dur-fast) var(--ease);
}
.checkbox-item input:checked, .consent-row input:checked { background: var(--teal-700); border-color: var(--teal-700); }
.checkbox-item input:checked::after, .consent-row input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.checkbox-item input:focus-visible, .consent-row input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.field.has-error .checkbox-group .checkbox-item { border-color: rgba(200,16,46,.45); }
.consent-row { display: flex; align-items: flex-start; gap: 12px; background: var(--warm-50); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px 18px; }
.consent-row label { font-weight: 500; font-size: .9375rem; line-height: 1.55; color: var(--text-body); }
.consent-row a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.consent-wrap.has-error .consent-row { border-color: var(--red-600); }
.notice-box {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--orange-100); border: 1px solid var(--orange-200); border-radius: var(--radius-md);
  padding: 14px 18px; font-size: .9375rem; line-height: 1.55; color: var(--teal-900); margin-bottom: var(--space-6);
}
.notice-box::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--orange-600); margin-top: 8px; }
.notice-box strong { color: var(--teal-900); }
.form-required { color: var(--red-600); }
.form-summary { display: none; margin-bottom: var(--space-6); padding: 14px 18px; border-radius: var(--radius-md); background: var(--danger-bg); border: 1px solid var(--red-200); color: var(--red-800); font-weight: 600; font-size: .9375rem; }
.form-summary.is-visible { display: block; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: var(--space-8); }
.honeypot-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Server-rendered success / error pages (PHP) */
.result-wrap { padding: clamp(3rem, 2rem + 5vw, 6rem) 0; }
.result-card {
  max-width: 640px; margin: 0 auto; text-align: center; padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); background: #fff; box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.result-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.result-card.is-success::before { background: var(--success); }
.result-card.is-error::before { background: var(--danger); }
.result-icon { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto var(--space-6); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: #fff; }
.result-card.is-success .result-icon { background: var(--success); }
.result-card.is-error .result-icon { background: var(--danger); }
.result-card h1 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); line-height: 1.25; }
.result-card p { margin-top: var(--space-4); font-size: 1.0625rem; line-height: 1.65; color: var(--text-body); }

/* ---------- Footer ------------------------------------------------------- */
.site-footer { background: var(--teal-900); color: var(--text-on-dark-muted); }
.footer-top { padding-top: clamp(3.5rem, 2.5rem + 3vw, 5rem); padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr); gap: clamp(2rem, 4vw, 3.5rem); }
.footer-brand .brand-row { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 44px; height: 44px; border-radius: 10px; background: #fff; padding: 4px; }
.footer-brand .brand-row span { font-weight: 800; color: #fff; font-size: 1.0625rem; letter-spacing: -0.01em; }
.footer-tagline { margin-top: var(--space-5); font-size: .9375rem; line-height: 1.6; max-width: 28ch; color: var(--text-on-dark-muted); }
.footer-col h4 { font-size: .6875rem; text-transform: uppercase; letter-spacing: .14em; color: var(--orange-400); margin-bottom: var(--space-5); font-weight: 800; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--text-on-dark-muted); font-size: .9375rem; transition: color var(--dur-base); }
.footer-col a:hover { color: #fff; }
.footer-col a.btn-primary, .footer-col a.btn-primary:hover { color: var(--teal-900); }
.footer-touch { display: flex; flex-direction: column; gap: 10px; font-size: .9375rem; margin-bottom: var(--space-6); }
.footer-touch a { color: #fff; font-weight: 600; }
.footer-touch a:hover { color: var(--orange-300); }
.footer-email-link { display: inline-block; margin-top: 14px; color: var(--orange-400) !important; font-weight: 700; font-size: .9375rem; }
.footer-email-link:hover { color: var(--orange-300) !important; }
.footer-bottom-wrap { border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom { padding-top: 20px; padding-bottom: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-size: .8125rem; color: var(--text-on-dark-faint); }
.footer-bottom a { color: var(--text-on-dark-muted); }
.footer-bottom a:hover { color: #fff; }
.footer-legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 980px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- Legal pages -------------------------------------------------- */
.legal-body { max-width: 720px; margin: 0 auto; }
.legal-body .updated { display: inline-block; color: var(--text-muted); font-size: .875rem; font-weight: 600; margin-bottom: var(--space-10); padding: 6px 12px; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.legal-body h2 { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
.legal-body h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body p, .legal-body li { font-size: 1.0625rem; line-height: 1.75; color: var(--text-body); margin-top: var(--space-4); }
.legal-body ul { padding-left: 22px; }
.legal-body li { list-style: disc; margin-top: var(--space-3); }
.legal-body li::marker { color: var(--orange-600); }
.legal-body a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--teal-200); text-underline-offset: 3px; }
.legal-body a:hover { text-decoration-color: var(--teal-700); }
.owner-flag { background: var(--orange-100); color: var(--orange-800); padding: 2px 8px; border-radius: 6px; font-size: .8em; font-weight: 700; }

/* ---------- Motion: reveal on scroll (JS adds .js to <html>) ------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Hero on small screens ---------------------------------------- */
@media (max-width: 1023px) {
  .home-hero__inner { grid-template-columns: 1fr; }
  .home-hero__art { display: none; }
}
@media (max-width: 480px) {
  .btn-row .btn { flex: 1 1 100%; }
  .btn { white-space: normal; }
  .descriptor li { font-size: .75rem; letter-spacing: .08em; }
  .descriptor li + li::before { margin: 0 10px; }
}

/* ---------- Print ------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .mobile-panel, .ring-lines, .cycle__hub, .home-hero__art { display: none !important; }
  body { background: #fff; }
  .home-hero, .page-hero, .section--dark, .section--darkest, .section--cycle, .cta-panel { background: #fff !important; color: #000 !important; }
  .home-hero h1, .page-hero h1, .cta-panel h2 { color: #000 !important; }
}

/* CTA band button rows centre with their heading */
.cta-band .btn-row { justify-content: center; }