/* ============================================================================
   ELEMENTS — Single Elements component styles
   ----------------------------------------------------------------------------
   One rule set per Figma "Single Elements" component. Class names match the
   Figma component name, kebab-cased; variant classes match Figma variant
   values (--style-primary, --colorway-dark, --size-tall …). References
   css/tokens.css semantic roles only — never a raw colour, font, size, or
   spacing value.

   Hover / focus / disabled / error are NOT in the Figma source. They are
   invented, use invented tokens, and are logged in INVENTED.md.

   Node IDs (all-nodes.tsv) for traceability:
     Buttons 4:1124 · Text Field 4:1131 · Message Field 4:1138 ·
     Select Dropdown 4:1150 · File Upload Dropzone 4:1135 ·
     Checkmark Icon 128:1426 · Bullet Point Items 113:6262 ·
     Text Link CTA 4:1147 · Pagination 128:1745 ·
     Carousel Dot Indicators 128:1732 · Carousel Nav Arrows 4:1285 ·
     Accordion Toggle 4:1330 · Nav 4:1339 · Footer 6:355
   ============================================================================ */

/* ── Section (LAYOUT PRIMITIVE — not a Figma component, not a block) ─────────
   A consumable shell that content blocks compose with, e.g.
     <section class="section hero-section">
       <div class="section__inner hero-section__inner"> … </div>
     </section>
   The shell owns ONLY: full-bleed surface, a centred max-width inner, and the
   horizontal page padding (100 desktop → 40 mobile). Vertical section padding
   and the bottom divider stay in the block — Figma's per-block vertical rhythm
   varies and the three current blocks don't agree on the divider token.
   No --tight/--loose variants: if a block's spacing differs, the block sets it. */
.section { background: var(--surface); }
.section__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-100);          /* 100 */
}
@media (max-width: 768px) {                  /* = --bp-mobile */
  .section__inner { padding-inline: var(--space-40); }  /* 40 */
}

/* ── Buttons (4:1124) — Style = Primary | Secondary | Blue Line | White Line ─ */
.buttons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  padding: 0 var(--control-pad-x);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: var(--wt-label);
  text-transform: capitalize;
  text-decoration: none;                 /* works when .buttons is used on an <a> */
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.buttons--style-primary   { background: var(--accent-primary); color: var(--accent-primary-ink); box-shadow: var(--shadow-control); } /* GS-Shadow — every real placement carries it (hero, nav CTA) */
.buttons--style-secondary { background: var(--surface);     color: var(--accent-primary); box-shadow: var(--shadow-control); } /* GS-Shadow — white fill needs it to read on a light surface */
.buttons--style-blue-line  { background: transparent; border-color: var(--accent-primary);  color: var(--accent-primary); }
.buttons--style-white-line { background: transparent; border-color: var(--text-on-dark); color: var(--text-on-dark); }

/* states — INVENTED */
.buttons--style-primary:hover   { background: var(--accent-primary-hover); }
.buttons--style-secondary:hover { background: var(--surface-tint); }
.buttons--style-blue-line:hover  { background: var(--accent-primary);  color: var(--accent-primary-ink); }
.buttons--style-white-line:hover { background: var(--text-on-dark); color: var(--accent-primary); }
.buttons:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.buttons:disabled,
.buttons[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: not-allowed; }

/* ── Shared field scaffold (Text Field / Message Field / Select) ──────────── */
.text-field,
.message-field,
.select-dropdown {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
}
.text-field__label,
.message-field__label,
.select-dropdown__label {
  font-family: var(--font-body);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  font-weight: var(--wt-caption);
}
.text-field__label,
.message-field__label   { color: var(--text-body); }      /* source: #336887 */
.select-dropdown__label { color: var(--surface-accent); } /* source: #58AADB (differs — see report) */

/* control shell shared by input / textarea / select trigger */
.text-field__control,
.message-field__control,
.select-dropdown__control {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--field-pad-x);
  background: var(--surface);
  border: var(--border-hairline) solid var(--accent-primary);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--accent-primary);
}
.text-field__control::placeholder,
.message-field__control::placeholder { color: var(--text-muted); } /* #AED5EE */

