/* ==========================================================================
   Horizon Pharmacy Group
   Design tokens, layout and components. Mobile first.
   ========================================================================== */

/* --- Fonts (self-hosted, latin subset) ---------------------------------- */

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-var-latin.woff2") format("woff2-variations"),
       url("../fonts/dm-sans-var-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/dm-serif-display-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/dm-serif-display-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks so the swap does not reflow the page. */
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial");
  ascent-override: 94.3696%;
  descent-override: 29.4905%;
  line-gap-override: 0%;
  size-adjust: 105.1186%;
}

@font-face {
  font-family: "DM Serif Fallback";
  src: local("Times New Roman");
  ascent-override: 96%;
  descent-override: 31%;
  line-gap-override: 0%;
  size-adjust: 105%;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Brand palette — carried over unchanged from the original site. */
  --navy: #0b1a2f;
  --gold: #c8973a;
  --paper: #f4f6f9;

  /* Accent: the same gold, darkened to clear WCAG AA on light surfaces.
     The brand gold stays as-is on navy, where it already reaches 6.6:1. */
  --gold-ink: #886626;

  /* Neutrals */
  --white: #ffffff;
  --ink: var(--navy);
  --ink-muted: #47525f;
  --line: #dfe4ec;
  --navy-tint: #132949;
  --navy-line: rgba(244, 246, 249, 0.16);
  --on-navy: #f4f6f9;
  --on-navy-muted: #b3c0d1;

  /* Type scale — fluid, 1.25 ratio at the top end. */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.89rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.13rem, 1.06rem + 0.32vw, 1.31rem);
  --step-2: clamp(1.3rem, 1.17rem + 0.6vw, 1.65rem);
  --step-3: clamp(1.55rem, 1.32rem + 1.03vw, 2.15rem);
  --step-4: clamp(1.85rem, 1.44rem + 1.83vw, 2.9rem);
  --step-5: clamp(2.2rem, 1.5rem + 3.1vw, 4rem);
  --step-6: clamp(2.5rem, 1.42rem + 4.8vw, 5.25rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 2.5rem);

  --wrap: 1200px;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(11, 26, 47, 0.06), 0 2px 8px rgba(11, 26, 47, 0.05);
  --shadow-md: 0 2px 6px rgba(11, 26, 47, 0.07), 0 10px 28px rgba(11, 26, 47, 0.08);

  --header-h: 68px;
  --callbar-h: 0px;

  --sans: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --serif: "DM Serif Display", "DM Serif Fallback", Georgia, "Times New Roman",
    serif;
}

@media (min-width: 768px) {
  :root {
    --header-h: 80px;
  }
}

/* --- Reset --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl,
dd {
  margin: 0;
}

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

img {
  height: auto;
}

a {
  color: inherit;
}

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

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

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

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--navy);
  color: var(--on-navy);
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section--navy {
  background: var(--navy);
  color: var(--on-navy);
}

.section--paper {
  background: var(--paper);
}

/* Two light (--paper) sections can sit back to back — Strategy then
   Partnership. Since they share a background, the seam needs an explicit
   line or the boundary between them disappears entirely. */
.strategy {
  border-bottom: 1px solid var(--line);
}

.section__head {
  max-width: 42rem;
}

.eyebrow {
  margin: 0 0 var(--sp-4);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  line-height: 1.4;
}

/* Dark surfaces: the brand gold reaches 6.6:1 on navy, so it is used as-is.
   The hero is a dark surface too, even though it does not carry .section--navy. */
.section--navy .eyebrow,
.hero .eyebrow {
  color: var(--gold);
}

.section__title {
  font-size: var(--step-5);
  margin-bottom: var(--sp-5);
}

.section__intro {
  font-size: var(--step-1);
  color: var(--ink-muted);
  line-height: var(--lh-body);
  max-width: 38rem;
}

.section--navy .section__intro,
.hero .section__intro {
  color: var(--on-navy-muted);
}

/* The italic serif accent the original used on key headline words. */
.accent {
  color: var(--gold);
  font-style: italic;
}

.section--paper .accent,
.section--white .accent {
  color: var(--gold-ink);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, transform 0.18s ease;
}

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

.btn:active {
  transform: translateY(0);
}

