/* ==========================================================================
   E2 Solutions — e2.co.za
   One stylesheet for the whole site. The look follows the E2 product
   family (mysubscribers.co.za, mybroadcast.co.za): navy gradient headers,
   two-tone headlines, pill labels, orange calls to action, pale-blue
   sections, bordered cards and the Inter / system font stack.

   Signature device: the 45° terminal from the e2 mark. The "e" crossbars
   and the base of the "2" end in 45° cuts — hero and page headers step
   down at that angle (.hero, .page-hero, .cta-band), the e2 mark sits
   tone-on-tone behind every navy header, cropped by that step, and product
   markers are 45° slashes (.chip).

   Contents
     1. Tokens            8. Page hero           15. FAQ
     2. Base              9. Product chip        16. Contact
     3. Layout           10. Product register    17. CTA band
     4. Type             11. Product detail      18. Footer
     5. Buttons, links   12. Group, values       19. Scroll effects
     6. Header + nav     13. About / timeline    20. Utilities
     7. Navy headers     14. Team
   ========================================================================== */

/* 1. Tokens ================================================================ */
:root {
  /* E2 Blue — corporate navy (primary = 800) */
  --navy-50: #f2f5fa;
  --navy-100: #e3eaf3;
  --navy-200: #c6d3e6;
  --navy-300: #9fb3d2;
  --navy-400: #6f8bb8;
  --navy-500: #4a679c;
  --navy-600: #344f80;
  --navy-700: #2a426f;
  --navy-800: #13355c;
  --navy-900: #0e2a4a;
  --navy-950: #0b2240;

  /* Family blue — labels, links, icons */
  --ocean-50: #e5eef6;
  --ocean-100: #d3e4f3;
  --ocean-300: #7eb6e3;
  --ocean-700: #2476b7;
  --ocean-800: #1b5f95;

  /* Sky — light accent on navy (second line of headlines) */
  --sky-100: #eaf2fb;
  --sky-200: #cfe0f0;
  --sky-300: #7eb6e3;

  /* Slate — cool neutrals */
  --slate-50: #f5f7f9;
  --slate-100: #eaeef1;
  --slate-200: #e5e7eb;
  --slate-300: #d1d5db;
  --slate-400: #93a2b0;
  --slate-500: #708090;
  --slate-600: #6b7280;
  --slate-700: #4b5563;
  --white: #ffffff;
  --tint: #e6eef7;          /* pale-blue alternate sections */
  --orange: #f77400;        /* calls to action */
  --orange-hover: #d96500;
  --ink: #12365e;           /* headings */
  --title: #0f172a;         /* card titles */
  --footer: #0f2e50;

  /* Status */
  --green-50: #e9f6f0;
  --green-500: #1f8a5b;
  --green-600: #16744b;
  --amber-50: #fdf3e3;
  --amber-500: #d4880f;
  --amber-600: #b06d05;
  --red-50: #fceceb;
  --red-500: #cc3a30;
  --red-600: #ab2c23;

  /* Product accents (the MY-suite) — markers only, never full themes */
  --accent-membership: #213963;
  --accent-cpd: #1f8a5b;
  --accent-orders: #d4880f;
  --accent-events: #6d4bb0;
  --accent-subs: #005484;
  --accent-broadcast: #c0563f;

  /* Semantic */
  --text-strong: var(--ink);
  --text-body: var(--slate-700);
  --text-muted: var(--slate-600);
  --text-link: var(--ocean-700);
  --text-link-hover: var(--ocean-800);
  --surface-page: var(--white);
  --surface-alt: var(--tint);
  --border-subtle: var(--slate-200);
  --border-default: var(--slate-300);
  --ring-focus: rgba(36, 118, 183, 0.45);

  /* Type */
  --font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-hero: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  --fs-h1: clamp(2rem, 1.35rem + 2.4vw, 3.125rem);
  --fs-h2: clamp(1.625rem, 1.25rem + 1.4vw, 2.375rem);
  --fs-h3: 1.125rem;
  --fs-lead: 1.0625rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.6875rem;
  --tracking-display: -0.025em;
  --tracking-caps: 0.18em;

  /* Space (8px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --section-y: clamp(3.5rem, 2rem + 4vw, 5rem);
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --container: 1200px;
  --measure: 68ch;

  /* The 45° step */
  --step: clamp(40px, 7vw, 104px);
  --step-at: 38%;

  /* Shape + elevation */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(14, 26, 48, 0.08), 0 1px 2px rgba(14, 26, 48, 0.06);
  --shadow-md: 0 4px 10px rgba(14, 26, 48, 0.08), 0 2px 4px rgba(14, 26, 48, 0.06);
  --shadow-lg: 0 12px 28px rgba(14, 26, 48, 0.12), 0 4px 10px rgba(14, 26, 48, 0.07);
  --shadow-xl: 0 32px 64px rgba(14, 26, 48, 0.22), 0 10px 22px rgba(14, 26, 48, 0.1);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 120ms;
  --normal: 200ms;
  --slow: 320ms;

  --header-h: 73px;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul[class],
ol[class],
nav ul,
.site-footer ul {
  list-style: none;
  padding: 0;
}

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

img {
  height: auto;
}

a {
  color: inherit;
}

strong {
  font-weight: 700;
  color: var(--text-strong);
}

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

::selection {
  background: var(--sky-200);
  color: var(--navy-950);
}

/* 3. Layout ================================================================ */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--alt {
  background: var(--surface-alt);
}

.section--tight {
  padding-block: calc(var(--section-y) * 0.6);
}

.section-head {
  display: grid;
  gap: var(--space-3);
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
}

.section-head--center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.split {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 1rem + 4vw, 6rem);
  }

  .split--flip {
    grid-template-columns: 7fr 5fr;
  }

  .split--flip > :first-child {
    order: 2;
  }

  .split--top {
    align-items: start;
  }
}

