/* ============================================================
   SHIELD-6G theme stylesheet
   Tokens verbatim from the Shield 6G design system
   (_ds/shield-6g-design-system tokens/*.css), components
   extracted from the wireframe prototypes.
   ============================================================ */

/* Roboto is self-hosted (Apache 2.0). Loading it from Google's CDN would send
   every visitor's IP address to Google before they could consent, which EU data
   protection authorities have found unlawful. These are the same variable font
   files Google serves, split by subset: latin covers most of the site, latin-ext
   carries the accented characters in partner and country names. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Primary colours ─────────────────────────────── */
  --shield-teal: #009FB6;
  --shield-black: #000000;
  --shield-white: #FFFFFF;

  /* ── Secondary colours ───────────────────────────── */
  --shield-sage: #A9C580;
  --shield-warm-gray: #B8A38F;
  --shield-slate: #3B5368;

  /* ── Observed surfaces ───────────────────────────── */
  --surface-dark: #1B1B1B;
  --surface-subtle: #F7F6F4;

  /* ── Semantic aliases ────────────────────────────── */
  --surface-page: var(--shield-white);
  --surface-panel: var(--shield-teal);
  --text-heading: var(--shield-black);
  --text-body: #1B1B1B;
  --text-muted: var(--shield-slate);
  --text-inverse: var(--shield-white);
  --accent: var(--shield-teal);
  --link: var(--shield-teal);
  --link-hover: #007C8E;
  --border-subtle: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.32);
  --focus-ring: var(--shield-teal);

  --overlay-teal: rgba(0, 159, 182, 0.92);
  --overlay-dark: rgba(0, 0, 0, 0.45);

  --status-positive: var(--shield-sage);
  --status-neutral: var(--shield-slate);
  --status-caution: var(--shield-warm-gray);

  /* ── Typography ──────────────────────────────────── */
  --font-primary: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-secondary: Arial, "Helvetica Neue", sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ── Spacing / layout ────────────────────────────── */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --container-max: 1200px;
  --grid-gutter: 24px;

  /* ── Effects ─────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.22);
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* ── Base ───────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
::selection { background: var(--shield-teal); color: #fff; }
input, button { font-family: inherit; }

button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Entrance animations are for the desktop only. On a touch screen they fire
   in the middle of a scroll gesture, which reads as a flicker rather than as
   motion, so elements simply appear. */
@media (max-width: 960px) {
  [data-reveal],
  [data-reveal].is-revealed,
  .fade-1, .fade-2, .fade-3, .fade-4 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
[data-reveal].is-revealed { animation: fadeUp .65s ease-out backwards; }
.fade-1 { animation: fadeUp .6s ease-out backwards; }
.fade-2 { animation: fadeUp .6s ease-out .1s backwards; }
.fade-3 { animation: fadeUp .6s ease-out .2s backwards; }
.fade-4 { animation: fadeUp .6s ease-out .3s backwards; }

/* ── Graphic shapes (brand book) ────────────────────── */
.s6g-sweep-bottom {
  background: var(--shield-teal); color: var(--shield-white);
  clip-path: ellipse(160% 100% at 22% 0%);
}
.s6g-sweep-top {
  background: var(--shield-teal); color: var(--shield-white);
  clip-path: ellipse(160% 100% at 78% 100%);
}
.s6g-wedge { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.s6g-tri {
  width: 72px; height: 64px;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background: var(--shield-sage);
}
.s6g-tri--warm { background: var(--shield-warm-gray); }
.s6g-tri--slate { background: var(--shield-slate); }
.s6g-tab {
  background: var(--shield-teal);
  border-radius: 0 0 44% 0 / 0 0 58% 0;
  display: grid;
  place-items: center;
  padding: 14px 18px 20px;
}

/* ── Layout helpers ─────────────────────────────────── */
.container { max-width: var(--container-max); margin: 0 auto; }
.section { padding: 96px 48px; }
.section--page { background: var(--surface-page); }
.section--subtle { background: var(--surface-subtle); }
.section--dark { background: var(--surface-dark); }

.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--shield-teal);
}
.section-heading {
  margin: 0; font-size: 34px; line-height: 1.15; font-weight: 700;
  color: var(--text-heading); letter-spacing: -.01em;
}
.section-heading--light { color: #fff; }

/* ── Top navigation ─────────────────────────────────── */
:root { --nav-h: 76px; }

.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--shield-black);
  height: var(--nav-h); display: flex; align-items: center;
  gap: 40px; padding: 0 48px;
}
/* The logo fills the full bar height, so it reads as large as possible without
   changing --nav-h. object-fit preserves whatever aspect ratio the admin
   uploads, and max-width stops a wide horizontal logo crowding the menu. */
