/* Novavance / Radix site styles. Tokens live in tokens.css. */

/* ---------------------------------------------------------------- Fonts */
/* critical: inlined by partials/head.php, keep under 8KB with tokens */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallbacks, so the swap to the web fonts moves nothing.
   Values computed from the font files against Arial (tools/perf notes in
   BUILD_STATUS.md). */
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial");
  size-adjust: 110.34%;
  ascent-override: 89.18%;
  descent-override: 26.46%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.42%;
  ascent-override: 90.18%;
  descent-override: 22.45%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- Base */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--nv-ink);
  background: var(--nv-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

p,
ul,
ol,
figure {
  margin: 0;
}

p {
  max-width: 68ch;
}

/* Headings balance; running text avoids leaving one word on its last line
   where the browser supports it. */
p,
li,
summary,
figcaption {
  text-wrap: pretty;
}

a {
  color: inherit;
}

:where(ul[class], ol[class]) {
  padding: 0;
  list-style: none;
}

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

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--nv-navy);
  outline-offset: 2px;
}

.on-navy :focus-visible {
  outline-color: var(--nv-white);
}

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

.skip-link {
  position: absolute;
  z-index: 100;
  top: var(--space-s);
  left: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-pill);
  background: var(--nv-navy);
  color: var(--nv-white);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

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

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container--text {
  max-width: var(--container-text);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--nv-teal-dark);
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.button--primary {
  background: var(--nv-teal);
  color: var(--nv-navy);
}

.button--primary:hover {
  background: var(--nv-teal-hover);
}

.button--secondary {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.button__arrow {
  display: inline-block;
  line-height: 1;
  transition: transform var(--t-fast);
}

/* --------------------------------------------------------------- Icons */

.icon {
  flex: none;
  width: 24px;
  height: 24px;
}



/* /critical */

/* ------------------------------------------- Layout, buttons, icons: rest */

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

.section--light {
  background: var(--nv-light);
}

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

.section__header {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
}

.section__header--center {
  justify-items: center;
  text-align: center;
}

.section__header p {
  color: var(--nv-ink-muted);
}

.on-navy .section__header p,
.section--navy .section__header p {
  color: var(--nv-on-navy-muted);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-m);
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--nv-ink-muted);
}

.on-navy .eyebrow {
  color: var(--nv-teal);
}

.button--secondary:hover {
  background: rgba(11, 23, 40, 0.05);
}

.on-navy .button--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}

.button:hover .button__arrow--right {
  transform: translateX(4px);
}

.button:hover .button__arrow--down {
  transform: translateY(3px);
}

.icon-disc {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--nv-teal-wash);
  color: var(--nv-teal-dark);
}

.on-navy .icon-disc {
  background: rgba(18, 198, 179, 0.12);
  color: var(--nv-teal);
}

/* --------------------------------------------------------------- Cards */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--nv-line);
  border-radius: var(--radius);
  background: var(--nv-white);
  transition: border-color var(--t-fast);
}

.card__media {
  aspect-ratio: 16 / 10;
  background: var(--nv-navy-2);
}

.card__media picture,
.card__media img,
.card__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding: var(--space-m);
  flex: 1;
}

.card__number {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--nv-teal-dark);
}

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

.card__text {
  font-size: var(--fs-small);
  color: var(--nv-ink-muted);
}

.card--link:hover,
.card--link:focus-within {
  border-color: var(--nv-teal-line);
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  margin-top: auto;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--nv-teal-dark);
  text-decoration: none;
}

.card__more .icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--t-fast);
}

.card--link:hover .card__more .icon {
  transform: translateX(4px);
}

/* Whole card is the link target; the visible link keeps its own focus ring. */
.card__more::after {
  content: "";
  position: absolute;
  inset: 0;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nv-white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}

.site-header.is-stuck {
  border-bottom-color: var(--nv-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

.site-header__brand {
  display: block;
  flex: none;
  border-radius: 8px;
}

.site-header__brand img {
  width: 132px;
  height: 44px;
}

.site-header__menu-link,
.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-xs);
  border: 1px solid var(--nv-line);
  border-radius: var(--radius-pill);
  background: var(--nv-white);
  font-weight: 600;
  text-decoration: none;
}

.site-header__toggle[hidden],
.site-header__menu-link[hidden] {
  display: none;
}

.site-header__toggle-close,
.site-header__toggle[aria-expanded="true"] .site-header__toggle-open {
  display: none;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-close {
  display: block;
}

/* Navigation: full-screen panel below 1024px. */

.site-nav {
  display: none;
}

.site-nav.is-open {
  position: fixed;
  z-index: -1;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding: calc(var(--header-h) + var(--space-m)) var(--gutter) var(--space-xl);
  overflow-y: auto;
  background: var(--nv-white);
}

.site-nav__list {
  display: grid;
  gap: var(--space-3xs);
}

.site-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 48px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
}

.site-nav__link[aria-current="page"]::after,
.site-nav__item.is-current-section > .site-nav__row > .site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--nv-teal-dark);
}

.site-nav__sub-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.site-nav__sub-toggle .icon {
  transition: transform var(--t-fast);
}

.site-nav__sub-toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.site-nav__sub {
  display: none;
  padding: 0 0 var(--space-xs) var(--space-s);
  border-left: 1px solid var(--nv-line);
  margin-left: var(--space-3xs);
}

.site-nav__item.is-open > .site-nav__sub {
  display: grid;
}

.site-nav__sub-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-xs);
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
}

