/* Finance Development Centre — website layer.
   ---------------------------------------------------------------------------
   The design system is the authority. Everything here reads tokens through
   var(--token) so a brand correction in /ds/ propagates on the next build.
   Nothing below redefines a token value.

   Direction: logical properties throughout (margin-inline-start, not
   margin-left) so the Arabic build survives dir="rtl" without a second sheet.
   --------------------------------------------------------------------------- */

/* ---- Layout primitives --------------------------------------------------- */

.container {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.prose {
  max-inline-size: var(--content-max);
}

/* The design system specifies a 60 to 72px section rhythm. Two adjacent bands
   at 32px each give 64px, which is what that means in practice. This was 80px
   a side, so roughly 200px of empty ground sat between sections. */
.band {
  padding-block: var(--space-8);
}
.band--tight { padding-block: var(--space-7); }
.band--cream { background: var(--surface-canvas); }
.band--warm { background: var(--surface-warm); }
.band--brand { background: var(--surface-brand); color: var(--color-on-brand); }
.band--navy { background: var(--surface-navy); color: var(--color-on-brand); }

.stack > * + * { margin-block-start: var(--space-5); }
.stack-lg > * + * { margin-block-start: var(--space-8); }

.grid { display: grid; gap: var(--space-7); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Components below set an explicit display, which would otherwise beat the
   user-agent rule for [hidden]. Filtered-out rows and closed panels rely on the
   attribute, so it has to win. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--space-5);
  z-index: var(--z-toast);
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding: var(--space-4) var(--space-6);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.skip-link:focus { inset-block-start: 0; }

/* ---- Type ---------------------------------------------------------------- */

h1 { font-size: var(--text-h1); font-weight: var(--fw-black); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

.lead {
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-inline-size: 62ch;
}

.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.xsmall { font-size: var(--text-xs); }
.tabular { font-variant-numeric: tabular-nums; }

.prose p + p,
.prose ul + p,
.prose p + ul,
.prose h3 { margin-block-start: var(--space-6); }
.prose h3 { margin-block-start: var(--space-9); }
.prose p { color: var(--text-secondary); line-height: var(--lh-relaxed); }
.prose ul { color: var(--text-secondary); line-height: var(--lh-relaxed); padding-inline-start: var(--space-6); }
.prose li + li { margin-block-start: var(--space-3); }

/* ---- Eyebrow ------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
  margin-block-end: var(--space-5);
}
.eyebrow::before {
  content: "";
  inline-size: 22px;
  block-size: 2px;
  background: var(--color-brand);
  flex: 0 0 auto;
}
.eyebrow--numbered::before { content: none; }
.eyebrow--numbered .n {
  font-weight: var(--fw-black);
  color: var(--color-brand);
}
.eyebrow--numbered .slash { color: var(--border-default); }
.eyebrow--on-dark { color: var(--color-on-brand); }
.eyebrow--on-brand { color: var(--color-on-brand); }
.eyebrow--on-brand::before { background: var(--color-on-brand); }
.eyebrow--navy { color: var(--text-accent); }
.eyebrow--navy::before { background: var(--navy-900); }

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  padding: 13px var(--space-7);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-brand);
  color: var(--color-on-brand);
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { background: var(--color-brand-hover); }
.btn--primary:active { background: var(--color-brand-active); }

.btn--outline-navy {
  background: transparent;
  color: var(--text-accent);
  border-color: var(--navy-900);
}
.btn--outline-navy:hover { background: var(--navy-900); color: var(--color-on-brand); }

.btn--navy { background: var(--navy-900); color: var(--color-on-brand); }
.btn--navy:hover { background: var(--navy-700); }

.btn--secondary {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-default);
}
.btn--secondary:hover { background: var(--surface-subtle); color: var(--text-primary); }

.btn--on-brand { background: var(--white); color: var(--text-brand); }
.btn--on-brand:hover { background: var(--red-50); }

.btn--ghost-on-dark {
  background: transparent;
  color: var(--color-on-brand);
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--ghost-on-dark:hover { background: rgba(255, 255, 255, 0.12); }

.btn--sm { padding: 9px var(--space-5); font-size: var(--text-xs); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.5; pointer-events: none; }

.text-link {
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.text-link--on-dark { color: var(--color-on-brand); }
.text-link--navy { color: var(--text-accent); }
/* Directional arrows flip in RTL; non-directional icons do not. */
[dir="rtl"] .text-link .fa-arrow-right,
[dir="rtl"] .btn .fa-arrow-right { transform: scaleX(-1); }

/* ---- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background: var(--surface-page);
}

.utility-bar {
  background: var(--surface-navy);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-xs);
  block-size: 34px;
  overflow: hidden;
  transition: block-size 200ms ease;
}
.site-header[data-scrolled="true"] .utility-bar { block-size: 0; }
.utility-bar .container { display: flex; align-items: center; justify-content: space-between; block-size: 34px; gap: var(--space-6); }
.utility-bar a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.utility-bar a:hover { color: var(--white); text-decoration: underline; }
.utility-right { display: flex; align-items: center; gap: var(--space-6); }
.lang-switcher { display: flex; align-items: center; gap: var(--space-3); }
.lang-switcher a[aria-current="true"] { color: var(--white); font-weight: var(--fw-semibold); }
/* A language that does not exist yet says so in the switcher, not after the
   click. The tag is set in the language's own words. */
.lang-switcher a { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.lang-coming-tag {
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.72;
}

.main-bar { border-block-end: 1px solid var(--border-subtle); }
.main-bar .container {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  block-size: 76px;
  transition: block-size 200ms ease;
}
.site-header[data-scrolled="true"] .main-bar .container { block-size: 60px; }

.wordmark { flex: 0 0 auto; text-decoration: none; line-height: 1; }
.wordmark:hover { text-decoration: none; }
.wordmark b {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--color-brand);
}
.wordmark span {
  display: block;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-start: 3px;
}

.primary-nav { margin-inline: auto; }
.primary-nav > ul { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  border-block-end: 3px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  padding-block: var(--space-6);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.nav-trigger:hover { color: var(--text-primary); }
.nav-trigger[aria-expanded="true"],
.nav-trigger[data-current="true"] {
  color: var(--text-brand);
  border-block-end-color: var(--color-brand);
}
.nav-trigger .fa-chevron-down { font-size: 9px; opacity: 0.5; transition: transform 160ms ease; }
.nav-trigger[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; }
.icon-button {
  inline-size: 34px; block-size: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}
.icon-button:hover { color: var(--text-primary); border-color: var(--border-default); }

.nav-panel {
  position: absolute;
  inset-inline: 0;
  background: var(--surface-page);
  border-block-end: 3px solid var(--color-brand);
  box-shadow: var(--shadow-md);
}
.nav-panel[hidden] { display: none; }
.nav-panel .container { display: grid; grid-template-columns: minmax(0, 1fr) 320px; padding-inline: 0; }
.nav-panel-col { padding: var(--space-7) var(--space-8); }
.nav-panel-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); align-content: start; }

/* Two explicit lists rather than CSS columns. Multi-column flows top to bottom
   and wraps, which split the four tiers three and one and would resplit them
   on any change to the list. Explicit lists hold the grouping. */
.nav-panel-col--grouped {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-9);
}
.nav-panel-col--grouped .eyebrow { grid-column: 1 / -1; }
.nav-panel-col a { font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; display: block; }
.nav-panel-col a:hover { color: var(--text-brand); }
.nav-panel-col a b { display: block; font-weight: var(--fw-semibold); color: var(--text-primary); }
.nav-panel-col a:hover b { color: var(--text-brand); }
.nav-promo {
  background: var(--surface-canvas);
  border-inline-start: 1px solid var(--border-warm);
  padding: var(--space-7);
}
.nav-promo h3 { font-size: var(--text-h4); margin-block-end: var(--space-3); }
.nav-promo p { font-size: var(--text-sm); color: var(--text-secondary); margin-block-end: var(--space-5); }
.nav-promo img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); margin-block-end: var(--space-4); }

