/* TEF — shared stylesheet for /ar/ (rtl) and /en/ (ltr).
   Logical properties only, so one file serves both directions. */

/* ---------- Fonts (self-hosted, OFL — see ../fonts/) ---------- */
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("../fonts/NotoSansArabic-arabic-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011,
    U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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;
}

/* ---------- Design tokens ---------- */
:root {
  --tef-navy:       #082B60; /* primary — text and headings on white */
  --tef-blue:       #007EAD; /* supporting — accents only; never small body text on white */
  --tef-navy-dark:  #071626; /* dark backgrounds */
  --tef-blue-dark:  #20A9DC; /* accent on dark backgrounds */
  --tef-white:      #FFFFFF;
  --tef-gray-light: #F1F5F9; /* secondary panels, tables */

  /* Sampled from the logo JPEG backgrounds (corner average) so no edge shows. */
  --tef-logo-bg-light: #FEFEFE; /* TEF_Logo_Primary_RGB.jpg */
  --tef-logo-bg-dark:  #05172A; /* TEF_Logo_Dark_RGB.jpg */

  --font-ar: "Noto Sans Arabic", "Noto Sans", Arial, sans-serif;
  --font-en: "Noto Sans", Arial, sans-serif;

  --fs-h1:    clamp(2rem, 1.6rem + 1.6vw, 2.5rem);       /* 32–40px */
  --fs-h2:    clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);  /* 22–28px */
  --fs-h3:    clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); /* 18–20px */
  --fs-body:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* 16–18px */
  --fs-small: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);   /* 14–16px */

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  /* Derived from the tokens above as opaque mixes on white (lines overlap, so no alpha). */
  --tef-line:       #A9B5C7; /* navy at 35% — desktop chart connectors */
  --tef-spine-lead: #8495B0; /* navy at 50% */
  --tef-spine-exec: #80BFD6; /* blue at 50% */
  --tef-spine-adv:  #90D4EE; /* blue-dark at 50% */

  --shadow-card:       0 1px 2px rgb(8 43 96 / 0.06), 0 4px 12px rgb(8 43 96 / 0.08);
  --shadow-card-hover: 0 2px 4px rgb(8 43 96 / 0.08), 0 10px 24px rgb(8 43 96 / 0.14);

  --measure: 68ch;
  --gutter: 1rem;
  --header-h: 3.5rem; /* 56px */
}

@media (min-width: 48rem) {
  :root { --gutter: 2rem; --header-h: 4rem; } /* 64px */
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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

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

body {
  margin: 0;
  background: var(--tef-white);
  color: var(--tef-navy);
  font-size: var(--fs-body);
  font-weight: 400;
  text-align: start;
}

:lang(ar) { font-family: var(--font-ar); line-height: 1.4; }
:lang(en) { font-family: var(--font-en); line-height: 1.5; }

h1, h2, h3, b, strong { font-weight: 700; }
h1, h2, h3 { line-height: 1.25; margin-block: 0 var(--space-2); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin-block: 0 var(--space-2); }
small, .small { font-size: var(--fs-small); }

/* Links: underlined so they never rely on colour alone. */
a {
  color: var(--tef-navy);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.08em;
}
a:hover { text-decoration-thickness: 0.15em; }

:focus-visible {
  outline: 3px solid var(--tef-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--measure); }

.skip {
  position: absolute;
  inset-inline-start: var(--space-2);
  inset-block-start: -10rem;
  padding: var(--space-1) var(--space-2);
  background: var(--tef-white);
  z-index: 200; /* above the sticky header */
}
.skip:focus { inset-block-start: var(--space-2); }

/* ---------- Header (sticky; pill nav + language toggle; no logo) ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--tef-logo-bg-light); /* solid fallback */
  border-block-end: 1px solid var(--tef-gray-light);
  box-shadow: 0 1px 2px rgb(8 43 96 / 0.04), 0 4px 16px rgb(8 43 96 / 0.06);
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .site-header {
    background: rgb(254 254 254 / 0.92); /* --tef-logo-bg-light at 92% */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--header-h);
}
.site-nav {
  flex: 1 1 auto;
  min-inline-size: 0; /* lets the pill strip scroll instead of widening the page */
}
.site-nav ul {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0.375rem 0.25rem; /* room for the focus ring inside the scroller */
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav li { flex: none; }
.site-nav a {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  color: var(--tef-navy);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
}
.site-nav a:hover { background: var(--tef-gray-light); }
.site-nav a[aria-current="page"] {
  background: var(--tef-navy);
  color: var(--tef-white);
  font-weight: 700;
}
.site-nav a:focus-visible,
.lang-toggle:focus-visible {
  outline: 2px solid var(--tef-blue);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Below 48rem: one row; the pills become a swipeable strip with a fade at the inline end. */
@media (max-width: 47.99rem) {
  .site-nav ul {
    scroll-snap-type: x proximity;
    padding-inline-end: 1.5rem; /* the last pill can scroll clear of the fade */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  }
  [dir="rtl"] .site-nav ul {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 1.5rem), transparent);
  }
  .site-nav li { scroll-snap-align: start; }
}

