/* ==========================================================================
   components.css - every reusable component, written once
   Depends on tokens.css, base.css, layout.css
   --------------------------------------------------------------------------
   CONTENTS
     1.  Buttons & links
     2.  Site header (single nav row)
     3.  Mega menu
     4.  Mobile navigation
     5.  Hero (home)
     6.  Page hero (inner pages)
     7.  Trust strip
     8.  Stat band
     9.  Capability grid
     10. Numbered cards
     11. Article / insight cards
     12. Step process
     13. Region cards
     14. Tabs
     15. Accordion / FAQ
     16. Forms
     17. CTA band
     18. Footer
     19. Diagram panel
     20. Prose (legal / article body)
   ========================================================================== */


/* ==========================================================================
   1. BUTTONS & LINKS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-height: 56px;
  padding: 0 var(--sp-8);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-button);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              filter var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.btn__arrow {
  font-size: 1.1em;
  line-height: 1;
  transition: transform var(--dur-base) var(--ease);
}

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

/* Primary - brand blue fill, white text at 7.6:1. On dark bands use
   .btn--light instead: an ink or blue fill on a blue ground has no visible
   edge, which leaves the label floating with no button shape. */
.btn--primary {
  background: var(--c-accent);
  color: var(--c-white);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-accent);
}

/* Secondary - outline on light grounds */
.btn--secondary {
  border-color: var(--c-ink);
  color: var(--c-ink);
  box-shadow: none;
}
.btn--secondary:hover {
  background: var(--c-ink);
  color: var(--c-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-button);
}

/* On dark grounds */
.btn--light {
  background: var(--c-white);
  color: var(--c-ink);
}
.btn--light:hover { background: var(--c-canvas); }

.btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--c-white);
}
.btn--ghost-light:hover {
  background: var(--c-white);
  color: var(--c-ink);
}

.btn--light:hover,
.btn--ghost-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -12px rgba(255, 255, 255, 0.28);
}

/* Inline text link with trailing arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-accent-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease);
}
.text-link:hover { border-bottom-color: currentColor; }
.text-link span { transition: transform var(--dur-base) var(--ease); }
.text-link:hover span { transform: translateX(4px); }

.text-link--on-dark { color: var(--c-accent-on-dark); }


/* ==========================================================================
   2. SITE HEADER
   ========================================================================== */

.site-header {
  position: fixed;
  z-index: var(--z-header);
  top: 0;
  left: 0;
  width: 100%;
  color: var(--c-white);
  transition: background var(--dur-mid) var(--ease),
              color var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease);
}

/* Solid state - applied by ui.js once the header is over its own ground
   rather than the hero/page-hero (see initHeader()'s hasHero check: only
   the homepage's video hero ever renders transparent-over-media - every
   inner page is solid from load). White ground, ink text - nav-trigger/
   nav-link/chevron have no colour of their own, so this cascades to them
   for free; the pieces below need an explicit override because they don't
   just inherit colour. It must always resolve: an undefined custom
   property here makes the whole declaration invalid and silently falls
   back to `transparent`, which renders white-on-white. */
.site-header.is-solid {
  background: var(--c-white);
  color: var(--c-ink);
  border-bottom: var(--border);
  box-shadow: 0 8px 28px -10px rgba(10, 35, 80, 0.20);
}

/* --c-accent-on-dark (the hover colour on the transparent/dark header) is
   only text-safe on dark grounds per tokens.css's own guardrail - swap to
   the light-ground-safe accent once the header is solid/white. The nav
   underline bar keeps --c-accent-on-dark even here: that token is
   explicitly allowed as decoration on light grounds, just not as text. */
.site-header.is-solid .nav-trigger:hover,
.site-header.is-solid .nav-link:hover,
.site-header.is-solid .nav-item.is-open .nav-trigger {
  color: var(--c-accent-text);
}

/* .nav-cta is .btn--light (white fill) for the transparent/dark header -
   invisible on a white one, so it becomes the primary blue fill instead. */
.site-header.is-solid .nav-cta {
  background: var(--c-accent);
  color: var(--c-white);
}
.site-header.is-solid .nav-cta:hover { filter: brightness(1.1); }

