/* ============================================================
   ANBC — Angola Norway Business Council
   Visual foundation: design tokens + base styles + hero
   ============================================================ */

/* ------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------ */
:root {
  /* Brand palette — lighter, diplomatic blue direction */
  --color-navy: #0B2545;        /* deep navy (header, anchors) */
  --color-blue: #1F6FBF;        /* diplomatic blue (primary actions) */
  --color-blue-light: #5BA7E5;  /* peace blue (accents, focus) */
  --color-blue-pale: #EAF4FF;   /* pale blue (section tints) */
  --color-surface: #F3F7FC;     /* soft blue-grey (page background) */
  --color-red: #D7193F;         /* red accent — used sparingly */
  --color-red-dark: #B01433;
  --color-panel: #0A3D91;       /* deep clear blue (service panel surface) */
  --color-charcoal: #172033;
  --color-white: #FFFFFF;

  /* Legacy aliases (older rules reference these) */
  --color-primary: var(--color-blue);
  --color-primary-dark: var(--color-navy);
  --color-primary-light: var(--color-blue-light);
  --color-accent: var(--color-red);
  --color-accent-dark: var(--color-red-dark);
  --color-off-white: var(--color-surface);

  /* Text on dark surfaces */
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.78);

  /* Text on light surfaces */
  --color-text: #172033;
  --color-text-muted: #46556E;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Spacing & layout */
  --container-max: 72rem;
  --container-pad: 1.5rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;

  /* Static header height — used to size the Oslo hero panel so that
     header + Oslo together cover roughly the first screen. Overridden on
     desktop (the header grows there). */
  --site-header-height: 4.5rem;
  --hero-oslo-height: calc(100svh - var(--site-header-height));

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(91, 167, 229, 0.6);
}

/* ------------------------------------------------------------
   2. Base / reset
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-off-white);
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
}

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

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

/* ------------------------------------------------------------
   3. Header
   ------------------------------------------------------------ */
.site-header {
  position: relative; /* anchor for the mobile nav panel */
  background-color: var(--color-white);
  border-top: 2px solid var(--color-red); /* thin institutional accent */
  border-bottom: 1px solid rgba(11, 37, 69, 0.12);
  box-shadow: 0 1px 4px rgba(11, 37, 69, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem; /* ~68px mobile */
  padding-block: 0.5rem;
}

/* Brand lockup: wordmark on larger screens, icon alone on small */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  text-decoration: none;
}

.brand__icon {
  display: block;
  height: 2.5rem; /* ~40px mobile */
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.brand__wordmark {
  display: block;
  height: 2.75rem; /* ~44px mobile */
  width: auto;
  object-fit: contain;
}

/* Very narrow screens: keep the icon, drop the wordmark */
@media (max-width: 23.75rem) {
  .brand__wordmark {
    display: none;
  }
}

.brand:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Main navigation — dropdown panel on mobile, inline row on desktop */
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: var(--color-white);
  border-bottom: 1px solid rgba(11, 37, 69, 0.12);
  padding: 0.5rem 0 0.875rem;
}

.site-nav.is-open {
  display: block;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
}

.site-nav__link {
  display: block;
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(11, 37, 69, 0.78);
  text-decoration: none;
  text-underline-offset: 0.4em;
}

.site-nav__link:hover {
  color: var(--color-blue);
}

.site-nav__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

/* current page: navy + thin red underline, matching the lang switcher */
.site-nav__link[aria-current="page"] {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-red);
}

/* Dropdown groups — static open lists on mobile, hover/focus menus on desktop */
.site-nav__item {
  position: relative;
}

.site-nav__item--has-menu > .site-nav__link::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  opacity: 0.55;
}

.site-nav__menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0.375rem 0.875rem; /* indent the open group under its label */
  display: flex;
  flex-direction: column;
}

.site-nav__sublink {
  display: block;
  padding: 0.4375rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(11, 37, 69, 0.68);
  text-decoration: none;
}

.site-nav__sublink:hover {
  color: var(--color-blue);
}

.site-nav__sublink:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

.site-nav__sublink[aria-current="page"] {
  color: var(--color-navy);
  font-weight: 600;
}

/* Mobile menu button — plain, flat */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border: 1px solid rgba(11, 37, 69, 0.18);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 1.125rem;
  height: 2px;
  background-color: var(--color-navy);
}

.nav-toggle:hover {
  border-color: rgba(31, 111, 191, 0.5);
}

.nav-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (min-width: 64rem) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    position: static;
    background: transparent;
    border-bottom: none;
    padding: 0;
    margin-left: auto;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 0;
  }

  .site-nav__link {
    padding: 0.375rem 0;
    font-size: 0.875rem;
  }

  /* Desktop dropdown card: white surface, navy text, discreet border + shadow */
  .site-nav__menu {
    position: absolute;
    top: 100%;
    left: -0.75rem;
    min-width: 13.5rem;
    padding: 0.375rem 0;
    background-color: var(--color-white);
    border: 1px solid rgba(11, 37, 69, 0.12);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 28px rgba(11, 37, 69, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.375rem);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
    z-index: 60;
  }

  .site-nav__item--has-menu:hover > .site-nav__menu,
  .site-nav__item--has-menu:focus-within > .site-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav__sublink {
    padding: 0.5rem 1.125rem;
    color: var(--color-navy);
    white-space: nowrap;
    border-left: 2px solid transparent;
  }

  .site-nav__sublink:hover {
    background-color: var(--color-blue-pale);
    color: var(--color-navy);
    border-left-color: var(--color-red); /* discreet red accent on hover */
  }
}

/* Dropdown slide is decorative — drop it for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-nav__menu {
    transition: none;
    transform: none;
  }
}

/* Language switcher */
/* Quiet, typographic language toggle: EN / NO — no boxes */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  margin-left: 1rem;
}