.text-field__control:focus-visible,
.message-field__control:focus-visible,
.select-dropdown__control:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-color: var(--surface-accent);
}

/* ── Text Field (4:1131) ──────────────────────────────────────────────────── */
/* uses shared scaffold only */

/* ── Message Field (4:1138) — Size = Tall | Short ─────────────────────────── */
.message-field__control {
  height: auto;
  min-height: var(--message-h-tall);   /* Size=Tall inner height */
  align-items: flex-start;
  padding: var(--field-pad-y) var(--field-pad-x);
  resize: vertical;
}
.message-field--size-short .message-field__control { min-height: var(--message-h-short); } /* Size=Short */

/* ── Select Dropdown (4:1150) ─────────────────────────────────────────────── */
.select-dropdown__control {
  justify-content: space-between;
  font-weight: var(--wt-label);
  cursor: pointer;
}
.select-dropdown__caret { width: var(--icon); height: var(--icon); flex: none; }

/* ── error state — INVENTED (shared) ─────────────────────────────────────── */
.text-field--error .text-field__control,
.message-field--error .message-field__control,
.select-dropdown--error .select-dropdown__control {
  border-color: var(--state-error);
  background: var(--state-error-tint);
}
.field-error {
  color: var(--state-error);
  font-family: var(--font-body);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
}

/* ── File Upload Dropzone (4:1135) ────────────────────────────────────────── */
.file-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  padding: var(--space-30);
  background: var(--surface);
  border: var(--border-hairline) solid var(--accent-primary);
  border-radius: var(--radius-control);
  text-align: center;
}
.file-upload-dropzone__icon { width: var(--icon-xl); height: var(--icon-xl); }
.file-upload-dropzone__text {
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--surface-accent);          /* source: #58AADB */
}
/* dragover / hover — INVENTED */
.file-upload-dropzone:hover,
.file-upload-dropzone--dragover {
  background: var(--surface-tint);
  border-color: var(--surface-accent);
}

/* ── Checkmark Icon (128:1426) — Color = Default | White ──────────────────── */
.checkmark-icon { display: inline-block; width: var(--icon-lg); height: var(--icon-lg); flex: none; }
.checkmark-icon img { display: block; width: 100%; height: 100%; }

/* ── Bullet Point Items (113:6262) — Style + Colorway ─────────────────────── */
.bullet-point-items { display: flex; gap: var(--space-10); align-items: flex-start; }
.bullet-point-items--style-headline { align-items: center; }
.bullet-point-items__body { display: flex; flex-direction: column; gap: var(--space-20); }
.bullet-point-items__headline {
  font-family: var(--font-body);
  font-size: var(--size-h4);
  line-height: var(--lh-h4);
  font-weight: var(--wt-h4);
}
.bullet-point-items__text {
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: var(--lh-small);
}
/* Colorway=Light → light text (for use ON dark) · Colorway=Dark → dark text (ON light) */
.bullet-point-items--colorway-light .bullet-point-items__headline { color: var(--text-on-dark); }
.bullet-point-items--colorway-light .bullet-point-items__text     { color: var(--text-muted); }
.bullet-point-items--colorway-dark  .bullet-point-items__headline { color: var(--text-body); }
.bullet-point-items--colorway-dark  .bullet-point-items__text     { color: var(--text-heading); }

/* ── Section Label (75:1319) — Layout = Horizontal | Vertical ──────────────── */
/* Eyebrow used by content blocks: CTA-arrow glyph + label. The arrow is the
   same geometry as Text Link CTA's icon but tinted teal here, so it is applied
   as a CSS mask over the exported SVG (recolour, not redraw). */