.search-panel { border-block-end: 1px solid var(--border-subtle); background: var(--surface-canvas); }
.search-panel[hidden] { display: none; }
.search-panel form { display: flex; gap: var(--space-4); padding-block: var(--space-6); }

.nav-toggle { display: none; }

/* ---- Mobile drawer ------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--surface-page);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-8); border-block-end: 1px solid var(--border-subtle); }
.drawer-body { flex: 1; padding: var(--space-5) var(--space-8); }
.drawer-body details { border-block-end: 1px solid var(--border-subtle); }
.drawer-body summary {
  padding-block: var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.drawer-body summary::-webkit-details-marker { display: none; }
.drawer-body ul { list-style: none; margin: 0; padding: 0 0 var(--space-5); display: grid; gap: var(--space-4); }
.drawer-body ul a { font-size: var(--text-sm); color: var(--text-secondary); }
.drawer-foot { padding: var(--space-6) var(--space-8) var(--space-9); display: grid; gap: var(--space-4); border-block-start: 1px solid var(--border-subtle); }

/* ---- Page heads ---------------------------------------------------------- */

.page-head { background: var(--surface-canvas); border-block-end: 1px solid var(--border-warm); padding-block: var(--space-11); }
.page-head--warm { background: var(--surface-warm); border-block-end-color: var(--tan); }
.page-head h1 { max-inline-size: 26ch; }
.page-head .lead { margin-block-start: var(--space-6); }
.page-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-8); }

.page-banner { block-size: 170px; overflow: hidden; background: var(--navy-900); }
.page-banner img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.62; }

.breadcrumb { font-size: var(--text-xs); color: var(--text-muted); padding-block: var(--space-5); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; }
.breadcrumb a { color: var(--text-muted); }

/* ---- Hero ---------------------------------------------------------------- */

.hero { position: relative; background: var(--navy-900); overflow: hidden; }
/* Capped so both doors clear the fold on a 1366x768 laptop. The doors are the
   point of the page; the hero used to push them below it. */
.hero-slide { position: relative; min-block-size: 460px; max-block-size: 460px; display: flex; align-items: flex-end; }
.hero-slide[hidden] { display: none; }
.hero-slide img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  opacity: 0.45;
}
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(1, 30, 65, 0.94) 0%, rgba(1, 30, 65, 0.76) 42%, rgba(1, 30, 65, 0.18) 100%);
}
[dir="rtl"] .hero-slide::after { background: linear-gradient(270deg, rgba(1, 30, 65, 0.94) 0%, rgba(1, 30, 65, 0.76) 42%, rgba(1, 30, 65, 0.18) 100%); }
.hero-inner { position: relative; z-index: 2; padding-block: var(--space-10) var(--space-9); max-inline-size: 720px; }
.hero h1 { color: var(--color-on-brand); font-size: var(--text-display); }
.hero .sub { color: rgba(255, 255, 255, 0.88); font-size: var(--text-lg); line-height: var(--lh-normal); margin-block-start: var(--space-5); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-block-start: var(--space-8); }