.site-header.is-solid .menu-toggle { border-color: var(--c-line); }

/* Scroll progress - fills left-to-right with page scroll, driven by
   initScrollProgress() in ui.js. Kept active under reduced motion: it moves
   1:1 with the user's own scroll input rather than autoplaying, so it's
   wayfinding, not decoration - only its own easing goes instant, via the
   site-wide transition override already in base.css. */
.scroll-progress {
  position: fixed;
  z-index: var(--z-progress);
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--c-accent-on-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) linear;
}

/* Main nav row */
.nav-row {
  height: var(--header-nav-h);
  border-bottom: var(--border-dark);
  transition: height var(--dur-mid) var(--ease);
}
.nav-row__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  height: 100%;
}

.brand {
  flex: 0 0 auto;
  display: block;
}

/* Logo artwork is 200x37 (5.405:1). */
.site-header {
  --logo-w: 200px;
}

.brand img {
  width: var(--logo-w);
  height: auto;
}

.primary-nav {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin-left: auto;
}

/* display:contents lets the <li>s participate directly in .primary-nav's flex
   layout, so the <ul> stays semantically correct without becoming a layout box.
   This lived as an inline style attribute in js/partials.js until the strict
   CSP (style-src 'self') began blocking inline styles - it appeared on every
   page, so it was the site's last CSP violation. */
.nav-list {
  display: contents;
}

.nav-item { display: flex; }

.nav-trigger,
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 100%;
  padding: 0 var(--sp-5);
  border: 0;
  background: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.nav-trigger:hover,
.nav-link:hover,
.nav-item.is-open .nav-trigger { color: var(--c-accent-on-dark); }

.nav-trigger::after,
.nav-link::after {
  content: '';
  position: absolute;
  left: var(--sp-5);
  right: var(--sp-5);
  bottom: 0;
  height: 2px;
  background: var(--c-accent-on-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.nav-trigger:hover::after,
.nav-link:hover::after,
.nav-item.is-open .nav-trigger::after { transform: scaleX(1); }

.nav-trigger__chevron {
  font-size: var(--fs-xs);
  transition: transform var(--dur-base) var(--ease);
}
.nav-item.is-open .nav-trigger__chevron { transform: rotate(180deg); }

/* Renders ~268x48 - deliberately a little larger than the 200x37 logo so it
   reads as the primary CTA, while still sitting in proportion to it.

   align-self:center is the load-bearing line. Without it, .primary-nav's
   align-items:stretch makes this button fill the entire nav row (~264x83),
   more than twice the logo's height, which reads as a slab rather than a
   button. min-height:0 releases the 56px floor from .btn so the height below
   actually applies.

   Width is intentionally left auto: the label is long, and fixing the width
   would force either a smaller font or a two-line wrap.

   Mobile (<=900px) overrides all of this - the CTA moves into the slide-in
   nav panel, where it is full-width and no longer sits beside the logo. */
.nav-cta {
  flex: 0 0 auto;
  align-self: center;
  height: 48px;
  min-height: 0;
  padding: 0 22px;
  font-size: var(--fs-xs);
  white-space: nowrap;
}


/* ==========================================================================
   3. MEGA MENU
   ========================================================================== */

.mega {
  position: absolute;
  z-index: var(--z-mega);
  top: 100%;
  left: 0;
  width: 100%;
  padding: var(--sp-12) 0;
  background: var(--c-white);
  color: var(--c-ink);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility var(--dur-base) var(--ease);
}

.nav-item.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* auto-fit rather than a fixed repeat(4, ...): the About menu now has only
   3 populated columns since Careers/Partners were removed, and this keeps
   it evenly spaced instead of leaving a blank 4th track. Menus that still
   have 4 columns render identically to before. */
.mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-10);
}