.site-nav__sub-link[aria-current="page"] {
  color: var(--nv-teal-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.site-nav__cta {
  align-self: flex-start;
}

html.nav-open,
html.nav-open body {
  overflow: hidden;
}

@media (min-width: 1024px) {
  .site-header__menu-link,
  .site-header__toggle {
    display: none;
  }

  .site-nav,
  .site-nav.is-open {
    position: static;
    z-index: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-l);
    padding: 0;
    overflow: visible;
    background: none;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.6vw, 1.75rem);
  }

  .site-nav__item--has-sub {
    position: relative;
  }

  .site-nav__row {
    gap: 0;
  }

  .site-nav__link {
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  .site-nav__link[aria-current="page"]::after,
  .site-nav__item.is-current-section > .site-nav__row > .site-nav__link::after {
    bottom: 4px;
  }

  .site-nav__sub-toggle {
    width: 44px;
    height: 44px;
    border-radius: 6px;
  }

  .site-nav__sub-toggle .icon {
    width: 18px;
    height: 18px;
  }

  .site-nav__sub {
    position: absolute;
    top: calc(100% + 6px);
    left: calc(-1 * var(--space-s));
    min-width: 15rem;
    padding: var(--space-2xs);
    margin: 0;
    border: 1px solid var(--nv-line);
    border-radius: var(--radius);
    background: var(--nv-white);
    box-shadow: 0 12px 32px rgba(11, 23, 40, 0.1);
  }

  /* An invisible bridge keeps the menu open while the pointer crosses the gap. */
  .site-nav__sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 8px;
  }

  .site-nav__sub-link:hover {
    background: var(--nv-light);
  }

  .site-nav__item--has-sub.is-open > .site-nav__sub,
  html:not(.js) .site-nav__item--has-sub:focus-within > .site-nav__sub {
    display: grid;
  }

  .site-nav__cta {
    align-self: auto;
    padding: 0.7rem 1.35rem;
    white-space: nowrap;
  }
}

/* Below 1200px the full spacing left too little room: "How It Works" and
   the button wrapped onto two lines up to about 1080px. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-nav {
    gap: var(--space-s);
  }

  .site-nav__list {
    gap: var(--space-xs);
  }

  .site-nav__cta {
    padding-inline: 1rem;
  }
}

@media (min-width: 1024px) and (hover: hover) {
  .site-nav__item--has-sub:hover > .site-nav__sub {
    display: grid;
  }
}

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

.site-footer {
  background: var(--nv-navy);
  color: var(--nv-on-navy);
  padding-block: var(--space-2xl) var(--space-l);
}

.site-footer ul {
  padding: 0;
  list-style: none;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer__top {
  display: grid;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--nv-line-dark);
}

.site-footer__logo {
  display: inline-block;
  margin-bottom: var(--space-m);
  border-radius: 8px;
}

.site-footer__logo img {
  width: 132px;
  height: 44px;
}

.site-footer__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.site-footer__tagline {
  color: var(--nv-on-navy-muted);
}

.site-footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 0 var(--space-xl);
}

.site-footer__nav a,
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.site-footer__nav a[aria-current="page"],
.site-footer__legal a[aria-current="page"] {
  color: var(--nv-teal);
}

.site-footer__bottom {
  display: grid;
  gap: var(--space-m);
  padding-top: var(--space-l);
  font-size: var(--fs-small);
  color: var(--nv-on-navy-muted);
}

.site-footer__company {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-l);
  max-width: none;
}

.site-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-l);
}

.site-footer__legal a {
  color: var(--nv-on-navy-muted);
}

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .site-footer__nav ul {
    grid-template-columns: repeat(3, max-content);
  }

  .site-footer__bottom {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* ------------------------------------------------------------ CTA band */

/* Where two navy blocks meet, a hairline keeps them apart. */
.section--navy + .cta-band,
.cta-band + .site-footer,
main:has(> .final-cta:last-child) + .site-footer,
main:has(> .cta-band:last-child) + .site-footer {
  border-top: 1px solid var(--nv-line-dark);
}

/* Two lines and a button: a lighter band than a full section. */
.cta-band {
  background: var(--nv-navy);
  color: var(--nv-on-navy);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

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

.cta-band__copy {
  display: grid;
  gap: var(--space-s);
}

.cta-band__copy p {
  color: var(--nv-on-navy-muted);
}

.cta-band__action {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

.cta-band__note {
  font-size: var(--fs-small);
  color: var(--nv-on-navy-muted);
}

@media (min-width: 1024px) {
  .cta-band__inner {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-2xl);
  }
}

/* ------------------------------------------------------ Card variants */

.card-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.card-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* Three cards on a two-column tablet grid would leave one card alone, so
   between 640 and 1023px they stack as horizontal cards instead. */
@media (min-width: 640px) and (max-width: 1023px) {
  .card-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .card-grid--3 > .card,
  .card-grid--3 > .panel-card {
    flex-direction: row;
  }

  .card-grid--3 .card__media,
  .card-grid--3 .panel-card__media {
    flex: 0 0 44%;
    aspect-ratio: auto;
    min-height: 13rem;
  }

  .card-grid--3 .card__body,
  .card-grid--3 .panel-card__body {
    align-content: center;
  }
}

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

  .card-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.card__media--placeholder {
  background: var(--nv-navy-2);
}

.card__body--raised {
  padding-top: var(--space-l);
}

.icon-disc--raised {
  position: absolute;
  top: calc(-24px - var(--space-l) + var(--space-m));
  background: var(--nv-teal-wash-solid);
  box-shadow: 0 0 0 4px var(--nv-white);
}

.card__body--raised {
  position: relative;
}

.card--link .card__title {
  margin-top: var(--space-2xs);
}

/* Title, text, link: the text row takes the spare height, so every Learn More
   sits on the card's bottom edge and the links line up across a row. (The
   raised icon is absolutely positioned and takes no row.) */
.card--link .card__body {
  grid-template-rows: auto 1fr auto;
}

/* Dark-panel card: image on top, navy-2 panel beneath, one rounded container. */
.panel-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--nv-navy-2);
  color: var(--nv-on-navy);
}

.panel-card__media {
  aspect-ratio: 16 / 10;
  background: var(--nv-navy);
}

.panel-card__media picture,
.panel-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-card__body {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding: var(--space-m);
  flex: 1;
}