.hero-controls {
  position: absolute;
  inset-block-end: var(--space-8);
  inset-inline-end: var(--space-8);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.hero-dots { display: flex; gap: var(--space-3); }
.hero-dots button {
  inline-size: 9px; block-size: 9px;
  border: 0; padding: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: inline-size 200ms ease, background 200ms ease;
}
.hero-dots button[aria-current="true"] { background: var(--white); inline-size: 26px; }
.hero-pause {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  inline-size: 32px; block-size: 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px;
}

/* ---- Cards --------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.card--accent { border-block-start: var(--border-accent) solid var(--color-brand); }
.card--accent-navy { border-block-start: var(--border-accent) solid var(--navy-900); }
.card-body { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.card-body h3, .card-body h4 { letter-spacing: var(--tracking-tight); }
.card-body p { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lh-normal); }
.card-foot {
  border-block-start: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-7);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  display: flex; align-items: center; justify-content: space-between;
  margin-block-start: auto;
}

/* The whole card is one link: a stretched pseudo-element over the title anchor.
   Meta, tags and thumbnails are therefore not separate tab stops. */
.card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-default); }
.card--link:focus-within { box-shadow: var(--focus-ring); }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-link { text-decoration: none; color: inherit; }
.card-link:hover { text-decoration: none; }
.card--link .card-foot,
.card--link .tag-row { position: relative; z-index: 0; }

.card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-warm);
  border-block-end: 1px solid var(--border-warm);
  overflow: hidden;
}
.card-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.card-thumb--cover { aspect-ratio: 3 / 4; }
.card-thumb--tall { aspect-ratio: 4 / 3; }

.type-chip {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 2;
  background: var(--surface-page);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  color: var(--text-secondary);
}
.type-chip--brand { background: var(--color-brand); color: var(--color-on-brand); border-color: var(--color-brand); }

.meta-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.meta-row .dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--border-default); }

.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: auto; padding-block-start: var(--space-2); }
.tag { background: var(--surface-subtle); border-radius: var(--radius-sm); font-size: 10px; padding: 3px 7px; color: var(--text-muted); }
.tag--lock { background: var(--surface-brand-subtle); color: var(--text-brand); font-weight: var(--fw-semibold); }

.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--radius-md);
  background: var(--surface-brand-subtle);
  color: var(--color-brand);
  font-size: 20px;
  flex: 0 0 auto;
}
.icon-chip--navy { background: var(--surface-navy-subtle); color: var(--navy-900); }
.icon-chip--on-brand { background: rgba(255, 255, 255, 0.16); color: var(--color-on-brand); }

/* ---- Stat cards ---------------------------------------------------------- */

.stat {
  background: var(--surface-card);
  border: 1px solid var(--border-warm);
  border-block-start: var(--border-accent) solid var(--color-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}
.stat .value {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-stat);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-brand);
  font-variant-numeric: tabular-nums;
}
.stat .label { font-size: var(--text-sm); font-weight: var(--fw-semibold); margin-block-start: var(--space-3); }
.stat .caption { font-size: var(--text-xs); color: var(--text-muted); margin-block-start: var(--space-2); }
.stat .asof {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-start: var(--space-4);
  display: block;
}
.stat--plain { border: 0; border-radius: 0; padding: 0; background: none; }
.stat--plain .value { font-size: var(--text-h1); }

/* ---- Door cards ---------------------------------------------------------- */

.door {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-warm);
  box-shadow: var(--shadow-xs);
  background: var(--surface-card);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.door:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.door-head { padding: var(--space-8); color: var(--color-on-brand); }
.door--ns .door-head { background: var(--surface-brand); }
.door--partner .door-head { background: var(--surface-navy); }
.door-head h2 { color: var(--color-on-brand); font-size: var(--text-h3); }
.door-head p { color: var(--white); font-size: var(--text-body); margin-block-start: var(--space-4); line-height: var(--lh-normal); }
.door-body { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); flex: 1; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.chip {
  background: var(--surface-canvas);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-pill);
  padding: 6px var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none;
}
a.chip:hover { border-color: var(--color-brand); color: var(--text-brand); text-decoration: none; }
.chip i { color: var(--color-brand); font-size: 11px; }
/* Three routes, each a whole-row link. Hairlines between them rather than
   around them: the card already has a border, and a second one per row turns
   three choices into three boxes. */
