/* ---- tokens.css ---- */
/* Design tokens (plan section 4.1, change list "Brand guidelines"). Foundation unit U0.
   Colours are flat brand colours only. tests/contrast.test.mjs measures every pair of colour tokens
   below and fails if a text pair drops under 4.5:1 or a pair is left unclassified. */
:root {
  /* colour */
  --navy: #142D4E;
  --blue: #1559B7;
  --orange-accent: #F28A2E;          /* rules, connector, small accents; never behind white text */
  --orange-button: #B94F0C;          /* primary buttons only */
  --orange-button-hover: #A3450A;
  --charcoal: #303942;
  --pale: #F0F4FA;
  --white: #FFFFFF;
  --border: #D9E0EA;                 /* 1 px card and table rules; decorative, never text */

  /* roles */
  --text: var(--charcoal);
  --heading: var(--navy);
  --link: var(--blue);
  --focus: var(--blue);              /* white on navy surfaces (base.css) */

  /* type: Arial, system stack, zero font loading (D7). Desktop values; mobile below. */
  --font: Arial, Helvetica, sans-serif;
  --fs-h1: 42px;
  --fs-h2: 32px;
  --fs-h3: 22px;
  --fs-body: 18px;
  --fs-card-h: 20px;
  --fs-card: 16px;                   /* card body, FAQ body, table cells, item text */
  --fs-button: 16px;
  --lh: 1.5;
  --lh-heading: 1.2;

  /* layout */
  --content-max: 1120px;
  --gutter: 24px;
  --section-space: 72px;
  --heading-gap: 24px;
  --card-gap: 20px;
  --card-pad: 24px;
  --radius: 4px;
  --header-h: 64px;
  --button-h: 48px;
  --measure: 60ch;

  /* motion (D11) */
  --dur-reveal: 350ms;
  --dur-hover: 150ms;
  --dur-draw: 700ms;
  --reveal-shift: 12px;
  --lift: 2px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --fs-body: 16px;
    --fs-card-h: 18px;
    --gutter: 20px;
    --section-space: 48px;
    --card-gap: 16px;
    --card-pad: 20px;
    --header-h: 60px;
  }
}

/* ---- base.css ---- */
/* Base: reset, type, wrap, focus, skip link, header, mobile nav, footer. Foundation unit U0. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh);
  text-align: left;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--heading); font-weight: 700; line-height: var(--lh-heading); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--link); }
strong, b { font-weight: 700; }

/* Anchor targets clear the sticky header (D11 smooth anchor scrolling with a header offset). */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
main:focus { outline: none; }

.wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.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;
}

/* ---------- focus: 2 px outline, 2 px offset, on everything interactive ---------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.band--navy, .site-footer, .staging-flag { --focus: var(--white); }

/* ---------- skip link: first in the DOM, visible on focus ---------- */
.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  padding: 12px 16px; background: var(--white); color: var(--navy);
  font-weight: 700; border: 2px solid var(--navy); border-radius: var(--radius);
}
.skip-link:focus { top: 8px; }

.staging-flag {
  background: var(--navy); color: var(--white); font-size: 16px; line-height: 1.4;
  padding: 8px var(--gutter); text-align: left;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white); border-bottom: 1px solid var(--border);
}
.site-header__bar { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }

/* Official kit logo (1999 x 416). 40 px tall in the bar; the kit asks for clear space of half the symbol
   height, which the bar's padding and the 16 px gap give. */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.wordmark__logo { display: block; height: 40px; width: auto; }