.flow > * + * {
  margin-top: var(--flow, 1.1em);
}

.flow > .eyebrow + * {
  margin-top: var(--space-3);
}

/* 4. Type ================================================================== */
.h-hero,
.h-1,
.h-2,
.h-3 {
  color: var(--text-strong);
  text-wrap: balance;
  overflow-wrap: break-word; /* long product names at 320px */
}

.h-hero {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
}

.h-1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--tracking-display);
}

.h-2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.h-3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}

/* second line of a two-tone headline on navy */
.h-accent {
  color: var(--sky-300);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-body);
  max-width: 40em;
  text-wrap: pretty;
}

/* small caps label above a heading */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ocean-700);
}

.muted {
  color: var(--text-muted);
}

.small {
  font-size: var(--fs-small);
}

.nums {
  font-variant-numeric: tabular-nums lining-nums;
}

/* 5. Buttons, links ======================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 46px;
  padding: 0.75rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--normal) var(--ease), color var(--normal) var(--ease),
    border-color var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-focus);
}

.btn .icon {
  width: 1.15em;
  height: 1.15em;
}

/* orange: the main call to action, on light or navy */
.btn--accent {
  background: var(--orange);
  color: var(--white);
}

.btn--accent:hover {
  background: var(--orange-hover);
}

.btn--primary {
  background: var(--navy-800);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--navy-900);
}

.btn--secondary {
  background: var(--white);
  color: var(--navy-800);
  border-color: var(--border-default);
}

.btn--secondary:hover {
  background: var(--slate-100);
  border-color: var(--slate-400);
}

/* outline on navy fields */
.btn--outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.7);
}

.btn--accent:focus-visible,
.btn--outline-light:focus-visible {
  box-shadow: 0 0 0 3px rgba(126, 182, 227, 0.7);
}

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

.link {
  color: var(--text-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--fast) var(--ease);
}

.link:hover {
  color: var(--text-link-hover);
  text-decoration-thickness: 2px;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* 6. Header + nav ========================================================== */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--navy-900);
  color: var(--white);
  font-weight: 700;
  border-radius: var(--radius-md);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-3);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--navy-900);
}

.brand img {
  width: 52px;
  height: auto;
}

.brand__name {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-600);
  padding-left: 0.7rem;
  border-left: 1px solid var(--border-default);
  line-height: 1.1;
}

.nav {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937;
  text-decoration: none;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.nav__link:hover {
  color: var(--navy-900);
  background: var(--slate-100);
}

.nav__link[aria-current='page'] {
  color: var(--ocean-700);
  box-shadow: inset 0 -2px 0 var(--ocean-700);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.nav__link .icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--normal) var(--ease);
}