.lang-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border: 1.5px solid var(--tef-navy);
  border-radius: 999px;
  color: var(--tef-navy);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
}
.lang-toggle:hover { background: var(--tef-gray-light); }

.icon {
  flex: none;
  inline-size: 1em;
  block-size: 1em;
}

@media (prefers-reduced-motion: no-preference) {
  .site-nav a,
  .lang-toggle { transition: background-color 0.15s ease, color 0.15s ease; }
}

/* ---------- Hero (full-screen, dark) ---------- */
.hero {
  position: relative;
  min-block-size: calc(100svh - var(--header-h));
  background: var(--tef-logo-bg-dark); /* flat, matches Dark logo JPEG exactly */
  color: var(--tef-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4) var(--space-3);
  text-align: center;
  box-sizing: border-box;
}

.hero h1 {
  margin: 0;
  line-height: 1;
}

.hero-wrap {
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
}

/* Logos: never below 320px, aspect ratio preserved, no filters/transforms. */
.logo {
  display: block;
  width: clamp(320px, 45vw, 560px);
  min-width: 320px;
  max-width: none;
  height: auto;
  margin-inline: auto;
}

.tagline {
  margin-block: var(--space-3) 0;
  margin-inline: auto;
  padding-inline: var(--gutter);
  max-width: 28ch;
  font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  font-weight: 700;
  color: var(--tef-white);
  text-align: center;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.3);
  color: var(--tef-white);
  text-decoration: none;
  margin-block-start: var(--space-3);
  flex-shrink: 0;
}
.scroll-cue:hover {
  border-color: var(--tef-blue-dark);
  color: var(--tef-blue-dark);
}
.scroll-cue:focus-visible {
  outline: 3px solid var(--tef-blue-dark);
  outline-offset: 3px;
}
.icon--cue {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue {
    animation: scroll-cue-bob 2.5s ease-in-out infinite;
  }
  @keyframes scroll-cue-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
  }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-5); }
.section--alt { background: var(--tef-gray-light); }
.section[id] { scroll-margin-block-start: calc(var(--header-h) + var(--space-2)); } /* clears the sticky header */

/* ---------- About (statement) ---------- */
.section--about {
  background: var(--tef-white);
  padding-block: var(--space-5);
}
.about-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.about-year {
  font-size: clamp(4.5rem, 14vw, 9.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--tef-navy); /* solid fallback where text-stroke is unsupported */
  user-select: none;
}
@supports ((-webkit-text-stroke: 2px var(--tef-blue)) or (text-stroke: 2px var(--tef-blue))) {
  .about-year {
    color: transparent;
    -webkit-text-stroke: 2.5px var(--tef-blue);
    text-stroke: 2.5px var(--tef-blue);
  }
}
.about-content {
  max-width: var(--measure);
}
.about-content h2 {
  margin-block-end: var(--space-2);
}
.about-text {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  margin-block-end: 0;
}
@media (min-width: 64rem) {
  .about-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-5);
  }
  .about-year {
    font-size: clamp(6.5rem, 10vw, 10.5rem);
  }
}

/* ---------- Our Work (sticky column desktop / carousel mobile) ---------- */
.section--work {
  background: var(--tef-gray-light);
  padding-block: var(--space-5);
}
.work-wrap {
  position: relative;
}
.work-header h2 {
  margin-block: 0 var(--space-3);
}

/* Below 64rem: horizontal scroll-snap carousel */
@media (max-width: 63.99rem) {
  .cards {
    display: flex;
    flex-direction: row;
    gap: var(--space-3);
    margin: 0;
    padding-block: var(--space-2);
    padding-inline: 0 var(--space-4);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--tef-line) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .cards::-webkit-scrollbar {
    block-size: 6px;
  }
  .cards::-webkit-scrollbar-track {
    background: transparent;
  }
  .cards::-webkit-scrollbar-thumb {
    background: var(--tef-line);
    border-radius: 999px;
  }
  .card {
    flex: 0 0 85%;
    min-inline-size: 85%;
    max-inline-size: 85%;
    scroll-snap-align: start;
  }
}

/* From 64rem: two columns; sticky heading on inline-start, stacked cards */
@media (min-width: 64rem) {
  .work-wrap {
    display: grid;
    grid-template-columns: minmax(14rem, 20rem) 1fr;
    align-items: start;
    gap: var(--space-5);
  }
  .work-header {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-3));
  }
  .cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: visible;
  }
  .card {
    flex: none;
    inline-size: 100%;
  }
}