.wordmark { flex: none; }
.nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav__list { display: flex; gap: 24px; list-style: none; }
.nav__link { color: var(--navy); text-decoration: none; font-size: 16px; padding: 10px 0; display: inline-block; white-space: nowrap; }
.nav__link:hover, .nav__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
/* Partner's design (2026-11-05): Referral Partners reads as one more nav item, no rule before it. */
.nav__rule { display: none; }
.nav__secondary { font-size: 16px; white-space: nowrap; }
.site-header .nav__secondary { color: var(--navy); font-weight: 400; text-decoration: none; padding: 10px 0; display: inline-block; }
.site-header .nav__secondary:hover, .site-header .nav__secondary[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.site-header .nav__cta, .site-header .header-cta { white-space: nowrap; flex: none; }
/* .site-header prefix: components.css (.btn display) loads later and must not win here */
.site-header .header-cta { display: none; }
.nav-toggle { display: none; }

/* Full horizontal nav needs about 1060 px of bar (measured), so it starts at 1180 px viewport; below
   that the bar is wordmark + compact booking button + menu button, and the nav is a full-width panel. */
@media (max-width: 1179px) {
  .site-header__bar { gap: 12px; }
  .site-header .header-cta { display: inline-flex; margin-left: auto; }
  /* the open panel carries its own booking button; one is enough */
  .site-header:has(.nav[data-open="true"]) .header-cta { visibility: hidden; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 10px;
    background: var(--white); color: var(--navy); border: 1px solid var(--border); border-radius: var(--radius);
    font: 700 16px/1 var(--font); cursor: pointer;
  }
  .nav-toggle .icon { width: 22px; height: 22px; }
  .nav-toggle__close { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--white); border-bottom: 1px solid var(--border);
    padding: 8px var(--gutter) 24px;
  }
  .js .nav:not([data-open="true"]) { display: none; }
  .no-js .nav { position: static; } /* without JS the links stay reachable, in the flow */
  .no-js .nav-toggle { display: none; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link, .nav__secondary { display: block; padding: 12px 0; min-height: 44px; border-bottom: 1px solid var(--border); }
  .nav__rule { display: none; }
  .nav__cta { margin-top: 16px; justify-content: center; }
}
/* Phones (partner's design): logo and a bare menu icon; the booking button lives in the page and the open menu. */
@media (max-width: 767px) {
  .site-header .header-cta { display: none; }
  .nav-toggle { margin-left: auto; border: 0; padding: 8px; }
  .nav-toggle .icon { width: 30px; height: 30px; }
  .nav-toggle__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 479px) {
  .wordmark__logo { height: 34px; }
}

/* ---------- footer (partner's design, 2026-11-05) ----------
   Desktop: navy band; the navy/orange logo on a white tile, L01 between thin rules, links over the copyright.
   Phones: a white footer; logo and links on top, then L01, then the copyright centred. */
.site-footer { background: var(--navy); color: var(--white); padding: 28px 0; }
.site-footer a { color: var(--white); }
.site-footer__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.site-footer__brand .wordmark { padding: 10px 18px; background: var(--white); border-radius: 10px; }
.site-footer__about { font-size: 16px; line-height: 1.45; margin: 0 32px; padding: 0 32px; border-left: 1px solid rgb(255 255 255 / 0.35); border-right: 1px solid rgb(255 255 255 / 0.35); }
.site-footer__meta { display: flex; flex-direction: column; gap: 6px; }
.site-footer__nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 20px; }
.site-footer__nav a { font-size: 16px; display: inline-block; padding: 2px 0; }
.site-footer__copy { font-size: 16px; margin: 0; }
@media (max-width: 1023px) {
  .site-footer__grid { grid-template-columns: auto minmax(0, 1fr); gap: 20px 0; }
  .site-footer__about { margin-right: 0; padding-right: 0; border-right: 0; }
  .site-footer__meta { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .site-footer { --focus: var(--blue); background: var(--white); color: var(--charcoal); padding: 20px 0 28px; border-top: 1px solid var(--border); }
  .site-footer a { color: var(--link); }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .site-footer__brand .wordmark { padding: 0; background: none; border-radius: 0; }
  .site-footer__meta { display: contents; }
  .site-footer__nav { order: 1; }
  .site-footer__about { order: 2; margin: 0; padding: 0; border: 0; }
  .site-footer__copy { order: 3; text-align: center; }
  .site-footer__nav ul { gap: 0 20px; }
  .site-footer__nav a { padding: 8px 0; }
}

/* ---- components.css ---- */
/* Shared components (src/templates/components.mjs). Foundation unit U0, finished: the home unit
   writes home.css and the pages unit writes pages.css; neither edits this file. Flat colours, no
   gradients, no shadows at rest, no coloured icon circles. */

/* ---------- section bands ---------- */
.band { padding: var(--section-space) 0; }
.band--white { background: var(--white); }
.band--pale { background: var(--pale); }
.band--navy { background: var(--navy); color: var(--white); --heading: var(--white); --text: var(--white); --link: var(--white); }
.band--navy a:not(.btn) { color: var(--white); }

.section-heading { margin-bottom: var(--heading-gap); max-width: 900px; }
.section-heading__lead { margin: 12px 0 0; font-size: var(--fs-body); max-width: 70ch; }

.page-hero { padding: var(--section-space) 0; }
.page-hero__inner { max-width: 820px; }
.page-hero__title { margin-bottom: 16px; }
.page-hero__body { font-size: var(--fs-body); max-width: 70ch; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--button-h); padding: 12px 24px;
  background: var(--orange-button); color: var(--white);
  font: 700 var(--fs-button)/1.2 var(--font); text-decoration: none; text-align: center;
  border: 0; border-radius: var(--radius); cursor: pointer;
}
.btn:hover { background: var(--orange-button-hover); color: var(--white); }
.btn--compact { min-height: 44px; padding: 10px 16px; }
.link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- qualification: same size as the words it qualifies, never under 16 px ---------- */
.qualification { margin: 16px 0 0; color: var(--text); max-width: 80ch; }
.qualification--body { font-size: var(--fs-body); }
.qualification--small { font-size: var(--fs-card); }

/* ---------- staging placeholder (production build refuses while any is present) ---------- */
.placeholder { margin: 24px 0; padding: 16px 20px; border: 2px dashed var(--blue); border-radius: var(--radius); background: var(--white); color: var(--navy); font-size: 16px; }
.band--navy .placeholder { color: var(--navy); }

/* ---------- cards ---------- */
.card {
  display: flex; gap: 16px; align-items: flex-start; height: 100%;
  padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius);
}
.card--white { background: var(--white); }
.card--pale { background: var(--pale); }
.card__icon { flex: none; color: var(--navy); }
.card__title { font-size: var(--fs-card-h); margin-bottom: 8px; }
.card__text { font-size: var(--fs-card); margin: 0; }
.card-grid { display: grid; gap: var(--card-gap); list-style: none; }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; } }