.mega__col h3 {
  margin: 0 0 var(--sp-5);
  color: var(--c-accent-text);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.mega__link {
  position: relative;
  display: block;
  padding: var(--sp-3) 0;
  border-bottom: var(--border);
}
.mega__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.mega__link:hover { color: var(--c-accent-text); }
.mega__link:hover::after { transform: scaleX(1); }
.mega__link strong {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}
.mega__link span {
  display: block;
  margin-top: var(--sp-1);
  color: var(--c-muted);
  font-size: var(--fs-xs);
}

.mega__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: var(--border);
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: var(--border-dark);
  background: none;
  cursor: pointer;
}
.menu-toggle__bar {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.menu-toggle__bar::before,
.menu-toggle__bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.menu-toggle__bar::before { top: -6px; }
.menu-toggle__bar::after  { top: 6px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bar { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar::after  { top: 0; transform: rotate(-45deg); }


/* ==========================================================================
   4. MOBILE NAVIGATION  (≤900px)
   ========================================================================== */

@media (max-width: 900px) {
  .menu-toggle { display: flex; }

  .brand img { width: 150px; }

  .primary-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    margin: 0;
    padding: var(--sp-6) 0 var(--sp-20);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    /* Must always resolve - see the note on .site-header.is-solid. An
       undefined value here left the entire mobile menu transparent. */
    background: var(--bg-dark-2);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-mid) var(--ease),
                visibility var(--dur-mid) var(--ease);
  }

  .primary-nav.is-open {
    transform: none;
    visibility: visible;
  }

  .nav-item {
    display: block;
    border-bottom: var(--border-dark);
  }

  .nav-trigger,
  .nav-link {
    justify-content: space-between;
    width: min(calc(100% - (var(--container-gutter) * 2)), var(--container-max));
    height: auto;
    margin-inline: auto;
    padding: var(--sp-5) 0;
    font-size: var(--fs-h5);
  }
  .nav-trigger::after,
  .nav-link::after { left: 0; right: 0; }

  /* Mega panels become stacked accordions */
  .mega {
    position: static;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    background: var(--bg-dark-2);
    color: var(--c-white);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height var(--dur-mid) var(--ease);
  }

  .nav-item.is-open .mega {
    max-height: 1400px;
    padding: var(--sp-6) 0;
  }

  .mega__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
  .mega__col h3 { color: var(--c-accent-on-dark); }
  .mega__link { border-bottom-color: var(--c-line-dark); }
  .mega__link:hover { color: var(--c-accent-on-dark); }
  .mega__link:hover::after { background: var(--c-accent-on-dark); }
  .mega__link span { color: var(--c-muted-on-dark); }
  .mega__footer { border-top-color: var(--c-line-dark); }

  /* In the mobile panel the CTA is a normal full-width button again, so undo
     the desktop logo-matching sizing above (which only makes sense while the
     button sits next to the logo in the nav row). */
  .nav-cta {
    width: min(calc(100% - (var(--container-gutter) * 2)), var(--container-max));
    height: auto;
    min-height: 56px;
    align-self: auto;
    margin: var(--sp-6) auto 0;
    padding: 0 var(--sp-8);
    font-size: var(--fs-sm);
    white-space: normal;
  }
}


/* ==========================================================================
   5. HERO (home)
   ========================================================================== */

/* The banner is a self-contained graphic (its own logo/tagline/icon row
   baked in - see the comment on the hidden <h1> in index.html), so this is
   just the media block, full width - no scrim, no overlaid copy, no
   min-height/flex-centre trick. */
.hero {
  position: relative;
  background: var(--bg-dark);
  overflow: hidden;
}

.hero__media {
  position: relative;
  aspect-ratio: 1600 / 853;
  overflow: hidden;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Generic button-row layout, reused wherever a section wants a horizontal,
   wrapping pair of CTAs - currently the PLATFORM section further down this
   page. Not hero-specific despite the name (kept for the existing markup
   that references it). */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

/* Slide controls */
.hero__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
}
.hero__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: none;
  color: var(--c-white);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}
.hero__control:hover {
  background: var(--c-white);
  color: var(--c-ink);
}
.hero__dots {
  display: flex;
  gap: var(--sp-2);
  margin-left: var(--sp-4);
}
.hero__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-round);
  background: none;
  cursor: pointer;
}
.hero__dot[aria-selected="true"] { background: var(--c-accent-on-dark); }