/* Navy text on gold = 6.6:1 */
.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.btn--gold:hover {
  background: #d8a94f;
  border-color: #d8a94f;
}

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--on-navy);
}

.btn--ghost:hover {
  background: var(--on-navy);
  color: var(--navy);
}

.btn--navy {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
}

.btn--navy:hover {
  background: var(--navy-tint);
  border-color: var(--navy-tint);
}

.btn__arrow {
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.18s ease;
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* --- Header -------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s ease;
}

.header.is-stuck {
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding-block: var(--sp-2);
}

.header__logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  flex: 0 0 auto;
  margin-right: auto;
  border-radius: 4px;
}

.header__logo img {
  width: 150px;
  height: auto;
}

@media (min-width: 768px) {
  .header__logo img {
    width: 186px;
  }
}

.header__nav {
  display: none;
}

@media (min-width: 1024px) {
  .header__nav {
    display: block;
  }
}

.header__nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.header__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-1);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.header__nav a:hover {
  color: var(--gold-ink);
  border-bottom-color: var(--gold);
}

.header__cta {
  display: none;
}

@media (min-width: 1024px) {
  .header__cta {
    display: inline-flex;
  }
}

/* --- Hamburger + drawer --------------------------------------------------- */

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--navy);
}

@media (min-width: 1024px) {
  .hamburger {
    display: none;
  }
}

.hamburger svg {
  width: 22px;
  height: 22px;
}

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 130;
  width: min(88vw, 380px);
  padding: var(--sp-5) var(--sp-5) var(--sp-8);
  background: var(--navy);
  color: var(--on-navy);
  transform: translateX(100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);

  /* Belt and braces: while closed the drawer is `inert` (out of the tab order
     and the accessibility tree) and also visibility:hidden, so browsers that
     lag on `inert` still cannot focus into it. Visibility flips only after the
     slide-out finishes, so the close animation stays visible. */
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}

.drawer:not([inert]) {
  visibility: visible;
  transition: transform 0.28s ease, visibility 0s linear 0s;
}

.drawer[data-open="true"] {
  transform: translateX(0);
}

.drawer__top {
  display: flex;
  justify-content: flex-end;
}

.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  color: var(--on-navy);
  cursor: pointer;
}

.drawer__close svg {
  width: 18px;
  height: 18px;
}

.drawer__nav ul {
  display: flex;
  flex-direction: column;
}

.drawer__nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--navy-line);
  font-size: var(--step-1);
  font-weight: 500;
  text-decoration: none;
  color: var(--on-navy);
}

.drawer__nav a:hover {
  color: var(--gold);
}

.drawer__note h2 {
  font-size: var(--step-2);
  margin-bottom: var(--sp-3);
}

.drawer__note p {
  color: var(--on-navy-muted);
  font-size: var(--step-0);
}

.drawer__note p + p {
  margin-top: var(--sp-3);
}

