@charset "UTF-8";
/* ==========================================================================
   CIBET International Council — main.css
   Design system derived from the supplied logo: navy-to-blue gradient,
   single gold hairline, geometric wordmark.

   Contents
   01 Tokens
   02 Reset and base
   03 Typography
   04 Layout: shell, section
   05 Buttons and links
   06 Header and navigation
   07 Hero
   08 Pillar band
   09 Cards and grids
   10 Statistics
   11 Index list (programmes)
   12 Events
   13 Chapters
   14 Benefits, quotes, partners
   15 Insights
   16 FAQ
   17 Newsletter and CTA
   18 Forms
   19 Tables
   20 Breadcrumbs, footer, flash
   21 Motion and reveal
   22 Responsive
   23 Accessibility and print
   ========================================================================== */

/* 01 Tokens ============================================================== */

:root {
  /* Brand — sampled from the logo. Gold is a rule colour, never a fill. */
  --navy-900: #08234e;
  --navy-800: #0d3271;
  --blue-700: #14509b;
  --blue-500: #1e6fbf;
  /* Gold scale. The mark carries one gold rule; the site extends that into a
     full secondary. --gold-700 is the only one that passes AA for body-size
     text on white, so it is the one used for small text and links. */
  --gold-800: #6b5214;   /* deep gold, text on gold fills */
  --gold-700: #8a6a18;   /* AA at body size on white (5.05:1) and on --gold-100 (4.68:1) */
  --gold-600: #b28c2b;   /* AA large-text on white (3.14:1) — headings and rules only */
  --gold-500: #d4af37;   /* the brand gold — fills, bands, gold on navy */
  --gold-400: #e8c85a;   /* hover on dark, highlights */
  --gold-200: #f6e6b4;   /* soft fills, tinted panels */
  --gold-100: #fdf6e3;   /* page-level warm tint */

  --ink:      #0e1626;
  --slate:    #4c5870;
  --slate-2:  #6c7891;
  --line:     #dfe4ee;
  --line-2:   #eef1f7;
  --mist:     #f6f8fc;
  --warm:     #fdf9ef;   /* warm section tint, pairs with gold */
  --paper:    #ffffff;

  --on-dark:      #ffffff;
  --on-dark-soft: #c3d2ea;
  --line-dark:    rgba(255, 255, 255, .16);

  --ok:    #1c6b46;
  --error: #a4232b;

  /* Type */
  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body:    "Public Sans", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Spacing — 4px base */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3.5rem;
  --s-9: 5rem;    --s-10: 7rem;

  --shell:  1200px;
  --prose:  68ch;
  --radius: 2px;     /* institutional, not app-like */

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* 02 Reset and base ===================================================== */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

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

/* 03 Typography ========================================================= */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--navy-900);
  margin: 0 0 var(--s-4);
  letter-spacing: -.011em;
  line-height: 1.16;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.9rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); line-height: 1.28; }
h4 { font-size: 1.0625rem; font-family: var(--body); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1.02rem + .35vw, 1.3rem);
  line-height: 1.55;
  color: var(--slate);
  max-width: 62ch;
}

.prose { max-width: var(--prose); }
.prose > * + h2 { margin-top: var(--s-8); }
.prose > * + h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-left: 1.35rem; }
.prose li { margin-bottom: var(--s-2); }

/* The answer paragraph: first thing under an H2, written to stand alone. */
.answer {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  border-left: 2px solid var(--gold-600);
  padding-left: var(--s-4);
  margin-bottom: var(--s-5);
  max-width: 64ch;
}

/* Monospace utility label — section codes, pillar tags, references, dates. */
.mono {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: var(--s-3);
}

.text-center { text-align: center; }
.measure { max-width: 64ch; }
.measure-center { max-width: 64ch; margin-inline: auto; }

/* 04 Layout ============================================================= */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding-block: clamp(3.5rem, 6vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }
.section--tint  { background: var(--mist); }
.section--dark  { background: var(--navy-800); color: var(--on-dark); }
.section--deep  { background: var(--navy-900); color: var(--on-dark); }
.section--hair  { border-top: 1px solid var(--line); }

.section--dark h2, .section--dark h3, .section--dark h4,
.section--deep h2, .section--deep h3, .section--deep h4 { color: var(--on-dark); }
.section--dark .lede, .section--deep .lede { color: var(--on-dark-soft); }
.section--dark .eyebrow, .section--deep .eyebrow { color: var(--gold-500); }


.section-head { max-width: 62ch; }
.section-head p { color: var(--slate); }
.section--dark .section-head p, .section--deep .section-head p { color: var(--on-dark-soft); }

/* 05 Buttons and links ================================================== */

a { color: var(--blue-700); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--navy-900); }
.section--dark a, .section--deep a { color: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.btn--primary { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.btn--primary:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }

.btn--ghost { background: transparent; border-color: var(--navy-800); color: var(--navy-800); }
.btn--ghost:hover { background: var(--navy-800); color: #fff; }

.btn--light { background: #fff; border-color: #fff; color: var(--navy-900); }
.btn--light:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }

.btn--outline-light { background: transparent; border-color: var(--line-dark); color: #fff; }
.btn--outline-light:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.btn--sm { padding: .6rem 1.1rem; font-size: .875rem; }
.btn--block { width: 100%; justify-content: center; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* Text link with a trailing arrow that nudges on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.link-arrow::after { content: "→"; transition: transform .18s var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

/* 06 Header ============================================================= */

.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { height: 46px; width: auto; }
.brand__fallback { display: flex; flex-direction: column; line-height: 1; }
.brand__fallback strong {
  font-family: var(--body);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: .01em;
  color: var(--navy-800);
}
.brand__fallback span {
  font-family: var(--body);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--navy-800);
  margin-top: .3rem;
}

.header-actions { display: flex; align-items: center; gap: var(--s-3); }

/* Navigation */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .6rem .7rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav__link:hover { color: var(--blue-700); background: var(--mist); }
.nav__link[aria-current="page"],
.nav__item--active > .nav__link { color: var(--navy-900); box-shadow: inset 0 -2px 0 var(--gold-600); }

.nav__caret { width: .5rem; height: .5rem; flex: none; transition: transform .18s var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }




/* Member login: deliberately quieter than the six main items, and separated
   by a hairline so it reads as a utility rather than a seventh section. */
.nav__item--quiet {
  margin-left: var(--s-3);
  padding-left: var(--s-3);
  border-left: 1px solid var(--line);
}
.nav__link--quiet { color: var(--slate); font-weight: 400; font-size: .875rem; }
.nav__link--quiet:hover { color: var(--blue-700); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .6rem .85rem;
  font-family: var(--body);
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy-900);
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 3px; }
.nav-toggle__bars i { display: block; width: 16px; height: 2px; background: var(--navy-900); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy-900);
  color: #fff;
  padding: .75rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* 07 Hero =============================================================== */

.hero {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, #114080 100%);
  color: var(--on-dark);
  border-top: 2px solid var(--gold-500);
  padding-block: clamp(3.5rem, 7vw, 7rem);
  position: relative;
  overflow: hidden;
}

/* One restrained atmospheric element: a soft off-axis light, no pattern. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -55% auto;
  right: -12%;
  width: 46rem;
  height: 46rem;
  background: radial-gradient(circle, rgba(30, 111, 191, .38) 0%, transparent 66%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.hero h1 { color: #fff; max-width: 22ch; }
.hero__lede { color: var(--on-dark-soft); font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem); max-width: 52ch; }

/* Hero panel: the applications note. Says the one thing that differentiates
   CIBET — free to apply, assessed, paid only on approval. */
.hero__panel {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-dark);
  border-top: 2px solid var(--gold-500);
  border-radius: var(--radius);
  padding: var(--s-6);
}
.hero__panel h2 {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--s-4);
}
.hero__steps { list-style: none; margin: 0; padding: 0; }
.hero__steps li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-dark);
  font-size: .9375rem;
  color: var(--on-dark-soft);
}
.hero__steps li:first-child { border-top: 0; padding-top: 0; }
.hero__steps b { font-family: var(--mono); font-size: .75rem; color: var(--gold-500); font-weight: 500; }
.hero__steps strong { color: #fff; font-weight: 600; }

/* 08 Pillar band ======================================================== */

.pillars {
  background: var(--navy-800);
  border-top: 1px solid var(--line-dark);
  color: var(--on-dark);
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pillar {
  padding: var(--s-6) var(--s-5);
  border-left: 1px solid var(--line-dark);
}
.pillar:first-child { border-left: 0; padding-left: 0; }
.pillar__code {
  display: inline-block;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  color: var(--navy-900);
  background: var(--gold-500);
  padding: .1rem .4rem;
  border-radius: var(--radius);
  margin-bottom: var(--s-3);
}
.pillar h3 {
  font-family: var(--body);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s-2);
}
.pillar p { font-size: .9rem; color: var(--on-dark-soft); margin: 0; }

/* Pillar tag used on cards, events and articles. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .2rem .45rem;
}
.tag::before { content: ""; width: 6px; height: 6px; background: var(--pillar, var(--gold-600)); }

/* 09 Cards and grids ==================================================== */

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

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--pillar, var(--gold-600));
  border-radius: var(--radius);
  padding: var(--s-5);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.card:hover { border-color: var(--blue-500); transform: translateY(-2px); }