.hero__slide { display: none; }
.hero__slide.is-active { display: block; }

/* ==========================================================================
   6. PAGE HERO (inner pages)
   ========================================================================== */

.page-hero {
  padding: calc(var(--header-h) + var(--sp-20)) 0 var(--sp-20);
  background: var(--bg-dark);
  color: var(--c-white);
}

/* Opt-in banner-photography layer (see pageHero() in tools/build-pages.js).
   Mirrors .hero__media's image + scrim pattern exactly, so the contrast
   outcome for .page-hero__text matches what already passes on the home
   hero (same gradient stops, same font-size/colour). */
.page-hero--photo { position: relative; overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.page-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(3, 38, 79, 0.94) 0%,
    rgba(3, 38, 79, 0.86) 32%,
    rgba(3, 38, 79, 0.62) 55%,
    rgba(3, 38, 79, 0.24) 78%,
    rgba(3, 38, 79, 0.06) 100%
  );
}
.page-hero--photo .page-hero__inner { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .page-hero--photo .page-hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(3, 38, 79, 0.55) 0%,
      rgba(3, 38, 79, 0.42) 45%,
      rgba(3, 38, 79, 0.62) 100%
    );
  }
}

/* This element is also .wrap. Capping it at --measure here would combine with
   .wrap's `margin-inline: auto` to CENTRE the whole block, pushing the page
   hero out of alignment with the header and every section below it. The
   reading measure belongs on the text instead. */
.page-hero__title {
  max-width: var(--measure);
  margin-bottom: var(--sp-6);
}
.page-hero__text {
  max-width: 62ch;
  color: var(--c-muted-on-dark);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.breadcrumb li { color: var(--c-muted-on-dark); }
.breadcrumb a:hover { color: var(--c-accent-on-dark); }
.breadcrumb li + li::before { content: '/'; margin-right: var(--sp-2); }


/* ==========================================================================
   7. TRUST STRIP
   ========================================================================== */

.trust-strip {
  padding: var(--sp-8) 0;
  background: var(--bg-dark-2);
  color: var(--c-white);
}
.trust-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-8);
}
.trust-strip__item {
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-utility);
  text-transform: uppercase;
}


/* ==========================================================================
   8. STAT BAND
   ========================================================================== */

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: var(--border);
  border-bottom: var(--border);
}

.stat {
  padding: var(--sp-10) var(--sp-7);
  border-right: var(--border);
}
.stat:first-child { border-left: var(--border); }

.stat__value {
  display: block;
  color: var(--c-ink);
  font-size: var(--fs-display-s);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-display);
  /* Fixed-width digits so a counting value doesn't shuffle its own layout */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- Stat band entrance ----------------------------------------------------
   Cells are only hidden once js/ui.js has confirmed it can reveal them again
   (it adds .js-statband to <html>), so with JS off, or under reduced motion,
   the band renders normally and never gets stranded invisible. The per-cell
   delay is set inline by ui.js to stagger the row. */
.js-statband .stat-band .stat {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

.js-statband .stat-band .stat.is-counted {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-statband .stat-band .stat {
    opacity: 1 !important;
    transform: none !important;
  }
}
.stat__label {
  display: block;
  margin-top: var(--sp-4);
  color: var(--c-muted);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.section--dark .stat,
.section--dark .stat:first-child { border-color: var(--c-line-dark); }
.section--dark .stat-band { border-color: var(--c-line-dark); }
.section--dark .stat__value { color: var(--c-white); }
.section--dark .stat__label { color: var(--c-muted-on-dark); }

@media (max-width: 900px) {
  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { border-left: var(--border); }
  .stat { border-bottom: var(--border); }
}
@media (max-width: 600px) {
  .stat-band { grid-template-columns: minmax(0, 1fr); }
  .stat { border-left: var(--border); }
}


/* ==========================================================================
   9. CAPABILITY GRID
   The signature component: soft-radius elevated cards, gapped, with an
   arrow glyph pinned bottom-right. Hover lifts the card and deepens the
   shadow - elevation, not a border/background tint, does the work now.
   ========================================================================== */

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
}

.capability {
  position: relative;
  display: block;
  min-height: 280px;
  padding: var(--sp-7) var(--sp-7) var(--sp-14);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-soft-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-card-resting);
  transition: box-shadow var(--dur-mid) var(--ease),
              transform var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease);
}
.capability:hover {
  /* Hairline accent ring replaces the edge that border-color:transparent
     removes right as the card lifts, so it never loses definition. */
  box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(0, 80, 176, 0.10);
  border-color: transparent;
  transform: translateY(-6px);
}