.lang-switcher__btn {
  /* generous hit area without looking like a button */
  min-height: 2.25rem;
  padding: 0.25rem 0.125rem;
  border: none;
  background: transparent;
  color: rgba(11, 37, 69, 0.55);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 0.35em;
  transition: color 150ms ease;
}

.lang-switcher__btn:hover {
  color: var(--color-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.lang-switcher__btn:focus-visible {
  outline: 2px solid var(--color-blue-light);
  outline-offset: 2px;
  border-radius: 2px;
}

.lang-switcher__btn.is-active {
  color: var(--color-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-red); /* small red identity marker */
}

.lang-switcher__sep {
  color: rgba(11, 37, 69, 0.3);
  font-size: 0.8125rem;
  font-weight: 400;
  user-select: none;
}

/* ------------------------------------------------------------
   4. Hero — vertical Oslo → Luanda sequence
   ------------------------------------------------------------ */
.hero {
  position: relative;
  background-color: var(--color-navy);
  color: var(--color-text-on-dark);
}

.hero-sequence {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Each panel ≈ one viewport; Oslo first, Luanda second */
.hero-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 85svh;
  overflow: hidden;
}

/* Oslo + the static header together fill roughly the first screen, so very
   little of Luanda peeks in before the user scrolls. */
.hero-panel--oslo {
  min-height: var(--hero-oslo-height);
}

/* 1px overlap removes the hairline seam where the two videos meet */
.hero-panel--luanda {
  margin-top: -1px;
}

.hero-panel__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Neutral navy base — the fallback shown only in the brief gap after the
     still is suppressed and before the video fades in (video clients). It is
     fully covered once the still or the video paints, so it never changes the
     hero look; it only guarantees a navy (never white/blank) load state. */
  background-color: var(--color-navy);
}

.hero-panel__media img,
.hero-panel__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) brightness(0.82);
}

.hero-panel--oslo .hero-panel__media img,
.hero-panel--oslo .hero-panel__media video {
  object-position: center 42%;
}

.hero-panel--luanda .hero-panel__media img,
.hero-panel--luanda .hero-panel__media video {
  object-position: center 42%;
}

.hero__still {
  display: block;
}

/* On clients that will autoplay the hero video (tablet/desktop with motion
   allowed — same condition as the guard in initHeroVideo), don't paint the
   still image at all. This stops the still photo from flashing for ~1s
   before the video fades in on refresh/load. The navy media base above
   covers the gap until the video appears. Mobile and reduced-motion keep
   the still visible — no video loads there, so it stays the correct still
   fallback. Gated on .js (added in <head> before paint) so no-JS clients,
   which never load the video, always keep the still. */
@media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .js .hero__still {
    opacity: 0;
  }
}

.hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms ease;
}

.hero__video.is-playing {
  opacity: 1;
}

.hero-panel__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Navy overlays lightened ~15% (same gradient shape, lower alpha) so the
   video/photo reads through more clearly. Top stops stay dark enough to keep
   white hero text + CTAs legible; tune the alphas here if more/less is wanted. */
.hero-panel--oslo .hero-panel__overlay {
  background: linear-gradient(
    180deg,
    rgba(11, 37, 69, 0.76) 0%,
    rgba(11, 37, 69, 0.64) 45%,
    rgba(11, 37, 69, 0.52) 100%
  );
}

.hero-panel--luanda .hero-panel__overlay {
  background: linear-gradient(
    180deg,
    rgba(11, 37, 69, 0.75) 0%,
    rgba(11, 37, 69, 0.44) 50%,
    rgba(11, 37, 69, 0.55) 100%
  );
}

/* Soft navy band across the Oslo → Luanda seam: Oslo fades down into navy,
   Luanda fades up out of navy. Together they bind the two videos without a
   hard horizontal line — no glow, no large decorative transition. */
.hero-panel--oslo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6rem;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(11, 37, 69, 0.85) 100%
  );
}

.hero-panel--luanda::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6rem;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11, 37, 69, 0.9) 0%,
    transparent 100%
  );
}

/* Hero copy — overlay over the Oslo panel; JS pins it across Oslo → Luanda.
   It sits at the top of the sequence and is moved only with translateY, so
   there is never a horizontal jump between normal / pinned / stopped states. */
.hero-copy {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  min-height: var(--hero-oslo-height); /* matches the Oslo panel so the text rests centered on Oslo */
  padding-block: 1.5rem;
  pointer-events: none; /* clicks fall through except on the text / CTAs */
  will-change: transform;
}

.hero-copy .container {
  width: 100%;
}

.hero-copy .hero__content {
  pointer-events: auto; /* keep the CTAs and copy interactive */
}

/* Gentle shadow keeps the copy legible over both the Oslo and Luanda video */
.hero-copy .hero__eyebrow,
.hero-copy .hero__heading,
.hero-copy .hero__lead {
  text-shadow: 0 2px 18px rgba(8, 24, 48, 0.45);
}

/* Decorative place marker — a short vertical line in the right third of the
   hero, centered on the seam between the Oslo and Luanda panels. Hidden on
   mobile (display:block is re-enabled at the 48rem breakpoint). */
.hero-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: none;
}

.hero-link__inner {
  position: absolute;
  /* Anchor the marker's center to the Oslo/Luanda seam (= Oslo panel height),
     so the middle of the line lands exactly in the gap between the panels and
     each end dot reaches a little into its own panel. */
  top: var(--hero-oslo-height);
  right: clamp(2rem, 12vw, 7rem); /* inset from the edge, right third */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  text-align: center;
}