.card__ref {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--slate-2);
  margin-bottom: var(--s-3);
}
.card h3 { font-size: 1.15rem; margin-bottom: var(--s-2); }
.card p { font-size: .9375rem; color: var(--slate); }
.card__meta {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-2);
  font-size: .875rem;
}
.card__fee { font-family: var(--mono); font-size: .75rem; color: var(--slate-2); display: block; margin-bottom: var(--s-3); }
.card__link { margin-top: var(--s-4); }

/* 10 Statistics ========================================================= */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-dark); }
.stat { background: var(--navy-900); padding: var(--s-6) var(--s-5); }
.stat__figure {
  font-family: var(--display);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.6rem);
  font-weight: 600;
  color: #fff;
  line-height: 1;
  display: block;
  margin-bottom: var(--s-3);
}
.stat__label { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-soft); }
.stats-note { font-size: .8125rem; color: var(--on-dark-soft); margin-top: var(--s-5); }

/* 11 Index list ========================================================= */

.index-list { border-top: 1px solid var(--line); }
.index-item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.index-item:hover { background: var(--mist); }
.index-item:hover .index-item__title { color: var(--blue-700); }
.index-item__num { font-family: var(--mono); font-size: .75rem; color: var(--slate-2); }
.index-item__title { font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--navy-900); display: block; margin-bottom: .3rem; }
.index-item p { font-size: .9375rem; color: var(--slate); margin: 0; max-width: 58ch; }
.index-item__end { display: flex; align-items: center; gap: var(--s-4); }

/* 12 Events ============================================================= */

.event {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.event__date {
  text-align: center;
  border-right: 1px solid var(--line);
  padding-right: var(--s-4);
}
.event__day { font-family: var(--display); font-size: 2rem; font-weight: 600; color: var(--navy-900); line-height: 1; display: block; }
.event__month { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-2); display: block; margin-top: .3rem; }
.event__year { font-family: var(--mono); font-size: .625rem; color: var(--slate-2); display: block; }
.event h3 { font-size: 1.1rem; margin-bottom: var(--s-2); }
.event h3 a { color: inherit; text-decoration: none; }
.event h3 a:hover { color: var(--blue-700); }
.event__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4); font-size: .8125rem; color: var(--slate); }
.event__rates { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; }
.event__rates b { color: var(--navy-900); }

/* 13 Chapters =========================================================== */

.region { margin-bottom: var(--s-7); }
.region__name {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-2);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--gold-600);
  margin-bottom: var(--s-2);
}
.chapter-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-2);
  font-size: .9375rem;
}
.chapter-row__code { font-family: var(--mono); font-size: .75rem; color: var(--slate-2); }
.chapter-row__city { font-weight: 600; color: var(--navy-900); }
.status {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .45rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  color: var(--slate);
  white-space: nowrap;
}
.status--active { color: var(--ok); border-color: currentColor; }
.status--forming { color: var(--gold-600); border-color: currentColor; }

/* 14 Benefits, quotes, partners ========================================= */

.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.benefit { background: var(--paper); padding: var(--s-6) var(--s-5); }
.benefit__num { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; color: var(--gold-600); display: block; margin-bottom: var(--s-3); }
.benefit h3 { font-size: 1.075rem; margin-bottom: var(--s-2); }
.benefit p { font-size: .9375rem; color: var(--slate); margin: 0; }

.quote {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-600);
  border-radius: var(--radius);
  padding: var(--s-6);
}
.quote blockquote { margin: 0 0 var(--s-5); font-family: var(--display); font-size: 1.2rem; line-height: 1.5; color: var(--navy-900); }
.quote figcaption { font-size: .875rem; color: var(--slate); }
.quote figcaption strong { display: block; color: var(--navy-900); font-weight: 600; }
.quote figcaption .mono { display: block; margin-top: var(--s-2); color: var(--slate-2); }

.partners { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; }
.partner-slot {
  flex: 1 1 12rem;
  min-height: 5.5rem;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-2);
  text-align: center;
  padding: var(--s-4);
}

/* 15 Insights =========================================================== */

.post { display: flex; flex-direction: column; gap: var(--s-3); }
.post__meta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.post h3 { font-size: 1.15rem; margin: 0; }
.post h3 a { color: inherit; text-decoration: none; }
.post h3 a:hover { color: var(--blue-700); }
.post p { font-size: .9375rem; color: var(--slate); margin: 0; }
.post__byline { font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2); }

/* 16 FAQ ================================================================ */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item > summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy-900);
  list-style: none;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: "+"; font-family: var(--mono); font-size: 1.1rem; color: var(--gold-600); flex: none; }
.faq__item[open] > summary::after { content: "–"; }
.faq__item > summary:hover { color: var(--blue-700); }
.faq__answer { padding-bottom: var(--s-5); max-width: 66ch; }
.faq__answer p { font-size: .9375rem; color: var(--slate); }
.faq__answer p:first-child { color: var(--ink); }

/* 17 Newsletter and CTA ================================================= */

.newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.newsletter__form { display: grid; gap: var(--s-3); }
.newsletter__row { display: flex; gap: var(--s-3); }
.newsletter__row input { flex: 1 1 auto; }
.newsletter input[type="email"] {
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--line-dark);
  color: #fff;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: .9375rem;
}
.newsletter input[type="email"]::placeholder { color: rgba(255, 255, 255, .5); }
.newsletter .consent { font-size: .8125rem; color: var(--on-dark-soft); }
.newsletter .consent a { color: #fff; }

.cta-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cta-panel { background: var(--paper); padding: clamp(2rem, 4vw, 3.5rem); }
.cta-panel h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.cta-panel p { color: var(--slate); max-width: 44ch; }

/* 18 Forms ============================================================== */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }

.field > label { font-size: .875rem; font-weight: 600; color: var(--navy-900); }
.field .hint { font-size: .8125rem; color: var(--slate-2); }
.field .req { color: var(--error); font-weight: 600; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="url"], .field input[type="file"], .field select, .field textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: .9375rem;
  line-height: 1.5;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%), linear-gradient(135deg, var(--slate) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }

.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--blue-700); }

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--error); }
.field .field-error { font-size: .8125rem; color: var(--error); font-weight: 500; }

.check { display: grid; grid-template-columns: 1.1rem 1fr; gap: var(--s-3); align-items: start; font-size: .9rem; color: var(--slate); }
.check input { margin-top: .28rem; }
.check a { color: var(--blue-700); }

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-5); margin: 0 0 var(--s-5); }
legend { font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); padding-inline: .5rem; }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* 19 Tables ============================================================= */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 44rem; }
.table caption { text-align: left; font-size: .8125rem; color: var(--slate-2); padding-bottom: var(--s-3); }
.table th, .table td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2); border-bottom: 2px solid var(--gold-600); white-space: nowrap; }
.table tbody th { font-weight: 600; color: var(--navy-900); }
.table tbody tr:hover { background: var(--mist); }

/* 20 Breadcrumbs, footer, flash ========================================= */

.crumbs { padding-block: var(--s-4); border-bottom: 1px solid var(--line-2); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; font-size: .8125rem; color: var(--slate-2); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line); }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--blue-700); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--navy-900); font-weight: 500; }

.site-footer { background: var(--navy-900); color: var(--on-dark-soft); padding-block: var(--s-8) var(--s-5); border-top: 2px solid var(--gold-500); }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s-6); padding-bottom: var(--s-7); border-bottom: 1px solid var(--line-dark); }
.footer-brand img { height: 44px; margin-bottom: var(--s-4); }
.footer-def { font-size: .875rem; line-height: 1.6; max-width: 42ch; }
.footer-col h2 { font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-500); margin-bottom: var(--s-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col a { color: var(--on-dark-soft); text-decoration: none; font-size: .875rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-contact { font-size: .875rem; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.footer-contact a { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); justify-content: space-between; align-items: center; padding-top: var(--s-5); font-size: .8125rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }

.flash { padding: var(--s-4) var(--s-5); border-radius: var(--radius); margin-bottom: var(--s-5); font-size: .9375rem; border: 1px solid; }
.flash--success { background: #eef7f2; border-color: var(--ok); color: #145235; }
.flash--error { background: #fdf0f0; border-color: var(--error); color: #7f1a21; }
.flash--info { background: var(--mist); border-color: var(--line); color: var(--ink); }

/* 21 Motion ============================================================= */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* 22 Responsive ========================================================= */

@media (max-width: 1080px) {
  :root { --gutter: 130px; }
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .benefits { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }

  /* Membership categories become a snap carousel with a visible edge, so it
     is obvious there is more to the right. */
  .grid--5 {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--s-4);
    margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  }
  .grid--5 > * { scroll-snap-align: start; }

  .index-item { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .index-item__num { order: -1; }
  .index-item__end { display: none; }
  .event { grid-template-columns: minmax(0, 1fr); }
  .event__date { display: flex; gap: .5rem; align-items: baseline; text-align: left; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 var(--s-3); }
  .event__day { font-size: 1.4rem; }
  .chapter-row { grid-template-columns: 4rem minmax(0, 1fr); row-gap: var(--s-2); }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* 23 Accessibility and print =========================================== */

:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }
.section--dark :focus-visible, .section--deep :focus-visible, .hero :focus-visible { outline-color: var(--gold-500); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

@media (forced-colors: active) {
  .card, .event, .quote, .btn { border: 1px solid ButtonBorder; }
  .btn { forced-color-adjust: none; }
}

@media print {
  .topbar, .navbar, .nav, .newsletter, .site-footer, .btn { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}

/* ==========================================================================
   24 Image slots and portraits
   ========================================================================== */

.imgslot {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
/* Space is reserved whether the file is present or not, so dropping the real
   photograph in later cannot shift the layout. */
.imgslot > img,
.imgslot__ph {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 16/9);
  object-fit: cover;
}

.imgslot__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  text-align: center;
  padding: var(--s-5);
  background:
    repeating-linear-gradient(
      135deg,
      var(--mist) 0 10px,
      #eef1f7 10px 20px
    );
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--slate-2);
}
.imgslot__badge {
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-800);
  background: var(--gold-500);
  padding: .15rem .5rem;
  border-radius: var(--radius);
}
.imgslot__subject {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy-900);
  max-width: 34ch;
  line-height: 1.35;
}
.imgslot__spec,
.imgslot__alt {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--slate-2);
  max-width: 40ch;
}
.imgslot__alt { font-style: normal; color: var(--gold-600); }
.imgslot__caption {
  font-size: .8125rem;
  color: var(--slate);
  padding-top: var(--s-3);
}

/* On dark bands the placeholder inverts so it stays legible. */
.section--dark .imgslot__ph,
.section--deep .imgslot__ph,
.hero .imgslot__ph {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, rgba(255,255,255,.09) 10px 20px);
  border-color: var(--line-dark);
}
.section--dark .imgslot__subject,
.section--deep .imgslot__subject,
.hero .imgslot__subject { color: #fff; }
.section--dark .imgslot__spec,
.section--deep .imgslot__spec,
.hero .imgslot__spec { color: var(--on-dark-soft); }

/* Portraits */
.portrait { display: inline-block; flex: none; line-height: 0; }
.portrait > img, .portrait__ph {
  display: block;
  width: var(--px);
  height: var(--px);
  object-fit: cover;
}
.portrait--sm { --px: 48px; }
.portrait--md { --px: 80px; }
.portrait--lg { --px: 140px; }
.portrait--xl { --px: 200px; }
.portrait--circle > img, .portrait--circle .portrait__ph { border-radius: 50%; }
.portrait--square > img, .portrait--square .portrait__ph { border-radius: var(--radius); }

.portrait__ph {
  display: grid;
  place-items: center;
  background: var(--navy-800);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(var(--px) * .34);
  line-height: 1;
  border: 1px solid var(--line-dark);
}

/* ==========================================================================
   25 Council pages
   ========================================================================== */

/* Council hero: full-bleed photograph with the headline over it. The overlay
   is a solid navy scrim rather than a soft gradient, so text contrast is
   predictable regardless of which photograph is dropped in. */
.council-hero { position: relative; background: var(--navy-900); overflow: hidden; }
.council-hero .imgslot { position: absolute; inset: 0; border-radius: 0; }
.council-hero .imgslot > img,
.council-hero .imgslot__ph { height: 100%; aspect-ratio: auto; }
.council-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8,35,78,.94) 0%, rgba(13,50,113,.88) 55%, rgba(13,50,113,.72) 100%);
}
.council-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  max-width: 46rem;
}
.council-hero h1 { color: #fff; }
.council-hero p { color: var(--on-dark-soft); }
.council-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-900);
  background: var(--gold-500);
  padding: .3rem .6rem;
  border-radius: var(--radius);
  margin-bottom: var(--s-5);
}