/* Card details */
.card {
  background: var(--tef-white);
  color: var(--tef-navy);
  border: 0;
  border-inline-start: 4px solid var(--tef-blue);
  border-radius: 16px;
  box-shadow: 0 2px 4px rgb(8 43 96 / 0.04), 0 8px 24px rgb(8 43 96 / 0.08);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  box-sizing: border-box;
}
.card-num {
  display: block;
  font-size: clamp(2rem, 1.75rem + 1vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--tef-blue);
  opacity: 0.35;
  margin-block-end: var(--space-2);
  user-select: none;
}
.card h3 {
  font-size: var(--fs-h3);
  margin-block-end: var(--space-1);
}
.card p {
  margin-block-end: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: box-shadow 0.2s ease;
  }
  .card:hover {
    box-shadow: 0 4px 8px rgb(8 43 96 / 0.06), 0 12px 32px rgb(8 43 96 / 0.12);
  }
}

/* ---------- Structure Band ---------- */
.section--band {
  background: var(--tef-navy);
  color: var(--tef-white);
  padding-block: var(--space-5);
}
.section--band h2 {
  color: var(--tef-white);
  margin-block-end: var(--space-1);
}
.band-text {
  color: rgb(255 255 255 / 0.85);
  font-size: var(--fs-h3);
  margin-block-end: 0;
  max-width: var(--measure);
}
.band-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}
@media (min-width: 48rem) {
  .band-wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
}
.btn--pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.75rem;
  background: var(--tef-white);
  color: var(--tef-navy);
  border-radius: 999px;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn--pill:hover {
  background: var(--tef-gray-light);
  color: var(--tef-navy);
}
.btn--pill:focus-visible {
  outline: 3px solid var(--tef-blue-dark);
  outline-offset: 3px;
}
.icon--arrow {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex-shrink: 0;
}
[dir="rtl"] .icon--arrow {
  transform: scaleX(-1);
}
@media (prefers-reduced-motion: no-preference) {
  .btn--pill {
    transition: background-color 0.15s ease, transform 0.15s ease;
  }
  .btn--pill:hover {
    transform: translateY(-1px);
  }
}

/* ---------- Contact ---------- */
.section--contact {
  background: var(--tef-gray-light);
  padding-block: var(--space-5);
}
.contact-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-wrap h2 {
  margin-block-end: var(--space-2);
}
address { font-style: normal; }
.contact-address {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  font-weight: 700;
  color: var(--tef-navy);
}
.icon--pin {
  color: var(--tef-blue);
  inline-size: 1.5em;
  block-size: 1.5em;
  flex-shrink: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--tef-logo-bg-dark); /* matches the Dark logo JPEG */
  color: var(--tef-white);
  padding-block: var(--space-4);
  text-align: center;
}
.site-footer a { color: var(--tef-white); }
.site-footer :focus-visible { outline-color: var(--tef-blue-dark); }
.site-footer .logo { width: clamp(320px, 40vw, 400px); }
.footer-tagline {
  margin-block: var(--space-3) 0;
  font-size: var(--fs-h3);
  font-weight: 700;
}
.footer-desc {
  max-width: 52ch;
  margin: var(--space-1) auto 0;
  color: rgb(255 255 255 / 0.85);
}

/* Link groups + contact: stacked on mobile, columns from 48rem. */
.footer-cols {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid rgb(255 255 255 / 0.15);
  text-align: start;
}
@media (min-width: 48rem) {
  .footer-cols {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-4);
  }
}
.footer-contact:only-child { text-align: center; } /* /en/: contact is the only column */
.footer-title {
  margin-block-end: var(--space-1);
  font-size: var(--fs-body);
  color: var(--tef-blue-dark);
}
.footer-group ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-contact p { margin-block: 0 0.5rem; }
.footer-contact p:last-child { margin-block-end: 0; }
.footer-lang {
  margin-block: var(--space-4) 0;
  font-weight: 700;
}
.copyright {
  margin-block: var(--space-2) 0;
  font-size: var(--fs-small);
}

/* Below 23rem the 320px logo only fits without the side padding, so the text gets it back. */
@media (max-width: 22.99rem) {
  .site-footer .wrap { padding-inline: 0; }
  .footer-tagline,
  .footer-desc,
  .footer-cols,
  .footer-lang,
  .copyright { padding-inline: var(--gutter); }
}