.hero-link__point {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hero-link__city {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(11, 37, 69, 0.6);
}

.hero-link__meta {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 6px rgba(11, 37, 69, 0.6);
}

/* Short line with a dot at each end; Luanda (bottom) carries the red accent */
.hero-link__line {
  width: 1px;
  height: 8rem;
  background-color: rgba(143, 198, 245, 0.45);
  position: relative;
}

.hero-link__line::before,
.hero-link__line::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.hero-link__line::before {
  top: -2px;
  background-color: rgba(255, 255, 255, 0.75);
}

.hero-link__line::after {
  bottom: -2px;
  background-color: var(--color-red);
}

.hero__content {
  animation: hero-content-in 900ms ease-out both;
}

@keyframes hero-content-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.875rem;
}

.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background-color: rgba(215, 25, 63, 0.65);
  vertical-align: middle;
  margin-right: 0.625rem;
}

.hero__heading {
  font-size: clamp(1.625rem, 2.8vw + 0.5rem, 2.5rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 26ch;
}

.hero__heading-accent {
  color: #8FC6F5;
}

/* Country names in the heading inherit the heading colour by default; the one
   matching the active panel turns ANBC red. Colour only — no size change, no
   glow, no layout shift. */
.hero-country {
  color: inherit;
  transition: color 180ms ease;
}

.hero[data-active-location="norway"] .hero-country--norway,
.hero[data-active-location="angola"] .hero-country--angola {
  color: var(--color-red);
}

@media (prefers-reduced-motion: reduce) {
  .hero-country {
    transition: none;
  }
}

.hero__lead {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 48ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Mobile: keep panels stacked; copy rests normally on Oslo (pin disabled in JS) */
@media (max-width: 47.99rem) {
  .hero-copy {
    padding-block: 2.5rem 3rem;
  }
}

/* ------------------------------------------------------------
   5. What ANBC does — tabbed service selector
   ------------------------------------------------------------ */
.what-we-do {
  background-color: var(--color-white);
  padding-block: 4rem 4.5rem;
  border-top: 1px solid rgba(11, 37, 69, 0.08);
  overflow-x: clip; /* full-bleed panel must not cause a horizontal scrollbar */
}

.section-intro {
  max-width: 40rem;
}

.section-intro__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: 0.75rem;
}

/* small red identity dash before every section label (mirrors the hero) */
.section-intro__eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background-color: rgba(215, 25, 63, 0.65);
  vertical-align: middle;
  margin-right: 0.625rem;
}

.section-intro__heading {
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-primary-dark);
}

.section-intro__lead {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Tab navigation */
.service-tabs {
  margin-top: 2.5rem;
}

.service-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.service-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.625rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(31, 111, 191, 0.25);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-blue);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease,
    color 150ms ease;
}

.service-tab:hover {
  border-color: rgba(31, 111, 191, 0.5);
  background-color: var(--color-blue-pale);
}

.service-tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.service-tab[aria-selected="true"],
.service-tab.is-active {
  background-color: var(--color-panel);
  border-color: var(--color-panel);
  color: var(--color-white);
}

/* Duotone icons: primary strokes in currentColor, secondary detail
   strokes at 45% opacity inside the SVGs themselves */
.service-tab__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-blue); /* matches the tab text */
}

.service-tab__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.service-tab[aria-selected="true"] .service-tab__icon,
.service-tab.is-active .service-tab__icon {
  color: var(--color-white);
}

.service-tab__label {
  text-align: left;
}

/* Content panel — flat deep blue surface */
.service-tabs__panels {
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-panel);
}

.service-panel {
  display: grid;
  grid-template-columns: 1fr;
}

.service-panel__visual {
  position: relative;
  min-height: 14rem;
  background-color: var(--color-panel);
  border-bottom: 2px solid rgba(215, 25, 63, 0.55); /* subtle red divider */
  overflow: hidden;
}

.service-panel__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8);
}

/* Subtle blue tint ties the photos to the panel surface */
.service-panel__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(10, 61, 145, 0.22);
}

.service-panel__content {
  padding: 2rem 1.5rem 2.25rem;
  background-color: var(--color-panel);
  color: var(--color-text-on-dark);
}

.service-panel__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.service-panel__text {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 52ch;
}

.service-panel__list {
  margin: 1.25rem 0 0;
  padding: 0 0 0 1.125rem;
  list-style: disc;
}

.service-panel__list li {
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0.375rem;
}

.service-panel__list li::marker {
  color: var(--color-blue-light);
}

/* Panel CTA: white pill with blue label and a plain right arrow */
.btn--panel {
  margin-top: 1.5rem;
  min-height: 2.75rem;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: var(--color-white);
  color: var(--color-blue);
  border: 1px solid var(--color-white);
  border-radius: 999px;
}

.btn--panel::after {
  content: "\2192"; /* → */
  margin-left: 0.5rem;
  font-weight: 500;
  transition: transform 150ms ease;
}

.btn--panel:hover {
  background-color: var(--color-blue-pale);
  border-color: var(--color-blue-pale);
  color: #185A9D;
}

.btn--panel:hover::after {
  transform: translateX(3px);
}