/* Qualify panel — the eligibility statement, given its own bordered block
   because it is the single most-read element on a council page. */
.qualify {
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-600);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--paper);
}
.qualify h2 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); }
.qualify ul { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.qualify li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-2);
  font-size: .9375rem;
}
.qualify li:first-child { border-top: 0; }
.qualify li::before {
  content: "→";
  color: var(--gold-600);
  font-weight: 600;
}
.qualify__note {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--slate);
}

/* Alternating image/text rows for "why join". */
.altrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.altrow:first-child { border-top: 0; }
.altrow--flip > .altrow__media { order: 2; }
.altrow__num {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  color: var(--gold-600);
  display: block;
  margin-bottom: var(--s-3);
}
.altrow h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.altrow p { color: var(--slate); max-width: 52ch; }

/* Council index cards. */
.council-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-top: 3px solid var(--pillar, var(--gold-600));
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.council-card:hover { transform: translateY(-2px); border-color: var(--blue-500); }
.council-card .imgslot { border-radius: 0; }
.council-card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.council-card__code {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  color: var(--slate-2);
  margin-bottom: var(--s-2);
}
.council-card h3 { font-size: 1.2rem; margin-bottom: var(--s-2); }
.council-card h3 a { color: inherit; text-decoration: none; }
.council-card h3 a:hover { color: var(--blue-700); }
.council-card p { font-size: .9375rem; color: var(--slate); }
.council-card__foot { margin-top: auto; padding-top: var(--s-4); }

/* Member testimonial card with headshot and organisation logo. */
.member-quote {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-600);
  border-radius: var(--radius);
}
.member-quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--navy-900);
}
.member-quote__who { display: flex; align-items: center; gap: var(--s-4); }
.member-quote__name { font-weight: 600; color: var(--navy-900); font-size: .9375rem; }
.member-quote__role { font-size: .875rem; color: var(--slate); }
.member-quote__org { margin-left: auto; }

/* ==========================================================================
   26 Success stories
   ========================================================================== */

.story {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.story:hover { transform: translateY(-2px); border-color: var(--blue-500); }
.story .imgslot { border-radius: 0; }
.story__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; gap: var(--s-3); }
.story__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.story h3 { font-size: 1.1rem; margin: 0; line-height: 1.3; }
.story h3 a { color: inherit; text-decoration: none; }
.story h3 a:hover { color: var(--blue-700); }
.story p { font-size: .9375rem; color: var(--slate); margin: 0; }
.story__who {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.story__who strong { display: block; font-size: .875rem; color: var(--navy-900); }
.story__who span { font-size: .8125rem; color: var(--slate); }

/* Featured story: wider, image beside the text. */
.story--featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
}
.story--featured .imgslot,
.story--featured .imgslot > img,
.story--featured .imgslot__ph { height: 100%; aspect-ratio: auto; min-height: 18rem; }
.story--featured .story__body { padding: clamp(1.5rem, 3vw, 2.5rem); justify-content: center; }
.story--featured h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); }

/* Mid-list call to action, mirroring the pattern of breaking a long grid. */
.story-cta {
  grid-column: 1 / -1;
  background: var(--navy-800);
  color: var(--on-dark);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: center;
  justify-content: space-between;
}
.story-cta h2 { color: #fff; font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); margin: 0 0 .35rem; }
.story-cta p { color: var(--on-dark-soft); margin: 0; max-width: 46ch; font-size: .9375rem; }

/* Pagination */
.pager { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; margin-top: var(--s-7); }
.pager a, .pager span {
  min-width: 2.5rem;
  padding: .55rem .8rem;
  text-align: center;
  font-family: var(--mono);
  font-size: .8125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--slate);
}
.pager a:hover { border-color: var(--blue-700); color: var(--blue-700); }
.pager [aria-current="page"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; font-weight: 600; }

/* ==========================================================================
   27 Chapter directory
   ========================================================================== */

/* Region filter. Real links with a query string, so filtering works without
   JavaScript and each region is independently shareable. */
.region-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-6);
}
.region-filter a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.region-filter a:hover { border-color: var(--blue-700); color: var(--blue-700); }
.region-filter a[aria-current="true"] {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}
.region-filter b {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  opacity: .75;
}

.region-block { margin-bottom: var(--s-8); }
.region-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--gold-600);
  margin-bottom: 0;
}
.region-block__head h2 { margin: 0; font-size: 1.3rem; }
.region-block__count { font-family: var(--mono); font-size: .75rem; color: var(--slate-2); }

.chapter-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.chapter-table th, .chapter-table td {
  text-align: left;
  padding: .9rem 1rem .9rem 0;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.chapter-table thead th {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-2);
  font-weight: 500;
  padding-top: var(--s-4);
}
.chapter-table tbody tr:hover { background: var(--mist); }
.chapter-table .ch-city { font-weight: 600; color: var(--navy-900); }
.chapter-table .ch-city a { color: inherit; text-decoration: none; }
.chapter-table .ch-city a:hover { color: var(--blue-700); text-decoration: underline; }
.chapter-table .ch-code { font-family: var(--mono); font-size: .6875rem; color: var(--slate-2); display: block; margin-top: .15rem; }
.chapter-table .ch-person { display: flex; align-items: center; gap: .6rem; }
.chapter-table .ch-person span { color: var(--slate); }
.chapter-table .ch-none { color: var(--slate-2); }

@media (max-width: 860px) {
  .altrow { grid-template-columns: minmax(0, 1fr); }
  .altrow--flip > .altrow__media { order: 0; }
  .story--featured { grid-template-columns: minmax(0, 1fr); }
  .story--featured .imgslot,
  .story--featured .imgslot > img,
  .story--featured .imgslot__ph { min-height: 0; aspect-ratio: 16/9; }

  /* Chapter table becomes stacked cards; a three-column table is unusable
     at 375px and horizontal scrolling on a directory is worse. */
  .chapter-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .chapter-table tr { display: block; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .chapter-table td { display: block; border: 0; padding: .2rem 0; }
  .chapter-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--slate-2);
    margin-top: .5rem;
  }
  .story-cta { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   28 Gold as secondary — applied
   The mark carries a single gold rule. This extends it into a working
   secondary colour: section rules, a gold button, warm tints and accent
   bands, without letting gold compete with navy for primary actions.
   ========================================================================== */

/* Section headings now carry the gold rule the clause index used to provide. */
.section-head { position: relative; padding-top: var(--s-5); }
.section-head::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3.5rem;
  height: 3px;
  background: var(--gold-500);
  border-radius: 2px;
}
.section--dark .section-head::before,
.section--deep .section-head::before { background: var(--gold-400); }

.eyebrow { color: var(--gold-700); }
.section--dark .eyebrow, .section--deep .eyebrow { color: var(--gold-400); }

/* A gold button. Used for secondary emphasis where a second navy button
   would compete with the primary action. */