.panel-card__title {
  font-size: var(--fs-h3);
  color: var(--nv-on-navy);
}

.panel-card__text {
  font-size: var(--fs-small);
  color: var(--nv-on-navy);
}

/* ---------------------------------------------------------------- Hero */
/* critical: inlined by partials/head.php, keep under 8KB with tokens */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--nv-light);
}

.hero__media {
  aspect-ratio: 16 / 10;
}

.hero__media picture,
.hero__img {
  width: 100%;
  height: 100%;
}

.hero__img {
  object-fit: cover;
  object-position: 88% 62%;
}

.hero__inner {
  padding-block: var(--space-m) var(--space-2xl);
}

.hero__copy {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

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

/* Balanced, so a two-line wrap never leaves one word on its own line. From
   1024px the line breaks after "who carry": the first line then runs about two
   thirds of the headline's width, in Inter and its fallback alike. */
.hero__lede {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--nv-ink);
  text-wrap: balance;
}

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

/* A step larger than other eyebrows, and a deeper teal: from 900px it runs
   over the hero photo's pale left edge, where --nv-teal-dark falls below
   4.5:1. */
.hero .eyebrow {
  font-size: 0.875rem;
  color: var(--nv-teal-deep);
}

/* Between about 349 and 367px the line fits in Inter but not in the
   fallback face, so it would rewrap on font swap and shift the hero. Up to
   369px it always breaks before "verification", in either face; from 370px
   both faces fit it on one line. */
@media (max-width: 369px) {
  .hero .eyebrow {
    max-width: 18rem;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-2xs);
}

/* From 900px the image fills the right 72% of the hero and its empty left
   area (#F6F8FA at the edge, the same tone as --nv-light) runs under the
   copy. At 72% wide and 40vw high the image is never cropped horizontally,
   so no seam shows, and the vehicles begin at about 50vw, just right of the
   48% copy column, at every width from 900px up. */
@media (min-width: 900px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: clamp(22rem, 40vw, 48rem);
  }

  .hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 72%;
    aspect-ratio: auto;
  }

  .hero__img {
    object-position: right center;
  }

  .hero__inner {
    position: relative;
    padding-block: var(--space-xl);
  }

  .hero__copy {
    width: 48%;
    max-width: none;
    margin: 0;
    justify-items: start;
    text-align: left;
    container-type: inline-size;
  }

  /* Two lines, as the copy deck specifies, inside the mockup's copy column. */
  .hero__title {
    font-size: clamp(2.25rem, 9.2cqi, var(--fs-hero));
  }

  .hero__line {
    display: block;
  }

  .hero__actions {
    justify-content: flex-start;
  }
}


/* /critical */
/* ------------------------------------------------------------- Problem */

.problem__header {
  display: grid;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
}

/* The approved stat as a navy panel: the start of the sentence as a small
   label, the figure at display size, the rest of the sentence beneath it. It
   is one sentence in the markup, so it reads as one aloud. */
.stat {
  display: grid;
  justify-items: start;
  gap: var(--space-2xs);
  max-width: 32rem;   /* compact on tablets; the grid column is narrower from 900px */
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 80% 70% at 85% 15%, rgba(18, 198, 179, 0.16), transparent 65%),
    var(--nv-navy);
  color: var(--nv-on-navy);
}

.stat__lead {
  max-width: 26ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--nv-on-navy-muted);
}

.stat__figure {
  margin: var(--space-3xs) 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--nv-teal);
}

.stat__rest {
  max-width: 28ch;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.problem__point {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--nv-ink-muted);
}

/* From 900px: heading and the line under the stat on the left, the stat
   panel on the right, so the header uses the section's full width. */
@media (min-width: 900px) {
  .problem__header {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-2xl);
    align-items: center;
  }

  .problem__header h2 {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .problem__point {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .stat {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* From 1024px, the narrowest width where it fits in Inter and its fallback,
   "Vehicle data is everywhere." keeps to one line. */
@media (min-width: 1024px) {
  .problem__title-line {
    display: block;
  }
}

.problem .card__number {
  margin-top: var(--space-2xs);
}

/* --------------------------------------------------------- Radix intro */

.radix-intro {
  position: relative;
  overflow: hidden;
}

/* The supplied photo fades to --nv-light on its left edge (sampled at
   #F2F7FB), so it sits flush in the section with no visible seam. */
.radix-intro__art {
  margin: calc(-1 * var(--section-pad)) 0 var(--space-l);
}

.radix-intro__art img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 30% 50%;
}

.radix-intro__copy {
  display: grid;
  gap: var(--space-m);
}

.radix-intro__diagram {
  margin-top: var(--space-m);
}

@media (min-width: 1024px) {
  /* Full height on the right; anchored left so the faded edge always shows
     and any crop falls on the skyline at the right. */
  .radix-intro__art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56%;
    margin: 0;
    /* Feather the faded edge fully into the section: no seam. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16%);
    mask-image: linear-gradient(to right, transparent, #000 16%);
  }

  .radix-intro__art picture,
  .radix-intro__art img {
    width: 100%;
    height: 100%;
  }

  .radix-intro__art img {
    aspect-ratio: auto;
    object-position: left center;
  }

  .radix-intro__copy {
    position: relative;
    width: 44%;
  }
}

/* Sections that hold one row of cards or one statement: less padding than
   a full section, so the page does not open up around them. */
.section--compact {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* ----------------------------------------------------------- Lifecycle */

.lifecycle__closing {
  max-width: none;
  margin-top: var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

/* The roof band sits on the section's bottom edge, as in the mockup. Its
   source is 527px wide, so it is capped at 800px, and its sides are
   feathered because the waves run to the image edge. */
.lifecycle {
  padding-bottom: 0;
}

.lifecycle__band {
  max-width: 50rem;
  margin: var(--space-xl) auto 0;
  /* Sides and top feathered into the white section; the bottom meets the
     navy band below. */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, transparent, #000 45%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, transparent, #000 45%);
  mask-composite: intersect;
}

.lifecycle__band img {
  width: 100%;
  height: auto;
}

/* ----------------------------------------------------------- Final CTA */

.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--nv-navy);
  color: var(--nv-on-navy);
}

/* The supplied van, cut out of its studio ground by tools/build_photos.py so
   it stands on the navy. */
.final-cta__media {
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter) var(--section-pad);
}

.final-cta__media img {
  width: min(330px, 64vw);
  height: auto;
}

.final-cta__inner {
  padding-block: var(--section-pad);
}

.final-cta__copy {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
}

.final-cta__copy p {
  color: var(--nv-on-navy-muted);
}

@media (max-width: 899px) {
  .final-cta {
    display: flex;
    flex-direction: column-reverse;
  }
}

@media (min-width: 900px) {
  .final-cta__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 45%;
    align-items: center;
    padding: 0;
  }

  /* At least as tall as the van (330px wide at 642 x 750) plus a margin, so
     the van is never cropped. Below 1280px the copy alone made the section
     shorter than the van, which lost its roof and wheels. */
  .final-cta__inner {
    display: flex;
    align-items: center;
    min-height: calc(330px * 750 / 642 + 2 * var(--space-m));
  }

  .final-cta__copy {
    position: relative;
    width: 50%;
  }
}

/* ------------------------------------------------------------ Diagrams */

.flow3,
.timeline,
.signals,
.pflow,
.pviews-figure {
  margin: 0;
}

.flow-node {
  --node: 72px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--node);
  height: var(--node);
  border: 1.5px solid rgba(11, 23, 40, 0.15);
  border-radius: 50%;
  background: var(--nv-white);
  color: var(--nv-ink);
}