/* Scroll animations: staggered tab slide-in */
@keyframes tab-slide-in {
  from {
    opacity: 0;
    transform: translate3d(calc(-1 * min(45vw, 420px)), 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.js .service-tabs__nav.is-tabs-visible .service-tab {
  animation: tab-slide-in 780ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.js .service-tabs__nav.is-tabs-visible .service-tab:nth-child(1) { animation-delay: 0ms; }
.js .service-tabs__nav.is-tabs-visible .service-tab:nth-child(2) { animation-delay: 100ms; }
.js .service-tabs__nav.is-tabs-visible .service-tab:nth-child(3) { animation-delay: 200ms; }
.js .service-tabs__nav.is-tabs-visible .service-tab:nth-child(4) { animation-delay: 300ms; }
.js .service-tabs__nav.is-tabs-visible .service-tab:nth-child(5) { animation-delay: 400ms; }

/* Scroll-driven shrink on the content panel: starts full-bleed at 100vw,
   scrubs down to 92% (~container width) as it rises through the viewport.
   JS drives --service-scroll-scale and toggles .service-scroll-active. */
.js .service-tabs__panels.service-scroll-active {
  transform: scale(var(--service-scroll-scale, 1));
  transform-origin: center center;
  transition: none; /* direct scrubbing, follows scroll 1:1 */
  will-change: transform;
}

@media (min-width: 1025px) {
  /* Full-bleed starting point: the panel breaks out of the container;
     tabs and section heading stay inside it */
  .js .service-tabs__panels.service-scroll-active {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* ------------------------------------------------------------
   6. Who ANBC serves
   ------------------------------------------------------------ */
.who-we-serve {
  background-color: var(--color-surface);
  padding-block: 4rem 4.5rem;
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

/* Horizontal carousel of audience cards */
.audience-carousel {
  position: relative;
  margin-top: 2.5rem;
}

.audience-carousel__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none; /* arrows + touch take over; keep it visually clean */
}

.audience-carousel__track::-webkit-scrollbar {
  display: none;
}

/* Big calm blue cards, white text — one card + a peek of the next on mobile.
   Same deep blue surface as the "What ANBC does" panel for consistency. */
.audience-card {
  flex: 0 0 86%;
  scroll-snap-align: start;
  background-color: var(--color-panel);
  border-radius: 0.875rem;
  padding: 2rem 1.75rem 2.25rem;
  display: flex;
  flex-direction: column;
}

/* short red accent bar at the top of each card */
.audience-card::before {
  content: "";
  display: block;
  width: 2rem;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 1.25rem;
  background-color: var(--color-red);
}

.audience-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-white);
}

.audience-card__text {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}

/* Round white arrow buttons with a blue glyph */
.audience-carousel__controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.audience-carousel__arrow {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid rgba(11, 37, 69, 0.18);
  color: var(--color-blue);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease,
    opacity 150ms ease;
}

/* red hover detail — part of the ANBC accent language */
.audience-carousel__arrow:hover:not(:disabled) {
  border-color: var(--color-red);
  color: var(--color-red);
}

.audience-carousel__arrow:active:not(:disabled) {
  color: var(--color-red-dark);
  border-color: var(--color-red-dark);
}

.audience-carousel__arrow:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.audience-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Pagination dots — built by JS (initAudienceCarousel) and sat between the
   cards and the arrow controls. One dot per card; the active one marks the
   leftmost card in view. Centered so it reads cleanly on mobile and desktop. */
.audience-carousel__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.125rem;
  margin-top: 1.25rem;
}

/* The button is a generous touch target; the visible dot is the ::before. */
.audience-carousel__dot {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}

.audience-carousel__dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: rgba(11, 37, 69, 0.22);
  transition: background-color 150ms ease, transform 150ms ease;
}

.audience-carousel__dot:hover::before {
  background-color: rgba(11, 37, 69, 0.45);
}

/* Active dot: brand blue + slightly larger. Colour carries the state, so it
   stays clear even where the scale transition is suppressed. */
.audience-carousel__dot.is-active::before {
  background-color: var(--color-blue);
  transform: scale(1.35);
}

.audience-carousel__dot:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.who-we-serve__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 2.5rem;
}

.who-we-serve__cta-question {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

/* Solid blue pill with a plain right arrow (same system as panel CTA) */
.btn--serve {
  min-height: 2.75rem;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: var(--color-blue);
  color: var(--color-white);
  border: 1px solid var(--color-blue);
  border-radius: 999px;
}

.btn--serve::after {
  content: "\2192"; /* → */
  margin-left: 0.5rem;
  font-weight: 500;
  transition: transform 150ms ease;
}

.btn--serve:hover {
  background-color: #185A9D;
  border-color: #185A9D;
}

.btn--serve:hover::after {
  transform: translateX(3px);
}

/* ------------------------------------------------------------
   7. Focus sectors
   ------------------------------------------------------------ */
.focus-sectors {
  background-color: var(--color-white);
  padding-block: 4rem 4.5rem;
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

.focus-sectors__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.focus-sectors__cta {
  margin-top: 1.75rem;
}

.sector-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sector-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding-block: 1.375rem;
  border-top: 1px solid rgba(11, 37, 69, 0.12);
}

.sector-item:last-child {
  border-bottom: 1px solid rgba(11, 37, 69, 0.12);
}

.sector-item__num {
  min-width: 1.75rem;
  padding-top: 0.1875rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(215, 25, 63, 0.75); /* small red marker */
}

.sector-item__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-navy);
}

.sector-item__link {
  color: inherit;
  text-decoration: none;
}

.sector-item__link:hover {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sector-item__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

.sector-item__text {
  margin-top: 0.375rem;
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 56ch;
}

/* ------------------------------------------------------------
   7b. How ANBC operates
   ------------------------------------------------------------ */
.how-we-operate {
  background-color: var(--color-surface);
  padding-block: 4rem 4.5rem;
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

/* Four numbered process cards — structured flow with connectors */
.process-steps {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
}

.process-step {
  position: relative;
  display: flex;
  min-width: 0;
}

/* Mobile: subtle vertical connector between steps */
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.75rem;
  top: 100%;
  width: 1px;
  height: 1rem;
  background-color: rgba(11, 37, 69, 0.12);
  pointer-events: none;
}

.process-step__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  border: 1px solid rgba(11, 37, 69, 0.12);
  border-top: 2px solid rgba(215, 25, 63, 0.6);
  border-radius: var(--radius-md);
  padding: 1.625rem 1.5rem 1.75rem;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.process-step__card:hover {
  border-color: rgba(11, 37, 69, 0.18);
  background-color: rgba(255, 255, 255, 0.98);
}

.process-step__num {
  display: block;
  font-size: clamp(1.375rem, 2vw + 0.5rem, 1.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-navy);
}

.process-step__num::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  margin-top: 0.625rem;
  background-color: rgba(215, 25, 63, 0.65);
}