.door-routes { list-style: none; margin: 0; padding: 0; }
.door-routes li + li { border-block-start: 1px solid var(--border-warm); }
.door-routes a {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  text-decoration: none;
  color: inherit;
}
.door-routes li:first-child a { padding-block-start: 0; }
.door-route-label {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.door-route-label i {
  font-size: 11px;
  color: var(--color-brand);
  transition: transform 160ms ease;
}
.door--partner .door-route-label i { color: var(--text-accent); }
.door-route-line {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
}
.door-routes a:hover .door-route-label { color: var(--text-brand); }
.door-routes a:hover .door-route-label i { transform: translateX(3px); }
.door--partner .door-routes a:hover .door-route-label { color: var(--text-accent); }

@media (prefers-reduced-motion: reduce) {
  .door-routes a:hover .door-route-label i { transform: none; }
}

/* ---- Workflow stepper ---------------------------------------------------- */

.stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.step {
  padding: var(--space-7);
  border-block-start: 2px solid var(--border-warm);
  position: relative;
}
.step:first-child { border-block-start-color: var(--color-brand); }
.step + .step { border-inline-start: 1px solid var(--border-warm); }
.step .n {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-brand);
}
.step h3 { font-size: var(--text-h4); margin-block-start: var(--space-3); }
.step p { font-size: var(--text-sm); color: var(--text-secondary); margin-block-start: var(--space-3); line-height: var(--lh-normal); }
.step .duration {
  display: inline-block;
  margin-block-start: var(--space-5);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Callout, quote ------------------------------------------------------ */

.callout {
  display: flex;
  gap: var(--space-5);
  background: var(--surface-canvas);
  border: 1px solid var(--border-warm);
  border-inline-start: var(--border-accent) solid var(--color-brand);
  border-radius: var(--radius-md);
  padding: var(--space-7);
}
.callout--navy { border-inline-start-color: var(--navy-900); }
.callout i { color: var(--color-brand); font-size: 20px; flex: 0 0 auto; margin-block-start: 2px; }
.callout--navy i { color: var(--navy-900); }
.callout p { font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.callout h4 { font-size: var(--text-body); margin-block-end: var(--space-3); }

.pull-quote {
  border-inline-start: var(--border-accent) solid var(--color-brand);
  padding-inline-start: var(--space-8);
  margin-block: var(--space-9);
}
.pull-quote p {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.pull-quote cite { display: block; margin-block-start: var(--space-5); font-style: normal; font-size: var(--text-sm); color: var(--text-muted); }

/* ---- Tables -------------------------------------------------------------- */

.table-scroll { overflow-x: auto; }
table.data {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  text-align: start;
}
table.data caption { text-align: start; font-size: var(--text-xs); color: var(--text-muted); padding-block-end: var(--space-4); }
table.data th, table.data td {
  padding: var(--space-5) var(--space-6);
  border-block-end: 1px solid var(--border-warm);
  vertical-align: top;
  text-align: start;
}
table.data thead th {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  border-block-end: 2px solid var(--color-brand);
  white-space: nowrap;
}
table.data tbody th { font-weight: var(--fw-semibold); color: var(--text-primary); }
table.data td { color: var(--text-secondary); }
table.data tbody tr:hover { background: var(--surface-canvas); }
table.data .num { font-variant-numeric: tabular-nums; }

.table-notes { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; gap: var(--space-5); counter-reset: note; }
.table-notes li {
  display: flex; gap: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.table-notes li::before {
  counter-increment: note;
  content: counter(note);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  color: var(--color-brand);
  flex: 0 0 auto;
}

/* ---- Detail archetype ---------------------------------------------------- */

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-12); align-items: start; }
.action-rail { position: sticky; inset-block-start: 120px; display: grid; gap: var(--space-6); }
.rail-card {
  background: var(--surface-canvas);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: grid;
  gap: var(--space-5);
}
.rail-card h3 { font-size: var(--text-h4); }
.rail-meta { display: grid; gap: var(--space-4); font-size: var(--text-sm); }
.rail-meta div { display: grid; gap: 2px; }
.rail-meta dt, .rail-meta .k {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rail-meta dd, .rail-meta .v { margin: 0; color: var(--text-secondary); }

/* ---- Library / index + facets -------------------------------------------- */

.library { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.facet-rail { display: grid; gap: var(--space-7); }
.facet-group { border-block-end: 1px solid var(--border-warm); padding-block-end: var(--space-6); }
.facet-group summary {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  padding-block: var(--space-3);
}
.facet-group summary::-webkit-details-marker { display: none; }
.facet-group summary::after { content: "\f077"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 9px; color: var(--text-muted); }
.facet-group:not([open]) summary::after { content: "\f078"; }
.facet-options { display: grid; gap: var(--space-4); margin-block-start: var(--space-4); }
.facet-option { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; }
.facet-option input { accent-color: var(--color-brand); inline-size: 15px; block-size: 15px; flex: 0 0 auto; }
.facet-option .count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.facet-option:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }

.results-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--border-warm);
}
.result-count { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.result-count .n { color: var(--color-brand); font-variant-numeric: tabular-nums; }
.sort-control { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-5); }
.filter-chip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: var(--surface-brand-subtle);
  border: 1px solid var(--red-100);
  color: var(--text-brand);
  border-radius: var(--radius-pill);
  padding: 5px var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.filter-chip i { font-size: 9px; }
.filter-drawer-toggle { display: none; }
.no-results { padding: var(--space-12) 0; text-align: center; color: var(--text-muted); }

.result-list { display: grid; gap: var(--space-5); margin-block-start: var(--space-7); }
.result-row {
  position: relative;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-7);
  background: var(--surface-card);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.result-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-default); }