/* Products dropdown — opens on hover and keyboard focus, no JS */
.nav__item--has-menu {
  position: relative;
}

.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -1rem;
  width: 36rem;
  padding: var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease),
    visibility 0s linear var(--normal);
}

/* hover bridge so the menu doesn't close crossing the gap */
.nav__menu::before {
  content: '';
  position: absolute;
  inset: -12px 0 auto 0;
  height: 12px;
}

.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.nav__item--has-menu:hover > .nav__link .icon,
.nav__item--has-menu:focus-within > .nav__link .icon {
  transform: rotate(180deg);
}

.nav__menu a {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--fast) var(--ease);
}

.nav__menu a:hover {
  background: var(--slate-50);
}

.nav__menu .chip {
  font-size: 0.9375rem;
}

.nav__menu-desc {
  padding-left: 1.6rem;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-muted);
}

.nav__menu-all {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ocean-700);
}

.header-cta {
  display: none;
}

.site-header .header-cta {
  min-height: 0;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
}

.header-cta[aria-current='page'] {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ocean-700);
}

/* Mobile menu: native <details>, no JS */
.nav-mobile {
  position: static;
}

.nav-mobile > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy-900);
  cursor: pointer;
  list-style: none;
}

.nav-mobile > summary::-webkit-details-marker {
  display: none;
}

.nav-mobile > summary .icon--close,
.nav-mobile[open] > summary .icon--open {
  display: none;
}

.nav-mobile[open] > summary .icon--close {
  display: block;
}

.nav-mobile__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: var(--space-4) var(--gutter) var(--space-6);
  background: var(--white);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
}

.nav-mobile__group + .nav-mobile__group {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.nav-mobile__label {
  margin-bottom: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-mobile a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--navy-900);
  text-decoration: none;
}

.nav-mobile a[aria-current='page'] {
  color: var(--ocean-700);
}

.nav-mobile .btn {
  display: flex;
  margin-top: var(--space-5);
  color: var(--white);
}

@media (min-width: 1040px) {
  .nav,
  .header-cta {
    display: block;
  }

  .nav-mobile {
    display: none;
  }
}

/* 7. Navy headers: home hero + inner page hero ============================ */
/*  Both draw the navy field on ::before, clipped to the 45° step. The e2
    mark lives on its own layer (div.navy-mark, clipped to the same step) so
    it can move with GPU-composited transforms without shifting the edge.
    Plain background image only (CSS masks fail on file:// pages). */
.hero,
.page-hero {
  --step-clip: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(var(--step-at) + var(--step)) 100%,
    var(--step-at) calc(100% - var(--step)),
    0 calc(100% - var(--step))
  );
  position: relative;
  isolation: isolate;
  color: var(--white);
}

.hero::before,
.page-hero::before,
.navy-mark {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--step-clip);
}

.hero::before,
.page-hero::before {
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
}

/* pill label in navy headers */
.hero .eyebrow,
.page-hero .eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.92);
}

/* the e2 mark: tone-on-tone, sized to sit wholly inside the navy field and
   right-aligned with the content column. It never moves; the SVG animates
   itself (a light sheen and an edge light), and runs from file:// too. */
.navy-mark {
  overflow: hidden;
  pointer-events: none;
}

.navy-mark img {
  position: absolute;
  top: 12%;
  right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  width: auto;
  max-width: none;
  height: 72%;
}

@media (max-width: 759px) {
  .navy-mark {
    display: none;
  }
}

/* Home hero */
.hero {
  padding-top: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
}

.hero__copy {
  display: grid;
  gap: var(--space-5);
  max-width: 46rem;
  padding-bottom: calc(var(--step) + clamp(2rem, 1.25rem + 2.5vw, 3.5rem));
}

.hero .h-hero {
  color: var(--white);
  max-width: 11em;
}

.hero .lead {
  color: rgba(255, 255, 255, 0.78);
  max-width: 34em;
}

@media (max-width: 959px) {
  .hero {
    --step-at: 58%;
  }
}

/* 8. Page hero (inner pages) =============================================== */
.page-hero {
  padding-top: clamp(3rem, 1.8rem + 4vw, 5.5rem);
  padding-bottom: calc(var(--step) + clamp(2.5rem, 1.5rem + 3vw, 4.5rem));
}

.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  max-width: 50rem;
}