.process-step__title {
  margin-top: 0.875rem;
  font-size: 1.03125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
}

.process-step__text {
  margin-top: 0.625rem;
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.how-we-operate__cta-row {
  margin-top: 2.25rem;
}

/* ------------------------------------------------------------
   7b1. Impact areas (index.html)
   ------------------------------------------------------------ */
.impact {
  background-color: var(--color-white);
  padding-block: 4rem 4.5rem;
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

.impact-grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.impact-card {
  background-color: var(--color-surface);
  border: 1px solid rgba(11, 37, 69, 0.12);
  border-top: 2px solid rgba(215, 25, 63, 0.6); /* small red accent */
  border-radius: var(--radius-md);
  padding: 1.625rem 1.5rem 1.75rem;
}

.impact-card__title {
  font-size: 1.03125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
}

.impact-card__text {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.impact__cta-row {
  margin-top: 2.25rem;
}

/* ------------------------------------------------------------
   7b2. Trust & leadership
   ------------------------------------------------------------ */
.trust {
  background-color: var(--color-white);
  padding-block: 4rem 4.5rem;
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

.trust__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* Four quiet trust points — typographic, with a red identity dash */
.trust-points {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2rem;
}

.trust-point__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
}

.trust-point__title::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 2px;
  margin-bottom: 0.625rem;
  background-color: rgba(215, 25, 63, 0.65); /* small red marker */
}

.trust-point__text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Leadership preview panel — full presentation lives on about.html */
.trust__leadership {
  background-color: var(--color-surface);
  border: 1px solid rgba(11, 37, 69, 0.1);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem 2rem;
}

.trust__lead-heading {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-navy);
}

.trust__lead-text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.lead-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.lead-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-block: 0.75rem;
  border-top: 1px solid rgba(11, 37, 69, 0.1);
}

.lead-item:last-child {
  border-bottom: 1px solid rgba(11, 37, 69, 0.1);
}

/* Initials avatar — neutral, no placeholder portraits on the front page */
.lead-item__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: var(--color-white);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lead-item__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lead-item__name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
}

.lead-item__role {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.trust__cta {
  margin-top: 1.75rem;
}

/* ------------------------------------------------------------
   7b3. Membership & Partnership
   ------------------------------------------------------------ */
.membership {
  background-color: var(--color-surface);
  padding-block: 4rem 4.5rem;
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

.membership-cards {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Deep blue action cards — same panel blue as "What ANBC does" */
.membership-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-panel);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem 2.25rem;
}

.membership-card__num {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(215, 25, 63, 0.85); /* small red marker */
}

.membership-card__title {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-white);
}

.membership-card__text {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  flex: 1;
}

.membership-card__cta {
  margin-top: 1.5rem;
  align-self: flex-start;
}

.membership__note {
  margin-top: 2rem;
  max-width: 56ch;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------
   7c. News & Insights
   ------------------------------------------------------------ */
.news-teaser {
  background-color: var(--color-white);
  padding-block: 4rem 4.5rem;
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

.news-teaser__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.news-teaser__cta {
  flex-shrink: 0;
}

.news-grid {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Editorial card: media area, meta, title, excerpt — whole card is a link */
.news-card {
  background-color: var(--color-white);
  border: 1px solid rgba(11, 37, 69, 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 150ms ease;
}

.news-card:hover {
  border-color: rgba(31, 111, 191, 0.45);
}

.news-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.news-card__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Editorial media field — real (currently temporary) article images fill it.
   The blue-pale background shows only while the image loads; the small red
   accent line below the image is kept. */
.news-card__media {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blue-pale);
  border-bottom: 2px solid rgba(215, 25, 63, 0.45); /* small red accent */
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card__body {
  padding: 1.25rem 1.25rem 1.5rem;
}

.news-card__meta {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
}

.news-card__title {
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
}

.news-card__link:hover .news-card__title {
  color: var(--color-blue);
}

.news-card__excerpt {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Placeholder news cards on news.html — no article URL yet */
.news-card--static {
  cursor: default;
}

.news-card--static:hover {
  border-color: rgba(11, 37, 69, 0.12);
}

.news-card__link--static {
  pointer-events: none;
}

.news-card__link--static .news-card__title {
  color: var(--color-navy);
}

/* ------------------------------------------------------------
   7d. Subpage hero (news.html, about.html, contact.html)
   ------------------------------------------------------------ */
.page-hero {
  background-color: var(--color-surface);
  padding-block: 3.5rem 3rem;
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}

.page-hero__heading {
  margin-top: 0.25rem;
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy);
}

.page-hero__lead {
  margin-top: 0.875rem;
  max-width: 56ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* About page — editorial sections */
.about-section {
  padding-block: 3rem 3.25rem;
  background-color: var(--color-white);
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}

.about-section--alt {
  background-color: var(--color-surface);
}

.about-section__eyebrow {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
}

.about-section__heading {
  font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-navy);
}

/* Development roadmap (about.html) — numbered steps that wrap responsively */
.roadmap-steps {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.roadmap-step {
  background-color: var(--color-white);
  border: 1px solid rgba(11, 37, 69, 0.12);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.375rem 1.625rem;
}

.roadmap-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background-color: var(--color-navy);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.roadmap-step__title {
  margin-top: 0.875rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
}

.roadmap-step__title::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 2px;
  margin-bottom: 0.5rem;
  background-color: rgba(215, 25, 63, 0.65); /* small red marker */
}

.roadmap-step__text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* On --alt surface sections the cards switch to white for contrast; the
   roadmap sits on a white section so its cards use the soft surface tint. */
.roadmap.about-section {
  background-color: var(--color-white);
}

.roadmap .roadmap-step {
  background-color: var(--color-surface);
}

.about-section__text {
  margin-top: 0.75rem;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.about-section__list {
  list-style: none;
  margin: 1.125rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-width: 62ch;
}

.about-section__list li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-charcoal);
}

.about-section__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-blue);
}

.about-section .trust-points {
  margin-top: 1.75rem;
}

.about-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

.about-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-blue);
  text-decoration: none;
}