.capability__index {
  display: block;
  color: var(--c-accent-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
}
.capability__title {
  margin: var(--sp-16) 0 var(--sp-3);
  color: var(--c-ink);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading-sm);
  letter-spacing: -0.01em;
}
.capability__text {
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.capability__arrow {
  position: absolute;
  right: var(--sp-6);
  bottom: var(--sp-6);
  color: var(--c-accent-text);
  font-weight: var(--fw-heavy);
  transition: transform var(--dur-base) var(--ease);
}
.capability:hover .capability__arrow { transform: translateX(4px); }

/* Dark variant */
.section--dark .capability {
  border-color: var(--c-line-dark);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}
.section--dark .capability:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: var(--shadow-glow-accent);
}
.section--dark .capability__index,
.section--dark .capability__arrow { color: var(--c-accent-on-dark); }
.section--dark .capability__title { color: var(--c-white); }
.section--dark .capability__text { color: var(--c-muted-on-dark); }

@media (max-width: 1180px) {
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .capability-grid { grid-template-columns: minmax(0, 1fr); }
  .capability { min-height: 0; }
  .capability__title { margin-top: var(--sp-10); }
}


/* ==========================================================================
   10. NUMBERED CARDS
   ========================================================================== */

.num-card { padding-top: var(--sp-6); border-top: 2px solid var(--c-ink); }

.num-card__index {
  display: block;
  margin-bottom: var(--sp-4);
  color: var(--c-accent-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
}
.num-card__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h4);
  letter-spacing: -0.02em;
}
.num-card__text { color: var(--c-muted); font-size: var(--fs-sm); }
.num-card .text-link { margin-top: var(--sp-5); }

.section--dark .num-card { border-top-color: var(--c-accent-on-dark); }
.section--dark .num-card__index { color: var(--c-accent-on-dark); }
.section--dark .num-card__text { color: var(--c-muted-on-dark); }


/* ==========================================================================
   11. ARTICLE / INSIGHT CARDS
   ========================================================================== */

.article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-soft-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-card-resting);
  transition: box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.article-card:hover {
  box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(0, 80, 176, 0.10);
  transform: translateY(-6px);
}

.article-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-soft);
}
.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.article-card:hover .article-card__media img { transform: scale(1.04); }

.article-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-7);
}
.article-card__tag {
  margin-bottom: var(--sp-4);
  color: var(--c-accent-text);
  font-size: var(--fs-utility);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.article-card__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
}
.article-card__text {
  margin-bottom: var(--sp-5);
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.article-card .text-link { margin-top: auto; align-self: flex-start; }

.article-card__meta {
  margin-bottom: var(--sp-3);
  color: var(--c-muted);
  font-size: var(--fs-xs);
}


/* ==========================================================================
   12. STEP PROCESS
   ========================================================================== */

.step { padding-top: var(--sp-7); border-top: 2px solid var(--c-accent); }

.step__index {
  display: block;
  margin-bottom: var(--sp-5);
  color: var(--c-accent-text);
  font-size: var(--fs-display-s);
  font-weight: var(--fw-black);
  line-height: 1;
}
.step__label {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.step__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h4);
  letter-spacing: -0.02em;
}
.step__text { color: var(--c-muted); font-size: var(--fs-sm); }

.section--dark .step__index,
.section--dark .step__label { color: var(--c-accent-on-dark); }
.section--dark .step__text { color: var(--c-muted-on-dark); }


/* ==========================================================================
   13. REGION CARDS
   ========================================================================== */