.flow-node .icon {
  width: 28px;
  height: 28px;
}

.flow-node--active {
  border-color: var(--nv-teal);
  background: var(--nv-teal);
  color: var(--nv-navy);
}

.flow-node--large {
  --node: 88px;
}

.flow-node--large .icon {
  width: 34px;
  height: 34px;
}

.on-navy .flow-node {
  border-color: var(--nv-line-dark);
  background: transparent;
  color: var(--nv-on-navy);
}

.on-navy .flow-node--active {
  border-color: var(--nv-teal);
  background: var(--nv-teal);
  color: var(--nv-navy);
}

/* Chevron used as a connector head: a bordered square turned 45 degrees. */
.flow3__step:not(:last-child)::after,
.timeline__step:not(:last-child)::before,
.signals__arrow::after,
.pflow__centre::before,
.pflow__centre::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--nv-teal-dark);
  border-bottom: 1.5px solid var(--nv-teal-dark);
}

/* Diagram 1: three-step flow. Vertical below 480px. */

.flow3__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow3__step {
  position: relative;
  display: grid;
  grid-template-rows: 88px auto;
  justify-items: center;
  align-items: center;
  gap: var(--space-2xs);
  text-align: center;
}

.flow3__step--active .flow-node {
  --node: 88px;
}

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

.flow3__step--active .flow3__label {
  font-weight: 600;
  color: var(--nv-teal-dark);
}

.flow3__step:not(:last-child)::after {
  left: 50%;
  bottom: calc(-1 * var(--space-l) / 2 - 2px);
  transform: translateX(-50%) rotate(45deg);
}

@media (min-width: 480px) {
  .flow3__list {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2xl);
  }

  .flow3__step {
    min-width: 5.5rem;
  }

  .flow3__step:not(:last-child)::after {
    top: 39px;
    right: calc(-1 * var(--space-2xl) / 2 - 3px);
    bottom: auto;
    left: auto;
    transform: rotate(-45deg);
  }
}

/* Diagram 2: lifecycle timeline. Vertical below 900px. */

.timeline__list {
  --node: 56px;
  --row-gap: 2.25rem;
  display: grid;
  gap: var(--row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.timeline__node {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--node);
  height: var(--node);
  border: 1.5px solid rgba(11, 23, 40, 0.15);
  border-radius: 50%;
  background: var(--nv-white);
  color: var(--nv-ink);
}

.timeline__label {
  font-weight: 500;
}

/* Connector line (after) and its head (before). */
.timeline__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: calc(var(--node) / 2 - 0.75px);
  width: 1.5px;
  height: calc(var(--row-gap) - 8px);
  background: var(--nv-border-ui);
  transform-origin: top;
  transition: transform 128ms linear;
}

.timeline__step:not(:last-child)::before {
  top: calc(100% + var(--row-gap) - 14px);
  left: calc(var(--node) / 2 - 5px);
  border-color: var(--nv-border-ui);
  transform: rotate(45deg);
  transition: opacity 100ms linear;
}

/* Connectors draw in once, in order, over 900ms, when the section reveals. */
.reveal:not(.is-visible) .timeline__step::after {
  transform: scaleY(0);
}

.reveal:not(.is-visible) .timeline__step::before {
  opacity: 0;
}

.timeline__step:nth-child(2)::after { transition-delay: 128ms; }
.timeline__step:nth-child(3)::after { transition-delay: 256ms; }
.timeline__step:nth-child(4)::after { transition-delay: 384ms; }
.timeline__step:nth-child(5)::after { transition-delay: 512ms; }
.timeline__step:nth-child(6)::after { transition-delay: 640ms; }
.timeline__step:nth-child(7)::after { transition-delay: 768ms; }
.timeline__step:nth-child(1)::before { transition-delay: 100ms; }
.timeline__step:nth-child(2)::before { transition-delay: 228ms; }
.timeline__step:nth-child(3)::before { transition-delay: 356ms; }
.timeline__step:nth-child(4)::before { transition-delay: 484ms; }
.timeline__step:nth-child(5)::before { transition-delay: 612ms; }
.timeline__step:nth-child(6)::before { transition-delay: 740ms; }
.timeline__step:nth-child(7)::before { transition-delay: 868ms; }