.site-nav__logo { flex: none; display: flex; align-self: stretch; align-items: center; }
/* The shield mark is portrait, so it is sized by height and left to scale. */
.site-nav__logo img {
  height: 100%; width: auto; max-width: min(260px, 45vw);
  object-fit: contain; object-position: left center; display: block;
}
.site-nav__menu { display: flex; gap: 30px; align-items: stretch; height: 100%; flex: 1; }
.site-nav__link {
  display: flex; align-items: center;
  font-size: 14.5px; font-weight: 500;
  color: rgba(255,255,255,.72); text-decoration: none;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
.site-nav__link:hover { color: #fff; }
.site-nav__link.is-active { color: #fff; border-bottom-color: var(--shield-teal); }
.site-nav__cta {
  flex: none; display: flex; align-items: center;
  height: 42px; padding: 0 24px;
  background: var(--shield-teal); color: #fff;
  font-size: 14px; font-weight: 500; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.site-nav__cta:hover { background: var(--link-hover); color: #fff; }
/* The CTA lives inside the menu so there is only one in the DOM; on desktop
   it is pushed to the far right of the bar. */
.site-nav__menu .site-nav__cta { margin-left: auto; align-self: center; }

/* Hamburger is desktop-hidden. */
.site-nav__toggle { display: none; }

/* Flat, square bars to match the brand's crisp identity (no rounded caps). */
.site-nav__burger,
.site-nav__burger::before,
.site-nav__burger::after {
  display: block; width: 22px; height: 2px;
  background: #fff;
  transition: transform var(--duration-base) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.site-nav__burger { position: relative; }
.site-nav__burger::before,
.site-nav__burger::after { content: ""; position: absolute; left: 0; }
.site-nav__burger::before { top: -7px; }
.site-nav__burger::after { top: 7px; }
.site-nav__toggle[aria-expanded="true"] .site-nav__burger { background: transparent; }
.site-nav__toggle[aria-expanded="true"] .site-nav__burger::before { transform: translateY(7px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__burger::after { transform: translateY(-7px) rotate(-45deg); }

body.nav-open { overflow: hidden; }

/* ── Page hero (dark, watermark) ────────────────────── */
.page-hero { position: relative; background: var(--surface-dark); overflow: hidden; }
.page-hero--teal { background: var(--shield-teal); }
.page-hero__watermark {
  position: absolute; right: -40px; top: -60px;
  width: 400px; opacity: .07; pointer-events: none;
}
.page-hero--teal .page-hero__watermark { opacity: .13; right: -50px; width: 380px; }
.page-hero__inner { position: relative; max-width: var(--container-max); margin: 0 auto; padding: 88px 48px 84px; }
.page-hero__kicker { display: flex; align-items: center; gap: 10px; }
.page-hero__kicker-square { width: 12px; height: 12px; background: var(--shield-teal); flex: none; }
.page-hero--teal .page-hero__kicker-square { background: #fff; }
.page-hero__kicker-label {
  font-size: 13px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.85);
}
.page-hero__title {
  margin: 22px 0 0; font-size: 46px; line-height: 1.1; font-weight: 700;
  color: #fff; letter-spacing: -.01em;
}
.page-hero__lead {
  margin: 20px 0 0; font-size: 17px; line-height: 1.7;
  color: rgba(255,255,255,.8); max-width: 680px; text-wrap: pretty;
}

/* ── Buttons (design-system Button.jsx) ─────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-primary); font-weight: 500; letter-spacing: .01em;
  white-space: nowrap; border-radius: var(--radius-none); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  box-sizing: border-box; text-decoration: none; border: 1px solid transparent;
}
.btn--sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn--md { height: 40px; padding: 0 20px; font-size: 14.5px; }
.btn--lg { height: 48px; padding: 0 26px; font-size: 16px; }
.btn--primary { background: var(--shield-teal); color: var(--shield-white); }
.btn--primary:hover { background: var(--link-hover); color: var(--shield-white); }
.btn--primary:active { background: #00596B; }
.btn--secondary { background: transparent; color: var(--text-heading); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--shield-black); background: rgba(0,0,0,.04); color: var(--text-heading); }
.btn--ghost { background: transparent; color: var(--shield-teal); }
.btn--ghost:hover { background: rgba(0,159,182,.08); color: var(--shield-teal); }
.btn--inverse { background: var(--shield-white); color: var(--shield-teal); }
.btn--inverse:hover { background: rgba(255,255,255,.92); color: var(--shield-teal); }
.btn--inverse:active { background: rgba(255,255,255,.82); }

/* ── Cards ──────────────────────────────────────────── */
.card-hover {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--shield-teal) !important;
}
.card-hover-flat { transition: box-shadow .2s ease, border-color .2s ease; }
.card-hover-flat:hover { box-shadow: var(--shadow-card); border-color: var(--shield-teal) !important; }
/* ── Partner cards ──────────────────────────────────── */
.partner-card {
  background: #fff; border: 1px solid var(--border-subtle);
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
  min-height: 150px; text-decoration: none; color: inherit;
}
.partner-card--highlight { border: 1.5px solid var(--shield-teal); }
/* Most partner logos are wide wordmarks, so the logo gets the width of the
   card and is capped by height instead of squeezed into a square. */
.partner-card__logo { width: 100%; height: 60px; display: flex; align-items: center; }
.partner-card__logo img {
  max-width: 100%; max-height: 60px; width: auto; height: auto;
  object-fit: contain; object-position: left center; display: block;
}
/* Badges sit on their own row so a partner can carry two (a project role
   and WP Leader) without squeezing the logo. */
.partner-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.partner-card__mark {
  flex: none; width: 52px; height: 52px;
  background: var(--surface-subtle); border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--shield-slate);
}
.partner-card__mark--empty { border-style: dashed; border-color: var(--border-strong); font-size: 11px; font-weight: 400; color: var(--text-muted); }
.partner-card__badge {
  border: 1px solid var(--shield-slate); color: var(--shield-slate);
  font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.3; padding: 3px 8px; text-wrap: balance;
}
.partner-card__badge--solid { background: var(--shield-teal); border-color: var(--shield-teal); color: #fff; }
.partner-card__meta { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.partner-card__name { font-size: 15px; font-weight: 700; color: var(--text-heading); line-height: 1.35; }
.partner-card__country { font-size: 13px; color: var(--text-muted); }
a.partner-card:hover .partner-card__name { color: var(--link); }

.card-hover-border { transition: border-color .2s ease, box-shadow .2s ease; }
.card-hover-border:hover { border-color: var(--shield-teal) !important; box-shadow: var(--shadow-card); }

/* ── Footer ─────────────────────────────────────────── */
.site-footer { background: var(--shield-black); color: #cfcfcf; padding: 64px 48px 36px; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 44px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 18px; }
.site-footer__brand img { height: 32px; width: max-content; }
.site-footer__tagline { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.6); max-width: 300px; }
.site-footer__social { display: flex; gap: 10px; }
.site-footer__social a {
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.site-footer__social a:hover { border-color: var(--shield-teal); background: var(--shield-teal); color: #fff; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col-title {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; margin-bottom: 4px;
}
.site-footer__link { font-size: 14.5px; color: rgba(255,255,255,.62); text-decoration: none; }
.site-footer__link:hover { color: #fff; }
.site-footer__note { font-size: 14.5px; color: rgba(255,255,255,.62); line-height: 1.6; }
.site-footer__funding {
  display: flex; align-items: flex-start; gap: 16px;
  margin-top: 52px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.site-footer__funding p {
  margin: 0; font-size: 12.5px; line-height: 1.65;
  color: rgba(255,255,255,.5); max-width: 900px;
}
.site-footer__copyright { margin-top: 20px; font-size: 12.5px; color: rgba(255,255,255,.38); }

/* ── Newsletter band ────────────────────────────────── */
.newsletter { position: relative; background: var(--shield-teal); overflow: hidden; }
.newsletter__watermark {
  position: absolute; right: -60px; top: -70px;
  width: 380px; opacity: .12; pointer-events: none;
}
.newsletter__inner {
  position: relative; max-width: var(--container-max); margin: 0 auto;
  padding: 80px 48px; display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 56px; align-items: center;
}
.newsletter__form { display: flex; gap: 12px; align-items: stretch; }
/* The row of controls inside the form element itself. */
.newsletter__fields { display: flex; gap: 12px; align-items: stretch; flex: 1; }
.newsletter__input {
  flex: 1; height: 48px; border: 0; border-radius: 4px; padding: 0 18px;
  font-size: 15px; color: var(--text-body); background: #fff; outline: none; min-width: 0;
}
.newsletter__success { font-size: 15px; font-weight: 500; color: #fff; }

/* ── CTA band (teal strip with button) ──────────────── */
.cta-band { position: relative; background: var(--shield-teal); overflow: hidden; }
.cta-band__watermark { position: absolute; right: -60px; top: -70px; width: 340px; opacity: .12; pointer-events: none; }
.cta-band__inner {
  position: relative; max-width: var(--container-max); margin: 0 auto;
  padding: 64px 48px; display: flex; align-items: center;
  justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.cta-band__title { margin: 0; font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.cta-band__text { margin: 0; font-size: 16px; color: rgba(255,255,255,.9); }
/* When the band carries the subscribe form instead of a button it needs a
   readable field width, but must still wrap under the text on narrow screens. */
.cta-band__form { flex: 1 1 420px; max-width: 520px; }
@media (max-width: 640px) {
  .cta-band__inner { padding: 48px 20px; }
  .cta-band__form { flex-basis: 100%; }
  .newsletter__fields { flex-direction: column; }
  /* flex:1 would resolve against the vertical axis once stacked and squash the
     field to nothing, so the 48px height has to be pinned back. */
  .newsletter__fields .newsletter__input { flex: none; height: 48px; }
  .newsletter__fields .btn { justify-content: center; }
}

/* ── Cookie banner ──────────────────────────────────── */
/* Anchored to the bottom of the viewport, above everything including the
   sticky nav (z 60) and the map stage, but it never blocks the whole page. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: var(--surface-dark); color: #fff;
  border-top: 3px solid var(--shield-teal);
  box-shadow: var(--shadow-overlay);
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-out);
}
.cookie-banner.is-open { transform: none; }
.cookie-banner__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 24px 48px; display: flex; align-items: center;
  justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.cookie-banner__body { flex: 1 1 520px; display: flex; flex-direction: column; gap: 6px; }
.cookie-banner__title { margin: 0; font-size: 17px; font-weight: 700; color: #fff; }
.cookie-banner__text { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.82); text-wrap: pretty; }
.cookie-banner__link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner__link:hover { color: var(--shield-teal); }
.cookie-banner__actions { flex: none; display: flex; gap: 12px; flex-wrap: wrap; }
/* Both choices carry identical weight: refusing is as easy as accepting. */
.cookie-banner__btn {
  min-width: 190px; justify-content: center;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55);
}
.cookie-banner__btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.cookie-banner__btn--accept { background: var(--shield-teal); border-color: var(--shield-teal); }
.cookie-banner__btn--accept:hover { background: var(--link-hover); border-color: var(--link-hover); }
@media (max-width: 960px) {
  .cookie-banner__inner { padding: 20px; gap: 18px; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__btn { flex: 1 1 auto; min-width: 0; }
}

/* ── Embedded video: consent gate ───────────────────── */
/* The placeholder is local markup — nothing is requested from YouTube until
   the visitor allows it. */
.video-embed--gated .video-embed__gate {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 28px; text-align: center;
  background: var(--surface-dark);
}
.video-embed__gate-label {
  max-width: 460px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.82); text-wrap: pretty;
}
.video-embed--gated.is-loaded { background: #000; }

/* ── Legal pages ────────────────────────────────────── */
.legal-updated {
  margin: 0; font-size: 13.5px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}

/* ── Image frames ───────────────────────────────────── */
/* On desktop a picture fills a fixed frame so rows and cards line up. On a
   phone the frame gives way: the whole picture is shown at its own aspect
   ratio, never wider than the screen and never taller than most of it. */
.media-frame { position: relative; overflow: hidden; }
.media-frame--uc { height: 330px; }
.media-frame--featured { height: 340px; }
.media-frame--card { height: 170px; }
.media-frame--uc-card { height: 190px; }
.media-frame__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 960px) {
  .media-frame { height: auto; }
  .media-frame__img {
    position: static;
    width: 100%; height: auto; max-height: 70vh;
    object-fit: contain;
  }
}

/* ── Use cases: alternating rows ────────────────────── */
.uc-grid { display: grid; grid-template-columns: 440px 1fr; gap: 64px; align-items: start; }
.uc-grid--flip { grid-template-columns: 1fr 440px; }
/* The swap is desktop-only. Once the grid stacks, the source order stands so
   the reader always meets the image before the text it belongs to. */
@media (min-width: 1025px) {
  .uc-grid--flip .uc-media { order: 2; }
  .uc-grid--flip .uc-body { order: 1; }
}

.uc-media { position: sticky; top: 108px; }
@media (max-width: 1024px) {
  /* .split collapses to one column at 1024px. From there the media block's
     sticky range covers the whole section, so it would sit on top of the
     text below it. Plain flow instead. */
  .uc-media { position: static; top: auto; }
}

/* ── Deliverables table ─────────────────────────────── */
.deliv-table-wrap { border: 1px solid var(--border-subtle); overflow-x: auto; }
.deliv-table { width: 100%; border-collapse: collapse; min-width: 960px; }
.deliv-table thead tr { background: var(--shield-teal); }
.deliv-table th {
  text-align: left; padding: 14px 18px; font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #fff; white-space: nowrap;
}
.deliv-table th:last-child { text-align: right; }
.deliv-table td { padding: 15px 18px; border-top: 1px solid var(--border-subtle); }
.deliv-table tbody tr:nth-child(even) { background: var(--surface-subtle); }
.deliv-table tbody tr.is-pending { opacity: .75; }
.deliv-download {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border: 1px solid var(--shield-teal); color: var(--shield-teal);
  font-size: 13px; font-weight: 500; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.deliv-download:hover { background: var(--shield-teal); color: #fff; }
.deliv-pending-badge {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  background: rgba(184,163,143,.18); color: #7a6a58;
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
}

/* ── Chips / badges ─────────────────────────────────── */
.tag-solid {
  background: var(--shield-teal); color: #fff; font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px;
}
.tag-outline {
  border: 1px solid var(--shield-teal); color: var(--shield-teal);
  font-size: 11px; font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; padding: 4px 9px;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .section { padding: 72px 32px; }
  .site-nav { padding: 0 24px; gap: 24px; }
  .site-nav__menu { gap: 18px; }
  .page-hero__inner { padding: 64px 32px; }
  .newsletter__inner, .cta-band__inner { padding: 56px 32px; }
  .site-footer { padding: 56px 32px 32px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .split { grid-template-columns: 1fr !important; }
}
/* Below this width the six links + logo + CTA no longer fit on one row,
   so the bar collapses to a hamburger and a full-height panel. */
@media (max-width: 960px) {
  .site-nav { gap: 16px; padding: 0 20px; }
  .site-nav__toggle {
    display: flex; align-items: center; justify-content: center;
    flex: none; margin-left: auto;
    width: 44px; height: 44px;          /* 44px minimum touch target */
    padding: 0; border: 0; background: transparent; cursor: pointer;
  }
  .site-nav__menu {
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch;
    height: auto; gap: 0;
    padding: 8px 20px 32px;
    background: var(--shield-black);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                visibility 0s linear var(--duration-base);
  }
  .site-nav__menu.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  /* The desktop teal underline becomes a teal left marker when stacked. */
  .site-nav__link {
    min-height: 56px; font-size: 17px;
    padding: 0 0 0 14px;
    border-top: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-left: 3px solid transparent;
  }
  .site-nav__link.is-active {
    border-bottom-color: rgba(255,255,255,.12);
    border-left-color: var(--shield-teal);
  }

  /* Same element, restyled as the full-width button at the foot of the panel. */
  .site-nav__menu .site-nav__cta {
    margin-left: 0; margin-top: 24px; align-self: stretch;
    justify-content: center; height: 52px; font-size: 15px;
  }
}

/* Users who prefer reduced motion get the panel without the slide/rotate. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-revealed,
  .fade-1, .fade-2, .fade-3, .fade-4 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .cookie-banner { transition: none; }
  .site-nav__menu,
  .site-nav__burger,
  .site-nav__burger::before,
  .site-nav__burger::after { transition: none; }
}

@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  .section { padding: 56px 20px; }
  .site-nav { padding: 0 16px; }
  .site-nav__logo img { max-width: min(180px, 42vw); }
  .page-hero__title { font-size: 34px !important; }
  .page-hero__inner { padding: 48px 20px; }
  .newsletter__inner { grid-template-columns: 1fr; gap: 28px; padding: 48px 20px; }
  .cta-band__inner { padding: 48px 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* ── News article detail (hero meta, back link, body, video embed) ── */
.article-hero__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.article-hero__date { font-size: 14px; color: rgba(255, 255, 255, .72); }

.article-col {
  max-width: 800px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 36px;
}

/* Breadcrumb-style back link (mirrors the deliverables hero breadcrumb,
   recoloured teal for the light content column). */
.article-back {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 14px; font-weight: 500; color: var(--link); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.article-back:hover { color: var(--link-hover); }

.article-figure { margin: 0; }
.article-figure img { display: block; width: 100%; height: auto; }

/* Reusable video embed — flat, square, dark letterbox (site/video-embed partial). */
.video-embed {
  position: relative; aspect-ratio: 16 / 9;
  background: #000; border: 1px solid var(--border-subtle);
}
.video-embed__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; border: 0; background: #000;
}
video.video-embed__media { object-fit: contain; }

/* Typography for admin-authored richeditor HTML. */
.article-body { font-size: 16.5px; color: var(--text-body); }
.article-body > :first-child { margin-top: 0; }
.article-body > :last-child { margin-bottom: 0; }
.article-body p, .article-body li { line-height: 1.75; }
.article-body p { margin: 0 0 1.25em; }
.article-body h2, .article-body h3, .article-body h4 {
  margin: 1.7em 0 .6em; font-weight: 700; line-height: 1.25;
  color: var(--text-heading); letter-spacing: -.01em;
}
.article-body h2 { font-size: 28px; }
.article-body h3 { font-size: 21px; }
.article-body h4 { font-size: 17.5px; }
.article-body a { color: var(--link); }
.article-body a:hover { color: var(--link-hover); }
.article-body ul, .article-body ol { margin: 0 0 1.25em; padding-left: 1.35em; }
.article-body li { margin-bottom: .4em; }
.article-body img { max-width: 100%; height: auto; display: block; }
.article-body figure { margin: 1.6em 0; }
.article-body figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text-muted); }
.article-body blockquote {
  margin: 1.6em 0; padding: 6px 0 6px 24px;
  border-left: 4px solid var(--shield-teal);
  font-size: 18px; line-height: 1.65; color: var(--text-heading);
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 2em 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.6em 0; }
.article-body th, .article-body td {
  border: 1px solid var(--border-subtle); padding: 10px 14px;
  font-size: 14.5px; text-align: left;
}
.article-body th { background: var(--surface-subtle); font-weight: 700; }

@media (max-width: 1024px) {
  .article-col { gap: 28px; }
}
@media (max-width: 640px) {
  .article-body { font-size: 15.5px; }
  .article-body h2 { font-size: 23px; }
  .article-body h3 { font-size: 19px; }
  .article-body blockquote { font-size: 16.5px; padding-left: 18px; }
}

/* ── Admin-configurable logos (nav desktop/mobile swap) ── */
/* Descendant selectors beat the existing `.site-nav__logo img { display:block }` rule. */
.site-nav__logo .site-nav__logo-img--mobile { display: none; }
@media (max-width: 960px) {
  .site-nav__logo .site-nav__logo-img--desktop { display: none; }
  .site-nav__logo .site-nav__logo-img--mobile { display: block; }
}

/* ── Team: partner map (full-bleed stage + floating location index) ── */
.map-section { padding: 96px 0 0; }
.map-section__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px 64px; align-items: end; padding: 0 48px 44px;
}
.map-section__title { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.map-section__aside { display: flex; flex-direction: column; gap: 18px; }
.map-section__intro { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--text-body); text-wrap: pretty; }
.map-section__countries {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.map-section__countries li { display: inline-flex; align-items: center; }
/* Separator trails the item, so a wrapped row never starts with a dot. */
.map-section__countries li:not(:last-child)::after {
  content: ""; width: 4px; height: 4px; margin-left: 12px; background: var(--shield-teal);
}

/* The stage is a new stacking context: Leaflet's panes (z 400) and controls
   (z 1000) stay inside it, so the map can never paint over the sticky nav (z 60). */
:root { --surface-map: #ececec; } /* sampled land tone of the Esri Light Gray basemap */

.map-stage {
  position: relative; isolation: isolate; z-index: 0;
  /* Ten countries span 34–70°N, so the fit is height-bound: give it room. */
  height: 780px;
  border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-map);
}
.team-map { position: absolute; inset: 0; }
/* Leaflet adds .leaflet-container to the #team-map div itself, so the font
   override must be a compound selector, not a descendant one. */
.team-map { scroll-margin-top: var(--nav-h); }
.team-map.leaflet-container { font-family: var(--font-primary); background: var(--surface-map); }

/* Rebrand Leaflet's default chrome: its stylesheet hardcodes #0078A8 links,
   4px radii, a heavy control shadow and mono/Tahoma fonts on the zoom and
   close glyphs — none of which exist in the design system. */
.team-map .leaflet-container a,
/* Compound selectors out-rank leaflet.css (.leaflet-container a, .leaflet-touch .leaflet-bar …). */
.team-map.leaflet-container a { color: var(--link); }
.team-map.leaflet-container a:hover { color: var(--link-hover); }
.team-map.leaflet-container .leaflet-bar { border: 1px solid var(--border-subtle); border-radius: 0; box-shadow: var(--shadow-card); }
.team-map.leaflet-container .leaflet-bar a { border-radius: 0 !important; border-bottom-color: var(--border-subtle); color: var(--text-heading); }
.team-map.leaflet-container .leaflet-control-zoom-in,
.team-map.leaflet-container .leaflet-control-zoom-out { font: 700 18px/26px var(--font-primary); }
/* "Show all countries" plate under the zoom control; the script reveals it once zoomed in. */
.team-map .leaflet-control.team-map__reset { margin-top: 10px; }
.team-map__reset-btn {
  display: none; height: 32px; padding: 0 12px; border: 1px solid var(--border-subtle);
  background: #fff; color: var(--text-heading); box-shadow: var(--shadow-card);
  font: 500 12.5px/1 var(--font-primary); letter-spacing: .02em; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.team-map__reset-btn:hover { background: var(--shield-black); color: #fff; border-color: var(--shield-black); }
.team-map__reset.is-visible .team-map__reset-btn { display: inline-flex; align-items: center; }
/* Offer to load the third-party map background, shown until consent is given. */
.team-map .leaflet-control.team-map__basemap-notice {
  display: flex; align-items: center; gap: 10px;
  max-width: min(420px, 70vw); margin: 0 0 10px 10px; padding: 8px 10px 8px 12px;
  background: #fff; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card);
  font-size: 12.5px; line-height: 1.4; color: var(--text-body);
}
.team-map__basemap-btn {
  flex: none; height: 28px; padding: 0 10px; border: 0;
  background: var(--shield-teal); color: #fff;
  font: 500 12.5px/1 var(--font-primary); cursor: pointer;
}
.team-map__basemap-btn:hover { background: var(--link-hover); }
@media (max-width: 640px) {
  .team-map .leaflet-control.team-map__basemap-notice { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.team-map .leaflet-control-attribution {
  font: 400 11px/1.4 var(--font-primary); color: var(--text-muted);
  background: rgba(255,255,255,.88); padding: 3px 8px;
}
.team-map.leaflet-container a.leaflet-popup-close-button {
  width: 32px; height: 32px; padding: 0;
  font: 500 18px/32px var(--font-primary); text-align: center; color: var(--text-muted);
}
.team-map.leaflet-container a.leaflet-popup-close-button:hover,
.team-map.leaflet-container a.leaflet-popup-close-button:focus { color: var(--text-heading); }

/* Numbered square plates at each country's label point. Leaflet positions
   .team-map__pin with a transform, so the visible plate is the inner element. */
.team-map__pin { background: transparent; border: 0; cursor: pointer; }
.team-map__pin-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--shield-teal); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px #fff, var(--shadow-card);
  /* --nudge-x/--nudge-y are set by the script to slide neighbouring plates
     apart; composed into transform so hover/active scaling stacks on top. */
  transform: translate(var(--nudge-x, 0px), var(--nudge-y, 0px));
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.team-map__pin.is-hover .team-map__pin-num {
  background: var(--shield-black);
  transform: translate(var(--nudge-x, 0px), var(--nudge-y, 0px)) scale(1.12);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--shield-teal), var(--shadow-card);
}
.team-map__pin.is-active .team-map__pin-num {
  background: var(--shield-black);
  transform: translate(var(--nudge-x, 0px), var(--nudge-y, 0px)) scale(1.18);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--shield-teal), var(--shadow-card);
}

/* Country fills are SVG paths styled from the script; keep them crisp and clickable. */
.team-map .leaflet-overlay-pane path { cursor: pointer; shape-rendering: geometricPrecision; transition: fill-opacity var(--duration-fast) var(--ease-out); }

/* Hover label — flat white plate, no arrow. */
.team-map .leaflet-tooltip.team-map__tip {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 0;
  box-shadow: var(--shadow-card); color: var(--text-heading);
  font: 500 13px/1 var(--font-primary); padding: 8px 11px;
}
.team-map .leaflet-tooltip.team-map__tip::before { display: none; }

/* Popup restyled square with a teal top rule — Leaflet's radius and chrome overridden. */
.team-map-popup .leaflet-popup-content-wrapper {
  border-radius: 0; background: #fff; color: var(--text-body);
  border: 1px solid var(--border-subtle); border-top: 3px solid var(--shield-teal);
  box-shadow: var(--shadow-overlay);
}
.team-map-popup .leaflet-popup-content { margin: 18px 22px 20px; line-height: 1.6; }
.team-map-popup .leaflet-popup-tip { border-radius: 0; box-shadow: var(--shadow-overlay); }
.team-map-popup__inner { display: flex; flex-direction: column; gap: 6px; }
.team-map-popup__badge { align-self: flex-start; margin-bottom: 2px; }
.team-map-popup__name { font-size: 16px; font-weight: 700; color: var(--text-heading); line-height: 1.3; }
.team-map-popup__desc { font-size: 14px; line-height: 1.6; color: var(--text-body); }
.team-map .team-map-popup__link {
  display: inline-block; margin-top: 4px;
  font-size: 14px; font-weight: 500; color: var(--link); text-decoration: none;
}
.team-map .team-map-popup__link:hover { color: var(--link-hover); }

/* Location index — floats over the stage, aligned with the content column. */
.map-index {
  position: absolute; z-index: 1100;
  top: 32px; bottom: 32px;
  left: max(48px, calc((100% - var(--container-max)) / 2));
  width: 380px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-overlay);
}
.map-index__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--border-subtle);
}
.map-index__count {
  min-width: 28px; height: 28px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--shield-black); color: #fff; font-size: 13px; font-weight: 700;
}
.map-index__list {
  list-style: none; margin: 0; padding: 0 0 28px; overflow-y: auto; flex: 1;
  /* Fade the last visible row so it is obvious the list continues; the bottom
     padding keeps the last entry clear of the fade when scrolled to the end. */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
}
.map-index__list li:last-child .map-index__item { border-bottom: 0; }
.map-index__item {
  width: 100%; display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start;
  text-align: left; padding: 14px 22px 14px 19px;
  background: transparent; border: 0; border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer; font-family: inherit; color: var(--text-body);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.map-index__item:hover,
.map-index__item.is-hover { background: var(--surface-subtle); }
.map-index__item.is-active { background: rgba(0,159,182,.08); border-left-color: var(--shield-teal); }
.map-index__item:focus-visible { outline-offset: -3px; }
.map-index__num {
  width: 28px; height: 28px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--shield-black); color: #fff; font-size: 12.5px; font-weight: 700;
  transition: background var(--duration-fast) var(--ease-out);
}
.map-index__item:hover .map-index__num,
.map-index__item.is-hover .map-index__num,
.map-index__item.is-active .map-index__num { background: var(--shield-teal); }
.map-index__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.map-index__name { font-size: 15px; font-weight: 700; color: var(--text-heading); line-height: 1.3; }
.map-index__desc {
  font-size: 13.5px; line-height: 1.5; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.map-index__badge { align-self: flex-start; margin-top: 4px; }
.map-index__foot {
  padding: 12px 22px; border-top: 1px solid var(--border-subtle);
  font-size: 12.5px; color: var(--text-muted); background: var(--surface-subtle);
}

@media (max-width: 1200px) {
  /* Below 1200px a floating panel would cover too much of Europe: the index
     drops below the map and becomes a horizontal snap scroller. */
  .map-stage { height: auto; display: flex; flex-direction: column; }
  .team-map { position: relative; inset: auto; height: min(700px, 80vh); }
  .map-index {
    position: static; width: auto; box-shadow: none;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .map-index__head { padding: 16px 20px 4px; border-bottom: 0; }
  .map-index__list {
    display: flex; gap: 12px; padding: 12px 20px 18px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none; mask-image: none;
  }
  .map-index__list li:last-child .map-index__item { border-bottom: 1px solid var(--border-subtle); }
  .map-index__list li { flex: 0 0 260px; scroll-snap-align: start; display: flex; }
  .map-index__item {
    height: 100%; border: 1px solid var(--border-subtle); border-left: 3px solid transparent;
  }
  .map-index__foot { display: none; }
}
@media (max-width: 1024px) {
  .map-section { padding-top: 72px; }
  .map-section__head { grid-template-columns: 1fr; gap: 24px; padding: 0 32px 36px; }
}
@media (max-width: 640px) {
  .map-section { padding-top: 56px; }
  .map-section__head { padding: 0 20px 28px; }
  .team-map { height: min(440px, 70vh); }
  /* Phones pinch-zoom; the +/- control only competes with the popover for space. */
  .team-map .leaflet-control-zoom { display: none; }
  .team-map-popup .leaflet-popup-content { margin: 14px 16px 16px; }
  .map-index__list { padding: 10px 16px 16px; }
  .map-index__list li { flex-basis: 240px; }
}

/* ── Team: work-package episode player ──────────────── */
/* Dark stage on the blueprint grid — faint 1px lines every 56px, both axes. */
.wp-theatre {
  position: relative; overflow: hidden;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 1px, transparent 1px, transparent 56px);
}
.wp-theatre__watermark {
  position: absolute; right: -40px; top: -60px;
  width: 400px; opacity: .06; pointer-events: none;
}
.wp-theatre__grid {
  display: grid; grid-template-columns: 1fr 360px;
  gap: 32px; margin-top: 48px; align-items: start;
}

.wp-player__stage {
  position: relative; aspect-ratio: 16 / 9;
  background: #000; border: 1px solid rgba(255,255,255,.14); overflow: hidden;
}
.wp-player__embed { position: absolute; inset: 0; }
/* The shared video-embed partial carries its own 16:9 box; inside the stage it just fills. */
.wp-player__stage .video-embed { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
.wp-player__idle { position: absolute; inset: 0; }
.wp-player__mark {
  position: absolute; right: -30px; bottom: -50px;
  width: 260px; opacity: .05; pointer-events: none;
}
.wp-player__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-player__code {
  position: absolute; top: 20px; left: 22px;
  font-size: 13px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.75);
}
/* Square plate per the flat brand identity — no circles in this system. */
.wp-player__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 0; border: 0; padding: 0;
  background: #fff; color: #000; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--duration-fast) var(--ease-out);
}
.wp-player__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.wp-player__play svg { margin-left: 3px; }
.wp-player__duration {
  position: absolute; right: 14px; bottom: 14px;
  background: #000; color: #fff; font-size: 12px; padding: 4px 10px;
}

.wp-player__meta { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.wp-player__meta-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--shield-teal);
}
.wp-player__meta-title { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 700; color: #fff; }
.wp-player__meta-desc { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.75); text-wrap: pretty; }
.wp-player__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.wp-chip {
  border: 1px solid rgba(255,255,255,.28); color: #fff;
  font-size: 12.5px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; padding: 7px 12px;
}

.wp-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wp-rail__header {
  font-size: 12.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.wp-rail__list { display: flex; flex-direction: column; }
.wp-rail__row {
  display: flex; gap: 14px; align-items: center; text-align: left;
  background: transparent; border: 0; border-left: 3px solid transparent;
  padding: 12px 14px 12px 11px; cursor: pointer;
  color: inherit; font-family: inherit;
  transition: background var(--duration-fast) var(--ease-out);
}
.wp-rail__row:hover:not(.is-active):not(.wp-rail__row--production) { background: rgba(255,255,255,.04); }
.wp-rail__row.is-active { background: rgba(255,255,255,.06); border-left-color: var(--shield-teal); }
.wp-rail__row--production { opacity: .45; cursor: default; pointer-events: none; }
.wp-rail__thumb {
  flex: none; width: 92px; height: 52px;
  background: #000; border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: rgba(255,255,255,.6);
}
.wp-rail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-rail__thumb--stripes {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 6px, transparent 6px, transparent 12px);
}
.wp-rail__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wp-rail__code {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--shield-teal);
}
.wp-rail__title {
  font-size: 14.5px; font-weight: 500; color: #fff; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wp-rail__duration { font-size: 12px; color: rgba(255,255,255,.55); }

/* Mobile: the rail becomes a horizontal scroller of 200px cards under the player. */
@media (max-width: 960px) {
  .wp-theatre__grid { grid-template-columns: 1fr; }
  .wp-rail__list {
    flex-direction: row; gap: 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; padding-bottom: 6px;
  }
  .wp-rail__row {
    flex: none; width: 200px; box-sizing: border-box;
    flex-direction: column; align-items: stretch; gap: 10px;
    border-left: 0; border-bottom: 3px solid transparent;
    padding: 10px; scroll-snap-align: start;
  }
  .wp-rail__row.is-active { border-left: 0; border-bottom-color: var(--shield-teal); }
  .wp-rail__thumb { width: 100%; height: 100px; }
}

/* ── Article section padding (responsive, replaces inline padding) ── */
.section--article { padding: 64px 48px 96px; }
@media (max-width: 1024px) { .section--article { padding: 56px 32px 72px; } }
@media (max-width: 640px) { .section--article { padding: 40px 20px 56px; } }