.drawer .btn {
  width: 100%;
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(11, 26, 47, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.scrim[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

body.is-locked {
  overflow: hidden;
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  /* Same navy as every other dark section, with a decorative motif layered
     on top — recreates the ring/grid background the original site shipped
     (its own asset was a 0-byte file at desktop width and a blurry 640px
     raster at mobile width; this is a crisp SVG recreation instead). */
  background: var(--navy);
  color: var(--on-navy);
  padding-block: clamp(3rem, 1.5rem + 7vw, 6.5rem);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

@media (min-width: 960px) {
  /* On desktop the hero is a single, uninterrupted first screen: content is
     sized to fit within the viewport's actual height rather than the usual
     width-driven fluid scale, so nothing requires scrolling to be seen.
     Below 960px a tall hero is normal, expected mobile behaviour — the
     stacked layout and full content are meant to be scrolled. */
  .hero {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100dvh - var(--header-h));
    padding-block: clamp(1.5rem, 1rem + 3.2vh, 3rem);
    padding-block: clamp(1.5rem, 1rem + 3.2dvh, 3rem);
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/hero-motif.svg");
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: auto 130%;
  opacity: 0.22;
  /* Fades to solid navy toward the text column so contrast never depends
     on viewport width or how much of the motif happens to be visible. */
  -webkit-mask-image: linear-gradient(to right, transparent, transparent 8%, #000 52%);
  mask-image: linear-gradient(to right, transparent, transparent 8%, #000 52%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -60% 40%;
  height: 90%;
  background: radial-gradient(
    ellipse at center,
    rgba(200, 151, 58, 0.13),
    transparent 62%
  );
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-9);
    /* Bottom-align the two columns: the stats card ends flush with the
       buttons row, the last element on the left, instead of both being
       vertically centered against each other. */
    align-items: end;
  }
}

.hero__title {
  font-size: var(--step-6);
  line-height: 1.02;
  margin-bottom: var(--sp-5);
}

@media (min-width: 960px) {
  /* Scaled against viewport height, not width, so the headline shrinks on
     a short desktop window and grows on a tall one — the actual goal
     ("fits within the height of the device") rather than a fixed size. */
  .hero__title {
    font-size: clamp(2.25rem, 1.3rem + 4.4vh, 4.25rem);
    font-size: clamp(2.25rem, 1.3rem + 4.4dvh, 4.25rem);
    margin-bottom: var(--sp-4);
  }
}

.hero__lede {
  font-size: var(--step-1);
  color: var(--on-navy-muted);
  max-width: 34rem;
  margin-bottom: var(--sp-6);
}

@media (min-width: 960px) {
  .hero__lede {
    margin-bottom: var(--sp-5);
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.hero__actions .btn {
  flex: 1 1 auto;
  min-width: 13rem;
}

@media (min-width: 480px) {
  .hero__actions .btn {
    flex: 0 0 auto;
  }
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat {
  background: var(--navy);
  padding: var(--sp-5) var(--sp-4);
}

@media (min-width: 480px) {
  .stat {
    padding: var(--sp-6) var(--sp-5);
  }
}

.stat__value {
  display: block;
  font-family: var(--serif);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--gold);
  margin-bottom: var(--sp-2);
  overflow-wrap: anywhere;
}

.stat__value--live {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* A small solid dot plus an expanding, fading ring behind it — the usual
   "this is updating live" signal. The number itself is plain, unenhanced
   text (site.js swaps it for the server-computed figure and polls for
   changes); nothing here depends on JS to render sensibly, and the dot is
   decorative only, so it carries no independent meaning for
   screen-reader users. */
.live-dot {
  position: relative;
  flex-shrink: 0;
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: var(--gold);
}

.live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gold);
  animation: live-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .live-dot::after {
    animation: none;
    display: none;
  }
}

@keyframes live-ping {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.stat__label {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}

.stat__note {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--on-navy-muted);
}

/* --- Network / pharmacy cards -------------------------------------------- */

.network__head {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

@media (min-width: 900px) {
  .network__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--sp-7);
  }
}

.cards {
  display: grid;
  gap: var(--sp-5);
}

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

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

.pharmacy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pharmacy:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pharmacy__region {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.pharmacy__name {
  font-size: var(--step-2);
}

.pharmacy__desc {
  color: var(--ink-muted);
  font-size: 0.97rem;
  flex: 1 1 auto;
}

.pharmacy__link {
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-wrap: balance;
}

.pharmacy__link:hover {
  color: var(--navy);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.tag {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* --- Why Horizon (intro + sticky-swap reason cards) ------------------------ */

.why__layout {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 960px) {
  .why__layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

.why__intro .section__title {
  margin-bottom: var(--sp-4);
}

@media (min-width: 960px) {
  .why__intro {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
}

/* The last reasoncard has no following sibling to carve out its dwell
   room via the "next card's height" mechanism below, so .why__stack-end
   (a real, empty element after it in the HTML) reserves that room
   explicitly. It has to be an actual sibling, not padding or a ::after on
   .why__stack itself: a sticky element's containing block is bounded by
   its ancestor's padding box in principle, but in practice neither
   padding-bottom nor generated content on that ancestor extends how long
   a sticky child can be held here — only a real trailing box in the flow
   does. Without it, the last card starts releasing before it ever
   finishes arriving at the pinned spot. */
.why__stack-end {
  display: block;
  height: calc((100vh - var(--header-h) - var(--sp-6) * 2) * 0.7);
  height: calc((100dvh - var(--header-h) - var(--sp-6) * 2) * 0.7);
}

/* Six reasons, one at a time, each new one covering the last as you
   scroll — plain position: sticky, no JavaScript.

   Every card shares the same sticky offset and is a direct sibling in the
   same list, so every one of them, once its own natural position has
   scrolled up to that offset, stays pinned there for the rest of the
   list's height rather than releasing individually — normally an easy
   mistake (multiple cards would end up pinned at the same spot at once),
   but here it is what makes the effect work: an ascending z-index per
   card means whichever one reaches the pinned position *last* is the one
   painted on top, so each new card covers the one(s) already sitting
   there as it rises into place. Content stays in normal document order
   throughout, so keyboard and screen-reader navigation see all six
   regardless of which is on top.

   The card is sized to fill most (not all — see the 0.7 factor below) of
   the sticky "stage" below the header. That's what makes the cover read
   as a clean swap rather than two cards briefly sitting stacked in a
   plain list: a short card would leave empty room beneath it for the
   next one to scroll fully into view — readable and unmoving — well
   before it reaches the pinned spot. A tall card leaves little such
   room, so the next card's top edge arrives while it's already close to
   covering the one before it, and what it covers first is the empty
   padding at the card's own bottom, not its content. .why__stack-end
   above uses the same factor so the last card's dwell still matches the
   others. */
.reasoncard {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
  min-height: calc((100vh - var(--header-h) - var(--sp-6) * 2) * 0.7);
  min-height: calc((100dvh - var(--header-h) - var(--sp-6) * 2) * 0.7);
  margin-bottom: var(--sp-6);
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-6);
  background: var(--paper);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.reasoncard:last-child {
  margin-bottom: 0;
}

.reasoncard:nth-child(1) { z-index: 1; }
.reasoncard:nth-child(2) { z-index: 2; }
.reasoncard:nth-child(3) { z-index: 3; }
.reasoncard:nth-child(4) { z-index: 4; }
.reasoncard:nth-child(5) { z-index: 5; }
.reasoncard:nth-child(6) { z-index: 6; }

/* Centered while .why__layout is single-column (mobile/tablet — see the
   media query the layout itself switches on above) so the card reads as
   balanced under the intro text it's stacked below. Once the two-column
   grid kicks in, right-align it instead so it sits flush with the right
   edge of everything else in .wrap, rather than floating centered with
   asymmetric gaps on both sides of a now much wider column. */
@media (min-width: 960px) {
  .reasoncard {
    margin-left: auto;
    margin-right: 0;
  }
}

.reasoncard__num {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-ink);
}

.reasoncard__title {
  font-size: var(--step-3);
  line-height: var(--lh-snug);
  color: var(--navy);
}

.reasoncard__desc {
  color: var(--ink-muted);
  font-size: 1rem;
}

/* --- Expansion strategy --------------------------------------------------- */

.strategy__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 960px) {
  .strategy__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--sp-9);
    align-items: start;
  }
}

/* A self-contained dark card: the section around it is the light --paper
   surface, so .steps carries its own navy background and text colors
   rather than inheriting them from a .section--navy ancestor. */
.steps {
  display: grid;
  gap: 0;
  background: var(--navy);
  color: var(--on-navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: var(--sp-2) var(--sp-5);
  box-shadow: var(--shadow-md);
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  align-items: start;
}

.step + .step {
  border-top: 1px solid var(--navy-line);
}

.step__num {
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.1;
  color: var(--gold);
  min-width: 2ch;
}

.step__text {
  color: var(--on-navy-muted);
  font-size: 1rem;
}

/* --- Partnership pathways ------------------------------------------------- */

.pathways__head {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

@media (min-width: 900px) {
  .pathways__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    align-items: end;
    gap: var(--sp-7);
  }
}

.pathways__note {
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.97rem;
}

@media (min-width: 620px) {
  .cards--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pathway {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.pathway__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--gold);
}

.pathway__icon svg {
  width: 24px;
  height: 24px;
}

.pathway__kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.pathway__title {
  font-size: var(--step-2);
}

.pathway__desc {
  color: var(--ink-muted);
  font-size: 0.97rem;
}

.ticks {
  display: grid;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-2);
}

.ticks li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink);
}

.ticks svg {
  width: 17px;
  height: 17px;
  margin-top: 0.28em;
  color: var(--gold-ink);
  flex: 0 0 auto;
}

/* --- Contact -------------------------------------------------------------- */

.contact__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 960px) {
  .contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-9);
    align-items: start;
  }
}