.region-card {
  display: block;
  padding: var(--sp-8) var(--sp-7);
  border: 1px solid var(--c-line-dark);
  border-radius: var(--radius-soft-lg);
  background: rgba(255, 255, 255, 0.03);
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.region-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--c-accent-on-dark);
  transform: translateY(-4px);
}
.region-card__index {
  display: block;
  margin-bottom: var(--sp-5);
  color: var(--c-accent-on-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
}
.region-card__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h4);
  letter-spacing: -0.02em;
}
.region-card__text {
  color: var(--c-muted-on-dark);
  font-size: var(--fs-sm);
}

/* Light-ground variant, used on regions.html detail blocks */
.region-block {
  padding: var(--sp-10) 0;
  border-top: var(--border);
}
.region-block:last-child { border-bottom: var(--border); }


/* ==========================================================================
   14. TABS
   ========================================================================== */

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: var(--sp-12);
  border-bottom: var(--border);
}

.tabs__tab {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-7);
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.tabs__tab:hover { color: var(--c-accent-text); }
.tabs__tab[aria-selected="true"] {
  color: var(--c-accent-text);
  border-bottom-color: var(--c-accent-text);
}
.tabs__tab-index {
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
}
.tabs__tab[aria-selected="true"] .tabs__tab-index { color: var(--c-accent-text); }

.tabs__panel[hidden] { display: none; }

.tabs__panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-16);
  align-items: start;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.tag {
  padding: var(--sp-2) var(--sp-4);
  border: var(--border);
  border-radius: var(--radius-pill);
  color: var(--c-accent-text);
  font-size: var(--fs-utility);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .tabs__panel-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .tabs__list { flex-direction: column; align-items: stretch; }
  .tabs__tab {
    justify-content: flex-start;
    border-bottom: var(--border);
    margin-bottom: 0;
  }
  .tabs__tab[aria-selected="true"] {
    border-bottom-color: var(--c-accent-text);
  }
}


/* ==========================================================================
   15. ACCORDION / FAQ
   ========================================================================== */

.accordion { border-top: var(--border); }

.accordion__item { border-bottom: var(--border); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  width: 100%;
  padding: var(--sp-7) 0;
  border: 0;
  background: none;
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  text-align: left;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease);
}
.accordion__trigger:hover { color: var(--c-accent-text); }

.accordion__icon {
  flex: 0 0 auto;
  color: var(--c-accent-text);
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: 1;
  transition: transform var(--dur-base) var(--ease);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-mid) var(--ease);
}
.accordion__panel-inner {
  max-width: 78ch;
  padding-bottom: var(--sp-7);
  color: var(--c-muted);
}

/* FAQ filter chips + search */
.faq-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  margin-bottom: var(--sp-10);
}
.faq-filter {
  padding: var(--sp-3) var(--sp-5);
  border: var(--border);
  border-radius: var(--radius-pill);
  background: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}
.faq-filter:hover { border-color: var(--c-ink); }
.faq-filter[aria-pressed="true"] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
}
.faq-search { flex: 1 1 260px; max-width: 380px; }
.faq-empty { padding: var(--sp-10) 0; color: var(--c-muted); }


/* ==========================================================================
   16. FORMS
   ========================================================================== */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}
.field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; }

.field label,
.field legend,
.form-label {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-utility);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* A checkbox group is a fieldset, so its label is a <legend>. Reset the
   browser's default fieldset chrome so it matches the other fields. */
.field--group {
  min-width: 0;   /* fieldsets default to min-content and break grid layout */
  margin: 0;
  padding: 0;
  border: 0;
}
.field--group legend { padding: 0; }

.field .req { color: var(--c-accent-text); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--sp-4);
  border: var(--border);
  border-radius: var(--radius-soft);
  background: var(--c-white);
  color: var(--c-ink);
  font-family: inherit;
  font-size: var(--fs-body);
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(107, 43, 234, 0.14);
}

.field__hint {
  margin-top: var(--sp-2);
  color: var(--c-muted);
  font-size: var(--fs-xs);
}

.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-3);
}
.field--check input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.field--check label {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
}

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

.form-status {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-soft);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
}
.form-status[hidden] { display: none; }

/* A genuine failure to send is one of the few honest uses of --c-critical:
   something really is wrong and the visitor needs to act on it. */