/* ---------- Content pages (page-head band + sections) ---------- */
.lead { font-size: var(--fs-h3); }
.wrap > .lead { margin-block-end: var(--space-4); }
.prose > h2:not(:first-child) { margin-block-start: var(--space-4); }
.note {
  margin-block: var(--space-3) 0;
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--tef-gray-light);
}

/* Card grid: values, governance bodies, principles. Reuses .card; cancels the carousel sizing. */
.card-grid {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.card-grid > .card {
  flex: none;
  inline-size: auto;
  min-inline-size: 0;
  max-inline-size: none;
}
@media (min-width: 48rem) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card-title {
  font-size: var(--fs-h3);
  margin-block-end: var(--space-1);
}

/* Bulleted list (funding sources, areas, programmes). */
.item-list {
  display: grid;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.item-list li {
  position: relative;
  padding-inline-start: 1.5rem;
}
.item-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.25rem;
  inset-block-start: 0.6em;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--tef-blue);
}
@media (min-width: 48rem) {
  .item-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* "Proposed" / «مقترح» label. */
.chip {
  display: inline-block;
  margin-inline-start: 0.5rem;
  padding: 0.0625rem 0.625rem;
  background: var(--tef-white);
  border: 1px solid var(--tef-line);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* Emphasised principle sentence. */
.principle {
  padding: var(--space-3);
  background: var(--tef-gray-light);
  border-inline-start: 4px solid var(--tef-blue);
  border-start-end-radius: 12px;
  border-end-end-radius: 12px;
  font-size: var(--fs-h3);
}

/* Roadmap: vertical timeline with number markers and a connector. */
.timeline {
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}
.timeline > li {
  position: relative;
  padding-inline-start: 4rem;
  padding-block-end: var(--space-4);
  counter-increment: stage;
}
.timeline > li:last-child { padding-block-end: 0; }
.timeline > li::before {
  content: counter(stage, decimal-leading-zero);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: var(--tef-navy);
  color: var(--tef-white);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
}
.timeline > li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: 3.25rem 0.5rem;
  inset-inline-start: calc(1.375rem - 1px);
  border-inline-start: 2px solid var(--tef-line);
}
.timeline .card-title { padding-block-start: 0.5rem; }
.timeline p { margin-block-end: 0; }

/* FAQ: native <details>; chevron flips when open. */
.faq {
  display: grid;
  gap: var(--space-2);
}
.faq details {
  background: var(--tef-white);
  border: 1px solid var(--tef-gray-light);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.faq details[open] { border-inline-start: 4px solid var(--tef-blue); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  margin-block-end: 0.25rem;
  border-right: 2px solid var(--tef-blue);
  border-bottom: 2px solid var(--tef-blue);
  transform: rotate(45deg); /* chevron down */
}
.faq details[open] > summary::after {
  margin-block: 0.25rem 0;
  transform: rotate(-135deg); /* chevron up */
}
.faq details[open] > summary { border-block-end: 1px solid var(--tef-gray-light); }
.faq summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.faq summary:focus-visible {
  outline: 3px solid var(--tef-blue);
  outline-offset: 2px;
  border-radius: 12px;
}
.faq details > p {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
}

/* Contact list (label / value rows). */
.contact-list { margin: var(--space-3) 0 0; }
.contact-list > div {
  display: grid;
  gap: 0.25rem;
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--tef-gray-light);
}
.contact-list > div:last-child { border-block-end: 1px solid var(--tef-gray-light); }
.contact-list dt {
  font-size: var(--fs-small);
  color: rgb(8 43 96 / 0.8);
}
.contact-list dd {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  overflow-wrap: anywhere;
}
@media (min-width: 48rem) {
  .contact-list > div {
    grid-template-columns: 10rem 1fr;
    align-items: baseline;
  }
}

/* Related pages. */
.related {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.related-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  block-size: 100%;
  padding: var(--space-3);
  background: var(--tef-white);
  border-inline-start: 4px solid var(--tef-blue);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  color: var(--tef-navy);
  font-weight: 700;
  text-decoration: none;
}
.related-card:hover {
  box-shadow: var(--shadow-card-hover);
  text-decoration: underline;
}
.related-card .icon--arrow { color: var(--tef-blue); }
@media (prefers-reduced-motion: no-preference) {
  .related-card { transition: box-shadow 0.2s ease; }
}

/* ---------- Organisational structure (nested <ul> tree, CSS-only connectors) ---------- */
.structure { padding-block-end: var(--space-5); }
.page-head {
  background: var(--tef-gray-light);
  padding-block: var(--space-4);
  text-align: center;
}
.page-head h1 { margin-block-end: var(--space-1); }
.subtitle {
  max-width: var(--measure);
  margin: 0 auto;
  font-size: var(--fs-h3);
}

/* Category colours: --accent on cards and key chips, --spine on a parent's child list. */
.cat-leadership   { --accent: var(--tef-navy); }
.cat-exec         { --accent: var(--tef-blue); }
.cat-advisory     { --accent: var(--tef-blue-dark); }
.branch-leadership { --spine: var(--tef-spine-lead); }
.branch-exec       { --spine: var(--tef-spine-exec); }
.branch-advisory   { --spine: var(--tef-spine-adv); }

.org-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.org-key li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: var(--tef-white);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgb(8 43 96 / 0.08);
  font-size: var(--fs-small);
}
.org-key li::before {
  content: "";
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: 50%;
  background: var(--accent);
}