.section-label { display: inline-flex; align-items: center; }
.section-label--layout-vertical { flex-direction: column; align-items: center; gap: var(--space-10); } /* icon above text (hero mobile) */
.section-label__icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: none;
  background-color: var(--label-accent);               /* #338783 light / #58AADB dark (theme-aware) */
  -webkit-mask: url(../assets/icons/cta-arrow.svg) center / contain no-repeat;
          mask: url(../assets/icons/cta-arrow.svg) center / contain no-repeat;
}
.section-label__text {
  font-family: var(--font-body);
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  font-weight: var(--wt-lead);
  text-transform: capitalize;
  color: var(--label-accent);                          /* #338783 light / #58AADB dark (theme-aware) */
}

/* ── Check Buttons (4:1310) — consent checkbox + label ────────────────────────
   Native <input type="checkbox"> so it is keyboard- and screen-reader-accessible;
   accent-color tints the checked box to the primary fill. */
.check-buttons { display: flex; align-items: center; gap: var(--check-gap); }
.check-buttons__box {
  width: var(--icon); height: var(--icon); flex: none; margin: 0;
  accent-color: var(--accent-primary);
}
.check-buttons__label {
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--text-heading);            /* #122D3C */
}
.check-buttons__box:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ── Text Link CTA (4:1147) ───────────────────────────────────────────────── */
.text-link-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--text-link-gap);                 /* 4px */
  text-decoration: none;
}
.text-link-cta__label {
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  font-weight: var(--wt-body-strong);    /* Bodycopy Bold */
  color: var(--text-body);
}
.text-link-cta__icon { width: var(--icon); height: var(--icon); flex: none; }
.text-link-cta:hover .text-link-cta__label { text-decoration: underline; } /* INVENTED */
.text-link-cta:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ── Pagination (128:1745) ────────────────────────────────────────────────── */
.pagination { display: inline-flex; align-items: center; gap: var(--space-20); }
.pagination__arrow { width: var(--icon); height: var(--icon); flex: none; }
.pagination__arrow--disabled { opacity: var(--disabled-opacity); }   /* DESIGNED opacity */
.pagination__page {
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--text-heading);            /* #122D3C */
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
}
.pagination__page--active { color: var(--surface-accent); text-decoration: underline; } /* #58AADB */
.pagination__page:hover:not(.pagination__page--active) { color: var(--surface-accent); } /* INVENTED */
.pagination__page:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ── Carousel Dot Indicators (128:1732) ───────────────────────────────────── */
.carousel-dot-indicators { display: inline-flex; align-items: center; gap: var(--space-10); }
.carousel-dot-indicators__dot {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--surface-tint);       /* inactive #EFF7FC */
  border: 0;
  padding: 0;
}
.carousel-dot-indicators__dot--active { background: var(--accent-primary); } /* #336887 */

/* ── Carousel Navigation Arrows (4:1285) — Back | Forward | *Disabled ─────── */
.carousel-navigation-arrows { display: inline-flex; align-items: center; gap: var(--space-20); }
.carousel-navigation-arrows__arrow {
  width: var(--icon-lg);
  height: var(--icon-lg);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.carousel-navigation-arrows__arrow img { display: block; width: 100%; height: 100%; }
.carousel-navigation-arrows__arrow:disabled,
.carousel-navigation-arrows__arrow[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: default; } /* DESIGNED */
.carousel-navigation-arrows__arrow:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ── Accordion Toggle (4:1330) — State = Open (+) | Close (-) ──────────────── */
.accordion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  padding: 0 var(--control-pad-x);
  background: var(--accent-primary);
  border: 0;
  border-radius: var(--radius-control);
  color: var(--accent-primary-ink);
  cursor: pointer;
}
.accordion-toggle__glyph {
  font-family: var(--font-body);
  font-size: var(--accordion-glyph);
  line-height: 1;
}
.accordion-toggle:hover { background: var(--accent-primary-hover); }          /* INVENTED */
.accordion-toggle:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ── Skip link (a11y) — first focusable element; visually hidden until focused ─ */
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 1100;   /* above nav (1000) + drawer (900) */
  margin: var(--space-10);
  padding: var(--space-10) var(--space-20);
  background: var(--surface-dark); color: var(--text-on-dark);
  font-family: var(--font-body); font-size: var(--size-body); line-height: var(--lh-body);
  text-decoration: none; border-radius: var(--radius-control);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ── Nav (4:1339) — Size = Default ────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-20) var(--space-100);
  background: var(--surface);
  border-bottom: var(--border-hairline) solid var(--border-divider);  /* #AED5EE light / #EFF7FC dark */
  position: relative;                          /* containing block for the mega-menu panel */
}
/* Below the 1440 design width the 100px inset is too generous for the ~1066px nav
   content to still fit one row, so tighten it to --space-40 across the undesigned
   desktop band (1201–1439). The ≤--bp-nav (1200) drawer block below overrides this
   again for the mobile form. 1440 keeps the designed 100px inset. INVENTED band. */