@media (min-width: 900px) {
  .timeline__list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
  }

  .timeline__step {
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
  }

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

  .timeline__step:not(:last-child)::after {
    top: calc(var(--node) / 2 - 0.75px);
    left: calc(50% + var(--node) / 2 + 8px);
    width: calc(100% - var(--node) - 16px);
    height: 1.5px;
    transform-origin: left;
  }

  .timeline__step:not(:last-child)::before {
    top: calc(var(--node) / 2 - 5px);
    left: calc(150% - var(--node) / 2 - 18px);
    transform: rotate(-45deg);
  }

  .reveal:not(.is-visible) .timeline__step::after {
    transform: scaleX(0);
  }
}

/* Centred variant (homepage lifecycle): below 900px each step stacks its
   icon and label on the middle of the screen, with the arrow to the next
   step on the same centre line, under the centred closing line. */
@media (max-width: 899px) {
  .timeline--center .timeline__step {
    flex-direction: column;
    gap: var(--space-2xs);
    text-align: center;
  }

  .timeline--center .timeline__step:not(:last-child)::after {
    left: calc(50% - 0.75px);
  }

  .timeline--center .timeline__step:not(:last-child)::before {
    left: calc(50% - 5px);
  }
}

/* Cycle variant (EV-as-a-Service): a return line from the last stage back to
   the first closes the loop. Horizontal: a bracket under the row. Vertical:
   a bracket down the left of the column. */
.timeline--cycle .timeline__list {
  position: relative;
  padding-left: var(--space-l);
}

.timeline--cycle .timeline__list::before {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2);
  bottom: calc(var(--node) / 2);
  left: 0;
  width: calc(var(--space-l) - 8px);
  border: 1.5px solid var(--nv-border-ui);
  border-right: 0;
  border-radius: 12px 0 0 12px;
}

.timeline--cycle .timeline__list::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 5px);
  left: calc(var(--space-l) - 16px);
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--nv-border-ui);
  border-bottom: 1.5px solid var(--nv-border-ui);
  transform: rotate(-45deg);
}

@media (min-width: 900px) {
  .timeline--cycle .timeline__list {
    padding-left: 0;
    padding-bottom: var(--space-xl);
  }

  .timeline--cycle .timeline__list::before {
    top: auto;
    bottom: 0;
    left: calc(100% / 12);
    right: calc(100% / 12);
    width: auto;
    height: var(--space-l);
    border: 1.5px solid var(--nv-border-ui);
    border-top: 0;
    border-radius: 0 0 12px 12px;
  }

  .timeline--cycle .timeline__list::after {
    top: auto;
    bottom: calc(var(--space-l) + 2px);
    left: calc(100% / 12 - 5.75px);
    transform: rotate(-135deg);
  }
}

/* Diagram 3: signals to record. Vertical at every width. */

.signals {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
  text-align: center;
}

.signals__tier {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
}

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

.signals__label--active {
  font-weight: 600;
  color: var(--nv-teal-dark);
}

.signals__arrow {
  position: relative;
  width: 1.5px;
  height: 2.25rem;
  background: var(--nv-border-ui);
}

.signals__arrow::after {
  bottom: 0;
  left: -4.25px;
  border-color: var(--nv-border-ui);
  transform: rotate(45deg);
}

.signals__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  max-width: 44rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signals__chips li {
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--nv-line);
  border-radius: var(--radius-pill);
  background: var(--nv-white);
  font-size: var(--fs-small);
  font-weight: 500;
}

/* Diagram 1, platform variant: three columns on navy from 900px. */

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

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

.pflow__centre {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-s);
  text-align: center;
}

.pflow__list {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pflow__list li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: var(--space-2xs) var(--space-s);
  border: 1px solid var(--nv-line-dark);
  border-radius: var(--radius);
  color: var(--nv-on-navy);
}

.pflow__list .icon {
  color: var(--nv-teal);
}

.pflow__desc {
  font-weight: 500;
  color: var(--nv-on-navy);
}

/* On navy the connector heads are teal at 60%. Vertical: pointing down. */
.pflow__centre::before,
.pflow__centre::after {
  left: 50%;
  border-color: rgba(18, 198, 179, 0.6);
  transform: translateX(-50%) rotate(45deg);
}

.pflow__centre::before {
  top: calc(-1 * var(--space-2xl) / 2 - 7px);
}

.pflow__centre::after {
  bottom: calc(-1 * var(--space-2xl) / 2 - 3px);
}

@media (min-width: 900px) {
  .pflow {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, auto) minmax(0, 1fr);
    align-items: center;
  }

  .pflow__centre::before,
  .pflow__centre::after {
    top: 50%;
    bottom: auto;
    left: auto;
    transform: translateY(-50%) rotate(-45deg);
  }

  .pflow__centre::before {
    left: calc(-1 * var(--space-2xl) / 2 - 7px);
  }

  .pflow__centre::after {
    right: calc(-1 * var(--space-2xl) / 2 - 3px);
  }
}

/* Diagram 4: permissioned views, one SVG. Its smallest label is 17 units in
   a 400-unit viewBox, so it stays at 12px or larger down to 288px wide. */

.pviews {
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline: auto;
}

/* --------------------------------------------------------- Inner pages */

.page-hero {
  background: var(--nv-light);
  padding-block: clamp(2.5rem, 5.5vw, 4.5rem);
  overflow: hidden;
}

.page-hero__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.page-hero__copy {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
  max-width: var(--container-text);
}

.page-hero__media img {
  width: 100%;
  border-radius: var(--radius);
}

@media (min-width: 1024px) {
  .page-hero--media .page-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  /* The band art keeps its subject on the right third; crop to it. */
  .page-hero--media .page-hero__media img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 90% 50%;
  }

  /* Supplied photos are already cropped to 4:3 around their subject. */
  .page-hero--media .page-hero__media--photo img {
    object-position: 50% 50%;
  }
}