.org-scroll { padding-block: var(--space-4) var(--space-1); }
.org-note {
  margin-block: var(--space-3) 0;
  text-align: center;
}

.org,
.org ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cards */
.node {
  position: relative;
  z-index: 1; /* above connector lines */
  background: var(--tef-white);
  color: var(--tef-navy);
  border: 1px solid var(--tef-gray-light);
  border-block-start: 4px solid var(--accent, var(--tef-navy));
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 0.875rem 1rem 1rem;
  font-size: var(--fs-small);
  overflow-wrap: break-word;
}
.node--featured {
  background: var(--tef-navy);
  color: var(--tef-white);
  border-color: var(--tef-navy);
  border-block-start-color: var(--accent, var(--tef-navy));
}
.node p { margin: 0; }
.node-title {
  font-size: var(--fs-body);
  font-weight: 700;
}
.node--featured .node-title { font-size: var(--fs-h3); }
.node-desc {
  margin-block-start: 0.25rem;
  color: rgb(8 43 96 / 0.8);
}
.node--featured .node-desc { color: rgb(255 255 255 / 0.85); }
.node-name,
.node-roles dd { font-weight: 700; }
/* Icon sits inline with the name, so a wrapped name keeps the icon beside its first line. */
.node-name .icon,
.node-roles dd .icon {
  display: inline-block;
  vertical-align: -0.125em;
  margin-inline-end: 0.375rem;
}
.node-name {
  margin-block-start: 0.75rem;
  padding-block-start: 0.625rem;
  border-block-start: 1px solid var(--tef-gray-light);
}
.node--featured .node-name { border-block-start-color: rgb(255 255 255 / 0.2); }
.node .icon { color: var(--accent, var(--tef-navy)); }
.node--featured .icon { color: var(--tef-white); }
.node-roles { margin: 0.5rem 0 0; }
.node-roles > div {
  padding-block: 0.5rem;
  border-block-start: 1px solid var(--tef-gray-light);
}
.node-roles > div:last-child { padding-block-end: 0; }
.node-roles dt { color: rgb(8 43 96 / 0.8); }
.node-roles dd { margin: 0.125rem 0 0; }
.node-roles dd:empty { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .node { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .node:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
  }
}

/* Below 64rem: vertical tree of full-width cards. Each child list has a spine in the parent's
   colour on the inline-start side, a rounded elbow into each child, and a dot at each junction. */
@media (max-width: 63.99rem) {
  .org { --indent: 1.25rem; }
  .org-scroll { padding-inline: var(--gutter); }
  .org ul { padding-inline-start: var(--indent); }
  .org ul > li {
    position: relative;
    padding-block-start: 0.75rem;
  }
  .org ul > li::before,
  .org ul > li::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(0.375rem - var(--indent));
  }
  /* Spine continuing past this child to its next sibling. */
  .org ul > li::before {
    inset-block: 0;
    border-inline-start: 2px solid var(--spine);
  }
  .org ul > li:last-child::before { content: none; }
  /* Elbow into the card; starts 0.75rem up so it tucks under the parent card's rounded corner. */
  .org ul > li::after {
    inset-block-start: -0.75rem;
    block-size: 2.75rem;
    inline-size: calc(var(--indent) - 0.375rem);
    border-inline-start: 2px solid var(--spine);
    border-block-end: 2px solid var(--spine);
    border-end-start-radius: 0.5rem;
  }
  /* Junction dot where the elbow meets the card edge. */
  .org ul .node::before {
    content: "";
    position: absolute;
    inset-block-start: calc(1.25rem - 9px);
    inset-inline-start: -5px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--spine);
  }
}
/* Keeps the deepest cards ≥ 240px wide at a 320px viewport. */
@media (max-width: 22.99rem) {
  .org { --indent: 1rem; }
}