.result-row:focus-within { box-shadow: var(--focus-ring); }
.result-row .thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-warm); }
.result-row .thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.result-row .body { display: flex; flex-direction: column; gap: var(--space-3); }
.result-row h3 { font-size: var(--text-h4); }
.result-row p { font-size: var(--text-sm); color: var(--text-secondary); }

/* ---- Forms --------------------------------------------------------------- */

.field { display: grid; gap: var(--space-3); }
.field > label, .fieldset-legend {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.field .req { color: var(--color-brand); margin-inline-start: 2px; }
.field .hint { font-size: var(--text-xs); color: var(--text-muted); }
.field input[type="text"],
.field input[type="email"],
.field input[type="search"],
.field input[type="date"],
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-primary);
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 11px var(--space-5);
  inline-size: 100%;
}
.field textarea { min-block-size: 180px; resize: vertical; line-height: var(--lh-normal); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-brand); }
.field-error {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-brand);
  font-weight: var(--fw-medium);
  /* Height is reserved whether or not the message is showing, so clearing an
     error does not move everything below it. */
  min-block-size: 1.4em;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--color-brand); }

.error-summary {
  border: 1px solid var(--color-brand);
  border-inline-start-width: var(--border-accent);
  border-radius: var(--radius-md);
  background: var(--surface-brand-subtle);
  padding: var(--space-7);
}
.error-summary[hidden] { display: none; }
.error-summary h2 { font-size: var(--text-h4); color: var(--text-brand); }
.error-summary ul { margin: var(--space-5) 0 0; padding-inline-start: var(--space-6); font-size: var(--text-sm); }

.radio-cards { display: grid; gap: var(--space-4); }
.radio-card {
  display: flex; gap: var(--space-5); align-items: flex-start;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.radio-card:hover { border-color: var(--color-brand); }
.radio-card input { accent-color: var(--color-brand); margin-block-start: 3px; }
.radio-card:has(input:checked) { border-color: var(--color-brand); background: var(--surface-brand-subtle); }
.radio-card b { display: block; font-size: var(--text-sm); }
.radio-card span { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-block-start: 3px; }

.consent-box {
  display: flex; gap: var(--space-5); align-items: flex-start;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  background: var(--surface-canvas);
}
.consent-box input { accent-color: var(--color-brand); margin-block-start: 3px; inline-size: 18px; block-size: 18px; }
.consent-box label { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); }

.form-progress { display: flex; gap: 0; margin-block-end: var(--space-9); list-style: none; padding: 0; }
.form-progress li {
  flex: 1;
  border-block-start: 3px solid var(--border-warm);
  padding-block-start: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.form-progress li[data-state="current"] { border-block-start-color: var(--color-brand); color: var(--text-brand); }
.form-progress li[data-state="done"] { border-block-start-color: var(--color-brand); color: var(--text-secondary); }

.form-step[hidden] { display: none; }
.form-actions { display: flex; gap: var(--space-4); justify-content: space-between; margin-block-start: var(--space-9); padding-block-start: var(--space-7); border-block-start: 1px solid var(--border-warm); }
.autosave-note { font-size: var(--text-xs); color: var(--text-muted); }

/* The request form is a Kobo form in a frame, so its own chrome does the
   scrolling. The height is tall enough that the first few questions and the
   frame's scrollbar are both visible without the page itself moving, and the
   border and radius are the card treatment so a third-party form still reads as
   part of the page. */
.form-embed {
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  background: var(--surface-canvas);
  overflow: hidden;
}
.form-embed iframe {
  display: block;
  inline-size: 100%;
  block-size: clamp(600px, 78vh, 1000px);
  border: 0;
}

.review-list { display: grid; gap: var(--space-5); }
.review-list div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-5); font-size: var(--text-sm); padding-block-end: var(--space-4); border-block-end: 1px solid var(--border-warm); }
.review-list dt { font-weight: var(--fw-semibold); }
.review-list dd { margin: 0; color: var(--text-secondary); }

.reference {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-h2);
  color: var(--color-brand);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

/* ---- Timeline ------------------------------------------------------------ */

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--space-7);
  padding-block: var(--space-7);
  border-inline-start: 2px solid var(--border-warm);
  padding-inline-start: var(--space-8);
  position: relative;
}
.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: -7px;
  inset-block-start: calc(var(--space-7) + 8px);
  inline-size: 12px; block-size: 12px;
  border-radius: 50%;
  background: var(--color-brand);
  border: 3px solid var(--surface-page);
}
.timeline .when {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-h4);
  color: var(--color-brand);
  font-variant-numeric: tabular-nums;
}
.timeline h3 { font-size: var(--text-h4); }
.timeline p { font-size: var(--text-sm); color: var(--text-secondary); margin-block-start: var(--space-3); line-height: var(--lh-relaxed); }

/* ---- Accordion ----------------------------------------------------------- */

.accordion { border-block-start: 1px solid var(--border-warm); }
.accordion details { border-block-end: 1px solid var(--border-warm); }
.accordion summary {
  padding-block: var(--space-6);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-body);
  cursor: pointer;
  list-style: none;
  display: flex; gap: var(--space-5); justify-content: space-between; align-items: flex-start;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "\2b"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--color-brand); font-size: 12px; flex: 0 0 auto; margin-block-start: 4px; }