.page-hero .h-1 {
  color: var(--white);
}

.page-hero .lead {
  color: rgba(255, 255, 255, 0.78);
}

.page-hero a:not(.btn) {
  color: var(--white);
}

/* 9. Product chip — the 45° slash marker ================================== */
.chip {
  --accent: var(--navy-800);
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-strong);
  white-space: nowrap;
}

.chip::before {
  content: '';
  flex: none;
  width: 1.05em;
  height: 0.78em;
  background: var(--accent);
  margin-right: 0.5em;
  clip-path: polygon(0.78em 0, 100% 0, calc(100% - 0.78em) 100%, 0 100%);
}

.accent-membership { --accent: var(--accent-membership); }
.accent-cpd { --accent: var(--accent-cpd); }
.accent-orders { --accent: var(--accent-orders); }
.accent-events { --accent: var(--accent-events); }
.accent-subs { --accent: var(--accent-subs); }
.accent-broadcast { --accent: var(--accent-broadcast); }

/* 10. Product register (home) — a register, not a card grid ================ */
.suite {
  border-top: 2px solid var(--navy-800);
}

.suite__row {
  position: relative;
  display: grid;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-5) var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--normal) var(--ease);
}

.suite__row:hover {
  background: var(--slate-50);
}

.suite__name {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  color: var(--text-strong);
}

.suite__name a {
  text-decoration: none;
}

/* whole row is clickable via the product-name link */
.suite__name a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.suite__name a:focus-visible {
  outline: none;
}

.suite__row:focus-within {
  box-shadow: inset 0 0 0 3px var(--ring-focus);
}

.suite__desc {
  color: var(--text-body);
  max-width: 44em;
}

.suite__go {
  display: none;
  color: var(--slate-400);
  transition: color var(--normal) var(--ease), transform var(--normal) var(--ease);
}

.suite__row:hover .suite__go {
  color: var(--navy-800);
  transform: translateX(3px);
}

@media (min-width: 800px) {
  .suite__row {
    grid-template-columns: 16rem 1fr auto;
    align-items: center;
    padding: var(--space-5) var(--space-4);
  }

  .suite__go {
    display: block;
  }
}

/* 11. Product detail (/our-products/) ===================================== */
.checks {
  display: grid;
  gap: var(--space-3);
}

.checks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.checks .icon {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.2rem;
  color: var(--green-600);
}

.products {
  border-top: 2px solid var(--navy-800);
}

.product {
  display: grid;
  gap: var(--space-5);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.product__aside {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.product__aside .chip {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
}

.product__site {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  font-weight: 700;
  color: var(--text-link);
  text-decoration: none;
}

.product__site:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.product__site .icon {
  width: 1rem;
  height: 1rem;
}

.product__body {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
}

.product__body .checks {
  margin-top: var(--space-2);
}

@media (min-width: 900px) {
  .product {
    grid-template-columns: 17rem 1fr;
    gap: var(--space-8);
  }

  .product__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    align-self: start;
  }
}

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.jump a {
  display: inline-flex;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: background-color var(--fast) var(--ease);
}

.jump a:hover {
  background: rgba(255, 255, 255, 0.16);
}

.jump .chip {
  color: var(--white);
}

.jump .accent-membership {
  --accent: var(--sky-300);
}

.jump .accent-subs {
  --accent: var(--ocean-300);
}

/* 12. Group, values ======================================================= */
/* Cards: white, 1px border, 12px radius, icon tile (product-site feature cards) */
.cards {
  display: grid;
  gap: var(--space-4);
}

.card {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: 1.375rem;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.card__icon {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--ocean-50);
  color: var(--ocean-700);
}

.card__icon .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--title);
}

.card p {
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--text-body);
}

@media (min-width: 640px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .cards--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Group companies: location / year pills */
.entity__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.entity__facts span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--ocean-50);
  color: var(--ocean-800);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.entity__facts .icon {
  width: 0.9rem;
  height: 0.9rem;
}

/* Values: centred columns on the pale-blue band (product-site "how it works") */
.values {
  display: grid;
  gap: var(--space-8);
  text-align: center;
}

.value {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  align-content: start;
  max-width: 20rem;
  margin-inline: auto;
}

.value__icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--ocean-700);
  color: var(--white);
}