/* From 64rem: top-down tiered chart. Scrolls inside its own wrapper if wider than the viewport. */
@media (min-width: 64rem) {
  .org-scroll {
    overflow-x: auto;
    padding-inline: var(--gutter);
  }
  .org {
    inline-size: max-content;
    margin-inline: auto; /* centred when it fits, scrollable from the start edge when not */
  }
  .org ul {
    position: relative;
    display: flex;
    justify-content: center;
    padding-block-start: 1.5rem;
  }
  .org li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .org ul > li { padding: 1.5rem 0.5rem 0; }
  .node {
    inline-size: 11rem;
    text-align: center;
  }
  .node--board { inline-size: 14rem; }
  .node--featured { inline-size: 13rem; }
  .org > li > .node { inline-size: 17rem; } /* the President: widest card */

  /* Drop from a parent card to its children's tier line. */
  .org ul::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    block-size: 1.5rem;
    border-inline-start: 2px solid var(--tef-line);
  }
  /* Dot where the drop meets a tier line (tiers with more than one child). */
  .org ul:not(.is-single)::after {
    content: "";
    position: absolute;
    inset-block-start: calc(1.5rem - 3px);
    inset-inline-start: calc(50% - 3px);
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--tef-line);
  }
  /* Each child: two half-width top rules (the tier line) + a stub down to its card. */
  .org ul > li::before,
  .org ul > li::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inline-size: 50%;
    block-size: 1.5rem;
    border-block-start: 2px solid var(--tef-line);
  }
  .org ul > li::before { inset-inline-start: 0; }
  .org ul > li::after {
    inset-inline-end: 0;
    border-inline-start: 2px solid var(--tef-line);
  }
  /* Row start: nothing towards the start; rounded elbow down into the card. */
  .org ul > li:first-child::before,
  .org .org-tier-wrap > li:nth-child(5)::before { border: 0; }
  .org ul > li:first-child::after,
  .org .org-tier-wrap > li:nth-child(5)::after { border-start-start-radius: 10px; }
  /* Row end: nothing towards the end; the elbow is drawn on the start half's end edge
     (+2px so it sits on exactly the same pixels as the other stubs). */
  .org ul > li:last-child::after,
  .org .org-tier-wrap > li:nth-child(4)::after { border: 0; }
  .org ul > li:last-child::before,
  .org .org-tier-wrap > li:nth-child(4)::before {
    inline-size: calc(50% + 2px);
    border-inline-end: 2px solid var(--tef-line);
    border-start-end-radius: 10px;
  }
  /* Only child: a straight drop. */
  .org ul > li:only-child::before { border: 0; }
  .org ul > li:only-child::after {
    border-block-start: 0;
    border-inline-start: 2px solid var(--tef-line);
    border-radius: 0;
  }

  /* E → F1…F7: two rows (4 + 3), as in the source. A spine at the centre runs the full
     height behind the cards: it shows in the gap between F2 and F3 and joins both rows. */
  .org .org-tier-wrap {
    flex-wrap: wrap;
    inline-size: 46rem;
  }
  .org .org-tier-wrap::before {
    block-size: auto;
    inset-block-end: 0;
  }
  .org .org-tier-wrap > li { flex: 0 0 25%; }
  .org .org-tier-wrap > li .node {
    flex: 1 1 auto;
    inline-size: 100%;
    padding-inline: 0.75rem;
  }
}

/* ---------- Arabic home page ---------- */
/* Shared section furniture */
.section-title { max-width: 36ch; }
.section-intro {
  max-width: var(--measure);
  margin-block-end: var(--space-4);
  font-size: var(--fs-h3);
}
.section-action { margin-block: var(--space-4) 0; }
.btn--navy {
  background: var(--tef-navy);
  color: var(--tef-white);
}
.btn--navy:hover {
  background: var(--tef-navy-dark);
  color: var(--tef-white);
}
.btn--navy:focus-visible { outline-color: var(--tef-blue); }

/* Hero: dark band with a slow aurora (pseudo-elements, behind everything) and the logo
   on its own flat panel in the exact logo background colour. */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background: var(--tef-navy-dark);
  color: var(--tef-white);
  padding-block: clamp(3rem, 2rem + 5vw, 7rem);
}
.home-hero::before,
.home-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.home-hero::before {
  inset: -40% -20%;
  background:
    radial-gradient(closest-side, rgb(0 126 173 / 0.4), transparent) 12% 22% / 55% 60% no-repeat,
    radial-gradient(closest-side, rgb(8 43 96 / 0.95), transparent) 82% 78% / 60% 65% no-repeat;
}
.home-hero::after {
  inset: -30% -10%;
  background: radial-gradient(closest-side, rgb(32 169 220 / 0.22), transparent) 72% 18% / 45% 50% no-repeat;
}
.home-hero-grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 64rem) {
  .home-hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-5);
  }
}
.eyebrow {
  margin-block-end: var(--space-2);
  color: var(--tef-blue-dark);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.16em;
}
.display {
  max-width: 16ch;
  margin-block-end: var(--space-3);
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem); /* display headline: above --fs-h1 by design */
  line-height: 1.25;
}
.hero-desc {
  max-width: 60ch;
  margin-block-end: var(--space-4);
  color: rgb(255 255 255 / 0.85);
  font-size: var(--fs-h3);
}
.logo-panel {
  display: grid;
  justify-items: center;
  padding-block: var(--space-3);
  background: var(--tef-logo-bg-dark); /* exact Dark-logo background */
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 24px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2), 0 24px 64px rgb(0 0 0 / 0.35);
}
.logo-panel .logo { width: 320px; }
@media (min-width: 48rem) {
  .logo-panel { padding: var(--space-4); }
  .logo-panel .logo { width: clamp(320px, 30vw, 420px); }
}
/* Below 23rem the 320px logo needs the full width: the panel goes edge to edge. */
@media (max-width: 22.99rem) {
  .logo-panel {
    margin-inline: calc(-1 * var(--gutter));
    border-inline: 0;
    border-radius: 0;
  }
}