.about-link::after {
  content: "\2192";
  margin-left: 0.375rem;
  font-weight: 500;
  transition: transform 150ms ease;
}

.about-link:hover {
  color: #185A9D;
}

.about-link:hover::after {
  transform: translateX(0.125rem);
}

.about-link:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.about-lead-grid {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}

.about-lead-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background-color: var(--color-surface);
  border: 1px solid rgba(11, 37, 69, 0.1);
  border-radius: var(--radius-md);
}

.about-section--alt .about-lead-card {
  background-color: var(--color-white);
}

.about-lead-card__body {
  min-width: 0;
}

.about-lead-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
}

.about-lead-card__role {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.news-archive {
  background-color: var(--color-white);
  padding-block: 3.5rem 4.5rem;
}

/* ------------------------------------------------------------
   7f. Contact page
   ------------------------------------------------------------ */
.contact-page {
  background-color: var(--color-white);
  padding-block: 3.5rem 4.5rem;
}

.contact-page__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

.contact-page__heading {
  margin-top: 0.25rem;
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy);
}

.contact-page__lead {
  margin-top: 0.875rem;
  max-width: 42ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.contact-info {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(11, 37, 69, 0.1);
}

.contact-info__heading {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
}

.contact-info__heading::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 2px;
  margin-bottom: 0.625rem;
  background-color: rgba(215, 25, 63, 0.65);
}

.contact-info__body {
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-charcoal);
}

.contact-info__name {
  font-weight: 600;
  color: var(--color-navy);
}

.contact-info__link {
  color: var(--color-blue);
  text-decoration: none;
}

.contact-info__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.contact-info__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

.contact-info__location {
  color: var(--color-text-muted);
}

.contact-info__note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Form panel — flat white card */
.contact-form-panel {
  background-color: var(--color-white);
  border: 1px solid rgba(11, 37, 69, 0.12);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem 2rem;
}

.contact-form-panel__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-navy);
}

.form-label__req {
  margin-left: 0.125rem;
  color: var(--color-red);
  font-weight: 700;
}

.form-label__optional {
  margin-left: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgba(11, 37, 69, 0.2);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-charcoal);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-textarea {
  min-height: 8rem;
  resize: vertical;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: rgba(31, 111, 191, 0.45);
}

.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: var(--focus-ring);
}

.form-input:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(215, 25, 63, 0.55);
}

.contact-form__note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.contact-form__submit {
  align-self: flex-start;
}

.contact-form__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.contact-form__submit:disabled:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}

.contact-form__submit:disabled:hover::after {
  transform: none;
}

.contact-form__fallback {
  margin: 0;
  font-size: 0.875rem;
}

.contact-form__mailto {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: none;
}

.contact-form__mailto:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.contact-form__mailto:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

/* ------------------------------------------------------------
   7g. What we do page (what-we-do.html)
   ------------------------------------------------------------ */
.what-area {
  scroll-margin-top: 5rem; /* room if header becomes sticky */
  padding-block: 2.5rem;
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}

.what-area--alt {
  background-color: var(--color-surface);
}

.what-area__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem 2rem;
  align-items: start;
}

.what-area__num {
  min-width: 1.75rem;
  padding-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(215, 25, 63, 0.75);
}

.what-area__title {
  font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-navy);
}

.what-area__text {
  margin-top: 0.625rem;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.what-area__list {
  list-style: none;
  margin: 1.125rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.what-area__list li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-charcoal);
}

.what-area__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-blue);
}

.what-cta {
  background-color: var(--color-white);
  padding-block: 3.5rem 4.5rem;
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

.what-cta__inner {
  max-width: 40rem;
}

.what-cta__heading {
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-navy);
}

.what-cta__text {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.what-cta .btn--serve {
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------
   7h. Focus sectors page (sectors.html)
   ------------------------------------------------------------ */
.sector-detail {
  scroll-margin-top: 5rem;
  padding-block: 2.5rem;
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}

.sector-detail--alt {
  background-color: var(--color-surface);
}

.sector-detail__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem 2rem;
  align-items: start;
}

.sector-detail__num {
  min-width: 1.75rem;
  padding-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(215, 25, 63, 0.75);
}

.sector-detail__title {
  font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-navy);
}

.sector-detail__text {
  margin-top: 0.625rem;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.sector-detail__list {
  list-style: none;
  margin: 1.125rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.sector-detail__list li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-charcoal);
}

.sector-detail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-blue);
}

/* Shared bottom CTA block for detail pages */
.page-cta {
  background-color: var(--color-white);
  padding-block: 3.5rem 4.5rem;
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

.page-cta__inner {
  max-width: 40rem;
}

.page-cta__heading {
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-navy);
}

.page-cta__text {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.page-cta .btn--serve {
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------
   7h2. Activities page (activities.html)
   ------------------------------------------------------------ */
.activities {
  background-color: var(--color-white);
  padding-block: 3rem 3.5rem;
}

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.activities-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.activity-card {
  background-color: var(--color-surface);
  border: 1px solid rgba(11, 37, 69, 0.12);
  border-top: 2px solid rgba(215, 25, 63, 0.6); /* small red accent */
  border-radius: var(--radius-md);
  padding: 1.5rem 1.5rem 1.625rem;
}

.activity-card__num {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-navy);
}

.activity-card__title {
  margin-top: 0.75rem;
  font-size: 1.03125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
}

.activity-card__text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Quiet informational callout — light blue, discreet red left edge */
.status-note {
  margin-top: 2rem;
  background-color: var(--color-blue-pale);
  border: 1px solid rgba(31, 111, 191, 0.18);
  border-left: 3px solid var(--color-red);
  border-radius: var(--radius-sm);
  padding: 1.125rem 1.25rem;
}

.status-note__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-navy);
}