.factlist {
  margin-top: var(--sp-7);
  border-top: 1px solid var(--navy-line);
}

.fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--navy-line);
}

.fact__icon {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  color: var(--gold);
  margin-top: 0.28em;
}

.fact__term {
  font-family: var(--serif);
  font-size: var(--step-1);
  margin-bottom: var(--sp-1);
}

.fact__desc {
  color: var(--on-navy-muted);
  font-size: 0.97rem;
  line-height: 1.55;
}

/* --- Form ----------------------------------------------------------------- */

.formcard {
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
  background: rgba(244, 246, 249, 0.04);
}

@media (min-width: 560px) {
  .formcard {
    padding: var(--sp-7) var(--sp-6);
  }
}

.formcard__title {
  font-size: var(--step-2);
  margin-bottom: var(--sp-5);
}

.fieldgrid {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 560px) {
  .fieldgrid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--on-navy);
}

.field .req {
  color: var(--gold);
  margin-left: 0.15em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  background: rgba(11, 26, 47, 0.5);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  color: var(--on-navy);
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.55;
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #b3c0d1 50%),
    linear-gradient(135deg, #b3c0d1 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.field select option {
  color: var(--navy);
  background: var(--white);
}

.field ::placeholder {
  color: #8a99ad;
  opacity: 1;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 151, 58, 0.25);
  outline: none;
}