.value__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.value .h-3 {
  font-size: 1rem;
}

.value p {
  font-size: 0.84375rem;
  line-height: 1.55;
}

@media (min-width: 640px) {
  .values {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .values {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

/* Key facts (About "at a glance"): label + value cards */
.facts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.fact {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding: 1.125rem 1.375rem;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.fact dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ocean-700);
}

.fact dd {
  margin: 0;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-strong);
}

@media (min-width: 700px) {
  .facts {
    grid-template-columns: 1fr 1fr;
  }
}

/* Story (home): the e2 mark pinned on the left while the history scrolls by.
   Resting state = the finished mark, so it also works without animation. */
.story {
  position: relative;
  isolation: isolate;
  overflow-x: clip; /* flying pieces never cause sideways scroll (clip keeps sticky working) */
  color: rgba(255, 255, 255, 0.78);
  padding-top: calc(var(--step) + var(--section-y));
  padding-bottom: var(--section-y);
}

.story::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(55% 45% at 28% 55%, rgba(126, 182, 227, 0.14), transparent 70%),
    linear-gradient(180deg, var(--navy-900) 0%, #0f2440 100%);
  clip-path: polygon(
    0 var(--step),
    calc(100% - var(--step-at) - var(--step)) var(--step),
    calc(100% - var(--step-at)) 0,
    100% 0,
    100% 100%,
    0 100%
  );
}

.story .eyebrow {
  color: var(--sky-300);
}

.story .h-2 {
  color: var(--white);
}

.story__grid {
  display: grid;
  view-timeline: --story block;
}

.story__stage {
  position: sticky;
  top: var(--header-h);
  z-index: 1;
  display: grid;
  place-items: center;
  height: 40vh;
  margin-inline: calc(-1 * var(--gutter)); /* full-bleed so passing text never peeks out beside it */
  padding: var(--space-4) var(--gutter);
  background: linear-gradient(180deg, #0e2848 90%, rgba(14, 40, 72, 0));
}

.story__mark {
  width: min(100%, 40rem);
  height: auto;
  max-height: 100%;
  overflow: visible;
}

.story__piece {
  fill: url(#story-fill);
}

.story__steps {
  position: relative;
}

.story__step {
  display: grid;
  gap: var(--space-3);
  align-content: center;
  min-height: 60vh;
  padding-block: var(--space-8);
}

.story__year {
  font-size: clamp(3rem, 1.9rem + 4.4vw, 5.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--sky-300);
  font-variant-numeric: tabular-nums;
}

.story__title {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--white);
  text-wrap: balance;
}

.story__step p:not(.story__year) {
  max-width: 30em;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.story__link {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.story__link:hover {
  color: var(--sky-300);
}

@media (min-width: 900px) {
  .story__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }

  .story__stage {
    top: calc(var(--header-h) + 3vh);
    height: calc(100vh - var(--header-h) - 6vh);
    margin-inline: 0;
    padding: 0;
    background: none;
  }

  /* .story prefix outranks the generic ol[class] { padding: 0 } reset */
  .story .story__steps {
    padding-left: clamp(2.5rem, 1rem + 2.5vw, 3.5rem);
  }

  /* progress line down the story column */
  .story__steps::before,
  .story__steps::after {
    content: '';
    position: absolute;
    left: 0;
    top: 12vh;
    bottom: 12vh;
    width: 2px;
    border-radius: 2px;
  }

  .story__steps::before {
    background: rgba(255, 255, 255, 0.12);
  }

  .story__steps::after {
    background: linear-gradient(180deg, var(--sky-300), var(--ocean-700));
    transform-origin: top;
  }

  .story__step {
    min-height: 68vh;
  }

  .story__step--final {
    min-height: 85vh;
  }
}

/* 13. About / timeline ===================================================== */
.timeline {
  position: relative;
  display: grid;
  gap: var(--space-7);
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: 0.3rem;
  width: 2px;
  background: var(--navy-100);
}

.timeline__item {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-7);
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--navy-800);
  clip-path: polygon(0 0, 55% 0, 100% 45%, 100% 100%, 0 100%);
}

.timeline__year {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ocean-700);
  font-variant-numeric: tabular-nums lining-nums;
}

.timeline__item p {
  max-width: 38em;
}