/* Forward link inside the What we do "Events & delegations" area */
.what-area__more {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-blue);
  text-decoration: none;
}

.what-area__more::after {
  content: "\2192";
  margin-left: 0.4rem;
  transition: transform 150ms ease;
}

.what-area__more:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.what-area__more:hover::after {
  transform: translateX(3px);
}

.what-area__more:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

/* ------------------------------------------------------------
   7i. Membership page (membership.html)
   ------------------------------------------------------------ */
.membership-path {
  scroll-margin-top: 5rem;
  padding-block: 2.5rem;
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}

.membership-path--alt {
  background-color: var(--color-surface);
}

.membership-path__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem 2rem;
  align-items: start;
}

.membership-path__num {
  min-width: 1.75rem;
  padding-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(215, 25, 63, 0.75);
}

.membership-path__title {
  font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-navy);
}

.membership-path__text {
  margin-top: 0.625rem;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.membership-path__list {
  list-style: none;
  margin: 1.125rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.membership-path__list li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-charcoal);
}

.membership-path__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-blue);
}

.membership-path__cta {
  margin-top: 1.5rem;
}

.membership-status {
  background-color: var(--color-blue-pale);
  border-top: 1px solid rgba(11, 37, 69, 0.08);
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
  padding-block: 1.75rem;
}

.membership-status__text {
  max-width: 62ch;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-charcoal);
  border-left: 3px solid rgba(215, 25, 63, 0.55);
  padding-left: 1rem;
}

/* ------------------------------------------------------------
   7e. Team / board (about.html)
   ------------------------------------------------------------ */
.team {
  background-color: var(--color-white);
  padding-block: 4rem 4.5rem;
}

.team-grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.team-card {
  background-color: var(--color-white);
  border: 1px solid rgba(11, 37, 69, 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.team-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-bottom: 2px solid rgba(215, 25, 63, 0.45); /* small red accent */
}

.team-card__body {
  padding: 1.125rem 1.25rem 1.375rem;
}

.team-card__name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
}

.team-card__role {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-blue);
}

.team-card__meta {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.team__cta-row {
  margin-top: 2.25rem;
}

/* ------------------------------------------------------------
   8. Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.625rem;
  padding: 0.625rem 1.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease,
    color 150ms ease;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn--primary {
  background-color: var(--color-blue);
  color: var(--color-white);
  border: 1px solid var(--color-blue);
}

.btn--primary:hover {
  background-color: #185A9D;
  border-color: #185A9D;
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

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

/* ------------------------------------------------------------
   9. Responsive
   ------------------------------------------------------------ */
@media (min-width: 48rem) {
  /* Header grows on desktop — keep the Oslo panel sizing in sync */
  :root {
    --site-header-height: 5rem;
  }

  .site-header__inner {
    min-height: 5rem; /* ~80px desktop */
    padding-block: 0.625rem;
  }

  .brand {
    gap: 0.875rem;
  }

  .brand__icon {
    height: 3.25rem; /* ~52px desktop */
  }

  .brand__wordmark {
    height: 4rem; /* ~64px desktop */
  }

  .hero-panel {
    min-height: 100svh;
  }

  /* Oslo + header fill the first screen; Luanda keeps the full 100svh below. */
  .hero-panel--oslo {
    min-height: var(--hero-oslo-height);
  }

  .hero-copy {
    min-height: var(--hero-oslo-height); /* matches the Oslo panel so the copy stays centered on it */
    padding-block: 3.5rem 4rem;
  }

  .hero-link {
    display: block;
  }

  /* Native CSS scroll snap for the Oslo → Luanda hero panels.
     Replaces the former JS wheel snap-assist (removed from main.js).
     Only the two hero panels carry snap points; every section after
     Luanda has no scroll-snap-align and therefore scrolls normally.
     Tablet/desktop only (this lives inside the 48rem breakpoint) —
     mobile keeps fully native scroll with no snap at all. */
  html {
    /* proximity, NOT mandatory: the page only snaps when the scroll
       already rests close to a panel edge, so small trackpad nudges and
       scrolling on past Luanda into the content stay free and never feel
       like scroll-jacking. mandatory MAY be tested here, but only after
       confirming it does not trap scrolling past the hero into the
       content below — do not switch without reviewing the rest of the
       page first. */
    scroll-snap-type: y proximity;
  }

  .hero-panel--oslo,
  .hero-panel--luanda {
    scroll-snap-align: start;
    /* No scroll-snap-stop: always on purpose — forcing a hard stop on
       each panel made scrolling past Luanda feel sticky/irritating. */
  }

  /* The header is in normal flow above Oslo (not sticky), so offset
     Oslo's snap position by the header height. Scrolling up then lands
     on the natural "header + Oslo" view instead of pushing the header
     off-screen. Luanda keeps the default 0 offset so it fills the whole
     viewport when it snaps. */
  .hero-panel--oslo {
    scroll-margin-top: var(--site-header-height);
  }

  .what-we-do {
    padding-block: 4.5rem 5rem;
  }

  .who-we-serve {
    padding-block: 4.5rem 5rem;
  }

  /* Tablet: 2 cards visible, arrows float at the sides */
  .audience-carousel__track {
    gap: 1.25rem;
  }

  .audience-card {
    flex-basis: calc((100% - 1.25rem) / 2);
  }

  .audience-carousel__controls {
    margin-top: 0;
  }

  .audience-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }

  .audience-carousel__arrow--prev {
    left: -1.25rem;
  }

  .audience-carousel__arrow--next {
    right: -1.25rem;
  }

  .focus-sectors {
    padding-block: 4.5rem 5rem;
  }

  .how-we-operate {
    padding-block: 4.5rem 5rem;
  }

  .news-teaser {
    padding-block: 4.5rem 5rem;
  }

  /* three editorial cards side by side */
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .trust {
    padding-block: 4.5rem 5rem;
  }

  .membership {
    padding-block: 4.5rem 5rem;
  }

  /* Tablet: membership cards two-up */
  .membership-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tablet: trust points two-up */
  .trust-points {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tablet: leadership cards two-up on About page */
  .about-lead-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust__leadership {
    padding: 2rem 1.875rem 2.25rem;
  }

  .team {
    padding-block: 4.5rem 5rem;
  }

  /* Tablet: two team cards per row */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-hero {
    padding-block: 4.5rem 3.75rem;
  }

  /* Tablet: process steps two-up; hide flow connectors */
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .process-step::after,
  .process-step::before {
    display: none;
  }

  /* Tablet: impact cards three-up; roadmap steps wrap two/three-up */
  .impact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }

  .roadmap-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }

  /* Tablet+: activities as a 2x3 grid */
  .activities-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .service-tabs__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
  }

  .service-panel {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    /* Roomier, more premium active card. The image column matches this
       height automatically via .service-panel__visual min-height:100% +
       .service-panel__photo height:100% / object-fit:cover. */
    min-height: 25rem;
  }

  .service-panel__visual {
    min-height: 100%;
    border-bottom: none;
    border-right: 2px solid rgba(215, 25, 63, 0.55); /* subtle red divider */
  }

  .service-panel__content {
    padding: 2.75rem 2.5rem 3rem;
  }
}