.accordion details[open] summary::after { content: "\f068"; }
.accordion .answer { padding-block-end: var(--space-7); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); max-inline-size: 70ch; }

/* ---- Specialist card ----------------------------------------------------- */

.person {
  display: flex; align-items: flex-start; gap: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.person .avatar {
  inline-size: 52px; block-size: 52px;
  border-radius: 50%;
  background: var(--surface-warm);
  display: grid; place-items: center;
  color: var(--border-default);
  flex: 0 0 auto;
  overflow: hidden;
}
.person .avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.person .name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm); letter-spacing: var(--tracking-tight); }
.person .role { font-size: var(--text-xs); color: var(--text-muted); margin-block-start: 3px; }
.person .region {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-brand);
  margin-block-start: var(--space-3);
}
.person .langs { font-size: var(--text-xs); color: var(--text-secondary); margin-block-start: var(--space-3); }

/* ---- Event card ---------------------------------------------------------- */

.event { display: flex; gap: 0; align-items: stretch; }
.event .date-block {
  flex: 0 0 74px;
  background: var(--surface-brand-subtle);
  border-inline-end: 1px solid var(--border-warm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-block: var(--space-6);
}
.event .date-block .d { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 26px; color: var(--color-brand); line-height: 1; font-variant-numeric: tabular-nums; }
.event .date-block .m { font-family: var(--font-display); font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand); margin-block-start: 3px; }
.event-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.event-meta i { color: var(--color-brand); font-size: 10px; inline-size: 12px; }

/* ---- Logo row ------------------------------------------------------------ */

.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.logo-slot {
  block-size: 44px;
  padding-inline: var(--space-6);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.logo-slot--on-dark { border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.6); }

/* ---- Closing CTA bands --------------------------------------------------- */

.cta-band { text-align: center; }
.cta-band h2 { color: var(--color-on-brand); font-size: var(--text-h2); max-inline-size: 22ch; margin-inline: auto; }
.cta-band p { color: var(--white); font-size: var(--text-lg); margin-block-start: var(--space-5); }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; margin-block-start: var(--space-8); }
.cta-band .sub-note { font-size: var(--text-body); color: var(--white); margin-block-start: var(--space-6); }
.cta-band .sub-note a { color: var(--color-on-brand); text-decoration: underline; }

.contribute-band { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-7); align-items: center; }
.contribute-band h2 { color: var(--color-on-brand); font-size: var(--text-h3); }
.contribute-band p { color: var(--white); font-size: var(--text-body); margin-block-start: var(--space-3); max-inline-size: 52ch; }

/* ---- Footer -------------------------------------------------------------- */

.site-footer { background: var(--surface-navy); color: rgba(255, 255, 255, 0.72); }
.site-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-top {
  display: grid;
  grid-template-columns: 300px repeat(4, minmax(0, 1fr));
  gap: var(--space-9);
  padding-block: var(--space-12) var(--space-9);
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-about .wordmark b { color: var(--white); }
.footer-about .wordmark span { color: rgba(255, 255, 255, 0.55); }
.footer-about p { font-size: var(--text-sm); line-height: var(--lh-relaxed); margin-block: var(--space-6); }
.social-row { display: flex; gap: var(--space-3); }
.social-row a {
  inline-size: 32px; block-size: 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: 13px;
}
.social-row a:hover { border-color: var(--color-brand); background: var(--color-brand); color: var(--white); }
.footer-col h2 {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--white);
  margin-block-end: var(--space-6);
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--color-brand);
  display: inline-block;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.footer-col a { font-size: var(--text-sm); }
.footer-mid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-10);
  padding-block: var(--space-9);
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
  align-items: start;
}
.footer-mid h2 { font-size: var(--text-h4); color: var(--white); }
.footer-mid p { font-size: var(--text-sm); margin-block-start: var(--space-3); }
.newsletter-form { display: flex; gap: var(--space-4); margin-block-start: var(--space-6); flex-wrap: wrap; }
.newsletter-form label { flex: 1 1 240px; display: grid; gap: var(--space-3); font-size: var(--text-xs); color: rgba(255, 255, 255, 0.72); }
.newsletter-form input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  padding: 11px var(--space-5);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  inline-size: 100%;
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.42); }
.newsletter-form button { align-self: end; }
.newsletter-note { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.68); margin-block-start: var(--space-4); }
.newsletter-confirm { font-size: var(--text-sm); color: var(--white); margin-block-start: var(--space-5); display: flex; align-items: center; gap: var(--space-3); }
.newsletter-confirm[hidden] { display: none; }
.footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.68);
}
.footer-legal a { color: rgba(255, 255, 255, 0.68); }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }

/* ---- Cookie banner ------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  inset-block-end: 0; inset-inline: 0;
  z-index: var(--z-overlay);
  background: var(--surface-page);
  border-block-start: var(--border-accent) solid var(--color-brand);
  box-shadow: var(--shadow-lg);
  padding-block: var(--space-5);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner .container { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-8); align-items: center; justify-content: space-between; }
.cookie-banner p { margin: 0; color: var(--text-secondary); }

/* Per-category choice is one click away rather than occupying the banner. */
.cookie-choose > summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  padding-block: var(--space-3);
}
.cookie-choose[open] .cookie-categories { margin-block-start: var(--space-4); }
.cookie-categories { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.cookie-categories label { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.cookie-categories input { accent-color: var(--color-brand); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---- Sitemap / dashboard misc -------------------------------------------- */

.embed-frame {
  aspect-ratio: 16 / 9;
  background: var(--surface-warm);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  display: grid; place-items: center;
  text-align: center;
  padding: var(--space-9);
}
.sitemap-cols { columns: 3; column-gap: var(--space-10); }
.sitemap-cols section { break-inside: avoid; margin-block-end: var(--space-9); }
.sitemap-cols h2 { font-size: var(--text-h4); margin-block-end: var(--space-5); }
.sitemap-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: var(--text-sm); }

.notice {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--surface-subtle);
}

/* ---- FD Guide: situations, catalogue, service pages ---------------------- */

/* Layer 1. The statement is the whole card: a Society recognises its own
   sentence before it reads anything else, so nothing competes with it. */
.situation-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}
.situation-card {
  display: grid;
  gap: var(--space-4);
  align-content: space-between;
  block-size: 100%;
  padding: var(--space-7);
  background: var(--surface-canvas);
  border: 1px solid var(--border-warm);
  border-inline-start: 3px solid var(--color-brand);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
}
.situation-card:hover {
  border-color: var(--color-brand);
  text-decoration: none;
}
.situation-statement {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
.situation-meta { font-size: var(--text-xs); color: var(--text-muted); }

.start-service { border-inline-start: 3px solid var(--color-brand); }

.catalogue-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: end;
}

/* Layer 2. The service code is an identifier, so it is set in the tabular face
   and kept quiet: the name is what a reader is scanning for. */
.service-code {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-block-start: var(--space-3);
}

.deliverables { display: grid; gap: var(--space-4); padding-inline-start: var(--space-7); }
.deliverables li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  color: var(--text-secondary);
}

/* The prerequisites block carries the weight on a service page: it is what
   turns browsing into self-diagnosis. Hence the rule and the indent. */
.prereq-section { border-inline-start: 3px solid var(--border-warm); padding-inline-start: var(--space-7); }
.prereq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.prereq + .prereq { border-block-start: 1px solid var(--border-warm); padding-block-start: var(--space-6); }
.prereq-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: baseline;
  justify-content: space-between;
}
.prereq-name { font-weight: var(--fw-semibold); color: var(--text-primary); }
.prereq-reason { font-size: var(--text-sm); color: var(--text-secondary); margin-block-start: var(--space-3); }
.tag--required { background: var(--surface-brand-subtle); color: var(--text-brand); font-weight: var(--fw-semibold); }

.tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.tool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--border-warm);
  font-size: var(--text-sm);
}
.tool-code { color: var(--text-muted); flex: 0 0 auto; }
.tool-name { flex: 1 1 200px; color: var(--text-secondary); }
.tool-meta { display: inline-flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; }

.rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: var(--text-sm); }
/* The evidence card is the one thing on a situation page that shows the work
   rather than describing it, so it carries the accent. */
.rail-card--evidence { border-inline-start: 3px solid var(--color-brand); }

/* The plain sentence leads and the workbook's own name sits under it, so the
   catalogue stays searchable by its real terms without leading with them. */
.outcome-list {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  max-inline-size: var(--content-max);
  counter-reset: outcome;
}
.outcome-list li {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: var(--space-6);
  border-inline-start: 2px solid var(--border-warm);
}
.outcome-plain { color: var(--text-primary); font-weight: var(--fw-semibold); }
.outcome-name { font-size: var(--text-sm); color: var(--text-muted); }

/* A service code is an identifier sitting beside a name, not a clause joined to
   it by a dash. Giving it its own box removes 96 em dashes and reads better. */
.code-label {
  display: inline-block;
  margin-inline-end: var(--space-4);
  padding: 2px var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
}
a:hover > .code-label { color: var(--text-brand); }

/* The filtered service list on a situation page. Rows, not cards: the detail
   belongs on the service page. */
.service-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.service-rows li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--border-warm);
}
.service-rows a { text-decoration: none; color: var(--text-primary); font-weight: var(--fw-semibold); }
.service-rows a:hover { color: var(--text-brand); }
.service-row-tier { font-size: var(--text-xs); color: var(--text-muted); }

/* A tier card with no photograph carries its weight by being filled rather than
   outlined, with padding that lets the icon chip and the line breathe. */
.card--filled { background: var(--surface-page); border-color: transparent; box-shadow: var(--shadow-xs); }
.card--filled .card-body { padding: var(--space-8); gap: var(--space-5); }

/* The impact strip is the page's mid-point anchor: a solid navy band, no card
   borders. Display type only on the dark ground. */
.impact-band .stat { background: transparent; border: 0; padding: 0; }
.impact-band .stat .value { color: var(--color-on-brand); }
.impact-band .stat .label { color: var(--color-on-brand); }
.impact-band .stat .caption { color: rgba(255, 255, 255, 0.78); }
.impact-band .stat .asof { color: rgba(255, 255, 255, 0.64); }
.impact-band p { color: rgba(255, 255, 255, 0.82); }

/* ---- Engagement map ------------------------------------------------------ */

.engagement-map { margin: var(--space-9) 0 0; }
.engagement-map svg { inline-size: 100%; block-size: auto; display: block; }
.engagement-map figcaption { margin-block-start: var(--space-4); }