@media (max-width: 1439px) {
  .nav { padding-inline: var(--space-40); }
}

/* ── Mega Menu (171:4948) — Services disclosure ──────────────────────────────
   Trigger looks like a nav link but is a <button> (opens a panel, not a page).
   Panel: full-width band below the nav, bg GS-Full-Blue, 5-col grid of 11 category
   columns, each with a GS-Dark-Blue left divider. js/nav.js drives the disclosure. */
.nav__mega-trigger {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--size-body); line-height: var(--lh-body);
  font-weight: var(--wt-body); color: var(--text-body);
  display: inline-flex; align-items: center; gap: var(--text-link-gap);  /* 4 */
}
.nav__mega-trigger:hover { color: var(--surface-accent); }               /* INVENTED, matches .nav__link */
.nav__mega-trigger:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.nav__link-caret { transition: transform var(--dur) var(--ease); }
.nav__mega-trigger[aria-expanded="true"] .nav__link-caret { transform: rotate(180deg); }

.mega-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 800;
  background: var(--accent-primary);                                     /* #336887 */
  border-bottom: var(--border-hairline) solid var(--border-divider);     /* #AED5EE */
  padding: var(--space-50) var(--space-100);                             /* 50 / 100 */
}
.mega-menu[hidden] { display: none; }
.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);                                 /* 5 columns (216px @1440) */
  gap: var(--space-40);                                                  /* 40 */
}
.mega-menu__col {
  border-left: var(--border-hairline) solid var(--surface-dark);        /* #122D3C divider */
  padding-left: var(--space-20);                                        /* 20 */
  display: flex; flex-direction: column; gap: var(--space-20);          /* 20 heading ↔ items */
  min-width: 0;
}
.mega-menu__heading {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-small); line-height: var(--lh-small); font-weight: var(--wt-body-strong);  /* 15/24 Bold */
  color: var(--text-on-dark);                                           /* white */
  overflow-wrap: break-word;                                           /* never let a long word overflow its track */
}
.mega-menu__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mega-menu__item {
  display: block;
  font-family: var(--font-body);
  font-size: var(--size-small); line-height: var(--lh-small); font-weight: var(--wt-small);  /* 15/24 Regular */
  color: var(--text-body-on-dark);                                      /* #EFF7FC */
  text-decoration: none;
  overflow-wrap: break-word;                                           /* never let a long word overflow its track */
}
.mega-menu__item:hover { color: var(--text-on-dark); text-decoration: underline; }  /* INVENTED hover */
.mega-menu__item:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* The desktop panel renders only above --bp-nav (1200) — below that it is the
   in-drawer accordion. So it is ALWAYS the designed 5-col grid: at its narrowest
   visible width (1201) the tracks are ~168px and nothing clips. Below 1440 we
   only tighten the side inset to --space-40 so the panel aligns with the nav's
   tightened inset in the undesigned desktop band. (Former 1120→4-col and 940→3-col
   steps were removed — both sat below --bp-nav, unreachable by the visible panel.) */