/* ---------- feature row: items separated by 1 px vertical rules ---------- */
.feature-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); list-style: none; }
.feature-row__item { display: flex; gap: 16px; align-items: flex-start; padding: 4px 28px; border-left: 1px solid var(--border); }
.feature-row__item:first-child { padding-left: 0; border-left: 0; }
.feature-row__icon { flex: none; color: var(--navy); }
.feature-row__title { font-size: var(--fs-card-h); margin-bottom: 8px; }
.feature-row__text { font-size: var(--fs-card); margin: 0; }
@media (max-width: 767px) {
  .feature-row { grid-auto-flow: row; gap: 24px; }
  .feature-row__item { padding: 0; border-left: 0; }
}

/* ---------- value ribbon ---------- */
.ribbon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.ribbon__item { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; font-size: 16px; color: var(--navy); border-left: 1px solid var(--border); }
.ribbon__item:first-child { border-left: 0; }
.ribbon__item .icon { flex: none; color: var(--navy); }
@media (max-width: 767px) {
  .ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .ribbon__item { justify-content: flex-start; border-left: 0; padding: 8px 8px 8px 0; }
}

/* ---------- check list ---------- */
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; list-style: none; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-body); }
.checklist .icon { flex: none; margin-top: 3px; color: var(--navy); }
@media (max-width: 767px) { .checklist { grid-template-columns: 1fr; } }

/* ---------- numbered steps on the orange connector ---------- */
.steps { --n: 5; --dot: 36px; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; list-style: none; }
.steps--2 { --n: 2; } .steps--3 { --n: 3; } .steps--4 { --n: 4; } .steps--5 { --n: 5; } .steps--6 { --n: 6; }
.steps::before {
  content: ""; position: absolute; z-index: 0;
  top: calc(var(--dot) / 2 - 1px); height: 2px;
  left: calc(100% / (2 * var(--n))); right: calc(100% / (2 * var(--n)));
  background: var(--orange-accent); transform-origin: left center;
}
.steps__item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--navy); color: var(--white); font-weight: 700; font-size: 18px; line-height: 1;
}
.steps__body { margin-top: 16px; }
.steps__name { font-size: var(--fs-card-h); }
.steps__text { font-size: var(--fs-card); margin: 8px 0 0; }
@media (max-width: 1023px) {
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .steps::before { left: calc(var(--dot) / 2 - 1px); right: auto; top: calc(var(--dot) / 2); bottom: calc(var(--dot) / 2); width: 2px; height: auto; transform-origin: center top; }
  .steps__item { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; }
  .steps__body { margin-top: 4px; }
}

/* ---------- CTA band ---------- */
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px 48px; }
.cta-band__text { flex: 0 1 60%; max-width: 680px; }
.cta-band__title { margin-bottom: 12px; }
.cta-band__body { font-size: var(--fs-body); }
.cta-band__action { flex: none; }
.cta-band__note { font-size: 16px; margin: 12px 0 0; max-width: var(--measure); }
.cta-band--stacked .cta-band__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
.cta-band--stacked .cta-band__text { max-width: var(--measure); flex: none; }
@media (max-width: 767px) {
  .cta-band__inner { flex-direction: column; align-items: stretch; gap: 24px; }
  .cta-band__action .btn { width: 100%; }
}

/* ---------- document table; stacked labelled rows under 768 px ---------- */
.doc-table { width: 100%; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-card); border: 1px solid var(--border); }
.doc-table caption { text-align: left; font-weight: 700; color: var(--navy); padding-bottom: 8px; }
.doc-table th, .doc-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.doc-table thead th { background: var(--navy); color: var(--white); font-weight: 700; border-top: 0; }
.doc-table tbody th { color: var(--navy); font-weight: 700; }
.doc-table tbody tr:nth-child(even) { background: var(--pale); }
@media (max-width: 767px) {
  .doc-table table, .doc-table tbody, .doc-table tr, .doc-table th, .doc-table td { display: block; }
  .doc-table table { border: 0; }
  .doc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc-table tbody tr { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; background: var(--white); }
  .doc-table tbody tr:nth-child(even) { background: var(--white); }
  .doc-table tbody th { border-top: 0; padding: 12px 16px 4px; font-size: var(--fs-card-h); }
  .doc-table td { border-top: 0; padding: 4px 16px 12px; }
  .doc-table td::before { content: attr(data-label); display: block; font-weight: 700; color: var(--navy); }
}

/* ---------- accordion (FAQ) ---------- */
.acc-list { border-top: 1px solid var(--border); }
.acc { border-bottom: 1px solid var(--border); }
.acc__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px; padding: 16px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: var(--fs-card-h); color: var(--navy);
}
.acc__summary::-webkit-details-marker { display: none; }
.acc__chevron { flex: none; color: var(--navy); }
.acc[open] .acc__chevron { transform: rotate(180deg); }
.acc__a { padding: 0 0 20px; font-size: var(--fs-card); max-width: 75ch; }

/* ---------- form field ---------- */
.field { margin-bottom: 20px; }
.field__label { display: block; font-weight: 700; font-size: 16px; color: var(--navy); margin-bottom: 6px; }
.field input, .field textarea {
  display: block; width: 100%; min-height: 48px; padding: 12px 14px;
  font: 400 16px/1.5 var(--font); color: var(--charcoal); background: var(--white);
  border: 1px solid var(--charcoal); border-radius: var(--radius);
}
.field textarea { resize: vertical; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border: 2px solid var(--orange-button); }
.field__note { font-size: 16px; margin: 8px 0 0; }
.field__error { font-size: 16px; font-weight: 700; color: var(--orange-button); margin: 6px 0 0; }
.field__error:empty { display: none; }