/* Every country starts neutral; the build marks the engaged ones. No runtime
   JS is involved, so this holds with scripting off. */
.engagement-map .map-country { fill: var(--surface-warm); stroke: var(--surface-page); stroke-width: 0.5; }
.engagement-map .map-country--engaged { fill: var(--color-brand); }

/* The regional count row: the map's accessible equivalent, and the version that
   carries the information when the SVG does not paint. */
.map-counts {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-5);
  border-block-start: 1px solid var(--border-warm);
  padding-block-start: var(--space-7);
}
.map-counts a {
  display: grid;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}
.map-count {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--color-brand);
}
.map-count-label { font-size: var(--text-sm); color: var(--text-secondary); }
.map-counts a:hover .map-count-label { color: var(--text-brand); }

/* The full country list, on /where-we-work/. */
.map-regions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
  margin-block-start: var(--space-9);
}
.map-regions h3 { font-size: var(--text-h4); margin-block-end: var(--space-5); }
.map-regions h3 a { text-decoration: none; color: var(--text-primary); }
.map-regions h3 a:hover { color: var(--text-brand); }
.map-regions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.map-regions li { font-size: var(--text-sm); color: var(--text-secondary); }

/* ---- Theory of change diagram -------------------------------------------- */

/* One chain, two layouts. The wide one has room for four columns; below that
   the columns stack, because scaling a 1160-wide viewBox into a phone puts the
   body type under 4px. Only the layout in use is in the accessibility tree. */
.toc--narrow { display: none; }
@media (max-width: 860px) {
  .toc--wide { display: none; }
  .toc--narrow { display: block; }
}

.toc .toc-band { fill: var(--surface-canvas); stroke: var(--border-warm); }
.toc .toc-card { fill: var(--surface-card); stroke: var(--border-warm); }
.toc .toc-rule { fill: var(--color-brand); }
.toc .toc-kicker {
  fill: var(--text-brand);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.toc .toc-kicker--on-brand { fill: rgba(255, 255, 255, 0.82); }
.toc .toc-h { fill: var(--text-primary); font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.toc .toc-p { fill: var(--text-secondary); font-size: 13px; }
.toc .toc-p-n { fill: var(--text-secondary); font-size: 14px; }
.toc .toc-arrow { stroke: var(--border-default); stroke-width: 2; fill: none; }
.toc .toc-impact { fill: var(--surface-brand); }
/* The red band carries display type only. White on the official red is 4.25:1,
   which clears AA for large text and UI components but not for body copy, so
   the explanatory sentence lives in the figcaption instead. */
.toc .toc-impact-h { fill: var(--color-on-brand); font-family: var(--font-display); font-size: 19px; font-weight: 800; }
.toc .toc-impact-h-n { fill: var(--color-on-brand); font-family: var(--font-display); font-size: 18px; font-weight: 800; }

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 1200px) {
  .container { padding-inline: var(--space-7); }
  .primary-nav > ul { gap: var(--space-5); }
  .nav-trigger { font-size: var(--text-xs); }
}

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
  .action-rail { position: static; }
  .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step + .step { border-inline-start: 0; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero h1 { font-size: var(--text-h1); }
}

@media (max-width: 900px) {
  .library { grid-template-columns: minmax(0, 1fr); }
  .facet-rail {
    position: fixed;
    inset-block: 0; inset-inline-start: 0;
    inline-size: min(320px, 88vw);
    background: var(--surface-page);
    z-index: var(--z-overlay);
    padding: var(--space-8);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
  }
  .facet-rail[hidden] { display: none; }
  .filter-drawer-toggle { display: inline-flex; }
  .contribute-band { grid-template-columns: minmax(0, 1fr); }
  .footer-mid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  /* The drawer toggle is the one action that survives here, so it is excluded
     from the hide rather than fighting it on specificity. */
  .primary-nav, .header-actions .btn, .header-actions .icon-button:not(.nav-toggle) { display: none; }
  .header-actions .nav-toggle { display: inline-flex; margin-inline-start: auto; }
  .grid--2, .grid--3, .grid--4, .grid--6 { grid-template-columns: minmax(0, 1fr); }
  .stepper { grid-template-columns: minmax(0, 1fr); }
  .step + .step { border-block-start-color: var(--border-warm); }
  .band { padding-block: var(--space-11); }
  .hero-slide { min-block-size: 380px; }
  .hero h1 { font-size: var(--text-h2); }
  .result-row { grid-template-columns: minmax(0, 1fr); }
  .review-list div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .sitemap-cols { columns: 1; }
  .cookie-banner .container { grid-template-columns: minmax(0, 1fr); }
  .form-progress { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .page-head { padding-block: var(--space-11); }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

@media (max-width: 480px) {
  .container { padding-inline: var(--space-6); }
  h1 { font-size: var(--text-h2); }
  .stat .value { font-size: var(--text-h1); }
  .door-head, .door-body { padding: var(--space-7); }
}

/* Under reduced motion nothing auto-advances, meters fill instantly, and the
   hover lift becomes a border change. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card--link:hover, .result-row:hover, .door:hover { transform: none; border-color: var(--color-brand); }
}

@media print {
  .site-header, .site-footer, .cookie-banner, .hero-controls, .facet-rail { display: none; }
  .container { max-inline-size: none; }
}