/* Short display-size lines: deck statements that close a section. */
.statement {
  max-width: none;
  margin-top: var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

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

.statement--navy {
  color: var(--nv-on-navy);
}

/* Platform: three foundations as ruled columns rather than cards. */
.principles {
  display: grid;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.principles__item {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding-top: var(--space-m);
  border-top: 1px solid var(--nv-line);
}

.principles__number {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--nv-teal-dark);
}

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

.principles__tagline {
  font-weight: 600;
}

.principles__text {
  color: var(--nv-ink-muted);
}

@media (min-width: 900px) {
  .principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-l);
  }
}

/* Two columns: copy and a figure. */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.split__copy {
  display: grid;
  gap: var(--space-m);
}

.split__note {
  max-width: 30rem;
  margin: var(--space-m) auto 0;
  font-weight: 500;
  text-align: center;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-2xl);
  }
}

/* Platform: what Radix is not, on navy, beside two coupled chain links
   (telematics and Radix). */
.not-section {
  position: relative;
  overflow: hidden;
}

.not-section__art {
  width: 100%;
  max-width: 26rem;
}

.not-section__art svg {
  display: block;
  width: 100%;
  height: auto;
}

.not-section__inner {
  position: relative;
  display: grid;
  gap: var(--space-xl);
}

.not-list {
  display: grid;
  gap: var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.not-list__item {
  display: grid;
  gap: var(--space-2xs);
  padding-left: var(--space-m);
  border-left: 2px solid var(--nv-teal);
}

.not-list__title {
  font-size: var(--fs-h3);
  color: var(--nv-on-navy);
}

.not-list__item p {
  color: var(--nv-on-navy-muted);
}

.not-section .statement {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .not-section__inner {
    grid-template-columns: minmax(0, 38rem) minmax(0, 1fr);
    column-gap: var(--space-2xl);
  }

  .not-section__inner > * {
    grid-column: 1;
  }

  .not-section__inner > .not-section__art {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: center;
    max-width: 34rem;
  }

  /* The closing statement is two lines; in the left column alone its second
     line wrapped and left "trustworthy." by itself. */
  .not-section__inner > .statement {
    grid-column: 1 / -1;
  }
}

/* How It Works: the six steps, a numbered sequence with a rail. */
.steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps__item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-s);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--nv-line);
}

.steps__item:first-child {
  padding-top: 0;
}

.steps__number {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--nv-teal-dark);
}

.steps__body {
  display: grid;
  gap: var(--space-xs);
}

.steps__title {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--fs-h3);
}

.steps__title .icon-disc {
  width: 40px;
  height: 40px;
}

.steps__text {
  color: var(--nv-ink-muted);
}

@media (min-width: 640px) {
  .steps__item {
    grid-template-columns: 6rem minmax(0, 1fr);
  }

  .steps__number {
    font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  }
}

/* Solutions: applications as a ruled list, not cards. */
.app-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--nv-line);
}

.app-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--nv-line);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.app-list__item .icon {
  color: var(--nv-teal-dark);
}

@media (min-width: 768px) {
  .app-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }
}

.solution__copy {
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}

/* A term picked out in solution copy (IFRS 9 on Finance): ink, not muted. */
.solution__term {
  color: var(--nv-ink);
}

/* A paragraph followed by another keeps them together as one block. */
.solution__copy:not(:last-of-type) {
  margin-bottom: var(--space-s);
}

/* Applications page cards: icon, title, one line. */
.app-card .card__body {
  gap: var(--space-s);
  padding: var(--space-l);
}

/* About: the four values, two either side of a Radix core from 900px, with
   a connector from each card into the core. Below 900px the core sits above
   the cards. */
.values {
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(18, 198, 179, 0.1), transparent 70%),
    var(--nv-navy);
}

.values__map {
  display: grid;
  justify-items: center;
  gap: var(--space-2xl);
}

.values__core {
  display: grid;
  justify-items: center;
  gap: var(--space-l);
}

.values__disc {
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: var(--nv-teal);
  color: var(--nv-navy);
  box-shadow:
    0 0 0 12px rgba(18, 198, 179, 0.14),
    0 0 0 26px rgba(18, 198, 179, 0.06),
    0 0 56px 12px rgba(18, 198, 179, 0.22);
}

.values__disc .icon {
  width: 2.5rem;
  height: 2.5rem;
}

.values__name {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--nv-on-navy);
}

.values__links {
  display: none;
}

.values__list {
  display: grid;
  gap: var(--space-m);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.values__item {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-xs);
  text-align: center;
  padding: var(--space-l);
  border: 1px solid var(--nv-line-dark);
  border-radius: var(--radius);
  background: var(--nv-navy-2);
}

.values__title {
  font-size: var(--fs-h3);
  color: var(--nv-on-navy);
}

.values__text {
  font-size: var(--fs-small);
  color: var(--nv-on-navy-muted);
}

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

@media (min-width: 900px) {
  .values__map {
    position: relative;
    display: block;
  }

  /* Equal rows with no row gap (the cards' own margins space them), so each
     card's centre sits at exactly a quarter and three quarters of the height,
     where the connectors start. */
  .values__list {
    grid-template-columns: minmax(0, 1fr) 18rem minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: 0;
  }

  .values__item {
    margin-block: var(--space-s);
  }

  .values__item:nth-child(-n+2) {
    grid-column: 1;
  }

  .values__item:nth-child(n+3) {
    grid-column: 3;
  }

  .values__item:nth-child(odd) {
    grid-row: 1;
  }

  .values__item:nth-child(even) {
    grid-row: 2;
  }

  .values__item::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--nv-teal);
    box-shadow: 0 0 0 4px rgba(18, 198, 179, 0.18);
  }

  .values__item:nth-child(-n+2)::after {
    right: -5px;
  }

  .values__item:nth-child(n+3)::after {
    left: -5px;
  }

  .values__links {
    display: block;
    position: absolute;
    top: 0;
    left: calc(50% - 9rem);
    width: 18rem;
    height: 100%;
    fill: none;
    stroke: var(--nv-teal);
    stroke-opacity: 0.5;
    stroke-width: 1.5;
  }

  .values__links path {
    vector-effect: non-scaling-stroke;
  }

  /* The disc is centred exactly on the connectors' meeting point; the name
     hangs below it. */
  .values__core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: block;
    transform: translate(-50%, -50%);
  }

  .values__name {
    position: absolute;
    top: calc(100% + var(--space-l));
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
  }
}