/* Intro: large editorial type */
.home-intro { padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
.intro-grid {
  display: grid;
  gap: var(--space-3);
}
.intro-title {
  padding-block-start: var(--space-2);
  border-block-start: 4px solid var(--tef-blue);
}
.intro-lead {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.45;
}
.intro-body .btn--pill { margin-block-start: var(--space-2); }
@media (min-width: 64rem) {
  .intro-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: var(--space-5);
  }
}

/* Model: five steps. Vertical with connectors below 64rem; one row joined by a line from 64rem. */
.steps {
  position: relative;
  display: grid;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.steps > li {
  position: relative;
  padding-inline-start: 4rem;
  padding-block-end: var(--space-3);
}
.steps > li:last-child { padding-block-end: 0; }
.step-num {
  position: absolute;
  z-index: 1;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: var(--tef-navy);
  color: var(--tef-white);
  box-shadow: 0 0 0 6px var(--tef-gray-light);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
}
.steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: 3.25rem 0.5rem;
  inset-inline-start: calc(1.375rem - 1px);
  border-inline-start: 2px solid var(--tef-line);
}
.steps h3 {
  padding-block-start: 0.5rem;
  margin-block-end: 0.25rem;
}
.steps p { margin: 0; }
@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    view-timeline: --steps block;
  }
  .steps > li,
  .steps > li:last-child { padding: 4.25rem 0 0; padding-inline-end: var(--space-3); }
  .steps > li:not(:last-child)::after { content: none; }
  .steps h3 { padding-block-start: 0; }
  /* From the first marker's centre to the last marker's centre (columns are 20% each). */
  .steps::before {
    content: "";
    position: absolute;
    inset-block-start: calc(1.375rem - 1px);
    inset-inline: 1.375rem calc(20% - 1.375rem);
    border-block-start: 2px solid var(--tef-blue);
    transform-origin: 0 50%;
  }
  [dir="rtl"] .steps::before { transform-origin: 100% 50%; }
}