.form-status[data-state="error"],
.form-status[data-state="fallback"] {
  border-left-color: var(--c-critical);
}

.form-note {
  margin-top: var(--sp-5);
  color: var(--c-muted);
  font-size: var(--fs-xs);
}

.form-panel {
  padding: var(--sp-10);
  border: var(--border);
  border-radius: var(--radius-soft-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-card-resting);
}

@media (max-width: 900px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-panel { padding: var(--sp-6); }
}


/* ==========================================================================
   17. CTA BAND
   ========================================================================== */

.cta-band {
  position: relative;
  z-index: 0;
  overflow: hidden; /* contains the blurred ::after glow below - filter:blur()
                        is not clipped by an element's own box, only by an
                        ancestor's overflow */
  padding: var(--section-y) 0;
  background: var(--bg-dark);
  color: var(--c-white);
  text-align: center;
}

/* Signature premium touch - static ambient bloom behind the CTA content.
   Pure CSS, no motion, so it needs no reduced-motion guard. Paints after
   the existing .cta-band::before network texture (layout.css) in DOM
   order, so the glow sits above the texture and below .cta-band__inner. */
.cta-band::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--glow-cta);
  filter: blur(60px);
  pointer-events: none;
}

.cta-band__inner {
  max-width: 900px;
  margin-inline: auto;
}
.cta-band__title { margin-bottom: var(--sp-6); }
.cta-band__text {
  margin-bottom: var(--sp-10);
  color: var(--c-muted-on-dark);
  font-size: var(--fs-lead);
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
}


/* ==========================================================================
   18. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--bg-dark-2);
  color: var(--c-white);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr));
  gap: var(--sp-10);
  padding: var(--sp-16) 0;
}

.footer-brand img { width: 200px; margin-bottom: var(--sp-6); }
.footer-brand p {
  max-width: 34ch;
  color: var(--c-muted-on-dark);
  font-size: var(--fs-sm);
}

.footer-col h3 {
  margin-bottom: var(--sp-5);
  color: var(--c-accent-on-dark);
  font-size: var(--fs-utility);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.footer-col li { margin-bottom: var(--sp-3); }
.footer-col a {
  color: var(--c-muted-on-dark);
  font-size: var(--fs-sm);
  transition: color var(--dur-fast) var(--ease);
}
.footer-col a:hover { color: var(--c-white); }

.footer-contact li {
  margin-bottom: var(--sp-3);
  color: var(--c-muted-on-dark);
  font-size: var(--fs-sm);
}
.footer-contact a:hover { color: var(--c-white); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-7) 0;
  border-top: var(--border-dark);
  color: var(--c-muted-on-dark);
  font-size: var(--fs-xs);
}
.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}
.footer-bottom a:hover { color: var(--c-white); }

@media (max-width: 1180px) {
  .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
}


/* ==========================================================================
   19. DIAGRAM PANEL
   ========================================================================== */