@media (max-width: 1439px) {
  .mega-menu { padding-inline: var(--space-40); }
}
.nav__home { display: inline-flex; align-items: center; }
.nav__logo { height: var(--control-h); display: block; }
.nav__links { display: flex; align-items: center; gap: var(--nav-link-gap); }  /* 24 */
.nav__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: var(--wt-body);
  color: var(--text-body);
  text-decoration: none;
}
.nav__link-caret { width: var(--icon); height: var(--icon); }
.nav__link:hover { color: var(--surface-accent); }   /* INVENTED */
.nav__link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  height: var(--control-h);
  padding: 0 var(--control-pad-x);
  background: var(--accent-nav-cta);   /* #4BBEB9 Jazz */
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-control);
  color: var(--accent-primary-ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: var(--wt-label);
  text-transform: capitalize;
  text-decoration: none;
}
.nav__menu { display: contents; }                 /* desktop: wrapper is transparent — links + CTA flow into the nav flex */
.nav__toggle {
  display: none;                                   /* shown at ≤--bp-nav (1024) */
  align-items: center; justify-content: center;
  width: var(--control-h); height: var(--control-h);
  padding: 0; background: none; border: 0; cursor: pointer;
}
.nav__toggle:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.nav__menu-icon { width: var(--icon); height: var(--icon); display: block; }
/* Size = Mobile — hamburger replaces the link list */
.nav--size-mobile { padding: var(--space-20) var(--nav-link-gap); }
.nav--size-mobile .nav__links,
.nav--size-mobile .nav__cta { display: none; }
.nav--size-mobile .nav__menu-icon { display: block; }

/* ── Footer (6:355) — Size = Default ──────────────────────────────────────── */
.footer {
  background: var(--surface-dark);       /* #122D3C */
  padding: 0 var(--space-100);
  color: var(--text-on-dark);
}
.footer__container {
  display: flex;
  gap: var(--space-30);
  padding: var(--space-100) 0;
  border-bottom: var(--border-hairline) solid var(--text-on-dark);
}
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-30);
  flex: none;
}
.footer__logotype { width: var(--footer-logo-w); height: var(--footer-logo-h); }   /* Logotype frame (8:1929) */
.footer__tagline {
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--text-muted);              /* #AED5EE */
  text-align: center;
  max-width: var(--footer-logo-w);
}
.footer__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);                  /* 40 */
  padding-left: var(--space-30);
  border-left: var(--border-hairline) solid var(--accent-primary);  /* #336887 */
}
.footer__col-title {
  font-family: var(--font-body);
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  font-weight: var(--wt-lead);
  text-transform: capitalize;
  color: var(--text-on-dark);
  margin: 0 0 var(--space-10);
}
.footer__links { display: flex; flex-direction: column; }
.footer__link {
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--text-on-dark);
  text-decoration: underline;
}
.footer__link--email { color: var(--surface-accent); }  /* #58AADB — inherits underline from .footer__link */
.footer__link:hover { text-decoration: none; }           /* INVENTED (focus ring comes from global :where(a) rule) */
.footer__contact {                                       /* plain contact text — not a link */
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--text-on-dark);
  margin: 0;
}
.footer__social { display: flex; gap: var(--space-20); }
.footer__social-link { display: inline-flex; }
.footer__social-link img { width: var(--icon-lg); height: var(--icon-lg); }
.footer__copyright {
  font-family: var(--font-body);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--text-body-on-dark);       /* #EFF7FC */
  margin: 0;
}
/* Size = Mobile — single column, brand on top */
.footer--size-mobile .footer__container { flex-direction: column; align-items: center; }
.footer--size-mobile .footer__content { border-left: 0; padding-left: 0; align-items: center; text-align: center; }

/* ── Responsive: nav + mega menu switch to their mobile form at --bp-nav ───────
   Page furniture (not .section blocks); real pages need the switch by breakpoint,
   not only via the manual --size-mobile demo classes. The NAV collapses at
   --bp-nav (1024) — higher than --bp-mobile — because the horizontal nav's
   content width (~1066px) wrapped the nav across the 769–1266px band. The footer
   (below, a separate block) still switches at --bp-mobile (768). */
