/* ==========================================================================
   AIAI+E design system

   Civic-portal layout: a boxed header over a full-screen photo hero, white
   icon boxes riding over the hero's bottom edge, Quicksand headlines with a
   two-dash divider under them, pill buttons, and full-bleed photo panels.
   Two colours, both sampled from the logo: the deep royal blue of the
   lettering leads (buttons, links, icons, the blue bands), and the gold of
   the Africa outline marks the details — the short dash of every divider,
   category tags, and anything that has to read on the dark navy.

   Loaded with fonts.css (Quicksand, Nunito) and icons.css (the Font
   Awesome subset). Outline pictograms are inline SVGs — see
   components/line-icon.blade.php.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* Brand, sampled from images/logo.png */
  --primary: #0B1D9E;          /* the deep blue of the lettering */
  --primary-ink: #081477;      /* hover / pressed */
  --accent: #E8962F;           /* the gold of the Africa outline */
  --accent-ink: #C97A16;

  /* Surfaces. The logo's shadowed indigo takes the near-black role, so the
     dark panels read as the same family as the lettering. */
  --ink: #090B40;
  --ink-2: #15185A;
  --ink-deep: #050626;
  --paper: #F5F5FA;
  --white: #FFFFFF;

  /* Text */
  --heading: #0D1040;
  --text: #5E6176;
  --muted: #8B8EA3;
  --on-ink: #FFFFFF;
  --on-ink-2: #B9BCD6;

  --line: #E6E7F0;
  --line-ink: rgba(255, 255, 255, 0.14);

  --shadow: 0 10px 40px -8px rgba(9, 11, 64, 0.12);
  --shadow-lg: 0 24px 56px -14px rgba(9, 11, 64, 0.22);

  /* Metrics */
  --container: 1170px;
  --container-wide: 1320px;
  --container-xl: 1380px;
  --gutter: 20px;
  --pad-y: clamp(70px, 9vw, 120px);
  --head-h: 100px;

  --font-head: 'Quicksand', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Mrs Saint Delafield', cursive;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (max-width: 1199px) { :root { --head-h: 80px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.875;
  font-weight: 400;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.4;
  color: var(--heading);
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
iframe { border: 0; display: block; }
figure { margin: 0; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.band--ink :focus-visible, .on-dark :focus-visible { outline-color: #fff; }

::selection { background: var(--primary); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sr-only:focus {
  position: fixed; top: 12px; left: 12px; z-index: 300;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 10px 18px; background: var(--white); color: var(--heading);
}

[hidden] { display: none !important; }

.licon { width: 1em; height: 1em; flex: none; }

/* ---- Layout primitives -------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container--xl { max-width: calc(var(--container-xl) + var(--gutter) * 2); }

/* flow-root keeps a child's margin inside its band — the boxes that ride
   up over a hero rely on their negative margin not collapsing through. */
.band { position: relative; display: flow-root; }
.band--paper { background: var(--paper); }
.band--white { background: var(--white); }
.band--ink { background: var(--ink); color: var(--on-ink-2); }
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: #fff; }

.section { padding-block: var(--pad-y); }
.section--flush-t { padding-top: 0; }
.section--flush-b { padding-bottom: 0; }

/* ---- Type -------------------------------------------------------------- */
.title-xl { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.3; }
.title-lg { font-size: clamp(28px, 3vw, 36px); line-height: 1.55; }
.title-md { font-size: clamp(22px, 2vw, 26px); line-height: 1.45; }
.title-sm { font-size: 20px; line-height: 1.5; }

/* A headline may carry an inline <span> for an accented word. */
.title-xl span, .title-lg span { color: var(--primary); }

.lede { font-size: 18px; line-height: 1.8; }
.muted { color: var(--muted); }
.measure { max-width: 62ch; }
.text-center { text-align: center; }

/* The two-dash rule under every section title: a long dash and a short one.
   One element, drawn with a gradient, so it can be centred or recoloured
   without extra markup. */
.divider {
  --divider-color: var(--primary);
  --divider-dot: var(--accent);
  display: block;
  width: 58px; height: 3px;
  margin: 22px 0 28px;
  background: linear-gradient(to right,
    var(--divider-color) 0 40px, transparent 40px 48px, var(--divider-dot) 48px 58px);
}
.divider--center {
  width: 84px;
  margin-inline: auto;
  background: linear-gradient(to right,
    var(--divider-dot) 0 12px, transparent 12px 20px,
    var(--divider-color) 20px 64px, transparent 64px 72px,
    var(--divider-dot) 72px 84px);
}
.divider--white { --divider-color: #fff; }

/* Section head: title, divider, optional text, optional action on the right. */
.sec-head { margin-bottom: clamp(40px, 5vw, 60px); }
.sec-head .divider { margin-bottom: 0; }
.sec-head__text { margin-top: 28px; font-size: 18px; line-height: 1.8; max-width: 62ch; }
.sec-head--center { text-align: center; }
.sec-head--center .sec-head__text { margin-inline: auto; max-width: 68ch; }
.sec-head--row {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 20px 40px;
}
.sec-head--white .sec-head__title { color: #fff; }
.sec-head--white .sec-head__text { color: var(--on-ink-2); }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px;
  padding: 14px 36px;
  border: 2px solid transparent;
  border-radius: 30px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 800; line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn .licon { font-size: 18px; }

.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--ink); }
.band--ink .btn--primary:hover, .on-dark .btn--primary:hover { background: #fff; color: var(--heading); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--primary); }

.btn--white { background: #fff; color: var(--heading); }
.btn--white:hover { background: var(--ink); color: #fff; }

/* Translucent pill for use over a photograph. */
.btn--glass {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.btn--glass:hover { background: #fff; color: var(--heading); }

.btn--outline { border-color: currentColor; color: var(--heading); }
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.band--ink .btn--outline, .on-dark .btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.band--ink .btn--outline:hover, .on-dark .btn--outline:hover { background: #fff; border-color: #fff; color: var(--heading); }

.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--accent-ink); color: #fff; }

.btn--wa { background: #1faf54; color: #fff; }
.btn--wa:hover { background: #18913f; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
@media (max-width: 480px) { .btn-row > .btn { flex: 1 1 100%; } }

/* "READ MORE →" — uppercase, brand blue, a long thin arrow. */
.more {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 800; line-height: 1.4;
  text-transform: uppercase;
  color: var(--primary);
}
.more .licon { font-size: 24px; transition: transform 0.3s var(--ease); }
.more:hover { color: var(--heading); }
.more:hover .licon { transform: translateX(5px); }
.band--ink .more, .on-dark .more { color: var(--accent); }
.band--ink .more:hover, .on-dark .more:hover { color: #fff; }

/* Round outlined arrow used on photo panels. */
.round-arrow {
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  font-size: 22px;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.round-arrow--dark { border-color: var(--heading); color: var(--heading); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 90;
}
.site-header__inner {
  display: flex;
  align-items: stretch;
  max-width: 1520px;
  height: var(--head-h);
  margin-inline: auto;
}
@media (min-width: 1200px) and (max-width: 1560px) {
  .site-header__inner { margin-inline: 20px; }
}
/* The menu needs the room, so the partner button only joins it once it
   fits — later in French, whose labels run longer. The link is under
   About either way. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .site-header__cta, .site-header__sep { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1559px) {
  html[lang="fr"] .site-header__cta, html[lang="fr"] .site-header__sep { display: none !important; }
}

.site-header__brand {
  flex: none;
  width: 240px;
  display: grid; place-items: center;
  padding-inline: 24px;
  background: var(--ink);
  transition: background-color 0.3s var(--ease);
}
.site-header__brand img { height: 46px; width: auto; filter: brightness(0) invert(1); }

.site-header__bar {
  flex: 1;
  min-width: 0;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 24px;
  padding-inline: 30px;
  background: var(--white);
}
.site-header__nav { display: none; margin-right: auto; margin-left: auto; }
.site-header__sep { display: none; width: 1px; align-self: stretch; margin-block: 20px; background: var(--line); }
.site-header__cta { min-height: 52px; padding-inline: 30px; white-space: nowrap; }

/* Once the page leaves the hero the header becomes a full-width white bar,
   and the logo returns to its own colours on the white. */
.site-header.is-stuck {
  position: fixed;
  background: var(--white);
  box-shadow: 0 6px 30px -6px rgba(9, 11, 64, 0.14);
  animation: header-in 0.45s var(--ease);
}
.site-header.is-stuck .site-header__inner { max-width: none; height: 80px; margin-inline: 0; }
.site-header.is-stuck .site-header__brand { background: var(--white); }
.site-header.is-stuck .site-header__brand img { filter: none; }
@keyframes header-in { from { transform: translateY(-100%); } to { transform: none; } }

/* ---- Primary nav ---- */
.nav > ul { display: flex; align-items: center; }
.nav li { position: relative; }
.nav > ul > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 10px;
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700;
  white-space: nowrap;
  color: var(--heading);
}
.nav > ul > li > a .licon { font-size: 14px; color: var(--muted); transition: transform 0.25s var(--ease), color 0.2s; }
.nav > ul > li:hover > a,
.nav > ul > li.is-active > a,
.nav > ul > li:hover > a .licon,
.nav > ul > li.is-active > a .licon { color: var(--primary); }
.nav > ul > li:hover > a .licon { transform: rotate(180deg); }

.nav .submenu {
  position: absolute;
  top: calc(100% + 22px); left: 0;
  min-width: 240px;
  padding: 18px 0;
  background: var(--white);
  border-top: 3px solid var(--primary);
  box-shadow: 0 16px 40px -10px rgba(9, 11, 64, 0.2);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
/* Bridges the gap between the item and its dropdown so the hover holds. */
.nav .submenu::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 25px; }
.nav li:hover > .submenu,
.nav li:focus-within > .submenu { opacity: 1; visibility: visible; transform: none; }
.nav .submenu a {
  display: block;
  padding: 8px 28px;
  font-family: var(--font-head);
  font-size: 15px; font-weight: 600;
  color: var(--heading);
  transition: color 0.2s var(--ease), padding-left 0.25s var(--ease);
}
.nav .submenu a:hover, .nav .submenu a.is-active { color: var(--primary); padding-left: 34px; }

/* ---- Language switch ---- */
.lang {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-head);
  font-size: 14px; font-weight: 700;
  color: var(--muted);
}
.lang a { padding: 4px 2px; }
.lang a:hover, .lang a.is-active { color: var(--primary); }
.lang span { opacity: 0.5; }

.burger {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--heading);
  font-size: 17px;
}
.burger:hover { background: var(--primary); color: #fff; }

@media (min-width: 1200px) {
  .site-header__nav, .site-header__sep { display: block; }
  .burger { display: none; }
}
@media (max-width: 1199px) {
  .site-header__brand { width: auto; padding-inline: 22px; }
  .site-header__brand img { height: 38px; }
  .site-header__bar { padding-inline: 20px; gap: 18px; }
}
@media (max-width: 640px) {
  .site-header__cta, .site-header__bar .lang { display: none; }
  .site-header__brand img { height: 32px; }
}

/* ---- Mobile drawer ---- */
.drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(400px, 88vw);
  z-index: 110;
  background: var(--ink);
  color: var(--on-ink-2);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateX(0); }
.drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line-ink);
}
.drawer__top img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.drawer__close {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 17px;
}
.drawer__close:hover { background: var(--primary); }
.drawer__body { padding: 10px 26px 36px; }

.drawer nav > ul > li { border-bottom: 1px solid var(--line-ink); }
.drawer nav a {
  display: block; padding: 14px 0;
  font-family: var(--font-head); font-size: 17px; font-weight: 700; color: #fff;
}
.drawer nav li.is-active > a,
.drawer nav li.is-active > .row > a,
.drawer .submenu a.is-active,
.drawer nav a:hover { color: var(--accent); }
.drawer .has-sub > .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drawer .has-sub > .row button {
  width: 40px; height: 40px; display: grid; place-items: center;
  font-size: 12px; color: #fff; opacity: 0.7;
  transition: transform 0.25s var(--ease);
}
.drawer .has-sub.is-open > .row button { transform: rotate(180deg); }
.drawer .submenu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.drawer .has-sub.is-open .submenu { grid-template-rows: 1fr; }
.drawer .submenu > div { overflow: hidden; }
.drawer .submenu a {
  padding: 9px 0 9px 16px;
  font-size: 15px; font-weight: 600;
  color: var(--on-ink-2);
  border-left: 2px solid var(--line-ink);
}
.drawer__meta { margin-top: 30px; display: grid; gap: 22px; justify-items: start; }
.drawer__meta .lang { color: var(--on-ink-2); }
.drawer .lang a.is-active, .drawer .lang a:hover, .drawer .contact-list i { color: var(--accent); }

.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5, 6, 38, 0.6);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.scrim.is-open { opacity: 1; visibility: visible; }
body.is-locked { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  display: flex; align-items: center;
  /* svh keeps the copy clear of a mobile browser's toolbar */
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--head-h) + 60px) 0 150px;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }

/* Three event photos crossfading behind the headline. Each holds for a
   third of the cycle and the fades overlap, so a photo always shows. */
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: hero-slide 21s infinite;
  will-change: opacity, transform;
}
.hero__slide:nth-child(2) { animation-delay: 7s; }
.hero__slide:nth-child(3) { animation-delay: 14s; }
@keyframes hero-slide {
  0%   { opacity: 0; transform: scale(1.06); }
  5%   { opacity: 1; }
  33%  { opacity: 1; }
  38%  { opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 6, 38, 0.62) 0%, rgba(5, 6, 38, 0.38) 60%, rgba(5, 6, 38, 0.3) 100%),
    linear-gradient(to top, rgba(5, 6, 38, 0.35), transparent 40%);
}
.hero > .container { position: relative; z-index: 2; }

.hero__inner { position: relative; }
/* Keeps a long (e.g. French) headline clear of the clock on the right. */
@media (min-width: 1200px) { .hero__inner { padding-right: 240px; } }
.hero__kicker {
  font-family: var(--font-head);
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 500;
  margin-bottom: clamp(10px, 1.4vw, 18px);
}
.hero__title {
  max-width: 13.5em;
  font-size: clamp(40px, 6vw, 86px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: #fff;
}
.hero__kicker, .hero__title { text-shadow: 0 2px 30px rgba(5, 6, 38, 0.35); }
.hero .btn-row { margin-top: clamp(32px, 4vw, 56px); }
/* The translation strings carry a <br>; letting the line flow reads better
   in both languages now the copy column is narrower. */
.hero__title br { display: none; }

/* Yaoundé clock, right of the headline */
.hero__info {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  display: grid; gap: 10px;
  font-family: var(--font-head);
  font-size: 20px; font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
}
.hero__info span { display: flex; align-items: center; gap: 14px; }
.hero__info .licon { font-size: 24px; color: var(--accent); }
@media (max-width: 1199px) { .hero__info { display: none; } }

/* ---- Icon boxes riding over the bottom of the hero ---- */
.iconboxes {
  position: relative; z-index: 5;
  margin-top: -90px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 30px;
}
.iconbox {
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  padding: 18px 12px;
  background: var(--white);
  box-shadow: 0 22px 44px -16px rgba(9, 11, 64, 0.18);
  text-align: center;
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.iconbox .licon { font-size: 60px; color: var(--primary); transition: color 0.35s var(--ease); }
.iconbox__label {
  font-size: 15px; font-weight: 800; line-height: 1.35;
  text-transform: uppercase;
  color: var(--heading);
  transition: color 0.35s var(--ease);
}
a.iconbox:hover { background: var(--primary); transform: translateY(-8px); }
a.iconbox:hover .licon, a.iconbox:hover .iconbox__label { color: #fff; }
@media (max-width: 991px) {
  .iconboxes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: -70px; }
}
@media (max-width: 575px) {
  .iconboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .iconbox .licon { font-size: 48px; }
  .iconbox__label { font-size: 13px; }
}

/* ==========================================================================
   Numbered features — a pale oversized numeral behind each title
   ========================================================================== */
.numbered {
  --num-color: var(--white);
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 60px 30px;
}
.band--white .numbered, .numbered--on-white { --num-color: var(--paper); }
.band--ink .numbered { --num-color: rgba(255, 255, 255, 0.06); }
.numbered__item { position: relative; padding-top: 34px; display: flex; flex-direction: column; align-items: flex-start; }
.numbered__num {
  position: absolute;
  top: -14px; left: -32px;
  font-family: var(--font-head);
  font-size: clamp(110px, 10vw, 150px);
  font-weight: 700;
  line-height: 1;
  color: var(--num-color);
  pointer-events: none;
  user-select: none;
}
.numbered__item > :not(.numbered__num) { position: relative; }
.numbered__title { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.4; transition: color 0.3s var(--ease); }
.numbered__item:hover .numbered__title { color: var(--primary); }
.band--ink .numbered__item:hover .numbered__title { color: var(--accent); }
.numbered__item .divider { margin: 22px 0 26px; }
.numbered__text { margin-bottom: 0; }
.numbered__item .more { margin-top: 28px; }
.numbered__foot { margin-top: auto; padding-top: 28px; }
.numbered__foot .more { margin-top: 0; }
@media (max-width: 991px) { .numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .numbered { grid-template-columns: minmax(0, 1fr); }
  .numbered__num { left: -8px; }
}

/* ==========================================================================
   Photo panels — full-height pictures whose copy opens on hover
   ========================================================================== */
.panels {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.panel {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: clamp(460px, 42vw, 610px);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.panel__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(5, 6, 38, 0.82) 0%, rgba(5, 6, 38, 0.25) 55%, rgba(5, 6, 38, 0.12) 100%);
  transition: background-color 0.5s var(--ease);
}
.panel:hover::before, .panel:focus-within::before { background-color: rgba(5, 6, 38, 0.5); }
.panel:hover .panel__img { transform: scale(1.06); }
.panel__body { padding: clamp(30px, 3.6vw, 50px); width: 100%; }
.panel__body .divider { margin: 0 0 18px; }
.panel__title { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.3; color: #fff; }
/* The description is folded away until the panel is pointed at. */
.panel__text {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s var(--ease), opacity 0.4s var(--ease);
}
.panel__text > p { overflow: hidden; margin: 0; padding-top: 16px; font-size: 16px; line-height: 1.85; color: rgba(255, 255, 255, 0.88); }
.panel:hover .panel__text, .panel:focus-within .panel__text { grid-template-rows: 1fr; opacity: 1; }
.panel .round-arrow { margin-top: 30px; }
.panel:hover .round-arrow { background: var(--accent); border-color: var(--accent); color: var(--ink); }
@media (hover: none), (max-width: 767px) {
  .panel__text { grid-template-rows: 1fr; opacity: 1; }
}
@media (max-width: 991px) { .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .panels { grid-template-columns: minmax(0, 1fr); } .panel { min-height: 420px; } }

/* ==========================================================================
   Duo — copy beside two offset photographs and a signature flourish
   ========================================================================== */
.duo { display: grid; gap: 50px; align-items: center; }
@media (min-width: 992px) { .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; } }
.duo__text .btn { margin-top: 36px; }
.duo__media {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.23fr) minmax(0, 1fr);
  gap: clamp(20px, 4.6vw, 55px);
  align-items: start;
  padding-bottom: 50px;
}
.duo__media figure { position: relative; overflow: hidden; background: var(--paper); }
.duo__media img { width: 100%; height: 100%; object-fit: cover; }
.duo__media figure:nth-child(1) { aspect-ratio: 370 / 485; }
.duo__media figure:nth-child(2) { aspect-ratio: 300 / 390; margin-top: 50px; }
.duo__sign {
  position: absolute;
  right: -10px; bottom: 0;
  font-family: var(--font-script);
  font-size: clamp(62px, 7vw, 104px);
  line-height: 1;
  color: var(--accent);
  transform: rotate(-6deg);
  white-space: nowrap;
  pointer-events: none;
}

/* ==========================================================================
   Quote band — a blue panel set in from the page edges
   ========================================================================== */
.qband-wrap { background: linear-gradient(to bottom, var(--white) 50%, var(--paper) 50%); padding-inline: clamp(0px, 1vw, 15px); }
.qband {
  position: relative;
  overflow: hidden;
  padding: clamp(70px, 8vw, 120px) 0 clamp(60px, 7vw, 100px);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 30px 60px -24px rgba(9, 11, 64, 0.45);
}
/* Two oversized outline quotation marks in the corners */
.qband__mark {
  position: absolute;
  width: clamp(240px, 28vw, 420px); height: auto;
  color: rgba(255, 255, 255, 0.13);
  pointer-events: none;
}
/* Lucide draws a closing mark; turned over it becomes the opening one. */
.qband__mark--a { left: clamp(-60px, -2vw, -20px); top: -6%; transform: rotate(180deg); }
.qband__mark--b { right: clamp(-60px, -2vw, -20px); bottom: -14%; }
.qband .container { position: relative; }
.qband .sec-head { margin-bottom: 50px; }
.qband-wrap--plain { background: var(--white); padding-bottom: clamp(70px, 8vw, 120px); }
.qband--cta { padding-block: clamp(70px, 8vw, 110px); }

.quote__head { display: flex; align-items: center; gap: 28px; margin-bottom: 28px; }
.quote__avatar {
  width: 120px; height: 120px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  font-size: 50px;
  color: #fff;
}
.quote__name { font-size: clamp(22px, 2vw, 26px); line-height: 1.3; color: #fff; }
.quote__role { margin-top: 6px; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.85); }
.quote__text { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.95; color: #fff; }
@media (max-width: 575px) {
  .quote__avatar { width: 84px; height: 84px; font-size: 36px; }
  .quote__head { gap: 18px; }
}

/* Pager dots. The current one is ringed. */
.dots { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 50px; }
.dots button {
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.dots button::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dots button[aria-current="true"] { border-color: currentColor; }
.qband .dots { color: #fff; }

/* ==========================================================================
   Rail — horizontal scroll-snap carousel
   ========================================================================== */
.rail-wrap { position: relative; }
.rail {
  --per: 3;
  --gap: 40px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--gap) * (var(--per) - 1)) / var(--per));
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* room for card shadows, which overflow-x would otherwise clip */
  padding: 10px 0 40px;
  margin: -10px 0 -40px;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail--quotes { --gap: 70px; padding: 0; margin: 0; }
@media (max-width: 991px) { .rail { --per: 2; --gap: 30px; } }
@media (max-width: 640px) { .rail { --per: 1; --gap: 20px; } }

/* Long-arrow pair */
.arrows { display: flex; align-items: center; gap: 22px; }
.arrows button { font-size: 36px; color: var(--heading); transition: color 0.2s var(--ease), opacity 0.2s; }
.arrows button:hover { color: var(--primary); }
.arrows button[disabled] { opacity: 0.3; cursor: default; }
.arrows button[disabled]:hover { color: var(--heading); }

/* ---- Filter tabs ---- */
.filters {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px clamp(22px, 2.6vw, 40px);
}
.filters button {
  font-size: 16px; font-weight: 800;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.2s var(--ease);
}
.filters button:hover, .filters button[aria-pressed="true"] { color: var(--primary); }
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px;
  margin-bottom: 35px;
}
.view-all {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 14px;
  font-size: 16px; font-weight: 800;
  text-transform: uppercase;
  color: var(--primary);
}
.view-all .licon { font-size: 24px; }
.view-all:hover { color: var(--heading); }

/* ==========================================================================
   Event cards — square photo cards, or plain white when there is no photo
   ========================================================================== */
.ecards { display: grid; gap: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) { .ecards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } }
@media (max-width: 640px) { .ecards { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

.ecard {
  position: relative;
  aspect-ratio: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 60px 45px 60px 55px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 16px 40px -18px rgba(9, 11, 64, 0.3);
  isolation: isolate;
}
/* The square is a minimum: a long title grows the card instead of being
   cut off, so the photo is clipped by its own wrapper, not the card. */
.ecard > * { flex-shrink: 0; }
.ecard__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.ecard__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.ecard::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(5, 6, 38, 0.5);
  transition: background-color 0.4s var(--ease);
}
.ecard:hover .ecard__img { transform: scale(1.07); }
.ecard:hover::before { background: rgba(5, 6, 38, 0.62); }
/* The tag holds the top; the auto margin pushes the rest to the bottom. */
.ecard__tag {
  align-self: flex-start;
  margin-bottom: auto;
  padding: 3px 16px;
  border-radius: 15px;
  background: var(--accent);
  color: var(--ink);
  font-size: 15px; font-weight: 800; line-height: 1.6;
}
.ecard__date { font-size: 17px; font-weight: 600; text-transform: uppercase; line-height: 1.5; }
.ecard__date { margin-top: 24px; }
.ecard__title {
  margin-top: 6px;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.38; color: #fff;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.ecard__loc { margin-top: 18px; font-size: 16px; font-weight: 800; line-height: 1.5; }
.ecard .more { margin-top: 26px; }

.ecard--plain { background: var(--white); color: var(--heading); justify-content: center; }
.ecard--plain::before { display: none; }
.ecard--plain .ecard__date { color: var(--muted); }
.ecard--plain .ecard__title { color: var(--primary); }
.ecard--plain .ecard__loc { font-weight: 700; }
.ecard--plain .ecard__tag { margin-bottom: 6px; }
@media (max-width: 1199px) { .ecard { padding: 40px 34px 44px; } }

/* ==========================================================================
   Video / call-out banner
   ========================================================================== */
.vbanner {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(480px, 46vw, 620px);
  padding: 100px 0;
  background: var(--ink-deep);
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.vbanner__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.vbanner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(5, 6, 38, 0.74); }
.vbanner__title { max-width: 16em; margin-inline: auto; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.25; color: #fff; }
.vbanner__text { max-width: 60ch; margin: 22px auto 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.7; color: rgba(255, 255, 255, 0.9); }
.vbanner .btn-row { justify-content: center; margin-top: 46px; }

.play {
  position: relative;
  width: 84px; height: 84px;
  margin: 50px auto 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-size: 26px;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.play .licon { fill: currentColor; margin-left: 4px; }
.play::before, .play::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: pulse 2.4s var(--ease) infinite;
}
.play::after { animation-delay: 1.2s; }
.play:hover { transform: scale(1.06); background: #fff; color: var(--ink); }
@keyframes pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }

/* Facts row used by the summit banner */
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 50px; margin-top: 34px; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.facts dd { margin: 0; font-family: var(--font-head); font-size: 20px; font-weight: 700; color: #fff; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.chips li {
  padding: 6px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  font-size: 14px; font-weight: 700;
  color: #fff;
}

/* ---- Video modal ---- */
.vmodal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(14px, 4vw, 60px);
  background: rgba(3, 4, 24, 0.94);
}
.vmodal__frame { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; }
.vmodal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.vmodal__close, .lightbox__close {
  position: absolute; top: clamp(12px, 3vw, 30px); right: clamp(12px, 3vw, 30px);
  width: 50px; height: 50px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 18px;
  transition: background-color 0.2s var(--ease);
}
.vmodal__close:hover, .lightbox__close:hover { background: var(--primary); }

/* ==========================================================================
   Quote feature — copy, a portrait, and a blue quote box overlapping it
   ========================================================================== */
.qfeat { display: grid; gap: 50px; align-items: center; }
@media (min-width: 992px) { .qfeat { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; } }
.qfeat__text .more, .qfeat__text .btn { margin-top: 34px; }
.qfeat__media { position: relative; padding-right: clamp(0px, 16vw, 230px); }
.qfeat__media figure { aspect-ratio: 430 / 485; overflow: hidden; background: var(--paper); }
.qfeat__media img { width: 100%; height: 100%; object-fit: cover; }
.qbox {
  position: absolute; right: 0; top: 17%;
  width: min(330px, 62%);
  padding: clamp(30px, 3.6vw, 50px) clamp(26px, 3.4vw, 46px);
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.qbox__mark { font-family: var(--font-head); font-size: 64px; font-weight: 700; line-height: 0.6; height: 30px; }
.qbox__text { margin-top: 14px; font-family: var(--font-head); font-size: clamp(20px, 2vw, 28px); font-weight: 700; line-height: 1.45; color: #fff; }
.qbox__name { margin-top: 26px; font-family: var(--font-head); font-size: 18px; font-weight: 700; }
.qbox__role { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
@media (max-width: 575px) {
  .qfeat__media { padding-right: 0; padding-bottom: 150px; }
  .qbox { top: auto; bottom: 0; width: 86%; }
}

/* ==========================================================================
   Directory — intro column beside a two-up list of icon entries
   ========================================================================== */
.directory { display: grid; gap: 50px; }
@media (min-width: 992px) { .directory { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 50px; } }
.directory__intro .btn { margin-top: 40px; }
.directory__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 55px 50px;
}
@media (max-width: 640px) { .directory__list { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.dentry { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 26px; align-items: start; }
.dentry > .licon, .dentry > .fa-solid { font-size: 56px; color: var(--primary); }
.dentry > .fa-solid { font-size: 40px; text-align: center; padding-top: 6px; }
.dentry__title { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.4; transition: color 0.2s var(--ease); }
a.dentry:hover .dentry__title { color: var(--primary); }
.dentry__text { margin-top: 14px; }
.band--ink .dentry__title { color: #fff; }
.band--ink .dentry > .licon { color: var(--accent); }

/* ==========================================================================
   Stagger — two offset tall photographs beside copy and an arrow list
   ========================================================================== */
.stagger { display: grid; gap: 50px; align-items: center; }
@media (min-width: 992px) { .stagger { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; } }
.stagger__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3.6vw, 45px); align-items: start; }
.stagger__media figure { overflow: hidden; background: var(--paper); }
.stagger__media img { width: 100%; height: 100%; object-fit: cover; }
.stagger__media figure:first-child { aspect-ratio: 336 / 520; }
.stagger__media figure:last-child { aspect-ratio: 336 / 560; margin-top: 70px; }

.arrow-list { display: grid; gap: 20px; margin-top: 36px; }
.arrow-list li { display: flex; align-items: flex-start; gap: 20px; font-family: var(--font-head); font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; line-height: 1.45; color: var(--heading); }
.arrow-list .licon { font-size: 28px; color: var(--primary); margin-top: -1px; }
.band--ink .arrow-list li { color: #fff; }

/* ==========================================================================
   Explore panels — a row of photographs; the one in focus turns into a card
   ========================================================================== */
/* Paper behind the heading and the top of the row, white behind the rest. */
.xpanels-wrap { position: relative; isolation: isolate; padding: var(--pad-y) 20px 0; background: var(--paper); }
.band--paper + .xpanels-wrap { padding-top: 0; }
.xpanels { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 27px); }
.xpanels::before { content: ""; position: absolute; z-index: -3; left: -20px; right: -20px; bottom: 0; height: 64%; background: var(--white); }
.xpanel {
  position: relative;
  min-height: clamp(460px, 38vw, 610px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow 0.5s var(--ease);
}
.xpanel__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.5s var(--ease), transform 1s var(--ease);
}
.xpanel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(5, 6, 38, 0.18); transition: background-color 0.5s; }
.xpanel__corner {
  position: absolute; top: 0; right: 0;
  width: 130px; height: 120px;
  display: grid; place-items: center;
  padding: 0 0 22px 22px;
  border-bottom-left-radius: 130px 120px;
  background: var(--ink);
  color: #fff;
  font-size: 46px;
  transform: translate(100%, -100%);
  transition: transform 0.5s var(--ease);
}
.xpanel__body { padding: clamp(28px, 3.4vw, 54px); padding-right: 30px; }
.xpanel__title { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.3; }
.xpanel__text { margin-top: 18px; line-height: 2.1; }
.xpanel__title, .xpanel__text { display: none; }
.xpanel .round-arrow { align-self: flex-end; margin: 0 clamp(26px, 3vw, 54px) clamp(26px, 3vw, 54px) 0; }
.xpanel:hover .xpanel__img { transform: scale(1.05); }

.xpanel.is-active { background: var(--white); box-shadow: var(--shadow-lg); }
.xpanel.is-active::before { background: transparent; }
.xpanel.is-active .xpanel__img { opacity: 0; }
.xpanel.is-active .xpanel__corner { transform: none; }
.xpanel.is-active .xpanel__title, .xpanel.is-active .xpanel__text { display: block; animation: fade-up 0.5s var(--ease) both; }
.xpanel.is-active .round-arrow { align-self: flex-start; margin: 0 0 clamp(28px, 3.4vw, 54px) clamp(28px, 3.4vw, 54px); border-color: var(--heading); color: var(--heading); }
.xpanel.is-active .xpanel__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 120px; }
.xpanel.is-active .round-arrow:hover { background: var(--ink); color: #fff; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 1199px) {
  .xpanels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Below a tablet every panel is a card: photo on top, copy beneath. */
@media (max-width: 767px) {
  .xpanels-wrap { background: var(--white); }
  .xpanels { grid-template-columns: minmax(0, 1fr); }
  .xpanels::before { display: none; }
  .xpanel, .xpanel.is-active { min-height: 0; background: var(--white); box-shadow: var(--shadow); }
  .xpanel__img, .xpanel.is-active .xpanel__img { position: relative; height: 220px; opacity: 1; }
  .xpanel::before, .xpanel__corner { display: none; }
  .xpanel__title, .xpanel__text { display: block; }
  .xpanel__body, .xpanel.is-active .xpanel__body { padding: 28px 26px 0; }
  .xpanel .round-arrow, .xpanel.is-active .round-arrow { align-self: flex-start; margin: 24px 26px 28px; border-color: var(--heading); color: var(--heading); }
}

/* ==========================================================================
   Publication cards (news)
   ========================================================================== */
.pubs { display: grid; gap: 40px; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
@media (max-width: 640px) { .pubs { grid-template-columns: minmax(0, 1fr); } }
.pub {
  display: flex; flex-direction: column;
  background: var(--white);
  box-shadow: 0 12px 34px -14px rgba(9, 11, 64, 0.16);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.pub:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pub__media { position: relative; display: block; aspect-ratio: 366 / 270; background: var(--paper); }
.pub__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pub__tag {
  position: absolute; left: 0; bottom: 0;
  padding: 4px 16px 2px 14px;
  border-top-right-radius: 16px;
  background: var(--accent);
  color: var(--ink);
  font-size: 15px; font-weight: 800; line-height: 1.6;
}
.pub__body { flex: 1; padding: 30px 35px; }
.pub__title { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; }
.pub__title a:hover { color: var(--primary); }
.pub__excerpt { margin-top: 14px; }
.pub__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 18px 35px;
  border-top: 1px solid var(--line);
  font-size: 15px; color: var(--muted);
}
.pub__avatar {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary); color: #fff;
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
}
.pub__author { font-weight: 800; color: var(--heading); }
/* The slash travels with the date when the row wraps. */
.pub__foot time { white-space: nowrap; }
.pub__foot time::before { content: "/"; margin-right: 10px; color: var(--line-strong, #c9ced8); }

/* ==========================================================================
   Info boxes (contact)
   ========================================================================== */
.infoboxes { position: relative; z-index: 5; margin-top: -80px; display: grid; gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .infoboxes { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: -60px; } }
.infobox {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 44px 30px;
  background: var(--white);
  box-shadow: 0 22px 44px -16px rgba(9, 11, 64, 0.18);
  text-align: center;
}
.infobox > .licon { font-size: 56px; color: var(--primary); margin-bottom: 6px; }
.infobox__label { font-size: 15px; font-weight: 800; text-transform: uppercase; color: var(--heading); }
.infobox a:hover { color: var(--primary); }

/* ==========================================================================
   Page title (inner pages)
   ========================================================================== */
.page-title {
  position: relative;
  padding: calc(var(--head-h) + clamp(70px, 8vw, 110px)) 0 clamp(80px, 9vw, 120px);
  background: var(--ink);
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.page-title__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-title::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(5, 6, 38, 0.72), rgba(5, 6, 38, 0.6)); }
.page-title__title { max-width: 22em; margin-inline: auto; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.25; color: #fff; }
.page-title__lede { max-width: 62ch; margin: 20px auto 0; font-size: 18px; line-height: 1.75; color: rgba(255, 255, 255, 0.86); }
.page-title .btn-row { justify-content: center; margin-top: 34px; }
.crumbs {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px;
  margin-top: 22px;
  font-size: 16px; font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
}
.crumbs a:hover { color: #fff; }
.crumbs .sep { opacity: 0.5; }
.crumbs .is-current { color: #fff; }
.page-title .post-meta { justify-content: center; margin-top: 22px; color: rgba(255, 255, 255, 0.86); }
.page-title .post-meta i { color: var(--accent); }
.page-title__tag {
  display: inline-block;
  margin-bottom: 22px;
  padding: 3px 16px;
  border-radius: 15px;
  background: var(--accent);
  color: var(--ink);
  font-size: 15px; font-weight: 800; line-height: 1.6;
}

/* ==========================================================================
   Content shell, sidebar, widgets
   ========================================================================== */
.shell { display: grid; gap: 60px; }
@media (min-width: 1000px) {
  .shell { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 70px; }
  .shell--flip { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
}
.aside { display: grid; gap: 40px; align-content: start; }
.widget { padding: 40px 36px; background: var(--paper); }
.band--paper .widget { background: var(--white); }
.widget__title { font-size: 22px; line-height: 1.4; }
.widget .divider { margin: 16px 0 24px; }
.widget nav a, .widget .links a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0;
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700;
  color: var(--heading);
  border-bottom: 1px solid var(--line);
  transition: color 0.2s var(--ease), padding-left 0.25s var(--ease);
}
.widget nav li:last-child a { border-bottom: 0; padding-bottom: 0; }
.widget nav a .licon { font-size: 20px; color: var(--primary); transition: transform 0.25s var(--ease); }
.widget nav a:hover, .widget nav a.is-active { color: var(--primary); }
.widget nav a:hover .licon { transform: translateX(4px); }
.widget--cta { background: var(--primary); color: rgba(255, 255, 255, 0.88); }
.band--paper .widget--cta { background: var(--primary); }
.widget--cta .widget__title { color: #fff; }
.widget--cta .btn { margin-top: 24px; }

.mini-posts { display: grid; gap: 22px; }
.mini-post { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 18px; align-items: center; }
.mini-post__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--line); }
.mini-post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini-post h4 { font-size: 16px; line-height: 1.45; transition: color 0.2s var(--ease); }
.mini-post:hover h4 { color: var(--primary); }
.mini-post span span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }

.contact-list { display: grid; gap: 14px; }
.contact-list li { display: flex; align-items: flex-start; gap: 16px; }
.contact-list i { width: 18px; margin-top: 7px; font-size: 16px; color: var(--primary); text-align: center; flex: none; }
.contact-list a:hover { color: var(--primary); }

.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--heading);
  font-size: 15px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s;
}
.socials a:hover { background: var(--primary); color: #fff; box-shadow: none; }
.on-dark .socials a, .drawer .socials a, .site-footer .socials a { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; }
.on-dark .socials a:hover, .drawer .socials a:hover, .site-footer .socials a:hover { background: var(--primary); }

/* ---- Post meta & share ---- */
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px;
  font-size: 15px; font-weight: 600;
}
.post-meta span { display: inline-flex; align-items: center; gap: 9px; }
.post-meta i { font-size: 13px; color: var(--primary); }

.share { display: flex; align-items: center; gap: 10px; }
.share__label { font-size: 15px; font-weight: 800; text-transform: uppercase; color: var(--heading); margin-right: 6px; }
.share a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--paper); color: var(--heading); font-size: 14px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.share a:hover { background: var(--primary); color: #fff; }

.row-split { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.row-split--ruled { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line); }

/* ---- Article body ---- */
.prose { font-size: 17px; line-height: 1.9; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(24px, 2.2vw, 30px); margin-top: 1.6em; }
.prose h3 { font-size: clamp(20px, 1.8vw, 24px); margin-top: 1.5em; }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.prose img { margin-block: 1.6em; }
.prose strong { color: var(--heading); }
.prose blockquote {
  margin: 1.8em 0; padding: 34px 40px;
  background: var(--primary); color: #fff;
  font-family: var(--font-head); font-size: 22px; font-weight: 700; line-height: 1.55;
}
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--primary); }
.prose .lead { font-size: 20px; line-height: 1.7; color: var(--heading); }

.article-figure { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); margin-bottom: 50px; }
.article-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.media-label { margin: 56px 0 22px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- Photo gallery & lightbox ---- */
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery__item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper); cursor: zoom-in; }
.gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery__item::after { content: ''; position: absolute; inset: 0; background: rgba(11, 29, 158, 0); transition: background-color 0.3s var(--ease); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item:hover::after { background: rgba(11, 29, 158, 0.25); }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(8px, 2vw, 28px);
  padding: clamp(12px, 3vw, 44px);
  background: rgba(3, 4, 24, 0.95);
}
.lightbox__img { grid-column: 2; max-width: 100%; max-height: 86vh; margin-inline: auto; object-fit: contain; }
.lightbox__nav {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.1); font-size: 16px;
  transition: background-color 0.2s var(--ease);
}
.lightbox__nav:hover { background: var(--primary); }
.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }
.lightbox__count {
  position: absolute; bottom: clamp(12px, 3vw, 30px); left: 0; right: 0;
  margin: 0; text-align: center;
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: var(--on-ink-2);
}