/* Three tracks: three columns from 48rem */
@media (min-width: 48rem) {
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Areas: marquee strip (decorative) + ten cards in two columns */
.marquee {
  overflow: hidden;
  margin-block-end: var(--space-4);
}
.marquee-track { display: flex; }
.marquee-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
}
.marquee-list li {
  padding: 0.5rem 1.25rem;
  background: var(--tef-white);
  border: 1px solid var(--tef-line);
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.marquee-list--copy { display: none; }
.card-grid--areas .card { padding: var(--space-3); }
@media (min-width: 64rem) {
  .card-grid--areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Knowledge outputs as chips */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  max-width: 56rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag-list li {
  padding: 0.5rem 1.125rem;
  background: var(--tef-gray-light);
  border: 1px solid var(--tef-line);
  border-radius: 999px;
  font-weight: 700;
}

/* «مقترح» chip at the top of a card */
.card > .chip {
  margin: 0 0 var(--space-2);
  background: var(--tef-gray-light);
  border-color: transparent;
}

/* Targets: dark band, metrics */
.section--targets {
  background: var(--tef-navy-dark);
  color: var(--tef-white);
}
.section--targets .section-intro { color: rgb(255 255 255 / 0.85); }
.targets-label {
  display: inline-block;
  margin-block: 0 var(--space-4);
  padding: 0.625rem 1.25rem;
  border: 2px solid var(--tef-blue-dark);
  border-radius: 999px;
  font-size: var(--fs-h3);
  font-weight: 700;
}
.metrics {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 30rem) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 20px;
}
.metric-num {
  position: relative;
  align-self: flex-start; /* sits at the inline start of the card even though it is dir="ltr" */
  color: var(--tef-blue-dark);
  font-size: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric-label { color: rgb(255 255 255 / 0.9); }
.metric-count { display: none; } /* shown only where the count-up runs (see Motion) */
.count-150 { --to: 150; --suffix: "+"; }
.count-12  { --to: 12; }
.count-10  { --to: 10; }
.count-2   { --to: 2; }
.count-1   { --to: 1; }
.count-60  { --to: 60; --suffix: "%"; }

/* ---------- 404 ---------- */
.notfound .section + .section { border-block-start: 1px solid var(--tef-gray-light); }
.notfound-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* ---------- Motion (CSS-only progressive enhancement) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Header scroll progress bar */
    @keyframes scroll-progress {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    .site-header::after {
      content: "";
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0;
      inline-size: 100%;
      block-size: 3px;
      background: var(--tef-blue);
      transform-origin: 0 50%;
      animation: scroll-progress linear;
      animation-timeline: scroll(root);
      z-index: 10;
    }

    [dir="rtl"] .site-header::after {
      transform-origin: 100% 50%;
    }

    /* Scroll reveal */
    @keyframes tef-reveal {
      from {
        opacity: 0;
        transform: translateY(24px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .reveal {
      animation: tef-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

/* Home page motion. Default (and reduced motion): everything static and fully visible.
   Time-based loops: aurora + marquee. Transform only; the logo panel is never animated. */
@supports (transform: translate3d(0, 0, 0)) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes aurora-a {
      0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
      50%      { transform: translate3d(8%, 6%, 0) scale(1.08); }
    }
    @keyframes aurora-b {
      0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
      50%      { transform: translate3d(-10%, -5%, 0) scale(1.12); }
    }
    .home-hero::before { animation: aurora-a 34s ease-in-out infinite; }
    .home-hero::after  { animation: aurora-b 26s ease-in-out infinite; }

    @keyframes marquee     { to { transform: translate3d(-50%, 0, 0); } }
    @keyframes marquee-rtl { to { transform: translate3d(50%, 0, 0); } }
    .marquee {
      -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
      mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
    }
    .marquee-track {
      inline-size: max-content;
      animation: marquee 70s linear infinite;
    }
    /* RTL: names travel towards the inline start (right), new ones enter from the left. */
    [dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
    .marquee-list {
      flex-wrap: nowrap;
      max-width: none;
      margin: 0;
      padding: 0;
      padding-inline-end: var(--space-1); /* = the gap, so the two halves join seamlessly */
    }
    .marquee-list--copy { display: flex; }
    .marquee:hover .marquee-track,
    .marquee:focus-within .marquee-track { animation-play-state: paused; }
  }
}

/* Scroll-driven: the model line draws itself; target numbers count up. The real numbers stay in
   the DOM text; the animated counter is aria-hidden and only replaces them visually here. */
@property --n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes draw-line {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
    @media (min-width: 64rem) {
      .steps::before {
        animation: draw-line linear both;
        animation-timeline: --steps;
        animation-range: entry 30% cover 55%;
      }
    }

    @keyframes count-up {
      from { --n: 0; }
      to   { --n: var(--to); }
    }
    .metric-value {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .metric-count {
      display: inline-block;
      counter-reset: n var(--n);
      animation: count-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    .metric-count::after { content: counter(n) var(--suffix, ""); }
  }
}

/* ---------- Print ---------- */
@media print {
  body,
  .hero,
  .section--alt,
  .section--about,
  .section--work,
  .section--band,
  .section--contact,
  .page-head,
  .home-hero,
  .section--targets,
  .site-footer {
    background: var(--tef-white);
    color: var(--tef-navy);
  }
  .home-hero::before,
  .home-hero::after,
  .logo-panel,
  .marquee { display: none; }
  .hero-desc,
  .section--targets .section-intro,
  .metric-label,
  .metric-num,
  .eyebrow { color: var(--tef-navy); }
  .site-header,
  .skip,
  .scroll-cue,
  .btn--pill,
  .site-footer .logo { display: none; } /* the Dark logo prints as a dark box */
  .org-scroll { overflow: visible; }
  .node,
  .node--featured {
    background: var(--tef-white);
    color: var(--tef-navy);
    border: 1px solid var(--tef-navy);
    border-block-start: 4px solid var(--tef-navy);
    box-shadow: none;
    break-inside: avoid;
  }
  .node-desc,
  .node--featured .node-desc,
  .node-roles dt { color: var(--tef-navy); }
  .node-name,
  .node--featured .node-name,
  .node-roles > div { border-block-start-color: var(--tef-navy); }
  .node .icon,
  .node--featured .icon { color: var(--tef-navy); }
  .org-key li {
    box-shadow: none;
    border: 1px solid var(--tef-navy);
  }
}