/* ---------- long text (policy pages) ---------- */
.prose { padding-top: 48px; padding-bottom: var(--section-space); max-width: calc(75ch + 2 * var(--gutter)); margin-left: 0; }
.prose h2 { font-size: var(--fs-h3); margin: 32px 0 12px; }

/* ---------- motion (D11): CSS only, once, reduced-motion aware ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready [data-reveal] { transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
  .motion-ready [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(var(--reveal-shift)); }
  .card, .btn { transition: transform var(--dur-hover) ease, background-color var(--dur-hover) ease; }
  .card:hover, .btn:hover { transform: translateY(calc(-1 * var(--lift))); }
  .motion-ready .steps[data-draw]::before { transition: transform var(--dur-draw) var(--ease); }
  .motion-ready .steps[data-draw]:not(.is-drawn)::before { transform: scaleX(0); }
  .acc__chevron { transition: transform var(--dur-hover) ease; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  .motion-ready .steps[data-draw]:not(.is-drawn)::before { transform: scaleY(0); }
}

/* ---- home.css ---- */
/* Home page: the partner's page design (Scott, 2026-11-05), rebuilt as real text and photos. Desktop follows
   design/mockups/partner-layout-2026-11-05-desktop.png; phones (under 768 px) follow the four panels of
   partner-layout-2026-11-05-mobile.png. Flat brand colours from tokens.css only; no type under 16 px (the mockups
   are drawn small, the site keeps its 16 px floor); no motion of its own (the shared reveal, hover lift and
   connector draw in components.css cover it, reduced-motion aware). */

/* ---------- rhythm ---------- */
.home-band { --r: 10px; padding-top: 48px; padding-bottom: 48px; }
.home-band .section-heading { max-width: none; margin-bottom: 20px; }
.home-band .section-heading__title { text-wrap: balance; }
.home-band .section-heading__lead { max-width: none; margin-top: 8px; }
@media (max-width: 767px) {
  .home-band { padding-top: 32px; padding-bottom: 32px; }
  .home-band .section-heading { margin-bottom: 16px; }
}

/* ---------- two-tone icons (src/templates/pages/_home-icons.mjs): navy outline, orange accent ---------- */
.hi { display: block; flex: none; }
.hi .n { stroke: var(--navy); }
.hi .o { stroke: var(--orange-accent); }
.hi .o--fill { fill: var(--orange-accent); stroke: none; }

/* ---------- H01 hero: text left, photo right ---------- */
.home-hero { padding-top: 44px; padding-bottom: 52px; }
.home-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 32px 44px; align-items: center; }
.home-hero__title { margin-bottom: 16px; text-wrap: balance; }
.home-hero__body { font-size: var(--fs-body); margin: 0; }
.home-hero .qualification { margin-top: 14px; }
.home-hero .actions { margin-top: 28px; gap: 16px 48px; }
.home-hero__photo { display: block; width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 1023px) {
  .home-hero__layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .home-hero { padding-top: 28px; padding-bottom: 28px; }
  .home-hero .actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 24px; }
  .home-hero .actions .btn { width: 100%; }
  .home-hero .actions .link { align-self: center; }
  .home-hero__layout { gap: 24px; }
  .home-hero__photo { aspect-ratio: 2.1 / 1; object-fit: cover; object-position: 50% 40%; }
}

/* ---------- H05 / H06: four white cards on the pale band, icon on top ---------- */
.problem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; margin-top: 8px; }
.pcard { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 22px 22px 26px; }
.pcard .hi { margin-bottom: 14px; }
.pcard__title { font-size: 22px; line-height: 1.15; margin-bottom: 10px; }
.pcard__text { font-size: 16px; line-height: 1.4; margin: 0; }
@media (max-width: 1023px) { .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .problem-grid { gap: 12px; }
  .pcard { padding: 14px 14px 16px; }
  .pcard .hi { width: 48px; height: 48px; margin-bottom: 10px; }
  .pcard__title { font-size: 18px; margin-bottom: 6px; }
}

/* ---------- overview blocks (employee, employer): photo beside the intro, list beside the impact panel ---------- */
.split { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 50fr); gap: 28px 48px; align-items: center; }
.split--lower { align-items: start; margin-top: 36px; }
.split--photo-left { grid-template-areas: "photo intro"; }
.split--photo-left .split__photo { grid-area: photo; }
.split--photo-left .split__intro { grid-area: intro; }
.split__photo img { display: block; width: 100%; height: auto; border-radius: 12px; }

.eyebrow { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--orange-button); }
.intro__title { font-size: 30px; line-height: 1.15; margin: 0 0 12px; text-wrap: balance; }
.intro__body { font-size: var(--fs-body); margin: 0; }

.benefits__title { font-size: 30px; line-height: 1.15; margin: 0; }
.benefits__sub { font-size: var(--fs-body); margin: 4px 0 20px; }
.benefits__list { display: grid; gap: 20px; list-style: none; }
.benefits__item { display: flex; align-items: center; gap: 16px; }
.benefits__text { font-size: 16px; line-height: 1.4; margin: 0; }
.home-employee .benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.home-employer .benefits__list { gap: 16px; }