@media (min-width: 800px) {
  .timeline::before {
    left: calc(8rem + 0.3rem);
  }

  .timeline__item {
    grid-template-columns: 8rem 1fr;
    gap: var(--space-7);
    padding-left: 0;
  }

  .timeline__item::before {
    left: 8rem;
  }

  .timeline__item > div {
    padding-left: var(--space-7);
  }
}

.pull {
  padding-left: var(--space-5);
  border-left: 3px solid var(--ocean-700);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--navy-900);
  font-weight: 600;
}

/* 14. Team ================================================================= */
/*  Leadership and team share one grid. Each person is a <details>: the
    summary shows avatar, name and role; the bio opens on click (no JS).
    Everything is top-aligned, so an open bio never re-centres its row. */
.team {
  display: grid;
  align-items: start;
  border-top: 2px solid var(--navy-800);
}

@media (min-width: 700px) {
  .team {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-8);
  }
}

@media (min-width: 1040px) {
  .team {
    grid-template-columns: repeat(3, 1fr);
  }
}

.person {
  border-bottom: 1px solid var(--border-subtle);
}

.person__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr; /* spare avatar height goes below the role, keeping name + role at the top */
  grid-template-areas:
    'avatar name toggle'
    'avatar role toggle';
  column-gap: var(--space-4);
  row-gap: 0.15rem;
  align-items: start;
  align-content: start;
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
}

.person__summary::-webkit-details-marker {
  display: none;
}

.person__summary:focus-visible {
  outline-offset: 4px;
}

.person__avatar {
  grid-area: avatar;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
}

.person__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person__name {
  grid-area: name;
  padding-top: 0.25rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy-900);
  transition: color var(--fast) var(--ease);
}

.person__role {
  grid-area: role;
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ocean-700);
}

.person__toggle {
  grid-area: toggle;
  margin-top: 0.5rem;
  color: var(--slate-500);
  transition: transform var(--normal) var(--ease), color var(--fast) var(--ease);
}

.person__summary:hover .person__name,
.person__summary:hover .person__toggle {
  color: var(--ocean-700);
}

details[open] > .person__summary .person__toggle {
  transform: rotate(180deg);
}

.person__bio {
  padding-bottom: var(--space-6);
  font-size: 1rem;
}

@media (min-width: 480px) {
  .person__bio {
    padding-left: calc(3.5rem + var(--space-4));
  }
}

/* 15. FAQ ================================================================== */
.faq-group {
  display: grid;
  gap: var(--space-5);
}

.faq-group + .faq-group {
  margin-top: var(--space-10);
}

@media (min-width: 900px) {
  .faq-group {
    grid-template-columns: 16rem 1fr;
    gap: var(--space-8);
  }

  .faq-group .h-3 {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    align-self: start;
  }
}

.faq-list {
  border-top: 2px solid var(--navy-800);
}

.faq {
  border-bottom: 1px solid var(--border-subtle);
}

.faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy-900);
  cursor: pointer;
  list-style: none;
  transition: color var(--fast) var(--ease);
}

.faq > summary::-webkit-details-marker {
  display: none;
}

.faq > summary:hover {
  color: var(--ocean-700);
}

.faq > summary .icon {
  color: var(--slate-500);
  transition: transform var(--normal) var(--ease);
}

.faq[open] > summary .icon {
  transform: rotate(180deg);
}

.faq__body {
  padding-bottom: var(--space-6);
  max-width: var(--measure);
}

.faq__body > * + * {
  margin-top: 0.9em;
}