.page-hero--band {
  padding-bottom: 0;
}

/* Full-bleed artwork band closing a page hero; same ground, so no edge. */
.art-band {
  height: clamp(8rem, 16vw, 15rem);
  margin-top: clamp(2rem, 5vw, 4rem);
}

.art-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% 50%;
}

.roadmap {
  --marker: 14px;
  display: grid;
  gap: var(--space-xl);
  margin: 0;
  padding: 0 0 0 var(--space-l);
  list-style: none;
  border-left: 1.5px solid var(--nv-border-ui);
}

.roadmap__item {
  position: relative;
  display: grid;
  gap: var(--space-2xs);
}

.roadmap__marker {
  position: absolute;
  top: 2px;
  left: calc(-1 * var(--space-l) - var(--marker) / 2 - 0.75px);
  width: var(--marker);
  height: var(--marker);
  border: 1.5px solid var(--nv-border-ui);
  border-radius: 50%;
  background: var(--nv-white);
}

.roadmap__item--current .roadmap__marker {
  border-color: var(--nv-teal);
  background: var(--nv-teal);
}

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

.roadmap__text {
  color: var(--nv-ink-muted);
}

@media (min-width: 900px) {
  .roadmap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-l);
    padding: var(--space-l) 0 0;
    border-left: 0;
    border-top: 1.5px solid var(--nv-border-ui);
  }

  .roadmap__marker {
    top: calc(-1 * var(--space-l) - var(--marker) / 2 - 0.75px);
    left: 0;
  }
}

.company {
  margin-top: 0;
  max-width: 34ch;
}

/* ----------------------------------------------------------------- FAQ */

/* Homepage questions, as <details>: each opens and closes without
   JavaScript. Compact rows, two independent columns from 900px; the plus in
   a small circle turns to a minus on a filled disc when open. */
.faq {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.faq__intro {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-l);
}

/* One line on desktop: at the 68ch measure the sentence had about 4px to
   spare, so a slightly wider rendering dropped "it." onto a second line.
   The link never breaks, so on narrow screens it wraps as a whole. */
.faq__intro p {
  max-width: none;
  color: var(--nv-on-navy-muted);
}

.faq__intro .text-link {
  white-space: nowrap;
}

.faq__columns {
  display: grid;
}

.faq__list {
  align-self: start;
  border-top: 1px solid var(--nv-line-dark);
}

/* Stacked, the second column carries straight on from the first. */
.faq__list + .faq__list {
  border-top: 0;
}

.faq__item {
  border-bottom: 1px solid var(--nv-line-dark);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 44px;
  padding-block: 0.875rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--nv-on-navy);
  transition: color var(--t-fast);
}

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

.faq__question:hover {
  color: var(--nv-teal);
}

.faq__toggle {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 1.5px solid var(--nv-teal);
  border-radius: 50%;
  transition: background-color var(--t-fast);
}

.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.625rem;
  height: 1.5px;
  margin: -0.75px 0 0 -0.3125rem;
  border-radius: 1px;
  background: var(--nv-teal);
  transition: transform 200ms var(--ease-out), background-color var(--t-fast);
}

.faq__toggle::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__toggle {
  background: var(--nv-teal);
}

.faq__item[open] .faq__toggle::before,
.faq__item[open] .faq__toggle::after {
  background: var(--nv-navy);
}

.faq__item[open] .faq__toggle::after {
  transform: rotate(0deg);
}

.faq__answer {
  display: grid;
  gap: var(--space-2xs);
  padding: 0 2.5rem var(--space-s) 0;
  font-size: var(--fs-small);
  color: var(--nv-on-navy-muted);
}

/* A link on its own line under an answer: a full 44px target. */
.faq__answer .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0;
}

.faq__item[open] .faq__answer {
  animation: faq-open 240ms var(--ease-out);
}

@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* The FAQ and the final CTA are both navy; a rule separates them. */
.faq + .final-cta {
  border-top: 1px solid var(--nv-line-dark);
}

@media (min-width: 900px) {
  .faq__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }

  .faq__list + .faq__list {
    border-top: 1px solid var(--nv-line-dark);
  }
}

/* -------------------------------------------------------------- Research */

/* Sources grouped by what they show: the group's point on the left from
   1024px, its sources as a ruled list on the right. */
.research {
  display: grid;
  gap: var(--space-xl);
}

.research__group {
  display: grid;
  gap: var(--space-m);
}

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

.research__heading {
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
}

.research__intro {
  color: var(--nv-ink-muted);
}

.research__list {
  border-top: 1px solid var(--nv-line);
}

.research__item {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--nv-line);
}

.research__title {
  font-size: var(--fs-h3);
  line-height: 1.3;
}

/* Vertical padding on the inline link enlarges the hit area to 44px without
   moving the title's lines. */
.research__title a {
  padding-block: 0.75rem;
  text-decoration-color: var(--nv-teal-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

.research__title a:hover {
  color: var(--nv-teal-dark);
  text-decoration-color: currentColor;
}

.research__title .icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.375rem;
  vertical-align: -0.0625em;
  color: var(--nv-teal-dark);
}

.research__source {
  font-size: var(--fs-small);
  color: var(--nv-ink-muted);
}

.research__type {
  display: inline-block;
  margin-left: var(--space-3xs);
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--nv-teal-line);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nv-teal-dark);
}