.btn--gold {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}
.btn--gold:hover {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--navy-900);
}
.btn--light:hover { background: var(--gold-400); border-color: var(--gold-400); }
.btn--outline-light:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }

/* Warm section tint, alternating with the cool one. */
.section--warm { background: var(--warm); }
.section--warm .card,
.section--warm .event,
.section--warm .quote { background: #fff; }

/* Gold top edge on the section that follows a dark band, so the transition
   reads as intentional. */
.section--goldtop { border-top: 3px solid var(--gold-500); }

/* Cards: gold rule by default rather than a neutral one. */
.card { border-top-color: var(--pillar, var(--gold-500)); }
.card:hover { border-color: var(--gold-500); }

.answer { border-left-color: var(--gold-500); background: var(--gold-100); padding: var(--s-4); border-radius: var(--radius); }
.section--dark .answer, .section--deep .answer {
  background: rgba(212, 175, 55, .1);
  border-left-color: var(--gold-400);
  color: var(--on-dark);
}

/* Statistics: gold figures on navy is the single brightest moment on the
   page, which suits a band whose job is to be looked at. */
.stat__figure { color: var(--gold-400); }
.stat { border-top: 3px solid transparent; transition: border-color .18s var(--ease); }
.stat:hover { border-top-color: var(--gold-500); }

/* Pillar band: gold divider rules and gold hover. */
.pillar { border-left-color: rgba(212, 175, 55, .3); }
.pillar h3 a { transition: color .18s var(--ease); }
.pillar h3 a:hover { color: var(--gold-400) !important; }
.pillar__code { background: var(--gold-500); color: var(--navy-900); }

/* Benefits: numbered in gold, with a gold wash on hover. */
.benefit__num { color: var(--gold-700); font-size: .8125rem; }
.benefit { transition: background-color .18s var(--ease); }
.benefit:hover { background: var(--gold-100); }

/* Index list: gold number, gold left edge on hover. */
.index-item { border-left: 3px solid transparent; padding-left: var(--s-4); transition: border-color .18s var(--ease), background-color .18s var(--ease); }
.index-item:hover { background: var(--gold-100); border-left-color: var(--gold-500); }
.index-item__num { color: var(--gold-700); font-weight: 500; }

/* Events: gold date block. */
.event__date { border-right-color: var(--gold-200); }
.event__day { color: var(--gold-700); }
.event { border-top: 2px solid transparent; }
.event:hover { border-top-color: var(--gold-500); border-color: var(--gold-500); }

/* Tags and status pills pick up gold. */
.tag { border-color: var(--gold-200); background: var(--gold-100); color: var(--gold-800); }
.status--forming { color: var(--gold-700); background: var(--gold-100); border-color: var(--gold-200); }

/* Region and FAQ rules. */
.region__name, .region-block__head { border-bottom-color: var(--gold-500); }
.faq__item > summary::after { color: var(--gold-600); font-size: 1.3rem; }
.faq__item[open] > summary { color: var(--gold-800); }
.faq__item[open] { background: var(--gold-100); }
.faq__item[open] > summary, .faq__item[open] .faq__answer { padding-inline: var(--s-4); }

/* Table headers keep the gold underline; rows warm on hover. */
.table tbody tr:hover { background: var(--gold-100); }
.chapter-table thead th { border-bottom: 2px solid var(--gold-500); }
.chapter-table tbody tr:hover { background: var(--gold-100); }

/* Region filter: gold active state reads brighter than navy did. */
.region-filter a[aria-current="true"] { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.region-filter a:hover { border-color: var(--gold-500); color: var(--gold-800); background: var(--gold-100); }

/* Footer: gold headings and a gold top edge. */
.site-footer { border-top: 3px solid var(--gold-500); }
.footer-col h2 { color: var(--gold-400); }
.footer-col a:hover { color: var(--gold-400); }

/* Newsletter and CTA panels get a warm ground. */
.cta-panel:first-child { background: var(--gold-100); }
.newsletter input[type="email"]:focus-visible { border-color: var(--gold-400); }

/* Quotes and testimonials. */
.quote, .member-quote { border-left-color: var(--gold-500); }
.quote::before, .member-quote::before {
  content: "\201C";
  font-family: var(--display);
  font-size: 3rem;
  line-height: .8;
  color: var(--gold-400);
  display: block;
  margin-bottom: .25rem;
}

/* Qualify panel on council pages: warm ground, gold rule. */
.qualify { background: var(--gold-100); border-top-color: var(--gold-500); }
.qualify li::before { color: var(--gold-700); }

/* Link underlines pick up gold on hover. */
.prose a { text-decoration-color: var(--gold-500); }
.link-arrow:hover { color: var(--gold-800); border-bottom-color: var(--gold-500); }

/* Active nav item: gold underline, brighter than the previous bronze. */
.nav__link[aria-current="page"],
.nav__item--active > .nav__link { box-shadow: inset 0 -3px 0 var(--gold-500); }

/* ==========================================================================
   29 Two-tier header
   Row 1 (topbar, white): logo, secondary links, social, join button.
   Row 2 (navbar, navy):  main navigation only.
   Under 1024px both collapse to one bar with a menu button.
   ========================================================================== */

.topbar { background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 5rem;
}
.topbar__right { display: flex; align-items: center; gap: var(--s-5); }
.topbar__links { display: flex; align-items: center; gap: var(--s-5); }
.topbar__links a {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--slate);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.topbar__links a:hover { color: var(--navy-900); border-bottom-color: var(--gold-500); }

.social { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.social a {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--slate);
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.social svg { width: 15px; height: 15px; }
.social a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }

/* Navbar styling lives in section 31. */
.navbar__inner { display: flex; align-items: center; justify-content: space-between; }

.nav__mobile-extra { display: none; }

/* Menu button lives in the topbar and is hidden on desktop. */
.nav-toggle { display: none; }

@media (max-width: 1024px) {
  .topbar__links, .social { display: none; }
  .topbar__inner { min-height: 4.25rem; }
  .topbar__right { gap: var(--s-3); }
  .nav-toggle { display: inline-flex; }

  /* The navbar band is hidden on mobile, but the panel it contains must still
     be openable. Rather than relying on :has() to reveal the parent, the
     navbar stays in the layout at zero height and the panel escapes it with
     position:fixed. Works in every browser, no :has() dependency. */
  .navbar {
    position: static;
    height: 0;
    overflow: visible;
    background: none;
    border: 0;
  }
  .navbar__inner { min-height: 0; }
  .nav { display: none; }

  /* Mobile panel: full screen, scrollable, focus-trapped in JS. */
  .nav.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--paper);
    overflow-y: auto;
    padding: 4.5rem 0 var(--s-9);
  }

  .nav.is-open .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  }
  .nav.is-open .nav__item { border-bottom: 1px solid var(--line); }
  .nav.is-open .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: 1.05rem;
    color: var(--navy-900);
    background: none;
    box-shadow: none;
  }
  .nav.is-open .nav__item--active > .nav__link { color: var(--gold-800); background: none; box-shadow: none; }

  .nav.is-open .nav__mobile-extra {
    display: grid;
    gap: var(--s-4);
    padding: var(--s-6) clamp(1.25rem, 4vw, 2.5rem) 0;
  }
  .nav__mobile-extra a:not(.btn) {
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy-900);
    text-decoration: none;
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--line);
  }

  .nav__close {
    position: fixed;
    top: 1rem;
    right: clamp(1.25rem, 4vw, 2.5rem);
    z-index: 95;
    background: var(--navy-800);
    border: 0;
    border-radius: var(--radius);
    padding: .6rem 1rem;
    font-family: var(--body);
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
  }
}