.field__error {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #ffb4b4;
  min-height: 0;
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: #ff8f8f;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.form__foot .btn {
  min-width: 12rem;
}

.form__status {
  flex: 1 1 14rem;
  font-size: 0.94rem;
  line-height: 1.5;
  margin: 0;
}

.form__status[data-tone="ok"] {
  color: #8fe0b4;
}

.form__status[data-tone="error"] {
  color: #ffb4b4;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn[aria-busy="true"] {
  opacity: 0.72;
  pointer-events: none;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  background: var(--navy);
  color: var(--on-navy);
  border-top: 1px solid var(--navy-line);
  padding-block: var(--sp-8) var(--sp-6);
}

.footer__top {
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--navy-line);
}

@media (min-width: 820px) {
  .footer__top {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-8);
  }
}

.footer__logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
  border-radius: 4px;
}

.footer__logo img {
  width: 190px;
  height: auto;
}

.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
}

@media (min-width: 820px) {
  .footer__nav ul {
    justify-content: flex-end;
  }
}

.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-navy);
}

.footer__nav a:hover {
  color: var(--gold);
}

.footer__legal {
  margin-top: var(--sp-5);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--on-navy-muted);
}

.footer__legal a {
  color: var(--on-navy-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__legal a:hover {
  color: var(--gold);
}

/* --- Sticky mobile action bar --------------------------------------------- */

.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--navy-line);
  border-top: 1px solid var(--navy-line);
  transform: translateY(100%);
  transition: transform 0.28s ease;
  padding-bottom: env(safe-area-inset-bottom);
}

.actionbar[data-visible="true"] {
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .actionbar {
    display: none;
  }
}

.actionbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--navy);
  color: var(--on-navy);
  /* Small enough that both labels stay on one line at 360px. */
  font-size: clamp(0.72rem, 0.6rem + 0.5vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.25;
}

.actionbar a.is-primary {
  background: var(--gold);
  color: var(--navy);
}

.actionbar svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

body.has-actionbar {
  padding-bottom: 0;
}

@media (max-width: 1023px) {
  body.has-actionbar .footer {
    padding-bottom: calc(var(--sp-8) + 56px);
  }
}

/* --- Scroll reveal -------------------------------------------------------- */

/* Opacity is not transitioned: it switches instantly between 0 and 1 on
   ".is-in". A tween through intermediate opacity values blends the text
   color toward the background, and for gold-on-paper text (~4.88:1 at rest,
   against a 4.5:1 minimum) that drop crosses below the WCAG threshold for
   virtually the whole 550ms fade, not just a fleeting frame - axe-core
   catches it if it samples mid-transition. Only `transform` animates. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: transform 0.55s ease;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* If JS never runs, content must still be visible — the failure mode the
   original export shipped with. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

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

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}