/* impact panel: navy title bar over a white body (white text only on navy) */
.impact { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.impact__title { margin: 0; padding: 10px 22px; background: var(--navy); color: var(--white); font-size: 22px; line-height: 1.2; }
.impact__body { padding: 16px 22px 20px; }
.impact__figure { margin: 0 0 4px; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--navy); text-wrap: balance; }
.impact__note { margin: 0 0 14px; font-size: 16px; line-height: 1.4; }
.impact__disc-title { margin: 0 0 6px; font-size: 20px; line-height: 1.2; }
.impact__disc { margin: 0; font-size: 16px; line-height: 1.4; }
.impact__disc + .impact__disc { margin-top: 10px; }

/* H10 / H11: two white cards, icon on the left */
.note-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; list-style: none; margin-top: 40px; }
.ncard { display: flex; align-items: flex-start; gap: 20px; padding: 22px 24px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r); }
.ncard__title { font-size: 24px; line-height: 1.2; margin: 0 0 8px; }
.ncard__text { font-size: 16px; line-height: 1.45; margin: 0; }
.ncard .qualification { margin-top: 8px; }

@media (max-width: 1023px) {
  .home-employee .benefits__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .split, .split--lower { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .split--lower { margin-top: 24px; }
  .split--photo-left { grid-template-areas: "intro" "photo"; }
  .eyebrow { font-size: 17px; margin-bottom: 2px; }
  .intro__title { font-size: 24px; margin-bottom: 8px; }
  .intro__body { font-size: 16px; }
  .benefits__title { font-size: 24px; }
  .benefits__sub { margin-bottom: 12px; }
  /* employee list: one bordered row per benefit */
  .home-employee .benefits__list { gap: 8px; }
  .home-employee .benefits__item { gap: 20px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px; }
  .home-employee .benefits__item .hi { width: 36px; height: 36px; }
  .home-employer .benefits__item .hi { width: 40px; height: 40px; }
  .impact__title { padding: 8px 16px; font-size: 20px; }
  .impact__body { padding: 12px 16px 16px; }
  .impact__figure { font-size: 19px; }
  .impact__disc-title { font-size: 18px; }
  .note-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
  .ncard { gap: 16px; padding: 14px 16px; }
  .ncard .hi { width: 44px; height: 44px; }
  .ncard__title { font-size: 20px; margin-bottom: 4px; }
  /* employer: thin rules between the intro, the list and the impact panel */
  .home-employer .split--lower { padding-top: 20px; border-top: 1px solid var(--border); }
  .home-employer .benefits { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
}

/* ---------- H12: three columns between thin rules; the icons show on phones only ---------- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.trio__item { display: flex; align-items: flex-start; gap: 16px; padding: 2px 28px; border-left: 1px solid var(--border); }
.trio__item:first-child { border-left: 0; }
.trio__icon { display: none; }
.trio__title { font-size: 22px; line-height: 1.2; margin: 0 0 6px; }
.trio__text { font-size: 16px; line-height: 1.4; margin: 0; }
.home-value .section-heading + .trio { margin-top: 4px; }
.home-value .qualification { max-width: none; margin-top: 20px; text-align: center; }
@media (max-width: 767px) {
  .trio { grid-template-columns: minmax(0, 1fr); }
  .trio__item { align-items: center; padding: 10px 0; border-left: 0; border-top: 1px solid var(--border); }
  .trio__item:first-child { border-top: 0; padding-top: 0; }
  .trio__icon { display: block; width: 44px; height: 44px; }
  .trio__title { font-size: 18px; margin-bottom: 2px; }
  .home-value .qualification { margin-top: 12px; }
}

/* ---------- H17: two columns of orange ticks either side of a thin rule ---------- */
.home-fit { border-top: 1px solid var(--border); }
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; margin: 0 auto; list-style: none; }
.fit li { display: flex; align-items: flex-start; gap: 14px; padding: 7px 40px; font-size: var(--fs-body); }
.fit li:nth-child(even) { border-left: 1px solid var(--border); }
.fit .hi { margin-top: 1px; }
.home-note { font-size: 16px; text-align: center; max-width: none; margin: 18px 0 0; }
@media (max-width: 767px) {
  .fit li { gap: 8px; padding: 5px 10px 5px 0; font-size: 16px; }
  .fit li:nth-child(even) { padding-left: 14px; }
  .fit .hi { width: 22px; height: 22px; }
  .home-note { margin-top: 12px; }
}

/* ---------- H18 process: the shared numbered steps; a compact list without the line on phones ---------- */
.home-process { border-top: 1px solid var(--border); }
.home-process .section-heading { margin-bottom: 28px; }
.home-process .steps__name { font-size: 20px; }
.home-process .steps__body { max-width: 14em; }
@media (max-width: 1023px) {
  .home-process .steps__body { max-width: none; }
}
@media (max-width: 767px) {
  .home-process .section-heading { margin-bottom: 16px; }
  .home-process .steps { --dot: 32px; gap: 12px; }
  .home-process .steps::before { display: none; }
  .home-process .steps__item { gap: 14px; }
  .home-process .steps__body { margin-top: 2px; }
  .home-process .steps__name { font-size: 18px; }
  .home-process .steps__text { margin-top: 2px; }
}

/* ---------- H13 / H15: two white booking cards on the pale band ---------- */
.cta-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cta-card { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 28px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r); }
.cta-card__title { font-size: 26px; line-height: 1.2; margin: 0 0 10px; text-wrap: balance; }
.cta-card__body { font-size: 16px; line-height: 1.45; margin: 0; }
.cta-card .qualification { margin-top: 6px; }
.cta-card__action { margin-top: 18px; }
.cta-card__note { font-size: 16px; line-height: 1.4; margin: 10px 0 0; }
@media (max-width: 767px) {
  .cta-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cta-card { align-items: stretch; padding: 16px; }
  .cta-card__title { font-size: 21px; }
  .cta-card__action { margin-top: 14px; }
  .cta-card__action .btn { width: 100%; }
}