@media (min-width: 1025px) { .nav__close { display: none; } }

/* ==========================================================================
   30 Responsive — full sweep
   Mobile-first corrections layered over the desktop rules above. Breakpoints
   chosen from content, not device names: each is where a specific layout
   stops working, checked at 320, 375, 414, 768, 1024, 1280 and 1440.
   ========================================================================== */

/* Fluid type: everything scales between 360px and 1280px viewports, so there
   are no sudden jumps at breakpoints. */
html { font-size: clamp(15px, 0.9rem + 0.18vw, 17px); }

/* Nothing may exceed the viewport. The usual culprits are wide tables,
   long unbroken URLs and fixed-width media. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, table, pre { max-width: 100%; }
p, li, h1, h2, h3, h4, td, th, dd, dt, blockquote, figcaption { overflow-wrap: anywhere; hyphens: auto; }
.mono, .imgslot__spec, code { overflow-wrap: break-word; }

/* ---- 1280px: pull the grid in before it gets cramped ------------------- */
@media (max-width: 1280px) {
  .navbar .nav__link { padding-inline: .75rem; font-size: .9rem; }
  .topbar__links { gap: var(--s-4); }
}

/* ---- 1180px: five-across membership cards stop fitting ----------------- */
@media (max-width: 1180px) {
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---- 1024px: tablet. Header collapses (rules in §29) ------------------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .hero h1 { max-width: 100%; }
  .hero__panel { max-width: 34rem; }
  .council-hero__inner { max-width: 100%; }
  .newsletter { grid-template-columns: minmax(0, 1fr); }
  .cta-split { grid-template-columns: minmax(0, 1fr); }
  .section { padding-block: clamp(2.5rem, 5vw, 4rem); }
}

/* ---- 860px: two-column content rows go single ------------------------- */
@media (max-width: 860px) {
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar { border-left: 0; padding-inline: 0; }
  .pillar:nth-child(even) { padding-left: var(--s-5); border-left: 1px solid rgba(212,175,55,.3); }
  .region-block__head { flex-direction: column; align-items: flex-start; gap: .35rem; }
}

/* ---- 720px: phone landscape and large phones -------------------------- */
@media (max-width: 720px) {
  .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .benefits { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Membership cards: horizontal snap-scroll with a peeking edge, so it is
     obvious there is more to the right. */
  .grid--5 {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: var(--s-4);
    margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  }
  .grid--5 > * { scroll-snap-align: start; }

  .index-item { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding-left: var(--s-3); }
  .index-item__num { order: -1; }
  .index-item__end { display: none; }

  .event { grid-template-columns: minmax(0, 1fr); }
  .event__date {
    display: flex; gap: .5rem; align-items: baseline; text-align: left;
    border-right: 0; border-bottom: 1px solid var(--gold-200); padding: 0 0 var(--s-3);
  }
  .event__day { font-size: 1.5rem; }
  .event__month, .event__year { display: inline; }

  .altrow { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .altrow--flip > .altrow__media { order: 0; }
  .story--featured { grid-template-columns: minmax(0, 1fr); }
  .story-cta { flex-direction: column; align-items: flex-start; }

  /* Buttons go full width — thumb targets, not decoration. */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; justify-content: center; }
  .newsletter__row { flex-direction: column; }
  .newsletter__row .btn { width: 100%; justify-content: center; }

  /* Wide tables scroll inside their own container with a visible edge. */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  }
  .table { min-width: 36rem; }

  .quote::before, .member-quote::before { font-size: 2.25rem; }
  .member-quote__who { flex-wrap: wrap; }
  .member-quote__org { margin-left: 0; }
}

/* ---- 480px: small phones ---------------------------------------------- */
@media (max-width: 480px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .pillars__grid { grid-template-columns: minmax(0, 1fr); }
  .pillar:nth-child(even) { padding-left: 0; border-left: 0; }
  .pillar { border-top: 1px solid rgba(212,175,55,.3); padding-block: var(--s-5); }
  .pillar:first-child { border-top: 0; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .grid--5 { grid-auto-columns: 88%; }
  .section-head::before { width: 2.5rem; }

  /* Section padding tightens so content is not squeezed into a narrow column. */
  .shell { padding-inline: 1.1rem; }
  .card, .qualify, .quote, .member-quote, .cta-panel { padding: var(--s-5) var(--s-4); }
  .hero__panel { padding: var(--s-5) var(--s-4); }

  .brand img { height: 38px; }
  .brand__fallback strong { font-size: 1.25rem; }
  .brand__fallback span { font-size: .5rem; letter-spacing: .2em; }
  .nav-toggle__label { display: none; }
  .nav-toggle { padding: .55rem .7rem; }
}

/* ---- 360px: the floor. Nothing may break below this ------------------- */
@media (max-width: 360px) {
  .shell { padding-inline: .9rem; }
  h1 { font-size: 1.75rem; }
  .btn { padding: .8rem 1rem; font-size: .875rem; }
  .imgslot__subject { font-size: .875rem; }
  .imgslot__spec, .imgslot__alt { display: none; }
}

/* ---- Touch devices: bigger targets, no hover-dependent behaviour ------- */
@media (hover: none) {
  .btn, .nav__link, .social a, .region-filter a, .pager a {
    min-height: 44px;                       /* WCAG 2.2 target size */
  }
  .nav__link { display: flex; align-items: center; }
  .card:hover, .story:hover, .council-card:hover { transform: none; }
  .index-item:hover { background: transparent; }
}

/* ---- Landscape phones: reclaim vertical space ------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-block: var(--s-6); }
  .council-hero__inner { padding-block: var(--s-6); }
  .nav.is-open { padding-top: 3.5rem; }
}

/* ---- Large screens: cap the measure, do not stretch ------------------- */
@media (min-width: 1600px) {
  :root { --shell: 1320px; }
  .section { padding-block: 7rem; }
}

/* Hero now carries an image, so it becomes a three-part grid on desktop. */
.hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr) minmax(0, .85fr); }
.hero__media { border: 1px solid var(--line-dark); }

@media (max-width: 1180px) {
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .hero__media { display: none; }        /* text and the join panel come first */
}
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__media { display: block; }       /* reappears stacked, below the copy */
}

/* ==========================================================================
   31 Navbar and mega-menu
   The navigation is the first thing an institutional visitor judges, so it
   gets the polish budget: a deep navy band, gold indicators that slide rather
   than snap, and dropdown panels that carry a short description per link so
   the menu answers "what is this" before the click.
   ========================================================================== */

/* ---- Topbar refinements ---------------------------------------------- */

.topbar__inner { min-height: 5.25rem; }
.brand img { height: 50px; transition: opacity .2s var(--ease); }
.brand:hover img { opacity: .82; }

.topbar__links a {
  position: relative;
  border-bottom: 0;
  padding-block: .35rem;
}
/* Underline grows from the centre rather than appearing all at once. */
.topbar__links a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold-500);
  transform: translateX(-50%);
  transition: width .22s var(--ease);
}
.topbar__links a:hover::after { width: 100%; }