@media (min-width: 64rem) {
  /* Desktop: all four team cards in one row */
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Desktop: 3 audience cards visible at a time */
  .audience-card {
    flex-basis: calc((100% - 2.5rem) / 3);
    padding: 2.25rem 2rem 2.5rem;
  }

  /* Editorial split: intro + CTA on the left, sector list on the right */
  .focus-sectors__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    align-items: start;
  }

  /* Desktop: trust points left, leadership panel right */
  .trust__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 4rem;
    align-items: start;
  }

  /* Desktop: three membership cards in one row */
  .membership-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .membership-card {
    padding: 2.25rem 2rem 2.5rem;
  }

  /* Contact page: intro left, form right */
  .contact-page {
    padding-block: 4.5rem 5rem;
  }

  .contact-page__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }

  .contact-form-panel {
    padding: 2rem 2rem 2.25rem;
  }

  /* Desktop: all four process steps in one row with horizontal connectors */
  .process-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  /* Desktop: roadmap as a five-step process line */
  .roadmap-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
  }

  .impact-grid {
    gap: 1.5rem;
  }

  /* Desktop: activities 3 across (2 rows of 3) */
  .activities-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .process-step::after,
  .process-step::before {
    display: block;
  }

  .process-step:not(:last-child)::after {
    left: 100%;
    top: 3.125rem;
    width: 1.5rem;
    height: 1px;
    background-color: rgba(11, 37, 69, 0.14);
  }

  .process-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(3.125rem - 2px);
    left: calc(100% + 1.5rem - 2.5px);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(215, 25, 63, 0.45);
    pointer-events: none;
  }

  .process-step__card {
    padding: 1.75rem 1.5rem 1.875rem;
  }
}

/* ------------------------------------------------------------
   Site footer
   ------------------------------------------------------------ */
.site-footer {
  background-color: var(--color-navy);
  color: var(--color-text-on-dark);
  border-top: 2px solid rgba(215, 25, 63, 0.55);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-block: 2.75rem 2.25rem;
}

.site-footer__brand-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.site-footer__description {
  margin-top: 0.75rem;
  max-width: 28rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text-on-dark-muted);
}

.site-footer__heading {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.site-footer__list {
  list-style: none;
  margin: 0.875rem 0 0;
  padding: 0;
}

.site-footer__list li + li {
  margin-top: 0.5rem;
}

.site-footer__list a,
.site-footer__contact a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.5;
}

.site-footer__list a:hover,
.site-footer__contact a:hover {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__list a:focus-visible,
.site-footer__contact a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

.site-footer__contact-name {
  margin: 0.875rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-white);
}

.site-footer__contact p {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-on-dark-muted);
}

.site-footer__location {
  margin-top: 0.625rem !important;
}

.site-footer__note {
  margin-top: 1rem !important;
  max-width: 22rem;
  font-size: 0.8125rem !important;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.58) !important;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1rem 1.25rem;
}

.site-footer__rights {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2.5rem;
    padding-block: 3rem 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn--panel::after,
  .btn--serve::after,
  .service-tab,
  .lang-switcher__btn {
    transition: none;
  }

  .btn--panel:hover::after,
  .btn--serve:hover::after {
    transform: none;
  }

  .js .service-tabs__nav.is-tabs-visible .service-tab {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .js .service-tabs__panels.service-scroll-active {
    transform: none;
  }

  .hero__content {
    animation: none;
  }

  .hero__video {
    transition: none;
  }

  /* Safety net: never pin the hero copy when reduced motion is requested */
  .hero-copy {
    transform: none !important;
  }

  /* Turn off hero scroll snapping for reduced motion — the snap glide
     reads as an animated / auto-scroll effect. Plain manual scrolling of
     the hero is the accessible fallback. This rule sits after the 48rem
     block in source order, so it wins and disables the snap on desktop
     too whenever reduced motion is requested. */
  html {
    scroll-snap-type: none;
  }
}