/* ---------- H20: navy closing band, centred ---------- */
.home-final { padding-top: 40px; padding-bottom: 44px; }
.final { text-align: center; }
.final__title { font-size: 32px; margin: 0 0 8px; text-wrap: balance; }
.final__body { font-size: var(--fs-body); margin: 0 0 22px; }
.home-final .btn { min-width: 320px; }
@media (max-width: 767px) {
  .home-final { padding-top: 28px; padding-bottom: 28px; }
  .final__title { font-size: 24px; }
  .final__body { font-size: 16px; margin-bottom: 18px; }
  .home-final .btn { width: 100%; min-width: 0; }
}

/* ---- pages.css ---- */
/* Inner pages (pages unit U3): About, FAQ, Referral Partners, Privacy Notice, Terms, thank-you, 404.
   Builds on tokens.css, base.css and components.css without overriding them. Flat colours, no
   gradients, no shadows at rest. Qualification sizes are never set here: they stay the shared
   .qualification--body / --small sizes (16 px minimum, the size of the words they qualify). */

/* ---------- inner-page hero: pale band, H1, a short orange rule under it (the mockup's accent) ---------- */
.pages-hero .page-hero__title::after {
  content: ""; display: block; width: 56px; height: 3px; margin-top: 20px;
  background: var(--orange-accent);
}
.pages-hero .page-hero__body { margin-bottom: 0; }
.pages-hero--short { display: flex; align-items: center; min-height: min(56vh, 520px); }
.pages-hero--short > .wrap { width: 100%; }
.pages-short { min-height: 24vh; }

/* standalone text links (not inside a sentence) get a 44 px touch target (plan 4.3) */
.pages-hero .actions .link, .pi-form__privacy .link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- body text blocks ---------- */
.pages-measure { max-width: 70ch; }
.pages-body { font-size: var(--fs-body); max-width: 70ch; margin: 0; }
.pages-section-heading { max-width: 70ch; }

/* a 16 px note under a row of 16 px items (R02 licensing note), left aligned, same size as the items */
.pages-note {
  font-size: var(--fs-card); max-width: 80ch; margin: 32px 0 0; padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ---------- FAQ ---------- */
.pages-faq__list { max-width: 880px; }
.pages-faq .acc__summary { text-align: left; }
.pages-faq .acc__summary:hover .acc__q { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- partner inquiry card (#partner-inquiry): heading + intro left, form right ---------- */
.pi-card {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px;
  padding: 40px; background: var(--pale); border: 1px solid var(--border); border-radius: var(--radius);
}
.pi-card__intro .section-heading { margin-bottom: 0; }
.pi-card__intro .section-heading__lead { margin-top: 16px; }
.pi-form { max-width: 640px; }
.pi-form__privacy { font-size: var(--fs-card); margin: 0 0 12px; }
.pi-form__actions { margin-top: 4px; }
.pi-form__status { font-size: var(--fs-card); font-weight: 700; color: var(--navy); margin: 16px 0 0; }
.pi-form__status:empty { display: none; }
.pi-turnstile:empty { display: none; }
.pi-turnstile.cf-turnstile { margin: 4px 0 20px; min-height: 65px; }
/* honeypot: off-screen and out of the accessibility tree; never shown to a person */
.pi-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 1023px) {
  .pi-card { grid-template-columns: 1fr; gap: 24px; padding: var(--card-pad); }
  .pi-form { max-width: none; }
}
@media (max-width: 767px) {
  .pi-form__actions .btn { width: 100%; }
}

/* ---------- policy pages: long text ---------- */
.pages-hero--policy .page-hero__body { font-weight: 700; color: var(--navy); }
.pages-prose { font-size: var(--fs-body); }
.pages-prose h2 { color: var(--navy); }
.pages-prose h3 { font-size: var(--fs-card-h); margin: 24px 0 8px; }
.pages-prose ul, .pages-prose ol { padding-left: 1.4em; margin: 0 0 1em; }
.pages-prose li { margin-bottom: 6px; }
.pages-prose a { overflow-wrap: anywhere; }

/* ---------- staging placeholder inside a heading (thank-you, 404) ---------- */
.placeholder-inline {
  display: inline-block; padding: 4px 10px; border: 2px dashed var(--blue); border-radius: var(--radius);
  background: var(--white); color: var(--navy); font-size: 0.6em; line-height: 1.3;
}

/* ---- motion.css ---- */
/* Motion and interaction (Scott, 2026-11-05: "bring it to life ... hover effects ... a professional level").
   Loaded last. The rules this file keeps:
   - Every movement (keyframes, animations, transform or offset transitions) sits inside
     @media (prefers-reduced-motion: no-preference). Outside it there are only colour, border and shadow changes:
     under reduced motion the hover and state feedback stays, nothing travels.
   - Pre-reveal hiding keys off .motion-ready (set by main.js), never the inline .js class: if main.js fails,
     nothing is ever hidden. Groups reveal as they come into view ([data-reveal-item] gets .is-in), headings with
     their band ([data-reveal] gets .is-revealed).
   - Entrances are keyframes with fill-mode backwards, so once they end the element's own transform is free again
     for hover.
   Motif, from the page's "One Additional Layer": a navy layer with an orange edge lifts off each photo (the hero on
   load, the employee and employer photos as they arrive). The process line draws and each step lands in turn. */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --shadow-lift: 0 16px 32px -18px rgb(20 45 78 / 0.42);
  --shadow-button: 0 10px 20px -10px rgb(185 79 12 / 0.65);
}

/* ---------- browser surfaces ---------- */
::selection { background: var(--navy); color: var(--white); }

/* ---------- feedback that stays under reduced motion: colour, borders, shadows ---------- */
.site-header { transition: box-shadow 250ms ease, border-color 250ms ease; }
.site-header.is-scrolled { box-shadow: 0 10px 24px -18px rgb(20 45 78 / 0.55); border-bottom-color: transparent; }

.pcard, .ncard, .cta-card { transition: box-shadow 250ms ease, border-color 250ms ease; }
.pcard:hover, .ncard:hover, .cta-card:hover { box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--navy) 28%, var(--border)); }
.btn { transition: background-color 150ms ease, box-shadow 200ms ease; }
.btn:hover { box-shadow: var(--shadow-button); }
.band--navy .btn:hover { box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.6); }
.steps__num { transition: box-shadow 200ms ease; }
.steps__item:hover .steps__num { box-shadow: 0 0 0 5px color-mix(in srgb, var(--orange-accent) 35%, var(--white)); }
.link, .site-footer a { text-decoration-thickness: 1px; transition: text-decoration-color 200ms ease; }
.link:hover, .site-footer a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--orange-accent); }
@media (max-width: 767px) {
  .home-employee .benefits__item { transition: border-color 200ms ease; }
  .home-employee .benefits__item:hover { border-color: color-mix(in srgb, var(--navy) 35%, var(--border)); }
}