.faq__body a:not(.btn) {
  color: var(--text-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.faq__body a:not(.btn):hover {
  color: var(--text-link-hover);
  text-decoration-thickness: 2px;
}

/* 16. Contact ============================================================== */
.routes {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .routes {
    grid-template-columns: 1fr 1fr;
  }
}

.route {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.route--primary {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--sky-200);
}

.route--primary .h-3,
.route--primary .contact-line a {
  color: var(--white);
}

.route--primary .route__for {
  color: var(--sky-300);
}

.route__for {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.contact-lines {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.contact-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
}

.contact-line a {
  color: var(--navy-900);
  text-decoration: underline;
  text-decoration-color: var(--slate-300);
  text-underline-offset: 0.2em;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.contact-line a:hover {
  text-decoration-color: currentColor;
}

.contact-line .icon {
  color: var(--ocean-700);
}

.route--primary .contact-line .icon {
  color: var(--sky-300);
}

.details-list {
  display: grid;
  gap: var(--space-3);
}

.details-list div {
  display: grid;
  gap: 0.1rem;
}

.details-list dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.details-list dd {
  color: var(--navy-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.docs {
  display: grid;
  gap: var(--space-2);
}

.docs a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--navy-900);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.docs a:hover {
  border-color: var(--slate-400);
  background: var(--slate-50);
}

.docs .icon {
  color: var(--ocean-700);
}

.docs small {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
}

/* 17. CTA band ============================================================= */
.cta-band {
  position: relative;
  isolation: isolate;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  padding-top: calc(var(--step) + clamp(3rem, 2rem + 4vw, 5rem));
  padding-bottom: clamp(3.5rem, 2rem + 4vw, 5rem);
}

/* mirrored 45° step at the top edge */
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--navy-900) 0%, #0f2440 100%);
  clip-path: polygon(
    0 var(--step),
    calc(100% - var(--step-at) - var(--step)) var(--step),
    calc(100% - var(--step-at)) 0,
    100% 0,
    100% 100%,
    0 100%
  );
}

.cta-band__inner {
  display: grid;
  gap: var(--space-6);
  justify-items: center;
}

.cta-band .h-2 {
  color: var(--white);
}

.cta-band p {
  margin: var(--space-3) auto 0;
  max-width: 36em;
  font-size: var(--fs-lead);
}

.cta-band .btn-row {
  justify-content: center;
}

/* 18. Footer =============================================================== */
.site-footer {
  background: var(--footer);
  color: rgba(255, 255, 255, 0.78);
  padding-top: var(--space-10);
  padding-bottom: var(--space-6);
  font-size: var(--fs-small);
}

.cta-band + .site-footer {
  padding-top: var(--space-9);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-8);
}

.site-footer__brand img {
  width: 132px;
}

.site-footer__brand p {
  margin-top: var(--space-4);
  max-width: 18em;
  color: var(--sky-300);
  font-size: 1.0625rem;
  font-weight: 600;
}

.site-footer h2 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--white);
}

.site-footer ul {
  display: grid;
  gap: 0.15rem;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}

.site-footer a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer a:focus-visible {
  outline-color: var(--sky-300);
}

.site-footer .icon {
  width: 1rem;
  height: 1rem;
  color: var(--slate-400);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-xs);
}

@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  }
}