@media (max-width: 1200px) {                  /* = --bp-nav */
  .nav { padding: var(--space-20) var(--space-40); position: sticky; top: 0; z-index: 1000; }
  .nav__toggle { display: inline-flex; }
  /* Mobile drawer — mid-blue panel, matches the Mega Menu frame; sits behind the sticky nav bar
     so the toggle stays clickable to close. Hidden + inert (visibility) until opened by nav.js. */
  .nav__menu {
    display: flex; flex-direction: column; gap: var(--space-40);
    position: fixed; inset: 0;
    padding: var(--space-100) var(--space-40) var(--space-40);
    background: var(--accent-primary);            /* #336887 — Mega Menu panel colour */
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
    z-index: 900; overflow-y: auto;
  }
  .nav__menu[data-open="true"] { transform: translateX(0); visibility: visible; }
  .nav__links { flex-direction: column; align-items: flex-start; gap: var(--space-30); }
  .nav__link { color: var(--text-on-dark); font-size: var(--size-h4); line-height: var(--lh-h4); }
  .nav__link:hover { color: var(--text-muted); }
  .nav__cta { align-self: flex-start; }

  /* Mega menu does NOT apply below --bp-mobile — it collapses into an in-drawer
     Services accordion carrying the same categories + items. */
  .nav__mega-trigger {
    color: var(--text-on-dark); font-size: var(--size-h4); line-height: var(--lh-h4);
    width: 100%; justify-content: space-between;
  }
  .nav__mega-trigger:hover { color: var(--text-muted); }
  .mega-menu {
    position: static; z-index: auto;
    width: 100%;
    background: none; border: 0;
    padding: var(--space-20) 0 0;
  }
  .mega-menu__grid { grid-template-columns: 1fr; gap: var(--space-30); }
  .mega-menu__col { border-left: 0; padding-left: var(--space-20); gap: var(--space-10); }
}

/* ── Footer switches to its mobile form at --bp-mobile (unchanged; not tied to
   the nav's earlier --bp-nav collapse). ─────────────────────────────────────── */
@media (max-width: 768px) {                   /* = --bp-mobile */
  .footer { padding: 0 var(--space-40); }
  .footer__container { flex-direction: column; align-items: center; }
  .footer__content { border-left: 0; padding-left: 0; align-items: center; text-align: center; }
}

/* ── Jump Nav (service pages, spec §3) — in-page sub-topic anchors ─────────────
   Sticky row below the site header. Scrolls HORIZONTALLY on overflow and never
   truncates a label; IntersectionObserver marks the current section (js/jumpnav.js)
   and degrades to a plain link row with no JS. Not a block — a page-furniture
   element. INVENTED element (no Figma source) — see INVENTED.md. */
.jump-nav {
  position: sticky;
  top: 0;                              /* desktop header is static, so this pins to the viewport top */
  z-index: 700;                        /* below nav (1000) and mega panel (800) so they always cover it */
  background: var(--surface-tint);
  border-bottom: var(--border-hairline) solid var(--border-divider);
}
.jump-nav__list {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0 var(--space-100);
  display: flex;
  flex-wrap: nowrap;                   /* one row; the row scrolls, labels stay whole */
  gap: var(--space-40);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  margin-block: 0;
}
.jump-nav__item { flex: none; }
.jump-nav__link {
  display: inline-block;
  white-space: nowrap;                 /* never wrap/ellipsis a label — overflow scrolls instead */
  padding: var(--space-20) 0;
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 2px solid transparent;              /* INVENTED current-marker underline */
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.jump-nav__link:hover { color: var(--text-heading); }
.jump-nav__link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.jump-nav__link[aria-current="true"] {               /* current section (set by js/jumpnav.js) */
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}
/* Below --bp-nav the site header is sticky (top:0, z 1000); offset the jump nav
   below it so the two don't stack on the same line. --jump-nav-offset is the
   sticky header height (INVENTED, measured). */
@media (max-width: 1200px) {          /* = --bp-nav */
  .jump-nav { top: var(--jump-nav-offset); }
  .jump-nav__list { padding-inline: var(--space-40); gap: var(--space-30); }
}