.research__shows {
  max-width: 66ch;
}

.research__note {
  font-size: var(--fs-small);
  color: var(--nv-ink-muted);
}

@media (min-width: 1024px) {
  .research__group {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-2xl);
  }

  .research__head {
    padding-top: var(--space-m);
  }
}

/* ------------------------------------------------ Contact: two ways in */

/* Continues the page hero's ground. The demonstration path (nothing needed
   from the visitor) is kept visibly apart from the pilot (their own
   vehicles), so one is not mistaken for the other. */
.page-hero:has(+ .start) {
  padding-bottom: var(--space-xl);
}

.start {
  padding-block: 0 clamp(3rem, 6vw, 5rem);
  background: var(--nv-light);
}

.start__title {
  margin-bottom: var(--space-l);
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
}

.start__paths {
  display: grid;
  gap: var(--space-m);
}

.start__path {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: start;
  gap: var(--space-xs);
  padding: var(--space-l);
  border: 1px solid var(--nv-line);
  border-radius: var(--radius);
  background: var(--nv-white);
}

.start__path--demo {
  border-top: 3px solid var(--nv-teal);
}

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

.start__text {
  color: var(--nv-ink-muted);
}

.start__note {
  font-weight: 600;
}

/* The action sits on the card's bottom edge, level across both cards. */
.start__action {
  align-self: end;
  margin-top: var(--space-xs);
}

.start__details {
  display: grid;
  gap: var(--space-s);
  margin: var(--space-2xs) 0 0;
  padding-top: var(--space-s);
  border-top: 1px solid var(--nv-line);
}

.start__detail dt {
  font-family: var(--font-display);
  font-weight: 500;
}

.start__detail dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--nv-ink-muted);
}

@media (min-width: 900px) {
  .start__paths {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.contact-reply {
  margin-top: calc(-1 * var(--space-s));
  font-size: var(--fs-small);
  color: var(--nv-ink-muted);
}

/* Status pages (thank-you, 404, legal). */
.page-hero--status {
  padding-block: clamp(4rem, 10vw, 8rem);
}

.placeholder-note {
  padding: var(--space-l);
  border: 1px solid var(--nv-line);
  border-left: 3px solid var(--nv-teal-dark);
  border-radius: var(--radius);
  background: var(--nv-white);
}

/* Legal notices (POPIA): running text with short sections. */
.legal {
  display: grid;
  gap: var(--space-xl);
}

.legal section {
  display: grid;
  gap: var(--space-s);
  max-width: var(--container-text);
}

.legal h2 {
  font-size: var(--fs-h3);
  font-weight: 600;
}

.legal ul {
  display: grid;
  gap: var(--space-2xs);
  padding-left: 1.25rem;
}

.legal li {
  max-width: 66ch;
}

.legal li::marker {
  color: var(--nv-teal-dark);
}

/* Long email addresses wrap rather than widen the page at 320px. */
.legal a {
  overflow-wrap: anywhere;
}

.legal strong {
  font-weight: 600;
}

.legal__updated {
  font-size: var(--fs-small);
  color: var(--nv-ink-muted);
}

.placeholder-note a,
.contact-email a,
.text-link {
  color: var(--nv-teal-dark);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Links inside sentences: vertical padding on an inline box enlarges the
   hit area to 44px without moving the text around it. */
.placeholder-note a,
.text-link {
  padding-block: 0.75rem;
}

.on-navy .text-link {
  color: var(--nv-teal);
}

/* A phone number never breaks across lines. */
a[href^="tel:"] {
  white-space: nowrap;
}

.form__check--consent a {
  padding-block: 0.875rem;
}

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

.contact-email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
}

.contact-email .icon {
  color: var(--nv-teal-dark);
}

.contact-email a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.form {
  display: grid;
  gap: var(--space-l);
}

.form__note {
  font-size: var(--fs-small);
  color: var(--nv-ink-muted);
}

.form__row {
  display: grid;
  gap: var(--space-l);
}

.form__field {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
}

.form__label {
  font-size: 0.9375rem;
  font-weight: 600;
}

.form__group {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form__group legend {
  margin-bottom: var(--space-xs);
  padding: 0;
}

.form__input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--nv-border-ui);
  border-radius: 10px;
  background: var(--nv-white);
  font-size: 1rem;
  line-height: 1.4;
}

.form__input:hover {
  border-color: var(--nv-ink-muted);
}

.form__input:focus-visible {
  border-color: var(--nv-navy);
}

.form__textarea {
  min-height: 9rem;
  resize: vertical;
}

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

.form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--nv-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

.form__check:hover {
  border-color: var(--nv-border-ui);
}

.form__check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--nv-teal-dark);
}

.form__check:has(input:checked) {
  border-color: var(--nv-teal-dark);
  background: var(--nv-teal-wash-solid);
}

.form__check--consent {
  padding: 0;
  border: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
}

.form__check--consent:has(input:checked) {
  background: none;
}

.form__input[aria-invalid="true"],
.form__group[aria-invalid="true"] .form__check,
.form__check input[aria-invalid="true"] {
  border-color: var(--nv-error);
}

.form__input[aria-invalid="true"] {
  border-width: 2px;
}

.form__error {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--nv-error);
}

.form__error::before {
  content: "Error: ";
}

.form-errors {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-m);
  border: 2px solid var(--nv-error);
  border-radius: var(--radius);
  background: var(--nv-error-wash);
}

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

.form-errors__title {
  font-size: var(--fs-h3);
}

.form-errors__list {
  display: grid;
  gap: var(--space-3xs);
  padding-left: 1.25rem;
  list-style: disc;
}

.form-errors__list a {
  font-weight: 600;
  color: var(--nv-error);
}

/* Spam trap: off screen, not display:none, so bots still see it. */
.form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit {
  justify-self: start;
}

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

  .form__checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------- Motion */

.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

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