/* ---- Pagination ---- */
.pager { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 60px; }
.pager a, .pager span {
  min-width: 50px; height: 50px; padding-inline: 12px;
  display: grid; place-items: center;
  border-radius: 25px;
  background: var(--paper);
  font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--heading);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.pager a:hover, .pager .is-current { background: var(--primary); color: #fff; }
.pager .is-disabled { opacity: 0.4; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-grid { display: grid; gap: 22px 30px; }
@media (min-width: 760px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .span-2 { grid-column: 1 / -1; }
}
.field { display: grid; gap: 8px; align-content: start; }
.field > label { font-size: 15px; font-weight: 700; color: var(--heading); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 58px;
  padding: 14px 24px;
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 16px;
  color: var(--heading);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
  appearance: none;
}
.band--paper .field input, .band--paper .field select, .band--paper .field textarea { background: var(--white); }
.field textarea { min-height: 170px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%230A1A31' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center;
  padding-right: 50px;
  cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); background-color: var(--white); }
.field small { font-size: 14px; line-height: 1.6; color: var(--muted); }

.form-step {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 16px;
  margin: 26px 0 0;
  font-family: var(--font-head); font-size: 20px; font-weight: 700;
  color: var(--heading);
}
.form-step::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.form-grid > .form-step:first-child { margin-top: 0; }

.check-line { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; }
.check-line input { width: 19px; height: 19px; margin-top: 5px; accent-color: var(--primary); flex: none; }

/* Honeypot — kept off-screen, never display:none (bots skip hidden fields) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: 18px 24px; border-left: 4px solid; font-size: 16px; margin-bottom: 34px; }
.alert--ok { border-color: #1faf54; background: #effaf2; color: #10542a; }
.alert--bad { border-color: #d24b3e; background: #fdf1ef; color: #7d241a; }
.alert ul { display: grid; gap: 5px; }
.alert li { padding-left: 15px; position: relative; }
.alert li::before { content: '—'; position: absolute; left: 0; }

.form-note { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.form-note i { font-size: 14px; margin-top: 3px; flex: none; }
.form-note.is-ok { color: #1b8f4a; }
.form-note.is-bad { color: #c6412f; }
.stay .form-note { color: #fff; }

/* ---- Course calendar ---- */
.ctable-wrap { background: var(--white); box-shadow: var(--shadow); overflow-x: auto; }
.ctable { width: 100%; border-collapse: collapse; }
.ctable thead th {
  padding: 22px clamp(16px, 2vw, 30px);
  background: var(--ink); color: #fff;
  font-family: var(--font-head); font-size: 16px; font-weight: 700;
  text-align: left; white-space: nowrap;
}
.ctable tbody tr + tr { border-top: 1px solid var(--line); }
.ctable tbody tr { transition: background-color 0.2s var(--ease); }
.ctable tbody tr:hover { background: var(--paper); }
.ctable tbody th, .ctable tbody td { padding: 22px clamp(16px, 2vw, 30px); text-align: left; vertical-align: middle; font-weight: 400; }
.ctable tbody th { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--heading); }
.ctable__act { text-align: right; white-space: nowrap; }
.ctable__btn { min-height: 46px; padding: 10px 26px; font-size: 14px; }
@media (max-width: 700px) {
  .ctable-wrap { overflow-x: visible; }
  .ctable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .ctable tbody tr { display: grid; gap: 4px; padding: 24px; }
  .ctable tbody th, .ctable tbody td { padding: 0; }
  .ctable tbody td[data-label]::before { content: attr(data-label) ' — '; font-weight: 700; color: var(--heading); }
  .ctable__act { text-align: left; margin-top: 12px; }
}

