/* ==========================================================================
   WHEELLATOR – Homepage V1 "Clear and confident"
   Fonts: Archivo (headings, UI) + Public Sans (body)
   ========================================================================== */

/* === Base / tokens === */
:root {
  --blue: #006db8;
  --blue-dark: #00578f;
  --navy: #1c4571;
  --navy-deep: #0f2540;
  --teal: #1e7683;
  --teal-tint: #a9dde5;
  --pale: #f2fcfe;
  --heading: #0f2540;
  --text: #313131;
  --muted: #5b6470;
  --line: #d8e4ec;
  --line-blue: #bcd6e6;
  --orange: #e2601e;
  --orange-light: #ff9a5c;
  --focus: #c2410c;
  --focus-on-dark: #ffb27a;

  --font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  --max: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);
  --radius: 6px;
  --radius-lg: 20px;
  --header-h: 68px;
  --pill-h: 2.75rem;
}
}
@media (min-width: 1024px) {
  :root { --header-h: 106px; }
}
@media (min-width: 1280px) {
  :root { --header-h: 76px; }
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
svg { flex-shrink: 0; }

h1, h2, h3 {
  margin: 0 0 0.75em;
  font-family: var(--font-head);
  color: var(--heading);
  line-height: 1.12;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem);
  font-weight: 700;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

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

a { color: var(--blue); text-underline-offset: 0.18em; }
a:hover { color: var(--blue-dark); }

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

main:focus { outline: none; }

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

.section { padding-block: var(--section-y); }
.section--pale { background: var(--pale); }
.section--navy { background: var(--navy); color: #fff; }
.section--blue { background: var(--blue); color: #fff; }
.section--navy h2, .section--navy h3,
.section--blue h2, .section--blue h3 { color: #fff; }

/* Dark surfaces use a light focus ring */
.hero, .section--navy, .section--blue, .footer,
.consult__panel--consult, .quote--feature { --focus: var(--focus-on-dark); }

.lead {
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.6;
}

/* Eyebrow: the one place the product orange shows up as a rule */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow--light { color: var(--teal-tint); }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1.125rem;
  background: var(--navy-deep);
  color: #fff;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: #fff; --focus: var(--focus-on-dark); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.375rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: 1.0625rem; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); color: #fff; }
.btn--light { background: #fff; color: var(--navy-deep); }
.btn--light:hover { background: var(--pale); color: var(--navy-deep); }
.btn--outline-light { border-color: rgba(255, 255, 255, 0.85); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--navy-deep); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
}
.link-arrow svg { transition: transform 0.2s ease; }
.link-arrow:hover svg { transform: translateX(3px); }
.link-arrow--light,
.link-arrow--light:hover { color: #fff; }

.icon { vertical-align: -3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* === Header / navigation === */
/* Mobile first: logo and menu toggle; the menu panel holds
   the main nav plus the CTA.
   1024–1279px: CTA row sits above the nav row. From 1280px: one row. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--header-h);
  padding-block: 0.5rem;
}
.header__logo { display: block; margin-right: auto; padding-block: 0.25rem; }
.header__logo img { width: auto; height: 32px; }

.nav__list { margin: 0; padding: 0; list-style: none; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.nav__link:hover { color: var(--blue); }
.nav__link[aria-current="page"] {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}
.chev { transition: transform 0.2s ease; }
.subnav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Parent menu item shows as current when one of its pages is open */
.has-sub:has(.subnav [aria-current="page"]) > .subnav-toggle { color: var(--blue); }
.subnav a[aria-current="page"] { color: var(--blue); font-weight: 600; background: var(--pale); }

.subnav { margin: 0; padding: 0; list-style: none; display: none; }
.has-sub.is-open > .subnav { display: block; }
html:not(.js) .has-sub:focus-within > .subnav,
html:not(.js) .has-sub:hover > .subnav { display: block; }

.subnav a {
  display: block;
  padding: 0.625rem 0.875rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
}
.subnav a:hover { background: var(--pale); color: var(--blue); }

/* Utility group: header CTA */
.header__utility { display: flex; align-items: center; }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading);
  background: #fff;
  border: 1px solid var(--line-blue);
  border-radius: 999px;
  cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline; }
html:not(.js) .nav-toggle { display: none; }

/* Mobile / tablet navigation */
@media (max-width: 1023px) {
  .header__menu { width: 100%; padding-bottom: 1rem; }
  .js .header__menu {
    display: none;
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 0.5rem var(--gutter) 1.75rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(15, 37, 64, 0.35);
  }
  .js .header__menu.is-open { display: block; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0.9rem 0;
    font-size: 1.0625rem;
    text-align: left;
  }
  .subnav { padding: 0 0 0.75rem 1rem; }
  .subnav a { padding: 0.625rem 0.75rem; }

  .header__utility { padding-top: 1.25rem; }
  .header__cta { width: 100%; }
}

@media (max-width: 379px) {
  .header__logo img { height: 28px; }
  .nav-toggle { padding-inline: 0.75rem; }
}

/* Desktop navigation */
@media (min-width: 1024px) {
  .header__inner {
    flex-wrap: nowrap;
    gap: 2rem;
    padding-block: 0.625rem;
  }
  .header__logo img { height: 38px; }
  .nav-toggle { display: none; }

  /* Utility row on top, main nav below */
  .header__menu {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 0.25rem;
    min-width: 0;
  }
  .header__cta { min-height: 40px; padding: 0.5rem 1.125rem; font-size: 0.9375rem; }

  .nav__list { display: flex; align-items: center; gap: 0.125rem; }
  .has-sub { position: relative; z-index: 2; }
  .nav__link { min-height: 44px; padding-inline: 0.6rem; font-size: 0.9375rem; }
  .nav__item:last-child .nav__link { padding-right: 0; }
  .subnav {
    position: absolute;
    top: calc(100% + 0.625rem);
    left: 0;
    min-width: 16rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--blue);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 20px 40px -20px rgba(15, 37, 64, 0.35);
  }
  /* hover bridge so the menu does not close between button and panel */
  .subnav::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(-0.625rem - 3px);
    height: 0.625rem;
  }
  .has-sub:hover > .subnav { display: block; }

}

/* Wide desktop: logo, nav and CTA in one row */
@media (min-width: 1280px) {
  .header__menu { flex-direction: row; align-items: center; gap: 1.5rem; }
}

@media (min-width: 1024px) and (max-width: 1159px) {
  .header__inner { gap: 1.25rem; }
  .header__logo img { height: 32px; }
  .nav__link { padding-inline: 0.45rem; }
}

/* Floating quick links: call pill + language pill hanging under the
   header, right edge. Part of the sticky header, so they travel with it
   while scrolling. White fill so they read on the dark hero and on light
   sections. Mobile: the call pill shows its icon only. */
.header__float {
  position: absolute;
  z-index: 1;
  top: calc(100% + 1rem);
  right: max(var(--gutter), calc((100% - var(--max)) / 2));
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pill {
  display: flex;
  align-items: center;
  height: var(--pill-h);
  background: #fff;
  border: 1px solid var(--line-blue);
  border-radius: 999px;
  box-shadow: 0 8px 20px -12px rgba(9, 24, 42, 0.5);
}
.pill--call {
  gap: 0.5rem;
  padding-inline: 1.125rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy-deep);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.pill--call svg { color: var(--blue); }
.pill--call:hover { color: var(--blue); border-color: var(--blue); }

@media (max-width: 599px) {
  .pill--call { justify-content: center; width: var(--pill-h); padding: 0; }
  .pill__text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.lang__list {
  margin: 0;
  padding: 0 0.375rem;
  list-style: none;
}
.lang__list li { display: flex; align-items: center; }
.lang__list li + li::before {
  content: "";
  width: 1px;
  height: 1.25rem;
  background: var(--line-blue);
}
.lang__link {
  display: flex;
  align-items: center;
  height: calc(var(--pill-h) - 8px);
  padding-inline: 0.875rem;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-decoration: none;
  border-radius: 999px;
}
.lang__link:hover { color: var(--blue); }
.lang__link[aria-current="true"] { color: var(--blue); font-weight: 800; }

/* === Hero === */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(600px, calc(100svh - var(--header-h)), 900px);
  overflow: hidden;
  color: #fff;
  background: var(--navy-deep);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 75%;
}

/* Hero video: muted caption-free loop from the WHEELLATOR film.
   The poster frame shows until it plays, without JS and under reduced motion. */
.hero__slides { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.hero__video { object-position: 50% 50%; background: var(--navy-deep); }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(9, 24, 42, 0.62) 0%,
      rgba(9, 24, 42, 0.58) 55%,
      rgba(9, 24, 42, 0.16) 82%,
      rgba(9, 24, 42, 0.26) 100%);
}
.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4rem);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 14px rgba(9, 24, 42, 0.45);
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.hero__title { margin: 0 0 1.25rem; color: #fff; }
.hero__brand {
  display: block;
  font-size: clamp(2.5rem, 1.2rem + 5.6vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
.hero__brand sup {
  font-size: 0.32em;
  font-weight: 600;
  vertical-align: top;
  position: relative;
  top: 0.35em;
  margin-left: 0.08em;
}
.hero__claim {
  display: block;
  max-width: 15ch;
  margin-top: 0.75rem;
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero__lead {
  max-width: 28ch;
  margin: 0;
  padding-left: 1rem;
  font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: #fff;
  border-left: 3px solid rgba(255, 255, 255, 0.85);
  text-wrap: balance;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
  text-shadow: none;
}

.hero__facts {
  background: var(--navy-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__facts-list {
  display: grid;
  margin-block: 0;
  padding: 0;
  list-style: none;
}
.hero__fact {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-block: 1.25rem;
}
.hero__fact + .hero__fact { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.hero__fact-lead {
  font-family: var(--font-head);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}
.hero__fact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  text-decoration: none;
}
.hero__fact-link svg { transition: transform 0.2s ease; }
.hero__fact-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.hero__fact-link:hover svg { transform: translateX(3px); }
.hero__fact-text {
  max-width: 34ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #c9d6e3;
}

@media (min-width: 768px) {
  .hero__facts-list { grid-template-columns: repeat(3, 1fr); }
  .hero__fact { padding: 1.75rem 2rem 2rem; }
  .hero__fact:first-child { padding-left: 0; }
  .hero__fact:last-child { padding-right: 0; }
  .hero__fact + .hero__fact { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.14); }
}

@media (min-width: 1100px) {
  .hero__inner { justify-content: center; }
  .hero__scrim {
    background:
      linear-gradient(90deg,
        rgba(9, 24, 42, 0.62) 0%,
        rgba(9, 24, 42, 0.55) 32%,
        rgba(9, 24, 42, 0.26) 48%,
        rgba(9, 24, 42, 0.04) 66%,
        rgba(9, 24, 42, 0) 100%),
      linear-gradient(0deg, rgba(9, 24, 42, 0.22) 0%, rgba(9, 24, 42, 0) 30%);
  }
}

/* === Shared section patterns (display headings, split heads, reveal) === */
.display {
  font-size: clamp(2.125rem, 1.35rem + 3.1vw, 3.625rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.split-head {
  display: grid;
  gap: 1.25rem 4rem;
  margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
}
.split-head .display { margin: 0; }
.split-head .lead { margin: 0 0 1rem; color: var(--muted); }
.split-head--light .lead { color: #c9d6e3; }
@media (min-width: 900px) {
  .split-head { grid-template-columns: 1.1fr 1fr; align-items: end; }
}

/* Scroll reveal: v1.js adds .reveal-ready to <html> (not under reduced
   motion), so content is always visible without JS */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* === Mobility (who it is for) === */
/* Square photo left; conditions set as large flowing lists on the right */
.mobility__grid { display: grid; gap: 2.5rem; align-items: center; }
.mobility__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 45% 50%;
  border-radius: var(--radius-lg);
}
.mobility__lists { display: grid; gap: 2rem; }
.cond { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.cond:first-child { padding-top: 0; border-top: 0; }
.cond__title {
  margin: 0 0 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
/* Conditions as soft chips: names never break mid-item, one calm colour
   (blue is reserved for links), easy to scan for older readers */
.cond__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cond__list li {
  padding: 0.625rem 1.125rem;
  font-family: var(--font-head);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--heading);
  background: var(--pale);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.cond:nth-child(2) .cond__list li { background: #fff; border-color: var(--line-blue); }

.cond__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding-top: 1.25rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

@media (min-width: 960px) {
  .mobility__grid { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 5vw, 5.5rem); }
}

/* === Dependent on a mobility aid (bento) === */
.bento { display: grid; gap: 1rem; }
.bento__feature {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-lg);
}
.bento__feature img { width: 100%; flex: 1; object-fit: contain; padding: 1.5rem 1.5rem 0; }
.bento__feature figcaption { padding: 1.25rem 1.75rem 1.75rem; }
.bento__title {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.bento__ways {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.way {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  background: #fff;
  border-radius: var(--radius-lg);
}
.way__title {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--heading);
}
.way__text { font-size: 1rem; line-height: 1.55; color: var(--muted); }
.way:first-child { background: var(--blue); }
.way:first-child .way__title { color: #fff; }
.way:first-child .way__text { color: #e3effa; }

@media (min-width: 640px) {
  .bento__ways { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: 1.15fr 1fr; }
}

/* === Try before you buy / Free consultation === */
.consult__grid { display: grid; gap: 1rem; }
.consult__panel {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 22rem;
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  border-radius: var(--radius-lg);
}
.consult__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; max-width: 26rem; }
.consult__body h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); letter-spacing: -0.025em; margin-bottom: 0.5em; }
.consult__body p:not(.eyebrow) { margin-bottom: 2rem; }
.consult__body .btn { margin-top: auto; }
.consult__panel--try { background: var(--pale); border: 1px solid var(--line); }
.consult__product {
  position: absolute;
  right: -8%;
  bottom: -6%;
  width: min(48%, 300px);
  height: auto;
}
.consult__panel--consult { background: var(--navy-deep); color: #c9d6e3; }
.consult__panel--consult h2 { color: #fff; }
.consult__panel--consult .btn { --focus: var(--focus-on-dark); }

@media (max-width: 559px) {
  .consult__panel--try { padding-bottom: 14rem; }
  .consult__product { right: 50%; transform: translateX(50%); width: 200px; bottom: -1.5rem; }
}
@media (min-width: 560px) {
  .consult__panel--try .consult__body { max-width: 58%; }
  .consult__product { width: min(40%, 300px); }
}
@media (min-width: 900px) {
  .consult__grid { grid-template-columns: 1.25fr 1fr; }
}

/* === Video === */
.video__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  --focus: var(--focus-on-dark);
}
.video__thumb img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 40%;
  transition: transform 0.6s ease;
}
.video__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(9, 24, 42, 0.55) 0%, rgba(9, 24, 42, 0) 45%);
}
.video__thumb:hover img { transform: scale(1.03); }
.video__play {
  position: absolute;
  z-index: 1;
  left: clamp(1rem, 0.5rem + 2vw, 2rem);
  bottom: clamp(1rem, 0.5rem + 2vw, 2rem);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy-deep);
  background: #fff;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.video__play svg { color: var(--blue); }
.video__thumb:hover .video__play { background: var(--blue); color: #fff; }
.video__thumb:hover .video__play svg { color: #fff; }

@media (max-width: 639px) {
  .video__thumb img { aspect-ratio: 16 / 10; }
}

/* === Innovation + teasers === */
/* Head: centred product-launch style intro above a wide product "stage" */
.innovation__head {
  max-width: 68rem;
  margin: 0 auto clamp(2.5rem, 2rem + 2vw, 3.5rem);
  text-align: center;
}
.innovation__kicker {
  display: block;
  margin-bottom: 1rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--teal);
}
.innovation__head .display { max-width: 24ch; margin: 0 auto 1.5rem; text-wrap: balance; }
.innovation__text { max-width: 54rem; margin-inline: auto; }
.innovation__text .lead { margin-bottom: 0.75rem; color: var(--heading); }
.innovation__text p:not(.lead) { margin-bottom: 2rem; color: var(--muted); }

.innovation__stage {
  margin: 0 0 clamp(3.5rem, 3rem + 3vw, 6rem);
  padding: clamp(1.5rem, 1rem + 3vw, 4rem) clamp(1rem, 0.5rem + 3vw, 4rem) clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  background: var(--pale);
  border-radius: var(--radius-lg);
}
.innovation__stage img {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  mix-blend-mode: multiply;
}
.innovation__colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1000px;
  margin: 0.5rem auto 0;
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.innovation__colors span { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.swatch { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.swatch--green { background: #4caf3a; }
.swatch--black { background: #1d1d1f; }
.swatch--orange { background: #e8601c; }

.teasers { display: grid; gap: 2.5rem 1.5rem; }
.teaser { position: relative; display: flex; flex-direction: column; }
.teaser__media {
  overflow: hidden;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--pale);
}
.teaser__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.teaser__media--product { background: var(--pale); }
.teaser__media--product img { object-fit: contain; object-position: 50% 70%; padding: 0.5rem; }
.teaser:hover .teaser__media img { transform: scale(1.04); }
.teaser__title { margin: 0 0 0.5rem; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.4375rem); letter-spacing: -0.015em; }
.teaser__link { color: var(--heading); text-decoration: none; }
.teaser__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.teaser__link:hover { color: var(--blue); }
.teaser__link:focus-visible { outline: none; }
.teaser:focus-within { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--radius-lg); }
.teaser p { margin: 0 0 1rem; font-size: 1rem; color: var(--muted); }
.teaser__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--blue);
}
.teaser__more svg { transition: transform 0.2s ease; }
.teaser:hover .teaser__more svg { transform: translateX(4px); }
@media (min-width: 768px) {
  .teasers { grid-template-columns: repeat(3, 1fr); }
}

/* === Testimonials === */
/* One featured quote as a wide navy band, the other four in a
   horizontal row with previous/next buttons (no autoplay) */
.testimonials { padding-bottom: clamp(3rem, 2.5rem + 2vw, 4rem); }
.testimonials .split-head .lead { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); }

.feature-quote {
  display: grid;
  gap: 1.5rem 4rem;
  margin: 0 0 clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  color: #dbe6f0;
  background: var(--navy-deep);
  border-radius: var(--radius-lg);
}
.feature-quote__mark {
  display: block;
  height: 0.55em;
  font-family: var(--font-head);
  font-size: 5.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--teal-tint);
}
.feature-quote__title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}
.feature-quote__by {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--teal-tint);
}
.feature-quote__body { margin: 0; align-self: center; }
.feature-quote__body p {
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.7;
}
@media (min-width: 960px) {
  .feature-quote { grid-template-columns: 1fr 1.15fr; }
}

.voices__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.voices__label {
  margin: 0;
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.voices__nav { display: flex; gap: 0.5rem; }
.voices__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--heading);
  background: #fff;
  border: 1px solid var(--line-blue);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.voices__btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.voices__btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.voices__btn[aria-disabled="true"]:hover { background: #fff; border-color: var(--line-blue); color: var(--heading); }
html:not(.js) .voices__nav { display: none; }

.voices__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
}
.voices__track::-webkit-scrollbar { display: none; }
.voices__track:focus-visible { outline-offset: 4px; }
.voices__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  align-items: start;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.voice { scroll-snap-align: start; }
.quote {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  background: #fff;
  border-radius: var(--radius-lg);
}
.quote__title {
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.quote__body { margin: 0 0 1.25rem; }
.quote__body p { margin: 0; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.65; color: var(--text); }
.quote__by {
  margin: 0;
  padding-top: 1rem;
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--teal);
  border-top: 1px solid var(--line);
}
/* Carousel widths: one card plus a peek on phones, about two and a
   half on desktop so the next quote is always hinted */
@media (min-width: 720px) {
  .voices__list { grid-auto-columns: 62%; }
}
@media (min-width: 1100px) {
  .voices__list { grid-auto-columns: calc((100% - 2rem) / 2.35); gap: 1.25rem; }
}

/* === Press (Also known from) === */
/* Sits right after the testimonials and continues their pale background,
   so the quotes and the press logos read as one block of proof */
.press {
  padding-block: 0 clamp(4rem, 3rem + 4vw, 6.5rem);
  background: var(--pale);
}
.press__inner { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--line-blue); }
.press__inner { display: grid; gap: 1.25rem 3rem; align-items: center; }
.press__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.press__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}
.press__logos img {
  width: 100%;
  max-width: 150px;
  margin-inline: auto;
  filter: grayscale(1);
  opacity: 0.75;
  mix-blend-mode: multiply;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.press__logos a { display: block; border-radius: 6px; }
.press__logos a:hover img,
.press__logos a:focus-visible img { filter: none; opacity: 1; }
@media (min-width: 900px) {
  .press__inner { grid-template-columns: auto 1fr; }
  .press__logos { grid-template-columns: repeat(6, 1fr); }
}

/* === Contact (questions, consultation, brochure, fall prevention) === */
/* Full-width band: fixed meadow photo under a flat dark-blue overlay,
   intro + phone on the left, three action rows on the right */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  color: #e3effa;
  /* Fixed image: the photo stays put while the band scrolls over it.
     Touch devices fall back to normal scrolling (fixed is unreliable there). */
  background: #08284a url("../img/field-wheels.webp") center 55% / cover no-repeat fixed;
  --focus: var(--focus-on-dark);
}
@media (hover: none), (max-width: 1023px) {
  .contact { background-attachment: scroll; }
}
.contact__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8, 40, 74, 0.8);
}
.contact__body {
  display: grid;
  gap: 2.5rem 5rem;
}
.contact__intro .display { color: #fff; font-size: clamp(2rem, 1.4rem + 2vw, 2.875rem); margin-bottom: 0.875rem; }
.contact__intro .lead { color: #e3effa; }
.contact__phone { display: flex; flex-direction: column; gap: 0.25rem; margin: 1.25rem 0 1.25rem; }
.contact__phone-label { font-size: 0.9375rem; }
.contact__phone a {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}
.contact__phone a:hover { text-decoration: underline; text-decoration-thickness: 2px; color: #fff; }

.contact__actions {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.action {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.375rem 1.5rem;
  align-items: center;
  padding: 1.125rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.action__title { grid-column: 1; margin: 0; font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem); letter-spacing: -0.015em; color: #fff; }
.action__link { color: #fff; text-decoration: none; }
.action__link::after { content: ""; position: absolute; inset: 0; }
.action__link:focus-visible { outline: none; }
.action:focus-within { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.action__text { grid-column: 1; margin: 0; font-size: 0.9375rem; line-height: 1.5; color: #e3effa; }
.action svg {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #fff;
  transition: transform 0.2s ease, color 0.2s ease;
}
.action:hover .action__link { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.action:hover svg { transform: translateX(5px); color: #fff; }

@media (min-width: 960px) {
  .contact__body { grid-template-columns: 1fr 1.1fr; align-items: center; }
}

/* === Footer === */
.footer {
  padding-top: clamp(3.5rem, 3rem + 2vw, 5rem);
  background: var(--navy-deep);
  color: #c9d6e3;
  font-size: 1rem;
  --focus: var(--focus-on-dark);
}
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 0.2em; color: #fff; }

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem 3rem;
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.footer__logo { display: inline-block; margin-bottom: 1rem; }
.footer__logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }
.footer__tagline {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
.footer__call { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; }
.footer__call-label { font-size: 0.9375rem; }
.footer__call a {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.footer__grid {
  display: grid;
  gap: 2.5rem 2rem;
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.footer__title {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-tint);
}
.footer__address { font-style: normal; line-height: 1.8; }
.footer__address strong { color: #fff; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list li { padding-block: 0.3rem; }
.social { display: flex; gap: 0.75rem; margin: 0 0 0 -0.5rem; padding: 0; list-style: none; }
.social a { display: inline-flex; padding: 0.5rem; color: #fff; }
.social a:hover { color: var(--teal-tint); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.875rem;
}
.footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.5rem;
}
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; gap: 1.5rem; }
.footer__heart { color: var(--orange-light); }

@media (min-width: 640px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1.6fr 1fr 0.8fr; gap: 3rem; }
}

/* ==========================================================================
   Inner pages: shared components
   ========================================================================== */

/* === Page hero (inner pages) === */
/* Photo under a flat dark-blue overlay; .page-hero--plain for text pages */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 70svh, 46rem);
  padding-block: clamp(5rem, 3.5rem + 6vw, 9.5rem) clamp(4.5rem, 3rem + 5vw, 8rem);
  color: #e3effa;
  background: var(--navy-deep);
  --focus: var(--focus-on-dark);
}
.page-hero__bg {
  position: absolute;
  inset: -12% 0 auto 0;
  z-index: -2;
  width: 100%;
  height: 124%;
  object-fit: cover;
  will-change: transform;
}
.page-hero > .container { width: min(var(--max), 100% - 2 * var(--gutter)); }
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Brand-blue on the left behind the text, fading out to the right */
  background: linear-gradient(90deg,
    rgba(7, 35, 70, 0.78) 0%,
    rgba(7, 35, 70, 0.64) 40%,
    rgba(7, 35, 70, 0.3) 64%,
    rgba(7, 35, 70, 0) 100%);
}
@media (max-width: 767px) {
  .page-hero::after {
    background: linear-gradient(90deg,
      rgba(7, 35, 70, 0.78) 0%,
      rgba(7, 35, 70, 0.66) 60%,
      rgba(7, 35, 70, 0.5) 100%);
  }
}
.page-hero__inner > * { max-width: 52rem; }
.page-hero:not(.page-hero--plain) .page-hero__inner { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 16px rgba(7, 35, 70, 0.45); }
.page-hero__inner .btn { text-shadow: none; }
.page-hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}
.page-hero .lead { max-width: 40rem; margin: 0; color: #fff; }
.page-hero .eyebrow { color: var(--teal-tint); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 2rem; }
.page-hero--plain { min-height: 0; background: var(--pale); color: var(--text); --focus: #c2410c; }
.page-hero--plain::after { display: none; }
.page-hero--plain h1 { color: var(--heading); }
.page-hero--plain .lead { color: var(--muted); }
.page-hero--plain .eyebrow { color: var(--teal); }

.breadcrumb { margin: 0 0 1.5rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.875rem; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.6; }
.breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.breadcrumb [aria-current="page"] { opacity: 0.85; }

/* === Prose (long-form text: articles, legal, about) === */
.prose { max-width: 46rem; }
.prose--center { margin-inline: auto; }
.prose > * + * { margin-top: 1.1em; }
.prose p, .prose li { font-size: 1.125rem; line-height: 1.7; }
.prose h2 { margin: 2.2em 0 0.6em; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); letter-spacing: -0.02em; }
.prose h3 { margin: 1.8em 0 0.5em; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--blue); }
.prose blockquote {
  margin: 2em 0;
  padding: 0.25em 0 0.25em 1.5rem;
  border-left: 3px solid var(--blue);
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading);
}
.prose blockquote p { font-size: inherit; line-height: inherit; margin: 0; }
.prose figure { margin: 2em 0; }
.prose figure img { width: 100%; border-radius: var(--radius-lg); }
.prose figcaption { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--muted); }
.prose strong { color: var(--heading); }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prose th, .prose td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-family: var(--font-head); color: var(--heading); }

/* Article layout: prose + sticky aside (e.g. CTA card, facts) */
.article-layout { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .article-layout { grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .article-layout__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.25rem 0 0; font-size: 0.9375rem; color: inherit; opacity: 0.9; }

/* === Text + media row === */
.content-split { display: grid; gap: 2.5rem; align-items: center; }
.content-split + .content-split { margin-top: clamp(3.5rem, 3rem + 3vw, 6rem); }
.content-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.content-split__media--product { padding: clamp(1.5rem, 1rem + 2vw, 3rem); background: var(--pale); border-radius: var(--radius-lg); }
.content-split__media--product img { aspect-ratio: auto; object-fit: contain; border-radius: 0; mix-blend-mode: multiply; }
.content-split__text h2 { font-size: clamp(1.875rem, 1.35rem + 2vw, 2.75rem); letter-spacing: -0.025em; line-height: 1.08; }
.content-split__text p { color: var(--text); }
.content-split__text .btn, .content-split__text .link-arrow { margin-top: 1rem; }
@media (min-width: 900px) {
  .content-split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); }
  .content-split--reverse > :first-child { order: 2; }
}

/* === Cards (benefits, steps, services) === */
.card-grid { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  background: var(--pale);
  border: 0;
  border-radius: var(--radius-lg);
}
.section--pale .card { background: #fff; }
.section--navy .card:not(.card--blue) { background: rgba(255, 255, 255, 0.06); color: #c9d6e3; }
.section--navy .card:not(.card--blue) .card__title { color: #fff; }
.card--blue { background: var(--blue); border-color: var(--blue); color: #e3effa; }
.card--blue .card__title { color: #fff; }
.card__title { margin: 0; font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem); letter-spacing: -0.015em; line-height: 1.2; }
.card p { margin: 0; font-size: 1rem; line-height: 1.6; }
.card .link-arrow { margin-top: auto; padding-top: 0.75rem; }
.card__media { margin: calc(-1 * clamp(1.5rem, 1.25rem + 1vw, 2.25rem)); margin-bottom: 1rem; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Numbered steps (ordered process) */
.steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.steps > li {
  counter-increment: step;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  background: #fff;
  border-radius: var(--radius-lg);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue);
}
.steps h3 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.steps p { margin: 0; font-size: 1rem; color: var(--muted); }

/* Check list (short benefit lists) */
.check-list { margin: 1.25rem 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.check-list li { display: flex; gap: 0.875rem; align-items: baseline; }
.check-list li::before {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.5rem;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: translateY(-0.2em) rotate(-45deg);
}

/* === Partner / contact cards === */
.partner-grid { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
.partner {
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  background: var(--pale);
  border-radius: var(--radius-lg);
}
.section--pale .partner { background: #fff; }
.partner__country { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.partner__name { margin: 0 0 0.75rem; font-size: 1.375rem; letter-spacing: -0.015em; }
.partner address { font-style: normal; line-height: 1.7; }

/* === Media grid (awards, press clippings) === */
.media-grid { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .media-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.media-grid figure { margin: 0; }
.media-grid img { width: 100%; border-radius: var(--radius-lg); background: var(--pale); }
.media-grid figcaption { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--muted); }
.media-grid figcaption strong { display: block; color: var(--heading); font-family: var(--font-head); font-size: 1.0625rem; }

/* === FAQ (details/summary) === */
.faq { max-width: 52rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  font-family: var(--font-head);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--blue); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 1.25rem; }

/* === Contact form === */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.375rem; }
.field label, .field legend { font-family: var(--font-head); font-weight: 600; font-size: 0.9375rem; color: var(--heading); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line-blue);
  border-radius: 8px;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--blue); }
.field__hint { font-size: 0.875rem; color: var(--muted); }
.field--check { display: flex; gap: 0.75rem; align-items: flex-start; }
.field--check input { width: 1.25rem; min-height: 0; height: 1.25rem; margin-top: 0.2rem; accent-color: var(--blue); }
.field--check label { font-family: var(--font-body); font-weight: 400; font-size: 0.9375rem; color: var(--text); }
.form-card {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--pale);
  border-radius: var(--radius-lg);
}
.section--pale .form-card { background: #fff; }

/* Info aside card (contact details next to a form or article) */
.info-card {
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  color: #c9d6e3;
  background: var(--navy-deep);
  border-radius: var(--radius-lg);
  --focus: var(--focus-on-dark);
}
.info-card h2, .info-card h3 { color: #fff; font-size: 1.375rem; margin-bottom: 0.75rem; }
.info-card a:not(.btn) { color: #fff; }
.info-card p { font-size: 1rem; }
.info-card .btn { margin-top: 0.5rem; }

/* === CTA band (inner pages) === */
.cta-band { padding-block: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); color: #e3effa; background: var(--blue); --focus: var(--focus-on-dark); }
.cta-band__inner { display: grid; gap: 1.5rem 4rem; align-items: center; }
.cta-band h2 { margin: 0 0 0.5rem; color: #fff; font-size: clamp(1.875rem, 1.35rem + 2vw, 2.75rem); letter-spacing: -0.025em; }
.cta-band p { margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1fr auto; }
}

/* Inner-page section heading helper */
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.section-head h2 { font-size: clamp(1.875rem, 1.35rem + 2vw, 2.75rem); letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 0.75rem; }
.section-head p { color: var(--muted); margin: 0; }

/* === Statement rows (replace generic 3-card grids) === */
/* Each item: title left, text right, hairline between rows */
.feature-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); counter-reset: frow; }
.feature-rows > li {
  display: grid;
  gap: 0.5rem 3rem;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
}
.feature-rows h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.feature-rows p { margin: 0; color: var(--muted); }
.feature-rows p + p { margin-top: 0.75rem; }
.feature-rows .link-arrow { margin-top: 0.75rem; }
.feature-rows--numbered > li { counter-increment: frow; }
.feature-rows--numbered h3::before {
  content: counter(frow, decimal-leading-zero);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--blue);
}
.feature-rows__highlight h3 { color: var(--blue); }
.section--navy .feature-rows, .section--navy .feature-rows > li { border-color: rgba(255, 255, 255, 0.18); }
.section--navy .feature-rows h3 { color: #fff; }
.section--navy .feature-rows p { color: #c9d6e3; }
@media (min-width: 768px) {
  .feature-rows > li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; }
}

/* === Icon list (benefits, services) === */
/* Plain line icons in brand blue; no shapes behind them */
.icon-list { display: grid; gap: 2rem 3rem; margin: 0; padding: 0; list-style: none; }
.icon-list > li { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; align-items: start; }
.icon-list svg { grid-row: 1 / span 2; width: 32px; height: 32px; margin-top: 0.1rem; color: var(--blue); }
.icon-list h3 { margin: 0; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.01em; }
.icon-list p { grid-column: 2; margin: 0; font-size: 1rem; color: var(--muted); }
.section--navy .icon-list svg { color: var(--teal-tint); }
.section--navy .icon-list h3 { color: #fff; }
.section--navy .icon-list p { color: #c9d6e3; }
@media (min-width: 720px) { .icon-list { grid-template-columns: repeat(2, 1fr); } }

/* === Full-width photo band (one per page, breaks the rhythm) === */
.photo-band { position: relative; overflow: hidden; }
.photo-band img {
  width: 100%;
  height: clamp(16rem, 36vw, 32rem);
  object-fit: cover;
  will-change: transform;
}
.photo-band figcaption {
  position: absolute;
  left: max(var(--gutter), calc((100% - var(--max)) / 2));
  bottom: clamp(1rem, 0.5rem + 2vw, 2rem);
  max-width: min(36rem, 100% - 2 * var(--gutter));
  padding: 0.75rem 1.125rem;
  font-family: var(--font-head);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  background: rgba(7, 35, 70, 0.82);
  border-radius: 12px;
}

/* === Homepage: header floats over the hero video, turns white on scroll === */
.header { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.has-hero-overlay .header { position: fixed; left: 0; right: 0; top: 0; }
.has-hero-overlay .header:not(.is-solid) { background: transparent; border-bottom-color: transparent; }
.has-hero-overlay .header:not(.is-solid) .header__logo img { filter: brightness(0) invert(1); }
.has-hero-overlay .header.is-solid { box-shadow: 0 10px 30px -22px rgba(15, 37, 64, 0.45); }
@media (min-width: 1024px) {
  .has-hero-overlay .header:not(.is-solid) .nav__link { color: #fff; --focus: var(--focus-on-dark); }
  .has-hero-overlay .header:not(.is-solid) .nav__link:hover { color: var(--teal-tint); }
  .has-hero-overlay .header:not(.is-solid) .nav__link[aria-current="page"] { color: #fff; }
}
/* hero now starts at the very top: full screen, content pushed below the header */
.has-hero-overlay .hero { min-height: clamp(640px, 100svh, 1000px); }
.has-hero-overlay .hero__inner { padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 5vw, 6rem)); }
/* soft top shade so the white menu stays readable over bright footage */
.has-hero-overlay .hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: calc(var(--header-h) + 8rem);
  background: linear-gradient(180deg, rgba(9, 24, 42, 0.6) 0%, rgba(9, 24, 42, 0) 100%);
}

/* Floating phone/language pills: slide away while scrolling down */
.header__float { transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; }
.header__float.is-hidden:not(:focus-within) {
  opacity: 0;
  transform: translateY(-12px);
  visibility: hidden;
  pointer-events: none;
}

/* Contact page reuses the product-stage panel; no extra gap before the footer */
main > section:last-child .innovation__stage:last-child { margin-bottom: 0; }

/* === Facility panels (who we supply): icon + title, items as chips === */
.facility-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .facility-grid { grid-template-columns: 1.25fr 1fr; } }
.facility {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  background: #fff;
  border-radius: var(--radius-lg);
}
.section:not(.section--pale):not(.section--navy) .facility { background: var(--pale); }
.facility__head { display: flex; align-items: center; gap: 1rem; }
.facility__head svg { flex: none; color: var(--blue); }
.facility__title { margin: 0; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); letter-spacing: -0.02em; line-height: 1.1; }
.facility .link-arrow { margin-top: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 1.125rem 0.5625rem 0.9375rem;
  font-family: var(--font-head);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--heading);
  background: transparent;
  border: 1.5px solid var(--line-blue);
  border-radius: 999px;
}
.chips li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}

.section--navy .facility { background: rgba(255, 255, 255, 0.07); }
.section--navy .facility__head svg { color: var(--teal-tint); }
.section--navy .facility__title { color: #fff; }
.section--navy .chips li { color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.section--navy .chips li::before { background: var(--teal-tint); }

/* === Back to top button (all pages) === */
.to-top {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--navy-deep);
  background: #fff;
  border: 1px solid var(--line-blue);
  border-radius: 999px;
  box-shadow: 0 10px 28px -12px rgba(9, 24, 42, 0.55);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  --focus: #c2410c;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: #fff; background: var(--blue); border-color: var(--blue); }
.to-top svg { transition: transform 0.2s ease; }
.to-top:hover svg { transform: translateY(-2px); }
html:not(.js) .to-top { display: none; }

/* === Header dropdowns (modern panels) === */
/* Items: line icon + label + one-line description */
.subnav__link {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  text-decoration: none;
}
.subnav__link svg { flex: none; margin-top: 0.125rem; color: var(--blue); transition: transform 0.2s ease; }
.subnav__text { display: flex; flex-direction: column; gap: 0.125rem; }
.subnav__label { font-family: var(--font-head); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--heading); }
.subnav__desc { font-size: 0.875rem; line-height: 1.4; color: var(--muted); }
.subnav a.subnav__link:hover { background: var(--pale); }
.subnav a.subnav__link:hover .subnav__label { color: var(--blue); }
.subnav a.subnav__link:hover svg { transform: translateX(2px); }
.subnav a.subnav__link[aria-current="page"] { background: var(--pale); font-weight: inherit; }
.subnav a.subnav__link[aria-current="page"] .subnav__label { color: var(--blue); }

/* Mobile menu: compact rows, icons kept, descriptions hidden */
@media (max-width: 1023px) {
  .subnav { padding: 0.25rem 0 0.75rem; }
  .subnav a.subnav__link { align-items: center; padding: 0.625rem 0.75rem; border-radius: 12px; }
  .subnav__link svg { width: 22px; height: 22px; margin-top: 0; }
  .subnav__desc { display: none; }
}

/* Desktop: floating rounded panel with a soft fade-and-slide */
@media (min-width: 1024px) {
  .subnav {
    display: block;
    top: calc(100% + 0.875rem);
    left: -0.75rem;
    min-width: 23rem;
    padding: 0.625rem;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 32px 64px -32px rgba(9, 24, 42, 0.45), 0 10px 24px -16px rgba(9, 24, 42, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .subnav::before { top: calc(-0.875rem - 1px); height: 0.875rem; }
  .has-sub.is-open > .subnav,
  .has-sub:hover > .subnav,
  html:not(.js) .has-sub:focus-within > .subnav { opacity: 1; visibility: visible; transform: none; }
  .subnav--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 0.125rem; width: 38rem; }
  .subnav--end { left: auto; right: -0.75rem; }
  .subnav a.subnav__link { padding: 0.875rem 1rem; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .subnav { transform: none !important; }
}