.social a { border-radius: 999px; }
.social a:hover { transform: translateY(-1px); }
.social a { transition: background-color .18s var(--ease), color .18s var(--ease),
                        border-color .18s var(--ease), transform .18s var(--ease); }

.topbar__cta {
  box-shadow: 0 1px 0 rgba(107, 82, 20, .35);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              background-color .18s var(--ease);
}
.topbar__cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(138, 106, 24, .55); }
.topbar__cta:active { transform: translateY(0); }

/* ---- Navbar band ------------------------------------------------------ */

.navbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  border-top: 1px solid rgba(212, 175, 55, .35);
  transition: box-shadow .25s var(--ease);
}
/* Shadow appears only once the page has scrolled, so the band sits flat at
   rest and lifts when it starts overlapping content. */
.navbar.is-stuck { box-shadow: 0 10px 30px -12px rgba(8, 35, 78, .55); }

.navbar__inner { min-height: 3.5rem; }
.navbar .nav__list { gap: 0; }
.navbar .nav__item { position: relative; }

.navbar .nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 1.15rem 1.05rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .012em;
  color: rgba(255, 255, 255, .86);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: color .18s var(--ease);
}

/* Gold indicator wipes in from the left. One transition, no layout shift. */
.navbar .nav__link::after {
  content: "";
  position: absolute;
  left: 1.05rem; right: 1.05rem; bottom: 0;
  height: 3px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .26s var(--ease);
}
.navbar .nav__link:hover,
.navbar .nav__link:focus-visible { color: #fff; }
.navbar .nav__link:hover::after,
.navbar .nav__link[aria-expanded="true"]::after { transform: scaleX(1); }

.navbar .nav__item--active > .nav__link { color: #fff; }
.navbar .nav__item--active > .nav__link::after { transform: scaleX(1); }
.navbar .nav__link[aria-current="page"] { color: #fff; }
.navbar .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__caret { width: .5rem; height: .5rem; opacity: .7; transition: transform .26s var(--ease), opacity .18s var(--ease); }
.navbar .nav__link:hover .nav__caret { opacity: 1; }
.navbar .nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); opacity: 1; }

/* ---- Mega-menu -------------------------------------------------------- */

.megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 70;
  min-width: 30rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-500);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 26px 60px -22px rgba(8, 35, 78, .42);

  /* Hidden but still laid out, so the open transition has somewhere to move
     from. visibility (not display) keeps it out of the tab order. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.megamenu--wide { min-width: 46rem; }

.nav__item--open > .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s var(--ease), transform .22s var(--ease), visibility 0s;
}

/* Panels near the right edge open leftwards so they never overflow. */
.nav__item:nth-last-child(-n+3) > .megamenu { left: auto; right: 0; }

.megamenu__inner { display: grid; grid-template-columns: minmax(0, 1fr); }
.megamenu--wide .megamenu__inner,
.megamenu--feature .megamenu__inner { grid-template-columns: minmax(0, 1fr) 15rem; }

.megamenu__list {
  list-style: none;
  margin: 0;
  padding: var(--s-4);
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: .15rem .5rem;
  align-content: start;
}

.megamenu__list a {
  display: block;
  padding: .7rem .8rem;
  border-radius: var(--radius);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color .16s var(--ease), border-color .16s var(--ease),
              transform .16s var(--ease);
}
.megamenu__list a:hover,
.megamenu__list a:focus-visible {
  background: var(--gold-100);
  border-left-color: var(--gold-500);
  transform: translateX(2px);
}
.megamenu__list a[aria-current="page"] {
  background: var(--gold-100);
  border-left-color: var(--gold-600);
}

.megamenu__label {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy-900);
  line-height: 1.3;
}
.megamenu__desc {
  display: block;
  font-size: .8125rem;
  color: var(--slate);
  line-height: 1.4;
  margin-top: .15rem;
}
.megamenu__list a:hover .megamenu__label { color: var(--blue-700); }

/* Feature panel: one promoted message per menu, on a warm ground so it reads
   as a distinct column rather than another link. */
.megamenu__feature {
  background: var(--gold-100);
  border-left: 1px solid var(--line);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.megamenu__eyebrow {
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.megamenu__title {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy-900);
  margin: 0;
  line-height: 1.25;
}
.megamenu__body {
  font-size: .8125rem;
  color: var(--slate);
  margin: 0;
  line-height: 1.5;
}
.megamenu__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
  border-bottom: 2px solid var(--gold-500);
  padding-bottom: 2px;
  align-self: flex-start;
}
.megamenu__cta::after { content: "→"; transition: transform .18s var(--ease); }
.megamenu__cta:hover { color: var(--gold-800); }
.megamenu__cta:hover::after { transform: translateX(3px); }

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

@media (max-width: 1024px) {
  .navbar { border-top: 0; background: none; box-shadow: none; }
  .navbar.is-stuck { box-shadow: none; }

  .nav.is-open .nav__link {
    color: var(--navy-900);
    padding: 1rem 0;
    font-size: 1.05rem;
    width: 100%;
    justify-content: space-between;
  }
  .nav.is-open .nav__link::after { display: none; }
  .nav.is-open .nav__item--active > .nav__link { color: var(--gold-800); }

  /* Panels become inline accordions; no absolute positioning, no shadow. */
  .nav.is-open .megamenu {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    border-left: 3px solid var(--gold-500);
    border-radius: 0;
    box-shadow: none;
    background: none;
    display: none;
    margin: 0 0 var(--s-4) 0;
  }
  .nav.is-open .nav__item--open > .megamenu { display: block; }
  .nav.is-open .megamenu__inner { grid-template-columns: minmax(0, 1fr); }
  .nav.is-open .megamenu__list { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 var(--s-4); }
  .nav.is-open .megamenu__feature { display: none; }   /* links first on a phone */
}

@media (prefers-reduced-motion: reduce) {
  .megamenu, .navbar .nav__link::after, .topbar__links a::after,
  .nav__caret, .megamenu__list a { transition: none !important; }
}

/* ==========================================================================
   32 Brand lockup
   The supplied logo is 250x150 (5:3). Setting height alone and letting width
   follow keeps the ratio exact at every breakpoint; width:auto is stated
   explicitly so the width/height attributes cannot force a distortion.
   ========================================================================== */

.brand img { height: 54px; width: auto; max-width: none; }
.footer-brand img { height: 66px; width: auto; margin-bottom: var(--s-4); }

@media (max-width: 1024px) { .brand img { height: 46px; } }
@media (max-width: 480px)  { .brand img { height: 38px; } }


/* ==========================================================================
   33 House aspect ratio — 16:9
   Every image slot is 16:9 unless a component explicitly overrides it. Slots
   reserve their space with aspect-ratio, so the ratio holds whether or not
   the photograph has arrived, and dropping files in later shifts nothing.
   ========================================================================== */

.imgslot { --ratio: 16/9; }

/* Council hero: the photograph is a background, so it fills the band rather
   than holding 16:9. The band itself is capped to a 16:9-ish letterbox. */
.council-hero .imgslot { --ratio: auto; }
.council-hero__inner { min-height: clamp(18rem, 34vw, 30rem); display: flex; flex-direction: column; justify-content: center; }