/* desktop nav: an orange bar under the item replaces the plain underline */
@media (min-width: 1180px) {
  .nav__link, .site-header .nav__secondary { position: relative; }
  .nav__link::after, .site-header .nav__secondary::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 1px;
    background: var(--orange-accent); transform: scaleX(0); transform-origin: left center;
  }
  .nav__link:hover, .nav__link[aria-current="page"],
  .site-header .nav__secondary:hover, .site-header .nav__secondary[aria-current="page"] { text-decoration: none; }
  .nav__link:is(:hover, :focus-visible, [aria-current="page"])::after,
  .site-header .nav__secondary:is(:hover, :focus-visible, [aria-current="page"])::after { transform: scaleX(1); }
}

/* the photos keep their rounded frame however their contents move */
.home-hero__media, .split__photo { position: relative; clip-path: inset(0 round 12px); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes ab-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @keyframes ab-heading { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes ab-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ab-layer { from { transform: translateX(0); } to { transform: translateX(101%); } }
  @keyframes ab-settle { from { transform: scale(1.14); } to { transform: none; } }
  @keyframes ab-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
  @keyframes ab-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
  @keyframes ab-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
  @keyframes ab-menu { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  @keyframes ab-turn { from { opacity: 0; transform: rotate(-90deg); } to { opacity: 1; transform: none; } }

  /* stagger: one step per sibling, capped at six */
  :is(.problem-grid, .note-cards, .cta-cards, .trio, .fit, .benefits__list, .steps, .split__intro, .final) > :nth-child(2) { --i: 1; }
  :is(.problem-grid, .note-cards, .cta-cards, .trio, .fit, .benefits__list, .steps, .split__intro, .final) > :nth-child(3) { --i: 2; }
  :is(.problem-grid, .note-cards, .cta-cards, .trio, .fit, .benefits__list, .steps, .split__intro, .final) > :nth-child(4) { --i: 3; }
  :is(.problem-grid, .note-cards, .cta-cards, .trio, .fit, .benefits__list, .steps, .split__intro, .final) > :nth-child(5) { --i: 4; }
  :is(.problem-grid, .note-cards, .cta-cards, .trio, .fit, .benefits__list, .steps, .split__intro, .final) > :nth-child(n + 6) { --i: 5; }

  /* ---------- the focal moment: the hero on load (CSS only, so it never waits for a script) ---------- */
  .home-hero__title { animation: ab-heading 900ms var(--ease-out) 60ms backwards; }
  .home-hero__body { animation: ab-rise 800ms var(--ease-out) 200ms backwards; }
  .home-hero .qualification { animation: ab-rise 800ms var(--ease-out) 280ms backwards; }
  .home-hero .actions { animation: ab-rise 800ms var(--ease-out) 380ms backwards; }
  .home-hero__media::after, .split__photo::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: var(--navy); border-left: 6px solid var(--orange-accent); transform: translateX(101%);
  }
  .home-hero__media::after { animation: ab-layer 1100ms var(--ease-in-out) 250ms backwards; }
  .home-hero__photo { animation: ab-settle 1700ms var(--ease-out) 250ms backwards; }

  /* ---------- bands: the band itself stays put; its heading and groups arrive instead ---------- */
  .motion-ready .home-band[data-reveal]:not(.is-revealed) { opacity: 1; transform: none; }
  .motion-ready .home-band:not(.is-revealed) :is(.section-heading__title, .section-heading__lead, .home-value > .wrap > .qualification, .home-note) { opacity: 0; }
  .home-band.is-revealed .section-heading__title { animation: ab-heading 850ms var(--ease-out) backwards; }
  .home-band.is-revealed .section-heading__lead { animation: ab-rise 750ms var(--ease-out) 120ms backwards; }
  .home-band.is-revealed :is(.home-value > .wrap > .qualification, .home-note) { animation: ab-fade 800ms ease 520ms backwards; }

  .motion-ready [data-reveal-item]:not(.is-in) :is(.pcard, .ncard, .cta-card, .trio__item, .fit > li, .split__photo, .split__intro > *, .benefits__title, .benefits__sub, .benefits__item, .impact),
  .motion-ready .final[data-reveal-item]:not(.is-in) > * { opacity: 0; }
  .motion-ready [data-reveal-item]:not(.is-in) .split__photo::after { transform: none; }
  /* the photo appears already under its layer, then the layer lifts */
  .is-in .split__photo { animation: ab-fade 250ms ease backwards; }

  .is-in :is(.pcard, .ncard, .cta-card, .trio__item) { animation: ab-rise 750ms var(--ease-out) backwards; animation-delay: calc(120ms + var(--i, 0) * 90ms); }
  .is-in .split__intro > * { animation: ab-rise 750ms var(--ease-out) backwards; animation-delay: calc(160ms + var(--i, 0) * 90ms); }
  .is-in .split__photo::after { animation: ab-layer 1000ms var(--ease-in-out) 120ms backwards; }
  .is-in .split__photo img { animation: ab-settle 1500ms var(--ease-out) 120ms backwards; }
  .is-in :is(.benefits__title, .benefits__sub) { animation: ab-rise 700ms var(--ease-out) 80ms backwards; }
  .is-in .benefits__item { animation: ab-rise 650ms var(--ease-out) backwards; animation-delay: calc(200ms + var(--i, 0) * 60ms); }
  .is-in .impact { animation: ab-rise 800ms var(--ease-out) 180ms backwards; }
  .is-in .impact__title { animation: ab-wipe 800ms var(--ease-in-out) 360ms backwards; }
  .is-in .fit > li { animation: ab-rise 600ms var(--ease-out) backwards; animation-delay: calc(100ms + var(--i, 0) * 80ms); }
  .is-in .fit .hi .o { animation: ab-draw 550ms var(--ease-out) backwards; animation-delay: calc(320ms + var(--i, 0) * 80ms); }
  .final.is-in > * { animation: ab-rise 800ms var(--ease-out) backwards; animation-delay: calc(60ms + var(--i, 0) * 110ms); }
  .final.is-in > .final__title { animation-name: ab-heading; }

  /* ---------- process: the line draws, each step lands as it passes (any page with steps) ---------- */
  .motion-ready .steps[data-draw]::before { transition-duration: 1000ms; transition-timing-function: var(--ease-in-out); }
  .motion-ready .steps[data-draw]:not(.is-drawn) :is(.steps__num, .steps__body) { opacity: 0; }
  .steps.is-drawn .steps__num { animation: ab-pop 600ms var(--ease-out) backwards; animation-delay: calc(100ms + var(--i, 0) * 200ms); }
  .steps.is-drawn .steps__body { animation: ab-rise 650ms var(--ease-out) backwards; animation-delay: calc(200ms + var(--i, 0) * 200ms); }

  /* ---------- hover and press ---------- */
  .pcard, .ncard, .cta-card { transition: transform 300ms var(--ease-out), box-shadow 300ms ease, border-color 300ms ease; }
  .pcard:hover, .ncard:hover, .cta-card:hover { transform: translateY(-4px); }
  /* the icon's orange accent redraws itself; its dots land again */
  :is(.pcard, .ncard, .benefits__item, .trio__item):hover .hi .o { animation: ab-draw 700ms var(--ease-out); }
  :is(.pcard, .ncard, .benefits__item, .trio__item):hover .hi .o--fill { animation: ab-pop 450ms var(--ease-out) backwards; transform-box: fill-box; transform-origin: center; }
  .benefits__item .hi { transition: transform 300ms var(--ease-out); }
  .benefits__item:hover .hi { transform: translateY(-3px); }

  .btn { transition: transform 200ms var(--ease-out), background-color 150ms ease, box-shadow 200ms ease; }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; }

  .link, .site-footer a { transition: text-decoration-color 200ms ease, text-underline-offset 250ms var(--ease-out); }
  .link:hover, .site-footer a:hover { text-underline-offset: 6px; }
  .nav__link::after, .site-header .nav__secondary::after { transition: transform 300ms var(--ease-out); }

  .home-hero__photo, .split__photo img { transition: transform 900ms var(--ease-out); }
  .home-hero__media:hover .home-hero__photo, .split__photo:hover img { transform: scale(1.035); }

  .steps__num { transition: transform 250ms var(--ease-out), box-shadow 200ms ease; }
  .steps__item:hover .steps__num { transform: scale(1.1); }

  /* the phone menu opens into place; the close mark turns in */
  @media (max-width: 1179px) {
    .js .nav[data-open="true"] { animation: ab-menu 260ms var(--ease-out); }
    .nav-toggle[aria-expanded="true"] .nav-toggle__close { animation: ab-turn 260ms var(--ease-out); }
  }
}