/* ==========================================================================
   Footer — the "stay connected" band overlaps its top edge
   ========================================================================== */
.site-footer { background: var(--ink-deep); color: var(--on-ink-2); }
.stay-wrap {
  background: linear-gradient(to bottom, var(--footer-top, var(--white)) 0 108px, var(--ink-deep) 108px);
  padding-inline: clamp(0px, 1.4vw, 26px);
}
.stay {
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 5vw, 70px) 0;
  background: var(--primary);
  color: #fff;
}
/* A faint circuit-board pattern standing in for a texture */
.stay::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.16) 1px, transparent 1.6px),
    linear-gradient(115deg, transparent 0 60%, rgba(255, 255, 255, 0.06) 60% 100%);
  background-size: 26px 26px, 100% 100%;
  pointer-events: none;
}
.stay .container { position: relative; }
.stay__grid { display: grid; gap: 26px 40px; align-items: center; }
@media (min-width: 992px) { .stay__grid { grid-template-columns: auto minmax(0, 1fr); } }
.stay__title { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.2; color: #fff; }
.stay__form { display: grid; gap: 18px 40px; align-items: end; }
@media (min-width: 680px) { .stay__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } }
.stay__form input {
  width: 100%; height: 60px;
  padding: 0 14px;
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;
  color: #fff;
  font-size: 17px; font-weight: 700;
}
.stay__form input::placeholder { color: #fff; opacity: 1; }
.stay__form input:focus { outline: none; border-bottom-color: #fff; }
.stay__form .btn { min-width: 190px; min-height: 66px; }
.stay__form .form-note { grid-column: 1 / -1; margin: 0; }

.site-footer__main { display: grid; }
@media (min-width: 992px) { .site-footer__main { grid-template-columns: minmax(0, 4.6fr) minmax(0, 3.4fr) minmax(0, 4fr); } }
.site-footer__col { padding: clamp(60px, 7vw, 100px) 0 clamp(50px, 6vw, 90px); }
@media (min-width: 992px) { .site-footer__col + .site-footer__col { padding-left: clamp(30px, 5vw, 80px); } }
/* The first column is a lighter panel running out to the left edge. */
.site-footer__col--panel { position: relative; isolation: isolate; }
.site-footer__col--panel::before {
  content: ''; position: absolute; z-index: -1;
  top: 0; bottom: 0; right: 0; left: -100vw;
  background: var(--ink);
}
@media (max-width: 991px) {
  .site-footer__col--panel::before { right: -100vw; }
  .site-footer__col + .site-footer__col { padding-top: 0; }
  .site-footer__col--panel + .site-footer__col { padding-top: 60px; }
}
.site-footer__logo img { height: 50px; width: auto; filter: brightness(0) invert(1); }
.site-footer__org { margin: 34px 0 20px; font-family: var(--font-body); font-size: 19px; font-weight: 800; color: #fff; }
.foot-title { margin-bottom: 34px; font-size: 19px; text-transform: uppercase; color: #fff; }
.foot-links { display: grid; gap: 10px; }
.foot-links a { font-size: 17px; color: var(--on-ink-2); }
.foot-links a:hover { color: var(--accent); }
.site-footer .contact-list li { font-size: 17px; color: var(--on-ink-2); }
.site-footer .contact-list i { color: var(--accent); }
.site-footer .contact-list a:hover { color: #fff; }
.foot-map { height: 230px; background: var(--ink); }
.foot-map iframe { width: 100%; height: 100%; filter: grayscale(1) contrast(1.05); }
.site-footer__panel-pad { padding-right: 30px; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px;
  padding-block: 26px;
  border-top: 1px solid var(--line-ink);
  font-size: 15px;
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom a:hover { color: #fff; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 26px; }

/* Back to top */
.to-top {
  position: fixed; right: 30px; bottom: 30px; z-index: 70;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 26px;
  /* The ring keeps it visible over the blue bands. */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 10px 24px -8px rgba(9, 11, 64, 0.5);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background-color 0.2s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--ink); }
@media (max-width: 575px) { .to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; } }

/* Contact page map */
.map { height: clamp(320px, 40vw, 480px); }
.map iframe { width: 100%; height: 100%; filter: grayscale(1) contrast(1.05); }

/* ==========================================================================
   Motion — fade-up on scroll, driven by IntersectionObserver in aiaie.js
   ========================================================================== */
.rise { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.rise.is-in { opacity: 1; transform: none; }
.rise-2 { transition-delay: 0.1s; }
.rise-3 { transition-delay: 0.2s; }
.rise-4 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
  .hero__slide { animation: none !important; opacity: 0; }
  .hero__slide:first-child { opacity: 1; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- Utilities ---- */
.stack { display: grid; gap: 28px; }
.mt-0 { margin-top: 0; }
.w-full { width: 100%; }