/* Featured success story: image beside text on desktop, so it fills its
   column; below 860px it returns to 16:9 stacked above the text. */
.story--featured .imgslot { --ratio: auto; }
@media (max-width: 860px) {
  .story--featured .imgslot { --ratio: 16/9; }
  .story--featured .imgslot > img,
  .story--featured .imgslot__ph { height: auto; min-height: 0; }
}

/* Hero media column sits at 16:9 like everything else. */
.hero__media { --ratio: 16/9; }

/* ==========================================================================
   34 Photographic hero
   Full-bleed event photograph with the copy overlaid.

   The scrim is the whole problem here. A group photograph has faces, light
   ceilings and a bright projector screen across the middle, so a single flat
   overlay either washes out the picture or leaves the text illegible. Three
   layers solve it: a horizontal gradient that is dense on the left where the
   copy sits and clears to the right where the delegates are, a vertical
   gradient anchoring the bottom edge, and a slight desaturation of the image
   itself so the navy type has something calm to sit on.
   ========================================================================== */

.hero--photo {
  position: relative;
  isolation: isolate;
  min-height: clamp(30rem, 46vw, 42rem);
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--navy-900);
  overflow: hidden;
}

/* The old decorative radial belonged to the gradient hero. */
.hero--photo::after { content: none; }

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;   /* keeps faces in frame as the band crops */
  filter: saturate(.92) contrast(1.02);
}

/* Layer 1 — horizontal scrim: dense behind the copy, clear over the group. */
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(6, 34, 79, .96) 0%,
      rgba(6, 34, 79, .90) 26%,
      rgba(6, 34, 79, .70) 45%,
      rgba(6, 34, 79, .34) 62%,
      rgba(6, 34, 79, .12) 80%,
      rgba(6, 34, 79, .05) 100%),
    linear-gradient(to top,
      rgba(6, 34, 79, .78) 0%,
      rgba(6, 34, 79, .18) 32%,
      rgba(6, 34, 79, 0) 60%);
}

/* Layer 2 — the spectrum edge, tying the band back to the mark. */
.hero--photo .shell { position: relative; z-index: 2; }
.hero--photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  z-index: 3;
  background: linear-gradient(90deg,
    var(--c-blue) 0 11.11%, var(--c-teal) 11.11% 22.22%,
    var(--c-yellow) 22.22% 33.33%, var(--c-orange) 33.33% 44.44%,
    var(--c-crimson) 44.44% 55.55%, var(--c-magenta) 55.55% 66.66%,
    var(--c-purple) 66.66% 77.77%, var(--c-violet) 77.77% 88.88%,
    var(--c-indigo) 88.88% 100%);
}

.hero--photo .hero__inner {
  display: block;          /* overrides the old three-column grid */
  width: 100%;
}
.hero__copy { max-width: 40rem; }

.hero__motto {
  display: inline-block;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--navy-900);
  background: var(--c-yellow);
  padding: .4rem .75rem;
  border-radius: 2px;
  margin-bottom: var(--s-5);
}

.hero--photo h1 {
  color: #fff;
  max-width: 18ch;
  /* A soft shadow rather than a heavier scrim: keeps the photograph visible
     while guaranteeing the headline reads over any part of it. */
  text-shadow: 0 2px 24px rgba(6, 34, 79, .55);
}

.hero--photo .hero__lede {
  color: #dce6f5;
  max-width: 46ch;
  font-size: clamp(1.02rem, .98rem + .35vw, 1.2rem);
  text-shadow: 0 1px 12px rgba(6, 34, 79, .5);
}

/* Buttons side by side, staying side by side. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.hero__actions .btn { padding: .95rem 1.6rem; font-size: .9375rem; }
.hero__actions .btn--gold {
  box-shadow: 0 8px 24px -10px rgba(212, 175, 55, .8);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .18s var(--ease);
}
.hero__actions .btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(212, 175, 55, .95); }
.hero__actions .btn--outline-light { border-color: rgba(255, 255, 255, .55); backdrop-filter: blur(2px); }

/* Admission steps as an inline rule-separated strip. */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.hero__facts li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .35rem 1.25rem .35rem 0;
  margin-right: 1.25rem;
  border-right: 1px solid rgba(255, 255, 255, .18);
}
.hero__facts li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero__facts b {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  color: var(--c-yellow);
}
.hero__facts span { font-size: .875rem; color: #cfdcef; }

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

@media (max-width: 1024px) {
  .hero--photo { min-height: clamp(26rem, 54vw, 34rem); }
  .hero__copy { max-width: 34rem; }
}

@media (max-width: 720px) {
  /* The mobile file is a 4:3 crop, so the band deepens to suit it and the
     scrim goes vertical — a left-weighted gradient makes no sense once the
     copy sits below the subject rather than beside it. */
  .hero--photo { min-height: 0; padding-block: 0; display: block; }
  .hero__bg { position: relative; inset: auto; height: 58vw; max-height: 22rem; }
  .hero__bg img { object-position: center 40%; }

  .hero--photo::before {
    background: linear-gradient(to top,
      rgba(6, 34, 79, .98) 0%,
      rgba(6, 34, 79, .96) 42%,
      rgba(6, 34, 79, .55) 58%,
      rgba(6, 34, 79, .22) 72%,
      rgba(6, 34, 79, .10) 100%);
  }

  .hero--photo .shell { padding-block: var(--s-6) var(--s-7); }
  .hero__copy { max-width: 100%; }
  .hero--photo h1 { max-width: 100%; }

  /* Buttons stay side by side here, against the global mobile rule that
     stacks .btn-row — two short labels fit, and stacking them pushes the
     admission strip below the fold. */
  .hero__actions { gap: .6rem; }
  .hero__actions .btn { flex: 1 1 10rem; justify-content: center; padding: .85rem 1rem; }

  .hero__facts { margin-top: var(--s-6); }
  .hero__facts li { padding-right: .9rem; margin-right: .9rem; }
}

@media (max-width: 420px) {
  .hero__facts li { flex: 1 1 45%; border-right: 0; margin-right: 0; padding-right: 0; }
  .hero__actions .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__actions .btn--gold:hover { transform: none; }
}

/* ==========================================================================
   35 Gallery
   A fixed three-across grid rather than flexible widths, so a group of two
   photographs does not stretch each one across half the page. Every image is
   shown at the same 3:2 shape, which is what lets photographs of different
   sizes sit in tidy rows.
   ========================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.gallery-item {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.gallery-item:hover { border-color: var(--accent, var(--c-blue)); transform: translateY(-2px); }

/* The photo() helper wraps each image in a figure; flatten its spacing so the
   photograph sits flush inside the card. */
.gallery-item .imgslot { margin: 0; border-radius: 0; }

.gallery-item .imgslot > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;      /* fill the shape; a portrait photo is centre-cropped */
  display: block;
}

/* Missing file: the placeholder keeps the same shape so the grid holds. */
.gallery-item .imgslot__ph {
  aspect-ratio: 3 / 2;
  border: 0;
  border-radius: 0;
}

.gallery-item figcaption {
  padding: var(--s-4);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--slate);
  border-top: 1px solid var(--line-2);
}

@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: minmax(0, 1fr); } }

@media (hover: none) {
  .gallery-item:hover { transform: none; }
}