/* 19. Motion: scroll effects ============================================== */
/*  Pure CSS scroll-driven animations (Chrome, Edge, Safari 26+), as
    progressive enhancement: other browsers show a static page, and nothing
    moves for people who ask for reduced motion. Scroll-linked only, so at
    the top of the page everything is already in its final, visible state
    (the headline paints immediately, which keeps LCP fast). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* navy headers: the copy glides up and fades as you scroll away */
    .hero__copy,
    .page-hero__inner {
      animation: copy-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 65vh;
    }

    @keyframes copy-out {
      to {
        opacity: 0;
        transform: translateY(-90px);
      }
    }

    /* content rises into place as it scrolls into view */
    .section-head,
    .split > .flow,
    .pull,
    .card,
    .fact,
    .product__aside,
    .product__body,
    .person,
    .faq,
    .route,
    .docs a {
      animation: rise-in var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }

    @keyframes rise-in {
      from {
        opacity: 0;
        transform: translateY(72px) scale(0.96);
      }
    }

    /* registers and the timeline slide in from the left */
    .suite__row,
    .timeline__item {
      animation: slide-in var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    @keyframes slide-in {
      from {
        opacity: 0;
        transform: translateX(-72px);
      }
    }

    /* values pop up */
    .value {
      animation: pop-in var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }

    @keyframes pop-in {
      from {
        opacity: 0;
        transform: translateY(56px) scale(0.8);
      }
    }

    /* the contact band zooms in */
    .cta-band__inner {
      animation: zoom-in var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }

    @keyframes zoom-in {
      from {
        opacity: 0;
        transform: scale(0.88);
      }
    }

    /* items in the same row arrive one after another */
    .cards > :nth-child(4n + 2),
    .values > :nth-child(4n + 2),
    .team > :nth-child(3n + 2),
    .facts > :nth-child(2n) {
      animation-range: entry 12% cover 36%;
    }

    .cards > :nth-child(4n + 3),
    .values > :nth-child(4n + 3),
    .team > :nth-child(3n + 3) {
      animation-range: entry 24% cover 44%;
    }

    .cards > :nth-child(4n + 4),
    .values > :nth-child(4n + 4) {
      animation-range: entry 36% cover 52%;
    }

    /* ---- Story (home): the e2 mark assembles as the history scrolls by ---- */
    .story__piece {
      stroke: var(--sky-300);
      stroke-width: 2.5px;
      stroke-linejoin: round;
      stroke-dasharray: 1;
      vector-effect: non-scaling-stroke;
      transform-box: fill-box;
      transform-origin: center;
      animation: piece-in var(--ease-out) both, piece-fill linear both;
      animation-timeline: --story, --story;
    }

    /* each milestone flies one piece in from a different direction */
    .story__piece--1 {
      --fx: -80%;
      --fy: 25%;
      --fr: -32deg;
      animation-range: entry 55% contain 8%, contain 82% contain 94%;
    }

    .story__piece--2 {
      --fx: -35%;
      --fy: 120%;
      --fr: 40deg;
      animation-range: contain 10% contain 24%, contain 82% contain 94%;
    }

    .story__piece--3 {
      --fx: 45%;
      --fy: -140%;
      --fr: 55deg;
      animation-range: contain 34% contain 48%, contain 82% contain 94%;
    }

    .story__piece--4 {
      --fx: 75%;
      --fy: 30%;
      --fr: -26deg;
      animation-range: contain 58% contain 72%, contain 82% contain 94%;
    }

    /* fly in as a self-drawing outline ... */
    @keyframes piece-in {
      from {
        opacity: 0;
        stroke-dashoffset: 1;
        transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(0.55);
      }

      55% {
        opacity: 1;
      }

      to {
        stroke-dashoffset: 0;
      }
    }

    /* ... then the finished mark fills with the brand gradient */
    @keyframes piece-fill {
      from {
        fill-opacity: 0.06;
        stroke-opacity: 1;
      }

      to {
        fill-opacity: 1;
        stroke-opacity: 0;
      }
    }

    .story__mark {
      animation: mark-glow linear both;
      animation-timeline: --story;
      animation-range: contain 78% contain 100%;
    }

    @keyframes mark-glow {
      from {
        filter: drop-shadow(0 0 0 rgba(126, 182, 227, 0));
        transform: scale(0.94);
      }

      to {
        filter: drop-shadow(0 0 44px rgba(126, 182, 227, 0.5));
        transform: scale(1);
      }
    }

    /* the milestone in the middle of the screen is the bright one */
    .story__step {
      animation: step-focus linear both;
      animation-timeline: view();
      animation-range: cover 8% cover 92%;
    }

    .story__step--final {
      animation-name: step-final;
    }

    @keyframes step-focus {
      0% {
        opacity: 0.18;
        transform: translateY(48px);
      }

      32%,
      68% {
        opacity: 1;
        transform: none;
      }

      100% {
        opacity: 0.18;
        transform: translateY(-48px);
      }
    }

    @keyframes step-final {
      0% {
        opacity: 0.18;
        transform: translateY(48px);
      }

      36%,
      100% {
        opacity: 1;
        transform: none;
      }
    }

    .story__steps::after {
      animation: story-progress linear both;
      animation-timeline: --story;
      animation-range: contain 0% contain 100%;
    }

    @keyframes story-progress {
      from {
        transform: scaleY(0);
      }
    }

    /* the menu bar lifts off the page once you start scrolling */
    .site-header {
      animation: header-lift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 120px;
    }

    @keyframes header-lift {
      to {
        border-bottom-color: transparent;
        box-shadow: 0 6px 24px rgba(14, 26, 48, 0.09);
      }
    }
  }
}

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

.center-text {
  text-align: center;
}

.mt-6 {
  margin-top: var(--space-6);
}

.mt-8 {
  margin-top: var(--space-8);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
  }

  .site-header,
  .cta-band,
  .site-footer,
  .skip-link {
    display: none;
  }

  .hero::before,
  .page-hero::before {
    display: none;
  }

  .hero,
  .page-hero,
  .page-hero .h-1,
  .page-hero .lead {
    color: #000;
  }
}