.diagram {
  padding: var(--sp-10);
  border: var(--border);
  border-radius: var(--radius-soft-lg);
  background: var(--bg-soft);
}
.diagram__label {
  margin-bottom: var(--sp-6);
  color: var(--c-accent-text);
  font-size: var(--fs-utility);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.diagram__rows { display: grid; gap: var(--sp-4); }
.diagram__row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--sp-5);
  align-items: baseline;
  padding: var(--sp-5) 0;
  border-top: var(--border);
}
.diagram__row-index {
  color: var(--c-accent-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
}
.diagram__row-title {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.diagram__row-text {
  margin-top: var(--sp-2);
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

.section--dark .diagram {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--c-line-dark);
}
.section--dark .diagram__label,
.section--dark .diagram__row-index { color: var(--c-accent-on-dark); }
.section--dark .diagram__row { border-top-color: var(--c-line-dark); }
.section--dark .diagram__row-text { color: var(--c-muted-on-dark); }


/* ==========================================================================
   20. PROSE  (legal, privacy, article body)
   ========================================================================== */

.prose { max-width: 78ch; }
.prose h2 {
  margin: var(--sp-14) 0 var(--sp-5);
  font-size: var(--fs-display-s);
  letter-spacing: var(--ls-display);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin: var(--sp-10) 0 var(--sp-4);
  font-size: var(--fs-h4);
  letter-spacing: -0.02em;
}
.prose p,
.prose li { color: var(--c-muted); }
.prose ul {
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-5);
  list-style: disc;
}
.prose li { margin-bottom: var(--sp-3); }
.prose a {
  color: var(--c-accent-text);
  border-bottom: 1px solid currentColor;
}
.prose__meta {
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-6);
  border-bottom: var(--border);
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

/* Table of contents for long legal pages */
.toc {
  padding: var(--sp-7);
  border: var(--border);
  border-radius: var(--radius-soft);
  background: var(--bg-soft);
}
.toc h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.toc li { margin-bottom: var(--sp-3); }
.toc a {
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.toc a:hover { color: var(--c-accent-text); }


/* ==========================================================================
   21. CASE STUDY
   Six-field breakdown (challenge / environment / solution / technology /
   implementation / results) plus a customer-outcome callout. Tondnet-added
   archetype component - the reference has no equivalent.
   ========================================================================== */

.case-study {
  padding: var(--sp-12);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-soft-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-card-resting);
}
.case-study + .case-study { margin-top: var(--sp-10); }

.case-study__index {
  display: block;
  margin-bottom: var(--sp-4);
  color: var(--c-accent-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
}
.case-study__head .tag { margin-bottom: var(--sp-4); }
.case-study__head h3 { margin-bottom: var(--sp-4); }

.case-study__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-8);
  margin-top: var(--sp-10);
  padding-top: var(--sp-10);
  border-top: var(--border);
}
.case-study__label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--c-accent-text);
  font-size: var(--fs-utility);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.case-study__field p { color: var(--c-muted); font-size: var(--fs-sm); }

.case-study__outcome {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: var(--border);
}
.case-study__outcome p {
  color: var(--c-ink);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading-sm);
  letter-spacing: -0.01em;
}

.case-study__tech {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

@media (max-width: 1180px) {
  .case-study__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .case-study { padding: var(--sp-8); }
  .case-study__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}


/* ==========================================================================
   22. PARTNER LOGO WALL
   Grouped by category, CMS-friendly - add or remove a tile without
   touching layout. Tondnet-added archetype component.
   ========================================================================== */

.partner-group { margin-bottom: var(--sp-14); }
.partner-group:last-child { margin-bottom: 0; }

.partner-group__title {
  margin-bottom: var(--sp-6);
  color: var(--c-muted);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-5);
}

.partner-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-soft);
  background: var(--c-surface);
  transition: box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.partner-tile:hover {
  box-shadow: var(--shadow-card-resting);
  border-color: transparent;
  transform: translateY(-2px);
}
.partner-tile img {
  max-width: 100%;
  max-height: 36px;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.partner-tile:hover img { filter: grayscale(0); opacity: 1; }

@media (max-width: 1180px) {
  .partner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   23. CONNECTIVITY MAP  (South Africa -> Africa -> Global)
   Tiered card row + connector rail, built so a new market is one more chip.
   Tondnet-added component for the Africa/global positioning section.
   ========================================================================== */

.map-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}

.map-tier {
  padding: var(--sp-8) var(--sp-7);
  border: 1px solid var(--c-line-dark);
  border-radius: var(--radius-soft-lg);
  background: rgba(255, 255, 255, 0.03);
}
.map-tier__index {
  display: block;
  margin-bottom: var(--sp-4);
  color: var(--c-accent-on-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
}
.map-tier__title {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
}
.map-tier__text {
  margin-bottom: var(--sp-6);
  color: var(--c-muted-on-dark);
  font-size: var(--fs-sm);
}
.map-tier__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.map-tier__chip {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-line-dark);
  border-radius: var(--radius-pill);
  color: var(--c-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.map-tier__chip--ghost {
  border-style: dashed;
  color: var(--c-muted-on-dark);
}

@media (max-width: 900px) {
  .map-tier-grid { grid-template-columns: minmax(0, 1fr); }
}